Skip to content

Commit

Permalink
improve User profile
Browse files Browse the repository at this point in the history
  • Loading branch information
zemax committed Jun 25, 2019
1 parent ad6ef3f commit 8b9f46d
Show file tree
Hide file tree
Showing 6 changed files with 147 additions and 145 deletions.
1 change: 1 addition & 0 deletions assets/css/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
*************************************************/
@import "components/app-flashes";
@import "components/autocomplete";
@import "components/tags";
@import "components/breadcrumb";
@import "components/pager";
@import "components/see-more";
Expand Down
49 changes: 0 additions & 49 deletions assets/css/components/_autocomplete.scss
Original file line number Diff line number Diff line change
Expand Up @@ -22,55 +22,6 @@
display: block;
@include clearfloat;

.tag {
float: left;

display: flex;
flex-flow: row nowrap;
align-items: center;

white-space: nowrap;

margin-right: .5em;
margin-bottom: .5rem;
padding: .5em 1em;
font-size: rem(10px);

color: $color_action;
background-color: lighten($color_action, 50);
border-radius: 2em;

button {
position: relative;
@include button-reset;
margin-left: .5em;

width: 1em;
height: 1em;
border: 1px solid $color_action;
border-radius: .5em;

&::before,
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 0;
border-top: 1px solid $color_action;
}

&::before {
transform: translate(-50%, -50%) rotate(45deg);
}

&::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
}
}

.awesomplete,
.algolia-autocomplete {
float: left;
Expand Down
59 changes: 59 additions & 0 deletions assets/css/components/_tags.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/**************************************************
* TAGS
**************************************************/

.tags {
.tag {
float: left;

display: flex;
flex-flow: row nowrap;
align-items: center;

white-space: nowrap;

margin-right: .5em;
margin-bottom: .5rem;
padding: .5em 1em;
font-size: rem(10px);

color: $color_action;
background-color: lighten($color_action, 50);
border-radius: 2em;

button {
position: relative;
@include button-reset;
margin-left: .5em;

width: 1em;
height: 1em;
border: 1px solid $color_action;
border-radius: .5em;

&::before,
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 0;
border-top: 1px solid $color_action;
}

&::before {
transform: translate(-50%, -50%) rotate(45deg);
}

&::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
}
}
}

ul.tags {
@include clearulli(true);
@include clearfloat;
}
90 changes: 35 additions & 55 deletions assets/css/contents/user/user.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@
}

img {
display: block;
display: block;
object-fit: cover;
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}

svg {
Expand Down Expand Up @@ -194,74 +194,54 @@
@include card_shadow;
padding: padding_vertical() padding_horizontal();

.user-title {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;

margin-bottom: padding_vertical();
}

.user--name {
margin-bottom: rem(6px);
}
> .user-infos {
.user-title {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;

.user--location,
.user--site {
font-size: rem(16px);
color: $color_grey_neutral
}
margin-bottom: padding_vertical();
}

.user--avatar {
width: rem(100px);
height: rem(100px);
.user--name {
margin-bottom: rem(6px);
}

@include medium-or-more {
margin-right: padding_horizontal();
.user--location,
.user--site {
font-size: rem(16px);
color: $color_grey_neutral
}
}

.user--presentation,
.user--skills,
.user--bio {
margin-bottom: rem(30px);
}
.user--avatar {
width: rem(100px);
height: rem(100px);

.user--presentation {

@include font_default_bold;
@include medium-or-more {
margin-right: padding_horizontal();
}
}

color: $color_grey_neutral;
}
.user--presentation,
.user--skills,
.user--bio {
margin-bottom: rem(30px);
}

.user--skills,
.user--groups {
@include clearulli;
.user--presentation {

li {
@include font_default_bold;

font-size: rem(16px);
text-transform: capitalize;
color: $color_action;
color: $color_grey_neutral;
}

a {
text-decoration: none;

&:focus,
&:hover {
text-decoration: underline;
.user--bio {
p {
font-size: rem(16px);
}
}
}

.user--bio {
p {
font-size: rem(16px);
}
}
}

/**************************************************
Expand Down
92 changes: 51 additions & 41 deletions templates/contents/user/user--profile.html.twig
Original file line number Diff line number Diff line change
@@ -1,56 +1,66 @@
{% set classes = ['user', 'user__profile'] %}
<div class="{{ classes|join(' ') }}" style="--color: {{ user.name|color }}">
<div class="user-title">
{% include 'contents/user/partials/user--avatar.html.twig' with{'user':user, 'filter':'profile'} %}

<div>
<h1 class="h2 user--name">{{ user.name }}</h1>

{% set location = [] %}
{% if user.city is not empty %}{% set location = location|merge([user.city]) %}{% endif %}
{% if user.country is not empty %}{% set location = location|merge([user.country|countryName]) %}{% endif %}
{% if location is not empty %}
<div class="user--location">{{ location|join(', ') }}</div>
{% endif %}

{% if user.site is not empty %}
<div class="user--site">{{ user.site.name }}</div>
{% endif %}
</div>
</div>
<div class="user--presentation">{{ user.presentation }}</div>
<div class="user-infos">
<div class="user-title">
{% include 'contents/user/partials/user--avatar.html.twig' with{'user':user, 'filter':'profile'} %}

<div>
<h1 class="h2 user--name">{{ user.name }}</h1>

{% if user.skills is not empty %}
<div class="user--skills">
<h2 class="h3">{{ 'pages.member.profile.skills.title'|trans }}&nbsp;:</h2>
{% set location = [] %}
{% if user.city is not empty %}{% set location = location|merge([user.city]) %}{% endif %}
{% if user.country is not empty %}{% set location = location|merge([user.country|countryName]) %}{% endif %}
{% if location is not empty %}
<div class="user--location">{{ location|join(', ') }}</div>
{% endif %}

<ul>
{% for skill in user.skills %}
<li>{{ skill.slug|trans({}, 'skills') }}</li>
{% endfor %}
</ul>
{% if user.site is not empty %}
<div class="user--site">{{ user.site.name }}</div>
{% endif %}
</div>
</div>
{% endif %}
<div class="user--presentation">{{ user.presentation }}</div>

{% if user.bio is not empty %}
<div class="user--bio">
<h2 class="h3">{{ 'pages.member.profile.bio.title'|trans }}&nbsp;:</h2>
{% if user.skills is not empty %}
<div class="user--skills">
<h2 class="h3">{{ 'pages.member.profile.skills.title'|trans }}&nbsp;:</h2>

<p>{{ user.bio|nl2br }}</p>
</div>
{% endif %}
<ul class="tags">
{% for skill in user.skills %}
<li class="tag">{{ skill.slug|trans({}, 'skills') }}</li>
{% endfor %}
</ul>
</div>
{% endif %}

{% if user.bio is not empty %}
<div class="user--bio">
<h2 class="h3">{{ 'pages.member.profile.bio.title'|trans }}&nbsp;:</h2>

<p>{{ user.bio|nl2br }}</p>
</div>
{% endif %}
</div>

{% if user.usergroupmemberships is not empty %}
<div class="user--groups">
<h2 class="h3">{{ 'pages.member.profile.groups.title'|trans }}&nbsp;:</h2>

<ul>
{% for membership in user.usergroupmemberships %}
{% if user_group_relation.isMember(user, membership.usergroup) %}
<li><a href="{{ path('group_index', {'groupSlug':membership.usergroup.slug}) }}">{{ membership.usergroup.name }}</a></li>
{% endif %}
{% endfor %}
</ul>
<div class="groups-list">
<ul>
{% for membership in user.usergroupmemberships %}
{% if user_group_relation.isMember(user, membership.usergroup) %}
<li>
{% include 'contents/group/group--teaser.html.twig' with {'group':membership.usergroup} %}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
{% endif %}

<div class="user--contact">
<a class="cta" href="mailto:{{ user.email }}" target="_blank">{{ 'pages.user.profile.contact'|trans }}</a>
</div>
</div>
1 change: 1 addition & 0 deletions translations/messages.fr.yml
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,7 @@ pages:
my_groups: "Mes groupes"
profile:
title: "Profil"
contact: "Contacter"
is_admin: "Administrateur"
group:
group_create:
Expand Down

0 comments on commit 8b9f46d

Please sign in to comment.