@asd20/ui 3.2.409 → 3.2.412

package/package.json

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

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

@@ -10,18 +10,19 @@
     class="asd20-event-modal"
     @dismiss="$emit('dismiss')"
     :style="{ '--accent-color': event.calendarColor }"
+    v-scroll-lock="open"
   >
-    <header class="asd20-event-modal__header">
-      <div class="asd20-event-modal__date">
-        <div class="top">{{ event.weekday }}</div>
-        <div class="middle">{{ event.day }}</div>
-        <div class="bottom">{{ event.month }}</div>
-        <small>{{ event.year }}</small>
-      </div>
-      <h2 class="name">{{ event.summary }}</h2>
-    </header>
-    <Asd20Viewport class="asd20-event-modal__details" scrollable>
-      <Asd20List>
+    <Asd20Viewport tabindex="0" class="asd20-event-modal__details" scrollable>
+      <header class="asd20-event-modal__header">
+        <div class="asd20-event-modal__date">
+          <div class="top">{{ event.weekday }}</div>
+          <div class="middle">{{ event.day }}</div>
+          <div class="bottom">{{ event.month }}</div>
+          <small>{{ event.year }}</small>
+        </div>
+        <h2 class="name">{{ event.summary }}</h2>
+      </header>
+      <Asd20List class="description">
         <Asd20ListItem
           icon="map"
           icon-size="lg"
@@ -56,6 +57,8 @@
 
 <script>
 // import parse from 'date-fns/parse'
+import Vue from 'vue'
+
 import { truncate } from 'lodash-es'
 import { format, parse } from 'date-fns'
 import Asd20Modal from '../../molecules/Asd20Modal'
@@ -63,6 +66,8 @@ import Asd20Tag from '../../atoms/Asd20Tag'
 import Asd20List from '../../organisms/Asd20List'
 import Asd20ListItem from '../../molecules/Asd20ListItem'
 import Asd20Viewport from '../../atoms/Asd20Viewport'
+import VScrollLock from 'v-scroll-lock'
+Vue.use(VScrollLock)
 
 export default {
   name: 'Asd20EventModal',
@@ -193,11 +198,13 @@ export default {
     }
   }
   &__details {
-    padding: space(1);
   }
+  .description,
   .tags {
     display: flex;
-    width: 100%;
+    max-width: 100%;
+    padding: space(1);
+
     * {
       margin-right: space(0.125);
       margin-bottom: space(0.125);
@@ -231,7 +238,6 @@ export default {
       }
     }
     &__details {
-      padding: space(2);
     }
   }
 }

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

@@ -120,12 +120,12 @@ export default {
     width: 80%;
     .header-messaging-section {
       border-bottom: none;
-      width: 80%;
+      // width: 80%;
       &::v-deep .asd20-messaging {
         padding: space(1);
         margin-left: space(2);
         .asd20-messaging__content {
-          max-width: 80%;
+          // max-width: 80%;
         }
         .asd20-messaging__heading {
           @include fluid-type($base-font-size * 1.5, $base-font-size * 2);
@@ -137,7 +137,7 @@ export default {
         content: '';
         display: block;
         position: absolute;
-        width: 45%;
+        width: 75%;
         bottom: space(-.75);
         left: space(1.25);
         height: 60%;
@@ -174,6 +174,7 @@ export default {
       );
       flex-direction: row;
       width: inherit;
+      border: none;
     }
   }
 }