From 32f683daa875f99f5b9710e54bdfa93d305a10c6 Mon Sep 17 00:00:00 2001 From: Aline Date: Fri, 29 Nov 2019 18:02:12 +0100 Subject: [PATCH 01/22] Edit top section structure, and replace rounded avatar with vertical portrait --- .../atoms/picture/picture-portrait.twig | 18 ++++++++++++++++++ assets/components/atoms/picture/picture.yml | 5 +++++ .../pages/people-detail/people-detail.twig | 14 ++++++++------ assets/svg/portrait-placeholder.svg | 1 + 4 files changed, 32 insertions(+), 6 deletions(-) create mode 100644 assets/components/atoms/picture/picture-portrait.twig create mode 100644 assets/svg/portrait-placeholder.svg diff --git a/assets/components/atoms/picture/picture-portrait.twig b/assets/components/atoms/picture/picture-portrait.twig new file mode 100644 index 000000000..e8a0905d2 --- /dev/null +++ b/assets/components/atoms/picture/picture-portrait.twig @@ -0,0 +1,18 @@ + + + + + + + ALT + diff --git a/assets/components/atoms/picture/picture.yml b/assets/components/atoms/picture/picture.yml index 96c01edfb..28e7efd81 100644 --- a/assets/components/atoms/picture/picture.yml +++ b/assets/components/atoms/picture/picture.yml @@ -10,6 +10,11 @@ variants: wrapper: col-sm-4 col-md-2 col-lg-1 notes: | Avatar picture need an equal height and width in order to be displayed as a circle + - name: portrait + title: Portrait + wrapper: col-md-3 + notes: | + Portrait picture is used in People pages - name: one-third title: One third picture wrapper: col-md-4 diff --git a/assets/components/pages/people-detail/people-detail.twig b/assets/components/pages/people-detail/people-detail.twig index adf526e9b..7fd313e7f 100644 --- a/assets/components/pages/people-detail/people-detail.twig +++ b/assets/components/pages/people-detail/people-detail.twig @@ -43,22 +43,23 @@
-
+
{# Person avatar and buttons #}
-
+
+ - Avatar placeholder image + Avatar placeholder image
-

Habilitation Dr. Ing

+

prenom.nom@epfl.ch +41 21 666 77 88 @@ -90,7 +91,8 @@

-
+
+

Professeur titulaire, directeur du département XY

{# Collapsible info #} {% include '@molecules/collapse-group/collapse-group-rich-content.twig' with { title: false } %} diff --git a/assets/svg/portrait-placeholder.svg b/assets/svg/portrait-placeholder.svg new file mode 100644 index 000000000..cdc3719e5 --- /dev/null +++ b/assets/svg/portrait-placeholder.svg @@ -0,0 +1 @@ +portrait-placeholder \ No newline at end of file From 10668a2dec13594d1a0f5bee6b86a7b758ee8d49 Mon Sep 17 00:00:00 2001 From: Aline Date: Fri, 29 Nov 2019 18:12:51 +0100 Subject: [PATCH 02/22] Edit main information --- assets/components/base.scss | 4 ++++ .../pages/people-detail/people-detail.scss | 6 ++++++ .../pages/people-detail/people-detail.twig | 20 ++++++++++--------- 3 files changed, 21 insertions(+), 9 deletions(-) create mode 100644 assets/components/pages/people-detail/people-detail.scss diff --git a/assets/components/base.scss b/assets/components/base.scss index 5d8ffe1a1..61a99fe7c 100644 --- a/assets/components/base.scss +++ b/assets/components/base.scss @@ -121,3 +121,7 @@ @import 'content-types/program/program'; @import 'content-types/bachelor-project/bachelor-project'; @import 'content-types/project/project'; + +// +// pages: +@import 'pages/people-detail/people-detail'; diff --git a/assets/components/pages/people-detail/people-detail.scss b/assets/components/pages/people-detail/people-detail.scss new file mode 100644 index 000000000..ff1e7d85e --- /dev/null +++ b/assets/components/pages/people-detail/people-detail.scss @@ -0,0 +1,6 @@ +@charset 'utf-8'; + +.people-title { + font-size: 1.75rem; + font-weight: 700; +} \ No newline at end of file diff --git a/assets/components/pages/people-detail/people-detail.twig b/assets/components/pages/people-detail/people-detail.twig index 7fd313e7f..5f1a5408d 100644 --- a/assets/components/pages/people-detail/people-detail.twig +++ b/assets/components/pages/people-detail/people-detail.twig @@ -58,14 +58,6 @@
-
- -

- prenom.nom@epfl.ch - +41 21 666 77 88 - abbr.epfl.ch -

-

{% include "@atoms/social-icon/social-icon-link.twig" with { @@ -92,7 +84,17 @@

-

Professeur titulaire, directeur du département XY

+
+
+

Professeur titulaire, directeur du département XY

+

+ prenom.nom@epfl.ch + +41 21 666 77 88 + abbr.epfl.ch +

+

Nationalité: suisse et allemande

+
+
{# Collapsible info #} {% include '@molecules/collapse-group/collapse-group-rich-content.twig' with { title: false } %} From 09c7518ffa816cd520e23f5c4809656939b3448a Mon Sep 17 00:00:00 2001 From: Aline Date: Fri, 29 Nov 2019 19:23:09 +0100 Subject: [PATCH 03/22] Edit office contact information --- assets/components/atoms/button/button.scss | 1 + .../collapse-group-people-contacts.twig | 102 ++++++++++++++++++ .../collapse-group/collapse-group.yml | 4 + .../pages/people-detail/people-detail.twig | 3 +- 4 files changed, 108 insertions(+), 2 deletions(-) create mode 100644 assets/components/molecules/collapse-group/collapse-group-people-contacts.twig diff --git a/assets/components/atoms/button/button.scss b/assets/components/atoms/button/button.scss index 30c4949f4..5798938a7 100644 --- a/assets/components/atoms/button/button.scss +++ b/assets/components/atoms/button/button.scss @@ -53,6 +53,7 @@ .btn-secondary { background: transparent; border-color: $gray-300; + font-size: .8125rem; .bg-dark & { border-color: $gray-600; diff --git a/assets/components/molecules/collapse-group/collapse-group-people-contacts.twig b/assets/components/molecules/collapse-group/collapse-group-people-contacts.twig new file mode 100644 index 000000000..457e7e99b --- /dev/null +++ b/assets/components/molecules/collapse-group/collapse-group-people-contacts.twig @@ -0,0 +1,102 @@ +{% if title is not defined %}{% set title = 'Further readings' %}{% endif %} +{% if title %} +

{{title}}

+{% endif %} + + + +
+ +
+
+

+ EPFL PRES
+ + CE 3 316 (Centre Est)
+ Station 1
+ CH-1015 Lausanne + +

+
+
+ +41 21 666 77 88
+ {% include "@atoms/icon/icon.twig" %} Website
+ {% include "@atoms/icon/icon.twig" %} Directory
+ {% include "@atoms/icon/icon.twig" %} CE 3 316 +
+
+ +
+ + + +
+
+
+

+ EPFL PRES
+ + CE 3 316 (Centre Est)
+ Station 1
+ CH-1015 Lausanne + +

+
+
+ +41 21 666 77 88
+ {% include "@atoms/icon/icon.twig" %} Website
+ {% include "@atoms/icon/icon.twig" %} Directory
+ {% include "@atoms/icon/icon.twig" %} CE 3 316 +
+
+
+ + + +
+
+
+

+ EPFL PRES
+ + CE 3 316 (Centre Est)
+ Station 1
+ CH-1015 Lausanne + +

+
+
+ +41 21 666 77 88
+ {% include "@atoms/icon/icon.twig" %} Website
+ {% include "@atoms/icon/icon.twig" %} Directory
+ {% include "@atoms/icon/icon.twig" %} CE 3 316 +
+
+
diff --git a/assets/components/molecules/collapse-group/collapse-group.yml b/assets/components/molecules/collapse-group/collapse-group.yml index 01484163c..8895df224 100644 --- a/assets/components/molecules/collapse-group/collapse-group.yml +++ b/assets/components/molecules/collapse-group/collapse-group.yml @@ -3,6 +3,10 @@ name: collapse-group variants: - name: rich-content title: Collapse with rich content + - name: people-contacts + title: Collapse with contact info + notes: | + Used in People pages notes: |
diff --git a/assets/components/pages/people-detail/people-detail.twig b/assets/components/pages/people-detail/people-detail.twig index 5f1a5408d..a6bdcb877 100644 --- a/assets/components/pages/people-detail/people-detail.twig +++ b/assets/components/pages/people-detail/people-detail.twig @@ -96,8 +96,7 @@
{# Collapsible info #} - {% include '@molecules/collapse-group/collapse-group-rich-content.twig' with { title: false } %} - + {% include '@molecules/collapse-group/collapse-group-people-contacts.twig' with { title: false } %}

Liste complète des adresses et fonctions From 864580f1162e04af7a606b432686887fcfeb40c4 Mon Sep 17 00:00:00 2001 From: Aline Date: Fri, 29 Nov 2019 19:23:38 +0100 Subject: [PATCH 04/22] Edit collapsible contact panels --- .../collapse-group-people-contacts.twig | 65 +++++++++++-------- 1 file changed, 39 insertions(+), 26 deletions(-) diff --git a/assets/components/molecules/collapse-group/collapse-group-people-contacts.twig b/assets/components/molecules/collapse-group/collapse-group-people-contacts.twig index 457e7e99b..e94336309 100644 --- a/assets/components/molecules/collapse-group/collapse-group-people-contacts.twig +++ b/assets/components/molecules/collapse-group/collapse-group-people-contacts.twig @@ -1,4 +1,4 @@ -{% if title is not defined %}{% set title = 'Further readings' %}{% endif %} +{% if title is not defined %}{% set title = 'Contact information' %}{% endif %} {% if title %}

{{title}}

{% endif %} @@ -11,13 +11,13 @@ aria-expanded="false" aria-controls="collapse-1" > - Teaching Staff Member at School Concil IC + Fonction précise, Nom du département
-
-
+
+

EPFL PRES
@@ -27,11 +27,14 @@

-
- +41 21 666 77 88
- {% include "@atoms/icon/icon.twig" %} Website
- {% include "@atoms/icon/icon.twig" %} Directory
- {% include "@atoms/icon/icon.twig" %} CE 3 316 +
+ +41 21 666 77 88 + Bureau principal: INN 019 +
+ +41 21 666 55 66 + Bureau: INN 018 +
+ Unité: EPFL › SI › SI-EXOP › EXAPP
@@ -45,12 +48,13 @@ aria-expanded="false" aria-controls="collapse-2" > - Silent Spring + Fonction précise, Nom du département
-
-
+ +
+

EPFL PRES
@@ -60,13 +64,17 @@

-
- +41 21 666 77 88
- {% include "@atoms/icon/icon.twig" %} Website
- {% include "@atoms/icon/icon.twig" %} Directory
- {% include "@atoms/icon/icon.twig" %} CE 3 316 +
+ +41 21 666 77 88 + Bureau principal: INN 019 +
+ +41 21 666 55 66 + Bureau: INN 018 +
+ Unité: EPFL › SI › SI-EXOP › EXAPP
+
-
-
+ +
+

EPFL PRES
@@ -92,11 +101,15 @@

-
- +41 21 666 77 88
- {% include "@atoms/icon/icon.twig" %} Website
- {% include "@atoms/icon/icon.twig" %} Directory
- {% include "@atoms/icon/icon.twig" %} CE 3 316 +
+ +41 21 666 77 88 + Bureau principal: INN 019 +
+ +41 21 666 55 66 + Bureau: INN 018 +
+ Unité: EPFL › SI › SI-EXOP › EXAPP
-
+ +
\ No newline at end of file From d5ef50515b13a077245ce1334b6f27369163b4f9 Mon Sep 17 00:00:00 2001 From: Aline Date: Fri, 29 Nov 2019 19:54:21 +0100 Subject: [PATCH 05/22] Edit extra information --- .../pages/people-detail/people-detail.scss | 8 ++++++++ .../pages/people-detail/people-detail.twig | 16 +++++++++------- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/assets/components/pages/people-detail/people-detail.scss b/assets/components/pages/people-detail/people-detail.scss index ff1e7d85e..73f1251f0 100644 --- a/assets/components/pages/people-detail/people-detail.scss +++ b/assets/components/pages/people-detail/people-detail.scss @@ -3,4 +3,12 @@ .people-title { font-size: 1.75rem; font-weight: 700; +} + +.people-contacts { + + hr { + border-color: $gray-300; + margin: 0; + } } \ No newline at end of file diff --git a/assets/components/pages/people-detail/people-detail.twig b/assets/components/pages/people-detail/people-detail.twig index a6bdcb877..4bb33f778 100644 --- a/assets/components/pages/people-detail/people-detail.twig +++ b/assets/components/pages/people-detail/people-detail.twig @@ -74,16 +74,10 @@ } %}

-
-
Disponibilités
-

- Absente un vendredi sur deux. -

-
-
+

Professeur titulaire, directeur du département XY

@@ -97,6 +91,14 @@
{# Collapsible info #} {% include '@molecules/collapse-group/collapse-group-people-contacts.twig' with { title: false } %} +
+
+
+

Informations complémentaires

+

Disponibilités: absente un vendredi sur deux.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor urna id nulla ornare, placerat gravida nulla tincidunt. Nullam scelerisque mauris neque. Quisque condimentum nisl dolor, id auctor lorem interdum non.

+
+

Liste complète des adresses et fonctions From aa512938fb6b563e21f53858bad322e1d408b7d4 Mon Sep 17 00:00:00 2001 From: Aline Date: Tue, 3 Dec 2019 15:18:06 +0100 Subject: [PATCH 06/22] Update social icons --- .../social-icon/social-icon-link-group.twig | 1 + .../social-icon-scientific-networks.twig | 9 ++++++ .../social-icon-single-link-with-details.twig | 11 +++++++ .../atoms/social-icon/social-icon.scss | 24 +++++++++++++++ .../atoms/social-icon/social-icon.yml | 3 ++ .../pages/people-detail/people-detail.twig | 30 ++++++++----------- assets/icons/google.svg | 1 + 7 files changed, 61 insertions(+), 18 deletions(-) create mode 100644 assets/components/atoms/social-icon/social-icon-scientific-networks.twig create mode 100644 assets/components/atoms/social-icon/social-icon-single-link-with-details.twig create mode 100644 assets/icons/google.svg diff --git a/assets/components/atoms/social-icon/social-icon-link-group.twig b/assets/components/atoms/social-icon/social-icon-link-group.twig index 349f5ea0f..7ac270a62 100644 --- a/assets/components/atoms/social-icon/social-icon-link-group.twig +++ b/assets/components/atoms/social-icon/social-icon-link-group.twig @@ -1,6 +1,7 @@ {% set round = round ? round : false %} {% set discrete = discrete ? discrete : false %} {% set negative = negative ? negative : false %} + {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Facebook', icon: 'icon-facebook', round: round, discrete: discrete, negative: negative, url: 'https://www.facebook.com/epflcampus' } %} {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Twitter', icon: 'icon-twitter', round: round, discrete: discrete, negative: negative, url: 'https://twitter.com/epfl' } %} {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Instagram', icon: 'icon-instagram', round: round, discrete: discrete, negative: negative, url: 'http://instagram.com/epflcampus' } %} diff --git a/assets/components/atoms/social-icon/social-icon-scientific-networks.twig b/assets/components/atoms/social-icon/social-icon-scientific-networks.twig new file mode 100644 index 000000000..22806a95b --- /dev/null +++ b/assets/components/atoms/social-icon/social-icon-scientific-networks.twig @@ -0,0 +1,9 @@ +{% set round = round ? round : false %} +{% set discrete = discrete ? discrete : true %} +{% set negative = negative ? negative : false %} + +{% include '@atoms/social-icon/social-icon-single-link-with-details.twig' with { pretty_name: 'LinkedIn', icon: 'icon-linkedin', round: round, discrete: discrete, negative: negative, url: 'https://www.linkedin.com/school/epfl/' } %} +{% include '@atoms/social-icon/social-icon-single-link-with-details.twig' with { pretty_name: 'Google Scholar', icon: 'icon-google', round: round, discrete: discrete, negative: negative, url: 'https://scholar.google.com/' } %} + \ No newline at end of file diff --git a/assets/components/atoms/social-icon/social-icon-single-link-with-details.twig b/assets/components/atoms/social-icon/social-icon-single-link-with-details.twig new file mode 100644 index 000000000..351ffc161 --- /dev/null +++ b/assets/components/atoms/social-icon/social-icon-single-link-with-details.twig @@ -0,0 +1,11 @@ +{% set pretty_name = pretty_name ?: 'Twitter' %} +{% set user_id = user_id ?: 'firstname.name' %} +{% set icon = icon ?: 'icon-twitter' %} +{% set round = round ? ' social-icon-round' : '' %} +{% set discrete = discrete ? ' social-icon-discrete' : '' %} +{% set negative = negative ? ' social-icon-negative' : '' %} +{% set url = url or '#' %} + diff --git a/assets/components/atoms/social-icon/social-icon.scss b/assets/components/atoms/social-icon/social-icon.scss index 4d4bce36a..77b0abc0c 100644 --- a/assets/components/atoms/social-icon/social-icon.scss +++ b/assets/components/atoms/social-icon/social-icon.scss @@ -14,6 +14,30 @@ } } +.social-icon-details { + min-height: 2.6em; + text-decoration: none !important; + vertical-align: bottom; + + &:hover { + background: $gray-600; + color: white; + } + + .user { + line-height: 24px; + position: relative; + top: 2px; + vertical-align: bottom; + } + + .icon + .user { + line-height: 1em; + margin-left: .25em; + top: -1px; + } +} + a.social-icon { margin-bottom: $spacer * 0.3; transition: diff --git a/assets/components/atoms/social-icon/social-icon.yml b/assets/components/atoms/social-icon/social-icon.yml index d6451f3d4..ac7367f29 100644 --- a/assets/components/atoms/social-icon/social-icon.yml +++ b/assets/components/atoms/social-icon/social-icon.yml @@ -19,6 +19,9 @@ variants: title: Round Discrete Link - name: negative-link title: Negative Link + title: Scientific networks + - name: scientific-networks + title: Scientific networks notes: | Icons to accomodate social boxes. The available social networks are: diff --git a/assets/components/pages/people-detail/people-detail.twig b/assets/components/pages/people-detail/people-detail.twig index 4bb33f778..806aa2cb7 100644 --- a/assets/components/pages/people-detail/people-detail.twig +++ b/assets/components/pages/people-detail/people-detail.twig @@ -59,20 +59,21 @@

+

- {% include "@atoms/social-icon/social-icon-link.twig" with { - discrete: true, - icon: "icon-facebook" - } %} - {% include "@atoms/social-icon/social-icon-link.twig" with { - discrete: true, - icon: "icon-twitter" - } %} - {% include "@atoms/social-icon/social-icon-link.twig" with { - discrete: true, - icon: "icon-linkedin" + {% include "@atoms/social-icon/social-icon-scientific-networks.twig" with { + discrete: true } %}

+ +

+ + Liste complète des adresses et fonctions +
+ {% include "@atoms/icon/icon.twig" with { icon: 'icon-lock' } %}Données administratives + +

+
@@ -99,13 +100,6 @@

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor urna id nulla ornare, placerat gravida nulla tincidunt. Nullam scelerisque mauris neque. Quisque condimentum nisl dolor, id auctor lorem interdum non.

-

- - Liste complète des adresses et fonctions -
- {% include "@atoms/icon/icon.twig" with { icon: 'icon-lock' } %}Données administratives - -

diff --git a/assets/icons/google.svg b/assets/icons/google.svg new file mode 100644 index 000000000..014b5ceb9 --- /dev/null +++ b/assets/icons/google.svg @@ -0,0 +1 @@ + \ No newline at end of file From db7e4e5e3e091a0d91ccb02cc1de3806ab915194 Mon Sep 17 00:00:00 2001 From: Aline Date: Tue, 3 Dec 2019 16:40:42 +0100 Subject: [PATCH 07/22] Update biography area --- .../atoms/collapse/collapse-partial.twig | 7 ++- .../components/atoms/separator/separator.scss | 5 ++ .../components/atoms/separator/separator.twig | 4 ++ .../components/atoms/separator/separator.yml | 1 + .../pages/people-detail/people-detail.twig | 47 ++++++++++++------- assets/components/site.scss | 2 +- assets/config/typography.scss | 2 +- 7 files changed, 49 insertions(+), 19 deletions(-) diff --git a/assets/components/atoms/collapse/collapse-partial.twig b/assets/components/atoms/collapse/collapse-partial.twig index 7b2fd4c41..7ebb1b51e 100644 --- a/assets/components/atoms/collapse/collapse-partial.twig +++ b/assets/components/atoms/collapse/collapse-partial.twig @@ -1,5 +1,10 @@