Compare commits

...

7 Commits

Author SHA1 Message Date
Cadence Ember 5246a74115
Remove rating/sentiment bar
There are no more dislikes and there is no more ratio bar.
2021-12-16 13:30:13 +13:00
Cadence Ember 893c22aded
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
2021-12-16 12:56:05 +13:00
Cadence Ember 4bd832e37d
Make link colour a little brighter
References: https://todo.sr.ht/~cadence/tube/46
2021-12-16 12:48:56 +13:00
Cadence Ember bec802fad5
Change input placeholder and border colour
References: https://todo.sr.ht/~cadence/tube/46
2021-12-16 12:47:30 +13:00
Cadence Ember e97d1b958e
Use h1 for channel title on channel page
References: https://todo.sr.ht/~cadence/tube/46
2021-12-16 12:29:29 +13:00
Cadence Ember 0dfa8ca2b6
Add quality label on video page, move main element 2021-12-16 12:16:03 +13:00
Cadence Ember 5a5901db7d
Add aria-label to search inputs
References: https://todo.sr.ht/~cadence/tube/46
2021-12-16 12:02:06 +13:00
9 changed files with 17 additions and 17 deletions

View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.821 2.117" height="8" width="22"><path d="M1.587.53l.53.528.529-.529h.264v.265l-.793.793-.794-.793V.529z" fill="#bbb" paint-order="markers stroke fill"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="8" viewBox="0 0 5.821 2.117"><path d="M1.269.53l.767.793h.161L2.964.53h.211v.265L2.117 1.852 1.058.794V.529z" fill="#d7d7d7" paint-order="markers stroke fill"/></svg>

Before

Width:  |  Height:  |  Size: 214 B

After

Width:  |  Height:  |  Size: 225 B

View File

@ -21,7 +21,7 @@ block content
.logo .logo
img(src=thumbnail.url width=thumbnail.width height=thumbnail.height alt="").thumbnail-image img(src=thumbnail.url width=thumbnail.width height=thumbnail.height alt="").thumbnail-image
.about .about
.name= data.author h1.name= data.author
.subscribers= data.second__subCountText .subscribers= data.second__subCountText
+subscribe_button(data.authorId, subscribed, `/channel/${data.authorId}`).subscribe-button.base-border-look +subscribe_button(data.authorId, subscribed, `/channel/${data.authorId}`).subscribe-button.base-border-look
.description!= data.descriptionHtml .description!= data.descriptionHtml

View File

@ -11,5 +11,5 @@ block content
p You're in control. Watch things your way. p You're in control. Watch things your way.
p Go on. What do you want to watch? p Go on. What do you want to watch?
form(method="get" action="/search").encouraging-search-form 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? p: a(href="/cant-think") ...can't think of anything?

View File

@ -23,7 +23,7 @@ html
image(href=getStaticURL("html", "/static/images/settings.svg") alt="Settings.").icon image(href=getStaticURL("html", "/static/images/settings.svg") alt="Settings.").icon
title Settings title Settings
form(method="get" action="/search").search-form 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 div
block content block content

View File

@ -20,11 +20,11 @@ block content
script(type="module" src=getStaticURL("html", "/static/js/continuous.js")) script(type="module" src=getStaticURL("html", "/static/js/continuous.js"))
noscript noscript
meta(http-equiv="refresh" content=`${video.lengthSeconds+5};url=/watch?v=${first.videoId}&continuous=1&session-watched=${sessionWatchedNext}`) 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-below": settings.recommended_mode === 1,
"video-page--recommended-hidden": settings.recommended_mode === 2 "video-page--recommended-hidden": settings.recommended_mode === 2
}) })
.main-video-section main.main-video-section
.video-container .video-container
- const format = formats[0] - const format = formats[0]
if format if format
@ -51,7 +51,6 @@ block content
- const month = new Intl.DateTimeFormat("en-US", {month: "short"}).format(date.getTime()) - const month = new Intl.DateTimeFormat("en-US", {month: "short"}).format(date.getTime())
div= `Uploaded ${date.getUTCDate()} ${month} ${date.getUTCFullYear()}` div= `Uploaded ${date.getUTCDate()} ${month} ${date.getUTCFullYear()}`
div= video.second__viewCountText div= video.second__viewCountText
div(style=`--rating: ${video.rating*20}%`)#rating-bar.rating-bar
audio(preload="auto")#audio audio(preload="auto")#audio
#live-event-notice #live-event-notice
@ -69,7 +68,7 @@ block content
.button-container .button-container
+subscribe_button(video.authorId, subscribed, `/watch?v=${video.videoId}`).border-look +subscribe_button(video.authorId, subscribed, `/watch?v=${video.videoId}`).border-look
//- button.border-look#theatre Theatre //- 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 each f in formats
option(value=f.itag)= f.cloudtube__label option(value=f.itag)= f.cloudtube__label
//- //-

View File

@ -31,6 +31,12 @@ input, select, button
button button
cursor: pointer cursor: pointer
::placeholder
color: #c4c4c4
opacity: 1
// focus section
:focus :focus
outline: none outline: none

View File

@ -43,7 +43,9 @@
.name .name
font-size: 30px font-size: 30px
font-weight: normal
color: c.$fg-bright color: c.$fg-bright
margin: 0
.subscribers .subscribers
color: c.$fg-main color: c.$fg-main

View File

@ -10,8 +10,8 @@ $fg-main: #ddd
$fg-dim: #bbb $fg-dim: #bbb
$fg-warning: #fdca6d $fg-warning: #fdca6d
$edge-grey: #808080 $edge-grey: #a0a0a0
$link: #72b4f6 $link: #8ac2f9
$power-deep: #c62727 $power-deep: #c62727

View File

@ -68,13 +68,6 @@
align-items: flex-start align-items: flex-start
margin-left: 0px 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 .continuous
display: flex display: flex
align-items: center align-items: center