Commit d5a8054b authored by Olga Brani's avatar Olga Brani
Browse files

astakos_group_form_demo page

astakos_group_ressources_statistics page
parent 6e224d53
......@@ -55,7 +55,7 @@ img.right { margin:0 0 1em 1em; float:right;}
.two-cols .lt { float:left; width:400px;}
.two-cols-blog .rt { float:right; width:220px; margin-left:80px; padding-right:65px;}
.two-cols-blog .lt { overflow:hidden;}
.container h2 { font-weight:700; font-size:1.308em; margin-bottom:1em; }
.container h2 { font-weight:normal; font-size:1.308em; margin-bottom:1em; }
.container h3 { font-weight:normal; margin-bottom:1em; }
.container h2 em { color: #3582AC; font-style:normal; }
/*.content a { border-bottom: 1px solid #F89A1C; text-decoration:none; color:#000; }
......@@ -336,14 +336,14 @@ dl.alt-style dt:nth-child(2n) { background:black; }
.billing table.alt-style .last { text-align:right; }
.table_sorting tr th { cursor:pointer; }
.table_sorting tr th:hover { text-decoration:underline }
table.alt-style tr.tr1 td,
table.alt-style tr.tmore1 td { background:#F2F2F2 }
table.alt-style tr.tr2 td,
table.alt-style tr.tmore2 td { background:#fff }
table.alt-style tr td.info-td { padding:5px; }
table.alt-style tr td.info-td { padding:5px; }
table.alt-style tr td.info-td div { padding:15px; border:1px dashed #000 }
table.alt-style tr td a.more-info { display:inline-block; width:17px; height:16px; background:url(../images/plus-minus.png) no-repeat 0 0; margin-left:10px; }
table.alt-style tr td a.more-info:hover { background-image:url(../images/plus-minus-hover.png); text-decoration:none;}
......@@ -351,4 +351,50 @@ table.alt-style tr td a.open { background-position:-16px 0}
.projects .details a.edit { float:right; margin-left:20px; }
.projects .details .data { overflow:hidden; }
.projects .editable form textarea { width:70%; height:50px; max-width:70%; width:270px; height:120px;}
\ No newline at end of file
.projects .editable form textarea { width:70%; height:50px; max-width:70%; width:270px; height:120px;}
/* quotas-form */
.quotas-form fieldset { background:url(../images/dots.jpg) repeat-x scroll center bottom transparent; margin-bottom:3em; padding-bottom:3em; position:relative; }
.quotas-form fieldset legend { color:#55B577; font-size:1.308em; margin-bottom:2em; }
.quotas-form .with-checkbox .checkbox-widget { margin-top:14px; }
.quotas-form .with-checkbox span.info { bottom:19px; }
.quotas-form .form-row.submit { text-align:center; }
.quotas-form input[type="submit"] { margin:15px 0; background-color:#B3B3B3 }
.quotas-form input[type="submit"]:hover { background:#55B577 }
.quotas-form input[type="submit"]:focus { border-color: #B3B3B3}
.quotas-form input[type="submit"]:focus:hover { border-color: #55B577}
.quotas-form fieldset ul { padding:0; margin:0 0 1em; }
.quotas-form fieldset ul li { list-style:none outside none; float:left; padding:0 0 0 59px; margin:0; }
.quotas-form fieldset ul li:first-child { padding-left:0; }
.quotas-form fieldset ul li a { display:block; border:1px solid #222; color:#222; padding:10px 20px; }
.quotas-form fieldset ul li a:hover { text-decoration:none; border-color:#55B577; color:#55B577; }
.quotas-form fieldset ul li a.selected { background:#55B577; color:#fff; border-color:#55B577; }
.quotas-form p.msg { color:#B3B3B3; }
.quotas-form fieldset legend { margin-bottom:1em; font-size:1.154em }
.quotas-form a.delete { position:absolute; right:0; top:0; color:#B3B3B3; }
.quotas-form .quota { display:none; }
.quotas-form fieldset ul li.rel+li.rel { background:url(../images/quota-related-bg.png) no-repeat left center; }
/* stats */
.stats ul { margin:0; padding:0; list-style:none outside none; }
.stats ul li { margin:0 0 1em 0; padding:0 0 1em 0; list-style:none outside none; background:url(../images/stats-line.jpg) repeat-x left bottom}
.stats .bar { padding:20px 0; text-align:center; float:left; width:200px;}
.stats .bar div { width:340px; height:30px; border:1px solid #000;}
.stats .bar span { text-align:right; display:block; height:100%; color:#fff; line-height:30px; font-size:1.231em; text-indent:50px;}
.stats .red .bar span { background:#ef4f54; }
.stats .yellow .bar span { background:#f6921e; }
.stats .green .bar span { background:#55b577; }
.stats .img-wrap { float:left; width:100px; background:url(../images/statistics_icons.png) no-repeat center center; padding:30px 0; }
.stats .info { margin:0 25px ; width:320px; float:left; }
.stats .info p { color:#999; margin:0; }
.stats .info h3 { font-size:1.231em; }
.stats .red.vm .img-wrap { background-position: 15px 7px; }
.stats .yellow.vm .img-wrap { background-position: -124px 7px; }
.stats .green.vm .img-wrap { background-position: -263px 7px; }
.stats .red.ram .img-wrap { background-position: 15px -125px; }
.stats .yellow.ram .img-wrap { background-position: -124px -125px; }
.stats .green.ram .img-wrap { background-position: -263px -125px;}
.stats .red.disks .img-wrap { background-position: 15px -248px; }
.stats .yellow.disks .img-wrap { background-position: -124px -248px; }
.stats .green.disks .img-wrap { background-position: -263px -248px;}
......@@ -175,6 +175,23 @@ $(document).ready(function() {
}
});
}
if($("#id_issue_date_demo").length > 0 ){
$( "#id_issue_date_demo" ).datepicker({
defaultDate: "+0",
dateFormat: "yy-mm-dd",
onSelect: function( selectedDate ) {
$( "#id_expiration_date_demo" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#id_expiration_date_demo" ).datepicker({
defaultDate: "+1w",
dateFormat: "yy-mm-dd",
onSelect: function( selectedDate ) {
$( "#id_issue_date_demo" ).datepicker( "option", "maxDate", selectedDate );
}
});
}
});
......@@ -201,6 +218,36 @@ $(document).ready(function() {
$(this).hide();
})
// quota form actions
$('.quotas-form ul li a').click(function(e){
e.preventDefault();
$(this).addClass('selected');
var id = $(this).attr('id');
$('.quotas-form fieldset').each(function() {
if($(this).hasClass(id)) {
$(this).show('slow');
}
});
});
$('.quotas-form fieldset .delete').click(function(e){
e.preventDefault();
$(this).parents('fieldset').find('input').val('');
$(this).parents('fieldset').hide('slow');
fieldsetClass = $(this).parents('fieldset').attr('class').replace('quota ', '');
$('.quotas-form ul li a').each(function() {
if($(this).attr('id')==fieldsetClass) {
$(this).removeClass('selected');
}
});
})
});
$(window).resize(function() {
......
{% extends "im/account_base.html" %}
{% block page.body %}
<form action="" method="post" class="withlabels quotas-form">{% csrf_token %}
<fieldset>
<legend>1. CREATE GROUP</legend>
<div class="form-row">
<p class="clearfix">
<label for="id">ID</label>
<input type="text" name="id">
<span class="extra-img">&nbsp;</span>
<span class="info">
<em>more info</em>
<span>Help Text</span>
</span>
</p>
</div>
<div class="form-row with-errors ">
<p class="clearfix">
<label for="name">Name</label>
<input type="text" name="name">
<span class="extra-img">&nbsp;</span>
<span class="info">
<em>more info</em>
<span>Help Text</span>
</span>
</p>
<div class="form-error" style="left: 270.1px; top: 21.2px; width: 292px; margin-left: 224px; margin-bottom: 5px;">This field is required.<br></div>
</div>
<div class="form-row">
<p class="clearfix">
<label for="description">Description</label>
<textarea name="description"></textarea>
<span class="extra-img">&nbsp;</span>
<span class="info">
<em>more info</em>
<span>Help Text</span>
</span>
</p>
</div>
<div class="form-row">
<p class="clearfix">
<label for="id_issue_date_demo">Issue Date</label>
<input type="text" id="id_issue_date_demo" name="id_issue_date_demo" class="hasDatepicker">
<span class="extra-img">&nbsp;</span>
<span class="info">
<em>more info</em>
<span>Help Text</span>
</span>
</p>
</div>
<div class="form-row">
<p class="clearfix">
<label for="id_expiration_date_demo">Expiration Date</label>
<input type="text" name="id_expiration_date_demo" id="id_expiration_date_demo" class="hasDatepicker">
<span class="extra-img">&nbsp;</span>
<span class="info">
<em>more info</em>
<span>Help Text</span>
</span>
</p>
</div>
<div class="form-row with-checkbox">
<p class="clearfix ">
<a href="javascript:void(0)" class="checkbox-widget"></a><label for="id_moderation_enabled" class="checkbox-label">Moderation enabled</label>
<input type="checkbox" id="id_moderation_enabled" name="moderation_enabled" autocomplete="off" style="display: none;">
<span class="extra-img">&nbsp;</span>
<span class="info">
<em>more info</em>
<span>Check if you want to approve members participation manually</span>
</span>
</p>
</div>
</fieldset>
<fieldset>
<legend>2. CHOOSE RESOURCES</legend>
<ul class="clearfix">
<li><a href="#" id="vm">VM</a></li>
<li><a href="#" id="storage">STORAGE</a></li>
<li class="rel"><a href="#" id="cpu">CPU</a></li>
<li class="rel"><a href="#" id="ram">RAM</a></li>
<li class="rel"><a href="#" id="diskspace">DISKSPACE</a></li>
</ul>
<p class="msg">if you choose CPU without selecting any VMs you must also select RAM and DISKSPACE</p>
</fieldset>
<fieldset class="quota vm">
<a href="#" class="delete"><strong>X</strong> remove resource</a>
<legend>VM</legend>
<div class="form-row">
<p class="clearfix">
<label for="num_vms">Total VM</label>
<input type="text" name="num_vms">
<span class="extra-img">&nbsp;</span>
<span class="info">
<em>more info</em>
<span>Help Text</span>
</span>
</p>
</div>
</fieldset>
<fieldset class="quota storage">
<a href="#" class="delete"><strong>X</strong> remove resource</a>
<legend>STORAGE</legend>
<div class="form-row">
<p class="clearfix">
<label for="num_vms">Total storage</label>
<input type="text" name="num_vms">
<span class="extra-img">&nbsp;</span>
<span class="info">
<em>more info</em>
<span>Help Text</span>
</span>
</p>
</div>
</fieldset>
<fieldset class="quota cpu">
<a href="#" class="delete"><strong>X</strong> remove resource</a>
<legend>CPU</legend>
<div class="form-row">
<p class="clearfix">
<label for="num_vms">Total cpu</label>
<input type="text" name="num_cpu">
<span class="extra-img">&nbsp;</span>
<span class="info">
<em>more info</em>
<span>Help Text</span>
</span>
</p>
</div>
</fieldset>
<fieldset class="quota ram">
<a href="#" class="delete"><strong>X</strong> remove resource</a>
<legend>RAM</legend>
<div class="form-row">
<p class="clearfix">
<label for="num_ram">Total ram</label>
<input type="text" name="num_ram">
<span class="extra-img">&nbsp;</span>
<span class="info">
<em>more info</em>
<span>Help Text</span>
</span>
</p>
</div>
</fieldset>
<fieldset class="quota diskspace">
<a href="#" class="delete"><strong>X</strong> remove resource</a>
<legend>DISKSPACE</legend>
<div class="form-row">
<p class="clearfix">
<label for="num_diskspace">Total diskspace</label>
<input type="text" name="num_diskspace">
<span class="extra-img">&nbsp;</span>
<span class="info">
<em>more info</em>
<span>Help Text</span>
</span>
</p>
</div>
</fieldset>
<div class="form-row submit">
<input type="submit" value="SUBMIT" class="submit altcol" autocomplete="off">
</div>
</form>
{% endblock %}
......@@ -23,18 +23,20 @@
{% else %}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>You can <a href="{% url group_create_list %}">create a new group</a> or <a href="{% url group_search %}">join</a> to an existing one.</p>
<div class="widjets">
<a href="#" class="widjet-x" title="remove boxes">X</a>
<ul class="clearfix">
<li>
<div>
<p>WELCOME!<br>Connect with a world of people who share your passions.<br>With millions of groups at your fingertips, it's easy to find the group that's best for you -- no matter your interest.</p>
<p>WELCOME!<br>Connect with a world of people who share your passions.<br>With millions of groups at your fingertips, it's easy to find the group that's best for you -- no matter your interest.</p><p style="text-align: center"><img alt="THINK ABOUT IT" src="/static/im/images/create.png"></p>
<p class="btn"><a href="{% url group_create_list %}" class="submit">CREATE</a></p>
</div>
</li>
<li>
<div>
<p>LOOKING FOR A GROUP?</p><p>Well, this is the place to start!<br>sdofuisd ofuaofi usdiof uiofu osifuaoi ufisdfiousf oiusd<br><img alt="THINK ABOUT IT" src="/static/medialibrary/2012/06/behind_okeanos.png"></p>
<p>LOOKING FOR A GROUP?</p><p>Well, this is the place to start!<br>sdofuisd ofuaofi usdiof uiofu osifuaoi ufisdfiousf oiusd<br></p>
<p style="text-align: center"><img alt="THINK ABOUT IT" src="/static/im/images/join.png"></p>
<p class="btn"><a href="{% url group_search %}" class="submit">JOIN</a></p>
</div>
</li>
......@@ -257,11 +259,7 @@
<th>Type</th>
<th>Issued</th>
<th>Expires</th>
<th>Enrolled</th>
<th>Enrollment status</th>
<th>&nbsp;</th>
......
......@@ -4,6 +4,50 @@
{% block page.body %}
<div class="maincol {% block innerpage.class %}{% endblock %}">
<div class="stats clearfix">
<ul>
<li class="clearfix red vm">
<div class="img-wrap">&nbsp;</div>
<div class="info">
<h3>Number of Vms</h3>
<p>
XX% Used<br>
That is XXX of your XXX MB of virtual RAM - Aouch!
</p>
</div>
<div class="bar">
<div><span style="width:89%;">89%&nbsp;</span></div>
</div>
</li>
<li class="clearfix yellow ram">
<div class="img-wrap">&nbsp;</div>
<div class="info">
<h3>Number of RAMs</h3>
<p>
XX% Used<br>
That is XXX of your XXX MB of virtual RAM - Aouch!
</p>
</div>
<div class="bar">
<div><span style="width:30%;">30%&nbsp;</span></div>
</div>
</li>
<li class="clearfix green disks">
<div class="img-wrap">&nbsp;</div>
<div class="info">
<h3>Number of Vms</h3>
<p>
XX% Used<br>
That is XXX of your XXX MB of virtual RAM - Aouch!
</p>
</div>
<div class="bar">
<div><span style="width:60%;">30%&nbsp;</span></div>
</div>
</li>
</ul>
</div>
<!--
<div class="section">
{% for k, v in user.quota|items %}
<strong>{{k}}</strong>
......@@ -15,6 +59,7 @@
</tr>
</thead>
-->
<!--
<tbody>
{% for m in user.membership_set.select_related.all %}
{% if m.group.is_enabled %}
......@@ -38,6 +83,6 @@
</tbody>
</table>
{% endfor %}
</div>
</div>-->
</div>
{% endblock %}
......@@ -27,7 +27,7 @@
{% block page.css %}
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700&subset=latin,greek-ext,greek' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&subset=latin,greek-ext,greek' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="{{ IM_STATIC_URL }}css/global.css">
<link rel="stylesheet" type="text/css" href="{{ IM_STATIC_URL }}css/print.css" media="print">
<!--[if lte IE 7]>
......@@ -35,7 +35,7 @@
<![endif]-->
<link rel="stylesheet" media="screen and (max-width: 960px)" href="{{ IM_STATIC_URL }}css/max960.css"/>
<link rel="stylesheet" media="screen and (max-width: 768px)" href="{{ IM_STATIC_URL }}css/max768.css"/>
<link rel="stylesheet" media="screen and (max-width: 480px)" href="{{ IM_STATIC_URL }}css/max480.css"/>
<link rel="stylesheet" media="screen and (max-width: 480px)" href="{{ IM_STATIC_URL }}css/max480.css"/>
<link rel="stylesheet" type="text/css" href="{{ IM_STATIC_URL }}css/jquery-ui-1.8.21.custom.css"/>
{% endblock page.css %}
......
......@@ -80,6 +80,8 @@ urlpatterns = patterns('astakos.im.views',
'disapprove_member', {}, name='disapprove_member'),
url(r'^group/create/?$', 'group_create_list', {},
name='group_create_list'),
url(r'^group/create_demo/?$', 'group_create_demo', {},
name='group_create_demo'),
)
if EMAILCHANGE_ENABLED:
......
......@@ -1097,4 +1097,10 @@ def _clear_billing_data(data):
data['bill_diskspace'] = filter(servicefilter('diskspace'), data['bill'])
data['bill_addcredits'] = filter(servicefilter('addcredits'), data['bill'])
return data
\ No newline at end of file
return data
def group_create_demo(request):
return render_response(
template='im/astakosgroup_form_demo.html',
context_instance=get_context(request))
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment