diff --git a/src/patterns/03-layouts/ofis/_ofis-profile.scss b/src/patterns/03-layouts/ofis/_ofis-profile.scss index 8ebc288d103f4a5c2aefd060644e81a64e9cb1b5..7154d9c5ba794b63d8ca40263e35c828fbeb1045 100644 --- a/src/patterns/03-layouts/ofis/_ofis-profile.scss +++ b/src/patterns/03-layouts/ofis/_ofis-profile.scss @@ -25,3 +25,27 @@ } } } + +.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%; + } +} diff --git a/src/patterns/03-layouts/ofis/ofis-profile.twig b/src/patterns/03-layouts/ofis/ofis-profile.twig index 558873de02a149908b50d889e84d229525253cd0..a7249e109d5225ede660dbe9888b082aee7f92c7 100644 --- a/src/patterns/03-layouts/ofis/ofis-profile.twig +++ b/src/patterns/03-layouts/ofis/ofis-profile.twig @@ -1,34 +1,54 @@ <section class="layout layout-ofis"> <div> - <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 %} - {% 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> + <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 }}"> {% 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> + <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 %} + {% 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 yy = 'https://www.youtube.com/embed/' ~ vid %} + <iframe width="560" height="315" src="{{ yy }}" + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" + referrerpolicy="strict-origin-when-cross-origin" + allowfullscreen></iframe> + {% endif %} {% endif %} </div> </div>