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/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;