From a1f6ef1dcac2e79c5a116705ca11d6e7e51ed89c Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Wed, 11 Apr 2018 19:34:40 +0300
Subject: Loads of fixes: notifs, autoload setting, overflow, faint text, reply
 form, status fadein.

---
 src/components/conversation/conversation.vue        | 11 ++++++++++-
 src/components/nav_panel/nav_panel.vue              |  3 +++
 src/components/notifications/notifications.scss     | 16 +++-------------
 src/components/notifications/notifications.vue      |  2 +-
 .../post_status_form/post_status_form.vue           |  2 +-
 src/components/settings/settings.vue                |  2 +-
 src/components/status/status.vue                    | 21 ++++++++++++++-------
 src/components/timeline/timeline.js                 |  2 +-
 src/components/timeline/timeline.vue                | 12 +++++++-----
 9 files changed, 41 insertions(+), 30 deletions(-)

(limited to 'src/components')

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 4000bce2..308e5e7d 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -8,7 +8,16 @@
     </div>
     <div class="panel-body">
       <div class="timeline">
-        <status v-for="status in conversation" @goto="setHighlight" :key="status.id" :inlineExpanded="collapsable" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight" :replies="getReplies(status.id)"></status>
+        <status
+          v-for="status in conversation"
+          @goto="setHighlight" :key="status.id"
+          :inlineExpanded="collapsable" :statusoid="status"
+          :expandable='false' :focused="focused(status.id)"
+          :inConversation='true'
+          :highlight="highlight"
+          :replies="getReplies(status.id)"
+          class="status-fadein">
+        </status>
       </div>
     </div>
   </div>
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 5db3f555..6f949afb 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -32,6 +32,9 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
+.nav-panel .panel {
+  overflow: hidden;
+}
 .nav-panel ul {
   list-style: none;
   margin: 0;
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 65ab7f5e..651be058 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -20,8 +20,8 @@
     position: relative;
     background: $fallback--btn;
     background: var(--btn, $fallback--btn);
-    color: $fallback--faint;
-    color: var(--faint, $fallback--faint);
+    color: $fallback--fg;
+    color: var(--fg, $fallback--fg);
     .read-button {
       position: absolute;
       right: 0.7em;
@@ -105,7 +105,7 @@
         color: var($fallback--faint, --faint);
       }
       padding: 0;
-      .status-content.media-body {
+      .media-body {
         margin: 0;
       }
     }
@@ -200,13 +200,3 @@
     border-bottom: none;
   }
 }
-
-.notification-content {
-  max-height: 12em;
-  overflow-y: hidden;
-  //text-overflow: ellipsis;
-
-  img {
-      object-fit: contain;
-  }
-}
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index f01234d3..4fa6e925 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -7,7 +7,7 @@
         <button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button>
       </div>
       <div class="panel-body">
-        <div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>
+        <div v-for="notification in visibleNotifications" :key="notification.action.id" class="notification" :class='{"unseen": !notification.seen}'>
           <notification :notification="notification"></notification>
         </div>
       </div>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index a3b8acde..69234d66 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -24,7 +24,7 @@
         <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
 
         <p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p>
-        <p v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p>
+        <p class="faint" v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p>
 
         <button v-if="posting" disabled class="btn btn-default">{{$t('post_status.posting')}}</button>
         <button v-else-if="isOverLengthLimit" disabled class="btn btn-default">{{$t('general.submit')}}</button>
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 0c9ddc3e..b4514ba1 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -29,7 +29,7 @@
                 <label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
             </li>
             <li>
-                <input type="checkbox" id="autoload" v-model="autoloadlocal">
+                <input type="checkbox" id="autoload" v-model="autoLoadLocal">
                 <label for="autoload">{{$t('settings.autoload')}}</label>
             </li>
             <li>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 885083c4..6571159c 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="status-el status-fadein" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
+  <div class="status-el" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
     <template v-if="muted && !noReplyLinks">
       <div class="media status container muted">
         <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
@@ -33,7 +33,7 @@
                 <h4 class="user-name">{{status.user.name}}</h4>
                 <span class="links">
                   <router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link>
-                  <span v-if="status.in_reply_to_screen_name"> &gt;
+                  <span v-if="status.in_reply_to_screen_name" class="faint"> &gt;
                     <router-link :to="{ name: 'user-profile', params: { id: status.in_reply_to_user_id } }">
                       {{status.in_reply_to_screen_name}}
                     </router-link>
@@ -167,6 +167,9 @@
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
 
+  border-left: 4px $fallback--cRed;
+  border-left: 4px var(--cRed, $fallback--cRed);
+
   &_focused {
     background-color: $fallback--lightBg;
     background-color: var(--lightBg, $fallback--lightBg);
@@ -307,7 +310,7 @@
 }
 
 .status-fadein {
-  animation-duration: 0.3s;
+  animation-duration: 0.4s;
   animation-name: fadein;
 }
 
@@ -389,9 +392,6 @@
 .status {
   display: flex;
   padding: 0.6em;
-  border-left: 4px $fallback--cRed;
-  border-left: 4px var(--cRed, $fallback--cRed);
-  border-left-style: inherit;
 }
 
 .status-conversation:last-child {
@@ -399,7 +399,7 @@
 }
 
 .timeline .panel.timeline {
-  overflow: hidden;
+  //overflow: hidden;
 }
 
 .muted {
@@ -427,6 +427,13 @@ a.unmute {
   flex: 1;
 }
 
+.timeline > {
+  .status-el:last-child {
+    border-bottom-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;;
+    border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+  }
+}
+
 @media all and (max-width: 960px) {
   .status-el {
     .retweet-info {
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 660a8752..74ab85d3 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -105,7 +105,7 @@ const Timeline = {
         .then((friends) => this.$store.dispatch('addFriends', { friends }))
     },
     scrollLoad (e) {
-      let height = Math.max(document.body.offsetHeight, document.body.scrollHeight)
+      const height = Math.max(document.body.offsetHeight, document.body.scrollHeight)
       if (this.timeline.loading === false &&
           this.$store.state.config.autoLoad &&
           this.$el.offsetHeight > 0 &&
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 4d2230cb..03f6ad3d 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -16,13 +16,15 @@
     </div>
     <div class="panel-body">
       <div class="timeline">
-        <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status-or-conversation>
-        <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
-          <div class="new-status-notification text-center">{{$t('timeline.load_older')}}</div>
-        </a>
-          <div class="new-status-notification text-center" v-else>...</div>
+        <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status" class="status-fadein"></status-or-conversation>
       </div>
     </div>
+    <div class="panel-footer">
+      <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
+        <div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div>
+      </a>
+      <div class="new-status-notification text-center panel-footer" v-else>...</div>
+    </div>
   </div>
   <div class="timeline panel panel-default" v-else-if="viewing == 'followers'">
     <div class="panel-heading timeline-heading">
-- 
cgit v1.2.3-70-g09d2