github-mirror/BookStack
github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-02-20 23:11:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Homepage: Made much nicer at ipad-like widths

Browse Source 
Updated default homepage layout to be much nicer at ipad-like widths by
switching to css-column approach at those breakpoints.
Also neated top actions by switching to simpler flexbox layout.

Fixes #4596
This commit is contained in:
Dan Brown 2023-10-07 12:38:54 +01:00
parent 2e2272343b
commit ccb3c2516a
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
3 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
resources/sass/_blocks.scss
View File

@ -6,6 +6,7 @@
@include lightDark(background-color, #FFF, #222);
box-shadow: $bs-card;
border-radius: 3px;
break-inside: avoid;
.body, p.empty-text {
padding: $-m;
}

8
resources/sass/styles.scss
View File

@ -184,6 +184,14 @@ $loadingSize: 10px;
z-index: 150;
}
@include between($s, $m) {
#home-default > .grid.third {
display: block;
columns: 2;
column-gap: $-l !important;
}
}
.list-sort-container {
display: inline-block;
form {

20
resources/views/home/default.blade.php
View File

@ -2,23 +2,19 @@
@section('body')
<div class="container px-xl py-s">
<div class="grid half">
<div>
<div class="icon-list inline block">
@include('home.parts.expand-toggle', ['classes' => 'text-muted text-link', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
</div>
</div>
<div class="text-m-right">
<div class="icon-list inline block">
@include('common.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-link'])
</div>
<div class="container px-xl py-s flex-container-row gap-l wrap justify-space-between">
<div class="icon-list inline block">
@include('home.parts.expand-toggle', ['classes' => 'text-muted text-link', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
</div>
<div>
<div class="icon-list inline block">
@include('common.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-link'])
</div>
</div>
</div>
<div class="container" id="home-default">
<div class="grid third gap-xxl no-row-gap" >
<div class="grid third gap-x-xxl no-row-gap">
<div>
@if(count($draftPages) > 0)
<div id="recent-drafts" class="card mb-xl">