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 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
-<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
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
\ No newline at end of file
--- /dev/null
+
+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
import pageDisplay from "./page-display";
import shelfSort from "./shelf-sort";
import homepageControl from "./homepage-control";
+import headerMobileToggle from "./header-mobile-toggle";
const componentMapping = {
'page-display': pageDisplay,
'shelf-sort': shelfSort,
'homepage-control': homepageControl,
+ 'header-mobile-toggle': headerMobileToggle,
};
window.components = {};
window.components.init = initAll;
-export default initAll;
\ No newline at end of file
+export default initAll;
// Fix the tree as a sidebar
function stickTree() {
- $sidebar.width($bookTreeParent.width() + 15);
+ $sidebar.width($bookTreeParent.width() - 32);
$sidebar.addClass("fixed");
isFixed = true;
}
/*
-* This file container all block styling including background shading,
-* margins, paddings & borders.
+* This file container all block styling including margins, paddings & borders.
*/
-/*
-* Background Shading
-*/
-.shaded {
- background-color: #f1f1f1;
- &.pos {
- background-color: lighten($positive, 40%);
- }
- &.neg {
- background-color: lighten($negative, 20%);
- }
- &.primary {
- background-color: lighten($primary, 40%);
- }
- &.secondary {
- background-color: lighten($secondary, 30%);
- }
-}
-
-/*
-* 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;
/*
* Margins
+* TODO - Remove these older styles
*/
.margins {
margin: $-l;
}
}
+@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
}
.card {
- margin: $-m;
background-color: #FFF;
- box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);
+ box-shadow: $bs-card;
+ 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;
}
.sidebar .card {
- h3, .body, .empty-text {
+ .body, .empty-text {
padding: $-s $-m;
}
+ h3 + .body {
+ padding-top: $-xs;
+ }
}
.card.drag-card {
--- /dev/null
+/*
+ * 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
.flex.sidebar {
flex: 1;
background-color: #F2F2F2;
- max-width: 360px;
+ max-width: 420px;
min-height: 90vh;
section {
margin: $-m;
flex: 3;
background-color: #FFFFFF;
padding: 0 $-l;
- border-left: 1px solid #DDD;
+ box-shadow: $bs-card;
+ border-radius: 4px;
max-width: 100%;
}
.flex.sidebar .sidebar-toggle {
position: fixed;
top: 0;
padding-right: $-m;
+ padding-top: $-m;
width: 30%;
left: 0;
height: 100%;
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;
}
.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;
}
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)
+@include grid-layout('halves', 2)
+
+@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
* 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;
+ box-shadow: $bs-card;
+ padding: $-xxs 0;
.links {
display: inline-block;
vertical-align: top;
- margin-left: $-m;
}
.links a {
display: inline-block;
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;
}
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;
}
margin-top: 10px;
input {
background-color: rgba(0, 0, 0, 0.2);
- border: 1px solid rgba(255, 255, 255, 0.3);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 40px;
color: #EEE;
z-index: 2;
+ padding-left: 40px;
}
button {
fill: #EEE;
z-index: 1;
+ left: 16px;
svg {
margin-right: 0;
}
:-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 {
height: 43px;
}
-.breadcrumbs span.sep {
- color: #aaa;
+.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 {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+.breadcrumbs .separator {
+ fill: #aaa;
+ font-size: 1.6em;
+ line-height: 0.8;
+ margin: 0 $-xs;
+ margin-top: -2px;
+}
+
.faded {
a, button, span, span > div {
color: #666;
background-color: $primary-faded;
}
-.toolbar-container {
- background-color: #FFF;
+.toolbar {
+ position: relative;
+ > .grid > div {
+ opacity: 0.8;
+ transition: opacity ease-in-out 120ms;
+ &:hover {
+ opacity: 1;
+ }
+ }
+ .text-button {
+ color: #666;
+ fill: #666;
+ }
}
-.breadcrumbs .text-button, .action-buttons .text-button {
+.action-buttons .text-button {
display: inline-block;
- padding: $-s;
+ padding: $-xs $-s;
&:last-child {
padding-right: 0;
}
}
@include smaller-than($m) {
- .breadcrumbs .text-button, .action-buttons .text-button {
+ .action-buttons .text-button {
padding: $-xs $-xs;
}
.action-buttons .dropdown-container:last-child a {
padding-left: $-xs;
}
- .breadcrumbs .text-button {
- font-size: 0;
- }
- .breadcrumbs .text-button svg {
- font-size: $fs-m;
- }
- .breadcrumbs a i {
- font-size: $fs-m;
- padding-right: 0;
- }
- .breadcrumbs span.sep {
- padding: 0 $-xxs;
- }
.toolbar .col-xs-1:first-child {
padding-right: 0;
}
}
html {
- background-color: #FFFFFF;
height: 100%;
overflow-y: scroll;
+ background-color: #F2F2F2;
&.flexbox {
overflow-y: hidden;
}
- &.shaded {
- background-color: #F2F2F2;
- }
}
body {
font-size: $fs-m;
line-height: 1.6;
- color: #616161;
+ color: #444;
-webkit-font-smoothing: antialiased;
- &.shaded {
- background-color: #F2F2F2;
- }
+ background-color: #F2F2F2;
}
button {
}
.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 {
}
.entity-list {
- > div {
- padding: $-m 0;
- }
h4 {
margin: 0;
}
}
}
-.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;
}
hr {
margin: 0;
}
+ @include smaller-than($m) {
+ h4 {
+ font-size: 1.666em;
+ }
+ }
}
.dropdown-container {
@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;
margin-top: $-xxl;
overflow-wrap: break-word;
&.flex {
- margin-top: $-m;
+ margin-top: $-xl;
}
.align-left {
text-align: left;
.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%;
+ }
+}
+
+.entity-chip {
+ display: inline-block;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ font-size: 0.9em;
+ border-radius: 2em;
+ position: relative;
+ overflow: hidden;
+ padding: $-xs $-m;
+ &:after {
+ content: '';
+ position: absolute;
+ background-color: currentColor;
+ opacity: 0.2;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ }
}
\ No newline at end of file
font-weight: 400;
position: relative;
display: block;
- color: #555;
+ color: #333;
.subheader {
font-size: 0.5em;
line-height: 1em;
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);
$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;
$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;
$-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",
// Item Colors
$color-bookshelf: #af5a5a;
$color-book: #009688;
-$color-chapter: #ef7c3c;
+$color-chapter: #e56236;
$color-page: $primary;
$color-page-draft: #9A60DA;
// Shadows
$bs-light: 0 0 4px 1px #CCC;
$bs-med: 0 1px 3px 1px rgba(76, 76, 76, 0.26);
-$bs-card: 0 1px 3px 1px rgba(76, 76, 76, 0.26), 0 1px 12px 0px rgba(76, 76, 76, 0.2);
+$bs-card: 0 1px 6px -1px rgba(0, 0, 0, 0.1);
$bs-hover: 0 2px 2px 1px rgba(0,0,0,.13);
\ No newline at end of file
@import "mixins";
@import "html";
@import "text";
+@import "colors";
@import "grid";
@import "blocks";
@import "buttons";
<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">
-
- @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')
@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>
--- /dev/null
+<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
@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="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>
+ @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 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 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>
<div class="breadcrumbs">
@if (userCan('view', $page->book))
- <a href="{{ $page->book->getUrl() }}" class="text-book text-button">@icon('book'){{ $page->book->getShortName() }}</a>
- <span class="sep">»</span>
+ <a href="{{ $page->book->getUrl() }}" class="entity-chip text-book">@icon('book'){{ $page->book->getShortName() }}</a>
+ <div class="separator">@icon('chevron-right')</div>
@endif
@if($page->hasChapter() && userCan('view', $page->chapter))
- <a href="{{ $page->chapter->getUrl() }}" class="text-chapter text-button">
+ <a href="{{ $page->chapter->getUrl() }}" class="entity-chip text-chapter">
@icon('chapter')
{{ $page->chapter->getShortName() }}
</a>
- <span class="sep">»</span>
+ <div class="separator">@icon('chevron-right')</div>
@endif
- <a href="{{ $page->getUrl() }}" class="text-page text-button">@icon('page'){{ $page->getShortName() }}</a>
+ <a href="{{ $page->getUrl() }}" class="entity-chip text-page">@icon('page'){{ $page->getShortName() }}</a>
</div>
\ No newline at end of file
<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
+ <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
- <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>
- @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
@extends('sidebar-layout')
@section('toolbar')
- <div class="col-sm-8 col-xs-5 faded">
- @include('pages._breadcrumbs', ['page' => $page])
- </div>
- <div class="col-sm-4 col-xs-7 faded">
+ <div class="grid halves">
+ <div>
+ @include('pages._breadcrumbs', ['page' => $page])
+ </div>
<div class="action-buttons">
<span dropdown class="dropdown-container">
<div dropdown-toggle class="text-button text-primary">@icon('export'){{ trans('entities.export') }}</div>
@endif
@if ($page->attachments->count() > 0)
- <div class="card">
+ <div id="page-attachments" class="card mb-m">
<h3>@icon('attach') {{ trans('entities.pages_attachments') }}</h3>
<div class="body">
@foreach($page->attachments as $attachment)
@endif
@if (isset($pageNav) && count($pageNav))
- <div class="card">
+ <div id="page-navigation" class="card mb-m">
<h3>@icon('open-book') {{ trans('entities.pages_navigation') }}</h3>
<div class="body">
<div class="sidebar-page-nav menu">
</div>
@endif
- <div class="card entity-details">
+ <div id="page-details" class="card entity-details mb-m">
<h3>@icon('info') {{ trans('common.details') }}</h3>
<div class="body text-muted text-small blended-links">
@include('partials.entity-meta', ['entity' => $page])
</div>
</div>
- @include('partials/book-tree', ['book' => $book, 'sidebarTree' => $sidebarTree])
+ @include('partials.book-tree', ['book' => $book, 'sidebarTree' => $sidebarTree])
@stop
+++ /dev/null
-<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
{{--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
-<div class="card book-tree" v-pre>
+<div id="book-tree" class="card book-tree mb-m" v-pre>
<h3>@icon('book') {{ trans('entities.books_navigation') }}</h3>
<div class="body">
<ul class="sidebar-page-list menu">
--- /dev/null
+<?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
-<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
<!DOCTYPE html>
-<html class="shaded">
+<html>
<head>
<title>{{ setting('app-name') }}</title>
@section('content')
- <div class="toolbar-container">
- <div class="faded-small toolbar">
- <div class="container fluid">
- <div class="row">
- @yield('toolbar')
- </div>
- </div>
- </div>
+ <div class="toolbar px-l py-m">
+ @yield('toolbar')
</div>
<div sidebar class="sidebar flex print-hidden" id="sidebar">
<div class="sidebar-toggle primary-background-light">@icon('caret-right-circle')
</div>
- <div class="scroll-body">
+ <div class="scroll-body px-xl">
@yield('sidebar')
</div>
</div>
- <div class="content flex @yield('body-wrap-classes')">
+ <div class="content mr-xl flex @yield('body-wrap-classes')">
@yield('body')
</div>
</div>
@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>
projects / bookstack / commitdiff
