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

Groups & style

- Dropkick for select
- New style for groups
- Larger input
parent 36cccd57
......@@ -490,11 +490,14 @@ class ExtendedPasswordChangeForm(PasswordChangeForm):
user.save()
return user
from django.conf import settings
settings.DATE_FORMAT = '%d/%m/%Y'
settings.DATE_INPUT_FORMATS = ['%d/%m/%Y']
def get_astakos_group_creation_form(request):
class AstakosGroupCreationForm(forms.ModelForm):
issue_date = forms.DateField(widget=SelectDateWidget(), initial=datetime.now())
issue_date = forms.DateField( initial=datetime.now())
# TODO set initial in exact one month
expiration_date = forms.DateField(widget=SelectDateWidget(), initial = datetime.now() + timedelta(days=30))
expiration_date = forms.DateField( initial = datetime.now() + timedelta(days=30))
kind = forms.ModelChoiceField(queryset=GroupKind.objects.all(), empty_label=None)
name = forms.URLField()
......@@ -530,7 +533,7 @@ def get_astakos_group_policy_creation_form(astakosgroup):
return AstakosGroupPolicyCreationForm
class AstakosGroupSearchForm(forms.Form):
q = forms.CharField(max_length=200, label='')
q = forms.CharField(max_length=200, label='Group Identifier')
class MembershipCreationForm(forms.ModelForm):
# TODO check not to hit the db
......
......@@ -7,10 +7,11 @@ input, textarea, .form-widget { background-color: #ffffff; color: #000;borde
#forms input:focus label { z-index: 300; }
form.withlabels label { width: 224px; display: block; float: left; padding-top: 1em; }
form.withlabels input[type=text],
form.withlabels input[type=password] { width: 240px; }
form.withlabels input[type=password] { width: 270px; }
form.withlabels input[type=text].long,
form.withlabels input[type=password].long,
form.withlabels textarea.long { width: 224px; }
form.withlabels textarea { width:270px; }
.login-section a.button { margin-bottom: 12px; }
.login-section a.button:last-child { margin-bottom: none;}
.login-section a.button.withicon { background-repeat: no-repeat; background-position: 15px 50%; padding-left: 40px; }
......@@ -33,7 +34,7 @@ form textarea,
form input.text,
form input[type="text"],
form input[type="password"] { color:#808080; font-family: 'Didact Gothic', Verdana, sans-serif; font-weight: normal; line-height: 22px; letter-spacing: 1px;border: 1px solid #808080; height: 21px; display: inline-block; margin-bottom: -1px; padding: 0.8em; padding-left: 1.5em; z-index: 2; width:300px; }
form select { font-family: 'Didact Gothic', Verdana, sans-serif; font-weight: normal; line-height: 22px; letter-spacing: 1px; border: 1px solid #808080; display:block; margin-bottom: -1px; padding: 0.8em; padding-left: 1.5em; z-index: 2; width:331px; }
form select { font-family: 'Didact Gothic', Verdana, sans-serif; font-weight: normal; line-height: 22px; letter-spacing: 1px; border: 1px solid #808080; display:block; margin-bottom: -1px; padding: 0.8em; padding-left: 1.5em; z-index: 2; width:301px; }
form textarea:focus,
form input.text:focus,
form input[type="text"]:focus,
......@@ -87,7 +88,7 @@ form.innerlabels .with-checkbox .checkbox-label { left:2.5em; top:17px; }
form.withlabels .with-checkbox .checkbox-widget { position:absolute; left:224px; top:0; }
form .extra-img { display:block; width:21px; height:21px; overflow:hidden; position:absolute; }
form.withlabels .extra-img { left:460px; bottom:12px; }
form.withlabels .extra-img { left:485px; bottom:12px; }
form.innerlabels .extra-img { bottom:10px; left:290px }
form .with-checkbox .extra-img { top:20px; }
form .with-errors .extra-img { background:url(../images/symbols.png) no-repeat -58px -3px; z-index:101;}
......@@ -175,4 +176,8 @@ form+p:first-child, form legend + p { margin-bottom:2em; }
.form-row .dk_options_inner { padding:0; margin:0; box-shadow:none; text-shadow:none; border-radius:0; border:1px solid #8C8C8E ;}
.form-row .dk-options_inner li { list-style:none outside; }
.form-row .dk_options a:hover,
.form-row .dk_option_current a { text-shadow:none; background-color: #E7E7E3;}
\ No newline at end of file
.form-row .dk_option_current a { text-shadow:none; background-color: #E7E7E3;}
form.link-like { display:inline-block; margin:0 5px; }
form.link-like input[type="submit"] { margin:0; padding:0 5px; background:transparent; color:#F89A1C; cursor:pointer; height:auto; }
form.link-like input[type="submit"]:hover { text-decoration:underline; }
......@@ -70,8 +70,8 @@ img.right { margin:0 0 1em 1em; float:right;}
.question h2 { color:#EF4F54 }
.content .backlink { margin:1em 0; }
.faq h3 { color:#4085a6; margin:0;}
.faq ul { padding:0; margin:0; }
.faq ul li { list-style:none outside; padding:0; margin:0; }
.faq ul { padding:0 0 0 1em; margin:0; }
.faq ul li { padding:0; margin:0 0 5px 0; }
.faq ul li a { color:#222222; border:0 none;}
.faq .faq-category { margin: 0 0 1.5em;}
.follow h3 a { color:#4085A6;}
......@@ -222,6 +222,8 @@ table.alt-style tr th { font-weight:normal; color:#3582AC }
table.alt-style tr td { color:#222; }
table.alt-style tr td:first-child,
table.alt-style tr th:first-child { padding-left:5px; }
table.alt-style tr td a { margin:0 0 0 20px; }
table.alt-style tr td:first-child a { margin:0; }
.content a.submit { margin:0; display:inline-block; margin:10px 0 ; height:auto;}
table.alt-style tr:nth-child(2n) td { background:#F2F2F2 }
dl.alt-style { width:500px; }
......@@ -280,4 +282,7 @@ dl.alt-style dt:nth-child(2n) { background:black; }
.widjets li { width:50%; float:left; list-style:none outside; margin:30px 0; }
.widjets li div { border:1px dashed #000; padding:20px 20px 70px; width:60%; margin:0 auto; position:relative; }
.widjets li div img { max-width:100%; }
.widjets li .btn { text-align:center; position:absolute; bottom:0; left:0; right:0; }
\ No newline at end of file
.widjets li .btn { text-align:center; position:absolute; bottom:0; left:0; right:0; }
.table_sorting tr th { cursor:pointer; }
.table_sorting tr th:hover { text-decoration:underline }
......@@ -110,8 +110,10 @@ $(document).ready(function() {
//todo
});
});
//$('.dropkick-select').dropkick();
$('select').dropkick();
$('.top-msg .success').parents('.top-msg').css(
......@@ -173,24 +175,7 @@ $(document).ready(function() {
);
/*$('#animation a').hover(
function () {
$(this).animate({
top: '+=-10'
}, 600);
$(this).siblings('p').find('img').animate({
width: '60%'
});
},
function () {
$(this).animate({top: '0'}, 600);
$(this).siblings('p').find('img').animate({
width: '65%'
});
}
);*/
if ($('.widjets'.length > 0)) {
......@@ -198,23 +183,26 @@ $(document).ready(function() {
}
$(function() {
if($("#from").length > 0 ){
$( "#from" ).datepicker({
if($("#id_issue_date").length > 0 ){
$( "#id_issue_date" ).datepicker({
defaultDate: "+0",
dateFormat: "dd-mm-yy",
dateFormat: "yy-mm-dd",
onSelect: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
$( "#id_expiration_date" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
$( "#id_expiration_date" ).datepicker({
defaultDate: "+1w",
dateFormat: "dd-mm-yy",
dateFormat: "yy-mm-dd",
onSelect: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
$( "#id_issue_date" ).datepicker( "option", "maxDate", selectedDate );
}
});
}
});
$(".table_sorting").tablesorter();
});
$(window).resize(function() {
......@@ -224,11 +212,4 @@ $(window).resize(function() {
$('.widjets li div').equalHeights();
}
});
});
\ No newline at end of file
......@@ -26,7 +26,7 @@
}
$this.hide();
if ($this.is("checked")) {
if ($this.attr('checked')) {
el.addClass("checked");
}
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -37,7 +37,7 @@
// HTML template for the dropdowns
dropdownTemplate = [
'<div class="dk_container" id="dk_container_{{ id }}" tabindex="{{ tabindex }}">',
'<div class="dk_container" id="dk_container_{{ id }}" tabindex="{{ tabindex }}" style="display:inline-block;">',
'<a class="dk_toggle">',
'<span class="dk_label">{{ label }}</span>',
'</a>',
......
......@@ -3,51 +3,75 @@
{% load filters %}
{% block page.body %}
<div class="maincol {% block innerpage.class %}{% endblock %}">
<table class="zebra-striped id-sorted">
<tr>
<th>Name: {{object.name}}</th>
</tr>
<tr>
<th>Type: {{object.kind}}</th>
</tr>
<tr>
<th>Issue date: {{object.issue_date|date:"d/m/Y"}}</th>
</tr>
<tr>
<th>Expiration date: {{object.expiration_date|date:"d/m/Y"}}</th>
</tr>
<tr>
<th>Moderation: {% if object.moderation_enabled%}Yes{% else %}No{% endif %}</th>
</tr>
<tr>
<th>Owner: {% for o in object.owner.all %}
{% if user == o %}
Me
{% else%}
{{o.realname}} ({{o.email}})
{% endif %}
{% endfor %}
</th>
</tr>
<tr>
<th>Enabled: {% if object.is_enabled %}Yes{% else %}No{% endif %}</th>
</tr>
</table>
<div class="section">
<h2>Members:</h2>
{% if object.members %}
<table class="zebra-striped id-sorted">
<thead>
<tr>
<th>Email</th>
<th>Realname</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for m in object.membership_set.all %}
<div class="projects">
<h2>
{% if request.user in object.members %}
<em>[ ENROLLED ]</em>
{% endif %}
<span>[ {{object.kind|upper}} ]</span>
</h2>
<div class="details">
<p>{{ object.desc }}</p>
</div>
<div class="full-dotted">
<h3>DETAILS:</h3>
<dl class="alt-style">
<dt>Name</dt>
<dd>{{object.name}}</dd>
<dt>Type</dt>
<dd>{{object.kind|capfirst}}</dd>
<dt>Issue date:</dt>
<dd>{{object.issue_date|date:"d/m/Y"}}</dd>
<dt>Expiration Date</dt>
<dd>{{object.expiration_date|date:"d/m/Y"}}</dd>
<dt>Modaration</dt>
<dd>{% if object.moderation_enabled%}Yes{% else %}No{% endif %}</dd>
<dt>Activated</dt>
<dd>{% if object.is_enabled %}Yes{% else %}No{% endif %}</dd>
<dt>Owner</dt>
<dd>{% for o in object.owner.all %}
{% if user == o %}
Me
{% else%}
{{o.realname}} ({{o.email}})
{% endif %}
{% endfor %}
</dd>
</dl>
</div>
<div class="full-dotted">
<h3>POLICIES:</h3>
{% if quota %}
<dl class="alt-style">
<dt>Resrouce</dt>
<dd>Limit</dd>
{% for k in quota|dkeys %}
<dt>{{ k }}</dt>
<dd>{{ quota|lookup:k }}</dd>
{% endfor %}
</dl>
{% else %}
<p>No policies</p>
{% endif %}
</div>
<div class="full-dotted">
{% if object.members %}
<table class="alt-style table_sorting">
<caption>MEMBERS:</caption>
<thead>
<tr>
<th>Email</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for m in object.membership_set.all %}
<tr>
<td>{{m.person.email}}</td>
<td>{{m.person.realname}}</td>
......@@ -57,54 +81,36 @@
{% if m.is_approved %}
<td>Approved</td>
{% else %}
<td>Pending</td>
<td>Pending
{% if user in m.group.owner.all %}
<td><a href="{% url approve_member m.group.id m.person.id %}">Approve</a></td>
<td><a href="{% url disapprove_member m.group.id m.person.id %}">Disapprove</a></td>
<a href="{% url approve_member m.group.id m.person.id %}">Approve</a>
<a href="{% url disapprove_member m.group.id m.person.id %}">Disapprove</a>
{% endif %}
</td>
{% endif %}
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
</table>
{% else %}
<p>No members yet!</p>
{% endif %}
</div>
<div class="section">
<h2>Policies:</h2>
{% if quota %}
<table class="zebra-striped id-sorted">
<thead>
<tr>
<th>Resource</th>
<th>Limit</th>
</tr>
</thead>
<tbody>
{% for k in quota|dkeys %}
<tr>
<td>{{ k }}</td>
<td>{{ quota|lookup:k }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p>No policies</p>
{% endif %}
</div>
</div>
{% if user in object.owner.all and more_policies %}
<div class="rightcol">
<form action="{% url group_policies_add object.id %}" method="post" class="innerlabels signup">{% csrf_token %}
<h2><span>NEW POLICY</span></h2>
<div class="full-dotted">
<form action="{% url group_policies_add object.id %}" method="post" class="withlabels">{% csrf_token %}
<h2>NEW POLICY</h2>
{% include "im/form_render.html" %}
<div class="form-row submit">
<input type="submit" class="submit altcol" value="+" />
<input type="submit" class="submit altcol" value="ADD POLICY" />
</div>
</form>
</div>
{% endif %}
</div>
{% endblock %}
......@@ -3,7 +3,7 @@
{% block page.body %}
<div class="maincol {% block innerpage.class %}{% endblock %}">
<form action="" method="post"
class="innerlabels signup">{% csrf_token %}
class="withlabels">{% csrf_token %}
<h2><span>NEW GROUP</span></h2>
{% include "im/form_render.html" %}
<div class="form-row submit">
......
......@@ -5,82 +5,142 @@
{% block page.body %}
<div class="maincol {% block innerpage.class %}{% endblock %}">
{% if form %}
<form action="{% url group_search %}" method="post" class="innerlabels signup">{% csrf_token %}
<h2><span>Search group:</span></h2>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p>You can use the following form to search for a project:</p>
<form action="{% url group_search %}" method="post" class="withlabels">{% csrf_token %}
{% include "im/form_render.html" %}
<div class="form-row submit">
<input type="submit" class="submit altcol" value="SEARCH" />
</div>
</form>
{% else %}
<p class="submit-rt">
<a href="{% url group_add %}" class="submit">Create a group</a>
<a href="{% url group_search %}" class="submit">Join a group</a>
</p>
<div class="projects">
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br />You can <a href="{% url group_add %}">create a new group</a> or <a href="{% url group_search %}">join</a> to an existing one.</p>
<ul class="widjets 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 class="btn"><a href="{% url group_add %}" class="submit">Create a group</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 class="btn"><a href="{% url group_search %}" class="submit">Join a group</a></p>
</div>
</li>
</ul>
{% endif %}
{% if object_list %}
<h2>Groups:</h2>
<table class="zebra-striped id-sorted">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Issue date</th>
<th>Expiration date</th>
<th>Owner?</th>
<th>Participants</th>
<th>Enabled?</th>
<th>Moderation?</th>
<th>Enrollment status</th>
</tr>
</thead>
<tbody>
{% for o in object_list %}
<tr>
<td><a class="extra-link" href="{% url group_detail o.id %}">{{o.name}}</a></td>
<td>{{o.kind}}</td>
<td>{{o.issue_date|date:"d/m/Y"}}</td>
<td>{{o.expiration_date|date:"d/m/Y"}}</td>
<td>{% if user in o.owner.all %}Yes{% else %}No{% endif %}</td>
<td>{{ o.approved_members|length }}/{{ o.members|length }}</td>
<td>{% if o.is_enabled %}Yes{% else %}No{% endif %}</td>
<td>{% if o.moderation_enabled%}Yes{% else %}No{% endif %}</td>
{% if user in o.approved_members %}
<td>Active</td>
{% if user not in o.owner.all %}
<td>
<form action="{% url group_leave o.id %}" method="post"class="login innerlabels">{% csrf_token %}
<div class="form-row submit clearfix">
<input type="submit" class="submit altcol" value="LEAVE" />
</div>
</form>
</td>
{% endif %}
{% else %}
{% if user in o.members %}
<td>Pending</td>
{% else %}
<td>Not member</td>
{% if join_forms %}
<td>
<form action="{% url group_join o.id %}" method="post"class="login innerlabels">{% csrf_token %}
{% with join_forms|lookup:o.name as form %}
{% include "im/form_render.html" %}
{% endwith %}
<div class="form-row submit clearfix">
<input type="submit" class="submit altcol" value="JOIN" />
</div>
</form>
</td>
{% endif %}
{% endif %}
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<h2>No groups found!</h2>
{% endif %}
{% with object_list|filter_groups:user as d %}
{% with d|lookup:'mine' as mine %}
{% if mine %}
<div class="full-dotted">
<table class="alt-style table_sorting" id="">
<caption>MY GROUPS</caption>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Issue date</th>
<th>Expiration date</th>
<th>Participants</th>
<th>Activation</th>
<th>Moderation</th>
</tr>
</thead>
<tbody>
{% for o in mine %}
<tr>
<td><a class="extra-link" href="{% url group_detail o.id %}">{{o.name}}</a></td>
<td>{{o.kind|capfirst}}</td>
<td>{{o.issue_date|date:"d/m/Y"}}</td>
<td>{{o.expiration_date|date:"d/m/Y"}}</td>
<td>{{ o.approved_members|length }}/{{ o.members|length }}</td>
<td>{% if o.is_enabled %}Active{% else %}Pending{% endif %}</td>
<td>{% if o.moderation_enabled%}Yes{% else %}No{% endif %}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{% endwith %}
{% with d|lookup:'other' as other %}
{% if other %}
<div class="full-dotted">
<table class="alt-style table_sorting">
<caption>I PARTICIPATE IN</caption>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Issue date</th>
<th>Expiration date</th>
<th>Participants</th>
<th>Activation</th>
<th>Enrollment status</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
{% for o in other %}
<tr>
<td><a class="extra-link" href="{% url group_detail o.id %}">{{o.name}}</a></td>
<td>{{o.kind|capfirst}}</td>
<td>{{o.issue_date|date:"d/m/Y"}}</td>
<td>{{o.expiration_date|date:"d/m/Y"}}</td>
<td>{{ o.approved_members|length }}</td>
<td>{% if o.is_enabled %}Active{% else %}Pending{% endif %}</td>
{% if user in o.approved_members %}
<td>
Active
<form action="{% url group_leave o.id %}" method="post" class="link-like">{% csrf_token %}
<input type="submit" value="LEAVE GROUP" />
</form>
</td>
{% else %}
{% if user in o.members %}
<td>Pending</td>
{% else %}
<td>Not member
{% if join_forms %}
<form action="{% url group_join o.id %}" method="post" class="link-like">{% csrf_token %}
{% with join_forms|lookup:o.name as form %}