Skip to content

Commit

Permalink
Updated member permissions layout (#755)
Browse files Browse the repository at this point in the history 
CSS updates
  • Loading branch information
@oliverroick
Chandra Lash authored and oliverroick committed Sep 30, 2016
1 parent 146631d commit d01ee93
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 164 deletions.
61 changes: 18 additions & 43 deletions cadasta/core/static/css/main.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

64 changes: 14 additions & 50 deletions cadasta/core/static/css/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -849,9 +849,18 @@ main.container-fluid {
padding: 20px 15px;
.btn {
min-width: 110px;
margin-right: 20px;
&:last-child {
margin-right: 0;
}
}
}
}
.member-panel { // member edit page
border: 0;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.nav-tabs {
margin-bottom: 20px;
}
Expand Down Expand Up @@ -1124,56 +1133,6 @@ table#select-list {
}
}

/* =Organizations
-------------------------------------------------------------- */

div.org-logo {
float: left;
padding: 10px;
}

.org-text {
// margin-left: 160px; adjusted until upload field is added
margin-left: 0;
}

.member-pic {
padding-bottom: 12px;
img {
display: block;
margin-left: auto;
margin-right: auto;
}
}

.member-detail {
min-height: 100px;
display: inline-block;
padding: 0 0 20px 0;
h5 {
font-size: 16px;
font-weight: 600;
margin: 0 0 4px 0;
}
}

.member-role {
padding: 30px 0;
border-top: solid 1px $table-border-color;
border-bottom: solid 1px $table-border-color;
clear: both;
margin: 30px 0;
}

#projects-permissions, .form-inline {
.form-group {
display: block;
}
.form-control {
min-width: 70%;
}
}

/* =Dashboard map
-------------------------------------------------------------- */

Expand Down Expand Up @@ -1359,6 +1318,11 @@ div.add-btn-btm { // add party link at bottom of table
padding: 4px;
}
}
.form-narrow, .narrow {
.alert-full {
margin-bottom: 20px;
}
}

.form-narrow, .narrow {
.alert-full {
Expand Down
16 changes: 11 additions & 5 deletions cadasta/core/static/css/orgs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ div.org-logo {
}

.org-text {
margin-left: 160px;
// margin-left: 160px; adjusted until upload field is added
margin-left: 0;
}

/* =Single member permissions
Expand All @@ -33,19 +34,24 @@ div.org-logo {
}
}
.member-role {
padding: 30px 0;
padding: 20px 0;
border-top: solid 1px $table-border-color;
border-bottom: solid 1px $table-border-color;
clear: both;
margin: 30px 0;
margin: 10px 0;
}
.btn-full {
padding: 20px 0;
}
}

#projects-permissions .form-control {
min-width: 70%;
#projects-permissions, .form-inline {
.form-group {
display: block;
}
.form-control {
min-width: 70%;
}
}

@media (max-width: $screen-sm-max) {
Expand Down
149 changes: 83 additions & 66 deletions cadasta/templates/organization/organization_members_edit.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,78 +13,95 @@
<div class="row">
<!-- Main text -->
<div class="col-md-12 main-text">
<h2>{% trans "Member" %}: <span class="text-capitalize">{{ object.get_display_name }}</span></h2>
<form method="POST" action="" class="org-member-edit" novalidate>
{% csrf_token %}
<div class="row">
<div class="col-md-3">
<!-- Member panel -->
<div class="panel panel-default">
<div class="panel-body member-info">
<div class="member-pic">
<img src="/static/img/avatar.jpg" class="avatar-lg thumbnail">
</div>
<div class="member-detail">
<h4>{{ object.username }}</h4>
{{ object.full_name }}<br>
{{ object.email }}<br>
Last login: {{ object.last_login }}<br>
</div>
<div class="member-role form-group{% if form.org_role.errors %} has-error{% endif %}">
<label for="{{ form.org_role.id_for_label }}">Role</label>
<label class="pull-right control-label">{{ form.org_role.errors }}</label>
{% if org_admin %}
{% render_field form.org_role class+="form-control" %}
{% else %}
{% render_field form.org_role class+="form-control" %}
{% endif %}
</div>
<div class="btn-full">
<button type="button" class="btn btn-danger" name="remove" data-toggle="modal" data-target="#remove_confirm"{% if org_admin %} disabled{% endif %}>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove member</button>
{% if org_admin %}
<div class="alert alert-full" role="alert">
<div class="pull-left"><span class="glyphicon glyphicon-info-sign"></span></div>
<div>An organization administrator cannot remove themself.</div>
</div>
{% endif %}
<div class="page-title">
<h2>{% trans "Member" %}: <span class="text-capitalize">{{ object.get_display_name }}</span></h2>
</div>
<div class="panel panel-default">
<form method="POST" action="" class="org-member-edit" data-parsley-validate>
{% csrf_token %}
<div class="panel-body">
<div class="row">
<div class="col-md-3">
<!-- Member panel -->
<div class="panel panel-default member-panel">
<div class="panel-body member-info">
<div class="member-pic">
<img src="/static/img/avatar.jpg" class="avatar-lg thumbnail">
</div>
<div class="member-detail">
<h4>{{ object.username }}</h4>
{{ object.full_name }}<br>
{{ object.email }}<br>
Last login: {{ object.last_login }}<br>
</div>
<div class="form-group member-role{% if form.org_role.errors %} has-error{% endif %}">
<label class="control-label" for="{{ form.org_role.id_for_label }}">{% trans "Role" %}</label>
{% if org_admin %}
{% render_field form.org_role class+="form-control" data-parsley-required="true" %}
{% else %}
{% render_field form.org_role class+="form-control" data-parsley-required="true" %}
{% endif %}
<div class="error-block">{{ form.org_role.errors }}</div>
</div>
<div class="btn-full">
<button type="button" class="btn btn-danger" name="remove" data-toggle="modal" data-target="#remove_confirm"{% if org_admin %} disabled{% endif %}>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove member</button>
{% if org_admin %}
<div class="alert alert-full" role="alert">
<div class="pull-left"><span class="glyphicon glyphicon-info-sign"></span></div>
<div>An organization administrator cannot remove themself.</div>
</div>
{% endif %}
</div>
</div>
</div>
<!-- /member panel -->
</div>
</div>
<!-- /member panel -->
</div>
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading"><h3>Member Permissions</h3></div>
<div class="panel-body">
<div class="col-md-9">
<!-- Members index -->
<table class="table table-hover datatable" id="projects-permissions">
<thead>
<tr>
<th>Project</th>
<th>Permissions</th>
</tr>
</thead>
<tbody>
{% for field in form %}
{% if field.name != 'org_role' %}
<tr>
<td><label for="{{ field.id_for_label }}">{{field.label}}</label></td>
<td>{% render_field field class+="form-control" %}</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
<div class="panel-footer panel-buttons">
<button type="submit" class="btn btn-primary" name="submit">Save</button>
<a href="{% url 'organization:members' organization.slug %}" class="btn btn-default">Cancel</a>
<div class="panel panel-default">
<div class="panel-heading">
<h3>Member Permissions</h3>
</div>
<div class="panel-body">
<table class="table table-hover datatable" id="projects-permissions">
<thead>
<tr>
<th>Project</th>
<th>Permissions</th>
</tr>
</thead>
<tbody>
{% for field in form %}
{% if field.name != 'org_role' %}
<tr>
<td>
<label class="control-label" for="{{ field.id_for_label }}">
{{field.label}}
</label>
</td>
<td>
<div class="form-group">
{% render_field field class+="form-control" data-parsley-required="true" %}
</div>
</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
</div>
<!-- /members index -->
</div>
</div>
</div>
</div>
</form>
<div class="panel-footer panel-buttons text-center">
<button type="submit" class="btn btn-primary" name="submit">Save</button>
<a href="{% url 'organization:members' organization.slug %}" class="btn btn-default">Cancel</a>
</div>
</form>
</div>
</div>
<!-- /.main-text -->
</div>
Expand Down

0 comments on commit d01ee93

Please sign in to comment.