Skip to content

Commit

Permalink
implement styles for user detail page
Browse files Browse the repository at this point in the history
  • Loading branch information
@HaSistrunk
HaSistrunk committed Sep 26, 2024
1 parent 82d3a24 commit 0f478c4
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 73 deletions.
19 changes: 16 additions & 3 deletions bag_transfer/static/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
}

main .container {
margin: 0 15px;
margin: 0 15px 30px;

@media screen and (min-width: 580px) {
margin: 0 30px;
margin: 0 30px 30px;
}
}

Expand Down Expand Up @@ -71,6 +71,19 @@ h1 {
padding: 18px;
}

.card-list {
grid-gap: 30px;

@media screen and (min-width: 1024px) {
grid-template-columns: repeat(2, 1fr);
}
}

.user__actions {
display: flex;
margin-top: auto;
}

/**
* Styles for clickable table rows
**/
Expand Down Expand Up @@ -146,7 +159,7 @@ h1 {
display: none;
}

table div.badge {
div.badge {
width: fit-content;
}

Expand Down
4 changes: 2 additions & 2 deletions bag_transfer/templates/transfers/detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

{% block title_actions %}
{% if request.user.is_staff %}
<a href="{% url 'appraise:list' %}" class="btn btn--md btn--gray mb-10">
<a href="{% url 'appraise:list' %}" class="btn btn--md btn--light-blue">
<span class="material-icon material-icon--space-after" aria-hidden="true">keyboard_arrow_left</span>
Appraisal Queue
</a>
Expand All @@ -14,7 +14,7 @@


{% block content %}
<div class="mb-30">
<div class="my-30">
<span class="badge badge--{% include 'parts/status_class.html' with status=object.process_status %}">{{ object.get_process_status_display }}</span>
</div>
<div class="card card--container flex--column mb-30">
Expand Down
112 changes: 47 additions & 65 deletions bag_transfer/templates/users/detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,76 +5,58 @@
{% block h1_title %}{{page_title}}{% endblock %}

{% block content %}
<div class="row">
<div class="col-md-3">

<div class="box box-primary">
<div class="box-body box-profile">

<h2 class="profile-username text-center">
{% if object.first_name %}{{object.first_name}} {{object.last_name}} <small>{{ object.username }}</small>
{% else %}
{{ object.username }}
{% endif %}
</h2>

{% if object.organization %}
<p class="text-muted text-center">
<a href="{% url 'orgs:detail' object.organization.pk %}">{{ object.organization.name }}</a>
</p>
{% endif %}


<ul class="list-group list-group-unbordered">
<li class="list-group-item">
<span class="list-label">Last login</span> <span class="pull-right">{{ object.last_login }}</span>
</li>
</ul>

{% if request.user.is_manager or request.user.is_superuser %}
<a href="{% url 'users:edit' object.pk %}" class="btn btn-primary btn-block">Edit User</a>
{% if object.cognito_status == 'FORCE_CHANGE_PASSWORD' %}
<button id="resend-invitation" class="btn btn-primary btn-block">Resend Invitation Email</button>
{% endif %}
{% endif %}
{% if request.user.pk == object.pk %}
<a href="{% url 'users:password-change' %}" class="btn btn-default btn-block">Change Password</a>
{% endif %}

</div>
<div class="card-list">
<div class="card card--container flex--column">
<h2>
{% if object.first_name %}{{object.first_name}} {{object.last_name}} ({{ object.username }})
{% else %}{{ object.username }}
{% endif %}
</h2>

{% if object.organization %}
<a href="{% url 'orgs:detail' object.organization.pk %}">{{ object.organization.name }}</a>
{% endif %}
<p><span class="text--bold">Last login:</span> {{ object.last_login }}</p>
<div class="user__actions">
{% if request.user.is_manager or request.user.is_superuser %}
<a href="{% url 'users:edit' object.pk %}" class="btn btn--blue btn--md mr-10">Edit User</a>
{% endif %}
{% if object.cognito_status == 'FORCE_CHANGE_PASSWORD' %}
<button id="resend-invitation" class="btn btn--light-blue btn--md">Resend Invitation Email</button>
{% endif %}
{% if request.user.pk == object.pk %}
<a href="{% url 'users:password-change' %}" class="btn btn--light-blue btn--md">Change Password</a>
{% endif %}
</div>

<div class="box box-primary">
<div class="box-header with-border">
<h2 class="box-title">Details </h2>
</div>
<div class="card card--container flex--column">
<h2>Details</h2>
<dl class="summary-list">
<div class="summary-list__row">
<dt class="summary-list__key">Active?</dt>
<dd class="summary-list__value">{% if object.is_active %}yes{% else %}no{% endif %}</dd>
</div>
<div class="box-body">
<span class="list-label"><i class="fa fa-user margin-r-5"></i> Active?</span>
<p>{% if object.is_active %}yes{% else %}no{% endif %}</p>

<hr/>

<span class="list-label"><i class="fa fa-user margin-r-5"></i> Org Admin?</span>
<p>{% if object.is_org_admin %}yes{% else %}no{% endif %}</p>

<hr/>

<span class="list-label"><i class="fa fa-envelope margin-r-5"></i> Email</span>
<p>{{ object.email }}</p>

<hr/>

<span class="list-label"><i class="fa fa-pencil margin-r-5"></i> Groups</span>
<p>
{% for group in object.groups.all %}
<span class="label label-default">{{ group.name }}</span>
{% endfor %}
</p>
<div class="summary-list__row">
<dt class="summary-list__key">Org Admin?</dt>
<dd class="summary-list__value">{% if object.is_org_admin %}yes{% else %}no{% endif %}</dd>
</div>
</div>
<div class="summary-list__row">
<dt class="summary-list__key">Email</dt>
<dd class="summary-list__value">{{ object.email }}</dd>
</div>
<div class="summary-list__row">
<dt class="summary-list__key">Groups</dt>
{% if object.groups.exists %}
{% for group in object.groups.all %}
<dd class="summary-list__value">{{ group.name }}</dd>
{% endfor %}
{% else %}
<dd class="summary-list__value">N/A</dd>
{% endif %}
</div>
</dl>
</div>
</div>

{% endblock %}

{% block extra_js %}
Expand Down
12 changes: 9 additions & 3 deletions bag_transfer/templates/users/list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,15 @@
<td><a href="{% url 'users:detail' u.pk %}">{{u.first_name}} {{u.last_name}}</a></td>
<td>{{ u.username }}</td>
<td>{{ u.organization }}</td>
<td>{% for group in u.groups.all %}
<div class="badge badge--light-blue my-3">{{ group.name }}</div>
{% endfor %}</td>
<td>
{% if u.groups.exists %}
{% for group in u.groups.all %}
<div class="badge badge--light-blue my-3">{{ group.name }}</div>
{% endfor %}
{% else %}
N/A
{% endif %}
</td>
<td>{{ u.last_login }}</td>
<td>{% if u.is_org_admin %}Yes{% else %}No{% endif %}</td>
<td>{% if u.is_active %}Yes{% else %}No{% endif %}</td>
Expand Down

0 comments on commit 0f478c4

Please sign in to comment.