ISTWCMS-6863: initial refactor into standard UW columns

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;
-      }
-    }
-  }
-}

src/patterns/03-layouts/ofis/ofis-profile.twig

-<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 &amp; 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 &amp; 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>