diff --git a/src/patterns/03-layouts/ofis/_ofis-profile.scss b/src/patterns/03-layouts/ofis/_ofis-profile.scss index 463285940c41abf249e347bbc178f443c5b054e4..8ebc288d103f4a5c2aefd060644e81a64e9cb1b5 100644 --- a/src/patterns/03-layouts/ofis/_ofis-profile.scss +++ b/src/patterns/03-layouts/ofis/_ofis-profile.scss @@ -25,42 +25,3 @@ } } } - -.ofis-top { - display: flex; - flex-direction: column; - gap: 1rem; - margin-bottom: 2rem; - justify-content: space-between; - width: 100%; - - @media(min-width: $screen-lg) { - flex-direction: row; - } -} - -.ofis-video { - overflow: hidden; - padding-top: 1rem; - width: 100%; - flex: 0 1 50%; - - @media(min-width: $screen-lg) { - width: 50%; - } - - & > .ofis-video__link { - padding: 1rem; - text-align: center; - - a { - font-family: var(--font-systemmedium); - font-size: var(--font-size-0); - text-decoration: underline; - - &:hover { - text-decoration: none; - } - } - } -} diff --git a/src/patterns/03-layouts/ofis/ofis-profile.twig b/src/patterns/03-layouts/ofis/ofis-profile.twig index c4d35dd77c22bf6f110cc1ea106cd1d13e54059f..0db26b5b831ee3fbbe10a8f8e8cbc7e102138ddb 100644 --- a/src/patterns/03-layouts/ofis/ofis-profile.twig +++ b/src/patterns/03-layouts/ofis/ofis-profile.twig @@ -1,60 +1,63 @@ -<section class="layout layout-ofis"> +<section class="uw-contained-width uw-section-spacing--default uw-section-separator--none uw-column-separator--none layout {% if ofis_data.profile.video %}layout--uw-2-col even-split{% else %}layout--uw-1-col{% endif %}"> <div> - <div class="ofis-top"> - <div class="ofis-profile-header"> - {% if ofis_data.profile.photo %} - <img alt="{{ ofis_data.profile.nickname }}" - class="ofis-profile-picture" src="{{ ofis_data.profile.photo }}"> + <div class="ofis-profile-header"> + {% if ofis_data.profile.photo %} + <img alt="{{ ofis_data.profile.nickname }}" + class="ofis-profile-picture" src="{{ ofis_data.profile.photo }}"> + {% endif %} + <div> + <div class="ofis-profile-jobtitle" property="schema:jobTitle"> + {{ ofis_data.profile.profile_job_title | join(', ') }} + </div> + {% if ofis_data.profile.profile_email %} + <div>{{ 'Email:'|t }} <a + href="mailto:{{ ofis_data.profile.profile_email }}">{{ ofis_data.profile.profile_email }}</a> + </div> + {% endif %} + {% if ofis_data.profile.location %} + <div>{{ 'Location:'|t }} {{ ofis_data.profile.location }}</div> {% endif %} - <div> - <div class="ofis-profile-jobtitle" property="schema:jobTitle"> - {{ ofis_data.profile.profile_job_title | join(', ') }} + {% if ofis_data.profile.profile_phones %} + <div>{{ 'Phone:'|t }} {{ ofis_data.profile.profile_phones }}</div> + {% endif %} + {% if ofis_data.profile.personal_url %} + <div><a + href="{{ ofis_data.profile.personal_url }}">{{ ofis_data.profile.personal_url_title }}</a> </div> - {% if ofis_data.profile.profile_email %} - <div>{{ 'Email:'|t }} <a - href="mailto:{{ ofis_data.profile.profile_email }}">{{ ofis_data.profile.profile_email }}</a> - </div> - {% endif %} - {% if ofis_data.profile.location %} - <div>{{ 'Location:'|t }} {{ ofis_data.profile.location }}</div> - {% endif %} - {% if ofis_data.profile.profile_phones %} - <div>{{ 'Phone:'|t }} {{ ofis_data.profile.profile_phones }}</div> - {% endif %} - {% if ofis_data.profile.personal_url %} - <div><a - href="{{ ofis_data.profile.personal_url }}">{{ ofis_data.profile.personal_url_title }}</a> - </div> - {% endif %} - {% if ofis_data.profile.lab_url %} - <div><a - href="{{ ofis_data.profile.lab_url }}">{{ ofis_data.profile.lab_url_title }}</a> - </div> - {% endif %} - {% if ofis_data.profile.active %} - <div>{{ 'Status:'|t }} {{ ofis_data.profile.active }}</div> - {% endif %} - {% if ofis_data.profile.crossappointments %} - <div>{{ 'Faculty & Department Cross-Appointments:'|t }} {{ ofis_data.profile.crossappointments|join(', ') }}</div> - {% endif %} - </div> - </div> - <div class="ofis-video"> - {% if ofis_data.profile.video %} - {% set vid = ofis_data.profile.video|split('?v=')[1] %} - {% if vid %} - {% set ytembed = 'https://www.youtube.com/embed/' ~ vid %} - <iframe width="560" height="315" src="{{ ytembed }}" - allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" - referrerpolicy="strict-origin-when-cross-origin" - allowfullscreen></iframe> - <div class="ofis-video__link"> - <a href="{{ ofis_data.profile.video }}">Watch on Youtube</a> - </div> - {% endif %} + {% endif %} + {% if ofis_data.profile.lab_url %} + <div><a + href="{{ ofis_data.profile.lab_url }}">{{ ofis_data.profile.lab_url_title }}</a> + </div> + {% endif %} + {% if ofis_data.profile.active %} + <div>{{ 'Status:'|t }} {{ ofis_data.profile.active }}</div> + {% endif %} + {% if ofis_data.profile.crossappointments %} + <div>{{ 'Faculty & Department Cross-Appointments:'|t }} {{ ofis_data.profile.crossappointments|join(', ') }}</div> {% endif %} </div> </div> + </div> + {% if ofis_data.profile.video %} + <div> + {% set vid = ofis_data.profile.video|split('?v=')[1] %} + {% if vid %} + {% set ytembed = 'https://www.youtube.com/embed/' ~ vid %} + <iframe width="560" height="315" src="{{ ytembed }}" + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" + referrerpolicy="strict-origin-when-cross-origin" + allowfullscreen></iframe> + <div class="ofis-video__link"> + <a href="{{ ofis_data.profile.video }}">Watch on Youtube</a> + </div> + {% endif %} + </div> + {% endif %} +</section> + +<section class="uw-contained-width uw-section-spacing--default uw-section-separator--none uw-column-separator--none layout layout--uw-1-col"> + <div> {% if ofis_data.profile.profile_bio %} <h2>{{ 'Biography'|t }}</h2> <div>{{ ofis_data.profile.profile_bio | striptags('<a>') | raw | nl2br }}</div>