Skip to content
This repository has been archived by the owner on Nov 7, 2019. It is now read-only.

Commit

Permalink
templates/user_detail: add info to tab on small screens and remove gr…
Browse files Browse the repository at this point in the history 
…id scss for profile layout
  • Loading branch information
@fuzzylogic2000
Phillippa authored and fuzzylogic2000 committed Oct 15, 2019
1 parent 5b6783c commit fc670ed
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 92 deletions.
131 changes: 72 additions & 59 deletions apps/users/templates/a4_candy_users/user_detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,60 +5,19 @@

{% block content %}
<div class="l-wrapper">
<div class="user-profile">

<div class="user-profile__side">
{% if object.avatar %}<img class="user-profile__avatar" src="{% thumbnail object.avatar '170x170' crop %}" alt="" />{% endif %}

<h1 class="u-first-heading">{{ object.username }}</h1>

{% if object.bio %}<p>{{ object.bio }}</p>{% endif %}

<ul class="u-list-reset">
{% if object.homepage %}
<li>
<i class="fas fa-link" aria-label="{% trans 'Homepage' %}" title="{% trans 'Homepage' %}"></i>
<a href="{{ object.homepage }}">{{ object.homepage }}</a>
</li>
{% endif %}
{% if object.facebook_handle %}
<li>
<i class="fab fa-facebook-square" aria-label="{% trans 'Facebook' %}" title="{% trans 'Facebook' %}"></i>
<a href="https://www.facebook.com/{{ object.facebook_handle }}">{{ object.facebook_handle }}</a>
</li>
{% endif %}
{% if object.twitter_handle %}
<li>
<i class="fab fa-twitter" aria-label="{% trans 'Twitter' %}" title="{% trans 'Twitter' %}"></i>
<a href="https://twitter.com/{{ object.twitter_handle }}">{{ object.twitter_handle }}</a>
</li>
{% endif %}
</ul>

{% comment 'This code can be used as soon as we several partners on the plattform' %}
<h2 class="heading2">{% trans 'Active in these platforms' %}</h2>
{% if view.organisations %}
<ul class="u-list-reset">
{% for organisation in view.organisations %}
<li>
<a class="list-item-tiny" href="{% url 'organisation' organisation_slug=organisation.slug %}">
<img class="list-item-tiny__image" src="{% thumbnail organisation.logo '50x50' crop %}" alt="" />
<span class="list-item-tiny__body">{{ organisation.name }}</span>
</a>
</li>
{% endfor %}
</ul>
{% else %}
{% trans 'This user is not active in any platform yet.' %}
{% if object == request.user %}
<a href="/">{% trans 'Check some platforms out.' %}</a>
{% endif %}
{% endif %}
{% endcomment %}
</div>

<div class="user-profile__tablist tablist">
<nav class="nav l-col-9-3" role="tablist">
<div class="row">
<div class="col-12 tabs user-profile__tablist tablist">
<nav class="nav" role="tablist">
<a
id="tab-user-{{ user.pk }}-info"
class="tab d-md-none"
data-toggle="tab"
href="#tabpanel-user-{{ user.pk }}-info"
role="tab"
aria-controls="tabpanel-user-{{ user.pk }}-info"
aria-expanded="true">
{% trans 'Info' %}
</a>
<a
id="tab-user-{{ user.pk }}-participation"
class="tab active"
Expand All @@ -81,10 +40,66 @@ <h2 class="heading2">{% trans 'Active in these platforms' %}</h2>
</a>
</nav>
</div>
</div>

<div class="row">
<div
class="tabpanel user-profile col-md-3 user-profile__side"
id="tabpanel-user-{{ user.pk }}-info"
role="tabpanel"
aria-labelledby="tab-user-{{ user.pk }}-info"
aria-expanded="false">
{% if object.avatar %}<img class="user-profile__avatar" src="{% thumbnail object.avatar '170x170' crop %}" alt="" />{% endif %}

<h1 class="u-first-heading">{{ object.username }}</h1>

{% if object.bio %}<p>{{ object.bio }}</p>{% endif %}

<ul class="u-list-reset">
{% if object.homepage %}
<li>
<i class="fas fa-link" aria-label="{% trans 'Homepage' %}" title="{% trans 'Homepage' %}"></i>
<a href="{{ object.homepage }}">{{ object.homepage }}</a>
</li>
{% endif %}
{% if object.facebook_handle %}
<li>
<i class="fab fa-facebook-square" aria-label="{% trans 'Facebook' %}" title="{% trans 'Facebook' %}"></i>
<a href="https://www.facebook.com/{{ object.facebook_handle }}">{{ object.facebook_handle }}</a>
</li>
{% endif %}
{% if object.twitter_handle %}
<li>
<i class="fab fa-twitter" aria-label="{% trans 'Twitter' %}" title="{% trans 'Twitter' %}"></i>
<a href="https://twitter.com/{{ object.twitter_handle }}">{{ object.twitter_handle }}</a>
</li>
{% endif %}
</ul>

{% comment 'This code can be used as soon as we several partners on the plattform' %}
<h2 class="heading2">{% trans 'Active in these platforms' %}</h2>
{% if view.organisations %}
<ul class="u-list-reset">
{% for organisation in view.organisations %}
<li>
<a class="list-item-tiny" href="{% url 'organisation' organisation_slug=organisation.slug %}">
<img class="list-item-tiny__image" src="{% thumbnail organisation.logo '50x50' crop %}" alt="" />
<span class="list-item-tiny__body">{{ organisation.name }}</span>
</a>
</li>
{% endfor %}
</ul>
{% else %}
{% trans 'This user is not active in any platform yet.' %}
{% if object == request.user %}
<a href="/">{% trans 'Check some platforms out.' %}</a>
{% endif %}
{% endif %}
{% endcomment %}
</div>

<div class="user-profile__main">
<div
class="tabpanel active"
class="user-profile__main col-md-9 tabpanel active"
id="tabpanel-user-{{ user.pk }}-participation"
role="tabpanel"
aria-labelledby="tab-user-{{ user.pk }}-participation"
Expand All @@ -96,7 +111,7 @@ <h2 class="heading2">{% trans 'Active in these platforms' %}</h2>
{% endfor %}
</div>
<div
class="tabpanel"
class="user-profile__main col-md-9 tabpanel"
id="tabpanel-user-{{ user.pk }}-activities"
role="tabpanel"
aria-labelledby="tab-user-{{ user.pk }}-activities"
Expand All @@ -108,7 +123,5 @@ <h2 class="heading2">{% trans 'Active in these platforms' %}</h2>
{% endfor %}
</div>
</div>

</div>
</div>
{% endblock %}
4 changes: 2 additions & 2 deletions liqd_product/assets/scss/components/_tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,8 @@
@media (max-width: $breakpoint-xs) {
.tab {
margin-right: -4px;
padding-right: 0.3em;
padding-left: 0.3em;
padding-right: 0.5em;
padding-left: 0.5em;
}
}

Expand Down
36 changes: 5 additions & 31 deletions liqd_product/assets/scss/components/_user_profile.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,38 +20,12 @@
}

@media (min-width: $breakpoint) {
.user-profile {
display: grid;
grid-template-rows: 100px auto 1fr;
grid-template-columns: 1fr 3fr;
}

.user-profile__main {
grid-column: 2;
grid-row: 3;
}
/* Ensure that info sidebar is always visible in sm
and above and only a tab in sm
*/

.user-profile__side {
grid-column: 1;
grid-row: 3;
margin: 0;
}

.user-profile__tablist {
grid-column: 1 / 3;
-ms-grid-column-span: 2;
grid-row: 2;
}

.user-profile__avatar {
float: none;

// If grid layout is not supported, this would break the layout.
// Note that IE only implements a legacy version of the spec, so
// it will not use this code either.
@supports (display: grid) {
margin-top: -150px;
position: relative; // raise
}
display: block;
padding-top: 2*$padding;
}
}

0 comments on commit fc670ed

Please sign in to comment.