1
0
mirror of https://git.sr.ht/~cadence/cloudtube synced 2024-11-12 19:37:29 +00:00

Nav and search better mobile support

This commit is contained in:
Cadence Ember 2020-10-03 01:32:56 +13:00
parent 1ea272600c
commit 8998c472ef
No known key found for this signature in database
GPG Key ID: BC1C2C61CF521B17
6 changed files with 162 additions and 125 deletions

View File

@ -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

View File

@ -22,6 +22,7 @@ code
input, select, button
font-family: inherit
font-size: 16px
min-width: 0px
button
cursor: pointer

View File

@ -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

54
sass/includes/nav.sass Normal file
View File

@ -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

View File

@ -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

View File

@ -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)