add bookmark button to threads in topic view

app/templates/topics/topic.html

@@ -39,13 +39,19 @@
         {% endif %}
       </div>
       <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 %}
           ({{ 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>

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;

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;

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;

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;