diff --git a/app/Entities/Entity.php b/app/Entities/Entity.php
index 21d172e70..7917f83f8 100644
--- a/app/Entities/Entity.php
+++ b/app/Entities/Entity.php
@@ -218,6 +218,20 @@ class Entity extends Ownable
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
diff --git a/app/Entities/Page.php b/app/Entities/Page.php
index ea7df16f4..1c2cc5cff 100644
--- 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);
}
- /**
- * 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
diff --git a/resources/assets/icons/bookshelf.svg b/resources/assets/icons/bookshelf.svg
index 03da68f96..f1e45eaf9 100644
--- 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
index 000000000..eccd4b8f0
--- /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 768e0983f..a9ce31362 100644
--- 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'),
+ 'header-mobile-toggle': require('./header-mobile-toggle'),
};
window.components = {};
diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss
index c0f02ed7d..a19ca0278 100644
--- 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
+* TODO - Remove these older styles
*/
.nopadding {
padding: 0;
@@ -94,6 +70,7 @@
/*
* Margins
+* TODO - Remove these older styles
*/
.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
@@ -183,18 +192,18 @@
}
.card {
- margin: $-m;
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;
- border-bottom: 1px solid #E8E8E8;
+ padding-bottom: $-xs;
margin: 0;
font-size: $fs-s;
- color: #888;
- fill: #888;
+ color: #444;
+ fill: #666;
font-weight: 400;
- text-transform: uppercase;
}
h3 a {
line-height: 1;
diff --git a/resources/assets/sass/_colors.scss b/resources/assets/sass/_colors.scss
new file mode 100644
index 000000000..044a9498b
--- /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 0e1f85ce6..f4d155dde 100644
--- a/resources/assets/sass/_grid.scss
+++ b/resources/assets/sass/_grid.scss
@@ -270,6 +270,8 @@ div[class^="col-"] img {
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;
@@ -908,18 +910,12 @@ div[class^="col-"] img {
}
.clearfix:before,
.clearfix:after,
-.container:before,
-.container:after,
-.container-fluid:before,
-.container-fluid:after,
.row:before,
.row:after {
content: " ";
display: table;
}
.clearfix:after,
-.container:after,
-.container-fluid:after,
.row:after {
clear: both;
}
@@ -928,3 +924,63 @@ div[class^="col-"] img {
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 b66bab394..d42ec8064 100644
--- 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.
*/
+header .grid {
+ grid-template-columns: auto min-content auto;
+}
+
header {
+ position: relative;
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;
- margin-left: $-m;
}
.links a {
display: inline-block;
@@ -28,15 +29,6 @@ header {
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;
}
@@ -63,27 +55,17 @@ header {
padding-top: 4px;
font-size: 18px;
}
- @include smaller-than($screen-md) {
+ @include between($l, $xl) {
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;
}
@@ -115,20 +97,11 @@ header .search-box {
:-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;
}
}
-@include smaller-than($s) {
- .header-search {
- display: block;
- }
-}
-
.logo {
display: inline-block;
&:hover {
@@ -151,6 +124,73 @@ header .search-box {
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;
diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss
index 18a7ea9ce..c28d7219f 100644
--- a/resources/assets/sass/_lists.scss
+++ b/resources/assets/sass/_lists.scss
@@ -227,20 +227,13 @@
}
.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;
- border-bottom: 1px solid #EEE;
font-size: 0.9em;
- .left {
- float: left;
- }
- .left + .right {
- margin-left: 30px + $-s;
- }
- &:last-of-type {
- border-bottom: 0;
- }
}
ul.pagination {
@@ -281,9 +274,6 @@ ul.pagination {
}
.entity-list {
- > div {
- padding: $-m 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 {
- font-size: 0.6em;
+ font-size: 0.6 * $fs-m;
h4, a {
line-height: 1.2;
}
@@ -331,6 +337,11 @@ ul.pagination {
hr {
margin: 0;
}
+ @include smaller-than($m) {
+ h4 {
+ font-size: 1.666em;
+ }
+ }
}
.dropdown-container {
diff --git a/resources/assets/sass/_mixins.scss b/resources/assets/sass/_mixins.scss
index 3d3101ca7..13c81ae9e 100644
--- 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 between($min, $max) {
+ @media screen and (min-width: $min) and (max-width: $max) { @content; }
+}
@mixin clearfix() {
&:after {
display: block;
diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss
index 21fdf90de..2d3a5852d 100755
--- a/resources/assets/sass/_pages.scss
+++ b/resources/assets/sass/_pages.scss
@@ -363,4 +363,31 @@
.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
diff --git a/resources/assets/sass/_text.scss b/resources/assets/sass/_text.scss
index 0063c4672..fa34d7fc8 100644
--- a/resources/assets/sass/_text.scss
+++ b/resources/assets/sass/_text.scss
@@ -233,106 +233,6 @@ pre code {
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);
diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss
index 006d1b3f0..e32b2ab2c 100644
--- 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;
-$m: 800px;
+$m: 880px;
$s: 600px;
$xs: 400px;
$xxs: 360px;
@@ -16,6 +16,8 @@ $screen-lg: 1200px;
$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;
@@ -26,6 +28,8 @@ $-s: 12px;
$-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",
diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss
index 49ef77f39..2c657891a 100644
--- a/resources/assets/sass/styles.scss
+++ b/resources/assets/sass/styles.scss
@@ -3,6 +3,7 @@
@import "mixins";
@import "html";
@import "text";
+@import "colors";
@import "grid";
@import "blocks";
@import "buttons";
diff --git a/resources/views/base.blade.php b/resources/views/base.blade.php
index e6d0b7761..bc139e17f 100644
--- a/resources/views/base.blade.php
+++ b/resources/views/base.blade.php
@@ -17,57 +17,14 @@
<script src="{{ baseUrl('/translations') }}"></script>
@yield('head')
-
- @include('partials/custom-styles')
-
+ @include('partials.custom-styles')
@include('partials.custom-head')
+
</head>
-<body class="@yield('body-class')" ng-app="bookStack">
+<body class="@yield('body-class')">
- @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
-
- </div>
- </div>
- </div>
- </div>
- </header>
+ @include('partials.notifications')
+ @include('common.header')
<section id="content" class="block">
@yield('content')
@@ -78,8 +35,10 @@
@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>
diff --git a/resources/views/common/header.blade.php b/resources/views/common/header.blade.php
new file mode 100644
index 000000000..7f309e21f
--- /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 cc20fc68e..72db5f6d2 100644
--- a/resources/views/common/home.blade.php
+++ b/resources/views/common/home.blade.php
@@ -1,57 +1,53 @@
@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')
- <div class="container" id="home-default">
- <div class="row">
+ <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="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="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>
+ @endif
- <div class="card">
- <h3>@icon($signedIn ? 'view' : 'star-circle') {{ trans('entities.' . ($signedIn ? 'my_recently_viewed' : 'books_recent')) }}</h3>
+ <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 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' => $recents,
- 'style' => 'compact',
- 'emptyText' => $signedIn ? trans('entities.no_pages_viewed') : trans('entities.books_empty')
- ])
+ 'entities' => $recentlyUpdatedPages,
+ 'style' => 'compact',
+ 'emptyText' => trans('entities.no_pages_recently_updated')
+ ])
</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>
-
- <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>
-
</div>
+
</div>
diff --git a/resources/views/pages/list-item.blade.php b/resources/views/pages/list-item.blade.php
index b13bb0f12..f3c79791a 100644
--- 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}}">
- <h4>
- @if (isset($showPath) && $showPath)
- <a href="{{ $page->book->getUrl() }}" class="text-book">
- @icon('book'){{ $page->book->getShortName() }}
- </a>
- <span class="text-muted"> » </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"> » </span>
+ @if($page->chapter)
+ <a href="{{ $page->chapter->getUrl() }}" class="text-chapter">
+ @icon('chapter'){{ $page->chapter->getShortName() }}
+ </a>
+ <span class="text-muted"> » </span>
+ @endif
@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>
+ <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>
+
+ <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
+
</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
diff --git a/resources/views/partials/_header-dropdown.blade.php b/resources/views/partials/_header-dropdown.blade.php
deleted file mode 100644
index 176e00739..000000000
--- 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 1dbfc9de8..39fb35fe2 100644
--- 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--}}
-@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
diff --git a/resources/views/partials/entity-list-item.blade.php b/resources/views/partials/entity-list-item.blade.php
new file mode 100644
index 000000000..32d22853f
--- /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 371f38d71..b2a26f1e4 100644
--- 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($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">
- {{ $emptyText or trans('common.no_items') }}
+ {{ $emptyText ?? trans('common.no_items') }}
</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 eeb4129e0..b87cd37db 100644
--- a/resources/views/simple-layout.blade.php
+++ b/resources/views/simple-layout.blade.php
@@ -5,13 +5,7 @@
@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>