Merge branch 'develop' of ssh.gitgud.io:lambadalambda/pleroma-fe into feature/reply-navigation

README.md

@@ -2,7 +2,7 @@
 
 > A Qvitter-style frontend for certain GS servers.
 
-![screenshot](http://i.imgur.com/3q30Zxt.jpg)
+![screenshot](https://my.mixtape.moe/kjzioz.PNG)
 
 # FOR ADMINS
 

src/App.scss

@@ -213,13 +213,20 @@ nav {
 }
 
 .main {
-    flex: 1;
+    flex-basis: 60%;
-    flex-basis: 65%;
+    flex-grow: 1;
+    flex-shrink: 1;
 }
 
 .sidebar {
-    flex: 1;
+  flex: 0;
-    flex-basis: 35%;
+  flex-basis: 35%;
+}
+
+.sidebar-flexer {
+  flex: 1;
+  flex-basis: 345px;
+  width: 365px;
 }
 
 .mobile-shown {
@@ -238,6 +245,30 @@ nav {
     }
 }
 
+@media all and (min-width: 960px) {
+  .sidebar {
+    overflow: hidden;
+    max-height: 100vh;
+    width: 350px;
+    position: fixed;
+    margin-top: -10px;
+
+    .sidebar-container {
+      height: 96vh;
+      width: 362px;
+      padding-top: 10px;
+      padding-right: 20px;
+      overflow-x: hidden;
+      overflow-y: scroll;
+    }
+  }
+  .sidebar-flexer {
+    max-height: 96vh;
+    flex-shrink: 0;
+    flex-grow: 0;
+  }
+}
+
 @media all and (max-width: 959px) {
     .mobile-hidden {
         display: none;

src/App.vue

@@ -15,10 +15,14 @@
         <button @click="activatePanel('sidebar')">Sidebar</button>
         <button @click="activatePanel('timeline')">Timeline</button>
       </div>
-      <div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }">
+      <div class="sidebar-flexer" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar'}">
-        <user-panel></user-panel>
+        <div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }">
-        <nav-panel></nav-panel>
+          <div class="sidebar-container">
-        <notifications v-if="currentUser"></notifications>
+            <user-panel></user-panel>
+            <nav-panel></nav-panel>
+            <notifications v-if="currentUser"></notifications>
+          </div>
+        </div>
       </div>
       <div class="main" :class="{ 'mobile-hidden': mobileActivePanel != 'timeline' }">
         <transition name="fade">

src/components/attachment/attachment.vue

@@ -33,10 +33,10 @@
   .attachments {
       display: flex;
       flex-wrap: wrap;
-      margin-right: -0.8em;
+      margin-right: -0.7em;
       .attachment {
           flex: 1 0 30%;
-          margin: 0.5em 0.8em 0.6em 0.0em;
+          margin: 0.5em 0.7em 0.6em 0.0em;
           align-self: flex-start;
 
           &.html {

src/components/notifications/notifications.scss

@@ -1,6 +1,8 @@
 @import '../../_variables.scss';
 
 .notifications {
+  // a bit of a hack to allow scrolling below notifications
+  padding-bottom: 15em;
 
   .panel-heading {
     // force the text to stay centered, while keeping

src/components/user_card_content/user_card_content.vue

@@ -79,9 +79,8 @@
         return this.$store.state.users.currentUser
       },
       dailyAvg () {
-        return Math.round(
+        const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
-          this.user.statuses_count / ((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
+        return Math.round(this.user.statuses_count / days)
-        )
       }
     },
     methods: {
@@ -117,7 +116,6 @@
 }
 
 .profile-panel-body {
-  padding-top: 0em;
   top: -0em;
   padding-top: 4em;
 }

static/config.json

@@ -1,6 +1,6 @@
 {
   "name": "Pleroma FE",
-  "theme": "base16-ashes.css",
+  "theme": "base16-pleroma-dark.css",
   "background": "/static/bg.jpg",
   "logo": "/static/logo.png"
 }

static/css/base16-pleroma-dark.css

@@ -0,0 +1,33 @@
+.base00-background { background-color: #161c20; }
+.base01-background { background-color: #282e32; }
+.base02-background { background-color: #343a3f; }
+.base03-background { background-color: #4e5256; }
+.base04-background { background-color: #ababab; }
+.base05-background { background-color: #b9b9b9; }
+.base06-background { background-color: #d0d0d0; }
+.base07-background { background-color: #e7e7e7; }
+.base08-background { background-color: #baaa9c; }
+.base09-background { background-color: #999999; }
+.base0A-background { background-color: #a0a0a0; }
+.base0B-background { background-color: #8e8e8e; }
+.base0C-background { background-color: #868686; }
+.base0D-background { background-color: #686868; }
+.base0E-background { background-color: #747474; }
+.base0F-background { background-color: #5e5e5e; }
+
+.base00 { color: #161c20; }
+.base01 { color: #282e32; }
+.base02 { color: #36393e; }
+.base03 { color: #4e5256; }
+.base04 { color: #ababab; }
+.base05 { color: #b9b9b9; }
+.base06 { color: #d0d0d0; }
+.base07 { color: #e7e7e7; }
+.base08 { color: #baaa9c; }
+.base09 { color: #999999; }
+.base0A { color: #a0a0a0; }
+.base0B { color: #8e8e8e; }
+.base0C { color: #868686; }
+.base0D { color: #686868; }
+.base0E { color: #747474; }
+.base0F { color: #5e5e5e; }

static/css/base16-pleroma-light.css

@@ -0,0 +1,33 @@
+.base00-background { background-color: #f2f4f6; }
+.base01-background { background-color: #dde2e6; }
+.base02-background { background-color: #c0c6cb; }
+.base03-background { background-color: #a4a4a4; }
+.base04-background { background-color: #545454; }
+.base05-background { background-color: #304055; }
+.base06-background { background-color: #040404; }
+.base07-background { background-color: #000000; }
+.base08-background { background-color: #e92f2f; }
+.base09-background { background-color: #e09448; }
+.base0A-background { background-color: #dddd13; }
+.base0B-background { background-color: #0ed839; }
+.base0C-background { background-color: #23edda; }
+.base0D-background { background-color: #3b48e3; }
+.base0E-background { background-color: #f996e2; }
+.base0F-background { background-color: #69542d; }
+
+.base00 { color: #f2f4f6; }
+.base01 { color: #dde2e6; }
+.base02 { color: #c0c6cb; }
+.base03 { color: #a4a4a4; }
+.base04 { color: #545454; }
+.base05 { color: #304055; }
+.base06 { color: #040404; }
+.base07 { color: #000000; }
+.base08 { color: #e46f0f; }
+.base09 { color: #e09448; }
+.base0A { color: #dddd13; }
+.base0B { color: #0ed839; }
+.base0C { color: #23edda; }
+.base0D { color: #3b48e3; }
+.base0E { color: #f996e2; }
+.base0F { color: #69542d; }

static/css/themes.json

@@ -1,4 +1,6 @@
 [
+"base16-pleroma-dark.css",
+"base16-pleroma-light.css",
 "base16-3024.css",
 "base16-apathy.css",
 "base16-ashes.css",