Made header more responsive and added nicer settings switches

resources/assets/js/components/toggle-switch.vue

@@ -0,0 +1,28 @@
+
+<template>
+    <div class="toggle-switch" v-on="click: switch" v-class="active: isActive">
+        <input type="hidden" v-attr="name: name, value: value"/>
+        <div class="switch-handle"></div>
+    </div>
+</template>
+
+
+<script>
+    module.exports = {
+        props: ['name', 'value'],
+        data: function() {
+            return {
+                isActive: this.value == true && this.value != 'false'
+            }
+        },
+        ready: function() {
+            this.value = (this.value == true && this.value != 'false') ? 'true' : 'false';
+        },
+        methods: {
+            switch: function() {
+                this.isActive = !this.isActive;
+                this.value = this.isActive ? 'true' : 'false';
+            }
+        }
+    }
+</script>

resources/assets/js/global.js

@@ -40,6 +40,7 @@ Vue.use(require('vue-resource'));
 // Vue Components
 Vue.component('image-manager', require('./components/image-manager.vue'));
 Vue.component('image-picker', require('./components/image-picker.vue'));
+Vue.component('toggle-switch', require('./components/toggle-switch.vue'));
 
 // Vue Controllers
 if(elemExists('#book-dashboard')) {

resources/assets/sass/_forms.scss

@@ -47,6 +47,39 @@ input[type="text"], input[type="number"], input[type="email"], input[type="searc
   @extend .input-base;
 }
 
+.toggle-switch {
+  display: inline-block;
+  background-color: #BBB;
+  width: 36px;
+  height: 14px;
+  border-radius: 7px;
+  position: relative;
+  transition: all ease-in-out 120ms;
+  cursor: pointer;
+  user-select: none;
+  .switch-handle {
+    display: block;
+    position: relative;
+    left: 0;
+    margin-top: -3px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: #fafafa;
+    border: 1px solid #CCC;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+    transition: all ease-in-out 120ms;
+  }
+  &.active {
+    background-color: rgba($positive, 0.4);
+    .switch-handle {
+      left: 16px;
+      background-color: $positive;
+      border: darken($positive, 20%);
+    }
+  }
+}
+
 .form-group {
   margin-bottom: $-s;
 }

resources/assets/sass/_grid.scss

@@ -242,7 +242,7 @@ div[class^="col-"] img {
 .col-xs-offset-0 {
   margin-left: 0%;
 }
-@media (min-width: 768px) {
+@media (min-width: $screen-sm) {
   .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
     float: left;
   }
@@ -400,7 +400,7 @@ div[class^="col-"] img {
     margin-left: 0%;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: $screen-md) {
   .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
     float: left;
   }
@@ -558,7 +558,7 @@ div[class^="col-"] img {
     margin-left: 0%;
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: $screen-lg) {
   .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
     float: left;
   }

resources/assets/sass/_header.scss

@@ -17,6 +17,9 @@ header {
     display: inline-block;
     vertical-align: top;
     margin-right: $-xl;
+    @include smaller-than($screen-md) {
+      margin-right: $-m;
+    }
   }
   .links a {
     display: inline-block;
@@ -25,23 +28,63 @@ header {
     &:last-child {
       padding-right: 0;
     }
+    @include smaller-than($screen-md) {
+      padding: $-l $-s;
+    }
   }
   .avatar, .user-name {
     display: inline-block;
   }
   .avatar {
-    margin-top: (45px/2);
+    //margin-top: (45px/2);
     width: 30px;
     height: 30px;
   }
   .user-name {
     vertical-align: top;
-    padding-top: 25.5px;
+    padding-top: $-l;
-    padding-left: $-m;
     display: inline-block;
     cursor: pointer;
-    i {
+    > * {
+      vertical-align: top;
+    }
+    > span, > i {
       padding-left: $-xs;
+      display: inline-block;
+    }
+    > span {
+      padding-top: $-xxs;
+    }
+    > i {
+      padding-top: $-xs*1.2;
+    }
+    @include smaller-than($screen-md) {
+      padding-left: $-xs;
+      .name {
+        display: none;
+      }
+      i {
+        font-size: 2em;
+        padding-left: 0;
+        padding-top: 0;
+      }
+    }
+  }
+  @include smaller-than($screen-md) {
+    text-align: center;
+    .float.right {
+      float: none;
+    }
+  }
+  @include smaller-than($screen-sm) {
+    .links a {
+      padding: $-s;
+    }
+    form.search-box {
+      margin-top: 0;
+    }
+    .user-name {
+      padding-top: $-s;
     }
   }
 }
@@ -117,6 +160,7 @@ form.search-box {
   min-width: 180px;
   padding: $-xs 0;
   color: #555;
+  text-align: left !important;
   a {
     display: block;
     padding: $-xs $-m;

resources/assets/sass/_variables.scss

@@ -12,8 +12,8 @@ $m: 800px;
 $s: 600px;
 $xs: 400px;
 $xxs: 360px;
-$screen-md: 992px;
 $screen-lg: 1200px;
+$screen-md: 992px;
 $screen-sm: 768px;
 
 // Spacing (Margins+Padding)

resources/views/base.blade.php

@@ -35,7 +35,7 @@
     <header id="header">
         <div class="container">
             <div class="row">
-                <div class="col-md-4 col-sm-3">
+                <div class="col-lg-4 col-sm-4">
                     <a href="/" class="logo">
                         @if(Setting::get('app-logo', '') !== 'none')
                             <img class="logo-image" src="{{ Setting::get('app-logo', '') === '' ? '/logo.png' : Setting::get('app-logo', '') }}" alt="Logo">
@@ -43,13 +43,13 @@
                         <span class="logo-text">{{ Setting::get('app-name', 'BookStack') }}</span>
                     </a>
                 </div>
-                <div class="col-md-4 col-sm-3 text-center">
+                <div class="col-lg-4 col-sm-3 text-center">
                     <form action="/search/all" method="GET" class="search-box">
                         <input type="text" name="term" tabindex="2" value="{{ isset($searchTerm) ? $searchTerm : '' }}">
                         <button class="text-button"><i class="zmdi zmdi-search"></i></button>
                     </form>
                 </div>
-                <div class="col-md-4 col-sm-6">
+                <div class="col-lg-4 col-sm-5">
                     <div class="float right">
                         <div class="links text-center">
                             <a href="/books"><i class="zmdi zmdi-book"></i>Books</a>
@@ -61,10 +61,10 @@
                             @endif
                         </div>
                         @if($signedIn)
-                            <img class="avatar" src="{{$currentUser->getAvatar(30)}}" alt="{{ $currentUser->name }}">
                             <div class="dropdown-container" data-dropdown>
                                 <span class="user-name" data-dropdown-toggle>
-                                    {{ $currentUser->name }} <i class="zmdi zmdi-caret-down"></i>
+                                    <img class="avatar" src="{{$currentUser->getAvatar(30)}}" alt="{{ $currentUser->name }}">
+                                    <span class="name">{{ $currentUser->name }}</span> <i class="zmdi zmdi-caret-down"></i>
                                 </span>
                                 <ul>
                                     <li>

resources/views/settings/index.blade.php

@@ -20,9 +20,8 @@
                     <input type="text" value="{{ Setting::get('app-name', 'BookStack') }}" name="setting-app-name" id="setting-app-name">
                 </div>
                 <div class="form-group">
-                    <label for="setting-app-public">Allow public viewing?</label>
+                    <label>Allow public viewing?</label>
-                    <label><input type="radio" name="setting-app-public" @if(Setting::get('app-public')) checked @endif value="true"> Yes</label>
+                    <toggle-switch name="setting-app-public" value="{{ Setting::get('app-public') }}"></toggle-switch>
-                    <label><input type="radio" name="setting-app-public" @if(!Setting::get('app-public')) checked @endif value="false"> No</label>
                 </div>
             </div>
             <div class="col-md-6">
@@ -43,8 +42,7 @@
             <div class="col-md-6">
                 <div class="form-group">
                     <label for="setting-registration-enabled">Allow registration?</label>
-                    <label><input type="radio" name="setting-registration-enabled" @if(Setting::get('registration-enabled')) checked @endif value="true"> Yes</label>
+                    <toggle-switch name="setting-registration-enabled" value="{{ Setting::get('registration-enabled') }}"></toggle-switch>
-                    <label><input type="radio" name="setting-registration-enabled" @if(!Setting::get('registration-enabled')) checked @endif value="false"> No</label>
                 </div>
                 <div class="form-group">
                     <label for="setting-registration-role">Default user role after registration</label>
@@ -61,8 +59,7 @@
                 <div class="form-group">
                     <label for="setting-registration-confirmation">Require Email Confirmation?</label>
                     <p class="small">If domain restriction is used then email confirmation will be required and the below value will be ignored.</p>
-                    <label><input type="radio" name="setting-registration-confirmation" @if(Setting::get('registration-confirmation')) checked @endif value="true"> Yes</label>
+                    <toggle-switch name="setting-registration-confirmation" value="{{ Setting::get('registration-confirmation') }}"></toggle-switch>
-                    <label><input type="radio" name="setting-registration-confirmation" @if(!Setting::get('registration-confirmation')) checked @endif value="false"> No</label>
                 </div>
             </div>
             <div class="col-md-6">