From 192d4e739e93e1b2f7b8a0ed3b8199cf8dc21d9e Mon Sep 17 00:00:00 2001 From: John Stephani Date: Sun, 18 Jan 2026 22:54:05 -0600 Subject: [PATCH] Don't limit post height, add left/right hand toggle to header which controls which side hide appears on --- app/app.py | 16 ++- app/static/css/style.css | 298 +++++++++++++++++++++++++++++++++++++++ app/templates/admin.html | 163 +-------------------- app/templates/index.html | 295 +++++--------------------------------- 4 files changed, 350 insertions(+), 422 deletions(-) create mode 100644 app/static/css/style.css diff --git a/app/app.py b/app/app.py index 5fdcad3..6e1cfd4 100755 --- a/app/app.py +++ b/app/app.py @@ -117,6 +117,7 @@ def front_page(): connection = sqlite3.connect(config.db_file) cursor = connection.cursor() sidebar_links = get_sidebar_links(cursor) + right_handed = get_config('side')!='left' sort = get_config("sort") or "created_utc asc" select = f""" SELECT @@ -138,7 +139,8 @@ def front_page(): title=title, posts=posts, sidebar_links=sidebar_links, - sort=sort.split()) + sort=sort.split(), + right_handed=right_handed) @app.route('/r/other') def other_page(): @@ -146,6 +148,7 @@ def other_page(): connection = sqlite3.connect(config.db_file) cursor = connection.cursor() sidebar_links = get_sidebar_links(cursor) + right_handed = get_config('side')!='left' sort = get_config("sort") or "created_utc asc" select = f""" SELECT @@ -187,7 +190,8 @@ def other_page(): title=title, posts=posts, sidebar_links=sidebar_links, - sort=sort.split()) + sort=sort.split(), + right_handed=right_handed) @app.route('/r/saved') def get_saved(): @@ -195,6 +199,7 @@ def get_saved(): connection = sqlite3.connect(config.db_file) cursor = connection.cursor() sidebar_links = get_sidebar_links(cursor) + right_handed = get_config('side')!='left' sort = get_config("sort") or "created_utc desc" select = f""" SELECT @@ -215,7 +220,8 @@ def get_saved(): posts=posts, sidebar_links=sidebar_links, saved=True, - sort=sort.split()) + sort=sort.split(), + right_handed=right_handed) @app.route('/r/') @@ -224,6 +230,7 @@ def get_subreddit(subreddit): connection = sqlite3.connect(config.db_file) cursor = connection.cursor() sidebar_links = get_sidebar_links(cursor) + right_handed = get_config('side')!='left' sort = get_config("sort") or "created_utc asc" select = f""" SELECT @@ -246,7 +253,8 @@ def get_subreddit(subreddit): title=title, posts=posts, sidebar_links=sidebar_links, - sort=sort.split()) + sort=sort.split(), + right_handed=right_handed) @app.route('/file/') def serve_file(filename): diff --git a/app/static/css/style.css b/app/static/css/style.css new file mode 100644 index 0000000..8e622d2 --- /dev/null +++ b/app/static/css/style.css @@ -0,0 +1,298 @@ +:root { + --dark: #2c2c2c; + --darker: #171717; + --light: #bfbfbf; + --confirm: #970000; + --saved: #9f9400; + --accent: #784ab4; +} + +html { + height: 100%; +} + +body { + background-color: var(--darker); + color: var(--light); + min-height: 100%; + margin: 0; +} + +img, +video { + max-width: 100%; + width: auto; + height: auto; + display: block; +} + +svg { + height: 1.5em; + width: 1.5em; +} + +path { + fill: currentColor; +} + +.sidebar { + display: flex; + flex-wrap: nowrap; + position: sticky; + top: 0; + left: 0; + background-color: var(--dark); + outline: 2px solid var(--light); + z-index: 1000; +} + +.sidebar a { + display: block; + color: var(--light); + text-decoration: none; + white-space: nowrap; + margin: 5px; + padding: 5px; +} + +.sidebar a:hover { + background-color: var(--darker); + color: var(--light); +} + +.content { + display: flex; + flex-grow: 1; + flex-direction: column; +} + +.header-container { + display: flex; + justify-content: space-between; + align-items: center; + margin: 0px 10px; +} + +.media-div, .text-content, .button-wrapper { + padding: 0; + margin: 15px 0 0 0; +} + +div.post { + background-color: var(--dark); + border: 2px solid var(--light); + border-radius: 15px; + padding: 10px; + margin-bottom: 20px; +} + +div.post h3, h5 { + margin: 0; +} + +/* desktop */ +@media (min-aspect-ratio: 1) { + div.post, .header-container { + width: 70vw; + } + + .container { + display: flex; + flex-direction: row; + } + + .sidebar { + width: fit-content; + height: 100vh; + flex-direction: column; + overflow-y: auto; + padding: 5px; + margin-right: 20px; + } +} + +/* phone */ +@media (max-aspect-ratio: 1) { + div.post, .header-container { + width: calc(100vw - 40px); + } + + .container { + display: flex; + flex-direction: column; + } + + .sidebar { + width: 100vw; + height: 50px; + flex-direction: row; + overflow-x: auto; + align-items: center; + padding: 5px, 0px; + } + + .content { + align-items: center; + } + + button span { + display: none; + } +} + +a.no-style-link { + color: inherit; + text-decoration: inherit; + cursor: pointer; +} + +.invert { + filter: invert(1); + transition: filter 0.3s; +} + +.button-wrapper { + display: flex; + width: 100%; + gap: 10px; +} + +.button-wrapper.flipped { + flex-direction: row-reverse; +} + +.button-wrapper.gallery { + gap: 0; +} + +button { + flex: 1; + padding: 10px; + cursor: pointer; + background-color: var(--darker); + color: var(--light); + border: 2px solid var(--light); + border-radius: 10px; + font-size: 1.25rem; + font-weight: bold; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 5px; +} + +.controls { + margin-top: -70px; + opacity: 0.5; +} + +.controls button { + flex: 0 0 3em; + height: 3em; + margin: 5px; +} + +.controls input { + flex: 1; + min-width: 0px; +} + +button.confirm { + background-color: var(--confirm) +} + +button.saved { + background-color: var(--saved) +} + +button.gallery { + padding: 5px; + background-color: var(--darker); + border-radius: 0; + border: none; + cursor: none; +} + +button.gallery.selected { + background-color: var(--light); +} + +.text-content { + overflow: hidden; + transition: max-height 0.3s ease-out; + max-height: 20vh; + position: relative; +} + +.text-content::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 30px; + background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--dark)); +} + +.text-content.expanded { + max-height: 1000vh; +} + +.text-content.expanded::after { + display: none; +} + + /* The switch - the box around the slider */ +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 26px; +} + +/* Hide default HTML checkbox */ +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +/* The slider */ +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--accent); + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 22px; + width: 22px; + left: 2px; + bottom: 2px; + background-color: var(--light); + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .slider:before { + -webkit-transform: translateX(34px); + -ms-transform: translateX(34px); + transform: translateX(34px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 26px; +} + +.slider.round:before { + border-radius: 50%; +} \ No newline at end of file diff --git a/app/templates/admin.html b/app/templates/admin.html index 5521a0e..af89cb9 100755 --- a/app/templates/admin.html +++ b/app/templates/admin.html @@ -4,168 +4,7 @@ Reddit, but better - +
diff --git a/app/templates/index.html b/app/templates/index.html index ca7f5fb..fa2bf1a 100755 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -27,247 +27,7 @@ Reddit, but better - + @@ -280,6 +40,12 @@

{{ title }}

+

+ +

{{ sort[0] }} {{ sort[1] }} @@ -315,20 +81,7 @@ {{ post.body|safe }}

{% endif %} - - - + {% if not saved %} {% endif %} + +
{% endfor %} @@ -604,7 +370,24 @@ setTimeout(() => {window.location.href = window.location.href;}, 1000); }); } + + function toggleSide(checkbox) { + newSide = "left"; + if (checkbox.checked) { + newSide = "right"; + } + params = { + key: "side", + value: newSide + }; + params = new URLSearchParams(params).toString() + fetch("/config?" + params, { + method: 'POST' + }).then(() => { + setTimeout(() => {window.location.href = window.location.href;}, 1000); + }); + } - \ No newline at end of file +