yagich/pyrom
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add bookmark button to threads in topic view

Browse Source
This commit is contained in:
Lera Elvoé
2025-11-21 05:39:13 +03:00
parent f8101e57c1
commit 729b7300e6
5 changed files with 141 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/templates/topics/topic.html
View File

@@ -39,14 +39,20 @@
{% endif %} {% endif %}
</div> </div>
<div class="thread-info-container"> <div class="thread-info-container">
<span> <span class="thread-info-header">
<span class="thread-title"><a href="{{ url_for("threads.thread", slug=thread['slug']) }}">{{thread['title']}}</a></span> <span class="thread-title"><a href="{{ url_for("threads.thread", slug=thread['slug']) }}">{{thread['title']}}</a>
{% if thread['id'] in subscriptions %} {% if thread['id'] in subscriptions %}
({{ subscriptions[thread['id']] }} unread) ({{ subscriptions[thread['id']] }} unread)
{% endif %} {% endif %}
</span>
&bullet; &bullet;
<span>
Started by <a href="{{ url_for("users.page", username=thread['started_by']) }}">{{ thread['started_by'] }}</a> on {{ timestamp(thread['created_at']) }} Started by <a href="{{ url_for("users.page", username=thread['started_by']) }}">{{ thread['started_by'] }}</a> on {{ timestamp(thread['created_at']) }}
</span> </span>
{% if active_user and not active_user.is_guest() -%}
<button class="thread-info-bookmark-button contain-svg icon" type="button">{{ icn_bookmark() }}Bookmark</button>
{%- endif %}
</span>
<span> <span>
Latest post by <a href="{{ url_for("users.page", username=thread['latest_post_username']) }}">{{ thread['latest_post_username'] }}</a> Latest post by <a href="{{ url_for("users.page", username=thread['latest_post_username']) }}">{{ thread['latest_post_username'] }}</a>
on <a href="{{ url_for("threads.thread", slug=thread['slug'], after=thread['latest_post_id']) }}">on {{ timestamp(thread['latest_post_created_at']) }}</a>: on <a href="{{ url_for("threads.thread", slug=thread['slug'], after=thread['latest_post_id']) }}">on {{ timestamp(thread['latest_post_created_at']) }}</a>:

38
data/static/css/style.css
View File

@@ -689,6 +689,10 @@ button.reduced, input[type=submit].reduced, .linkbutton.reduced {
margin: 0; margin: 0;
padding: 5px; padding: 5px;
} }
button.icon, input[type=submit].icon, .linkbutton.icon {
padding-left: 16px;
flex-direction: row;
}
button.critical, input[type=submit].critical, .linkbutton.critical { button.critical, input[type=submit].critical, .linkbutton.critical {
background-color: red; background-color: red;
color: white !important; color: white !important;
@@ -706,6 +710,10 @@ button.critical.reduced, input[type=submit].critical.reduced, .linkbutton.critic
margin: 0; margin: 0;
padding: 5px; padding: 5px;
} }
button.critical.icon, input[type=submit].critical.icon, .linkbutton.critical.icon {
padding-left: 16px;
flex-direction: row;
}
button.warn, input[type=submit].warn, .linkbutton.warn { button.warn, input[type=submit].warn, .linkbutton.warn {
background-color: #fbfb8d; background-color: #fbfb8d;
color: black !important; color: black !important;
@@ -723,6 +731,10 @@ button.warn.reduced, input[type=submit].warn.reduced, .linkbutton.warn.reduced {
margin: 0; margin: 0;
padding: 5px; padding: 5px;
} }
button.warn.icon, input[type=submit].warn.icon, .linkbutton.warn.icon {
padding-left: 16px;
flex-direction: row;
}
input[type=file]::file-selector-button { input[type=file]::file-selector-button {
background-color: rgb(177, 206, 204.5); background-color: rgb(177, 206, 204.5);
@@ -741,6 +753,10 @@ input[type=file]::file-selector-button.reduced {
margin: 0; margin: 0;
padding: 5px; padding: 5px;
} }
input[type=file]::file-selector-button.icon {
padding-left: 16px;
flex-direction: row;
}
input[type=file]::file-selector-button { input[type=file]::file-selector-button {
margin: 10px; margin: 10px;
} }
@@ -766,6 +782,10 @@ p {
margin: 0; margin: 0;
padding: 5px; padding: 5px;
} }
.pagebutton.icon {
padding-left: 16px;
flex-direction: row;
}
.pagebutton { .pagebutton {
padding: 5px 5px; padding: 5px 5px;
margin: 0; margin: 0;
@@ -910,6 +930,16 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent);
} }
.thread-info-header {
display: flex;
align-items: baseline;
gap: 5px;
}
.thread-info-bookmark-button {
margin-left: auto;
}
.thread-info-post-preview { .thread-info-post-preview {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -1075,6 +1105,10 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
margin: 0; margin: 0;
padding: 5px; padding: 5px;
} }
.tab-button.icon {
padding-left: 16px;
flex-direction: row;
}
.tab-button { .tab-button {
border-bottom: none; border-bottom: none;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
@@ -1225,6 +1259,10 @@ footer {
margin: 0; margin: 0;
padding: 5px; padding: 5px;
} }
.reaction-button.active.icon {
padding-left: 16px;
flex-direction: row;
}
.reaction-popover { .reaction-popover {
position: relative; position: relative;

38
data/static/css/theme-otomotone.css
View File

@@ -689,6 +689,10 @@ button.reduced, input[type=submit].reduced, .linkbutton.reduced {
margin: 0; margin: 0;
padding: 5px; padding: 5px;
} }
button.icon, input[type=submit].icon, .linkbutton.icon {
padding-left: 16px;
flex-direction: row;
}
button.critical, input[type=submit].critical, .linkbutton.critical { button.critical, input[type=submit].critical, .linkbutton.critical {
background-color: #d53232; background-color: #d53232;
color: #e6e6e6 !important; color: #e6e6e6 !important;
@@ -706,6 +710,10 @@ button.critical.reduced, input[type=submit].critical.reduced, .linkbutton.critic
margin: 0; margin: 0;
padding: 5px; padding: 5px;
} }
button.critical.icon, input[type=submit].critical.icon, .linkbutton.critical.icon {
padding-left: 16px;
flex-direction: row;
}
button.warn, input[type=submit].warn, .linkbutton.warn { button.warn, input[type=submit].warn, .linkbutton.warn {
background-color: #eaea6a; background-color: #eaea6a;
color: black !important; color: black !important;
@@ -723,6 +731,10 @@ button.warn.reduced, input[type=submit].warn.reduced, .linkbutton.warn.reduced {
margin: 0; margin: 0;
padding: 5px; padding: 5px;
} }
button.warn.icon, input[type=submit].warn.icon, .linkbutton.warn.icon {
padding-left: 16px;
flex-direction: row;
}
input[type=file]::file-selector-button { input[type=file]::file-selector-button {
background-color: #3c283c; background-color: #3c283c;
@@ -741,6 +753,10 @@ input[type=file]::file-selector-button.reduced {
margin: 0; margin: 0;
padding: 5px; padding: 5px;
} }
input[type=file]::file-selector-button.icon {
padding-left: 16px;
flex-direction: row;
}
input[type=file]::file-selector-button { input[type=file]::file-selector-button {
margin: 10px; margin: 10px;
} }
@@ -766,6 +782,10 @@ p {
margin: 0; margin: 0;
padding: 5px; padding: 5px;
} }
.pagebutton.icon {
padding-left: 16px;
flex-direction: row;
}
.pagebutton { .pagebutton {
padding: 5px 5px; padding: 5px 5px;
margin: 0; margin: 0;
@@ -910,6 +930,16 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent);
} }
.thread-info-header {
display: flex;
align-items: baseline;
gap: 5px;
}
.thread-info-bookmark-button {
margin-left: auto;
}
.thread-info-post-preview { .thread-info-post-preview {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -1075,6 +1105,10 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
margin: 0; margin: 0;
padding: 5px; padding: 5px;
} }
.tab-button.icon {
padding-left: 16px;
flex-direction: row;
}
.tab-button { .tab-button {
border-bottom: none; border-bottom: none;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
@@ -1225,6 +1259,10 @@ footer {
margin: 0; margin: 0;
padding: 5px; padding: 5px;
} }
.reaction-button.active.icon {
padding-left: 16px;
flex-direction: row;
}
.reaction-popover { .reaction-popover {
position: relative; position: relative;

38
data/static/css/theme-peachy.css
View File

@@ -689,6 +689,10 @@ button.reduced, input[type=submit].reduced, .linkbutton.reduced {
margin: 0; margin: 0;
padding: 6px; padding: 6px;
} }
button.icon, input[type=submit].icon, .linkbutton.icon {
padding-left: 8px;
flex-direction: row;
}
button.critical, input[type=submit].critical, .linkbutton.critical { button.critical, input[type=submit].critical, .linkbutton.critical {
background-color: #f73030; background-color: #f73030;
color: white !important; color: white !important;
@@ -706,6 +710,10 @@ button.critical.reduced, input[type=submit].critical.reduced, .linkbutton.critic
margin: 0; margin: 0;
padding: 6px; padding: 6px;
} }
button.critical.icon, input[type=submit].critical.icon, .linkbutton.critical.icon {
padding-left: 8px;
flex-direction: row;
}
button.warn, input[type=submit].warn, .linkbutton.warn { button.warn, input[type=submit].warn, .linkbutton.warn {
background-color: #fbfb8d; background-color: #fbfb8d;
color: black !important; color: black !important;
@@ -723,6 +731,10 @@ button.warn.reduced, input[type=submit].warn.reduced, .linkbutton.warn.reduced {
margin: 0; margin: 0;
padding: 6px; padding: 6px;
} }
button.warn.icon, input[type=submit].warn.icon, .linkbutton.warn.icon {
padding-left: 8px;
flex-direction: row;
}
input[type=file]::file-selector-button { input[type=file]::file-selector-button {
background-color: #f27a5a; background-color: #f27a5a;
@@ -741,6 +753,10 @@ input[type=file]::file-selector-button.reduced {
margin: 0; margin: 0;
padding: 6px; padding: 6px;
} }
input[type=file]::file-selector-button.icon {
padding-left: 8px;
flex-direction: row;
}
input[type=file]::file-selector-button { input[type=file]::file-selector-button {
margin: 6px; margin: 6px;
} }
@@ -766,6 +782,10 @@ p {
margin: 0; margin: 0;
padding: 6px; padding: 6px;
} }
.pagebutton.icon {
padding-left: 8px;
flex-direction: row;
}
.pagebutton { .pagebutton {
padding: 3px 3px; padding: 3px 3px;
margin: 0; margin: 0;
@@ -910,6 +930,16 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent);
} }
.thread-info-header {
display: flex;
align-items: baseline;
gap: 3px;
}
.thread-info-bookmark-button {
margin-left: auto;
}
.thread-info-post-preview { .thread-info-post-preview {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -1075,6 +1105,10 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
margin: 0; margin: 0;
padding: 6px; padding: 6px;
} }
.tab-button.icon {
padding-left: 8px;
flex-direction: row;
}
.tab-button { .tab-button {
border-bottom: none; border-bottom: none;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
@@ -1225,6 +1259,10 @@ footer {
margin: 0; margin: 0;
padding: 6px; padding: 6px;
} }
.reaction-button.active.icon {
padding-left: 8px;
flex-direction: row;
}
.reaction-popover { .reaction-popover {
position: relative; position: relative;

18
sass/_default.scss
View File

@@ -104,6 +104,7 @@ $button_margin: $MEDIUM_PADDING $ZERO_PADDING !default;
$reduced_button_margin: $ZERO_PADDING !default; $reduced_button_margin: $ZERO_PADDING !default;
$reduced_button_padding: $SMALL_PADDING !default; $reduced_button_padding: $SMALL_PADDING !default;
$icon_button_padding_left: $BIG_PADDING - 4px !default;
@mixin button($color, $font_color) { @mixin button($color, $font_color) {
@extend %button-base; @extend %button-base;
background-color: $color; background-color: $color;
@@ -125,6 +126,12 @@ $reduced_button_padding: $SMALL_PADDING !default;
margin: $reduced_button_margin; margin: $reduced_button_margin;
padding: $reduced_button_padding; padding: $reduced_button_padding;
} }
// this is meant to be used with the contain-svg class, hence the flex-direction here
&.icon {
padding-left: $icon_button_padding_left;
flex-direction: row;
}
} }
$navbar_padding: $MEDIUM_PADDING !default; $navbar_padding: $MEDIUM_PADDING !default;
@@ -786,6 +793,17 @@ $thread_info_mask_image: $user_page_post_preview_mask_image !default;
mask-image: $thread_info_mask_image; mask-image: $thread_info_mask_image;
} }
$thread_info_header_gap: $SMALL_PADDING !default;
.thread-info-header {
display: flex;
align-items: baseline;
gap: $thread_info_header_gap;
}
.thread-info-bookmark-button {
margin-left: auto;
}
$thread_info_post_preview_margin_right: $post_inner_padding_right !default; $thread_info_post_preview_margin_right: $post_inner_padding_right !default;
.thread-info-post-preview { .thread-info-post-preview {
overflow: hidden; overflow: hidden;