diff --git a/app/Actions/ViewService.php b/app/Actions/ViewService.php index 292784e86..532f31c42 100644 --- a/app/Actions/ViewService.php +++ b/app/Actions/ViewService.php @@ -59,11 +59,11 @@ class ViewService * @param string $action - used for permission checking * @return Collection */ - public function getPopular(int $count = 10, int $page = 0, $filterModels = null, $action = 'view') + public function getPopular(int $count = 10, int $page = 0, $filterModels = null, string $action = 'view') { - // TODO - Standardise input filter $skipCount = $count * $page; - $query = $this->permissionService->filterRestrictedEntityRelations($this->view, 'views', 'viewable_id', 'viewable_type', $action) + $query = $this->permissionService + ->filterRestrictedEntityRelations($this->view, 'views', 'viewable_id', 'viewable_type', $action) ->select('*', 'viewable_id', 'viewable_type', \DB::raw('SUM(views) as view_count')) ->groupBy('viewable_id', 'viewable_type') ->orderBy('view_count', 'desc'); diff --git a/app/Http/Controllers/BookshelfController.php b/app/Http/Controllers/BookshelfController.php index 4ac943119..2fa9ca332 100644 --- a/app/Http/Controllers/BookshelfController.php +++ b/app/Http/Controllers/BookshelfController.php @@ -4,7 +4,6 @@ use Activity; use BookStack\Auth\UserRepo; use BookStack\Entities\Bookshelf; use BookStack\Entities\Repos\EntityRepo; -use BookStack\Entities\ExportService; use Illuminate\Http\Request; use Illuminate\Http\Response; use Views; @@ -14,19 +13,16 @@ class BookshelfController extends Controller protected $entityRepo; protected $userRepo; - protected $exportService; /** * BookController constructor. - * @param \BookStack\Entities\Repos\EntityRepo $entityRepo + * @param EntityRepo $entityRepo * @param UserRepo $userRepo - * @param \BookStack\Entities\ExportService $exportService */ - public function __construct(EntityRepo $entityRepo, UserRepo $userRepo, ExportService $exportService) + public function __construct(EntityRepo $entityRepo, UserRepo $userRepo) { $this->entityRepo = $entityRepo; $this->userRepo = $userRepo; - $this->exportService = $exportService; parent::__construct(); } diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss index a52ac71a9..51ba25e05 100644 --- a/resources/assets/sass/_blocks.scss +++ b/resources/assets/sass/_blocks.scss @@ -1,121 +1,8 @@ - /* -* This file container all block styling including margins, paddings & borders. +* This file contains styling for custom block formats. */ -/* -* Padding -* TODO - Remove these older styles -*/ -.nopadding { - padding: 0; -} -.padded { - padding: $-l; - &.large { - padding: $-xl; - } - >h1, >h2, >h3, >h4 { - &:first-child { - margin-top: 0.1em; - } - } -} -.padded-vertical, .padded-top { - padding-top: $-m; - &.large { - padding-top: $-xl; - } -} - -.padded-vertical, .padded-bottom { - padding-bottom: $-m; - &.large { - padding-bottom: $-xl; - } -} -.padded-horizontal, .padded-left { - padding-left: $-m; - &.large { - padding-left: $-xl; - } -} -.padded-horizontal, .padded-right { - padding-right: $-m; - &.large { - padding-right: $-xl; - } -} - -/* -* Margins -* TODO - Remove these older styles -*/ -.margins { - margin: $-l; - &.large { - margin: $-xl; - } -} -.margins-vertical, .margin-top { - margin-top: $-m; - &.large { - margin-top: $-xl; - } -} -.margins-vertical, .margin-bottom { - margin-bottom: $-m; - &.large { - margin-bottom: $-xl; - } -} -.margins-horizontal, .margin-left { - margin-left: $-m; - &.large { - margin-left: $-xl; - } -} -.margins-horizontal, .margin-right { - margin-right: $-m; - &.large { - margin-right: $-xl; - } -} - -@mixin spacing($prop, $propLetter) { - @each $sizeLetter, $size in $spacing { - .#{$propLetter}-#{$sizeLetter} { - #{$prop}: $size !important; - } - .#{$propLetter}x-#{$sizeLetter} { - #{$prop}-left: $size !important; - #{$prop}-right: $size !important; - } - .#{$propLetter}y-#{$sizeLetter} { - #{$prop}-top: $size !important; - #{$prop}-bottom: $size !important; - } - .#{$propLetter}t-#{$sizeLetter} { - #{$prop}-top: $size !important; - } - .#{$propLetter}r-#{$sizeLetter} { - #{$prop}-right: $size !important; - } - .#{$propLetter}b-#{$sizeLetter} { - #{$prop}-bottom: $size !important; - } - .#{$propLetter}l-#{$sizeLetter} { - #{$prop}-left: $size !important; - } - } - -} - -@include spacing('margin', 'm') -@include spacing('padding', 'p') - - /** * Callouts */ @@ -238,9 +125,6 @@ margin: $-s 0; width: 100%; } - > div.padded { - padding: $-s 0 !important; - } .handle { background-color: #EEE; left: 0; @@ -289,4 +173,74 @@ .tag-list div:last-child .tag-item { margin-bottom: 0; +} + +.grid-card { + display: flex; + flex-direction: column; + border: 1px solid #ddd; + margin-bottom: $-l; + border-radius: 4px; + overflow: hidden; + min-width: 100px; + color: $text-dark; + transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms; + &:hover { + color: $text-dark; + text-decoration: none; + box-shadow: $bs-card; + } + h2 { + width: 100%; + font-size: 1.5em; + margin: 0 0 10px; + } + p { + font-size: .7rem; + margin: 0; + line-height: 1.6em; + } + .grid-card-content { + flex: 1; + border-top: 0; + border-bottom-width: 2px; + } + .grid-card-content, .grid-card-footer { + padding: $-l; + } + .grid-card-content + .grid-card-footer { + padding-top: 0; + } +} + +.bookshelf-grid-item .grid-card-content h2 a { + color: $color-bookshelf; + fill: $color-bookshelf; +} + +.book-grid-item .grid-card-footer { + p.small { + font-size: .8em; + margin: 0; + } +} + +.content-wrap.card { + padding: $-l $-xxl; + margin-left: auto; + margin-right: auto; + margin-bottom: $-xl; + overflow: auto; + min-height: 60vh; + &.auto-height { + min-height: 0; + } + &.fill-width { + width: 100%; + } +} +@include smaller-than($m) { + .content-wrap.card { + padding: $-m $-l; + } } \ No newline at end of file diff --git a/resources/assets/sass/_components.scss b/resources/assets/sass/_components.scss index 9ebe5d0d7..f835a1991 100644 --- a/resources/assets/sass/_components.scss +++ b/resources/assets/sass/_components.scss @@ -142,6 +142,9 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { #entity-selector-wrap .popup-body .form-group { margin: 0; } +.popup-body .entity-selector-container { + flex: 1; +} .image-manager-body { min-height: 70vh; diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss deleted file mode 100644 index b8bd2cc04..000000000 --- a/resources/assets/sass/_grid.scss +++ /dev/null @@ -1,1067 +0,0 @@ - -/** Flexbox styling rules **/ -body.flexbox { - display: flex; - flex-direction: column; - align-items: stretch; - height: 100%; - min-height: 100%; - max-height: 100%; - overflow: hidden; - #content { - flex: 1; - display: flex; - min-height: 0; - } -} - -.flex-fill { - display: flex; - align-items: stretch; - min-height: 0; - max-width: 100%; - position: relative; - &.rows { - flex-direction: row; - } - &.columns { - flex-direction: column; - } -} - -.flex { - min-height: 0; - flex: 1; -} - -.flex.scroll { - //overflow-y: auto; - display: flex; - &.sidebar { - margin-right: -14px; - } -} -.flex.scroll .scroll-body { - overflow-y: scroll; - flex: 1; -} - -.flex-child > div { - flex: 1; -} - -.dual-column-content { - columns: 2; -} - -@include smaller-than($m) { - .dual-column-content { - columns: 1; - } -} - -.content-wrap.card { - padding: $-l $-xxl; - margin-left: auto; - margin-right: auto; - margin-bottom: $-xl; - overflow: auto; - min-height: 60vh; - &.auto-height { - min-height: 0; - } - &.fill-width { - width: 100%; - } -} -@include smaller-than($m) { - .content-wrap.card { - padding: $-m $-l; - } -} - -.tri-layout-container { - display: grid; - margin-left: $-xl; - margin-right: $-xl; - grid-template-columns: 1fr 4fr 1fr; - grid-template-areas: "a b c"; - grid-column-gap: $-xxl; - .tri-layout-right { - grid-area: c; - min-width: 0; - } - .tri-layout-left { - grid-area: a; - min-width: 0; - } - .tri-layout-middle { - grid-area: b; - padding-top: $-m; - } -} -@include smaller-than($xxl) { - .tri-layout-container { - grid-template-areas: "c b b" - "a b b"; - grid-template-columns: 1fr 3fr; - grid-template-rows: max-content min-content; - padding-right: $-l; - .content-wrap.card { - padding: $-l $-xl; - } - } -} -@include larger-than($xxl) { - .tri-layout-left-contents, .tri-layout-right-contents { - padding: $-m; - position: sticky; - top: $-m; - max-height: 100vh; - min-height: 50vh; - overflow-y: scroll; - overflow-x: hidden; - scrollbar-width: none; - -ms-overflow-style: none; - &::-webkit-scrollbar { - display: none; - } - } - .tri-layout-middle-contents { - max-width: 940px; - margin: 0 auto; - } -} - -@include smaller-than($l) { - .tri-layout-container { - grid-template-areas: none; - grid-template-columns: 10% 90%; - grid-column-gap: 0; - .tri-layout-left-contents, .tri-layout-right-contents { - padding-left: $-m; - padding-right: $-m; - } - .tri-layout-right-contents > div, .tri-layout-left-contents > div { - opacity: 0.6; - z-index: 0; - } - .tri-layout-left > *, .tri-layout-right > * { - pointer-events: none; - } - .tri-layout-right, .tri-layout-left, .tri-layout-middle { - grid-area: none; - grid-column: 1/3; - grid-row: 1; - } - .tri-layout-middle { - grid-row: 1/3; - grid-column: 2/3; - z-index: 1; - transition: transform ease-in-out 240ms; - } - .tri-layout-left { - grid-row: 2; - } - &.mobile-open { - overflow: hidden; - .tri-layout-middle { - transform: translateX(90%); - } - .tri-layout-right > *, .tri-layout-left > * { - pointer-events: auto; - } - } - } -} - -.tri-layout-left-contents > div, .tri-layout-right-contents > div { - opacity: 0.6; - transition: opacity ease-in-out 120ms; - &:hover { - opacity: 1; - } -} - -/** Rules for all columns */ -div[class^="col-"] img { - max-width: 100%; -} - -.container { - max-width: $xxl; - margin-left: auto; - margin-right: auto; - padding-left: $-m; - padding-right: $-m; - &.fluid { - max-width: 100%; - } - &.medium { - max-width: 992px; - } - &.small { - max-width: 840px; - } - &.very-small { - max-width: 480px; - } - &.nopad { - padding-left: 0; - padding-right: 0; - } -} - -.row { - margin-left: -$-m; - margin-right: -$-m; -} - -.grid { - display: grid; - grid-column-gap: $-l; - grid-row-gap: $-l; - &.half { - grid-template-columns: 1fr 1fr; - } - &.third { - grid-template-columns: 1fr 1fr 1fr; - } - &.left-focus { - grid-template-columns: 2fr 1fr; - } - &.right-focus { - grid-template-columns: 1fr 3fr; - } - &.gap-xl { - grid-column-gap: $-xl; - grid-row-gap: $-xl; - } - &.gap-xxl { - grid-column-gap: $-xxl; - grid-row-gap: $-xxl; - } -} - -.grid-card { - display: flex; - flex-direction: column; - border: 1px solid #ddd; - margin-bottom: $-l; - border-radius: 4px; - overflow: hidden; - min-width: 100px; - color: $text-dark; - transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms; - &:hover { - color: $text-dark; - text-decoration: none; - box-shadow: $bs-card; - } - h2 { - width: 100%; - font-size: 1.5em; - margin: 0 0 10px; - } - p { - font-size: .7rem; - margin: 0; - line-height: 1.6em; - } - .grid-card-content { - flex: 1; - border-top: 0; - border-bottom-width: 2px; - } - .grid-card-content, .grid-card-footer { - padding: $-l; - } - .grid-card-content + .grid-card-footer { - padding-top: 0; - } -} - -.bookshelf-grid-item .grid-card-content h2 a { - color: $color-bookshelf; - fill: $color-bookshelf; -} - -.book-grid-item .grid-card-footer { - p.small { - font-size: .8em; - margin: 0; - } -} - -@include smaller-than($m) { - .grid.third { - grid-template-columns: 1fr 1fr; - } - .grid.half, .grid.left-focus, .grid.right-focus { - grid-template-columns: 1fr; - } - .grid.half.collapse-xs { - grid-template-columns: 1fr 1fr; - } - .grid.gap-xl { - grid-column-gap: $-m; - grid-row-gap: $-m; - } - .grid.right-focus.reverse-collapse > *:nth-child(2) { - order: 0; - } - .grid.right-focus.reverse-collapse > *:nth-child(1) { - order: 1; - } -} - -@include smaller-than($s) { - .grid.third { - grid-template-columns: 1fr; - } -} - -@include smaller-than($xs) { - .grid.half.collapse-xs { - grid-template-columns: 1fr; - } -} - -.float { - float: left; - &.right { - float: right; - } -} - -.block { - display: block; - position: relative; -} - -.inline { - display: inline; -} - -.block.inline { - 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; - padding-left: $-m; - padding-right: $-m; -} -.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { - float: left; -} -.col-xs-12 { - width: 100%; -} -.col-xs-11 { - width: 91.66666667%; -} -.col-xs-10 { - width: 83.33333333%; -} -.col-xs-9 { - width: 75%; -} -.col-xs-8 { - width: 66.66666667%; -} -.col-xs-7 { - width: 58.33333333%; -} -.col-xs-6 { - width: 50%; -} -.col-xs-5 { - width: 41.66666667%; -} -.col-xs-4 { - width: 33.33333333%; -} -.col-xs-3 { - width: 25%; -} -.col-xs-2 { - width: 16.66666667%; -} -.col-xs-1 { - width: 8.33333333%; -} -.col-xs-pull-12 { - right: 100%; -} -.col-xs-pull-11 { - right: 91.66666667%; -} -.col-xs-pull-10 { - right: 83.33333333%; -} -.col-xs-pull-9 { - right: 75%; -} -.col-xs-pull-8 { - right: 66.66666667%; -} -.col-xs-pull-7 { - right: 58.33333333%; -} -.col-xs-pull-6 { - right: 50%; -} -.col-xs-pull-5 { - right: 41.66666667%; -} -.col-xs-pull-4 { - right: 33.33333333%; -} -.col-xs-pull-3 { - right: 25%; -} -.col-xs-pull-2 { - right: 16.66666667%; -} -.col-xs-pull-1 { - right: 8.33333333%; -} -.col-xs-pull-0 { - right: auto; -} -.col-xs-push-12 { - left: 100%; -} -.col-xs-push-11 { - left: 91.66666667%; -} -.col-xs-push-10 { - left: 83.33333333%; -} -.col-xs-push-9 { - left: 75%; -} -.col-xs-push-8 { - left: 66.66666667%; -} -.col-xs-push-7 { - left: 58.33333333%; -} -.col-xs-push-6 { - left: 50%; -} -.col-xs-push-5 { - left: 41.66666667%; -} -.col-xs-push-4 { - left: 33.33333333%; -} -.col-xs-push-3 { - left: 25%; -} -.col-xs-push-2 { - left: 16.66666667%; -} -.col-xs-push-1 { - left: 8.33333333%; -} -.col-xs-push-0 { - left: auto; -} -.col-xs-offset-12 { - margin-left: 100%; -} -.col-xs-offset-11 { - margin-left: 91.66666667%; -} -.col-xs-offset-10 { - margin-left: 83.33333333%; -} -.col-xs-offset-9 { - margin-left: 75%; -} -.col-xs-offset-8 { - margin-left: 66.66666667%; -} -.col-xs-offset-7 { - margin-left: 58.33333333%; -} -.col-xs-offset-6 { - margin-left: 50%; -} -.col-xs-offset-5 { - margin-left: 41.66666667%; -} -.col-xs-offset-4 { - margin-left: 33.33333333%; -} -.col-xs-offset-3 { - margin-left: 25%; -} -.col-xs-offset-2 { - margin-left: 16.66666667%; -} -.col-xs-offset-1 { - margin-left: 8.33333333%; -} -.col-xs-offset-0 { - margin-left: 0%; -} -@media (min-width: $screen-sm) { - .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { - float: left; - } - .col-sm-12 { - width: 100%; - } - .col-sm-11 { - width: 91.66666667%; - } - .col-sm-10 { - width: 83.33333333%; - } - .col-sm-9 { - width: 75%; - } - .col-sm-8 { - width: 66.66666667%; - } - .col-sm-7 { - width: 58.33333333%; - } - .col-sm-6 { - width: 50%; - } - .col-sm-5 { - width: 41.66666667%; - } - .col-sm-4 { - width: 33.33333333%; - } - .col-sm-3 { - width: 25%; - } - .col-sm-2 { - width: 16.66666667%; - } - .col-sm-1 { - width: 8.33333333%; - } - .col-sm-pull-12 { - right: 100%; - } - .col-sm-pull-11 { - right: 91.66666667%; - } - .col-sm-pull-10 { - right: 83.33333333%; - } - .col-sm-pull-9 { - right: 75%; - } - .col-sm-pull-8 { - right: 66.66666667%; - } - .col-sm-pull-7 { - right: 58.33333333%; - } - .col-sm-pull-6 { - right: 50%; - } - .col-sm-pull-5 { - right: 41.66666667%; - } - .col-sm-pull-4 { - right: 33.33333333%; - } - .col-sm-pull-3 { - right: 25%; - } - .col-sm-pull-2 { - right: 16.66666667%; - } - .col-sm-pull-1 { - right: 8.33333333%; - } - .col-sm-pull-0 { - right: auto; - } - .col-sm-push-12 { - left: 100%; - } - .col-sm-push-11 { - left: 91.66666667%; - } - .col-sm-push-10 { - left: 83.33333333%; - } - .col-sm-push-9 { - left: 75%; - } - .col-sm-push-8 { - left: 66.66666667%; - } - .col-sm-push-7 { - left: 58.33333333%; - } - .col-sm-push-6 { - left: 50%; - } - .col-sm-push-5 { - left: 41.66666667%; - } - .col-sm-push-4 { - left: 33.33333333%; - } - .col-sm-push-3 { - left: 25%; - } - .col-sm-push-2 { - left: 16.66666667%; - } - .col-sm-push-1 { - left: 8.33333333%; - } - .col-sm-push-0 { - left: auto; - } - .col-sm-offset-12 { - margin-left: 100%; - } - .col-sm-offset-11 { - margin-left: 91.66666667%; - } - .col-sm-offset-10 { - margin-left: 83.33333333%; - } - .col-sm-offset-9 { - margin-left: 75%; - } - .col-sm-offset-8 { - margin-left: 66.66666667%; - } - .col-sm-offset-7 { - margin-left: 58.33333333%; - } - .col-sm-offset-6 { - margin-left: 50%; - } - .col-sm-offset-5 { - margin-left: 41.66666667%; - } - .col-sm-offset-4 { - margin-left: 33.33333333%; - } - .col-sm-offset-3 { - margin-left: 25%; - } - .col-sm-offset-2 { - margin-left: 16.66666667%; - } - .col-sm-offset-1 { - margin-left: 8.33333333%; - } - .col-sm-offset-0 { - margin-left: 0%; - } -} -@media (min-width: $screen-md) { - .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { - float: left; - } - .col-md-12 { - width: 100%; - } - .col-md-11 { - width: 91.66666667%; - } - .col-md-10 { - width: 83.33333333%; - } - .col-md-9 { - width: 75%; - } - .col-md-8 { - width: 66.66666667%; - } - .col-md-7 { - width: 58.33333333%; - } - .col-md-6 { - width: 50%; - } - .col-md-5 { - width: 41.66666667%; - } - .col-md-4 { - width: 33.33333333%; - } - .col-md-3 { - width: 25%; - } - .col-md-2 { - width: 16.66666667%; - } - .col-md-1 { - width: 8.33333333%; - } - .col-md-pull-12 { - right: 100%; - } - .col-md-pull-11 { - right: 91.66666667%; - } - .col-md-pull-10 { - right: 83.33333333%; - } - .col-md-pull-9 { - right: 75%; - } - .col-md-pull-8 { - right: 66.66666667%; - } - .col-md-pull-7 { - right: 58.33333333%; - } - .col-md-pull-6 { - right: 50%; - } - .col-md-pull-5 { - right: 41.66666667%; - } - .col-md-pull-4 { - right: 33.33333333%; - } - .col-md-pull-3 { - right: 25%; - } - .col-md-pull-2 { - right: 16.66666667%; - } - .col-md-pull-1 { - right: 8.33333333%; - } - .col-md-pull-0 { - right: auto; - } - .col-md-push-12 { - left: 100%; - } - .col-md-push-11 { - left: 91.66666667%; - } - .col-md-push-10 { - left: 83.33333333%; - } - .col-md-push-9 { - left: 75%; - } - .col-md-push-8 { - left: 66.66666667%; - } - .col-md-push-7 { - left: 58.33333333%; - } - .col-md-push-6 { - left: 50%; - } - .col-md-push-5 { - left: 41.66666667%; - } - .col-md-push-4 { - left: 33.33333333%; - } - .col-md-push-3 { - left: 25%; - } - .col-md-push-2 { - left: 16.66666667%; - } - .col-md-push-1 { - left: 8.33333333%; - } - .col-md-push-0 { - left: auto; - } - .col-md-offset-12 { - margin-left: 100%; - } - .col-md-offset-11 { - margin-left: 91.66666667%; - } - .col-md-offset-10 { - margin-left: 83.33333333%; - } - .col-md-offset-9 { - margin-left: 75%; - } - .col-md-offset-8 { - margin-left: 66.66666667%; - } - .col-md-offset-7 { - margin-left: 58.33333333%; - } - .col-md-offset-6 { - margin-left: 50%; - } - .col-md-offset-5 { - margin-left: 41.66666667%; - } - .col-md-offset-4 { - margin-left: 33.33333333%; - } - .col-md-offset-3 { - margin-left: 25%; - } - .col-md-offset-2 { - margin-left: 16.66666667%; - } - .col-md-offset-1 { - margin-left: 8.33333333%; - } - .col-md-offset-0 { - margin-left: 0%; - } -} -@media (min-width: $screen-lg) { - .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { - float: left; - } - .col-lg-12 { - width: 100%; - } - .col-lg-11 { - width: 91.66666667%; - } - .col-lg-10 { - width: 83.33333333%; - } - .col-lg-9 { - width: 75%; - } - .col-lg-8 { - width: 66.66666667%; - } - .col-lg-7 { - width: 58.33333333%; - } - .col-lg-6 { - width: 50%; - } - .col-lg-5 { - width: 41.66666667%; - } - .col-lg-4 { - width: 33.33333333%; - } - .col-lg-3 { - width: 25%; - } - .col-lg-2 { - width: 16.66666667%; - } - .col-lg-1 { - width: 8.33333333%; - } - .col-lg-pull-12 { - right: 100%; - } - .col-lg-pull-11 { - right: 91.66666667%; - } - .col-lg-pull-10 { - right: 83.33333333%; - } - .col-lg-pull-9 { - right: 75%; - } - .col-lg-pull-8 { - right: 66.66666667%; - } - .col-lg-pull-7 { - right: 58.33333333%; - } - .col-lg-pull-6 { - right: 50%; - } - .col-lg-pull-5 { - right: 41.66666667%; - } - .col-lg-pull-4 { - right: 33.33333333%; - } - .col-lg-pull-3 { - right: 25%; - } - .col-lg-pull-2 { - right: 16.66666667%; - } - .col-lg-pull-1 { - right: 8.33333333%; - } - .col-lg-pull-0 { - right: auto; - } - .col-lg-push-12 { - left: 100%; - } - .col-lg-push-11 { - left: 91.66666667%; - } - .col-lg-push-10 { - left: 83.33333333%; - } - .col-lg-push-9 { - left: 75%; - } - .col-lg-push-8 { - left: 66.66666667%; - } - .col-lg-push-7 { - left: 58.33333333%; - } - .col-lg-push-6 { - left: 50%; - } - .col-lg-push-5 { - left: 41.66666667%; - } - .col-lg-push-4 { - left: 33.33333333%; - } - .col-lg-push-3 { - left: 25%; - } - .col-lg-push-2 { - left: 16.66666667%; - } - .col-lg-push-1 { - left: 8.33333333%; - } - .col-lg-push-0 { - left: auto; - } - .col-lg-offset-12 { - margin-left: 100%; - } - .col-lg-offset-11 { - margin-left: 91.66666667%; - } - .col-lg-offset-10 { - margin-left: 83.33333333%; - } - .col-lg-offset-9 { - margin-left: 75%; - } - .col-lg-offset-8 { - margin-left: 66.66666667%; - } - .col-lg-offset-7 { - margin-left: 58.33333333%; - } - .col-lg-offset-6 { - margin-left: 50%; - } - .col-lg-offset-5 { - margin-left: 41.66666667%; - } - .col-lg-offset-4 { - margin-left: 33.33333333%; - } - .col-lg-offset-3 { - margin-left: 25%; - } - .col-lg-offset-2 { - margin-left: 16.66666667%; - } - .col-lg-offset-1 { - margin-left: 8.33333333%; - } - .col-lg-offset-0 { - margin-left: 0%; - } -} -.clearfix:before, -.clearfix:after, -.row:before, -.row:after { - content: " "; - display: table; -} -.clearfix:after, -.row:after { - clear: both; -} -.center-block { - display: block; - margin-left: auto; - margin-right: auto; -} - - - - - - -.grid { - display: grid; - grid-column-gap: $-m; - grid-row-gap: 0; - &.contained { - max-width: $xxl; - padding-left: $-m; - padding-right: $-m; - margin-left: auto; - margin-right: auto; - } - &.v-center { - align-items: center; - } -} - -@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 diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss index ce5ab8c6c..f71a077d2 100644 --- a/resources/assets/sass/_header.scss +++ b/resources/assets/sass/_header.scss @@ -6,6 +6,12 @@ header .grid { grid-template-columns: auto min-content auto; } +@include smaller-than($l) { + header .grid { + grid-template-columns: 1fr; + } +} + header { position: relative; display: block; @@ -336,9 +342,6 @@ header .search-box { .action-buttons .dropdown-container:last-child a { padding-left: $-xs; } - .toolbar .col-xs-1:first-child { - padding-right: 0; - } } .nav-tabs { diff --git a/resources/assets/sass/_layout.scss b/resources/assets/sass/_layout.scss new file mode 100644 index 000000000..6368bf31b --- /dev/null +++ b/resources/assets/sass/_layout.scss @@ -0,0 +1,286 @@ + +/** + * Generic content container + */ +.container { + max-width: $xxl; + margin-left: auto; + margin-right: auto; + padding-left: $-m; + padding-right: $-m; + &.small { + max-width: 840px; + } + &.very-small { + max-width: 480px; + } +} + +/** + * Core grid layout system + */ +.grid { + display: grid; + grid-column-gap: $-l; + grid-row-gap: $-l; + &.half { + grid-template-columns: 1fr 1fr; + } + &.third { + grid-template-columns: 1fr 1fr 1fr; + } + &.left-focus { + grid-template-columns: 2fr 1fr; + } + &.right-focus { + grid-template-columns: 1fr 3fr; + } + &.gap-xl { + grid-column-gap: $-xl; + grid-row-gap: $-xl; + } + &.gap-xxl { + grid-column-gap: $-xxl; + grid-row-gap: $-xxl; + } + &.v-center { + align-items: center; + } +} + +@include smaller-than($m) { + .grid.third { + grid-template-columns: 1fr 1fr; + } + .grid.half, .grid.left-focus, .grid.right-focus { + grid-template-columns: 1fr; + } + .grid.half.collapse-xs { + grid-template-columns: 1fr 1fr; + } + .grid.gap-xl { + grid-column-gap: $-m; + grid-row-gap: $-m; + } + .grid.right-focus.reverse-collapse > *:nth-child(2) { + order: 0; + } + .grid.right-focus.reverse-collapse > *:nth-child(1) { + order: 1; + } +} + +@include smaller-than($s) { + .grid.third { + grid-template-columns: 1fr; + } +} + +@include smaller-than($xs) { + .grid.half.collapse-xs { + grid-template-columns: 1fr; + } +} + +/** + * Flexbox layout system + */ +body.flexbox { + display: flex; + flex-direction: column; + align-items: stretch; + height: 100%; + min-height: 100%; + max-height: 100%; + overflow: hidden; + #content { + flex: 1; + display: flex; + min-height: 0; + } +} + +.flex-fill { + display: flex; + align-items: stretch; + min-height: 0; + max-width: 100%; + position: relative; +} + +.flex { + min-height: 0; + flex: 1; +} + + +/** + * Display and float utilities + */ +.block { + display: block; + position: relative; +} + +.inline { + display: inline; +} + +.block.inline { + display: inline-block; +} + +.float { + float: left; + &.right { + float: right; + } +} + +/** + * 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; + } + } +} + +/** + * Inline content columns + */ +.dual-column-content { + columns: 2; +} + +@include smaller-than($m) { + .dual-column-content { + columns: 1; + } +} + + +/** + * Fixes + */ +.clearfix:before, +.clearfix:after { + content: " "; + display: table; +} +.clearfix:after { + clear: both; +} + +/** + * View Layouts + */ +.tri-layout-container { + display: grid; + margin-left: $-xl; + margin-right: $-xl; + grid-template-columns: 1fr 4fr 1fr; + grid-template-areas: "a b c"; + grid-column-gap: $-xxl; + .tri-layout-right { + grid-area: c; + min-width: 0; + } + .tri-layout-left { + grid-area: a; + min-width: 0; + } + .tri-layout-middle { + grid-area: b; + padding-top: $-m; + } +} +@include smaller-than($xxl) { + .tri-layout-container { + grid-template-areas: "c b b" + "a b b"; + grid-template-columns: 1fr 3fr; + grid-template-rows: max-content min-content; + padding-right: $-l; + .content-wrap.card { + padding: $-l $-xl; + } + } +} +@include larger-than($xxl) { + .tri-layout-left-contents, .tri-layout-right-contents { + padding: $-m; + position: sticky; + top: $-m; + max-height: 100vh; + min-height: 50vh; + overflow-y: scroll; + overflow-x: hidden; + scrollbar-width: none; + -ms-overflow-style: none; + &::-webkit-scrollbar { + display: none; + } + } + .tri-layout-middle-contents { + max-width: 940px; + margin: 0 auto; + } +} + +@include smaller-than($l) { + .tri-layout-container { + grid-template-areas: none; + grid-template-columns: 10% 90%; + grid-column-gap: 0; + .tri-layout-left-contents, .tri-layout-right-contents { + padding-left: $-m; + padding-right: $-m; + } + .tri-layout-right-contents > div, .tri-layout-left-contents > div { + opacity: 0.6; + z-index: 0; + } + .tri-layout-left > *, .tri-layout-right > * { + pointer-events: none; + } + .tri-layout-right, .tri-layout-left, .tri-layout-middle { + grid-area: none; + grid-column: 1/3; + grid-row: 1; + } + .tri-layout-middle { + grid-row: 1/3; + grid-column: 2/3; + z-index: 1; + transition: transform ease-in-out 240ms; + } + .tri-layout-left { + grid-row: 2; + } + &.mobile-open { + overflow: hidden; + .tri-layout-middle { + transform: translateX(90%); + } + .tri-layout-right > *, .tri-layout-left > * { + pointer-events: auto; + } + } + } +} + +.tri-layout-left-contents > div, .tri-layout-right-contents > div { + opacity: 0.6; + transition: opacity ease-in-out 120ms; + &:hover { + opacity: 1; + } +} \ No newline at end of file diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss index 43ec13cf6..a8f0113b8 100644 --- a/resources/assets/sass/_lists.scss +++ b/resources/assets/sass/_lists.scss @@ -523,10 +523,6 @@ ul.pagination { color: #999; fill: #999; } - li.padded { - padding: $-xs $-m; - line-height: 1.2; - } li.active a { font-weight: 600; } diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss index 6e8370a97..7cc9647a1 100755 --- a/resources/assets/sass/_pages.scss +++ b/resources/assets/sass/_pages.scss @@ -243,13 +243,6 @@ min-height: 0px; overflow-y: scroll; } - div[toolbox-tab-content] .padded { - flex: 1; - padding-top: 0; - } - div[toolbox-tab-content] .padded.files { - overflow-x: hidden; - } h4 { font-size: 24px; margin: $-m 0 0 0; diff --git a/resources/assets/sass/_spacing.scss b/resources/assets/sass/_spacing.scss new file mode 100644 index 000000000..69ed5a2d3 --- /dev/null +++ b/resources/assets/sass/_spacing.scss @@ -0,0 +1,32 @@ +// Here we generate spacing utility classes for our sizes for all box sides and axis. +// These will output to classes like .px-m (Padding on x-axis, medium size) or .mr-l (Margin right, large size) + +@mixin spacing($prop, $propLetter) { + @each $sizeLetter, $size in $spacing { + .#{$propLetter}-#{$sizeLetter} { + #{$prop}: $size !important; + } + .#{$propLetter}x-#{$sizeLetter} { + #{$prop}-left: $size !important; + #{$prop}-right: $size !important; + } + .#{$propLetter}y-#{$sizeLetter} { + #{$prop}-top: $size !important; + #{$prop}-bottom: $size !important; + } + .#{$propLetter}t-#{$sizeLetter} { + #{$prop}-top: $size !important; + } + .#{$propLetter}r-#{$sizeLetter} { + #{$prop}-right: $size !important; + } + .#{$propLetter}b-#{$sizeLetter} { + #{$prop}-bottom: $size !important; + } + .#{$propLetter}l-#{$sizeLetter} { + #{$prop}-left: $size !important; + } + } +} +@include spacing('margin', 'm') +@include spacing('padding', 'p') \ No newline at end of file diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss index 07820c57e..25b8e09b7 100644 --- a/resources/assets/sass/_variables.scss +++ b/resources/assets/sass/_variables.scss @@ -14,6 +14,7 @@ $screen-lg: 1200px; $screen-md: 992px; $screen-sm: 768px; +// List of screen sizes $screen-sizes: (('xxs', $xxs), ('xs', $xs), ('s', $s), ('m', $m), ('l', $l), ('xl', $xl)); // Spacing (Margins+Padding) @@ -26,6 +27,7 @@ $-s: 12px; $-xs: 6px; $-xxs: 3px; +// List of our spacing sizes $spacing: (('none', 0), ('xxs', $-xxs), ('xs', $-xs), ('s', $-s), ('m', $-m), ('l', $-l), ('xl', $-xl), ('xxl', $-xxl)); // Fonts diff --git a/resources/assets/sass/export-styles.scss b/resources/assets/sass/export-styles.scss index cc90d5372..4cc782dc0 100644 --- a/resources/assets/sass/export-styles.scss +++ b/resources/assets/sass/export-styles.scss @@ -1,8 +1,9 @@ @import "variables"; @import "mixins"; +@import "spacing"; @import "html"; @import "text"; -@import "grid"; +@import "layout"; @import "blocks"; @import "forms"; @import "tables"; @@ -12,6 +13,9 @@ body { font-family: 'DejaVu Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + background-color: #FFF; + margin: 0; + padding: 0; } table { @@ -19,6 +23,10 @@ table { border-collapse: collapse; } +.page-content { + overflow: hidden; +} + // Prevent code block overflow on export pre { padding-left: 12px; diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss index c33a46394..bdc57d8fc 100644 --- a/resources/assets/sass/styles.scss +++ b/resources/assets/sass/styles.scss @@ -1,10 +1,11 @@ @import "reset"; @import "variables"; @import "mixins"; +@import "spacing"; @import "html"; @import "text"; @import "colors"; -@import "grid"; +@import "layout"; @import "blocks"; @import "buttons"; @import "tables"; diff --git a/resources/views/books/export.blade.php b/resources/views/books/export.blade.php index 18440a74d..e1fabd800 100644 --- a/resources/views/books/export.blade.php +++ b/resources/views/books/export.blade.php @@ -31,51 +31,51 @@ @include('partials.custom-head') -
-
-
-
-

{{$book->name}}

+
-

{{ $book->description }}

+

{{$book->name}}

- @if(count($bookChildren) > 0) -
    - @foreach($bookChildren as $bookChild) -
  • {{ $bookChild->name }}
    • - @if($bookChild->isA('chapter') && count($bookChild->pages) > 0) - - @endif - @endforeach -
+

{{ $book->description }}

+ + @if(count($bookChildren) > 0) +
    + @foreach($bookChildren as $bookChild) +
  • {{ $bookChild->name }}
    • + @if($bookChild->isA('chapter') && count($bookChild->pages) > 0) + @endif + @endforeach +
+ @endif - @foreach($bookChildren as $bookChild) + @foreach($bookChildren as $bookChild) +
+

{{ $bookChild->name }}

+ + @if($bookChild->isA('chapter')) +

{{ $bookChild->description }}

+ + @if(count($bookChild->pages) > 0) + @foreach($bookChild->pages as $page)
-

{{ $bookChild->name }}

- @if($bookChild->isA('chapter')) -

{{ $bookChild->description }}

- @if(count($bookChild->pages) > 0) - @foreach($bookChild->pages as $page) -
-
{{$bookChild->name}}
-

{{ $page->name }}

- {!! $page->html !!} - @endforeach - @endif - @else - {!! $bookChild->html !!} - @endif +
{{$bookChild->name}}
+

{{ $page->name }}

+ {!! $page->html !!} @endforeach + @endif + + @else + {!! $bookChild->html !!} + @endif + + @endforeach -
-
-
+ diff --git a/resources/views/chapters/export.blade.php b/resources/views/chapters/export.blade.php index 8f710c0ec..2830855b4 100644 --- a/resources/views/chapters/export.blade.php +++ b/resources/views/chapters/export.blade.php @@ -24,32 +24,28 @@ @include('partials.custom-head') -
-
-
-
-

{{$chapter->name}}

+
-

{{ $chapter->description }}

+

{{$chapter->name}}

- @if(count($pages) > 0) - - @endif +

{{ $chapter->description }}

- @foreach($pages as $page) -
-

{{ $page->name }}

- {!! $page->html !!} - @endforeach + @if(count($pages) > 0) + + @endif + + @foreach($pages as $page) +
+

{{ $page->name }}

+ {!! $page->html !!} + @endforeach -
-
-
+ diff --git a/resources/views/chapters/show.blade.php b/resources/views/chapters/show.blade.php index 15ac6bc2b..6dd41b890 100644 --- a/resources/views/chapters/show.blade.php +++ b/resources/views/chapters/show.blade.php @@ -131,25 +131,10 @@ {{ trans('common.delete') }} @endif - - {{--@if(userCan('page-create', $book))--}} - {{----}} - {{--@icon('add')--}} - {{--{{ trans('entities.pages_new') }}--}} - {{----}} - {{--@endif--}} -
-
- -
-
-
@stop - - @section('left') @if($chapter->tags->count() > 0) diff --git a/resources/views/comments/comment.blade.php b/resources/views/comments/comment.blade.php index 29d1292c2..b68a2fdc8 100644 --- a/resources/views/comments/comment.blade.php +++ b/resources/views/comments/comment.blade.php @@ -13,7 +13,7 @@
diff --git a/resources/views/common/header.blade.php b/resources/views/common/header.blade.php index 89aa1078d..fd4fac9a9 100644 --- a/resources/views/common/header.blade.php +++ b/resources/views/common/header.blade.php @@ -1,5 +1,5 @@