diff --git a/src/assets/_project/_blocks/components/banners/_qg-promotional-banner.scss b/src/assets/_project/_blocks/components/banners/_qg-promotional-banner.scss index 86cf2dfdd..a93797fe9 100644 --- a/src/assets/_project/_blocks/components/banners/_qg-promotional-banner.scss +++ b/src/assets/_project/_blocks/components/banners/_qg-promotional-banner.scss @@ -9,13 +9,38 @@ } } .qg-promotional-banner__popular-apps { - .qg-promotional-banner__popular-apps-title{ + .qg-promotional-banner__popular-apps-title { font-weight: bold; - margin-left: 4px; - margin-right: 4px; } - margin-left: -4px; - margin-right: -4px; + .qg-promotional-banner__popular-apps-tags { + ul { + padding: 0; + li { + display: inline; + .qg-btn.btn-outline-dark, > a { + color: #00698f !important; + } + a { + @extend .m-1; + @extend .qg-btn; + @extend .btn-outline-dark; + } + .qg-btn { + text-decoration: none !important; + } + } + } + } + } + + .qg-promotional-banner__info > h2 { + margin-top: 0; + } + + .qg-promotional-banner__popular-apps .qg-btn { + &:hover, &:visited, &:active { + text-decoration: underline !important; + } } .wrapper { @include media-breakpoint-down(xs) { diff --git a/src/assets/_project/_blocks/components/video/_video.scss b/src/assets/_project/_blocks/components/video/_video.scss new file mode 100644 index 000000000..69818a261 --- /dev/null +++ b/src/assets/_project/_blocks/components/video/_video.scss @@ -0,0 +1,15 @@ +.qg-video-wrapper{ + .qg-video-nav-container { + display: flex; + justify-content: right; + align-items: center; + margin-top: 0.2em; + height: 1.5em; + .qg-video-duration-text { + font-size: 0.8em; + } + & * { + padding:3px; + } + } +} diff --git a/src/assets/_project/_blocks/layout/content/content-types/_promotions.scss b/src/assets/_project/_blocks/layout/content/content-types/_promotions.scss index b29c49f3d..32c0ebe88 100644 --- a/src/assets/_project/_blocks/layout/content/content-types/_promotions.scss +++ b/src/assets/_project/_blocks/layout/content/content-types/_promotions.scss @@ -32,3 +32,31 @@ text-align: right; } } + +// promotional banner styles +.qg-promotional-banner__popular-apps { + .qg-btn.btn-outline-dark { + color: #00698f !important; + } + .qg-btn { + text-decoration: none !important; + } + + ul { + padding: 0; + + li { + display: inline; + } + } +} + +.qg-promotional-banner__info > h2 { + margin-top: 0; +} + +.qg-promotional-banner__popular-apps .qg-btn { + &:hover, &:visited, &:active { + text-decoration: underline !important; + } +} diff --git a/src/assets/_project/_blocks/qg-main.scss b/src/assets/_project/_blocks/qg-main.scss index 98b9773de..8cc4e6871 100644 --- a/src/assets/_project/_blocks/qg-main.scss +++ b/src/assets/_project/_blocks/qg-main.scss @@ -45,6 +45,7 @@ @import "components/forms/qg-forms"; @import "components/misc/qg-pagination"; @import "components/tables/tables"; +@import "components/video/video"; @import "components/misc/qg-visually-hidden"; @import "components/gallery/qg-gallery"; @import "components/print/qg-print"; diff --git a/src/docs/components.html b/src/docs/components.html index f1b6f106f..b14dec549 100644 --- a/src/docs/components.html +++ b/src/docs/components.html @@ -86,9 +86,9 @@

Components

  • Blockquote
  • Buttons
  • Call out box
    • -
  • QG Cards
    • -
  • QG Banner Blurb
    • -
  • QG Print
    • +
  • Cards
    • +
  • Banner Blurb
    • +
  • Print
  • Carousel
  • Gallery
  • Downloadable document link
    • @@ -98,12 +98,13 @@

    Components

  • Inpage nav
  • Pagination
  • Promotions
    • -
  • QG correct / incorrect
    • +
  • Correct / incorrect
  • Quick Exit
  • Survey
  • Tables
  • Twitter Feed
  • Google Address Autocomplete
    • +
  • Video

    • diff --git a/src/docs/components/promotions.html b/src/docs/components/promotions.html index edae4800d..c59ee1112 100644 --- a/src/docs/components/promotions.html +++ b/src/docs/components/promotions.html @@ -82,14 +82,31 @@

    Promotions

    +

    Publishers may use the promotions component to display promotional items. Preferably shown at the bottom of index pages.

    -
    +
    +

    Promotional tile

    +
    -

    Promotion heading

    +

    Title 1

    © Image caption.

    @@ -102,7 +119,7 @@

    Promotion heading

    -

    Promotion heading

    +

    Title 2

    © Image caption.

    @@ -115,7 +132,7 @@

    Promotion heading

    -

    Promotion heading

    +

    Title 3

    © Image caption.

    @@ -176,6 +193,41 @@

    HTML

    </div> </section> +
    +

    Promotional banner

    +
    +
    +
    +
    +

    Title

    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    + CTA +
    +
    +

    Featured section

    + +
    +
    +
    +
    + + +
    +

    HTML

    + 
    
+     <section class="qg-promotional-banner__container"
+          <div class="wrapper qg-site-width container-fluid">
+            <div class="qg-promotional-banner__info col-12 col-sm-6">
+              <h2>Title</h2>
+              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+              <a href="https://www.qld.gov.au/services/mobile" class="qg-btn btn-primary mt-2">CTA</a>
+            </div>
+            <div class="qg-promotional-banner__popular-apps col-12 col-sm-6">
+              <p class="qg-promotional-banner__popular-apps-title">Featured section</p><section class="qg-promotional-banner__popular-apps-tags"><ul><li><a href="#" class="qg-btn btn-outline-dark m-1">Check In Qld</a></li><li><a href="#" class="qg-btn btn-outline-dark m-1">MyTransLink</a></li><li><a href="#" class="qg-btn btn-outline-dark m-1">QLDTraffic</a></li><li><a href="#" class="qg-btn btn-outline-dark m-1">Queensland Learner Logbook</a></li><li><a href="#" class="qg-btn btn-outline-dark m-1">Weed Spotter</a></li></ul></section>
+            </div>
+          </div>
+     </section>
+
    diff --git a/src/docs/components/video.html b/src/docs/components/video.html new file mode 100644 index 000000000..430ddb98d --- /dev/null +++ b/src/docs/components/video.html @@ -0,0 +1,173 @@ + + + + + + + + + Video component + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    + +
    +

    Video

    +

    This component can be used to embed videos into your content.

    + +
    +
    +

    Title

    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eveniet incidunt magnam nobis obcaecati quam repudiandae sed voluptas voluptatum. Amet deleniti enim error hic magni nisi rem repellat sit. Aperiam.

    +
    + Duration 0.0 + | + +
    + +
    + +
    +
    +
    +
    + +
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet beatae consequuntur culpa cum doloribus ea eaque enim facilis illum incidunt ipsum iste maxime mollitia neque nulla pariatur, ullam vel!

    +
    +
    +
    +
    +

    HTML

    + + 
    
+
+  <section class="qg-video-wrapper mb-3">
+      <h3 class="qg-video-title">Title</h3>
+      <p class="qg-video-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eveniet incidunt magnam nobis obcaecati quam repudiandae sed voluptas voluptatum. Amet deleniti enim error hic magni nisi rem repellat sit. Aperiam.</p>
+      <div class="qg-video-nav-container">
+        <span title="Video duration" class="qg-video-duration-text" >Duration 0.0</span>
+        <span>|</span>
+        <i aria-hidden="true" class="fa fa-cc" title="closed captions icon"><span class="sr-only">Closed captions icon:</span></i>
+      </div>
+
+      <div class="embed-responsive embed-responsive-16by9">
+        <iframe title="YouTube Video" class="embed-responsive-item"  allowfullscreen
+                src="https://www.youtube.com/embed/%asset_metadata_video.url^replace:.*v=:^replace:&.*:%?rel=0">
+        </iframe>
+      </div>
+    </section>
+    <section class="qg-accordion qg-accordion-v2" aria-label="Accordion Label">
+      <article>
+        <button class="acc-heading qg-accordion--closed">
+          <a class="qg-accordion--ga">
+            <span class="accordion-label"><span class="title">Show/hide Transcript</span></span>
+          </a>
+        </button>
+        <div class="collapsing-section" id="id-panel-content-101102">
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet beatae consequuntur culpa cum doloribus ea eaque enim facilis illum incidunt ipsum iste maxime mollitia neque nulla pariatur, ullam vel!</p>
+        </div>
+      </article>
+  </section>
+
    +
    +
    +
    +
    +
    +
    +
    + + + + + + + + + diff --git a/src/template-pages/application-page.html b/src/template-pages/application-page.html index 2690096e9..af6fbaf57 100644 --- a/src/template-pages/application-page.html +++ b/src/template-pages/application-page.html @@ -54,6 +54,18 @@
    +
    +
    +
    +

    Mobile apps

    +

    Browse through Queensland Government mobile apps.

    + Mobile apps +
    +
    +

    Featured apps

    +
    +
    +
    diff --git a/src/template-pages/content-page-no-asides.html b/src/template-pages/content-page-no-asides.html index 09340aad5..bd44ea456 100644 --- a/src/template-pages/content-page-no-asides.html +++ b/src/template-pages/content-page-no-asides.html @@ -55,7 +55,18 @@
    - +
    +
    +
    +

    Mobile apps

    +

    Browse through Queensland Government mobile apps.

    + Mobile apps +
    +
    +

    Featured apps

    +
    +
    +

    Index page template

    diff --git a/src/template-pages/content-page.html b/src/template-pages/content-page.html index 057bf6665..e76f1ea68 100644 --- a/src/template-pages/content-page.html +++ b/src/template-pages/content-page.html @@ -57,7 +57,18 @@
    - +
    +
    +
    +

    Mobile apps

    +

    Browse through Queensland Government mobile apps.

    + Mobile apps +
    +
    +

    Featured apps

    +
    +
    +

    Queensland Government Web Template HTML Template

    diff --git a/src/template-pages/index-page.html b/src/template-pages/index-page.html index 0c573f8ee..c5b774fd1 100644 --- a/src/template-pages/index-page.html +++ b/src/template-pages/index-page.html @@ -67,7 +67,18 @@
    - +
    +
    +
    +

    Mobile apps

    +

    Browse through Queensland Government mobile apps.

    + Mobile apps +
    +
    +

    Featured apps

    +
    +
    +

    Index page template

    diff --git a/src/template-pages/topic-index-page.html b/src/template-pages/topic-index-page.html index 2454c24cb..05c417007 100644 --- a/src/template-pages/topic-index-page.html +++ b/src/template-pages/topic-index-page.html @@ -68,7 +68,18 @@
    - +
    +
    +
    +

    Mobile apps

    +

    Browse through Queensland Government mobile apps.

    + Mobile apps +
    +
    +

    Featured apps

    +
    +
    +

    Index page template