Updated header design

This commit is contained in:
Dan Brown 2017-08-19 15:33:22 +01:00
parent 666c86b108
commit 28a9bd514f
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
9 changed files with 74 additions and 69 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

View File

@ -64,6 +64,7 @@ $button-border-radius: 2px;
padding: 0; padding: 0;
margin: 0; margin: 0;
border: none; border: none;
user-select: none;
&:focus, &:active { &:focus, &:active {
outline: 0; outline: 0;
} }

View File

@ -248,15 +248,14 @@ div[editor-type="markdown"] .title-input.page-title input[type="text"] {
border: none; border: none;
color: $primary; color: $primary;
padding: 0; padding: 0;
margin: 0;
cursor: pointer; cursor: pointer;
margin-left: $-s; position: absolute;
} left: 7px;
button[type="submit"] { top: 7px;
margin-left: -$-l;
} }
input { input {
padding-right: $-l; display: block;
padding-left: $-l;
width: 300px; width: 300px;
max-width: 100%; max-width: 100%;
} }

View File

@ -12,7 +12,6 @@ header {
padding: $-m; padding: $-m;
} }
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
//margin-bottom: $-l;
.links { .links {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
@ -23,26 +22,27 @@ header {
} }
.links a { .links a {
display: inline-block; display: inline-block;
padding: $-l; padding: $-m $-l;
color: #FFF; color: #FFF;
&:last-child { &:last-child {
padding-right: 0; padding-right: 0;
} }
@include smaller-than($screen-md) { @include smaller-than($screen-md) {
padding: $-l $-s; padding: $-m $-s;
} }
} }
.avatar, .user-name { .avatar, .user-name {
display: inline-block; display: inline-block;
} }
.avatar { .avatar {
//margin-top: (45px/2);
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
.user-name { .user-name {
vertical-align: top; vertical-align: top;
padding-top: $-l; padding-top: $-m;
position: relative;
top: -3px;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
> * { > * {
@ -66,53 +66,57 @@ header {
} }
} }
} }
@include smaller-than($screen-md) { @include smaller-than($screen-sm) {
text-align: center; text-align: center;
.float.right { .float.right {
float: none; float: none;
} }
}
@include smaller-than($screen-sm) {
.links a { .links a {
padding: $-s; padding: $-s;
} }
form.search-box {
margin-top: 0;
}
.user-name { .user-name {
padding-top: $-s; padding-top: $-s;
} }
} }
.dropdown-container { }
font-size: 0.9em;
.header-search {
display: inline-block;
}
header .search-box {
display: inline-block;
margin-top: $-s;
input {
background-color: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #EEE;
}
button {
color: #EEE;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #DDD;
}
::-moz-placeholder { /* Firefox 19+ */
color: #DDD;
}
:-ms-input-placeholder { /* IE 10+ */
color: #DDD;
}
:-moz-placeholder { /* Firefox 18- */
color: #DDD;
}
@include smaller-than($screen-lg) {
max-width: 250px;
}
@include smaller-than($l) {
max-width: 200px;
} }
} }
form.search-box { @include smaller-than($s) {
margin-top: $-l *0.9; .header-search {
display: inline-block; display: block;
position: relative;
text-align: left;
input {
background-color: transparent;
border-radius: 24px;
border: 2px solid #EEE;
color: #EEE;
padding-left: $-m;
padding-right: $-l;
outline: 0;
}
button {
vertical-align: top;
margin-left: -$-l;
color: #FFF;
top: 6px;
right: 4px;
display: inline-block;
position: absolute;
&:hover {
color: #FFF;
}
} }
} }
@ -128,12 +132,12 @@ form.search-box {
font-size: 1.8em; font-size: 1.8em;
color: #fff; color: #fff;
font-weight: 400; font-weight: 400;
padding: $-l $-l $-l 0; padding: 14px $-l 14px 0;
vertical-align: top; vertical-align: top;
line-height: 1; line-height: 1;
} }
.logo-image { .logo-image {
margin: $-m $-s $-m 0; margin: $-xs $-s $-xs 0;
vertical-align: top; vertical-align: top;
height: 43px; height: 43px;
} }
@ -227,4 +231,7 @@ form.search-box {
border-bottom: 2px solid $primary; border-bottom: 2px solid $primary;
} }
} }
}
.faded-small .nav-tabs a {
padding: $-s $-m;
} }

View File

@ -36,7 +36,7 @@
<header id="header"> <header id="header">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-4 col-sm-4" ng-non-bindable> <div class="col-sm-4" ng-non-bindable>
<a href="{{ baseUrl('/') }}" class="logo"> <a href="{{ baseUrl('/') }}" class="logo">
@if(setting('app-logo', '') !== 'none') @if(setting('app-logo', '') !== 'none')
<img class="logo-image" src="{{ setting('app-logo', '') === '' ? baseUrl('/logo.png') : baseUrl(setting('app-logo', '')) }}" alt="Logo"> <img class="logo-image" src="{{ setting('app-logo', '') === '' ? baseUrl('/logo.png') : baseUrl(setting('app-logo', '')) }}" alt="Logo">
@ -46,14 +46,14 @@
@endif @endif
</a> </a>
</div> </div>
<div class="col-lg-4 col-sm-3 text-center"> <div class="col-sm-8">
<form action="{{ baseUrl('/search') }}" method="GET" class="search-box">
<input id="header-search-box-input" type="text" name="term" tabindex="2" value="{{ isset($searchTerm) ? $searchTerm : '' }}">
<button id="header-search-box-button" type="submit" class="text-button"><i class="zmdi zmdi-search"></i></button>
</form>
</div>
<div class="col-lg-4 col-sm-5">
<div class="float right"> <div class="float right">
<div class="header-search">
<form action="{{ baseUrl('/search') }}" method="GET" class="search-box">
<button id="header-search-box-button" type="submit"><i class="zmdi zmdi-search"></i> </button>
<input id="header-search-box-input" type="text" name="term" tabindex="2" placeholder="{{ trans('common.search') }}" value="{{ isset($searchTerm) ? $searchTerm : '' }}">
</form>
</div>
<div class="links text-center"> <div class="links text-center">
<a href="{{ baseUrl('/books') }}"><i class="zmdi zmdi-book"></i>{{ trans('entities.books') }}</a> <a href="{{ baseUrl('/books') }}"><i class="zmdi zmdi-book"></i>{{ trans('entities.books') }}</a>
@if(signedInUser() && userCan('settings-manage')) @if(signedInUser() && userCan('settings-manage'))

View File

@ -111,13 +111,11 @@
</p> </p>
@endif @endif
<div class="search-box"> <form v-on:submit.prevent="searchBook" class="search-box">
<form v-on:submit.prevent="searchBook"> <input v-model="searchTerm" v-on:change="checkSearchForm()" type="text" name="term" placeholder="{{ trans('entities.books_search_this') }}">
<input v-model="searchTerm" v-on:change="checkSearchForm()" type="text" name="term" placeholder="{{ trans('entities.books_search_this') }}"> <button type="submit"><i class="zmdi zmdi-search"></i></button>
<button type="submit"><i class="zmdi zmdi-search"></i></button> <button v-if="searching" v-cloak class="text-neg" v-on:click="clearSearch()" type="button"><i class="zmdi zmdi-close"></i></button>
<button v-if="searching" v-cloak class="text-neg" v-on:click="clearSearch()" type="button"><i class="zmdi zmdi-close"></i></button> </form>
</form>
</div>
<div class="activity"> <div class="activity">
<h3>{{ trans('entities.recent_activity') }}</h3> <h3>{{ trans('entities.recent_activity') }}</h3>

View File

@ -115,13 +115,11 @@
</div> </div>
@endif @endif
<div class="search-box"> <form v-on:submit.prevent="searchBook" class="search-box">
<form v-on:submit.prevent="searchBook"> <input v-model="searchTerm" v-on:change="checkSearchForm()" type="text" name="term" placeholder="{{ trans('entities.chapters_search_this') }}">
<input v-model="searchTerm" v-on:change="checkSearchForm()" type="text" name="term" placeholder="{{ trans('entities.chapters_search_this') }}"> <button type="submit"><i class="zmdi zmdi-search"></i></button>
<button type="submit"><i class="zmdi zmdi-search"></i></button> <button v-if="searching" v-cloak class="text-neg" v-on:click="clearSearch()" type="button"><i class="zmdi zmdi-close"></i></button>
<button v-if="searching" v-cloak class="text-neg" v-on:click="clearSearch()" type="button"><i class="zmdi zmdi-close"></i></button> </form>
</form>
</div>
@include('pages/sidebar-tree-list', ['book' => $book, 'sidebarTree' => $sidebarTree]) @include('pages/sidebar-tree-list', ['book' => $book, 'sidebarTree' => $sidebarTree])

View File

@ -43,7 +43,7 @@
} }
if (action === 'show-image-manager') { if (action === 'show-image-manager') {
window.ImageManager.showExternal((image) => { window.ImageManager.show((image) => {
if (!resize) { if (!resize) {
setImage(image); setImage(image);
return; return;

View File

@ -1,4 +1,5 @@
<style id="custom-styles" data-color="{{ setting('app-color') }}" data-color-light="{{ setting('app-color-light') }}"> <style id="custom-styles" data-color="{{ setting('app-color') }}" data-color-light="{{ setting('app-color-light') }}">
@if(setting('app-color'))
header, [back-to-top], .primary-background { header, [back-to-top], .primary-background {
background-color: {{ setting('app-color') }} !important; background-color: {{ setting('app-color') }} !important;
} }
@ -17,4 +18,5 @@
.text-primary, p.primary, p .primary, span.primary:hover, .text-primary:hover, a, a:hover, a:focus, .text-button, .text-button:hover, .text-button:focus { .text-primary, p.primary, p .primary, span.primary:hover, .text-primary:hover, a, a:hover, a:focus, .text-button, .text-button:hover, .text-button:focus {
color: {{ setting('app-color') }}; color: {{ setting('app-color') }};
} }
@endif
</style> </style>