From 378aa159b8d91b2d9950575141a6ee67e7db350c Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 25 Oct 2017 23:59:53 +1100 Subject: Docs/demo refresh --- demo/src/js/lib/tab-focus.js | 26 ++++ demo/src/js/main.js | 63 ++++----- demo/src/less/bundle.less | 35 +++++ demo/src/less/components/base.less | 43 ------- demo/src/less/components/buttons.less | 214 ++++++++----------------------- demo/src/less/components/error.less | 19 --- demo/src/less/components/examples.less | 46 ------- demo/src/less/components/header.less | 24 ++++ demo/src/less/components/icons.less | 16 +-- demo/src/less/components/links.less | 46 +++++++ demo/src/less/components/lists.less | 11 ++ demo/src/less/components/navigation.less | 9 ++ demo/src/less/components/players.less | 44 +++++++ demo/src/less/components/type.less | 75 ----------- demo/src/less/demo.less | 26 ---- demo/src/less/layout/core.less | 44 +++++++ demo/src/less/layout/error.less | 21 +++ demo/src/less/layout/grid.less | 19 +++ demo/src/less/lib/animation.less | 12 +- demo/src/less/lib/fontface.less | 9 ++ demo/src/less/lib/mixins.less | 38 +++--- demo/src/less/lib/reset.less | 11 ++ demo/src/less/settings/breakpoints.less | 9 ++ demo/src/less/settings/colors.less | 27 ++++ demo/src/less/settings/cosmetic.less | 12 ++ demo/src/less/settings/icons.less | 5 + demo/src/less/settings/layout.less | 5 + demo/src/less/settings/spacing.less | 5 + demo/src/less/settings/type.less | 17 +++ demo/src/less/type/base.less | 33 +++++ demo/src/less/type/headings.less | 10 ++ demo/src/less/utilities/color.less | 10 ++ demo/src/less/utilities/hidden.less | 7 + demo/src/less/variables.less | 48 ------- 34 files changed, 563 insertions(+), 476 deletions(-) create mode 100644 demo/src/js/lib/tab-focus.js create mode 100644 demo/src/less/bundle.less delete mode 100644 demo/src/less/components/base.less delete mode 100644 demo/src/less/components/error.less delete mode 100644 demo/src/less/components/examples.less create mode 100644 demo/src/less/components/header.less create mode 100644 demo/src/less/components/links.less create mode 100644 demo/src/less/components/lists.less create mode 100644 demo/src/less/components/navigation.less create mode 100644 demo/src/less/components/players.less delete mode 100644 demo/src/less/components/type.less delete mode 100644 demo/src/less/demo.less create mode 100644 demo/src/less/layout/core.less create mode 100644 demo/src/less/layout/error.less create mode 100644 demo/src/less/layout/grid.less create mode 100644 demo/src/less/lib/reset.less create mode 100644 demo/src/less/settings/breakpoints.less create mode 100644 demo/src/less/settings/colors.less create mode 100644 demo/src/less/settings/cosmetic.less create mode 100644 demo/src/less/settings/icons.less create mode 100644 demo/src/less/settings/layout.less create mode 100644 demo/src/less/settings/spacing.less create mode 100644 demo/src/less/settings/type.less create mode 100644 demo/src/less/type/base.less create mode 100644 demo/src/less/type/headings.less create mode 100644 demo/src/less/utilities/color.less create mode 100644 demo/src/less/utilities/hidden.less delete mode 100644 demo/src/less/variables.less (limited to 'demo/src') diff --git a/demo/src/js/lib/tab-focus.js b/demo/src/js/lib/tab-focus.js new file mode 100644 index 00000000..06e51203 --- /dev/null +++ b/demo/src/js/lib/tab-focus.js @@ -0,0 +1,26 @@ +// ========================================================================== +// tab-focus.js +// Detect keyboard tabbing +// ========================================================================== + +(function() { + var className = 'tab-focus'; + + // Remove class on blur + document.addEventListener('focusout', function(event) { + event.target.classList.remove(className); + }); + + // Add classname to tabbed elements + document.addEventListener('keydown', function(event) { + if (event.keyCode !== 9) { + return; + } + + // Delay the adding of classname until the focus has changed + // This event fires before the focusin event + window.setTimeout(function() { + document.activeElement.classList.add(className); + }, 0); + }); +})(); diff --git a/demo/src/js/main.js b/demo/src/js/main.js index 2442b01f..16c31f1c 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -7,6 +7,14 @@ /*global Plyr*/ (function() { + if (window.shr) { + window.shr.setup({ + count: { + classname: 'button__count', + }, + }); + } + /*document.body.addEventListener('ready', function(event) { console.log(event); });*/ @@ -17,10 +25,10 @@ title: 'View From A Blue Moon', iconUrl: '../dist/plyr.svg', tooltips: { - controls: true + controls: true, }, captions: { - defaultActive: true + defaultActive: true, }, controls: [ 'play-large', @@ -33,8 +41,8 @@ 'settings', 'fullscreen', 'pip', - 'airplay' - ] + 'airplay', + ], }); // Expose for testing @@ -49,7 +57,7 @@ video: 'video', audio: 'audio', youtube: 'youtube', - vimeo: 'vimeo' + vimeo: 'vimeo', }; var currentType = window.location.hash.replace('#', ''); var historySupport = window.history && window.history.pushState; @@ -64,7 +72,7 @@ if (historySupport) { history.pushState( { - type: type + type: type, }, '', '#' + type @@ -93,7 +101,7 @@ if (currentType in types) { history.replaceState( { - type: currentType + type: currentType, }, '', video ? '' : '#' + currentType @@ -109,12 +117,7 @@ // Toggle class on an element function toggleClass(element, className, state) { if (element) { - if (element.classList) { - element.classList[state ? 'add' : 'remove'](className); - } else { - var name = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', ''); - element.className = name + (state ? ' ' + className : ''); - } + element.classList[state ? 'add' : 'remove'](className); } } @@ -133,8 +136,8 @@ sources: [ { src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4', - type: 'video/mp4' - } + type: 'video/mp4', + }, ], poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg', tracks: [ @@ -143,15 +146,15 @@ label: 'English', srclang: 'en', src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt', - default: true + default: true, }, { kind: 'captions', label: 'French', srclang: 'fr', - src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt' - } - ] + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt', + }, + ], }); break; @@ -162,13 +165,13 @@ sources: [ { src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3', - type: 'audio/mp3' + type: 'audio/mp3', }, { src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg', - type: 'audio/ogg' - } - ] + type: 'audio/ogg', + }, + ], }); break; @@ -179,9 +182,9 @@ sources: [ { src: 'https://www.youtube.com/watch?v=bTqVqk7FSmY', - type: 'youtube' - } - ] + type: 'youtube', + }, + ], }); break; @@ -192,9 +195,9 @@ sources: [ { src: 'https://vimeo.com/76979871', - type: 'vimeo' - } - ] + type: 'vimeo', + }, + ], }); break; } @@ -208,7 +211,7 @@ } // Set active on parent - toggleClass(document.querySelector('[data-source="' + type + '"]').parentElement, 'active', true); + toggleClass(document.querySelector('[data-source="' + type + '"]'), 'active', true); // Show cite [].forEach.call(document.querySelectorAll('.plyr__cite'), function(cite) { diff --git a/demo/src/less/bundle.less b/demo/src/less/bundle.less new file mode 100644 index 00000000..2645d653 --- /dev/null +++ b/demo/src/less/bundle.less @@ -0,0 +1,35 @@ +// ========================================================================== +// Plyr.io Demo Page +// ========================================================================== + +// Libs +@import 'lib/animation'; +@import 'lib/fontface'; +@import 'lib/mixins'; +@import 'lib/normalize'; + +// Settings +@import 'settings/breakpoints'; +@import 'settings/colors'; +@import 'settings/cosmetic'; +@import 'settings/icons'; +@import 'settings/layout'; +@import 'settings/spacing'; +@import 'settings/type'; + +// Layout +@import 'layout/core'; +@import 'layout/grid'; + +// Type +@import 'type/base'; +@import 'type/headings'; + +// Components +@import 'components/buttons'; +@import 'components/header'; +@import 'components/icons'; +@import 'components/links'; +@import 'components/lists'; +@import 'components/navigation'; +@import 'components/players'; diff --git a/demo/src/less/components/base.less b/demo/src/less/components/base.less deleted file mode 100644 index 7e5f97c6..00000000 --- a/demo/src/less/components/base.less +++ /dev/null @@ -1,43 +0,0 @@ -// ========================================================================== -// Base layout -// ========================================================================== - -// BORDER-BOX ALL THE THINGS! -// http://paulirish.com/2012/box-sizing-border-box-ftw/ -*, *::after, *::before { - box-sizing: border-box; -} - -// Hidden -[hidden] { - display: none; -} - -// Base -html { - height: 100%; - background: @body-background fixed; -} -body { - margin: 0 auto @padding-base; - padding: (@padding-base / 2); - max-width: @example-width-video; - - @media (min-width: @screen-sm) { - margin-bottom: (@padding-base * 2); - } -} - -// Header -header { - padding: @padding-base; - margin-bottom: @padding-base; - - p { - .font-size(18); - } - @media (min-width: @screen-sm) { - padding-top: (@padding-base * 3); - padding-bottom: (@padding-base * 3); - } -} \ No newline at end of file diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less index c99a0836..ed605086 100644 --- a/demo/src/less/components/buttons.less +++ b/demo/src/less/components/buttons.less @@ -2,171 +2,65 @@ // Buttons // ========================================================================== -nav { - ul { - list-style: none; - margin: 0; - padding: 0; - font-size: 0; - } - li { - display: inline-block; - margin-top: (@padding-base / 2); - .font-size(); - white-space: nowrap; - } - li + li { - margin-left: @padding-base; - } -} - -// Tabs -.btn__bar { - position: relative; - margin: 0 auto @padding-base; - max-width: @example-width-video; - white-space: nowrap; - - &::before { - content: ""; - position: absolute; - top: 50%; - left: 0; - right: 0; - height: 1px; - background: @gray-lighter; - } - - ul { - position: relative; - z-index: 1; - display: inline-block; - user-select: none; - } - li { - margin: 0; - - &:first-child .btn { - border-radius: 4px 0 0 4px; - } - &:last-child .btn { - border-radius: 0 4px 4px 0; - } - & + li .btn { - margin-left: -1px; - } - - &.active .btn { - &:extend(.btn--primary); - box-shadow: inset 0 1px 1px rgba(0,0,0, .2); - position: relative; - z-index: 1; - - .icon { - color: inherit; - } - } - &.active + li .btn:hover { - z-index: 0; - } - } - .btn { - position: relative; - display: block; - border-radius: 0; - - &:hover, - &:focus { - z-index: 1; - } - } - - @media (min-width: 560px) { - margin-bottom: (@padding-base * 2); - } -} - // Shared -.btn, -.btn__count { - display: inline-block; - vertical-align: middle; - border-radius: @border-radius-base; - user-select: none; - font-weight: @font-weight-bold; +.button, +.button__count { + position: relative; + display: inline-flex; + vertical-align: middle; + align-items: center; + padding: (@spacing-base * 0.75); + + border-radius: @border-radius-base; + box-shadow: 0 1px 1px fade(#000, 10%); + background: #fff; + border: 0; + + color: @gray; + user-select: none; + font-weight: @font-weight-bold; + text-shadow: none; } // Buttons -.btn { - padding: (@padding-base / 2) ((@padding-base / 2) + 2); - background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%)); - border: 1px solid @gray-light; - box-shadow: 0 1px 1px rgba(0,0,0, .05); - text-shadow: 0 1px 1px #fff; - color: @gray; - transition: background .1s ease, color .1s ease; - .font-size(@font-size-small); - - &:hover, - &:focus { - border-color: darken(@gray-light, 8%); - color: @gray; - outline: 0; - } -} - -// Sizes -.btn--large { - padding: (@padding-base / 2) @padding-base; - .font-size(); -} - -// Styles -.btn--primary { - background-image: linear-gradient(@link-color, darken(@link-color, 5%)); - background-color: @link-color; - border-color: darken(@link-color, 10%); - box-shadow: 0 1px 1px rgba(0,0,0, .15); - text-shadow: 0 1px 1px rgba(0,0,0, .1); - color: #fff; - - &:hover, - &:focus { - color: #fff; - border-color: darken(@link-color, 20%); - } -} -.btn--youtube .icon { - color: @color-youtube; -} -.btn--vimeo .icon { - color: @color-vimeo; -} -.btn--twitter .icon { - color: @color-twitter; +.button { + padding-left: @spacing-base; + padding-right: @spacing-base; + transition: all 0.2s ease; + + &:hover, + &:focus { + color: @gray-dark; + outline: 0; + + &::after { + display: none; + } + } + + &.tab-focus { + .tab-focus(); + } } // Count bubble -.btn__count { - position: relative; - margin-left: (@padding-base / 2); - padding: (@padding-base / 2) (@padding-base * .75); - background: #fff; - border: 1px solid @gray-light; - - &::before { - content: ""; - position: absolute; - display: block; - width: @arrow-size; - height: @arrow-size; - left: 1px; - top: 50%; - margin-top: -(@arrow-size / 2); - - background: inherit; - border: inherit; - border-width: 1px 0 0 1px; - transform: rotate(-45deg) translate(-50%, -50%); - } +.button__count { + margin-left: (@spacing-base / 2); + animation: fadein 0.2s ease; + + &::before { + content: ''; + position: absolute; + display: block; + width: @arrow-size; + height: @arrow-size; + left: 1px; + top: 50%; + margin-top: -(@arrow-size / 2); + + background: inherit; + border: inherit; + border-width: 1px 0 0 1px; + transform: rotate(-45deg) translate(-50%, -50%); + } } diff --git a/demo/src/less/components/error.less b/demo/src/less/components/error.less deleted file mode 100644 index b1427173..00000000 --- a/demo/src/less/components/error.less +++ /dev/null @@ -1,19 +0,0 @@ -// ========================================================================== -// Errors (AWS pages) -// ========================================================================== - -// Error page -html.error, -.error body { - height: 100%; -} -.error body { - width: 100%; - display: table; - table-layout: fixed; -} -.error main { - display: table-cell; - width: 100%; - vertical-align: middle; -} \ No newline at end of file diff --git a/demo/src/less/components/examples.less b/demo/src/less/components/examples.less deleted file mode 100644 index a9e72d21..00000000 --- a/demo/src/less/components/examples.less +++ /dev/null @@ -1,46 +0,0 @@ -// ========================================================================== -// Examples -// ========================================================================== - -// For non supported browsers -video { - max-width: 100%; - vertical-align: middle; -} - -// Example players -.plyr { - margin: 0 auto; - border-radius: @border-radius-large; -} -.plyr--audio { - max-width: @example-width-audio; -} -.plyr__video-wrapper::after { - content: ""; - pointer-events: none; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - border: 1px solid fade(#000, 15%); - border-radius: inherit; -} - -// Style full supported player -.plyr__cite { - display: none; - margin-top: @padding-base; - - .icon { - margin-right: (@padding-base / 4); - } -} - -.plyr--video:not(.plyr--youtube):not(.plyr--vimeo) ~ ul .plyr__cite--video, -.plyr--audio ~ ul .plyr__cite--audio, -.plyr--youtube ~ ul .plyr__cite--youtube, -.plyr--vimeo ~ ul .plyr__cite--vimeo { - display: block; -} diff --git a/demo/src/less/components/header.less b/demo/src/less/components/header.less new file mode 100644 index 00000000..c5f8b1fe --- /dev/null +++ b/demo/src/less/components/header.less @@ -0,0 +1,24 @@ +// ========================================================================== +// Header +// ========================================================================== + +header { + padding: @spacing-base; + text-align: center; + + p { + .font-size(18); + margin-bottom: @spacing-base * 1.5; + } + + @media @mq-sm { + padding-top: (@spacing-base * 3); + padding-bottom: (@spacing-base * 3); + } + + @media @mq-md { + max-width: 400px; + margin-right: (@spacing-base * 2); + text-align: left; + } +} diff --git a/demo/src/less/components/icons.less b/demo/src/less/components/icons.less index 9530b601..29f185bd 100644 --- a/demo/src/less/components/icons.less +++ b/demo/src/less/components/icons.less @@ -4,23 +4,19 @@ // Base size icon styles .icon { - fill: currentColor; - width: @icon-size; - height: @icon-size; - vertical-align: -3px; + fill: currentColor; + width: @icon-size; + height: @icon-size; } // Within elements a svg, button svg, label svg { - pointer-events: none; + pointer-events: none; } + a .icon, .btn .icon { - margin-right: (@padding-base / 2); -} -.btn:not(.btn-large) .icon { - width: (@icon-size - 2); - height: (@icon-size - 2); + margin-right: (@spacing-base / 2); } diff --git a/demo/src/less/components/links.less b/demo/src/less/components/links.less new file mode 100644 index 00000000..7a62ab40 --- /dev/null +++ b/demo/src/less/components/links.less @@ -0,0 +1,46 @@ +// ========================================================================== +// Links +// ========================================================================== + +// Make a