From 125ddaa8da8dad8f3e8eeb54f79a775b865c58bf Mon Sep 17 00:00:00 2001 From: James Taylor Date: Tue, 20 Oct 2020 15:38:00 -0700 Subject: Add setting to change font. Change default to arial Closes #33 --- youtube/static/shared.css | 336 ---------------------------------------------- 1 file changed, 336 deletions(-) delete mode 100644 youtube/static/shared.css (limited to 'youtube/static') diff --git a/youtube/static/shared.css b/youtube/static/shared.css deleted file mode 100644 index 7dd16e2..0000000 --- a/youtube/static/shared.css +++ /dev/null @@ -1,336 +0,0 @@ -* { - box-sizing: border-box; -} - -h1, h2, h3, h4, h5, h6, div, button{ - margin:0; - padding:0; -} - -address{ - font-style:normal; -} - -html{ - font-family: "liberation serif", "times new roman", calibri, carlito, serif; -} - -body{ - margin:0; - padding: 0; - color:var(--text-color); - - - background-color:var(--background-color); - - min-height:100vh; - display: flex; - flex-direction: column; -} - - header{ - background-color:#333333; - height: 50px; - - display: flex; - justify-content: center; - } - - #home-link{ - align-self: center; - margin-left:10px; - color: #ffffff; - } - - - #site-search{ - max-width: 600px; - margin-left:10px; - display: flex; - flex-grow: 1; - } - - #site-search .search-box{ - align-self:center; - height:25px; - border:0; - - flex-grow: 1; - } - #site-search .search-button{ - align-self:center; - height:25px; - - border-style:solid; - border-width:1px; - } - #site-search .dropdown{ - margin-left:5px; - align-self:center; - height:25px; - } - #site-search .dropdown button{ - align-self:center; - height:25px; - - border-style:solid; - border-width:1px; - } - #site-search .css-sucks{ - width:0px; - height:0px; - } - #site-search .dropdown-content{ - grid-template-columns: auto auto; - white-space: nowrap; - } - #site-search .dropdown-content h3{ - grid-column:1 / span 2; - } - - #playlist-edit{ - margin-left: 10px; - align-self: center; - } - #local-playlists{ - margin-right:5px; - color: #ffffff; - } - #playlist-name-selection{ - } - #playlist-add-button{ - padding-left: 10px; - padding-right: 10px; - } - #item-selection-reset{ - padding-left: 10px; - padding-right: 10px; - } - - main{ - flex-grow: 1; - padding-bottom: 20px; - } - #message-box{ - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - border-style: outset; - padding: 20px; - background-color: var(--interface-color); - opacity: 0; - transition-property: opacity; - transition-duration: 0.3s; - } - - -.dropdown{ - z-index:1; -} - .dropdown-content{ - display:none; - background-color: var(--interface-color); - } - .dropdown:hover .dropdown-content{ - /* For some reason, if this is just grid, it will insist on being 0px wide just like its 0px by 0px parent */ - /* making it inline-grid happened to fix it */ - display:inline-grid; - } - -.item-list{ - display: grid; - grid-row-gap: 10px; - -} - - -.item-grid{ - display: flex; - flex-wrap: wrap; -} - .item-grid > .playlist-item-box{ - margin-right: 10px; - } - .item-grid > * { - margin-bottom: 10px; - } - .item-grid .horizontal-item-box .item{ - width:370px; - } - .item-grid .vertical-item-box .item{ - } - -.item-box{ - display: inline-flex; - flex-direction: row; - /* prevent overflow due to long titles with no spaces: - https://stackoverflow.com/a/43312314 */ - min-width: 0; -} -.vertical-item-box{ -} -.horizontal-item-box{ -} - .item{ - background-color:var(--interface-color); - text-decoration:none; - font-size: 0.8125rem; - color: #767676; - } - - .horizontal-item-box .item { - flex-grow: 1; - display: grid; - align-content: start; - grid-template-columns: auto 1fr; - grid-template-rows: auto auto auto auto 1fr; - /* prevent overflow due to long titles with no spaces: - https://stackoverflow.com/a/43312314 */ - min-width: 0; - } - .vertical-item-box .item{ - width: 168px; - } - .thumbnail-box{ - font-size: 0px; /* prevent newlines and blank space from creating gaps */ - position: relative; - display: block; - } - .horizontal-item-box .thumbnail-box{ - grid-row: 1 / span 5; - margin-right: 4px; - } - .no-description .thumbnail-box{ - width: 168px; - height:94px; - } - .has-description .thumbnail-box{ - width: 246px; - height:138px; - } - .video-item .thumbnail-info{ - position: absolute; - bottom: 2px; - right: 2px; - opacity: .8; - color: #ffffff; - font-size: 0.8125rem; - background-color: #000000; - } - .playlist-item .thumbnail-info{ - position: absolute; - right: 0px; - bottom: 0px; - height: 100%; - width: 50%; - text-align:center; - white-space: pre-line; - opacity: .8; - color: #cfcfcf; - font-size: 0.8125rem; - background-color: #000000; - } - .playlist-item .thumbnail-info span{ /* trick to vertically center the text */ - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - } - .thumbnail-img{ /* center it */ - margin: auto; - display: block; - max-height: 100%; - max-width: 100%; - } - .horizontal-item-box .thumbnail-img{ - height: 100%; - } - - .item .title{ - min-width: 0; - line-height:1.25em; - max-height:3.75em; - overflow-y: hidden; - overflow-wrap: break-word; - - color: var(--text-color); - font-size: 1rem; - font-weight: 500; - text-decoration:initial; - } - - .stats{ - list-style: none; - padding: 0px; - margin: 0px; - } - .horizontal-stats{ - max-height:2.4em; - overflow:hidden; - } - .horizontal-stats > li{ - display: inline; - } - - .horizontal-stats > li::after{ - content: " | "; - } - .horizontal-stats > li:last-child::after{ - content: ""; - } - - .vertical-stats{ - display: flex; - flex-direction: column; - } - .stats address{ - display: inline; - } - .vertical-stats li{ - max-height: 1.3em; - overflow: hidden; - } - - .item-checkbox{ - justify-self:start; - align-self:center; - height:30px; - width:30px; - min-width:30px; - margin: 0px; - } - - -.page-button-row{ - margin-top: 10px; - margin-bottom: 10px; - justify-self:center; - justify-content: center; - display: grid; - grid-auto-columns: 40px; - grid-auto-flow: column; - height: 40px; -} -.next-previous-button-row{ - margin: 10px 0px; - display: flex; - justify-self:center; - justify-content: center; - height: 40px; -} - .page-button{ - background-color: var(--interface-color); - border-style: outset; - border-width: 2px; - font-weight: bold; - text-align: center; - padding: 5px; - } - .next-page:nth-child(2){ /* only if there's also a previous page button */ - margin-left: 10px; - } -.sort-button{ - background-color: var(--interface-color); - padding: 2px; - justify-self: start; -} -- cgit v1.2.3 From f100685d64f5e93f1ec2a58379a986beb012b482 Mon Sep 17 00:00:00 2001 From: James Taylor Date: Tue, 20 Oct 2020 17:19:45 -0700 Subject: Move comment.js reply button styling to comments.css So that the style will also be present on the /comments pages --- youtube/static/comments.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'youtube/static') diff --git a/youtube/static/comments.css b/youtube/static/comments.css index 65e2cbe..1c21e73 100644 --- a/youtube/static/comments.css +++ b/youtube/static/comments.css @@ -124,6 +124,18 @@ grid-column-gap: 10px; } +details.replies > summary{ + background-color: var(--interface-color); + border-style: outset; + border-width: 1px; + font-weight: bold; + padding-bottom: 0px; +} + +details.replies .comment{ + width: 600px; +} + .more-comments{ justify-self:center; margin-top:10px; -- cgit v1.2.3 From 95f2f027eabdcc4dc3c1a77829bf2bf503ed2939 Mon Sep 17 00:00:00 2001 From: James Taylor Date: Tue, 20 Oct 2020 17:48:18 -0700 Subject: Comments.js: Add open in new tab button under replies as fallback if xhr request fails --- youtube/static/comments.css | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'youtube/static') diff --git a/youtube/static/comments.css b/youtube/static/comments.css index 1c21e73..8509e5d 100644 --- a/youtube/static/comments.css +++ b/youtube/static/comments.css @@ -132,6 +132,11 @@ details.replies > summary{ padding-bottom: 0px; } +.replies-open-new-tab{ + display: inline-block; + margin-top: 5px; +} + details.replies .comment{ width: 600px; } -- cgit v1.2.3 From c696db3e84d91092182adbeb7eef6126fad6be5d Mon Sep 17 00:00:00 2001 From: James Taylor Date: Tue, 20 Oct 2020 18:24:41 -0700 Subject: comments.js: include error in reply html rather than using an alert --- youtube/static/js/common.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'youtube/static') diff --git a/youtube/static/js/common.js b/youtube/static/js/common.js index 2db4390..20cfddd 100644 --- a/youtube/static/js/common.js +++ b/youtube/static/js/common.js @@ -41,9 +41,7 @@ function doXhr(url, callback=null) { var xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.onload = (e) => { - let ok = xhr.status >= 200 && xhr.status < 300; - if (ok) callback(e.currentTarget.response); - else alert(`${xhr.responseURL} status code: ${xhr.status}`); + callback(e.currentTarget.response); } xhr.send(); return xhr; -- cgit v1.2.3 From a27b575380378f1b490dcabb8cc67f05adee5daa Mon Sep 17 00:00:00 2001 From: zrose584 <57181548+zrose584@users.noreply.github.com> Date: Wed, 21 Oct 2020 10:35:01 +0200 Subject: remove trailing whitespaces --- youtube/static/comments.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'youtube/static') diff --git a/youtube/static/comments.css b/youtube/static/comments.css index 8509e5d..b177a4f 100644 --- a/youtube/static/comments.css +++ b/youtube/static/comments.css @@ -1,4 +1,4 @@ -.video-metadata{ +.video-metadata{ display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr auto; -- cgit v1.2.3