@asd20/ui 3.2.554 → 3.2.556

package/package.json

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

package/src/components/molecules/Asd20Swipe/index.vue

@@ -24,9 +24,14 @@
             }"
           ></span>
         </div>
+        <div class="asd20-swipe__download">
+          <button @click.stop.prevent="download" name="Download">
+            <span><b>↓ Download</b></span>
+          </button>
+        </div>
       </slot>
     </div>
-    <div v-if="showArrows" class="asd20-swipe__arrows">
+    <div v-if="showArrows && childLen > 1" class="asd20-swipe__arrows">
       <button
         v-if="cur > 0"
         class="asd20-swipe__arrows__button-prev"
@@ -77,6 +82,10 @@ export default {
       type: Number,
       default: 0,
     },
+    imageThumbnails: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -324,6 +333,9 @@ export default {
         this.diff = -this.wrapWidth * this.cur
       }
     },
+    download() {
+      window.open(this.imageThumbnails[this.index].url, '_blank')
+    },
   },
 }
 </script>
@@ -341,17 +353,23 @@ export default {
   }
   &__indicator {
     position: absolute;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex-shrink: 1;
     bottom: 0;
     left: 0;
     right: 0;
-    display: flex;
-    justify-content: center;
+    align-items: center;
     &__list {
       display: flex;
       justify-content: center;
       padding: 0.5rem;
       width: auto;
-      background: rgba(255, 255, 255, 1);
+      background: rgba(255, 255, 255, 0.6);
+      border-radius: 1rem;
+      width: min-content;
+      margin-bottom: 0.25rem;
     }
     &__item {
       display: inline-block;
@@ -361,6 +379,24 @@ export default {
       border-radius: 50%;
     }
   }
+  &__download {
+    z-index: 20000;
+    margin-bottom: 0.25rem;
+    :hover {
+      background: rgba(255, 255, 255, 0.8);
+    }
+    button {
+      border-radius: 0.75rem;
+      background: rgba(255, 255, 255, 0.6);
+      height: 1.5rem;
+      width: 6rem;
+      border: none;
+      padding: 0.25rem;
+      :hover {
+        background: rgba(255, 255, 255, 0);
+      }
+    }
+  }
   &__arrows {
     position: absolute;
     left: 0;
@@ -376,13 +412,14 @@ export default {
       position: relative;
       background: none;
       border: 0;
-      width: 4rem;
-      height: 4rem;
-      background: white;
+      width: 3rem;
+      height: 3rem;
+      background: rgba(255, 255, 255, 0.6);
       display: flex;
       justify-content: center;
       align-items: center;
       cursor: pointer;
+      border-radius: 50%;
       transition: background 0.1s ease-in;
       &:hover {
         background: rgba(255, 255, 255, 0.8);

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

@@ -35,6 +35,7 @@
         @click.native="showSlideshow = false"
         @keyup.esc.native="showSlideshow = false"
         :change-index="selectedIndex"
+        :imageThumbnails="imageThumbnails"
       >
         <asd20-swipe-item
           v-for="(image, index) in imageThumbnails"
@@ -79,25 +80,23 @@ export default {
   computed: {
     imageThumbnails() {
       let images = this.images || []
-      return (
-        images
-          // .filter(i => !i.isCover)
-          .map(i => ({
-            thumbnailUrl: (
-              i.files.find(f => f.name === 'thumbnail-md') || i.files[0]
-            ).url,
-            url: (i.files.find(f => f.name === 'full') || i.files[0]).url,
-            alt: i.metadata.alt,
-            credits: i.metadata.credits,
-            // isCover: i.isCover,
-          }))
-      )
+      return images
+        .filter(i => !i.isCover)
+        .map(i => ({
+          thumbnailUrl: (
+            i.files.find(f => f.name === 'thumbnail-md') || i.files[0]
+          ).url,
+          url: (i.files.find(f => f.name === 'full') || i.files[0]).url,
+          alt: i.metadata.alt,
+          credits: i.metadata.credits,
+          // isCover: i.isCover,
+        }))
     },
   },
 
   methods: {
     openImage(index) {
-      this.selectedIndex = index + 1
+      this.imageThumbnails.length > 1 ? this.selectedIndex = index + 1 : this.selectedIndex = index
       this.showSlideshow = true
     },
     truncatedDescription(description) {
@@ -204,12 +203,13 @@ export default {
   .text-overlay {
     position: absolute;
     display: block;
-    bottom: space(2);
+    bottom: space(2.5);
     color: #fff;
     background: rgba(50, 50, 50, 0.7);
     padding: space(0.5);
     max-width: 80vw;
     text-align: center;
+    border-radius: space(2);
   }
 }
 

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

@@ -219,7 +219,12 @@ export default {
   methods: {
     goBack() {
       if (typeof window === 'undefined') return
-      this.returnURL = document.referrer
+      if (document.referrer === undefined) {
+        const currentURL = new URL(window.location.href)
+        this.returnURL = currentURL.origin
+      } else {
+        this.returnURL = document.referrer
+      }
       // window.history.back()
       // const url = window.location.href
       // return url.slice(0, url.lastIndexOf('/'))

package/src/data/page-queries/sublanding-page-query-result.json

@@ -77,7 +77,7 @@
                 "files": [
                   {
                     "name": "thumbnail-md",
-                    "url": "https://asd20websitestorage.blob.core.windows.net/website-files/message-images//thumbnail-md/dcc_swimming_250x250.jpg"
+                    "url": "https://asd20websitestorage.blob.core.windows.net/website-files/message-images/all-students-learn-at-high-levels./thumbnail-md/PIES-choice-photo_250x250.jpg"
                   },
                   {
                     "name": "full",
@@ -85,7 +85,8 @@
                   }
                 ],
                 "metadata": {
-                  "alt": "This is ALT text."
+                  "alt": "This is ALT text.",
+                  "credits": "A teacher teaches."
                 }
               }
             ],