From 5a5901db7df2e1f5d53f5b399212195d09cfd7b9 Mon Sep 17 00:00:00 2001 From: Cadence Ember Date: Thu, 16 Dec 2021 12:02:06 +1300 Subject: [PATCH 1/7] Add aria-label to search inputs References: https://todo.sr.ht/~cadence/tube/46 --- pug/home.pug | 2 +- pug/includes/layout.pug | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/pug/home.pug b/pug/home.pug index f71d2c4..5abafaf 100644 --- a/pug/home.pug +++ b/pug/home.pug @@ -11,5 +11,5 @@ block content p You're in control. Watch things your way. p Go on. What do you want to watch? form(method="get" action="/search").encouraging-search-form - input(type="text" name="q" placeholder="I'd like to watch..." autocomplete="off" autofocus=!mobile).search.base-border-look + input(type="text" name="q" placeholder="I'd like to watch..." aria-label="Search a video" autocomplete="off" autofocus=!mobile).search.base-border-look p: a(href="/cant-think") ...can't think of anything? diff --git a/pug/includes/layout.pug b/pug/includes/layout.pug index 62504ae..c837122 100644 --- a/pug/includes/layout.pug +++ b/pug/includes/layout.pug @@ -23,7 +23,7 @@ html image(href=getStaticURL("html", "/static/images/settings.svg") alt="Settings.").icon title Settings form(method="get" action="/search").search-form - input(type="text" placeholder="Search" name="q" autocomplete="off" value=query).search + input(type="text" placeholder="Search" aria-label="Search a video" name="q" autocomplete="off" value=query).search div block content From 0dfa8ca2b6b91e73a81be3b1189ced7eb2c3e8d9 Mon Sep 17 00:00:00 2001 From: Cadence Ember Date: Thu, 16 Dec 2021 12:16:03 +1300 Subject: [PATCH 2/7] Add quality label on video page, move main element --- pug/video.pug | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pug/video.pug b/pug/video.pug index b1fc394..6364601 100644 --- a/pug/video.pug +++ b/pug/video.pug @@ -20,11 +20,11 @@ block content script(type="module" src=getStaticURL("html", "/static/js/continuous.js")) noscript meta(http-equiv="refresh" content=`${video.lengthSeconds+5};url=/watch?v=${first.videoId}&continuous=1&session-watched=${sessionWatchedNext}`) - main.video-page(class={ + .video-page(class={ "video-page--recommended-below": settings.recommended_mode === 1, "video-page--recommended-hidden": settings.recommended_mode === 2 }) - .main-video-section + main.main-video-section .video-container - const format = formats[0] if format @@ -69,7 +69,7 @@ block content .button-container +subscribe_button(video.authorId, subscribed, `/watch?v=${video.videoId}`).border-look //- button.border-look#theatre Theatre - select(autocomplete="off").border-look#quality-select + select(aria-label="Quality" autocomplete="off").border-look#quality-select each f in formats option(value=f.itag)= f.cloudtube__label //- From e97d1b958e7b696eb206bfe3dbe351c818d2c4b7 Mon Sep 17 00:00:00 2001 From: Cadence Ember Date: Thu, 16 Dec 2021 12:29:29 +1300 Subject: [PATCH 3/7] Use h1 for channel title on channel page References: https://todo.sr.ht/~cadence/tube/46 --- pug/channel.pug | 2 +- sass/includes/channel-page.sass | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/pug/channel.pug b/pug/channel.pug index ac75e4a..fb83960 100644 --- a/pug/channel.pug +++ b/pug/channel.pug @@ -21,7 +21,7 @@ block content .logo img(src=thumbnail.url width=thumbnail.width height=thumbnail.height alt="").thumbnail-image .about - .name= data.author + h1.name= data.author .subscribers= data.second__subCountText +subscribe_button(data.authorId, subscribed, `/channel/${data.authorId}`).subscribe-button.base-border-look .description!= data.descriptionHtml diff --git a/sass/includes/channel-page.sass b/sass/includes/channel-page.sass index 06df5d1..2b4cfd8 100644 --- a/sass/includes/channel-page.sass +++ b/sass/includes/channel-page.sass @@ -43,7 +43,9 @@ .name font-size: 30px + font-weight: normal color: c.$fg-bright + margin: 0 .subscribers color: c.$fg-main From bec802fad5d17a0cc5d0667edd400a7b6f806d20 Mon Sep 17 00:00:00 2001 From: Cadence Ember Date: Thu, 16 Dec 2021 12:46:56 +1300 Subject: [PATCH 4/7] Change input placeholder and border colour References: https://todo.sr.ht/~cadence/tube/46 --- sass/includes/base.sass | 6 ++++++ sass/includes/colors.sass | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/sass/includes/base.sass b/sass/includes/base.sass index 82dfd0f..fa23dd3 100644 --- a/sass/includes/base.sass +++ b/sass/includes/base.sass @@ -31,6 +31,12 @@ input, select, button button cursor: pointer +::placeholder + color: #c4c4c4 + opacity: 1 + +// focus section + :focus outline: none diff --git a/sass/includes/colors.sass b/sass/includes/colors.sass index 30bc8dc..f768ae9 100644 --- a/sass/includes/colors.sass +++ b/sass/includes/colors.sass @@ -10,7 +10,7 @@ $fg-main: #ddd $fg-dim: #bbb $fg-warning: #fdca6d -$edge-grey: #808080 +$edge-grey: #a0a0a0 $link: #72b4f6 From 4bd832e37d458d3d54aae0ede3f0df23bdfae5ef Mon Sep 17 00:00:00 2001 From: Cadence Ember Date: Thu, 16 Dec 2021 12:48:56 +1300 Subject: [PATCH 5/7] Make link colour a little brighter References: https://todo.sr.ht/~cadence/tube/46 --- sass/includes/colors.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sass/includes/colors.sass b/sass/includes/colors.sass index f768ae9..e60e409 100644 --- a/sass/includes/colors.sass +++ b/sass/includes/colors.sass @@ -12,6 +12,6 @@ $fg-warning: #fdca6d $edge-grey: #a0a0a0 -$link: #72b4f6 +$link: #8ac2f9 $power-deep: #c62727 From 893c22adedb8d651542aa81965945b29bcc16b89 Mon Sep 17 00:00:00 2001 From: Cadence Ember Date: Thu, 16 Dec 2021 12:56:05 +1300 Subject: [PATCH 6/7] Change dropdown marker to be more visible The colour now contrasts more and the outline is reduced so that less space is hinted in the middle of the arrow. References: https://todo.sr.ht/~cadence/tube/46 --- html/static/images/arrow-down-wide.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/html/static/images/arrow-down-wide.svg b/html/static/images/arrow-down-wide.svg index 7a33a5f..e7eb9ca 100644 --- a/html/static/images/arrow-down-wide.svg +++ b/html/static/images/arrow-down-wide.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file From 5246a741159fba1ea78e82629ab9c901a440d7f4 Mon Sep 17 00:00:00 2001 From: Cadence Ember Date: Thu, 16 Dec 2021 13:30:13 +1300 Subject: [PATCH 7/7] Remove rating/sentiment bar There are no more dislikes and there is no more ratio bar. --- pug/video.pug | 1 - sass/includes/video-page.sass | 7 ------- 2 files changed, 8 deletions(-) diff --git a/pug/video.pug b/pug/video.pug index 6364601..1000b92 100644 --- a/pug/video.pug +++ b/pug/video.pug @@ -51,7 +51,6 @@ block content - const month = new Intl.DateTimeFormat("en-US", {month: "short"}).format(date.getTime()) div= `Uploaded ${date.getUTCDate()} ${month} ${date.getUTCFullYear()}` div= video.second__viewCountText - div(style=`--rating: ${video.rating*20}%`)#rating-bar.rating-bar audio(preload="auto")#audio #live-event-notice diff --git a/sass/includes/video-page.sass b/sass/includes/video-page.sass index 964dc77..f134825 100644 --- a/sass/includes/video-page.sass +++ b/sass/includes/video-page.sass @@ -68,13 +68,6 @@ align-items: flex-start margin-left: 0px - .rating-bar - margin-top: 8px - width: 140px - height: 8px - border-radius: 3px - background: linear-gradient(to right, #1a1 var(--rating), #bbb var(--rating)) - .continuous display: flex align-items: center