mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-11-25 09:42:10 +08:00
Updated header design
This commit is contained in:
Dan Brown
parent
666c86b108
commit
28a9bd514f
BIN
public/logo.png
BIN
public/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 5.3 KiB |
|
|
@ -64,6 +64,7 @@ $button-border-radius: 2px;
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
user-select: none;
|
||||
&:focus, &:active {
|
||||
outline: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -248,15 +248,14 @@ div[editor-type="markdown"] .title-input.page-title input[type="text"] {
|
|||
border: none;
|
||||
color: $primary;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
margin-left: $-s;
|
||||
}
|
||||
button[type="submit"] {
|
||||
margin-left: -$-l;
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 7px;
|
||||
}
|
||||
input {
|
||||
padding-right: $-l;
|
||||
display: block;
|
||||
padding-left: $-l;
|
||||
width: 300px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ header {
|
|||
padding: $-m;
|
||||
}
|
||||
border-bottom: 1px solid #DDD;
|
||||
//margin-bottom: $-l;
|
||||
.links {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
|
@ -23,26 +22,27 @@ header {
|
|||
}
|
||||
.links a {
|
||||
display: inline-block;
|
||||
padding: $-l;
|
||||
padding: $-m $-l;
|
||||
color: #FFF;
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
@include smaller-than($screen-md) {
|
||||
padding: $-l $-s;
|
||||
padding: $-m $-s;
|
||||
}
|
||||
}
|
||||
.avatar, .user-name {
|
||||
display: inline-block;
|
||||
}
|
||||
.avatar {
|
||||
//margin-top: (45px/2);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.user-name {
|
||||
vertical-align: top;
|
||||
padding-top: $-l;
|
||||
padding-top: $-m;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
> * {
|
||||
|
|
@ -66,53 +66,57 @@ header {
|
|||
}
|
||||
}
|
||||
}
|
||||
@include smaller-than($screen-md) {
|
||||
@include smaller-than($screen-sm) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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 {
|
||||
margin-top: $-l *0.9;
|
||||
display: inline-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;
|
||||
}
|
||||
@include smaller-than($s) {
|
||||
.header-search {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -128,12 +132,12 @@ form.search-box {
|
|||
font-size: 1.8em;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
padding: $-l $-l $-l 0;
|
||||
padding: 14px $-l 14px 0;
|
||||
vertical-align: top;
|
||||
line-height: 1;
|
||||
}
|
||||
.logo-image {
|
||||
margin: $-m $-s $-m 0;
|
||||
margin: $-xs $-s $-xs 0;
|
||||
vertical-align: top;
|
||||
height: 43px;
|
||||
}
|
||||
|
|
@ -228,3 +232,6 @@ form.search-box {
|
|||
}
|
||||
}
|
||||
}
|
||||
.faded-small .nav-tabs a {
|
||||
padding: $-s $-m;
|
||||
}
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
<header id="header">
|
||||
<div class="container">
|
||||
<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">
|
||||
@if(setting('app-logo', '') !== 'none')
|
||||
<img class="logo-image" src="{{ setting('app-logo', '') === '' ? baseUrl('/logo.png') : baseUrl(setting('app-logo', '')) }}" alt="Logo">
|
||||
|
|
@ -46,14 +46,14 @@
|
|||
@endif
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-3 text-center">
|
||||
<div class="col-sm-8">
|
||||
<div class="float right">
|
||||
<div class="header-search">
|
||||
<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>
|
||||
<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="col-lg-4 col-sm-5">
|
||||
<div class="float right">
|
||||
<div class="links text-center">
|
||||
<a href="{{ baseUrl('/books') }}"><i class="zmdi zmdi-book"></i>{{ trans('entities.books') }}</a>
|
||||
@if(signedInUser() && userCan('settings-manage'))
|
||||
|
|
|
|||
|
|
@ -111,13 +111,11 @@
|
|||
</p>
|
||||
@endif
|
||||
|
||||
<div class="search-box">
|
||||
<form v-on:submit.prevent="searchBook">
|
||||
<form v-on:submit.prevent="searchBook" class="search-box">
|
||||
<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 v-if="searching" v-cloak class="text-neg" v-on:click="clearSearch()" type="button"><i class="zmdi zmdi-close"></i></button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="activity">
|
||||
<h3>{{ trans('entities.recent_activity') }}</h3>
|
||||
|
|
|
|||
|
|
@ -115,13 +115,11 @@
|
|||
</div>
|
||||
@endif
|
||||
|
||||
<div class="search-box">
|
||||
<form v-on:submit.prevent="searchBook">
|
||||
<form v-on:submit.prevent="searchBook" class="search-box">
|
||||
<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 v-if="searching" v-cloak class="text-neg" v-on:click="clearSearch()" type="button"><i class="zmdi zmdi-close"></i></button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@include('pages/sidebar-tree-list', ['book' => $book, 'sidebarTree' => $sidebarTree])
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
}
|
||||
|
||||
if (action === 'show-image-manager') {
|
||||
window.ImageManager.showExternal((image) => {
|
||||
window.ImageManager.show((image) => {
|
||||
if (!resize) {
|
||||
setImage(image);
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<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 {
|
||||
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 {
|
||||
color: {{ setting('app-color') }};
|
||||
}
|
||||
@endif
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user