1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-30 07:32:39 +01:00

Cleaned up some existing tri-column views

This commit is contained in:
Dan Brown 2019-03-30 14:27:00 +00:00
parent 53a26a365c
commit 42e908c7f0
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
18 changed files with 90 additions and 56 deletions

12
package-lock.json generated
View File

@ -2833,7 +2833,8 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
@ -2844,7 +2845,8 @@
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -2961,7 +2963,8 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -2973,6 +2976,7 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -3119,6 +3123,7 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -3240,6 +3245,7 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",

View File

@ -322,6 +322,9 @@ div[editor-type="markdown"] .title-input.page-title input[type="text"] {
width: 300px; width: 300px;
max-width: 100%; max-width: 100%;
} }
&.flexible input {
width: 100%;
}
} }
.outline > input { .outline > input {

View File

@ -74,7 +74,6 @@ body.flexbox {
width: 100%; width: 100%;
} }
} }
@include smaller-than($m) { @include smaller-than($m) {
.content-wrap.card { .content-wrap.card {
padding: $-m $-l; padding: $-m $-l;
@ -83,15 +82,11 @@ body.flexbox {
.tri-layout-container { .tri-layout-container {
display: grid; display: grid;
grid-template-columns: 1fr minmax(auto, 940px) 1fr; margin-left: $-xl;
margin-right: $-xl;
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas: "a b c"; grid-template-areas: "a b c";
.tri-layout-right-contents, .tri-layout-left-contents { grid-column-gap: $-xxl;
padding-right: 3vw;
padding-left: 3vw;
max-width: 460px;
margin-left: auto;
margin-right: auto;
}
.tri-layout-right { .tri-layout-right {
grid-area: c; grid-area: c;
} }
@ -100,6 +95,7 @@ body.flexbox {
} }
.tri-layout-middle { .tri-layout-middle {
grid-area: b; grid-area: b;
padding-top: $-m;
} }
} }
@include smaller-than($xxl) { @include smaller-than($xxl) {
@ -110,24 +106,29 @@ body.flexbox {
grid-template-rows: max-content min-content; grid-template-rows: max-content min-content;
padding-right: $-l; padding-right: $-l;
.content-wrap.card { .content-wrap.card {
padding: $-l $-l; padding: $-l $-xl;
} }
} }
} }
@include larger-than($xxl) { @include larger-than($xxl) {
.tri-layout-left-contents, .tri-layout-right-contents { .tri-layout-left-contents, .tri-layout-right-contents {
padding: $-m;
position: sticky; position: sticky;
top: $-m; top: $-m;
max-height: 100vh; max-height: 100vh;
min-height: 50vh; min-height: 50vh;
overflow-y: scroll; overflow-y: scroll;
overflow-x: visible; overflow-x: hidden;
scrollbar-width: none; scrollbar-width: none;
-ms-overflow-style: none; -ms-overflow-style: none;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
} }
.tri-layout-middle-contents {
max-width: 940px;
margin: 0 auto;
}
} }
@include smaller-than($l) { @include smaller-than($l) {
@ -230,10 +231,14 @@ div[class^="col-"] img {
&.right-focus { &.right-focus {
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 2fr;
} }
&.large-gap { &.gap-xl {
grid-column-gap: $-xl; grid-column-gap: $-xl;
grid-row-gap: $-xl; grid-row-gap: $-xl;
} }
&.gap-xxl {
grid-column-gap: $-xxl;
grid-row-gap: $-xxl;
}
} }
.grid-card { .grid-card {
@ -296,7 +301,7 @@ div[class^="col-"] img {
.grid.half.collapse-xs { .grid.half.collapse-xs {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.grid.large-gap { .grid.gap-xl {
grid-column-gap: $-m; grid-column-gap: $-m;
grid-row-gap: $-m; grid-row-gap: $-m;
} }

View File

@ -202,14 +202,11 @@ header .search-box {
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
opacity: 0.7;
.icon-list-item { .icon-list-item {
width: auto; width: auto;
padding-top: $-xs; padding-top: $-xs;
padding-bottom: $-xs; padding-bottom: $-xs;
&:not(:hover) {
color: #666;
fill: #888;
}
} }
.separator { .separator {
display: inline-block; display: inline-block;
@ -218,6 +215,9 @@ header .search-box {
line-height: 0.8; line-height: 0.8;
margin: -2px 0 0; margin: -2px 0 0;
} }
&:hover {
opacity: 1;
}
} }
.breadcrumb-listing { .breadcrumb-listing {

View File

@ -1,12 +1,18 @@
.book-contents .entity-list-item { .book-contents .entity-list-item {
.icon { .icon {
width: 30px; width: 4px;
border-radius: 4px; border-radius: 1px;
justify-self: stretch; justify-self: stretch;
align-self: stretch; align-self: stretch;
height: auto; height: auto;
} }
.icon:after {
opacity: 0.5;
}
.icon svg {
display: none;
}
p { p {
margin-bottom: 0; margin-bottom: 0;
} }
@ -24,9 +30,9 @@
width: 100%; width: 100%;
position: relative; position: relative;
> .icon { > .icon {
width: 30px; width: 4px;
height: auto; height: auto;
border-radius: 0 0 4px 4px; border-radius: 0 0 1px 1px;
align-self: stretch; align-self: stretch;
flex-shrink: 0; flex-shrink: 0;
&:before { &:before {
@ -37,8 +43,14 @@
height: 1px; height: 1px;
background-color: currentColor; background-color: currentColor;
content: ''; content: '';
opacity: 0.2; opacity: 0.5;
} }
&:after {
opacity: 0.5;
}
}
.icon svg {
display: none;
} }
> .content { > .content {
flex: 1; flex: 1;
@ -50,7 +62,6 @@
.chapter-expansion-toggle:hover { .chapter-expansion-toggle:hover {
background-color: rgba(0, 0, 0, 0.06); background-color: rgba(0, 0, 0, 0.06);
} }
} }
.entity-list-item.has-children { .entity-list-item.has-children {
@ -368,9 +379,16 @@ ul.pagination {
} }
&:not(.no-hover):hover { &:not(.no-hover):hover {
text-decoration: none; text-decoration: none;
background-color: #DDD; background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px; border-radius: 4px;
} }
&.outline-hover {
border: 1px solid transparent;
}
&.outline-hover:hover {
background-color: transparent;
border-color: rgba(0, 0, 0, 0.1);
}
} }

View File

@ -16,7 +16,7 @@
@include('auth/forms/login/' . $authMethod) @include('auth/forms/login/' . $authMethod)
</div> </div>
<div class="grid half collapse-xs large-gap v-center"> <div class="grid half collapse-xs gap-xl v-center">
<div class="text-left ml-xxs"> <div class="text-left ml-xxs">
@include('components.custom-checkbox', [ @include('components.custom-checkbox', [
'name' => 'remember', 'name' => 'remember',

View File

@ -26,7 +26,7 @@
@include('form/password', ['name' => 'password', 'placeholder' => trans('auth.password_hint')]) @include('form/password', ['name' => 'password', 'placeholder' => trans('auth.password_hint')])
</div> </div>
<div class="grid half collapse-xs large-gap v-center mt-m"> <div class="grid half collapse-xs gap-xl v-center mt-m">
<div class="text-small"> <div class="text-small">
<a href="{{ baseUrl('/login') }}">Already have an account?</a> <a href="{{ baseUrl('/login') }}">Already have an account?</a>
</div> </div>

View File

@ -123,7 +123,7 @@
@endif @endif
<div class="mb-xl"> <div class="mb-xl">
<form v-on:submit.prevent="searchBook" class="search-box"> <form v-on:submit.prevent="searchBook" class="search-box flexible">
<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">@icon('search')</button> <button type="submit">@icon('search')</button>
<button v-if="searching" v-cloak class="text-neg" v-on:click="clearSearch()" type="button">@icon('close')</button> <button v-if="searching" v-cloak class="text-neg" v-on:click="clearSearch()" type="button">@icon('close')</button>

View File

@ -16,7 +16,7 @@
]]) ]])
</div> </div>
<div class="grid left-focus large-gap"> <div class="grid left-focus gap-xl">
<div> <div>
<div class="card content-wrap"> <div class="card content-wrap">
<h1 class="list-heading">{{ trans('entities.books_sort') }}</h1> <h1 class="list-heading">{{ trans('entities.books_sort') }}</h1>

View File

@ -132,7 +132,7 @@
@endif @endif
<div class="mb-xl"> <div class="mb-xl">
<form @submit.prevent="searchBook" class="search-box"> <form @submit.prevent="searchBook" class="search-box flexible">
<input v-model="searchTerm" @change="checkSearchForm()" type="text" name="term" placeholder="{{ trans('entities.chapters_search_this') }}"> <input v-model="searchTerm" @change="checkSearchForm()" type="text" name="term" placeholder="{{ trans('entities.chapters_search_this') }}">
<button type="submit">@icon('search')</button> <button type="submit">@icon('search')</button>
<button v-if="searching" v-cloak class="text-neg" @click="clearSearch()" type="button">@icon('close')</button> <button v-if="searching" v-cloak class="text-neg" @click="clearSearch()" type="button">@icon('close')</button>

View File

@ -7,7 +7,7 @@
<a expand-toggle=".entity-list.compact .entity-item-snippet" class="text-muted">@icon('expand-text'){{ trans('common.toggle_details') }}</a> <a expand-toggle=".entity-list.compact .entity-item-snippet" class="text-muted">@icon('expand-text'){{ trans('common.toggle_details') }}</a>
</div> </div>
<div class="grid contained third large-gap" id="home-default"> <div class="grid contained third gap-xxl" id="home-default">
<div> <div>
@if(count($draftPages) > 0) @if(count($draftPages) > 0)
<div id="recent-drafts" class="card mb-xl"> <div id="recent-drafts" class="card mb-xl">

View File

@ -3,7 +3,7 @@
{{--Show top level item--}} {{--Show top level item--}}
@if (count($crumbs) > 0 && array_first($crumbs) instanceof \BookStack\Entities\Book) @if (count($crumbs) > 0 && array_first($crumbs) instanceof \BookStack\Entities\Book)
<a href="{{ baseUrl('/books') }}" class="icon-list-item"> <a href="{{ baseUrl('/books') }}" class="text-book icon-list-item outline-hover">
<span>@icon('books')</span> <span>@icon('books')</span>
<span>{{ trans('entities.books') }}</span> <span>{{ trans('entities.books') }}</span>
</a> </a>
@ -25,7 +25,7 @@
{{ $crumb }} {{ $crumb }}
</a> </a>
@elseif (is_array($crumb)) @elseif (is_array($crumb))
<a href="{{ baseUrl($key) }}" class="icon-list-item"> <a href="{{ baseUrl($key) }}" class="icon-list-item outline-hover">
<span>@icon($crumb['icon'])</span> <span>@icon($crumb['icon'])</span>
<span>{{ $crumb['text'] }}</span> <span>{{ $crumb['text'] }}</span>
</a> </a>
@ -33,7 +33,7 @@
@if($breadcrumbCount > 0) @if($breadcrumbCount > 0)
@include('partials.breadcrumb-listing', ['entity' => $crumb]) @include('partials.breadcrumb-listing', ['entity' => $crumb])
@endif @endif
<a href="{{ $crumb->getUrl() }}" class="text-{{$crumb->getType()}} icon-list-item"> <a href="{{ $crumb->getUrl() }}" class="text-{{$crumb->getType()}} icon-list-item outline-hover">
<span>@icon($crumb->getType())</span> <span>@icon($crumb->getType())</span>
<span> <span>
{{ $crumb->getShortName() }} {{ $crumb->getShortName() }}

View File

@ -9,7 +9,7 @@
&nbsp; &nbsp;
</div> </div>
<div class="grid right-focus reverse-collapse large-gap"> <div class="grid right-focus reverse-collapse gap-xl">
<div> <div>
<div> <div>
<h5>{{ trans('entities.search_filters') }}</h5> <h5>{{ trans('entities.search_filters') }}</h5>

View File

@ -21,7 +21,7 @@
<div class="setting-list"> <div class="setting-list">
<div class="grid half large-gap"> <div class="grid half gap-xl">
<div> <div>
<label for="setting-app-public" class="setting-list-label">{{ trans('settings.app_public_access') }}</label> <label for="setting-app-public" class="setting-list-label">{{ trans('settings.app_public_access') }}</label>
<p class="small">{!! trans('settings.app_public_access_desc') !!}</p> <p class="small">{!! trans('settings.app_public_access_desc') !!}</p>
@ -40,7 +40,7 @@
</div> </div>
</div> </div>
<div class="grid half large-gap"> <div class="grid half gap-xl">
<div> <div>
<label class="setting-list-label">{{ trans('settings.app_secure_images') }}</label> <label class="setting-list-label">{{ trans('settings.app_secure_images') }}</label>
<p class="small">{{ trans('settings.app_secure_images_desc') }}</p> <p class="small">{{ trans('settings.app_secure_images_desc') }}</p>
@ -54,7 +54,7 @@
</div> </div>
</div> </div>
<div class="grid half large-gap"> <div class="grid half gap-xl">
<div> <div>
<label class="setting-list-label">{{ trans('settings.app_disable_comments') }}</label> <label class="setting-list-label">{{ trans('settings.app_disable_comments') }}</label>
<p class="small">{!! trans('settings.app_disable_comments_desc') !!}</p> <p class="small">{!! trans('settings.app_disable_comments_desc') !!}</p>
@ -84,7 +84,7 @@
<div class="setting-list"> <div class="setting-list">
<div class="grid half large-gap"> <div class="grid half gap-xl">
<div> <div>
<label for="setting-app-name" class="setting-list-label">{{ trans('settings.app_name') }}</label> <label for="setting-app-name" class="setting-list-label">{{ trans('settings.app_name') }}</label>
<p class="small">{{ trans('settings.app_name_desc') }}</p> <p class="small">{{ trans('settings.app_name_desc') }}</p>
@ -99,7 +99,7 @@
</div> </div>
</div> </div>
<div class="grid half large-gap"> <div class="grid half gap-xl">
<div> <div>
<label class="setting-list-label">{{ trans('settings.app_editor') }}</label> <label class="setting-list-label">{{ trans('settings.app_editor') }}</label>
<p class="small">{{ trans('settings.app_editor_desc') }}</p> <p class="small">{{ trans('settings.app_editor_desc') }}</p>
@ -112,7 +112,7 @@
</div> </div>
</div> </div>
<div class="grid half large-gap"> <div class="grid half gap-xl">
<div> <div>
<label class="setting-list-label">{{ trans('settings.app_logo') }}</label> <label class="setting-list-label">{{ trans('settings.app_logo') }}</label>
<p class="small">{!! trans('settings.app_logo_desc') !!}</p> <p class="small">{!! trans('settings.app_logo_desc') !!}</p>
@ -131,7 +131,7 @@
</div> </div>
</div> </div>
<div class="grid half large-gap"> <div class="grid half gap-xl">
<div> <div>
<label class="setting-list-label">{{ trans('settings.app_primary_color') }}</label> <label class="setting-list-label">{{ trans('settings.app_primary_color') }}</label>
<p class="small">{!! trans('settings.app_primary_color_desc') !!}</p> <p class="small">{!! trans('settings.app_primary_color_desc') !!}</p>
@ -142,7 +142,7 @@
</div> </div>
</div> </div>
<div homepage-control id="homepage-control" class="grid half large-gap"> <div homepage-control id="homepage-control" class="grid half gap-xl">
<div> <div>
<label for="setting-app-homepage" class="setting-list-label">{{ trans('settings.app_homepage') }}</label> <label for="setting-app-homepage" class="setting-list-label">{{ trans('settings.app_homepage') }}</label>
<p class="small">{{ trans('settings.app_homepage_desc') }}</p> <p class="small">{{ trans('settings.app_homepage_desc') }}</p>
@ -183,7 +183,7 @@
{!! csrf_field() !!} {!! csrf_field() !!}
<div class="setting-list"> <div class="setting-list">
<div class="grid half large-gap"> <div class="grid half gap-xl">
<div> <div>
<label class="setting-list-label">{{ trans('settings.reg_enable') }}</label> <label class="setting-list-label">{{ trans('settings.reg_enable') }}</label>
<p class="small">{!! trans('settings.reg_enable_desc') !!}</p> <p class="small">{!! trans('settings.reg_enable_desc') !!}</p>
@ -208,7 +208,7 @@
</div> </div>
</div> </div>
<div class="grid half large-gap"> <div class="grid half gap-xl">
<div> <div>
<label for="setting-registration-restrict" class="setting-list-label">{{ trans('settings.reg_confirm_restrict_domain') }}</label> <label for="setting-registration-restrict" class="setting-list-label">{{ trans('settings.reg_confirm_restrict_domain') }}</label>
<p class="small">{!! trans('settings.reg_confirm_restrict_domain_desc') !!}</p> <p class="small">{!! trans('settings.reg_confirm_restrict_domain_desc') !!}</p>
@ -218,7 +218,7 @@
</div> </div>
</div> </div>
<div class="grid half large-gap"> <div class="grid half gap-xl">
<div> <div>
<label class="setting-list-label">{{ trans('settings.reg_email_confirmation') }}</label> <label class="setting-list-label">{{ trans('settings.reg_email_confirmation') }}</label>
<p class="small">{{ trans('settings.reg_confirm_email_desc') }}</p> <p class="small">{{ trans('settings.reg_confirm_email_desc') }}</p>

View File

@ -16,7 +16,7 @@
<div id="image-cleanup" class="card content-wrap auto-height"> <div id="image-cleanup" class="card content-wrap auto-height">
<h2 class="list-heading">{{ trans('settings.maint_image_cleanup') }}</h2> <h2 class="list-heading">{{ trans('settings.maint_image_cleanup') }}</h2>
<div class="grid half large-gap"> <div class="grid half gap-xl">
<div> <div>
<p class="small muted">{{ trans('settings.maint_image_cleanup_desc') }}</p> <p class="small muted">{{ trans('settings.maint_image_cleanup_desc') }}</p>
</div> </div>

View File

@ -9,7 +9,7 @@
{{--</div>--}} {{--</div>--}}
{{--TODO - Cleanup toolbar usage--}} {{--TODO - Cleanup toolbar usage--}}
<div class="tri-layout-container mt-m" tri-layout @yield('container-attrs') > <div class="tri-layout-container" tri-layout @yield('container-attrs') >
<div class="tri-layout-left print-hidden pt-m" id="sidebar"> <div class="tri-layout-left print-hidden pt-m" id="sidebar">
<div class="tri-layout-left-contents"> <div class="tri-layout-left-contents">
@ -18,7 +18,9 @@
</div> </div>
<div class="@yield('body-wrap-classes') tri-layout-middle"> <div class="@yield('body-wrap-classes') tri-layout-middle">
@yield('body') <div class="tri-layout-middle-contents">
@yield('body')
</div>
</div> </div>
<div class="tri-layout-right print-hidden pt-m"> <div class="tri-layout-right print-hidden pt-m">

View File

@ -16,7 +16,7 @@
<div class="setting-list"> <div class="setting-list">
@include('users.form', ['model' => $user, 'authMethod' => $authMethod]) @include('users.form', ['model' => $user, 'authMethod' => $authMethod])
<div class="grid half large-gap"> <div class="grid half gap-xl">
<div> <div>
<label for="user-avatar" class="setting-list-label">{{ trans('settings.users_avatar') }}</label> <label for="user-avatar" class="setting-list-label">{{ trans('settings.users_avatar') }}</label>
<p class="small">{{ trans('settings.users_avatar_desc') }}</p> <p class="small">{{ trans('settings.users_avatar_desc') }}</p>
@ -35,7 +35,7 @@
</div> </div>
</div> </div>
<div class="grid half large-gap v-center"> <div class="grid half gap-xl v-center">
<div> <div>
<label for="user-language" class="setting-list-label">{{ trans('settings.users_preferred_language') }}</label> <label for="user-language" class="setting-list-label">{{ trans('settings.users_preferred_language') }}</label>
<p class="small"> <p class="small">

View File

@ -11,7 +11,7 @@
@if($authMethod === 'ldap' || $authMethod === 'system') @if($authMethod === 'ldap' || $authMethod === 'system')
<p class="small">{{ trans('settings.users_details_desc_no_email') }}</p> <p class="small">{{ trans('settings.users_details_desc_no_email') }}</p>
@endif @endif
<div class="grid half mt-m large-gap"> <div class="grid half mt-m gap-xl">
<div> <div>
<label for="name">{{ trans('auth.name') }}</label> <label for="name">{{ trans('auth.name') }}</label>
@include('form.text', ['name' => 'name']) @include('form.text', ['name' => 'name'])
@ -26,7 +26,7 @@
</div> </div>
@if($authMethod === 'ldap' && userCan('users-manage')) @if($authMethod === 'ldap' && userCan('users-manage'))
<div class="grid half large-gap v-center"> <div class="grid half gap-xl v-center">
<div> <div>
<label class="setting-list-label">{{ trans('settings.users_external_auth_id') }}</label> <label class="setting-list-label">{{ trans('settings.users_external_auth_id') }}</label>
<p class="small">{{ trans('settings.users_external_auth_id_desc') }}</p> <p class="small">{{ trans('settings.users_external_auth_id_desc') }}</p>
@ -56,7 +56,7 @@
{{ trans('settings.users_password_warning') }} {{ trans('settings.users_password_warning') }}
</p> </p>
@endif @endif
<div class="grid half mt-m large-gap"> <div class="grid half mt-m gap-xl">
<div> <div>
<label for="password">{{ trans('auth.password') }}</label> <label for="password">{{ trans('auth.password') }}</label>
@include('form.password', ['name' => 'password']) @include('form.password', ['name' => 'password'])