Merge pull request #88 from epochtalk/css-layout-update

Css layout update

Author: akinsey

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/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/views/Boards.vue

@@ -51,34 +51,32 @@
                 </div>
               </div>
 
-              <div class="board-secondary">
-                <!-- Board Posts and Threads -->
-                <div class="view-count">
-                  <p class="view-count-posts">
-                    <span class="view-count-number">{{board.total_post_count}}</span>
-                     <span class="label"> posts, </span>
-                  </p>
-                  <p class="view-count-threads">
-                    <span class="view-count-number">{{board.total_thread_count}}</span>
-                     <span class="label"> threads</span>
-                  </p>
-                </div>
+              <!-- Board Posts and Threads -->
+              <div class="view-count">
+                <p class="view-count-posts">
+                  <span class="view-count-number">{{board.total_post_count.toLocaleString()}}</span>
+                    <span class="label"> Posts </span>
+                </p>
+                <p class="view-count-threads">
+                  <span class="view-count-number">{{board.total_thread_count.toLocaleString()}}</span>
+                    <span class="label"> Threads</span>
+                </p>
+              </div>
 
-                <!-- Board Last Post By -->
-                <div class="last-post">
-                  <div v-if="board.last_post_username">
-                    <span v-if="board.user_deleted || board.post_deleted">deleted</span>
-                    <img v-if="!board.user_deleted && !board.post_deleted" class="avatar-small" :class="defaultAvatarShape" :src="board.last_post_avatar || defaultAvatar" @error="$event.target.src=defaultAvatar" />
-                    <router-link v-if="!board.user_deleted && !board.post_deleted" :to="{ path: '/profile/' + board.last_post_username.toLowerCase(), query: { id: board.last_post_user_id }}">{{board.last_post_username}}</router-link> posted in
-                    <span v-if="board.last_thread_title">
-                      <router-link :to="{ name: 'Posts', params: { threadSlug: board.last_thread_slug }, query: { start: board.last_post_position} }">
-                        <span v-html="board.last_thread_title"></span>
-                      </router-link> on
-                    </span>
-                    <span vi-if="board.last_post_created_at">
-                      <span>{{humanDate(board.last_post_created_at)}}</span>
-                    </span>
-                  </div>
+              <!-- Board Last Post By -->
+              <div class="last-post">
+                <div v-if="board.last_post_username">
+                  <span v-if="board.user_deleted || board.post_deleted">deleted</span>
+                  <img v-if="!board.user_deleted && !board.post_deleted" class="avatar-small" :class="defaultAvatarShape" :src="board.last_post_avatar || defaultAvatar" @error="$event.target.src=defaultAvatar" />
+                  <router-link v-if="!board.user_deleted && !board.post_deleted" :to="{ path: '/profile/' + board.last_post_username.toLowerCase(), query: { id: board.last_post_user_id }}">{{board.last_post_username}}</router-link> posted in
+                  <span v-if="board.last_thread_title">
+                    <router-link :to="{ name: 'Posts', params: { threadSlug: board.last_thread_slug }, query: { start: board.last_post_position} }">
+                      <span v-html="truncate(decode(board.last_thread_title), 25)"></span>
+                    </router-link>
+                  </span>
+                  <span vi-if="board.last_post_created_at">
+                    <br />on <span>{{humanDate(board.last_post_created_at)}}</span>
+                  </span>
                 </div>
               </div>
             </div>
@@ -96,6 +94,8 @@
 import useSWRV from 'swrv'
 import { mutate } from 'swrv'
 import humanDate from '@/composables/filters/humanDate'
+import decode from '@/composables/filters/decode'
+import truncate from '@/composables/filters/truncate'
 import RecentThreads from '@/components/threads/RecentThreads.vue'
 import LoginModal from '@/components/modals/auth/Login.vue'
 import RegisterModal from '@/components/modals/auth/Register.vue'
@@ -160,7 +160,7 @@ export default {
     watch(() => v.loggedIn, () => v.boardData.mutate(getBoards)) // Update boards on login
     watch(() => v.boardData.error, err => err ? $alertStore.error(err) : null) // Handle errors
 
-    return { ...toRefs(v), generateCatId, toggleCategory, humanDate }
+    return { ...toRefs(v), generateCatId, toggleCategory, humanDate, decode, truncate }
   }
 }
 </script>
@@ -236,7 +236,8 @@ img.avatar-small {
   .board {
     display: flex;
     flex-direction: row;
-    padding: 0 0 1rem 0;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid rgba(215, 215, 215, 0.35);
     @include break-mobile-sm { flex-direction: column; }
     .info {
       flex: 2 0 0;
@@ -277,15 +278,11 @@ img.avatar-small {
       }
     }
 
-    .board-secondary {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-    }
-
     .view-count {
+      padding-top: 0.5rem;
+      flex: 0 1 10%;
+      margin-right: 1rem;
       @include info-text;
-      flex: 0 0 50%;
 
       &-posts,
       &-threads {
@@ -307,15 +304,16 @@ img.avatar-small {
     }
 
     .last-post {
+      padding-top: 0.5rem;
       @include info-text;
-      flex: 2;
       word-break: break-word;
+      flex: 0.5 1 120px;
+      @include break-min-desktop {
+        text-align: right;
+      }
     }
 
-    @include break-max-desktop {
-      .view-count {
-        flex: 0 0 auto;
-      }
+    @include break-mobile-sm {
       .view-count-posts,
       .view-count-threads {
         display: inline;
@@ -325,18 +323,6 @@ img.avatar-small {
         text-align: left;
       }
     }
-
-    @include break-min-desktop {
-      .info {
-        flex: 2;
-      }
-      .board-secondary {
-        flex-direction: row;
-          .view-count {
-            padding-right: 2rem;
-          }
-        }
-      }
   }
 
   @include break-mobile-sm {

src/views/Posts.vue

@@ -99,6 +99,9 @@
     </div>
 
     <!-- <pagination page-count="PostsParentCtrl.pageCount" page="PostsParentCtrl.page"></pagination> -->
+     
+    <!-- Poll Viewer -->
+    <poll-viewer v-if="postData.data.thread?.poll" :poll="postData.data.thread.poll" :thread="postData.data.thread" :user-priority="postData.data.posts[0].user.priority" :reset="resetPoll" :banned-from-board="bannedFromBoard"></poll-viewer>
 
   </div>
 
@@ -399,9 +402,6 @@
 
         </div>
       </div>
-
-      <!-- Poll Viewer -->
-      <poll-viewer v-if="postData.data.thread?.poll" :poll="postData.data.thread.poll" :thread="postData.data.thread" :user-priority="postData.data.posts[0].user.priority" :reset="resetPoll" :banned-from-board="bannedFromBoard"></poll-viewer>
     </div>
 
   </div>
@@ -489,6 +489,7 @@ export default {
         return postsApi.byThread(params)
         .then(data => next(vm => {
           vm.postData.data = data
+          document.title = `${vm.postData.data.thread.title.replaceAll(/&#\d+;/g, '').trim()} - Posts`
           vm.checkUsersOnline()
           BanStore.updateBanNotice(vm.postData.data.banned_from_board)
           vm.bannedFromBoard = vm.postData.data.banned_from_board
@@ -509,6 +510,7 @@ export default {
         threadsApi.viewed(threadId)
         return postsApi.byThread(params).then(data => {
           this.postData.data = data
+          document.title = `${this.postData.data.thread.title.replaceAll(/&#\d+;/g, '').trim()} - Posts`
           this.checkUsersOnline()
           BanStore.updateBanNotice(this.postData.data.banned_from_board)
           this.bannedFromBoard = this.postData.data.banned_from_board
@@ -1229,7 +1231,6 @@ $postWidth__mobile: calc(100vw - 2rem);
 }
 #public-content {
   .posts & {
-    grid-template-columns: minmax(0, 3fr) minmax($sidebarWidth, 1fr);
     grid-template-areas:
       "top sidebar"
       "ads sidebar"

src/views/Profile.vue

@@ -206,6 +206,7 @@ export default {
   beforeRouteEnter(to, from, next) {
     usersApi.find(to.query.id).then(u => next(vm => {
       vm.user = u
+      document.title = `${vm.user.username} - Profile`
       isOnline(u.id, (e, d) => vm.userOnline = d.online)
     }))
   },
@@ -373,7 +374,6 @@ export default {
 .profile-wrap {
   grid-column: span 2;
   display: grid;
-  @include grid-columns-base;
   grid-template-areas:
     "header sidebar"
     "main sidebar";