Started on a design update

- Added base of new grid system.
- Added new margin/padding/visiblity helpers.
- Made header collapse to overflow menu on mobile.

diff --git a/app/Entities/Entity.php b/app/Entities/Entity.php
index 21d172e708ad48be7a969a5977c3c4897a9cee33..7917f83f83648f95aa3a2daa0741d0a018e00647 100644 (file)
--- a/app/Entities/Entity.php
+++ b/app/Entities/Entity.php
@@ -218,6 +218,20 @@ class Entity extends Ownable
         return $this->{$this->textField};
     }
 
         return $this->{$this->textField};
     }
 

+    /**
+     * Get an excerpt of this entity's descriptive content to the specified length.
+     * @param int $length
+     * @return mixed
+     */
+    public function getExcerpt(int $length = 100)
+    {
+        $text = $this->getText();
+        if (mb_strlen($text) > $length) {
+            $text = mb_substr($text, 0, $length-3) . '...';
+        }
+        return  trim($text);
+    }
+

     /**
      * Return a generalised, common raw query that can be 'unioned' across entities.
      * @return string
     /**
      * Return a generalised, common raw query that can be 'unioned' across entities.
      * @return string

diff --git a/app/Entities/Page.php b/app/Entities/Page.php
index ea7df16f4021025b048f91dd4e26f50741310e46..1c2cc5cff69c29daa5385d963bc89ab2ad4612ff 100644 (file)
--- a/app/Entities/Page.php
+++ b/app/Entities/Page.php
@@ -102,17 +102,6 @@ class Page extends Entity
         return baseUrl('/books/' . urlencode($bookSlug) . $midText . $idComponent);
     }
 
         return baseUrl('/books/' . urlencode($bookSlug) . $midText . $idComponent);
     }
 

-    /**
-     * Get an excerpt of this page's content to the specified length.
-     * @param int $length
-     * @return mixed
-     */
-    public function getExcerpt($length = 100)
-    {
-        $text = strlen($this->text) > $length ? substr($this->text, 0, $length-3) . '...' : $this->text;
-        return mb_convert_encoding($text, 'UTF-8');
-    }
-

     /**
      * Return a generalised, common raw query that can be 'unioned' across entities.
      * @param bool $withContent
     /**
      * Return a generalised, common raw query that can be 'unioned' across entities.
      * @param bool $withContent

diff --git a/resources/assets/icons/bookshelf.svg b/resources/assets/icons/bookshelf.svg
index 03da68f9629a049c4e8adde61080eb2fc6e51e00..f1e45eaf99639e344fb6ede008eab2dafb8abf36 100644 (file)
--- a/resources/assets/icons/bookshelf.svg
+++ b/resources/assets/icons/bookshelf.svg
@@ -1,2 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M1.088 2.566h17.42v17.42H1.088z" fill="none"/><path d="M4 20.058h15.892V22H4z"/><path d="M2.902 1.477h17.42v17.42H2.903z" fill="none"/><g><path d="M6.658 3.643V18h-2.38V3.643zM11.326 3.643V18H8.947V3.643zM14.722 3.856l5.613 13.214-2.19.93-5.613-13.214z"/></g></svg>
-
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M1.088 2.566h17.42v17.42H1.088z" fill="none"/><path d="M4 20.058h15.892V22H4z"/><path d="M2.902 1.477h17.42v17.42H2.903z" fill="none"/><g><path d="M6.658 3.643V18h-2.38V3.643zM11.326 3.643V18H8.947V3.643zM14.722 3.856l5.613 13.214-2.19.93-5.613-13.214z"/></g></svg>
\ No newline at end of file

diff --git a/resources/assets/js/components/header-mobile-toggle.js b/resources/assets/js/components/header-mobile-toggle.js
new file mode 100644 (file)
index 0000000..eccd4b8
--- /dev/null
+++ b/resources/assets/js/components/header-mobile-toggle.js
@@ -0,0 +1,31 @@
+
+class HeaderMobileToggle {
+
+    constructor(elem) {
+        this.elem = elem;
+        this.toggleButton = elem.querySelector('.mobile-menu-toggle');
+        this.menu = elem.querySelector('.header-links');
+        this.open = false;
+
+        this.toggleButton.addEventListener('click', this.onToggle.bind(this));
+        this.onWindowClick = this.onWindowClick.bind(this);
+    }
+
+    onToggle(event) {
+        this.open = !this.open;
+        this.menu.classList.toggle('show', this.open);
+        if (this.open) {
+            window.addEventListener('click', this.onWindowClick)
+        } else {
+            window.removeEventListener('click', this.onWindowClick)
+        }
+        event.stopPropagation();
+    }
+
+    onWindowClick(event) {
+        this.onToggle(event);
+    }
+
+}
+
+module.exports = HeaderMobileToggle;
\ No newline at end of file

diff --git a/resources/assets/js/components/index.js b/resources/assets/js/components/index.js
index 768e0983f12b385d4e1b722828f791028cce2bfc..a9ce31362a10c02aabac847935dd8443b3b6e1f6 100644 (file)
--- a/resources/assets/js/components/index.js
+++ b/resources/assets/js/components/index.js
@@ -20,6 +20,7 @@ let componentMapping = {
     'page-display': require('./page-display'),
     'shelf-sort': require('./shelf-sort'),
     'homepage-control': require('./homepage-control'),
     'page-display': require('./page-display'),
     'shelf-sort': require('./shelf-sort'),
     'homepage-control': require('./homepage-control'),

+    'header-mobile-toggle': require('./header-mobile-toggle'),

 };
 
 window.components = {};
 };
 
 window.components = {};

diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss
index c0f02ed7d78f34b48908f02d2ca7be84476e12c6..a19ca0278b7823193d71f3bebe0792ede03d93cd 100644 (file)
--- a/resources/assets/sass/_blocks.scss
+++ b/resources/assets/sass/_blocks.scss
@@ -24,33 +24,9 @@
   }
 }
 
   }
 }
 

-/*
-* Bordering
-*/
-.bordered {
-  border: 1px solid #BBB;
-  &.pos {
-    border-color: $positive;
-  }
-  &.neg {
-    border-color: $negative;
-  }
-  &.primary {
-    border-color: $primary;
-  }
-  &.secondary {
-    border-color: $secondary;
-  }
-  &.thick {
-    border-width: 2px;
-  }
-}
-.rounded {
-  border-radius: 3px;
-}
-

 /*
 * Padding
 /*
 * Padding

+* TODO - Remove these older styles

 */
 .nopadding {
   padding: 0;
 */
 .nopadding {
   padding: 0;


@@ -94,6 +70,7 @@
 
 /*
 * Margins
 
 /*
 * Margins

+* TODO - Remove these older styles

 */
 .margins {
   margin: $-l;
 */
 .margins {
   margin: $-l;


@@ -126,6 +103,38 @@
   }
 }
 
   }
 }
 

+@mixin spacing($prop, $propLetter) {
+  @each $sizeLetter, $size in $spacing {
+    .#{$propLetter}-#{$sizeLetter} {
+      #{$prop}: $size;
+    }
+    .#{$propLetter}x-#{$sizeLetter} {
+      #{$prop}-left: $size;
+      #{$prop}-right: $size;
+    }
+    .#{$propLetter}y-#{$sizeLetter} {
+      #{$prop}-top: $size;
+      #{$prop}-bottom: $size;
+    }
+    .#{$propLetter}t-#{$sizeLetter} {
+      #{$prop}-top: $size;
+    }
+    .#{$propLetter}r-#{$sizeLetter} {
+      #{$prop}-right: $size;
+    }
+    .#{$propLetter}b-#{$sizeLetter} {
+      #{$prop}-bottom: $size;
+    }
+    .#{$propLetter}l-#{$sizeLetter} {
+      #{$prop}-left: $size;
+    }
+  }
+
+}
+
+@include spacing('margin', 'm')
+@include spacing('padding', 'p')
+

 
 /**
  * Callouts
 
 /**
  * Callouts


@@ -183,18 +192,18 @@
 }
 
 .card {
 }
 
 .card {

-  margin: $-m;

   background-color: #FFF;
   background-color: #FFF;

-  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+  padding-bottom: $-xs;

   h3 {
     padding: $-m;
   h3 {
     padding: $-m;

-    border-bottom: 1px solid #E8E8E8;
+    padding-bottom: $-xs;

     margin: 0;
     font-size: $fs-s;
     margin: 0;
     font-size: $fs-s;

-    color: #888;
-    fill: #888;
+    color: #444;
+    fill: #666;

     font-weight: 400;
     font-weight: 400;

-    text-transform: uppercase;

   }
   h3 a {
     line-height: 1;
   }
   h3 a {
     line-height: 1;

diff --git a/resources/assets/sass/_colors.scss b/resources/assets/sass/_colors.scss
new file mode 100644 (file)
index 0000000..044a949
--- /dev/null
+++ b/resources/assets/sass/_colors.scss
@@ -0,0 +1,100 @@
+/*
+ * Text colors
+ */
+p.pos, p .pos, span.pos, .text-pos {
+  color: $positive;
+  fill: $positive;
+  &:hover {
+    color: $positive;
+    fill: $positive;
+  }
+}
+
+p.neg, p .neg, span.neg, .text-neg {
+  color: $negative;
+  fill: $negative;
+  &:hover {
+    color: $negative;
+    fill: $negative;
+  }
+}
+
+p.muted, p .muted, span.muted, .text-muted {
+  color: lighten($text-dark, 26%);
+  fill: lighten($text-dark, 26%);
+  &.small, .small {
+    color: lighten($text-dark, 32%);
+    fill: lighten($text-dark, 32%);
+  }
+}
+
+p.primary, p .primary, span.primary, .text-primary {
+  color: $primary;
+  fill: $primary;
+  &:hover {
+    color: $primary;
+    fill: $primary;
+  }
+}
+
+p.secondary, p .secondary, span.secondary, .text-secondary {
+  color: $secondary;
+  fill: $secondary;
+  &:hover {
+    color: $secondary;
+    fill: $secondary;
+  }
+}
+
+.text-bookshelf {
+  color: $color-bookshelf;
+  fill: $color-bookshelf;
+  &:hover {
+    color: $color-bookshelf;
+    fill: $color-bookshelf;
+  }
+}
+.text-book {
+  color: $color-book;
+  fill: $color-book;
+  &:hover {
+    color: $color-book;
+    fill: $color-book;
+  }
+}
+.text-page {
+  color: $color-page;
+  fill: $color-page;
+  &:hover {
+    color: $color-page;
+    fill: $color-page;
+  }
+  &.draft {
+    color: $color-page-draft;
+    fill: $color-page-draft;
+  }
+  &.draft:hover {
+    color: $color-page-draft;
+    fill: $color-page-draft;
+  }
+}
+.text-chapter {
+  color: $color-chapter;
+  fill: $color-chapter;
+  &:hover {
+    color: $color-chapter;
+    fill: $color-chapter;
+  }
+}
+.faded .text-book:hover {
+  color: $color-book !important;
+  fill: $color-book !important;
+}
+.faded .text-chapter:hover {
+  color: $color-chapter !important;
+  fill: $color-chapter !important;
+}
+.faded .text-page:hover {
+  color: $color-page !important;
+  fill: $color-page !important;
+}
\ No newline at end of file

diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index 0e1f85ce62cd1e801d006814b4e47ddaabab49d5..f4d155ddeb0ca671b855881b83110a5a18ebe0b9 100644 (file)
--- a/resources/assets/sass/_grid.scss
+++ b/resources/assets/sass/_grid.scss
@@ -270,6 +270,8 @@ div[class^="col-"] img {
   display: inline-block;
 }
 
   display: inline-block;
 }
 

+
+// TODO - Remove old BS grid system

 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
   position: relative;
   min-height: 1px;
 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
   position: relative;
   min-height: 1px;


@@ -908,18 +910,12 @@ div[class^="col-"] img {
 }
 .clearfix:before,
 .clearfix:after,
 }
 .clearfix:before,
 .clearfix:after,

-.container:before,
-.container:after,
-.container-fluid:before,
-.container-fluid:after,

 .row:before,
 .row:after {
   content: " ";
   display: table;
 }
 .clearfix:after,
 .row:before,
 .row:after {
   content: " ";
   display: table;
 }
 .clearfix:after,

-.container:after,
-.container-fluid:after,

 .row:after {
   clear: both;
 }
 .row:after {
   clear: both;
 }


@@ -928,3 +924,63 @@ div[class^="col-"] img {
   margin-left: auto;
   margin-right: auto;
 }
   margin-left: auto;
   margin-right: auto;
 }

+
+
+
+
+
+
+.grid {
+  display: grid;
+  grid-column-gap: $-m;
+  grid-row-gap: 0;
+  &.contained {
+    max-width: $max-width;
+    padding-left: $-m;
+    padding-right: $-m;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+@each $sizeLetter, $size in $spacing {
+  .grid.contained.space-#{$sizeLetter} {
+    padding-left: $size;
+    padding-right: $size;
+    grid-column-gap: $size;
+  }
+}
+
+@mixin grid-layout($name, $times) {
+  .grid.#{$name} {
+    grid-template-columns: repeat(#{$times}, 1fr);
+  }
+}
+
+@include grid-layout('thirds', 3)
+
+@each $sizeLetter, $size in $screen-sizes {
+  @include smaller-than($size) {
+    .grid.break-#{$sizeLetter} {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+
+
+/**
+ * Visibility
+ */
+
+@each $sizeLetter, $size in $screen-sizes {
+  @include smaller-than($size) {
+    .hide-under-#{$sizeLetter} {
+      display: none !important;
+    }
+  }
+  @include larger-than($size) {
+    .hide-over-#{$sizeLetter} {
+      display: none !important;
+    }
+  }
+}
\ No newline at end of file

diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss
index b66bab394d54ec732e12ec36b75620ffb0fe9ef8..d42ec8064bafa5ddaeeccd8dd614c60118cc0f68 100644 (file)
--- a/resources/assets/sass/_header.scss
+++ b/resources/assets/sass/_header.scss
@@ -2,21 +2,22 @@
  * Includes the main navigation header and the faded toolbar.
  */
 
  * Includes the main navigation header and the faded toolbar.
  */
 

+header .grid {
+  grid-template-columns: auto min-content auto;
+}
+

 header {
 header {

+  position: relative;

   display: block;
   z-index: 2;
   top: 0;
   background-color: $primary-dark;
   color: #fff;
   fill: #fff;
   display: block;
   z-index: 2;
   top: 0;
   background-color: $primary-dark;
   color: #fff;
   fill: #fff;

-  .padded {
-    padding: $-m;
-  }

   border-bottom: 1px solid #DDD;
   .links {
     display: inline-block;
     vertical-align: top;
   border-bottom: 1px solid #DDD;
   .links {
     display: inline-block;
     vertical-align: top;

-    margin-left: $-m;

   }
   .links a {
     display: inline-block;
   }
   .links a {
     display: inline-block;


@@ -28,15 +29,6 @@ header {
     padding-left: $-m;
     padding-right: 0;
   }
     padding-left: $-m;
     padding-right: 0;
   }

-  @include smaller-than($screen-md) {
-    .links a {
-      padding-left: $-s;
-      padding-right: $-s;
-    }
-    .dropdown-container {
-      padding-left: $-s;
-    }
-  }

   .avatar, .user-name {
     display: inline-block;
   }
   .avatar, .user-name {
     display: inline-block;
   }


@@ -63,27 +55,17 @@ header {
       padding-top: 4px;
       font-size: 18px;
     }
       padding-top: 4px;
       font-size: 18px;
     }

-    @include smaller-than($screen-md) {
+    @include between($l, $xl) {

       padding-left: $-xs;
       .name {
         display: none;
       }
     }
   }
       padding-left: $-xs;
       .name {
         display: none;
       }
     }
   }

-  @include smaller-than($screen-sm) {
-    text-align: center;
-    .float.right {
-      float: none;
-    }
-    .links a {
-      padding: $-s;
-    }
-    .user-name {
-      padding-top: $-s;
-    }
-  }

 }
 
 }
 

+
+

 .header-search {
   display: inline-block;
 }
 .header-search {
   display: inline-block;
 }


@@ -115,20 +97,11 @@ header .search-box {
   :-moz-placeholder { /* Firefox 18- */
     color: #DDD;
   }
   :-moz-placeholder { /* Firefox 18- */
     color: #DDD;
   }

-  @include smaller-than($screen-lg) {
-    max-width: 250px;
-  }
-  @include smaller-than($l) {
+  @include between($l, $xl) {

     max-width: 200px;
   }
 }
 
     max-width: 200px;
   }
 }
 

-@include smaller-than($s) {
-  .header-search {
-    display: block;
-  }
-}
-

 .logo {
   display: inline-block;
   &:hover {
 .logo {
   display: inline-block;
   &:hover {


@@ -151,6 +124,73 @@ header .search-box {
   height: 43px;
 }
 
   height: 43px;
 }
 

+.mobile-menu-toggle {
+  color: #FFF;
+  fill: #FFF;
+  font-size: 2em;
+  border: 2px solid rgba(255, 255, 255, 0.8);
+  border-radius: 4px;
+  padding: 0 $-xs;
+  position: absolute;
+  right: $-m;
+  top: 8px;
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+  svg {
+    margin: 0;
+  }
+}
+
+@include smaller-than($l) {
+  header .header-links {
+    display: none;
+    background-color: #FFF;
+    z-index: 10;
+    right: $-m;
+    border-radius: 4px;
+    overflow: hidden;
+    position: absolute;
+    box-shadow: $bs-hover;
+    margin-top: -$-xs;
+    &.show {
+      display: block;
+    }
+  }
+  header .links a, header .dropdown-container ul li a {
+    text-align: left;
+    display: block;
+    padding: $-s $-m;
+    color: $text-dark;
+    fill: $text-dark;
+    svg {
+      margin-right: $-s;
+    }
+    &:hover {
+      background-color: #EEE;
+      color: #444;
+      fill: #444;
+      text-decoration: none;
+    }
+  }
+  header .dropdown-container {
+    display: block;
+    padding-left: 0;
+  }
+  header .links {
+    display: block;
+  }
+  header .dropdown-container ul {
+    display: block !important;
+    position: relative;
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    box-shadow: none;
+  }
+}
+

 .breadcrumbs span.sep {
   color: #aaa;
   padding: 0 $-xs;
 .breadcrumbs span.sep {
   color: #aaa;
   padding: 0 $-xs;

diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss
index 18a7ea9cee0d52b617c8b5784d36f8abbf35b846..c28d7219f9ee89e8fe991efdc137b6ea39f1bbd3 100644 (file)
--- a/resources/assets/sass/_lists.scss
+++ b/resources/assets/sass/_lists.scss
@@ -227,20 +227,13 @@
 }
 
 .activity-list-item {
 }
 
 .activity-list-item {

-  padding: $-s 0;
+  padding: $-s $-m;
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  grid-column-gap: $-m;

   color: #888;
   fill: #888;
   color: #888;
   fill: #888;

-  border-bottom: 1px solid #EEE;

   font-size: 0.9em;
   font-size: 0.9em;

-  .left {
-    float: left;
-  }
-  .left + .right {
-    margin-left: 30px + $-s;
-  }
-  &:last-of-type {
-    border-bottom: 0;
-  }

 }
 
 ul.pagination {
 }
 
 ul.pagination {


@@ -281,9 +274,6 @@ ul.pagination {
 }
 
 .entity-list {
 }
 
 .entity-list {

-  > div {
-    padding: $-m 0;
-  }

   h4 {
     margin: 0;
   }
   h4 {
     margin: 0;
   }


@@ -304,13 +294,29 @@ ul.pagination {
   }
 }
 
   }
 }
 

-.card .entity-list-item, .card .activity-list-item {
-  padding-left: $-m;
-  padding-right: $-m;
+.entity-list-item {
+  padding: $-s $-m;
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  grid-column-gap: $-m;
+  align-items: top;
+  > .content {
+    padding-top: 2px;
+  }
+  .icon {
+    font-size: 1rem;
+  }
+  h4 a {
+    color: #666;
+  }
+}
+a.entity-list-item:hover {
+  text-decoration: none;
+  background-color: #F2F2F2;

 }
 
 .entity-list.compact {
 }
 
 .entity-list.compact {

-  font-size: 0.6em;
+  font-size: 0.6 * $fs-m;

   h4, a {
     line-height: 1.2;
   }
   h4, a {
     line-height: 1.2;
   }


@@ -331,6 +337,11 @@ ul.pagination {
   hr {
     margin: 0;
   }
   hr {
     margin: 0;
   }

+  @include smaller-than($m) {
+    h4 {
+      font-size: 1.666em;
+    }
+  }

 }
 
 .dropdown-container {
 }
 
 .dropdown-container {

diff --git a/resources/assets/sass/_mixins.scss b/resources/assets/sass/_mixins.scss
index 3d3101ca7130d152d1237976892c08a0d1b2c85b..13c81ae9eeb6da22f9496370c5f797f29545be8a 100644 (file)
--- a/resources/assets/sass/_mixins.scss
+++ b/resources/assets/sass/_mixins.scss
@@ -5,6 +5,9 @@
 @mixin larger-than($size) {
     @media screen and (min-width: $size) { @content; }
 }
 @mixin larger-than($size) {
     @media screen and (min-width: $size) { @content; }
 }

+@mixin between($min, $max) {
+  @media screen and (min-width: $min) and (max-width: $max) { @content; }
+}

 @mixin clearfix() {
   &:after {
     display: block;
 @mixin clearfix() {
   &:after {
     display: block;

diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss
index 21fdf90dea234ad25c95365f6a45e89a20045ca0..2d3a5852d1e64d32748e31e2fedc7c91a4097f3c 100755 (executable)
--- a/resources/assets/sass/_pages.scss
+++ b/resources/assets/sass/_pages.scss
@@ -363,4 +363,31 @@
   .mce-open {
     display: none;
   }
   .mce-open {
     display: none;
   }

+}
+
+.entity-icon {
+  font-size: 1.3em;
+  width: 1.88em;
+  height: 1.88em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border-radius: 1em;
+  position: relative;
+  overflow: hidden;
+  svg {
+    margin: 0;
+    bottom: 0;
+  }
+  &:after {
+    content: '';
+    position: absolute;
+    background-color: currentColor;
+    opacity: 0.2;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }

 }
\ No newline at end of file
 }
\ No newline at end of file

diff --git a/resources/assets/sass/_text.scss b/resources/assets/sass/_text.scss
index 0063c4672cca2c9d257c28e57c449b483c74f499..fa34d7fc8ae122625ff184d79f934e429f43c8b7 100644 (file)
--- a/resources/assets/sass/_text.scss
+++ b/resources/assets/sass/_text.scss
@@ -233,106 +233,6 @@ pre code {
   display: block;
   line-height: 1.6;
 }
   display: block;
   line-height: 1.6;
 }

-/*
- * Text colors
- */
-p.pos, p .pos, span.pos, .text-pos {
-  color: $positive;
-  fill: $positive;
-  &:hover {
-    color: $positive;
-    fill: $positive;
-  }
-}
-
-p.neg, p .neg, span.neg, .text-neg {
-  color: $negative;
-  fill: $negative;
-  &:hover {
-    color: $negative;
-    fill: $negative;
-  }
-}
-
-p.muted, p .muted, span.muted, .text-muted {
-       color: lighten($text-dark, 26%);
-       fill: lighten($text-dark, 26%);
-    &.small, .small {
-      color: lighten($text-dark, 32%);
-      fill: lighten($text-dark, 32%);
-    }
-}
-
-p.primary, p .primary, span.primary, .text-primary {
-       color: $primary;
-       fill: $primary;
-  &:hover {
-    color: $primary;
-    fill: $primary;
-  }
-}
-
-p.secondary, p .secondary, span.secondary, .text-secondary {
-       color: $secondary;
-       fill: $secondary;
-  &:hover {
-    color: $secondary;
-    fill: $secondary;
-  }
-}
-
-.text-bookshelf {
-  color: $color-bookshelf;
-  fill: $color-bookshelf;
-  &:hover {
-    color: $color-bookshelf;
-    fill: $color-bookshelf;
-  }
-}
-.text-book {
-  color: $color-book;
-  fill: $color-book;
-  &:hover {
-    color: $color-book;
-    fill: $color-book;
-  }
-}
-.text-page {
-  color: $color-page;
-  fill: $color-page;
-  &:hover {
-    color: $color-page;
-    fill: $color-page;
-  }
-  &.draft {
-    color: $color-page-draft;
-    fill: $color-page-draft;
-  }
-  &.draft:hover {
-    color: $color-page-draft;
-    fill: $color-page-draft;
-  }
-}
-.text-chapter {
-  color: $color-chapter;
-  fill: $color-chapter;
-  &:hover {
-    color: $color-chapter;
-    fill: $color-chapter;
-  }
-}
-.faded .text-book:hover {
-  color: $color-book !important;
-  fill: $color-book !important;
-}
-.faded .text-chapter:hover {
-  color: $color-chapter !important;
-  fill: $color-chapter !important;
-}
-.faded .text-page:hover {
-  color: $color-page !important;
-  fill: $color-page !important;
-}

 
 span.highlight {
   //background-color: rgba($primary, 0.2);
 
 span.highlight {
   //background-color: rgba($primary, 0.2);

diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss
index 006d1b3f08d105b40a54f2dc0f8ee2d11501be67..e32b2ab2c7bcc36b38c41427ffdcf4c78cf85efa 100644 (file)
--- a/resources/assets/sass/_variables.scss
+++ b/resources/assets/sass/_variables.scss
@@ -8,7 +8,7 @@ $max-width: 1400px;
 $xl: 1100px;
 $ipad-width: 1028px; // Is actually 1024 but we go over to ensure functionality.
 $l: 1000px;
 $xl: 1100px;
 $ipad-width: 1028px; // Is actually 1024 but we go over to ensure functionality.
 $l: 1000px;

-$m: 800px;
+$m: 880px;

 $s: 600px;
 $xs: 400px;
 $xxs: 360px;
 $s: 600px;
 $xs: 400px;
 $xxs: 360px;


@@ -16,6 +16,8 @@ $screen-lg: 1200px;
 $screen-md: 992px;
 $screen-sm: 768px;
 
 $screen-md: 992px;
 $screen-sm: 768px;
 

+$screen-sizes: (('xxs', $xxs), ('xs', $xs), ('s', $s), ('m', $m), ('l', $l), ('xl', $xl));
+

 // Spacing (Margins+Padding)
 $-xxxl: 64px;
 $-xxl: 48px;
 // Spacing (Margins+Padding)
 $-xxxl: 64px;
 $-xxl: 48px;


@@ -26,6 +28,8 @@ $-s: 12px;
 $-xs: 6px;
 $-xxs: 3px;
 
 $-xs: 6px;
 $-xxs: 3px;
 

+$spacing: (('xxs', $-xxs), ('xs', $-xs), ('s', $-s), ('m', $-m), ('l', $-l), ('xl', $-xl), ('xxl', $-xxl));
+

 // Fonts
 $text: -apple-system, BlinkMacSystemFont,
 "Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell",
 // Fonts
 $text: -apple-system, BlinkMacSystemFont,
 "Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell",

diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss
index 49ef77f3938255cf55e45278d19ec2b3a2520c56..2c657891a5e15e4324ac60c3c02383e62d7c7080 100644 (file)
--- a/resources/assets/sass/styles.scss
+++ b/resources/assets/sass/styles.scss
@@ -3,6 +3,7 @@
 @import "mixins";
 @import "html";
 @import "text";
 @import "mixins";
 @import "html";
 @import "text";

+@import "colors";

 @import "grid";
 @import "blocks";
 @import "buttons";
 @import "grid";
 @import "blocks";
 @import "buttons";

diff --git a/resources/views/base.blade.php b/resources/views/base.blade.php
index e6d0b776101f2773ee254883000ff990f129e796..bc139e17fa8c389f07ea79373c3ea893d52f29f3 100644 (file)
--- a/resources/views/base.blade.php
+++ b/resources/views/base.blade.php
@@ -17,57 +17,14 @@
     <script src="{{ baseUrl('/translations') }}"></script>
 
     @yield('head')
     <script src="{{ baseUrl('/translations') }}"></script>
 
     @yield('head')

-
-    @include('partials/custom-styles')
-
+    @include('partials.custom-styles')

     @include('partials.custom-head')
     @include('partials.custom-head')

-</head>
-<body class="@yield('body-class')" ng-app="bookStack">
-
-    @include('partials/notifications')

 
 

-    <header id="header">
-        <div class="container fluid">
-            <div class="row">
-                <div class="col-sm-4 col-md-3">
-                    <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">
-                        @endif
-                        @if (setting('app-name-header'))
-                            <span class="logo-text">{{ setting('app-name') }}</span>
-                        @endif
-                    </a>
-                </div>
-                <div class="col-sm-8 col-md-9">
-                    <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">@icon('search') </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">
-                            @if(userCan('bookshelf-view-all') || userCan('bookshelf-view-own'))
-                                <a href="{{ baseUrl('/shelves') }}">@icon('bookshelf'){{ trans('entities.shelves') }}</a>
-                            @endif
-                            <a href="{{ baseUrl('/books') }}">@icon('book'){{ trans('entities.books') }}</a>
-                            @if(signedInUser() && userCan('settings-manage'))
-                                <a href="{{ baseUrl('/settings') }}">@icon('settings'){{ trans('settings.settings') }}</a>
-                            @endif
-                            @if(!signedInUser())
-                                <a href="{{ baseUrl('/login') }}">@icon('login') {{ trans('auth.log_in') }}</a>
-                            @endif
-                        </div>
-                        @if(signedInUser())
-                            @include('partials._header-dropdown', ['currentUser' => user()])
-                        @endif
+</head>
+<body class="@yield('body-class')">

 
 

-                    </div>
-                </div>
-            </div>
-        </div>
-    </header>
+    @include('partials.notifications')
+    @include('common.header')

 
     <section id="content" class="block">
         @yield('content')
 
     <section id="content" class="block">
         @yield('content')


@@ -78,8 +35,10 @@
             @icon('chevron-up') <span>{{ trans('common.back_to_top') }}</span>
         </div>
     </div>
             @icon('chevron-up') <span>{{ trans('common.back_to_top') }}</span>
         </div>
     </div>

-@yield('bottom')
-<script src="{{ versioned_asset('dist/app.js') }}"></script>
-@yield('scripts')
+
+    @yield('bottom')
+    <script src="{{ versioned_asset('dist/app.js') }}"></script>
+    @yield('scripts')
+

 </body>
 </html>
 </body>
 </html>

diff --git a/resources/views/common/header.blade.php b/resources/views/common/header.blade.php
new file mode 100644 (file)
index 0000000..7f309e2
--- /dev/null
+++ b/resources/views/common/header.blade.php
@@ -0,0 +1,58 @@
+<header id="header" header-mobile-toggle>
+    <div class="grid break-l mx-l">
+        <div>
+            <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">
+                @endif
+                @if (setting('app-name-header'))
+                    <span class="logo-text">{{ setting('app-name') }}</span>
+                @endif
+            </a>
+            <div class="mobile-menu-toggle hide-over-l">@icon('more')</div>
+        </div>
+        <div class="header-search hide-under-l">
+            <form action="{{ baseUrl('/search') }}" method="GET" class="search-box">
+                <button id="header-search-box-button" type="submit">@icon('search') </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="text-right">
+            <div class="header-links">
+                <div class="links text-center">
+                    <a class="hide-over-l" href="{{ baseUrl('/search') }}">@icon('search'){{ trans('common.search') }}</a>
+                    @if(userCan('bookshelf-view-all') || userCan('bookshelf-view-own'))
+                        <a href="{{ baseUrl('/shelves') }}">@icon('bookshelf'){{ trans('entities.shelves') }}</a>
+                    @endif
+                    <a href="{{ baseUrl('/books') }}">@icon('book'){{ trans('entities.books') }}</a>
+                    @if(signedInUser() && userCan('settings-manage'))
+                        <a href="{{ baseUrl('/settings') }}">@icon('settings'){{ trans('settings.settings') }}</a>
+                    @endif
+                    @if(!signedInUser())
+                        <a href="{{ baseUrl('/login') }}">@icon('login'){{ trans('auth.log_in') }}</a>
+                    @endif
+                </div>
+                @if(signedInUser())
+                    <?php $currentUser = user(); ?>
+                    <div class="dropdown-container" dropdown>
+                        <span class="user-name hide-under-l" dropdown-toggle>
+                            <img class="avatar" src="{{$currentUser->getAvatar(30)}}" alt="{{ $currentUser->name }}">
+                            <span class="name">{{ $currentUser->getShortName(9) }}</span> @icon('caret-down')
+                        </span>
+                        <ul>
+                            <li>
+                                <a href="{{ baseUrl("/user/{$currentUser->id}") }}" class="text-primary">@icon('user'){{ trans('common.view_profile') }}</a>
+                            </li>
+                            <li>
+                                <a href="{{ baseUrl("/settings/users/{$currentUser->id}") }}" class="text-primary">@icon('edit'){{ trans('common.edit_profile') }}</a>
+                            </li>
+                            <li>
+                                <a href="{{ baseUrl('/logout') }}" class="text-neg">@icon('logout'){{ trans('auth.logout') }}</a>
+                            </li>
+                        </ul>
+                    </div>
+                @endif
+            </div>
+        </div>
+    </div>
+</header>
\ No newline at end of file

diff --git a/resources/views/common/home.blade.php b/resources/views/common/home.blade.php
index cc20fc68e2d91d97a7dc89236bb82e052f86fb9b..72db5f6d25b734367e5524e4c95a94a1413411dd 100644 (file)
--- a/resources/views/common/home.blade.php
+++ b/resources/views/common/home.blade.php
@@ -1,57 +1,53 @@
 @extends('simple-layout')
 
 @extends('simple-layout')
 

-@section('toolbar')
-    <div class="col-sm-6 faded">
-        <div class="action-buttons text-left">
-            <a expand-toggle=".entity-list.compact .entity-item-snippet" class="text-primary text-button">@icon('expand-text'){{ trans('common.toggle_details') }}</a>
-        </div>
-    </div>
-@stop

 
 @section('body')
 
 
 @section('body')
 

-    <div class="container" id="home-default">
-        <div class="row">
-
-            <div class="col-sm-4">
-                @if(count($draftPages) > 0)
-                    <div id="recent-drafts" class="card">
-                        <h3>@icon('edit') {{ trans('entities.my_recent_drafts') }}</h3>
-                        @include('partials/entity-list', ['entities' => $draftPages, 'style' => 'compact'])
-                    </div>
-                @endif
+    <div class="container px-xl py-l">
+        <a expand-toggle=".entity-list.compact .entity-item-snippet" class="text-muted">@icon('expand-text'){{ trans('common.toggle_details') }}</a>
+    </div>

 
 

-                <div class="card">
-                    <h3>@icon($signedIn ? 'view' : 'star-circle') {{ trans('entities.' . ($signedIn ? 'my_recently_viewed' : 'books_recent')) }}</h3>
-                    @include('partials/entity-list', [
-                        'entities' => $recents,
-                        'style' => 'compact',
-                        'emptyText' => $signedIn ? trans('entities.no_pages_viewed') : trans('entities.books_empty')
-                        ])
+    <div class="grid contained thirds space-xl break-m" id="home-default">
+        <div>
+            @if(count($draftPages) > 0)
+                <div id="recent-drafts" class="card mb-xl">
+                    <h3>{{ trans('entities.my_recent_drafts') }}</h3>
+                    @include('partials/entity-list', ['entities' => $draftPages, 'style' => 'compact'])

                 </div>
                 </div>

+            @endif
+
+            <div id="{{ $signedIn ? 'recently-viewed' : 'recent-books' }}" class="card mb-xl">
+                <h3>{{ trans('entities.' . ($signedIn ? 'my_recently_viewed' : 'books_recent')) }}</h3>
+                @include('partials/entity-list', [
+                    'entities' => $recents,
+                    'style' => 'compact',
+                    'emptyText' => $signedIn ? trans('entities.no_pages_viewed') : trans('entities.books_empty')
+                    ])

             </div>
             </div>

+        </div>

 
 

-            <div class="col-sm-4">
-                <div class="card">
-                    <h3>@icon('file') <a class="no-color" href="{{ baseUrl("/pages/recently-updated") }}">{{ trans('entities.recently_updated_pages') }}</a></h3>
-                    <div id="recently-updated-pages">
-                        @include('partials/entity-list', [
-                        'entities' => $recentlyUpdatedPages,
-                        'style' => 'compact',
-                        'emptyText' => trans('entities.no_pages_recently_updated')
-                        ])
-                    </div>
+        <div>
+            <div id="recent-pages" class="card mb-xl">
+                <h3><a class="no-color" href="{{ baseUrl("/pages/recently-updated") }}">{{ trans('entities.recently_updated_pages') }}</a></h3>
+                <div id="recently-updated-pages">
+                    @include('partials/entity-list', [
+                    'entities' => $recentlyUpdatedPages,
+                    'style' => 'compact',
+                    'emptyText' => trans('entities.no_pages_recently_updated')
+                    ])

                 </div>
             </div>
                 </div>
             </div>

+        </div>

 
 

-            <div class="col-sm-4" id="recent-activity">
-                <div class="card">
-                    <h3>@icon('time') {{ trans('entities.recent_activity') }}</h3>
+        <div>
+            <div id="recent-activity">
+                <div class="card mb-xl">
+                    <h3>{{ trans('entities.recent_activity') }}</h3>

                     @include('partials/activity-list', ['activity' => $activity])
                 </div>
             </div>
                     @include('partials/activity-list', ['activity' => $activity])
                 </div>
             </div>

-

         </div>
         </div>

+

     </div>
 
 
     </div>
 
 

diff --git a/resources/views/pages/list-item.blade.php b/resources/views/pages/list-item.blade.php
index b13bb0f120211dda32f3f60fc1c7acaa5cda059f..f3c79791a792a647df9a8a1005357625b3aa8cf4 100644 (file)
--- a/resources/views/pages/list-item.blade.php
+++ b/resources/views/pages/list-item.blade.php
@@ -1,44 +1,51 @@
 <div class="page {{$page->draft ? 'draft' : ''}} entity-list-item" data-entity-type="page" data-entity-id="{{$page->id}}">
 <div class="page {{$page->draft ? 'draft' : ''}} entity-list-item" data-entity-type="page" data-entity-id="{{$page->id}}">

-    <h4>
-        @if (isset($showPath) && $showPath)
-            <a href="{{ $page->book->getUrl() }}" class="text-book">
-                @icon('book'){{ $page->book->getShortName() }}
-            </a>
-            <span class="text-muted">&nbsp;&nbsp;&raquo;&nbsp;&nbsp;</span>
-            @if($page->chapter)
-                <a href="{{ $page->chapter->getUrl() }}" class="text-chapter">
-                    @icon('chapter'){{ $page->chapter->getShortName() }}
+    <div class="entity-icon text-page">@icon('page')</div>
+    <div class="content">
+
+        <h4>
+            @if (isset($showPath) && $showPath)
+                <a href="{{ $page->book->getUrl() }}" class="text-book">
+                    @icon('book'){{ $page->book->getShortName() }}

                 </a>
                 <span class="text-muted">&nbsp;&nbsp;&raquo;&nbsp;&nbsp;</span>
                 </a>
                 <span class="text-muted">&nbsp;&nbsp;&raquo;&nbsp;&nbsp;</span>

+                @if($page->chapter)
+                    <a href="{{ $page->chapter->getUrl() }}" class="text-chapter">
+                        @icon('chapter'){{ $page->chapter->getShortName() }}
+                    </a>
+                    <span class="text-muted">&nbsp;&nbsp;&raquo;&nbsp;&nbsp;</span>
+                @endif

             @endif
             @endif

+            <a href="{{ $page->getUrl() }}" class="entity-list-item-link"><span class="entity-list-item-name break-text">{{ $page->name }}</span></a>
+        </h4>
+
+
+        <div class="entity-item-snippet">
+            @if(isset($page->searchSnippet))
+                <p class="text-muted break-text">{!! $page->searchSnippet !!}</p>
+            @else
+                <p class="text-muted break-text">{{ $page->getExcerpt() }}</p>
+            @endif
+        </div>
+
+        @if(isset($style) && $style === 'detailed')
+            <div class="row meta text-muted text-small">
+                <div class="col-md-6">
+                    @include('partials.entity-meta', ['entity' => $page])
+                </div>
+                <div class="col-md-6">
+                    <a class="text-book" href="{{ $page->book->getUrl() }}">@icon('book'){{ $page->book->getShortName(30) }}</a>
+                    <br>
+                    @if($page->chapter)
+                        <a class="text-chapter" href="{{ $page->chapter->getUrl() }}">@icon('chapter'){{ $page->chapter->getShortName(30) }}</a>
+                    @else
+                        @icon('chapter') {{ trans('entities.pages_not_in_chapter') }}
+                    @endif
+                </div>
+            </div>

         @endif
         @endif

-        <a href="{{ $page->getUrl() }}" class="text-page entity-list-item-link">@icon('page')<span class="entity-list-item-name break-text">{{ $page->name }}</span></a>
-    </h4>
-
-    <div class="entity-item-snippet">
-        @if(isset($page->searchSnippet))
-            <p class="text-muted break-text">{!! $page->searchSnippet !!}</p>
-        @else
-            <p class="text-muted break-text">{{ $page->getExcerpt() }}</p>
-        @endif
+

     </div>
 
     </div>
 

-    @if(isset($style) && $style === 'detailed')
-        <div class="row meta text-muted text-small">
-            <div class="col-md-6">
-                @include('partials.entity-meta', ['entity' => $page])
-            </div>
-            <div class="col-md-6">
-                <a class="text-book" href="{{ $page->book->getUrl() }}">@icon('book'){{ $page->book->getShortName(30) }}</a>
-                <br>
-                @if($page->chapter)
-                    <a class="text-chapter" href="{{ $page->chapter->getUrl() }}">@icon('chapter'){{ $page->chapter->getShortName(30) }}</a>
-                @else
-                    @icon('chapter') {{ trans('entities.pages_not_in_chapter') }}
-                @endif
-            </div>
-        </div>
-    @endif

 
 
 </div>
\ No newline at end of file
 
 
 </div>
\ No newline at end of file

diff --git a/resources/views/partials/_header-dropdown.blade.php b/resources/views/partials/_header-dropdown.blade.php
deleted file mode 100644 (file)
index 176e007..0000000
--- a/resources/views/partials/_header-dropdown.blade.php
+++ /dev/null
@@ -1,17 +0,0 @@
-<div class="dropdown-container" dropdown>
-    <span class="user-name" dropdown-toggle>
-        <img class="avatar" src="{{$currentUser->getAvatar(30)}}" alt="{{ $currentUser->name }}">
-        <span class="name">{{ $currentUser->getShortName(9) }}</span> @icon('caret-down')
-    </span>
-    <ul>
-        <li>
-            <a href="{{ baseUrl("/user/{$currentUser->id}") }}" class="text-primary">@icon('user') {{ trans('common.view_profile') }}</a>
-        </li>
-        <li>
-            <a href="{{ baseUrl("/settings/users/{$currentUser->id}") }}" class="text-primary">@icon('edit') {{ trans('common.edit_profile') }}</a>
-        </li>
-        <li>
-            <a href="{{ baseUrl('/logout') }}" class="text-neg">@icon('logout') {{ trans('auth.logout') }}</a>
-        </li>
-    </ul>
-</div>
\ No newline at end of file

diff --git a/resources/views/partials/activity-item.blade.php b/resources/views/partials/activity-item.blade.php
index 1dbfc9de81f1e00a705ff97d763b53f0e29e546f..39fb35fe2728c4c50c2ee5392414f9dfdee0a5c8 100644 (file)
--- a/resources/views/partials/activity-item.blade.php
+++ b/resources/views/partials/activity-item.blade.php
@@ -1,13 +1,13 @@
 
 {{--Requires an Activity item with the name $activity passed in--}}
 
 
 {{--Requires an Activity item with the name $activity passed in--}}
 

-@if($activity->user)
-    <div class="left">
-        <img class="avatar" src="{{ $activity->user->getAvatar(30) }}" alt="{{ $activity->user->name }}">
-    </div>
-@endif
+<div>
+    @if($activity->user)
+    <img class="avatar" src="{{ $activity->user->getAvatar(30) }}" alt="{{ $activity->user->name }}">
+    @endif
+</div>

 
 

-<div class="right" v-pre>
+<div v-pre>

     @if($activity->user)
         <a href="{{ $activity->user->getProfileUrl() }}">{{ $activity->user->name }}</a>
     @else
     @if($activity->user)
         <a href="{{ $activity->user->getProfileUrl() }}">{{ $activity->user->name }}</a>
     @else

diff --git a/resources/views/partials/entity-list-item.blade.php b/resources/views/partials/entity-list-item.blade.php
new file mode 100644 (file)
index 0000000..32d2285
--- /dev/null
+++ b/resources/views/partials/entity-list-item.blade.php
@@ -0,0 +1,13 @@
+<?php $type = $entity->getType(); ?>
+<a href="{{ $entity->getUrl() }}" class="{{$type}} {{$type === 'page' && $entity->draft ? 'draft' : ''}} entity-list-item" data-entity-type="{{$type}}" data-entity-id="{{$entity->id}}">
+        <div class="entity-icon text-{{$type}}">@icon($type)</div>
+        <div class="content">
+
+                <h4 class="entity-list-item-name break-text">{{ $entity->name }}</h4>
+
+                <div class="entity-item-snippet">
+                     <p class="text-muted break-text">{{ $entity->getExcerpt() }}</p>
+                </div>
+
+        </div>
+</a>
\ No newline at end of file

diff --git a/resources/views/partials/entity-list.blade.php b/resources/views/partials/entity-list.blade.php
index 371f38d71c6b5e0c7a9de5a09d1c5e61f7ec38cc..b2a26f1e497465169c5ccdb30fbdc25c66f6a678 100644 (file)
--- a/resources/views/partials/entity-list.blade.php
+++ b/resources/views/partials/entity-list.blade.php
@@ -1,25 +1,12 @@
 
 

-<div class="entity-list @if(isset($style)){{ $style }}@endif">
+<div class="entity-list {{ $style ?? '' }}">

     @if(count($entities) > 0)
         @foreach($entities as $index => $entity)
     @if(count($entities) > 0)
         @foreach($entities as $index => $entity)

-            @if($entity->isA('page'))
-                @include('pages/list-item', ['page' => $entity])
-            @elseif($entity->isA('book'))
-                @include('books/list-item', ['book' => $entity])
-            @elseif($entity->isA('chapter'))
-                @include('chapters/list-item', ['chapter' => $entity, 'hidePages' => true])
-            @elseif($entity->isA('bookshelf'))
-                @include('shelves/list-item', ['bookshelf' => $entity])
-            @endif
-
-            @if($index !== count($entities) - 1)
-                <hr>
-            @endif
-
+            @include('partials.entity-list-item', ['entity' => $entity])

         @endforeach
     @else
         <p class="text-muted empty-text">
         @endforeach
     @else
         <p class="text-muted empty-text">

-            {{ $emptyText or trans('common.no_items') }}
+            {{ $emptyText ?? trans('common.no_items') }}

         </p>
     @endif
 </div>
\ No newline at end of file
         </p>
     @endif
 </div>
\ No newline at end of file

diff --git a/resources/views/simple-layout.blade.php b/resources/views/simple-layout.blade.php
index eeb4129e0497f32132b9d8c6915bec2d9def7307..b87cd37db8c3c9cdfff9d42db3f56039523c63ab 100644 (file)
--- a/resources/views/simple-layout.blade.php
+++ b/resources/views/simple-layout.blade.php
@@ -5,13 +5,7 @@
 @section('content')
 
     <div class="toolbar-container">
 @section('content')
 
     <div class="toolbar-container">

-        <div class="faded-small toolbar">
-            <div class="container fluid">
-                <div class="row">
-                    @yield('toolbar')
-                </div>
-            </div>
-        </div>
+        @yield('toolbar')

     </div>
 
 
     </div>