1265 - Tapestry 3.0 - Show (i) icon on lightbox to show description and copyright/references

templates/vue/src/components/Lightbox/index.vue

@@ -41,6 +41,16 @@
           tabindex="0"
           @clicked="toggleFavourite(node.id)"
         />
+        <modal-button
+          icon="info-circle"
+          icon-size="sm"
+          :title="showInformation ? 'Hide information' : 'Show information'"
+          :icon-color="showInformation ? 'var(--highlight-color)' : ''"
+          :bg-color="showInformation ? '#fff' : ''"
+          :bg-hover-color="showInformation ? '#fff' : 'var(--highlight-color)'"
+          tabindex="0"
+          @clicked="showInformation = !showInformation"
+        />
         <modal-button
           v-if="canEditNode"
           aria-label="Edit this node."
@@ -52,6 +62,20 @@
         />
       </div>
       <div data-qa="lightbox-content" class="content" :style="contentStyles">
+        <transition name="slide-down">
+          <div v-if="showInformation" class="information-sheet">
+            <h1 class="information-header">{{ node.title }}</h1>
+            <section v-if="node.description">
+              <h2 class="content-header">About</h2>
+              <div class="content-body" v-html="node.description"></div>
+            </section>
+            <node-license :node="node"></node-license>
+            <section v-if="node.references">
+              <h2 class="content-header">References</h2>
+              <div class="content-body" v-html="node.references"></div>
+            </section>
+          </div>
+        </transition>
         <multi-content-media
           v-if="node.mediaType === 'multi-content'"
           id="multicontent-container"
@@ -82,6 +106,7 @@ import client from "@/services/TapestryAPI"
 import MultiContentMedia from "./media/MultiContentMedia"
 import TapestryMedia from "./media/TapestryMedia"
 import PageMenu from "./media/MultiContentMedia/PageMenu"
+import NodeLicense from "@/components/common/NodeLicense"
 import ModalButton from "./ModalButton"
 import { names } from "@/config/routes"
 import Helpers from "@/utils/Helpers"
@@ -93,6 +118,7 @@ export default {
     TapestryMedia,
     PageMenu,
     ModalButton,
+    NodeLicense,
   },
   props: {
     visible: {
@@ -113,6 +139,7 @@ export default {
     return {
       dimensions: {},
       isUsingCustomDimensions: false,
+      showInformation: false,
     }
   },
   computed: {
@@ -262,6 +289,8 @@ export default {
       }
     },
     handleShow() {
+      this.showInformation = false
+
       // if opening a multi-content unit node, instead go to its first visible child
       if (
         this.node.mediaType === "multi-content" &&
@@ -382,6 +411,61 @@ body.tapestry-lightbox-open {
     position: relative;
     height: 100%;
     overflow: hidden;
+    border-radius: 15px;
+  }
+
+  .information-sheet {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    max-height: 100%;
+    z-index: 100;
+    overflow: auto;
+    padding: 20px;
+    box-sizing: border-box;
+    background-color: #5d656c;
+    color: #becddc;
+    text-align: left;
+    box-shadow: 0 0 20px #000;
+
+    &.slide-down-enter-active,
+    &.slide-down-leave-active {
+      transition: margin-top 0.3s ease-in-out;
+    }
+    &.slide-down-enter,
+    &.slide-down-leave-to {
+      margin-top: -100%;
+    }
+
+    .content-header {
+      color: #fff;
+      margin: 1em -1em 0.2em;
+      border-bottom: solid 2px #6b747d;
+      padding: 0.2em 1em;
+      font-size: 1.75em;
+    }
+
+    .content-body {
+      display: block;
+      text-align: left;
+      color: #becddc;
+
+      a {
+        color: #becddc;
+        text-decoration: underline;
+        &:hover {
+          color: #fff;
+        }
+      }
+    }
+
+    .information-header {
+      color: #fff;
+      font-size: 1.75rem;
+      font-weight: 500;
+      margin-bottom: 1em;
+    }
   }
 
   .full-height-media {

templates/vue/src/components/Lightbox/media/TapestryMedia.vue

@@ -175,7 +175,7 @@ export default {
 .media-wrapper {
   overflow: auto;
   height: 100%;
-  widows: 100%;
+  width: 100%;
   padding: 0;
 
   &:not(.context-multi-content) {

templates/vue/src/components/Sidebar/index.vue

@@ -82,34 +82,7 @@
           <div class="content-body" v-html="node.description"></div>
         </section>
         <section ref="copyright" data-name="copyright">
-          <section v-if="node.license">
-            <h2 class="content-header">
-              License
-            </h2>
-            <p class="content-body" style="margin-bottom: 0.5em;">
-              <a
-                v-if="license.type === licenseTypes.CUSTOM && license.link"
-                :href="license.link"
-                target="_blank"
-              >
-                <span style="margin-right: 4px;" class="license-link">
-                  {{ license.name }}
-                </span>
-                <tapestry-icon icon="external-link-alt" />
-              </a>
-              <span v-else class="license-link">
-                <span v-if="node.license.type !== licenseTypes.CUSTOM">
-                  <i v-for="icon in license.icons" :key="icon" :class="icon"></i>
-                </span>
-                {{ license.name }}
-              </span>
-            </p>
-            <div
-              v-if="license.type === licenseTypes.CUSTOM && license.description"
-              class="content-body"
-              v-html="license.description"
-            ></div>
-          </section>
+          <node-license :node="node"></node-license>
           <section v-if="node.references">
             <h2 class="content-header">References</h2>
             <div class="content-body" v-html="node.references"></div>
@@ -133,8 +106,8 @@ import { mapGetters } from "vuex"
 import { names } from "@/config/routes"
 import Helpers from "@/utils/Helpers"
 import { nodeStatus } from "@/utils/constants"
-import { licenseTypes, licenses } from "@/utils/constants"
 import * as wp from "@/services/wp"
+import NodeLicense from "@/components/common/NodeLicense"
 import TapestryIcon from "@/components/common/TapestryIcon"
 import NodeReview from "./NodeReview"
 import NodeComments from "./NodeComments"
@@ -146,6 +119,7 @@ export default {
     NodeReview,
     NodeComments,
     TapestryIcon,
+    NodeLicense,
   },
   computed: {
     ...mapGetters(["getNode"]),
@@ -184,15 +158,6 @@ export default {
     canEdit() {
       return Helpers.hasPermission(this.node, "edit")
     },
-    licenseTypes() {
-      return licenseTypes
-    },
-    license() {
-      return {
-        ...this.node.license,
-        ...licenses[this.node.license.type],
-      }
-    },
     isReviewParticipant() {
       if (wp.canEditTapestry()) {
         return this.node.reviewStatus
@@ -513,15 +478,6 @@ export default {
               color: #fff;
             }
           }
-
-          .license-link {
-            color: white;
-            text-transform: capitalize;
-            font-weight: 600;
-            i {
-              margin-right: 4px;
-            }
-          }
         }
       }
     }

templates/vue/src/components/common/NodeLicense.vue

@@ -0,0 +1,92 @@
+<template>
+  <section v-if="node.license">
+    <h2 class="content-header">License</h2>
+    <p class="content-body" style="margin-bottom: 0.5em;">
+      <a
+        v-if="license.type === licenseTypes.CUSTOM && license.link"
+        :href="license.link"
+        target="_blank"
+      >
+        <span style="margin-right: 4px;" class="license-link">
+          {{ license.name }}
+        </span>
+        <tapestry-icon icon="external-link-alt" />
+      </a>
+      <span v-else class="license-link">
+        <span v-if="node.license.type !== licenseTypes.CUSTOM">
+          <i v-for="icon in license.icons" :key="icon" :class="icon"></i>
+        </span>
+        {{ license.name }}
+      </span>
+    </p>
+    <div
+      v-if="license.type === licenseTypes.CUSTOM && license.description"
+      class="content-body"
+      v-html="license.description"
+    ></div>
+  </section>
+</template>
+
+<script>
+import TapestryIcon from "@/components/common/TapestryIcon"
+import { licenseTypes, licenses } from "@/utils/constants"
+
+export default {
+  name: "node-license",
+  components: {
+    TapestryIcon,
+  },
+  props: {
+    node: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      licenseTypes,
+    }
+  },
+  computed: {
+    license() {
+      return {
+        ...this.node.license,
+        ...licenses[this.node.license.type],
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.content-header {
+  margin: 1em -1em 0.2em;
+  position: relative;
+  border-bottom: solid 2px #6b747d;
+  padding: 0.2em 1em;
+  font-size: 1.75em;
+}
+
+.content-body {
+  display: block;
+  text-align: left;
+  color: #becddc;
+
+  a {
+    color: #becddc;
+    text-decoration: underline;
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  .license-link {
+    color: white;
+    text-transform: capitalize;
+    font-weight: 600;
+    i {
+      margin-right: 4px;
+    }
+  }
+}
+</style>