add bookmark button to threads in topic view

2025-11-21 05:39:13 +03:00
parent f8101e57c1
commit 729b7300e6
5 changed files with 141 additions and 3 deletions
--- a/app/templates/topics/topic.html
+++ b/app/templates/topics/topic.html
@@ -39,13 +39,19 @@
        {% endif %}
      </div>
      <div class="thread-info-container">
-        <span>
-          <span class="thread-title"><a href="{{ url_for("threads.thread", slug=thread['slug']) }}">{{thread['title']}}</a></span>
+        <span class="thread-info-header">
+          <span class="thread-title"><a href="{{ url_for("threads.thread", slug=thread['slug']) }}">{{thread['title']}}</a>
          {% if thread['id'] in subscriptions %}
          ({{ subscriptions[thread['id']] }} unread)
          {% endif %}
+          </span>
          &bullet;
-          Started by <a href="{{ url_for("users.page", username=thread['started_by']) }}">{{ thread['started_by'] }}</a> on {{ timestamp(thread['created_at'])}}
+          <span>
+          Started by <a href="{{ url_for("users.page", username=thread['started_by']) }}">{{ thread['started_by'] }}</a> on {{ timestamp(thread['created_at']) }}
+          </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>
          Latest post by <a href="{{ url_for("users.page", username=thread['latest_post_username']) }}">{{ thread['latest_post_username'] }}</a>
--- a/data/static/css/style.css
+++ b/data/static/css/style.css
@@ -689,6 +689,10 @@ button.reduced, input[type=submit].reduced, .linkbutton.reduced {
  margin: 0;
  padding: 5px;
 }
+button.icon, input[type=submit].icon, .linkbutton.icon {
+  padding-left: 16px;
+  flex-direction: row;
+}
 button.critical, input[type=submit].critical, .linkbutton.critical {
  background-color: red;
  color: white !important;
@@ -706,6 +710,10 @@ button.critical.reduced, input[type=submit].critical.reduced, .linkbutton.critic
  margin: 0;
  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 {
  background-color: #fbfb8d;
  color: black !important;
@@ -723,6 +731,10 @@ button.warn.reduced, input[type=submit].warn.reduced, .linkbutton.warn.reduced {
  margin: 0;
  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 {
  background-color: rgb(177, 206, 204.5);
@@ -741,6 +753,10 @@ input[type=file]::file-selector-button.reduced {
  margin: 0;
  padding: 5px;
 }
+input[type=file]::file-selector-button.icon {
+  padding-left: 16px;
+  flex-direction: row;
+}
 input[type=file]::file-selector-button {
  margin: 10px;
 }
@@ -766,6 +782,10 @@ p {
  margin: 0;
  padding: 5px;
 }
+.pagebutton.icon {
+  padding-left: 16px;
+  flex-direction: row;
+}
 .pagebutton {
  padding: 5px 5px;
  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);
 }

+.thread-info-header {
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
+}
+
+.thread-info-bookmark-button {
+  margin-left: auto;
+}
+
 .thread-info-post-preview {
  overflow: hidden;
  text-overflow: ellipsis;
@@ -1075,6 +1105,10 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
  margin: 0;
  padding: 5px;
 }
+.tab-button.icon {
+  padding-left: 16px;
+  flex-direction: row;
+}
 .tab-button {
  border-bottom: none;
  border-bottom-left-radius: 0;
@@ -1225,6 +1259,10 @@ footer {
  margin: 0;
  padding: 5px;
 }
+.reaction-button.active.icon {
+  padding-left: 16px;
+  flex-direction: row;
+}

 .reaction-popover {
  position: relative;
--- a/data/static/css/theme-otomotone.css
+++ b/data/static/css/theme-otomotone.css
@@ -689,6 +689,10 @@ button.reduced, input[type=submit].reduced, .linkbutton.reduced {
  margin: 0;
  padding: 5px;
 }
+button.icon, input[type=submit].icon, .linkbutton.icon {
+  padding-left: 16px;
+  flex-direction: row;
+}
 button.critical, input[type=submit].critical, .linkbutton.critical {
  background-color: #d53232;
  color: #e6e6e6 !important;
@@ -706,6 +710,10 @@ button.critical.reduced, input[type=submit].critical.reduced, .linkbutton.critic
  margin: 0;
  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 {
  background-color: #eaea6a;
  color: black !important;
@@ -723,6 +731,10 @@ button.warn.reduced, input[type=submit].warn.reduced, .linkbutton.warn.reduced {
  margin: 0;
  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 {
  background-color: #3c283c;
@@ -741,6 +753,10 @@ input[type=file]::file-selector-button.reduced {
  margin: 0;
  padding: 5px;
 }
+input[type=file]::file-selector-button.icon {
+  padding-left: 16px;
+  flex-direction: row;
+}
 input[type=file]::file-selector-button {
  margin: 10px;
 }
@@ -766,6 +782,10 @@ p {
  margin: 0;
  padding: 5px;
 }
+.pagebutton.icon {
+  padding-left: 16px;
+  flex-direction: row;
+}
 .pagebutton {
  padding: 5px 5px;
  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);
 }

+.thread-info-header {
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
+}
+
+.thread-info-bookmark-button {
+  margin-left: auto;
+}
+
 .thread-info-post-preview {
  overflow: hidden;
  text-overflow: ellipsis;
@@ -1075,6 +1105,10 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
  margin: 0;
  padding: 5px;
 }
+.tab-button.icon {
+  padding-left: 16px;
+  flex-direction: row;
+}
 .tab-button {
  border-bottom: none;
  border-bottom-left-radius: 0;
@@ -1225,6 +1259,10 @@ footer {
  margin: 0;
  padding: 5px;
 }
+.reaction-button.active.icon {
+  padding-left: 16px;
+  flex-direction: row;
+}

 .reaction-popover {
  position: relative;
--- a/data/static/css/theme-peachy.css
+++ b/data/static/css/theme-peachy.css
@@ -689,6 +689,10 @@ button.reduced, input[type=submit].reduced, .linkbutton.reduced {
  margin: 0;
  padding: 6px;
 }
+button.icon, input[type=submit].icon, .linkbutton.icon {
+  padding-left: 8px;
+  flex-direction: row;
+}
 button.critical, input[type=submit].critical, .linkbutton.critical {
  background-color: #f73030;
  color: white !important;
@@ -706,6 +710,10 @@ button.critical.reduced, input[type=submit].critical.reduced, .linkbutton.critic
  margin: 0;
  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 {
  background-color: #fbfb8d;
  color: black !important;
@@ -723,6 +731,10 @@ button.warn.reduced, input[type=submit].warn.reduced, .linkbutton.warn.reduced {
  margin: 0;
  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 {
  background-color: #f27a5a;
@@ -741,6 +753,10 @@ input[type=file]::file-selector-button.reduced {
  margin: 0;
  padding: 6px;
 }
+input[type=file]::file-selector-button.icon {
+  padding-left: 8px;
+  flex-direction: row;
+}
 input[type=file]::file-selector-button {
  margin: 6px;
 }
@@ -766,6 +782,10 @@ p {
  margin: 0;
  padding: 6px;
 }
+.pagebutton.icon {
+  padding-left: 8px;
+  flex-direction: row;
+}
 .pagebutton {
  padding: 3px 3px;
  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);
 }

+.thread-info-header {
+  display: flex;
+  align-items: baseline;
+  gap: 3px;
+}
+
+.thread-info-bookmark-button {
+  margin-left: auto;
+}
+
 .thread-info-post-preview {
  overflow: hidden;
  text-overflow: ellipsis;
@@ -1075,6 +1105,10 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
  margin: 0;
  padding: 6px;
 }
+.tab-button.icon {
+  padding-left: 8px;
+  flex-direction: row;
+}
 .tab-button {
  border-bottom: none;
  border-bottom-left-radius: 0;
@@ -1225,6 +1259,10 @@ footer {
  margin: 0;
  padding: 6px;
 }
+.reaction-button.active.icon {
+  padding-left: 8px;
+  flex-direction: row;
+}

 .reaction-popover {
  position: relative;
--- a/sass/_default.scss
+++ b/sass/_default.scss
@@ -104,6 +104,7 @@ $button_margin: $MEDIUM_PADDING $ZERO_PADDING !default;

 $reduced_button_margin: $ZERO_PADDING !default;
 $reduced_button_padding: $SMALL_PADDING !default;
+$icon_button_padding_left: $BIG_PADDING - 4px !default;
@mixin button($color, $font_color) {
  @extend %button-base;
  background-color: $color;
@@ -125,6 +126,12 @@ $reduced_button_padding: $SMALL_PADDING !default;
    margin: $reduced_button_margin;
    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;
@@ -786,6 +793,17 @@ $thread_info_mask_image: $user_page_post_preview_mask_image !default;
  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 {
  overflow: hidden;