Homepage: Made much nicer at ipad-like widths

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

diff --git a/resources/sass/_blocks.scss b/resources/sass/_blocks.scss
index 54c509ef928f5e4c6e2fe31124f3bdc68a7e732a..ca6efbbe1690adb400a04b839ff8e1a301a8ad40 100644 (file)
--- a/resources/sass/_blocks.scss
+++ b/resources/sass/_blocks.scss
@@ -6,6 +6,7 @@
   @include lightDark(background-color, #FFF, #222);
   box-shadow: $bs-card;
   border-radius: 3px;
   @include lightDark(background-color, #FFF, #222);
   box-shadow: $bs-card;
   border-radius: 3px;

+  break-inside: avoid;

   .body, p.empty-text {
     padding: $-m;
   }
   .body, p.empty-text {
     padding: $-m;
   }

diff --git a/resources/sass/styles.scss b/resources/sass/styles.scss
index b4691bc4dce1fc2229fbced60e0021e189a7746d..f52b61992622badae7a85b2a2a42c35fc6fadd76 100644 (file)
--- a/resources/sass/styles.scss
+++ b/resources/sass/styles.scss
@@ -184,6 +184,14 @@ $loadingSize: 10px;
   z-index: 150;
 }
 
   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 {
 .list-sort-container {
   display: inline-block;
   form {

diff --git a/resources/views/home/default.blade.php b/resources/views/home/default.blade.php
index 46015354da28dfc031173e1e6b9590795b367f2d..2d71e37f62172d77c694bfa1c245ef0a4b19457f 100644 (file)
--- a/resources/views/home/default.blade.php
+++ b/resources/views/home/default.blade.php
@@ -2,23 +2,19 @@
 
 @section('body')
 
 
 @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>
         </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">
             <div>
                 @if(count($draftPages) > 0)
                     <div id="recent-drafts" class="card mb-xl">