Merge branch 'develop' into feature/hash-routed

src/App.js

@@ -1,16 +1,26 @@
 import UserPanel from './components/user_panel/user_panel.vue'
 import NavPanel from './components/nav_panel/nav_panel.vue'
 import Notifications from './components/notifications/notifications.vue'
+import StyleSwitcher from './components/style_switcher/style_switcher.vue'
 
 export default {
   name: 'app',
   components: {
     UserPanel,
     NavPanel,
-    Notifications
+    Notifications,
+    StyleSwitcher
   },
+  data: () => ({
+    mobileActivePanel: 'timeline'
+  }),
   computed: {
     currentUser () { return this.$store.state.users.currentUser },
     style () { return { 'background-image': `url(${this.currentUser.background_image})` } }
+  },
+  methods: {
+    activatePanel (panelName) {
+      this.mobileActivePanel = panelName
+    }
   }
 }

src/App.scss

@@ -58,11 +58,12 @@ nav {
     position: fixed;
     height: 50px;
 
-}
-
-.sidebar {
-    flex: 1;
-    flex-basis: 300px;
+    .inner-nav {
+        display: flex;
+        align-items: center;
+        flex-basis: 920px;
+        margin: auto;
+    }
 }
 
 main-router {
@@ -111,10 +112,9 @@ main-router {
 #content {
     margin: auto;
     max-width: 920px;
-}
-
-.media-left {
-    width: 10% !important;
+    border-radius: 1em;
+    padding-bottom: 1em;
+    background-color: rgba(0,0,0,0.1);
 }
 
 .media-body {
@@ -225,3 +225,34 @@ nav {
     flex: 2;
     flex-basis: 500px;
 }
+
+.sidebar {
+    flex: 1;
+    flex-basis: 300px;
+}
+
+.mobile-shown {
+    display: none;
+}
+
+.panel-switcher {
+    display: none;
+    width: 100%;
+
+    button {
+        display: block;
+        flex: 1;
+        margin: 0.5em;
+        padding: 0.5em;
+    }
+}
+
+@media all and (max-width: 959px) {
+    .mobile-hidden {
+        display: none;
+    }
+
+    .panel-switcher {
+        display: flex;
+    }
+}

src/App.vue

@@ -1,17 +1,24 @@
 <template>
   <div id="app" v-bind:style="style" class="base02-background">
     <nav class='container base01-background base04'>
-      <div class='item'>
-        <a route-to='friends-timeline' href="#">Pleroma FE</a>
+      <div class='inner-nav'>
+        <div class='item'>
+          <a route-to='friends-timeline' href="#">Pleroma FE</a>
+        </div>
+        <style-switcher></style-switcher>
       </div>
     </nav>
     <div class="container" id="content">
-      <div class="sidebar">
+      <div class="panel-switcher">
+        <button @click="activatePanel('sidebar')">Sidebar</button>
+        <button @click="activatePanel('timeline')">Timeline</button>
+      </div>
+      <div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }">
         <user-panel></user-panel>
         <nav-panel></nav-panel>
         <notifications v-if="currentUser"></notifications>
       </div>
-      <div class="main">
+      <div class="main" :class="{ 'mobile-hidden': mobileActivePanel != 'timeline' }">
         <transition name="fade">
           <router-view></router-view>
         </transition>

src/components/style_switcher/style_switcher.js

@@ -0,0 +1,20 @@
+import StyleSetter from '../../services/style_setter/style_setter.js'
+
+export default {
+  data: () => ({
+    availableStyles: [],
+    selected: false
+  }),
+  created () {
+    const self = this
+    window.fetch('/static/css/themes.json')
+      .then((data) => data.json())
+      .then((themes) => { self.availableStyles = themes })
+  },
+  watch: {
+    selected () {
+      const fullPath = `/static/css/${this.selected}`
+      StyleSetter.setStyle(fullPath)
+    }
+  }
+}

src/components/style_switcher/style_switcher.vue

@@ -0,0 +1,13 @@
+<template>
+  <select v-model="selected" class="style-switcher">
+    <option v-for="style in availableStyles" >{{style}}</option>
+  </select>
+</template>
+
+<script src="./style_switcher.js"></script>
+
+<style lang="scss">
+ .style-switcher {
+   margin-right: 1em;
+ }
+</style>

src/components/user_card_content/user_card_content.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="panel-heading text-center" v-bind:style="style">
+    <div class="base00-background panel-heading text-center" v-bind:style="style">
       <div class='user-info'>
         <img :src="user.profile_image_url">
         <span class="glyphicon glyphicon-user"></span>

src/main.js

@@ -15,6 +15,8 @@ import apiModule from './modules/api.js'
 
 import VueTimeago from 'vue-timeago'
 
+import StyleSetter from './services/style_setter/style_setter.js'
+
 Vue.use(Vuex)
 Vue.use(VueRouter)
 Vue.use(VueTimeago, {
@@ -57,3 +59,5 @@ new Vue({
   template: '<App/>',
   components: { App }
 })
+
+StyleSetter.setStyle('/static/css/base16-solarized-light.css')

src/services/style_setter/style_setter.js

@@ -0,0 +1,45 @@
+const setStyle = (href) => {
+  /***
+      What's going on here?
+      I want to make it easy for admins to style this application. To have
+      a good set of default themes, I chose the system from base16
+      (https://chriskempson.github.io/base16/) to style all elements. They
+      all have the base00..0F classes. So the only thing an admin needs to
+      do to style Pleroma is to change these colors in that one css file.
+      Some default things (body text color, link color) need to be set dy-
+      namically, so this is done here by waiting for the stylesheet to be
+      loaded and then creating an element with the respective classes.
+
+      It is a bit weird, but should make life for admins somewhat easier.
+  ***/
+  const head = document.head
+  const body = document.body
+  body.style.display = 'none'
+  const cssEl = document.createElement('link')
+  cssEl.setAttribute('rel', 'stylesheet')
+  cssEl.setAttribute('href', href)
+  head.appendChild(cssEl)
+
+  const setDynamic = () => {
+    const baseEl = document.createElement('div')
+    baseEl.setAttribute('class', 'base05')
+    const base05Color = window.getComputedStyle(baseEl).getPropertyValue('color')
+    baseEl.setAttribute('class', 'base08')
+    const base08Color = window.getComputedStyle(baseEl).getPropertyValue('color')
+    const styleEl = document.createElement('style')
+    head.appendChild(styleEl)
+    const styleSheet = styleEl.sheet
+
+    styleSheet.insertRule(`a { color: ${base08Color}`, 'index-max')
+    styleSheet.insertRule(`body { color: ${base05Color}`, 'index-max')
+    styleSheet.insertRule(`.base05-border { color: ${base05Color}`, 'index-max')
+    body.style.display = 'initial'
+  }
+  cssEl.addEventListener('load', setDynamic)
+}
+
+const StyleSetter = {
+  setStyle
+}
+
+export default StyleSetter