mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-01-19 04:42:44 +08:00
Made header more responsive and added nicer settings switches
This commit is contained in:
Dan Brown
parent
13fa1080dc
commit
6c4b4e1cf9
28
resources/assets/js/components/toggle-switch.vue
Normal file
28
resources/assets/js/components/toggle-switch.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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')) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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-left: $-m;
|
||||
padding-top: $-l;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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><input type="radio" name="setting-app-public" @if(Setting::get('app-public')) checked @endif value="true"> Yes</label>
|
||||
<label><input type="radio" name="setting-app-public" @if(!Setting::get('app-public')) checked @endif value="false"> No</label>
|
||||
<label>Allow public viewing?</label>
|
||||
<toggle-switch name="setting-app-public" value="{{ Setting::get('app-public') }}"></toggle-switch>
|
||||
</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>
|
||||
<label><input type="radio" name="setting-registration-enabled" @if(!Setting::get('registration-enabled')) checked @endif value="false"> No</label>
|
||||
<toggle-switch name="setting-registration-enabled" value="{{ Setting::get('registration-enabled') }}"></toggle-switch>
|
||||
</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>
|
||||
<label><input type="radio" name="setting-registration-confirmation" @if(!Setting::get('registration-confirmation')) checked @endif value="false"> No</label>
|
||||
<toggle-switch name="setting-registration-confirmation" value="{{ Setting::get('registration-confirmation') }}"></toggle-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user