iridium/redsunlib
iridium/redsunlib
2
2
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases 4 Wiki Activity

Merge branch 'ugly-layouts'

Browse Source 
sure why not :)
- last words 2024
This commit is contained in:
ayaka 2024-07-07 19:34:27 +12:00
commit eedbe06af6
5 changed files with 92 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -322,7 +322,7 @@ Assign a default value for each user-modifiable setting by passing environment v
| `THEME` | `["system", "light", "dark", "black", "dracula", "nord", "laserwave", "violet", "gold", "rosebox", "gruvboxdark", "gruvboxlight", "tokyoNight", "icebergDark"]` | `system` | | `THEME` | `["system", "light", "dark", "black", "dracula", "nord", "laserwave", "violet", "gold", "rosebox", "gruvboxdark", "gruvboxlight", "tokyoNight", "icebergDark"]` | `system` |
| `MASCOT` | `["BoymoderBlahaj", "redsunlib" ... Add more at ./static/mascots] ` | _(none)_ | | `MASCOT` | `["BoymoderBlahaj", "redsunlib" ... Add more at ./static/mascots] ` | _(none)_ |
| `FRONT_PAGE` | `["default", "popular", "all"]` | `default` | | `FRONT_PAGE` | `["default", "popular", "all"]` | `default` |
| `LAYOUT` | `["card", "clean", "compact"]` | `card` | | `LAYOUT` | `["card", "clean", "compact", "old", "waterfall"]` | `card` |
| `WIDE` | `["on", "off"]` | `off` | | `WIDE` | `["on", "off"]` | `off` |
| `POST_SORT` | `["hot", "new", "top", "rising", "controversial"]` | `hot` | | `POST_SORT` | `["hot", "new", "top", "rising", "controversial"]` | `hot` |
| `COMMENT_SORT` | `["confidence", "top", "new", "controversial", "old"]` | `confidence` | | `COMMENT_SORT` | `["confidence", "top", "new", "controversial", "old"]` | `confidence` |

85
static/style.css
View File

@ -1355,6 +1355,91 @@ summary.comment_data {
/* Layouts */ /* Layouts */
.waterfall #posts > .post {
break-inside: avoid-column;
}
.waterfall #posts {
column-width: 500px;
column-gap: 10px;
}
.old .post {
border-radius: 5px;
background: var(--post);
box-shadow: var(--shadow);
display: grid;
transition: 0.2s background;
grid-template: "post_score post_thumbnail post_header" auto
"post_score post_thumbnail post_title" 1fr
"post_score post_thumbnail post_media" auto
"post_score post_thumbnail post_body" auto
"post_score post_thumbnail post_poll" auto
"post_score post_thumbnail post_notification" auto
"post_score post_thumbnail post_footer" auto
/ 4.5em minmax(0, 140px) fit-content(min(90%, 90%))
}
/* .old .post_thumbnail {
margin-left: 20px;
} */
.old .post_score {
background-color: #ff93da08;
border-radius: 8px;
align-self: center;
width: 53px;
padding-left: 5px; /* REMINDER:pls compact testing only */
border-top-width: 0px;
border-top-style: solid;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
margin-left: 5px;
margin-right: 5px;
}
.old .post_media_content {
max-width: calc(65% - 40px);
}
.old .highlighted > .post_score {
background-color: unset;
align-self: unset;
margin-top: 20px;
margin-left: 20px;
}
.old .post_score .label {
display: block;
text-align: center;
text-anchor: middle;
color: gray;
}
.old .post_preview {
max-height: 72px;
}
.old #column_one {
width: 100%;
max-width: 100%;
}
.old #commentQueryForms {
display: flex;
justify-content: center;
justify-self: start;
}
.old .commentQuery {
margin-left: 20px;
}
.old main {
max-width: 100% !important;
}
.compact .post:not(.highlighted) { .compact .post:not(.highlighted) {
border-radius: 0; border-radius: 0;
margin: 0; margin: 0;

2
templates/base.html
View File

@ -28,7 +28,7 @@
</head> </head>
<body class=" <body class="
{% if prefs.layout != "" %}{{ prefs.layout }}{% endif %} {% if prefs.layout != "" %}{{ prefs.layout }}{% endif %}
{% if prefs.wide == "on" %} wide{% endif %} {% if prefs.wide == "on" || prefs.layout == "old" || prefs.layout == "waterfall" %} wide{% endif %}
{% if prefs.theme != "system" %} {{ prefs.theme }}{% endif %} {% if prefs.theme != "system" %} {{ prefs.theme }}{% endif %}
{% if prefs.fixed_navbar == "on" %} fixed_navbar{% endif %}"> {% if prefs.fixed_navbar == "on" %} fixed_navbar{% endif %}">
<!-- NAVIGATION BAR --> <!-- NAVIGATION BAR -->

5
templates/settings.html
View File

@ -37,13 +37,14 @@
<div class="prefs-group"> <div class="prefs-group">
<label for="layout">Layout:</label> <label for="layout">Layout:</label>
<select name="layout" id="layout"> <select name="layout" id="layout">
{% call utils::options(prefs.layout, ["card", "clean", "compact"], "card") %} {% call utils::options(prefs.layout, ["card", "clean", "compact", "old", "waterfall"], "card") %}
</select> </select>
</div> </div>
<div class="prefs-group"> <div class="prefs-group">
<label for="wide">Wide UI:</label> <label for="wide">Wide UI:</label>
<input type="hidden" value="off" name="wide"> <input type="hidden" value="off" name="wide">
<input type="checkbox" name="wide" id="wide" {% if prefs.wide == "on" %}checked{% endif %}> <input type="checkbox" name="wide" id="wide" {% if prefs.layout == "old" || prefs.layout == "waterfall" %}disabled{% endif %} {% if prefs.wide == "on" || prefs.layout == "old" || prefs.layout == "waterfall" %}checked{% endif %}>
{% if prefs.layout == "old" || prefs.layout == "waterfall" %}<span>ⓘ Wide UI is required for this layout</span>{% endif %}
</div> </div>
</fieldset> </fieldset>
<fieldset> <fieldset>

4
templates/utils.html
View File

@ -246,7 +246,7 @@
<a href="{{ post.permalink }}">{{ post.title }}</a>{% if post.flags.nsfw %} <small class="nsfw">NSFW</small>{% endif %}{% if post.flags.spoiler %} <small class="spoiler">Spoiler</small>{% endif %} <a href="{{ post.permalink }}">{{ post.title }}</a>{% if post.flags.nsfw %} <small class="nsfw">NSFW</small>{% endif %}{% if post.flags.spoiler %} <small class="spoiler">Spoiler</small>{% endif %}
</h2> </h2>
<!-- POST MEDIA/THUMBNAIL --> <!-- POST MEDIA/THUMBNAIL -->
{% if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "image" %} {% if (prefs.layout.is_empty() || prefs.layout == "card" || prefs.layout == "waterfall") && post.post_type == "image" %}
<div class="post_media_content"> <div class="post_media_content">
<a href="{{ post.media.url }}" class="post_media_image {% if post.media.height < post.media.width*2 %}short{% endif %}" > <a href="{{ post.media.url }}" class="post_media_image {% if post.media.height < post.media.width*2 %}short{% endif %}" >
{% if post.media.height == 0 || post.media.width == 0 %} {% if post.media.height == 0 || post.media.width == 0 %}
@ -266,7 +266,7 @@
{% endif %} {% endif %}
</a> </a>
</div> </div>
{% else if (prefs.layout.is_empty() || prefs.layout == "card") && (post.post_type == "gif" || post.post_type == "video") %} {% else if (prefs.layout.is_empty() || prefs.layout == "card" || prefs.layout == "waterfall") && (post.post_type == "gif" || post.post_type == "video") %}
{% if prefs.use_hls == "on" && !post.media.alt_url.is_empty() || prefs.ffmpeg_video_downloads == "on" && !post.media.alt_url.is_empty() %} {% if prefs.use_hls == "on" && !post.media.alt_url.is_empty() || prefs.ffmpeg_video_downloads == "on" && !post.media.alt_url.is_empty() %}
<div class="post_media_content"> <div class="post_media_content">
<video class="post_media_video short {%if post_should_be_blurred %}post_nsfw_blur{% endif %} {% if prefs.autoplay_videos == "on" %}hls_autoplay{% endif %}" {% if post.media.width > 0 && post.media.height > 0 %}width="{{ post.media.width }}" height="{{ post.media.height }}"{% endif %} poster="{{ post.media.poster }}" controls preload="none"> <video class="post_media_video short {%if post_should_be_blurred %}post_nsfw_blur{% endif %} {% if prefs.autoplay_videos == "on" %}hls_autoplay{% endif %}" {% if post.media.width > 0 && post.media.height > 0 %}width="{{ post.media.width }}" height="{{ post.media.height }}"{% endif %} poster="{{ post.media.poster }}" controls preload="none">