From 8998c472effa7a52c93820f8dce9fcb4f62d8922 Mon Sep 17 00:00:00 2001 From: Cadence Ember Date: Sat, 3 Oct 2020 01:32:56 +1300 Subject: [PATCH] Nav and search better mobile support --- pug/includes/layout.pug | 11 ++-- sass/includes/base.sass | 1 + sass/includes/buttons.sass | 58 ++++++++++++++++++ sass/includes/nav.sass | 54 +++++++++++++++++ sass/includes/video-list-item.sass | 68 +++++++++++++-------- sass/main.sass | 95 +----------------------------- 6 files changed, 162 insertions(+), 125 deletions(-) create mode 100644 sass/includes/buttons.sass create mode 100644 sass/includes/nav.sass diff --git a/pug/includes/layout.pug b/pug/includes/layout.pug index 20d4f13..78e5b42 100644 --- a/pug/includes/layout.pug +++ b/pug/includes/layout.pug @@ -9,11 +9,12 @@ html body.show-focus nav.main-nav - a(href="/").link.home CloudTube - a(href="/subscriptions" title="Subscriptions").link.icon-link - img(src=getStaticURL("html", "/static/images/subscriptions.svg") width=30 height=25 alt="Subscriptions.").icon - a(href="/settings" title="Settings").link.icon-link - img(src=getStaticURL("html", "/static/images/settings.svg") width=25 height=25 alt="Settings.").icon + .links + a(href="/").link.home CloudTube + a(href="/subscriptions" title="Subscriptions").link.icon-link + img(src=getStaticURL("html", "/static/images/subscriptions.svg") width=30 height=25 alt="Subscriptions.").icon + a(href="/settings" title="Settings").link.icon-link + img(src=getStaticURL("html", "/static/images/settings.svg") width=25 height=25 alt="Settings.").icon form(method="get" action="/search").search-form input(type="text" placeholder="Search" name="q" autocomplete="off" value=query).search diff --git a/sass/includes/base.sass b/sass/includes/base.sass index a2cb39d..81febd1 100644 --- a/sass/includes/base.sass +++ b/sass/includes/base.sass @@ -22,6 +22,7 @@ code input, select, button font-family: inherit font-size: 16px + min-width: 0px button cursor: pointer diff --git a/sass/includes/buttons.sass b/sass/includes/buttons.sass new file mode 100644 index 0000000..94443b1 --- /dev/null +++ b/sass/includes/buttons.sass @@ -0,0 +1,58 @@ +@use "sass:selector" +@use "colors.sass" as c + +@mixin button-base + -webkit-appearance: none + -moz-appearance: none + color: c.$fg-bright + border: none + border-radius: 4px + padding: 8px + margin: 0 + text-decoration: none + line-height: 1.25 + + @at-root #{selector.unify(&, "select")} + padding: 8px 27px 8px 8px + background: url(/static/images/arrow-down-wide.svg) right 53% no-repeat c.$bg-accent-x + + @at-root #{selector.unify(&, "a")} + padding: 7px 8px + + @at-root #{selector.unify(&, "button")} + cursor: pointer + + .button-icon + position: relative + top: 3px + margin-right: 8px + margin-left: 2px + +@mixin button-bg + @include button-base + + background-color: c.$bg-accent-x + +@mixin border-button + @include button-bg + + border: 1px solid c.$edge-grey + +@mixin button-size + margin: 4px + font-size: 16px + +@mixin button-hover + &:hover + background-color: c.$bg-accent + + &:active + background-color: c.$bg-dark + +.base-border-look + @include border-button + +.border-look + @include border-button + @include button-size + @include button-hover diff --git a/sass/includes/nav.sass b/sass/includes/nav.sass new file mode 100644 index 0000000..35a047e --- /dev/null +++ b/sass/includes/nav.sass @@ -0,0 +1,54 @@ +@use "colors.sass" as c +@use "buttons.sass" as * + +@mixin thin + @media screen and (max-width: 499px) + @content + +.main-nav + background-color: c.$bg-accent + display: flex + padding: 8px + box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.1) + + +thin + display: block + + .links + display: flex + + +thin + margin-bottom: 4px + padding: 1px + + .link + @include button-base + text-decoration: none + margin: 1px 8px 1px 0px + font-size: 20px + display: flex + align-items: center + + &.home + font-weight: bold + + &, &:visited + color: #fff + + &:focus, &:hover + background-color: c.$bg-accent-x + + .search-form + display: flex + flex: 1 + align-items: center + + .search + @include button-bg + padding: 10px + flex: 1 + margin: 1px + + &:hover, &:focus + border: 1px solid c.$edge-grey + margin: 0px diff --git a/sass/includes/video-list-item.sass b/sass/includes/video-list-item.sass index 9650dfc..cc77666 100644 --- a/sass/includes/video-list-item.sass +++ b/sass/includes/video-list-item.sass @@ -1,5 +1,13 @@ @use "colors.sass" as c +@mixin thin + @media screen and (max-width: 499px) + @content + +@mixin wide + @media screen and (min-width: 500px) + @content + @mixin video-list-item display: grid grid-template-columns: 160px 1fr @@ -55,36 +63,44 @@ @mixin large-item @include video-list-item - grid-gap: 16px - grid-template-columns: 240px 1fr - margin-bottom: 20px - overflow: hidden - max-height: 150px - - .image - width: 240px - height: 135px - - .duration - font-size: 17px - padding: 4px 5px - right: 5px - bottom: 5px - .title - font-size: 24px + font-size: 17px - .author-line - font-size: 15px - color: c.$fg-main + +wide + grid-gap: 16px + grid-template-columns: auto 1fr + margin-bottom: 20px + overflow: hidden + max-height: 150px - .author - color: c.$fg-main + .image + width: 240px + height: 135px - .description - margin-top: 16px - font-size: 15px - color: c.$fg-dim + .duration + font-size: 17px + padding: 4px 5px + right: 5px + bottom: 5px + + .title + font-size: 24px + + .author-line + font-size: 15px + color: c.$fg-main + + .author + color: c.$fg-main + + .description + margin-top: 16px + font-size: 15px + color: c.$fg-dim + + +thin + .description + display: none @mixin search-result @include large-item diff --git a/sass/main.sass b/sass/main.sass index 2eceffe..f82b3ca 100644 --- a/sass/main.sass +++ b/sass/main.sass @@ -8,105 +8,12 @@ @use "includes/subscriptions-page.sass" @use "includes/settings-page.sass" @use "includes/forms.sass" +@use "includes/nav.sass" @font-face font-family: "Bariol" src: url(/static/fonts/bariol.woff?statichash=1) -@mixin button-base - -webkit-appearance: none - -moz-appearance: none - color: c.$fg-bright - border: none - border-radius: 4px - padding: 8px - margin: 0 - text-decoration: none - line-height: 1.25 - - @at-root #{selector.unify(&, "select")} - padding: 8px 27px 8px 8px - background: url(/static/images/arrow-down-wide.svg) right 53% no-repeat c.$bg-accent-x - - @at-root #{selector.unify(&, "a")} - padding: 7px 8px - - @at-root #{selector.unify(&, "button")} - cursor: pointer - - .button-icon - position: relative - top: 3px - margin-right: 8px - margin-left: 2px - -@mixin button-bg - @include button-base - - background-color: c.$bg-accent-x - -@mixin border-button - @include button-bg - - border: 1px solid c.$edge-grey - -@mixin button-size - margin: 4px - font-size: 16px - -@mixin button-hover - &:hover - background-color: c.$bg-accent - - &:active - background-color: c.$bg-dark - -.base-border-look - @include border-button - -.border-look - @include border-button - @include button-size - @include button-hover - -.main-nav - background-color: c.$bg-accent - display: flex - padding: 8px - box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.1) - - .link - @include button-base - text-decoration: none - margin: 1px 8px 1px 0px - font-size: 20px - display: flex - align-items: center - - &.home - font-weight: bold - - &, &:visited - color: #fff - - &:focus, &:hover - background-color: c.$bg-accent-x - - .search-form - display: flex - flex: 1 - align-items: center - - .search - @include button-bg - padding: 10px - flex: 1 - margin: 1px - - &:hover, &:focus - border: 1px solid c.$edge-grey - margin: 0px - .icon-link:hover, .icon-link:focus .icon filter: brightness(2)