@asd20/ui 3.2.828 → 3.2.829

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.828",
+  "version": "3.2.829",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/organisms/Asd20PrimaryHeader/index.vue

@@ -1,10 +1,18 @@
 <template>
-  <section class="asd20-primary-header" aria-label="Primary message">
-    <asd20-messaging id="main" v-bind="firstMessage"></asd20-messaging>
-    <div class="image-container">
-      <img class="background-image" :src="pageHeaderContent.imageUrl" alt="" />
-    </div>
-  </section>
+  <div>
+    <div class="photostrip"></div>
+
+    <section class="asd20-primary-header" aria-label="Primary message">
+      <asd20-messaging id="main" v-bind="firstMessage"></asd20-messaging>
+      <div class="image-container">
+        <img
+          class="background-image"
+          :src="pageHeaderContent.imageUrl"
+          alt=""
+        />
+      </div>
+    </section>
+  </div>
 </template>
 
 <script>
@@ -66,7 +74,20 @@ export default {
 <style lang="scss" scoped>
 @import '../../../design/_variables.scss';
 @import '../../../design/_mixins.scss';
+.photostrip {
+  height: 25vh;
+  width: 100%;
+  background-image: url(https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/ASD20PhotoStrip.jpg);
+  background-size: cover;
+  background-position: center;
+  background-attachment: scroll;
+  position: relative;
+  background-repeat: repeat-x;
+  animation: leftscroll 2000s infinite linear;
+  border-top: 20px solid var(--color__primary);
+  border-bottom: 20px solid var(--color__primary);
 
+}
 .asd20-primary-header {
   position: relative;
   display: flex;
@@ -80,7 +101,8 @@ export default {
 
   color: var(--color__primary);
   padding: space(3) space(1) space(3) space(1);
-  margin-top: space(1);
+  // margin-top: space(1);
+
   .asd20-messaging {
     margin-right: 0;
     padding-top: space(2);
@@ -120,18 +142,18 @@ export default {
     }
   }
 
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    width: 100%;
-    top: space(-1);
-    left: 0;
-    height: space(3);
-    background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');
-    background-size: cover;
-    background-position: 55% top;
-  }
+  // &::before {
+  //   content: '';
+  //   display: block;
+  //   position: absolute;
+  //   width: 100%;
+  //   top: space(-1);
+  //   left: 0;
+  //   height: space(3);
+  //   background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');
+  //   background-size: cover;
+  //   background-position: 55% top;
+  // }
   .image-container {
     width: 100%;
     text-align: center;
@@ -142,7 +164,20 @@ export default {
     }
   }
 }
+
+@keyframes leftscroll {
+  from {
+    background-position: 0%;
+  }
+  to {
+    background-position: 10000%;
+  }
+}
+
 @media (min-width: 1024px) {
+  .photostrip {
+    height: 40vh;
+  }
   .asd20-primary-header {
     flex-direction: row;
     justify-content: space-between;

package/src/components/templates/Asd20DistrictHomeTemplate/index.vue

@@ -28,38 +28,6 @@
         ></asd20-notification-group>
       </client-only>
 
-      <!-- Page Header -->
-
-      <!-- <asd20-choice-header
-      id="page-header"
-      v-if="pageHeaderContent"
-      v-bind="pageHeaderContent"
-    >
-      <asd20-district-logo slot="top" v-show="mq !== 'sm' && mq !== 'md'" />
-
-      <template slot="top">
-        <client-only>
-          <asd20-notification-group
-            :notifications="activeNotificationsByType.status"
-            group-type="status"
-            @dismiss="$emit('dismiss-notification', $event)"
-            @toggle-all="$emit('toggle-all')"
-          />
-        </client-only>
-
-        <client-only>
-          <asd20-notification-group
-            class="asd20-notification-group--floating"
-            :notifications="activeNotificationsByType.floating"
-            :total-dismissed-notifications="totalDismissedNotifications"
-            group-type="floating"
-            @dismiss="$emit('dismiss-notification', $event)"
-            @toggle-all="$emit('toggle-all')"
-          ></asd20-notification-group>
-        </client-only>
-      </template>
-    </asd20-choice-header> -->
-
       <!-- Headers -->
       <section class="logo-header">
         <client-only>
@@ -119,87 +87,10 @@
         </template>
       </section>
 
-      <!-- <asd20-primary-header
-      id="page-header"
-      heading="Apply for School Choice"
-      lead="We are now accepting applications for students living in, and out of, our district for the 2022-23 school year."
-      :callsToAction="[
-        {
-          label: 'Browse our Schools',
-          url: 'https://schools.asd20.org',
-        },
-        {
-          label: 'More about School Choice',
-          url: '/school-choice',
-        },
-      ]"
-    >
-    </asd20-primary-header> -->
-
-      <!-- <asd20-secondary-header
-      heading="Register for Kindergarten"
-      lead="Early Kindergarten registration is now open."
-      :call-to-action="{
-        url: 'https://www.asd20.org/academics/kindergarten',
-        label: 'Register for Kindergarten',
-      }"
-    ></asd20-secondary-header> -->
-
-      <!-- <asd20-tertiary-header
-      heading="Attend our Job Fair"
-      lead="We're hiring and hope you can attend our Job Fair on March 5, 2022, from 9 a.m. – 3 p.m."
-      :call-to-action="{
-        url:
-          'https://www.asd20.org/announcements/academy-district-20-job-fair/',
-        label: 'Register for our Job Fair',
-      }"
-    ></asd20-tertiary-header> -->
       <asd20-primary-header v-if="messages.length > 0" :messages="messages" />
       <asd20-secondary-header v-if="messages.length > 1" :messages="messages" />
       <asd20-tertiary-header v-if="messages.length > 2" :messages="messages" />
 
-      <!-- <asd20-return-to-school-header
-      id="page-header"
-      v-if="pageHeaderContent"
-      v-bind="pageHeaderContent"
-    >
-      <asd20-district-logo slot="top" v-show="mq !== 'sm' && mq !== 'md'" />
-
-      <template slot="top">
-        <client-only>
-          <asd20-notification-group
-            :notifications="activeNotificationsByType.status"
-            group-type="status"
-            @dismiss="$emit('dismiss-notification', $event)"
-            @toggle-all="$emit('toggle-all')"
-          />
-        </client-only>
-
-        <client-only>
-          <asd20-notification-group
-            class="asd20-notification-group--floating"
-            :notifications="activeNotificationsByType.floating"
-            :total-dismissed-notifications="totalDismissedNotifications"
-            group-type="floating"
-            @dismiss="$emit('dismiss-notification', $event)"
-            @toggle-all="$emit('toggle-all')"
-          ></asd20-notification-group>
-        </client-only>
-      </template>
-    </asd20-return-to-school-header> -->
-
-      <!-- <asd20-page-content
-      :primary-messages="primaryMessages"
-      :secondary-messages="secondaryMessages"
-    >
-      <slot />
-
-      <asd20-factoids-section
-        v-if="factoids && factoids.length > 0"
-        :factoids="factoids"
-      />
-    </asd20-page-content> -->
-
       <asd20-feeds-section
         :announcements="announcements"
         :announcements-feed-props="announcementsFeedProps"
@@ -416,9 +307,12 @@ export default {
       width: 100%;
     }
     .double-notification-wrapper {
+      position: absolute;
+      top: space(1);
+      right: space(0.5);
       display: flex;
       flex-direction: row;
-      justify-content: space-around;
+      justify-content: flex-end;
       width: 100%;
       align-items: center;
       flex-wrap: wrap;
@@ -428,6 +322,7 @@ export default {
       top: 20%;
     }
   }
+
   .asd20-primary-header,
   .asd20-secondary-header,
   .asd20-tertiary-header {
@@ -458,7 +353,7 @@ export default {
       right: 0 !important;
     }
     .double-notification-wrapper {
-      padding-right: space(1);
+      // padding-right: space(1);
       justify-content: flex-end !important;
     }
   }