Qol 8396 UI design for image zoom on click for swe 4 (#410)

* QOL-8396 UI design for Image zoom on click for SWE 4 * QOL-8396 UI design for Image zoom on click for SWE 4 and DC-28049 - change AGLS links * floating images * Added comments and styles changes * Added comments and styles changes * default color styles * refactor image figure Co-authored-by: asifamingov <[email protected]>
qld-gov-au · Jan 12, 2022 · 64714b1 · 64714b1
1 parent cff2d8b
commit 64714b1
Show file tree

Hide file tree

Showing 7 changed files with 371 additions and 47 deletions.
diff --git a/src/assets/_project/_blocks/components/gallery/qg-gallery.js b/src/assets/_project/_blocks/components/gallery/qg-gallery.js
@@ -1,6 +1,6 @@
 if ($("script[src*='jquery.fancybox']").length === 0) {
   // load scripts and styles only if any of the selectors are present on the page
-  if ($('.qg-image-gallery').length > 0 || $('.qg-lightbox').length > 0 || $('.image-gallery').length > 0 || $('[class*="cut-in"]').length > 0) {
+  if ($('[data-fancybox]').length > 0 || $('.qg-image-gallery').length > 0 || $('.qg-lightbox').length > 0 || $('.image-gallery').length > 0 || $('[class*="cut-in"]').length > 0) {
     // append style
     $('head').append($("<link rel='stylesheet' href='{{CDN}}/latest/lib/ext/fancybox/jquery.fancybox.min.css' type='text/css' media='screen' />"));
     // load script

diff --git a/src/assets/_project/_blocks/components/misc/_qg-cards.scss b/src/assets/_project/_blocks/components/misc/_qg-cards.scss
@@ -1,3 +1,12 @@
+//default color overwrite
+#qg-primary-content {
+  .qg-card:not(.qg-card__light-theme) {
+    h2 {
+      color: #fff;
+    }
+  }
+}
+// cards styles
 .qg-cards {
   display: flex;
   flex-direction: row;
@@ -149,7 +158,9 @@
 
     .details {
       padding: 1em;
-
+      h2 {
+        color: #fff;
+      }
       > :first-child {
         padding-right: 1rem;
         padding-top: 0;

diff --git a/src/assets/_project/_blocks/components/misc/_qg-images.scss b/src/assets/_project/_blocks/components/misc/_qg-images.scss
@@ -35,9 +35,42 @@
     @include rem(font-size, 14px);
     text-align: left;
     font-style: italic;
+    margin-top: 0.5em;
     .figure-credits {
       font-style: normal;
       color: #757575;
     }
   }
+
+  a[data-fancybox] {
+    @include rem(font-size, 14px);
+    display: block;
+    text-align: right;
+    position: relative;
+    &:hover {
+      >span, >img:not(.figure__expand-icon) {
+        outline: 1px solid #0066CC;
+        background: #F5F5F5;
+      }
+      .figure__expand-icon {
+        display: block;
+      }
+    }
+    .figure__expand-icon {
+      position: absolute;
+      display: none;
+      top: calc(50% + 15px);
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 3.125rem;
+      height: auto;
+    }
+    >span {
+      padding: 0.5em;
+      padding-top: 0.25em;
+      margin-top: -0.25em;
+      display: inline-block;
+      text-decoration: underline;
+    }
+  }
 }
diff --git a/src/assets/_project/_blocks/layout/content/content-types/_cut-in-images.scss b/src/assets/_project/_blocks/layout/content/content-types/_cut-in-images.scss
@@ -1,4 +1,6 @@
+// common styles
 .cut-in, .qg-cut-in, .qg-cut-in-alt {
+  display:block;
   position: relative;
   @include rem(max-width, 374px);
   @include rem(font-size, 14px);
@@ -7,31 +9,58 @@
   text-align: center;
   font-style: italic;
   border: 1px solid #eee;
+  transition: all 0.5s ease;
+  .qg-cut-in-alt__anchor:hover{
+    cursor: pointer;
+    .qg-cut-in__large-image a:not(.print-content-link) {
+      text-decoration: underline !important;
+    }
+    .qg-cut-in__img-container{
+      outline: 1px solid #0066CC;
+    }
+    .qg-cut-in-alt__expand-icon {
+      display: block;
+    }
+  }
+  .qg-cut-in-alt__expand-icon {
+    transition: all 0.5s ease;
+    display: none;
+    @include rem(width, 50px);
+    height: auto;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .qg-cut-in-alt__label {
+    display: block;
+    text-align: right;
+    font-style: normal;
+    @include rem(padding-right, 3px);
+  }
   img {
     height: auto;
     margin: 0 auto;
     display: block;
     width: 100%;
   }
-  .figure-credits {
-    @include rem(padding, 0 20px);
-  }
-  .caption {
-    @include rem(max-width, 284px);
-    @include rem(margin, 6px auto);
+  .qg-cut-in__ref {
     text-align: left;
-    font-style: italic;
-  }
-  .figure-credits-toggle {
-    position: absolute;
-    top: 0;
-    right: 0.6rem;
-    height: 3rem;
-    background: transparent;
-    opacity: 0.7;
-    border: 0;
+    .qg-cut-in__figure-credits {
+      display: block;
+      color: #757575;
+      font-style: normal;
+    }
+    .qg-cut-in__figure-caption {
+      display: block;
+      @include rem(margin, 6px 0 0 0);
+      text-align: left;
+      font-style: italic;
+    }
   }
 }
+
+// 'cut in' specific styles
 .qg-cut-in{
   @include media-breakpoint-up(md) {
     float: right;
@@ -47,6 +76,8 @@
   clear: right;
  }
 }
+
+// 'cut in alt' specific styles
 .qg-cut-in-alt{
   float: left;
   & + .cut-in-alt {
@@ -55,12 +86,20 @@
    }
 }
 
-.figure-credits-toggle {
-  position: absolute;
-  top: 0;
-  right: 0.6rem;
-  height: 3rem;
-  background: transparent;
-  opacity: 0.7;
-  border: 0;
+ //links overwrite for 'Cut in' component
+#qg-primary-content {
+  .cut-in, .qg-cut-in, .qg-cut-in-alt {
+    a:not(.print-content-link):active, a:not(.print-content-link):focus, a:not(.print-content-link):visited{
+      color: #13578b;
+    }
+    a:not(.print-content-link):link {
+      text-decoration: none;
+    }
+    a:not(.print-content-link):hover {
+      .qg-cut-in-alt__label {
+        text-decoration: underline;
+        background: #F5F5F5;
+      }
+    }
+  }
 }
diff --git a/src/assets/_project/images/Expand.svg b/src/assets/_project/images/Expand.svg
diff --git a/src/docs/components/floating-images1.html b/src/docs/components/floating-images1.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+  <title>Images</title>
+
+  <meta name="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!">
+  <meta name="keywords" content="KEYWORDS">
+
+  <link rel="schema.DCTERMS" href="http://purl.org/dc/terms/">
+  <link rel="schema.AGLSTERMS" href="https://agls.gov.au/documents/aglsterms/">
+
+  <meta name="DCTERMS.creator" scheme="AGLSTERMS.GOLD" content="c=AU; o=The State of Queensland; ou=DEPARTMENT NAME; ou=UNIT NAME">
+  <meta name="DCTERMS.publisher" scheme="AGLSTERMS.AglsAgent" content="corporateName=The State of Queensland; jurisdiction=Queensland">
+  <meta name="DCTERMS.created" content="2010-11-04">
+  <meta name="DCTERMS.modified" content="2011-03-05">
+  <meta name="DCTERMS.title" content="Add your heading">
+  <meta name="DCTERMS.alternative" content="Add your heading">
+  <meta name="DCTERMS.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!">
+  <meta name="DCTERMS.subject" scheme="AGLSTERMS.APAIS" content="SUBJECT">
+  <meta name="AGLSTERMS.function" scheme="AGLSTERMS.AGIFT" content="FUNCTION">
+  <meta name="DCTERMS.type" scheme="DCTERMS.DCMIType" content="Text">
+  <meta name="AGLSTERMS.documentType" scheme="AGLSTERMS.agls-document" content="guidelines">
+  <meta name="DCTERMS.audience" scheme="AGLSTERMS.agls-audience" content="">
+  <meta name="DCTERMS.jurisdiction" scheme="AGLSTERMS.AglsJuri" content="Queensland">
+
+  <!-- Open graph -->
+  <meta property="og:title" content="Queensland Government">
+  <meta property="og:Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!">
+  <meta property="og:image" content="/assets/v4/latest/images/coat-of-arms/coa-thumbnail.png">
+  <meta property="og:url" content="">
+  <meta property="og:type" content="article" />
+
+  <!-- Twitter -->
+  <meta name="twitter:card" content="summary" />
+  <meta name="twitter:title" content="Queensland Government" />
+  <meta name="twitter:Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!" />
+  <meta name="twitter:image" content="/assets/v4/latest/images/coat-of-arms/coa-thumbnail.png" />
+
+  <!--#include virtual="/assets/includes-local/head-assets.html"-->
+
+</head>
+
+<body data-qg-accessibility="true">
+<!--#include virtual="/assets/includes-local/analytics.html"-->
+<!--#include virtual="/assets/includes-local/header/access.html"-->
+
+
+
+<!--#include virtual="/assets/includes-local/header/header.html"-->
+<div class="qg-global-breadcrumb qg-breadcrumb">
+  <div class="container-fluid qg-site-width">
+    <nav id="qg-breadcrumb" aria-label="breadcrumb" class="qg-breadcrumb-nav row">
+      <ol class="qg-breadcrumb-list">
+        <li class="qg-breadcrumb-list-item">
+          <a href="/" class="qg-breadcrumb-list-item__link">
+            Home
+          </a>
+        </li>
+        <li class="qg-breadcrumb-list-item">
+          <a href="../" class="qg-breadcrumb-list-item__link">
+            Web Template Documentation
+          </a>
+        </li>
+        <li class="qg-breadcrumb-list-item">
+          <a href="../components.html" class="qg-breadcrumb-list-item__link">
+            Components
+          </a>
+        </li>
+        <li class="qg-breadcrumb-list-item">
+          <a href="#" class="qg-breadcrumb-list-item__link">
+            Images
+          </a>
+        </li>
+      </ol>
+    </nav>
+  </div>
+</div>
+<div class="container-fluid qg-site-width">
+  <div id="qg-content">
+    <div id="qg-one-col" class="row wide">
+
+      <div id="qg-primary-content" role="main">
+        <h1 id="images" class="category">Images</h1>
+        <p><span class="label label-primary" title="Heavily customised bootstrap implementation">Customised</span></p>
+        <p>Publishers can use images to provide a visual representation of context.</p>
+        <p>Publishers can use standard <a href="https://getbootstrap.com/css/#floating-images.html">Bootstrap image utilities</a> as well as the following custom image features.</p>
+
+        <h3 id="figures">Figures</h3>
+        <p><span class="label label-default" title="Default HTML5 implementation">Default HTML5</span></p>
+        <p> </p>
+        <p>To use figures, just add the standard HTML5 figure code in the <code>&lt;div id="qg-primary-content"&gt;</code> element, or add the class <code>qg-fig</code> to any figure element outside of the qg-primary-content element:</p>
+
+        <br/><h4>HTML</h4>
+        <pre><code class="language-markup">
+   &lt;figure&gt;
+     &lt;img src="https://via.placeholder.com/300.png/ccc/ccc" alt="" /&gt;
+     &lt;figcaption>
+       Caption text here
+     &lt;div class="figure-credits"&gt;Figure credits here&lt;/div&gt;
+     &lt;/figcaption&gt;
+   &lt;/figure&gt;
+                </code></pre>
+
+        <div class="qg-tmplt-example">
+          <div class="panel-body">
+            <figure>
+              <img src="https://via.placeholder.com/300.png/ccc/ccc" alt=""/>
+              <figcaption>
+                Caption text here
+                <div class="figure-credits">Figure credits here</div>
+              </figcaption>
+            </figure>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+          </div>
+        </div>
+
+        <p>You can pull this figure left or right (turning it into a cut-in image) by adding the class <code>pull-right</code> or <code>pull-left</code> to the figure element <code>&lt;figure class="pull-right"&gt;</code>.</p>
+
+        <div class="qg-tmplt-example">
+          <div class="panel-body">
+            <figure class="pull-right">
+              <img src="https://via.placeholder.com/300.png/ccc/ccc" alt=""/>
+              <figcaption>
+                Caption text here
+                <div class="figure-credits">Figure credits here</div>
+              </figcaption>
+            </figure>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          </div>
+        </div>
+
+        <p>You can also unstyled the figure by adding <code>qg-unstyled</code> to the figure <code>&lt;figure class="qg-unstyled"&gt;</code>. Unstyled figures also work with pull-right and pull-left.</p>
+
+        <div class="qg-tmplt-example">
+          <div class="panel-body">
+            <figure class="qg-unstyled">
+              <img src="https://via.placeholder.com/300.png/ccc/ccc" alt="" />
+              <figcaption>
+                Caption text here
+                <div class="figure-credits">Figure credits here</div>
+              </figcaption>
+            </figure>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.</p>
+          </div>
+        </div>
+
+        <p>If you need to remove the standard styling of a figure element in the qg-primary-content element, add the
+          class <code>qg-nofig</code> to the figure element <code>&lt;figure class="qg-nofig"&gt;</code>.</p>
+
+      </div>
+    </div>
+  </div>
+</div>
+<br />
+<br />
+<br />
+<!--#include virtual="/assets/includes-local/footer/footer.html"-->
+
+<script>
+  var qg = qg || {};
+  qg.swe = qg.swe || {};
+  // Used by the feedback form.
+  qg.swe.franchiseTitle = 'Franchise Title';
+</script>
+
+<!--#include virtual="/assets/includes-local/footer/footer-scripts.html"-->
+
+</body>
+
+</html>