Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Qol 8600 new create a video embed component on swe #442

Merged
merged 5 commits into from
Mar 22, 2022
Merged

Qol 8600 new create a video embed component on swe #442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1004736
Added 'tech in use' section
asifaminb Mar 13, 2022
08ee5fb
QOL-8676 Improvement: Documentation for the 'promotional banner' comp…
asifaminb Mar 14, 2022
d41b042
QOL-8600 -New: Create a Video embed component on SWE
asifaminb Mar 21, 2022
93783d4
Merge remote-tracking branch 'origin/release-v4.0.12' into QOL-8600_N…
asifaminb Mar 21, 2022
4fb0db5
QOL-8600 -New: Create a Video embed component on SWE
asifaminb Mar 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 30 additions & 5 deletions src/assets/_project/_blocks/components/banners/_qg-promotional-banner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
15 changes: 15 additions & 0 deletions src/assets/_project/_blocks/components/video/_video.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
28 changes: 28 additions & 0 deletions src/assets/_project/_blocks/layout/content/content-types/_promotions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
1 change: 1 addition & 0 deletions src/assets/_project/_blocks/qg-main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
9 changes: 5 additions & 4 deletions src/docs/components.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,9 +86,9 @@ <h1>Components</h1>
<li><a href="./components/blockquote.html">Blockquote</a></li>
<li><a href="./components/buttons.html">Buttons</a></li>
<li><a href="./components/call-out-box.html">Call out box</a></li>
<li><a href="./components/cards.html">QG Cards</a></li>
<li><a href="./components/banner-blurb.html">QG Banner Blurb</a></li>
<li><a href="./components/print.html">QG Print</a></li>
<li><a href="./components/cards.html">Cards</a></li>
<li><a href="./components/banner-blurb.html">Banner Blurb</a></li>
<li><a href="./components/print.html">Print</a></li>
<li><a href="./components/carousel.html">Carousel</a></li>
<li><a href="./components/gallery.html">Gallery</a></li>
<li><a href="./components/document-link.html">Downloadable document link</a></li>
Expand All @@ -98,12 +98,13 @@ <h1>Components</h1>
<li><a href="./components/inpage-nav.html">Inpage nav</a></li>
<li><a href="./components/pagination.html">Pagination</a></li>
<li><a href="./components/promotions.html">Promotions</a></li>
<li><a href="./components/correct-incorrect.html">QG correct / incorrect</a></li>
<li><a href="./components/correct-incorrect.html">Correct / incorrect</a></li>
<li><a href="./components/quick-exit.html">Quick Exit</a></li>
<li><a href="./components/survey.html">Survey</a></li>
<li><a href="./components/tables.html">Tables</a></li>
<li><a href="./components/twitter-feed.html">Twitter Feed</a></li>
<li><a href="./components/google-autocomplete.html">Google Address Autocomplete</a></li>
<li><a href="./components/video.html">Video</a></li>
</ol>

<p></p>
Expand Down
60 changes: 56 additions & 4 deletions src/docs/components/promotions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,14 +82,31 @@

<div id="qg-primary-content" role="main">
<h1 id="promotions" class="category">Promotions</h1>
<nav class="qg-inpage-nav" aria-label="in this section navigation">
<h2 class="qg-inpage-nav_heading">On this page</h2>
<ul class="qg-inpage-nav_list">
<li>
<a href="#promotional-tile" title="promotional tile">
Promotional tile
</a>
</li>
<li>
<a href="#promotional-banner" title="promotional banner">
Promotional banner
</a>
</li>
</ul>
</nav>
<p>Publishers may use the promotions component to display promotional items. Preferably shown at the bottom of index pages.</p>
<div class="qg-tmplt-example">
<hr />
<h2 class="bg-light p-2">Promotional tile</h2>
<div class="qg-tmplt-example" id="promotional-tile">
<div class="panel-body">
<section class="qg-promotional-content">
<div class="row">
<div class="col-lg-4 col-sm-6">
<article class="promotions">
<h2>Promotion heading</h2>
<h3>Title 1</h3>
<div class="figure">
<img src="http://via.placeholder.com/276x110" class="promotion-image">
<p class="caption">© Image caption.</p>
Expand All @@ -102,7 +119,7 @@ <h2>Promotion heading</h2>
</div>
<div class="col-lg-4 col-sm-6">
<article class="promotions">
<h2>Promotion heading</h2>
<h3>Title 2</h3>
<div class="figure">
<img src="http://via.placeholder.com/276x110" class="promotion-image">
<p class="caption">© Image caption.</p>
Expand All @@ -115,7 +132,7 @@ <h2>Promotion heading</h2>
</div>
<div class="col-lg-4 col-sm-6">
<article class="promotions">
<h2>Promotion heading</h2>
<h3>Title 3</h3>
<div class="figure">
<img src="http://via.placeholder.com/276x110" class="promotion-image">
<p class="caption">© Image caption.</p>
Expand Down Expand Up @@ -176,6 +193,41 @@ <h3>HTML</h3>
&lt;/div>
&lt;/section>
</code></pre>
<hr />
<h2 class="bg-light p-2">Promotional banner</h2>
<div id="promotional-banner">
<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="https://www.covid19.qld.gov.au/check-in-qld" >Check In Qld</a></li><li><a href="https://translink.com.au/plan-your-journey/mytranslink" >MyTransLink</a></li><li><a href="https://qldtraffic.qld.gov.au/more/index.html" >QLDTraffic</a></li><li><a href="https://www.qld.gov.au/transport/licensing/getting/learner-logbook" >Queensland Learner Logbook</a></li><li><a href="https://www.qld.gov.au/environment/plants-animals/plants/herbarium/weeds/weed-spotters-app" >Weed Spotter</a></li></ul></section>
</div>
</div>
</section>


</div>
<h3>HTML</h3>
<pre><code class="language-markup">
&lt;section class=&quot;qg-promotional-banner__container&quot;
&lt;div class=&quot;wrapper qg-site-width container-fluid&quot;&gt;
&lt;div class=&quot;qg-promotional-banner__info col-12 col-sm-6&quot;&gt;
&lt;h2&gt;Title&lt;/h2&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
&lt;a href=&quot;https://www.qld.gov.au/services/mobile&quot; class=&quot;qg-btn btn-primary mt-2&quot;&gt;CTA&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;qg-promotional-banner__popular-apps col-12 col-sm-6&quot;&gt;
&lt;p class=&quot;qg-promotional-banner__popular-apps-title&quot;&gt;Featured section&lt;/p&gt;&lt;section class=&quot;qg-promotional-banner__popular-apps-tags&quot;&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;qg-btn btn-outline-dark m-1&quot;&gt;Check In Qld&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;qg-btn btn-outline-dark m-1&quot;&gt;MyTransLink&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;qg-btn btn-outline-dark m-1&quot;&gt;QLDTraffic&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;qg-btn btn-outline-dark m-1&quot;&gt;Queensland Learner Logbook&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;qg-btn btn-outline-dark m-1&quot;&gt;Weed Spotter&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/section&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
</code></pre>


</div>
Expand Down
173 changes: 173 additions & 0 deletions src/docs/components/video.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Video component</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">
<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="../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">
Video component
</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 class="category">Video</h1>
<p>This component can be used to embed videos into your content. </p>

<div class="qg-tmplt-example">
<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/NpmB80pWUsk?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>
</div>
<h3>HTML</h3>

<pre><code class="language-markup">

&lt;section class=&quot;qg-video-wrapper mb-3&quot;&gt;
&lt;h3 class=&quot;qg-video-title&quot;&gt;Title&lt;/h3&gt;
&lt;p class=&quot;qg-video-description&quot;&gt;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.&lt;/p&gt;
&lt;div class=&quot;qg-video-nav-container&quot;&gt;
&lt;span title=&quot;Video duration&quot; class=&quot;qg-video-duration-text&quot; &gt;Duration 0.0&lt;/span&gt;
&lt;span&gt;|&lt;/span&gt;
&lt;i aria-hidden=&quot;true&quot; class=&quot;fa fa-cc&quot; title=&quot;closed captions icon&quot;&gt;&lt;span class=&quot;sr-only&quot;&gt;Closed captions icon:&lt;/span&gt;&lt;/i&gt;
&lt;/div&gt;

&lt;div class=&quot;embed-responsive embed-responsive-16by9&quot;&gt;
&lt;iframe title=&quot;YouTube Video&quot; class=&quot;embed-responsive-item&quot; allowfullscreen
src=&quot;https://www.youtube.com/embed/%asset_metadata_video.url^replace:.*v=:^replace:&amp;.*:%?rel=0&quot;&gt;
&lt;/iframe&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;qg-accordion qg-accordion-v2&quot; aria-label=&quot;Accordion Label&quot;&gt;
&lt;article&gt;
&lt;button class=&quot;acc-heading qg-accordion--closed&quot;&gt;
&lt;a class=&quot;qg-accordion--ga&quot;&gt;
&lt;span class=&quot;accordion-label&quot;&gt;&lt;span class=&quot;title&quot;&gt;Show/hide Transcript&lt;/span&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;/button&gt;
&lt;div class=&quot;collapsing-section&quot; id=&quot;id-panel-content-101102&quot;&gt;
&lt;p&gt;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!&lt;/p&gt;
&lt;/div&gt;
&lt;/article&gt;
&lt;/section&gt;
</code></pre>
</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>
Loading