From fb2fe788c48f1dabfe2c7e2f9cf31654b7faecf7 Mon Sep 17 00:00:00 2001 From: teddit Date: Tue, 19 Jan 2021 21:09:50 +0100 Subject: [PATCH 1/8] check that gallery id exists --- inc/processJsonPost.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/inc/processJsonPost.js b/inc/processJsonPost.js index 1c2e9c3..b0524e7 100644 --- a/inc/processJsonPost.js +++ b/inc/processJsonPost.js @@ -116,16 +116,18 @@ module.exports = function(fetch) { for(var i = 0; i < post.gallery_data.items.length; i++) { let id = post.gallery_data.items[i].media_id if(post.media_metadata[id]) { - let item = { source: null, thumbnail: null, large: null } - if(post.media_metadata[id].s && post.media_metadata[id].p[0].u) { - item = { - type: post.media_metadata[id].e, - source: await downloadAndSave(post.media_metadata[id].s.u), - thumbnail: await downloadAndSave(post.media_metadata[id].p[0].u), - large: await downloadAndSave(post.media_metadata[id].p[post.media_metadata[id].p.length - 1].u), + if(post.media_metadata[id].p[0]) { + let item = { source: null, thumbnail: null, large: null } + if(post.media_metadata[id].s && post.media_metadata[id].p[0].u) { + item = { + type: post.media_metadata[id].e, + source: await downloadAndSave(post.media_metadata[id].s.u), + thumbnail: await downloadAndSave(post.media_metadata[id].p[0].u), + large: await downloadAndSave(post.media_metadata[id].p[post.media_metadata[id].p.length - 1].u), + } } + obj.gallery_items.push(item) } - obj.gallery_items.push(item) } } } From 07555e0d0adaab5ee5daab395e8751299b752141 Mon Sep 17 00:00:00 2001 From: ltGuillaume Date: Tue, 19 Jan 2021 21:49:03 +0100 Subject: [PATCH 2/8] Added a sepia theme, based on the sepia theme in Slide for Android --- config.js.template | 2 +- static/css/sepia.css | 180 ++++++++++++++++++++++++++++++++++++++++ views/includes/head.pug | 2 + views/preferences.pug | 6 ++ 4 files changed, 189 insertions(+), 1 deletion(-) create mode 100644 static/css/sepia.css diff --git a/config.js.template b/config.js.template index 304c740..f54006c 100644 --- a/config.js.template +++ b/config.js.template @@ -2,7 +2,7 @@ const config = { domain: process.env.DOMAIN || '127.0.0.1', // Or for example 'teddit.net' use_reddit_oauth: process.env.USE_REDDIT_OAUTH === 'true' || false, // If false, teddit uses Reddit's public API. If true, you need to have your own Reddit app ID (enter the app ID to the "reddit_app_id" config key). cert_dir: process.env.CERT_DIR || '', // For example '/home/teddit/letsencrypt/live/teddit.net', if you are using https. No trailing slash. - theme: process.env.THEME || 'dark', // One of: 'dark', '' + theme: process.env.THEME || 'dark', // One of: 'dark', 'sepia', '' flairs_enabled: process.env.FLAIRS_ENABLED !== 'true' || true, // Enables the rendering of user and link flairs on teddit highlight_controversial: process.env.HIGHLIGHT_CONTROVERSIAL !== 'true' || true, // Enables controversial comments to be indicated by a typographical dagger (†) api_enabled: process.env.API_ENABLED !== 'true' || true, // Teddit API feature. Might increase loads significantly on your instance. diff --git a/static/css/sepia.css b/static/css/sepia.css new file mode 100644 index 0000000..b4c318c --- /dev/null +++ b/static/css/sepia.css @@ -0,0 +1,180 @@ +:root { + --bodybg: #ccc9b8; /* #cac5ad; */ + --bodytext: #53524b; + --topbarbg: #992c09; + --headerbg: #bf360c; + --headertext: white; + --headerfaded: #ecc3b7; + --tabbg: #5a5a5a; + --tabtext: #f2f0ea; + --linkbg: #e2dfd7; + --linktext: #979692; + --shadow: #9e9e9e; + --buttonbg: #f2f0ea; + --buttontext: #53524b; + --oddbg: #e2dfd7; + --oddborder: #616161; + --evenbg: #f2f0ea; + --evenborder: #919191; + /* Overrides */ + --graytext: #616161; + /* Copied from default theme */ + --linkcolor: #0645ad; + --lightlinkcolor: #406bb3; +} +/* Main page */ +body.sepia { + background: var(--bodybg); + color: var(--bodytext); +} +body.sepia nav { + background: var(--topbarbg); + color: var(--headertext); +} +body.sepia .top-links { + background: var(--headerbg); +} +body.sepia .top-links a { + padding-left: 4px; + background: var(--headerbg); + color: var(--headerfaded); +} +body.sepia #sr-more-link { + margin-top: 4px; + background: var(--buttonbg); +} +body.sepia header { + margin-top: 0; + background: var(--headerbg); + color: var(--headertext); +} +body.sepia header a { + color: var(--headertext); +} +body.sepia header .tabmenu li:not(.active) a { + background: var(--tabbg); + color: var(--tabtext); +} +body.sepia #links { + margin: 4px 16px; /* Only when width has certain minimum */ +} +body.sepia #links .link { + margin: 8px 0; + padding: 16px 8px 16px 0; + background: var(--linkbg); + color: var(--linktext); + border-radius: 3px; + box-shadow: 0px 0px 2px var(--shadow); +} +body.sepia .flair, +body.sepia #links .link .entry .title span.flair, +body.sepia #post .info .title span.flair { + color: var(--bodytext); + background-color: var(--linkbg); +} +body.sepia .upvotes .arrow { + filter: brightness(90%); +} +body.sepia #links .link .entry .title a h2 { + padding-right: 4px; +} +body.sepia #links .link .entry .title span { + padding-left: 0; +} +body.sepia #user .upvotes, +body.sepia #links .link .upvotes, +body.sepia #links .link .entry .title span, +body.sepia #links .link .entry .meta, +body.sepia #links .link .entry .meta .links a { + color: var(--linktext); +} +body.sepia button, +body.sepia select, +body.sepia input, +body.sepia input[type="submit"], +body.sepia #search input[type="text"], +body.sepia #sr-more-link, +body.sepia .btn, +body.sepia .view-more-links a { + margin-bottom: 0; + background: var(--buttonbg); + color: var(--buttontext); + border-radius: 3px; + border: none; + box-shadow: 0px 0px 2px var(--shadow); +} +body.sepia .view-more-links a { + margin-left: 16px; + color: var(--linkcolor); + font-weight: normal; +} +body.sepia #sr-more-link { + border-radius: 3px 0 0 3px; +} +body.sepia input[type="checkbox"] { + margin-top: 6px; +} +body.sepia footer { + margin-top: 20px; + padding: 8px 0 8px 20px; + box-shadow: 0px 0px 2px var(--shadow); +} +/* Search */ +body.sepia #links.search { + width: calc(100% - 40px); +} +/* Comments */ +body.sepia #post .score { + color: var(--graytext); +} +body.sepia .score .arrow { + filter: brightness(70%); +} +body.sepia #post .submitted, +body.sepia #post .title .domain { + color: var(--graytext); +} +body.sepia #post .usertext-body { + background: var(--oddbg); + border-radius: 3px; + border: none; + box-shadow: 0px 0px 2px var(--shadow); +} +body.sepia .md { + color: var(--bodytext); +} +body.sepia #post header div a { + color: var(--headerfaded); +} +body.sepia .comment { + background: var(--oddbg); + border-left: 3px solid var(--oddborder); + border-radius: 3px 0 0 3px; + box-shadow: 1px 0px 1px var(--shadow); +} +body.sepia .comment.even-depth { + background: var(--evenbg); + border-left: 3px solid var(--evenborder); + box-shadow: 1px 0px 1px var(--shadow); +} +body.sepia .comments > .comment { + border: none; + border-radius: 0; +} +body.sepia .md .md-spoiler-text:not(.revealed), +body.sepia .md .md-spoiler-text:active:not(.revealed), +body.sepia .md .md-spoiler-text:focus:not(.revealed), +body.sepia .md .md-spoiler-text:hover:not(.revealed) { + background: var(--bodytext); + color: var(--bodytext); +} +body.sepia .md .md-spoiler-text:active:not(.revealed), +body.sepia .md .md-spoiler-text:focus:not(.revealed), +body.sepia .md .md-spoiler-text:hover:not(.revealed) { + background: none; +} +body.sepia .comments > form button { + margin: 12px 8px; + padding: 8px; + cursor: pointer; +} diff --git a/views/includes/head.pug b/views/includes/head.pug index 588875f..3d497b3 100644 --- a/views/includes/head.pug +++ b/views/includes/head.pug @@ -1,5 +1,7 @@ if(user_preferences.theme === 'dark') link(rel="stylesheet", type="text/css", href="/css/dark.css") +if(user_preferences.theme === 'sepia') + link(rel="stylesheet", type="text/css", href="/css/sepia.css") link(rel="stylesheet", type="text/css", href="/css/styles.css") link(rel="icon", type="image/png", sizes="32x32", href="/favicon.png") meta(name="viewport", content="width=device-width, initial-scale=1.0") diff --git a/views/preferences.pug b/views/preferences.pug index 7266eeb..9d173a7 100644 --- a/views/preferences.pug +++ b/views/preferences.pug @@ -16,9 +16,15 @@ html if(!user_preferences.theme || user_preferences.theme == '') option(value="", selected="selected") White option(value="dark") Dark + option(value="sepia") Sepia if(user_preferences.theme === 'dark') option(value="") White option(value="dark", selected="selected") Dark + option(value="sepia") Sepia + if(user_preferences.theme === 'sepia') + option(value="") White + option(value="dark") Dark + option(value="sepia", selected="selected") Sepia .setting label(for="flairs") Show flairs: if(!user_preferences.flairs || user_preferences.flairs == 'true') From f929ac052e35da39e33ea251d43895cedaf0b781 Mon Sep 17 00:00:00 2001 From: ltGuillaume Date: Tue, 19 Jan 2021 22:19:02 +0100 Subject: [PATCH 3/8] Remove tab backgrounds --- static/css/sepia.css | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/static/css/sepia.css b/static/css/sepia.css index b4c318c..8f5bb85 100644 --- a/static/css/sepia.css +++ b/static/css/sepia.css @@ -5,8 +5,6 @@ --headerbg: #bf360c; --headertext: white; --headerfaded: #ecc3b7; - --tabbg: #5a5a5a; - --tabtext: #f2f0ea; --linkbg: #e2dfd7; --linktext: #979692; --shadow: #9e9e9e; @@ -51,9 +49,13 @@ body.sepia header { body.sepia header a { color: var(--headertext); } -body.sepia header .tabmenu li:not(.active) a { - background: var(--tabbg); - color: var(--tabtext); +body.sepia header .tabmenu li a { + background: none; + color: var(--headerfaded); + text-transform: uppercase; +} +body.sepia header .tabmenu li.active a { + color: var(--headertext); } body.sepia #links { margin: 4px 16px; /* Only when width has certain minimum */ From f8dfe34a3df92b9ae148c5ed025498836c1f4aad Mon Sep 17 00:00:00 2001 From: ltGuillaume Date: Tue, 19 Jan 2021 22:28:39 +0100 Subject: [PATCH 4/8] Improve (folded) comments padding --- static/css/sepia.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/static/css/sepia.css b/static/css/sepia.css index 8f5bb85..865fe9f 100644 --- a/static/css/sepia.css +++ b/static/css/sepia.css @@ -163,6 +163,12 @@ body.sepia .comments > .comment { border: none; border-radius: 0; } +body.sepia .comment details { + padding-top: 8px; +} +body.sepia .comment details:not([open]) { + padding-bottom: 8px; +} body.sepia .md .md-spoiler-text:not(.revealed), body.sepia .md .md-spoiler-text:active:not(.revealed), body.sepia .md .md-spoiler-text:focus:not(.revealed), From e3d611c7fa3e85ee72b20a71f7fe9d46e2c23308 Mon Sep 17 00:00:00 2001 From: ltGuillaume Date: Tue, 19 Jan 2021 23:02:39 +0100 Subject: [PATCH 5/8] Fix header's padding-bottom for search results page --- static/css/sepia.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/static/css/sepia.css b/static/css/sepia.css index 865fe9f..fb813c2 100644 --- a/static/css/sepia.css +++ b/static/css/sepia.css @@ -30,6 +30,7 @@ body.sepia nav { color: var(--headertext); } body.sepia .top-links { + padding-bottom: 4px; background: var(--headerbg); } body.sepia .top-links a { @@ -42,7 +43,7 @@ body.sepia #sr-more-link { background: var(--buttonbg); } body.sepia header { - margin-top: 0; + margin-top: -8px; background: var(--headerbg); color: var(--headertext); } From 44642d648024b798cdfe7fa5188de8f363c04af5 Mon Sep 17 00:00:00 2001 From: ltGuillaume Date: Wed, 20 Jan 2021 00:14:54 +0100 Subject: [PATCH 6/8] Fix margins for narrow screens --- static/css/sepia.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/static/css/sepia.css b/static/css/sepia.css index fb813c2..acc22a7 100644 --- a/static/css/sepia.css +++ b/static/css/sepia.css @@ -59,9 +59,11 @@ body.sepia header .tabmenu li.active a { color: var(--headertext); } body.sepia #links { - margin: 4px 16px; /* Only when width has certain minimum */ + max-width: calc(100% - 32px); + margin: 4px 16px; } body.sepia #links .link { + width: calc(100% - 8px); margin: 8px 0; padding: 16px 8px 16px 0; background: var(--linkbg); From 5d37f3b5624bf2ff2a5c580e4019f9d9214d3872 Mon Sep 17 00:00:00 2001 From: ltGuillaume Date: Wed, 20 Jan 2021 03:50:46 +0100 Subject: [PATCH 7/8] Decrease spacing between links --- static/css/sepia.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/css/sepia.css b/static/css/sepia.css index acc22a7..e054f13 100644 --- a/static/css/sepia.css +++ b/static/css/sepia.css @@ -64,7 +64,7 @@ body.sepia #links { } body.sepia #links .link { width: calc(100% - 8px); - margin: 8px 0; + margin: 6px 0; padding: 16px 8px 16px 0; background: var(--linkbg); color: var(--linktext); From f684776eaad1159b0433660db5e05e86d513c014 Mon Sep 17 00:00:00 2001 From: teddit Date: Wed, 20 Jan 2021 16:43:02 +0100 Subject: [PATCH 8/8] add logo to topbar, fix #124 --- static/css/styles.css | 5 +++++ views/includes/topbar.pug | 1 + 2 files changed, 6 insertions(+) diff --git a/static/css/styles.css b/static/css/styles.css index 59021dd..f27b254 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -82,6 +82,11 @@ nav .nav-item.left a { font-size: 15px; font-weight: initial; } +nav .nav-item.left img { + width: 20px; + vertical-align: bottom; + margin: 0px 7px 0px 0px; +} nav .nav-item.left a:hover nav .nav-item.left a:focus { color: white; diff --git a/views/includes/topbar.pug b/views/includes/topbar.pug index 38f2ca9..3650055 100644 --- a/views/includes/topbar.pug +++ b/views/includes/topbar.pug @@ -1,6 +1,7 @@ div#topbar nav .nav-item.left + img(src="/favicon.png", alt="") a(href="/") teddit .settings .icon-container