mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 05:36:00 +00:00
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.
This commit is contained in:
Dan Brown
parent
85f330c79a
commit
89be30ff0e
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
Before Width: | Height: | Size: 375 B After Width: | Height: | Size: 373 B |
31
resources/assets/js/components/header-mobile-toggle.js
Normal file
31
resources/assets/js/components/header-mobile-toggle.js
Normal file
@ -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;
|
||||
@ -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 = {};
|
||||
|
||||
@ -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;
|
||||
|
||||
100
resources/assets/sass/_colors.scss
Normal file
100
resources/assets/sass/_colors.scss
Normal file
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
@import "mixins";
|
||||
@import "html";
|
||||
@import "text";
|
||||
@import "colors";
|
||||
@import "grid";
|
||||
@import "blocks";
|
||||
@import "buttons";
|
||||
|
||||
@ -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>
|
||||
|
||||
58
resources/views/common/header.blade.php
Normal file
58
resources/views/common/header.blade.php
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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
|
||||
|
||||
13
resources/views/partials/entity-list-item.blade.php
Normal file
13
resources/views/partials/entity-list-item.blade.php
Normal file
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user