Merge remote-tracking branch 'origin/proxy' into anonymous-user

* origin/proxy:
  feat(sun-icon): add sun icon that toggles with dark mode
  fix(bug-report): remove bug report button
  feat(dark-mode): implement dark mode and save settings via local prefs
  style(user-posts): Prevent user posts from being cutoff on mobile
  style(column-gap): Removed column gap so posts view can use full width
  style(boards-view): Set flex always on last-post section of boards listing
  refactor(wip-dark-theme-colors): implement general dark theme css
  style(polls): Removed min-height from polls css
  style(polls): Added polls to the top of the thread; added collapse functionality
  style(boards): restructured board listing layout and spacing; added border-bottom to differentiate between boards better
  feat(title-update): Update document title based on page
  style(grid-columns): Removing base grid columns for posts and profile pages to enable full width
  style(large-numbers): Added thousands separators to large numbers to make them more readable
  refactor(report-bug): Removed report bug link in header
  style(avatar-size): Set avatar size to be 120x80 to match Bitcointalk sizing

Author: crod951

src/App.vue

@@ -106,13 +106,13 @@ main {
   #public-content {
     @include base-layout-width;
     @include grid-base-layout;
-    @include grid-columns-base;
     // margin-top: $header-bottom-margin;
     grid-template-areas:
       "header header"
       "main main"
       "sidebar sidebar";
     grid-gap: 2rem;
+    column-gap: 0;
     row-gap: 0;
     margin-bottom: 2rem;
 

src/assets/scss/_global-components.scss

@@ -979,7 +979,6 @@ input[disabled].toggle-switch:checked + label:after { background-color: lighten(
   color: $sub-header-font-color;
   margin: 1.5rem 0;
   max-height: calc(100vh - 16rem);
-  min-height: 200px;
   overflow-x: hidden;
   overflow-y: auto;
   button { margin: 0.5rem 0 0; width: 100%; }

src/assets/scss/_overrides.scss

@@ -24,3 +24,99 @@ body { overflow: hidden auto; }
     box-sizing: inherit;
   }
 }
+
+// $sub-header-color #1a1a1a;
+// $sub-header-secondary-font-color #f9f9f9;
+// $secondary-font-color #f0f0f0;
+// $base-background-color #0f0f0f;
+// $base-font-color #fff;
+// $header-bg-color rgb(17, 17, 17);
+// $breadcrumbs-border-color #2f2f2f;
+// $breadcrumbs-link-color rgb(153, 153, 153);
+// $recent-thread-background-color #262626;
+html.dark, html.dark body {
+  background-color: #0f0f0f; // $base-background-color;
+  color: #fff; // $base-font-color;
+  .board-controls {
+    background-color: #0f0f0f; //$base-background-color;
+    h1 { color: #fff; } // $base-font-color;
+  }
+  .child-boards .description, .threads-list .description {
+    color: #fff; // $base-font-color;
+  }
+  .category .board h2 a {
+    color: #f0f0f0; // $secondary-font-color;
+  }
+  .category .board .info .description {
+    color: #f0f0f0; // $secondary-font-color;
+  }
+  header #menu-wrap {
+    background-color: rgb(17, 17, 17); // $header-bg-color;
+  }
+  header #breadcrumbs-wrap {
+    background-color: #1a1a1a; // $sub-header-color;
+    border-bottom: 1px solid #2f2f2f; // $breadcrumbs-border-color;
+    #breadcrumbs ul li span {
+      color: rgb(153, 153, 153); // $breadcrumbs-link-color;
+    }
+  }
+  .dashboard-hero {
+    background-color: #1a1a1a; // $sub-header-color;
+    .threads-data {
+      background-color: #262626; // $recent-thread-background-color
+    }
+  }
+  .actions-bottom {
+    border-top: 1px solid #2f2f2f; // $breadcrumbs-border-color;
+    background-color: #0f0f0f; // $base-background-color;
+  }
+  .page-header-split h1 {
+    color: #fff; // $base-font-color
+  }
+  .poll-title, .actionsBar {
+    background-color: #0f0f0f; // $base-background-color;
+    color: #f0f0f0; // $secondary-font-color;
+  }
+  .polls {
+    .poll-header .poll-question {
+      color: #fff; // $base-font-color
+    }
+    .poll-answer .poll-select {
+      color: #f0f0f0; // $sub-header-secondary-font-color;
+    }
+  }
+  .profile-header .profile-user-details .profile-user-name-role h1 {
+    color: #fff; // $base-font-color
+  }
+  .table-actions button {
+    color: #f0f0f0; // $secondary-font-color;
+    &.active {
+      color: rgb(255, 100, 0); // $color-primary
+    }
+  }
+  .pagination-wrap .pagination {
+    .control {
+      fill: rgb(153, 153, 153); // $breadcrumbs-link-color;
+    }
+    .control-active {
+      fill: #fff; // $base-font-color
+      &:hover {
+        fill: rgb(255, 100, 0); // $color-primary
+      }
+    }
+    .page {
+      color: #fff; // $base-font-color
+    }
+  }
+  .pagination-simple button {
+    background: #0f0f0f; // $base-background-color;
+  }
+  .profile-posts-table {
+    .post {
+      color: #fff; // $base-font-color
+      &:hover {
+        background-color: lighten(#0f0f0f, 5%); // $base-background-color;
+      }
+    }
+  }
+}

src/components/layout/HeaderComponent.vue

@@ -84,7 +84,10 @@
           <!-- Login Section -->
           <ul class="signed-out" v-if="!loggedIn">
             <li>
-              <a href="https://forms.clickup.com/57751/f/1rcq-791/HNWSBPWCDSRMDMS9TF" target="_blank">REPORT A BUG</a>
+              <a href="" @click.prevent="toggleDarkMode()">
+                <i v-if="!darkMode" class="fa-solid fa-moon"></i>
+                <i v-if="darkMode" class="fa-solid fa-sun"></i>
+              </a>
             </li>
           </ul>
 
@@ -265,7 +268,7 @@ import AdminNavigation from '@/components/layout/AdminNavigation.vue'
 import AdminSubNavigation from '@/components/layout/AdminSubNavigation.vue'
 import decode from '@/composables/filters/decode'
 import { AuthStore } from '@/composables/stores/auth'
-import { PreferencesStore } from '@/composables/stores/prefs'
+import { PreferencesStore, localStoragePrefs} from '@/composables/stores/prefs'
 import { reactive, toRefs, watch, onMounted, onUnmounted, onBeforeMount, inject } from 'vue'
 import { debounce } from 'lodash'
 import { useRouter, useRoute } from 'vue-router'
@@ -282,6 +285,10 @@ export default {
       let fetchMotd = () => motdApi.get().then(d => v.motdData = d).catch(() => {})
       fetchMotd()
       addAnnouncementListener(fetchMotd)
+
+      // set dark mode if in user prefs
+      if (localStoragePrefs().data.dark_mode)
+        document.documentElement.classList.add('dark')
     })
     /* Internal Methods */
     const scrollHeader = () => {
@@ -320,6 +327,12 @@ export default {
       if (v.searchExpanded) { v.search.focus() }
     }
 
+    const toggleDarkMode = () => {
+      v.darkMode = !v.darkMode
+      document.documentElement.classList.toggle('dark')
+      $prefs.update()
+    }
+
     const unseenMentionsText = () => {
       let unseenInList = 0;
       v.mentionsList.forEach(mention => { if (!mention.viewed) { unseenInList++ } })
@@ -337,6 +350,7 @@ export default {
 
     /* Template Data */
     const v = reactive({
+      darkMode: $prefs.data.dark_mode,
       showMobileMenu: false,
       focusSearch: false,
       searchExpanded: false,
@@ -389,7 +403,7 @@ export default {
       window.removeEventListener('scroll', debounce(scrollHeader, 10))
     })
 
-    return { ...toRefs(v), BanStore, logout, isPatroller, searchForum, dismissNotifications, deleteMention, unseenMentionsText, toggleFocusSearch, decode, humanDate }
+    return { ...toRefs(v), BanStore, logout, isPatroller, searchForum, dismissNotifications, deleteMention, unseenMentionsText, toggleFocusSearch, toggleDarkMode, decode, humanDate }
   }
 }
 </script>

src/components/polls/PollViewer.vue

@@ -1,12 +1,20 @@
 <template>
   <div class="polls" id="poll-view" v-if="poll">
     <!-- Poll Header -->
-    <div class="poll-title">
+    <div class="poll-title collapse-section" @click="togglePollsCollapsed()">
       <span class="poll-title-text">
+        <a :class="{ 'is-open': !options.polls_collapsed, 'is-closed': options.polls_collapsed }">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.84 22.63" class="icon__caretDown">
+            <title></title>
+            <g id="Layer_2" data-name="Layer 2">
+              <polyline class="icon" points="37.92 1.92 19.92 19.92 1.92 1.92" />
+            </g>
+          </svg>
+        </a>
         Poll
         <span class="is_locked" v-if="pollCopy.locked">(Locked)</span>
       </span>
-      <div class="poll-controls">
+      <div v-if="!options.polls_collapsed" class="poll-controls">
         <!-- Poll Controls -->
         <div class="poll-control" v-if="canLock()">
           <input id="lockPoll" class="icon" type="checkbox" v-model="pollCopy.locked">
@@ -32,7 +40,7 @@
     </div>
 
     <!-- Poll Edit -->
-    <div class="poll-edit" v-if="canEdit()" :class="{'showing': editPoll, 'hidden': !editPoll}">
+    <div class="poll-edit" v-if="canEdit() && !options.polls_collapsed" :class="{'showing': editPoll, 'hidden': !editPoll}">
       <div class="slide-wrapper">
         <div class="poll-edit-container">
           <h5 class="panelTitle">Edit Poll Options:</h5>
@@ -71,7 +79,7 @@
       </div>
     </div>
 
-    <div class="poll-body">
+    <div v-if="!options.polls_collapsed" class="poll-body">
       <div class="poll-header">
         <!-- Poll Details -->
         <div class="poll-header-main">
@@ -117,7 +125,7 @@
         </div>
       </div>
     </div>
-    <div class="actionsBar">
+    <div v-if="!options.polls_collapsed" class="actionsBar">
       <button @click="vote()" :disabled="pollAnswers.length === 0" v-if="canVote()">Vote</button>
       <button v-if="canRemoveVote()" @click="removeVote()" class="secondary">Remove Vote</button>
     </div>
@@ -288,6 +296,11 @@ export default {
       console.log('scrollPollView')
       // $('#poll-view').animate({  scrollTop: 0 }, 250)
     }
+
+    const togglePollsCollapsed = () => {
+      v.options.polls_collapsed = !v.options.polls_collapsed
+    }
+
     /* Internal Data */
     const $auth = inject(AuthStore)
     const $alertStore = inject('$alertStore')
@@ -303,7 +316,8 @@ export default {
         display_mode: props.poll.display_mode,
         // used in view to track date and time from input field
         expiration_date: props.poll.expiration ? dayjs(props.poll.expiration).format('YYYY-MM-DD') : undefined,
-        expiration_time: props.poll.expiration ? dayjs(props.poll.expiration).format('HH:mm') : undefined
+        expiration_time: props.poll.expiration ? dayjs(props.poll.expiration).format('HH:mm') : undefined,
+        polls_collapsed: false
       },
       editPoll: false,
       pollAnswers: [],
@@ -334,7 +348,8 @@ export default {
       updateLockPoll,
       calcExpiration,
       scrollPollView,
-      humanDate
+      humanDate,
+      togglePollsCollapsed
     }
   }
 }
@@ -351,4 +366,34 @@ export default {
     max-height: 0rem;
   }
 }
+
+.collapse-section {
+  @include no-select;
+  cursor: pointer;
+  a { margin-left: -0.5rem; }
+  .title { display: inline-block; margin-left: .5rem; }
+  .is-open {
+    .icon__caretDown {
+      transform: rotateZ(0deg);
+      transition: all ease-in-out 150ms;
+    }
+  }
+  .is-closed {
+    .icon__caretDown {
+      transform: rotateZ(-90deg);
+      transition: all ease-in-out 150ms;
+    }
+  }
+  .icon__caretDown {
+    margin-bottom: 3px;
+    width: 8px;
+    polyline {
+      fill: none;
+      stroke: $secondary-font-color;
+      stroke-linecap: round;
+      stroke-miterlimit: 10;
+      stroke-width: 7px;
+    }
+  }
+}
 </style>

src/components/users/UserPosts.vue

@@ -253,6 +253,9 @@ export default {
     }
     &.closed {
       width: 100%;
+      @include break-mobile-sm {
+        max-height: 3rem;
+      }
       max-height: 2.5rem;
       white-space: pre-wrap;
       overflow: hidden;

src/composables/stores/prefs.js

@@ -17,7 +17,8 @@ const emtpyPrefs = {
   },
   patroller_view: false,
   collapsed_categories: [],
-  ignored_boards: []
+  ignored_boards: [],
+  dark_mode: false
 }
 
 export const PreferencesStore = Symbol(PREFS_KEY)
@@ -68,6 +69,7 @@ export default {
         patroller_view: prefs.patroller_view,
         collapsed_categories: [...prefs.collapsed_categories],
         ignored_boards: [...prefs.ignored_boards],
+        dark_mode: prefs.dark_mode,
         ...specificPrefs
       }
       if (user && user.token) { // user is logged in update cache and server