From 793206953500c24e9ec58b1feac8e7a256b92b1c Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sun, 15 May 2016 10:39:17 +0100 Subject: [PATCH] Added tags to page display and simplified editing flow Tags now save with the page content data --- app/Repos/PageRepo.php | 10 +- resources/assets/sass/_pages.scss | 152 ++++++++++++++++++- resources/assets/sass/styles.scss | 110 -------------- resources/views/pages/edit.blade.php | 2 +- resources/views/pages/form-toolbox.blade.php | 51 +++---- resources/views/pages/page-display.blade.php | 19 ++- 6 files changed, 200 insertions(+), 144 deletions(-) diff --git a/app/Repos/PageRepo.php b/app/Repos/PageRepo.php index 938c0f5ae..a28717b76 100644 --- a/app/Repos/PageRepo.php +++ b/app/Repos/PageRepo.php @@ -14,14 +14,17 @@ class PageRepo extends EntityRepo { protected $pageRevision; + protected $tagRepo; /** * PageRepo constructor. * @param PageRevision $pageRevision + * @param TagRepo $tagRepo */ - public function __construct(PageRevision $pageRevision) + public function __construct(PageRevision $pageRevision, TagRepo $tagRepo) { $this->pageRevision = $pageRevision; + $this->tagRepo = $tagRepo; parent::__construct(); } @@ -308,6 +311,11 @@ class PageRepo extends EntityRepo $page->slug = $this->findSuitableSlug($input['name'], $book_id, $page->id); } + // Save page tags if present + if(isset($input['tags'])) { + $this->tagRepo->saveTagsToEntity($page, $input['tags']); + } + // Update with new details $userId = auth()->user()->id; $page->fill($input); diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss index e1feccb64..a1297649b 100644 --- a/resources/assets/sass/_pages.scss +++ b/resources/assets/sass/_pages.scss @@ -122,9 +122,153 @@ } } -h1, h2, h3, h4, h5, h6 { - &:hover a.link-hook { - opacity: 1; - transform: translate3d(0, 0, 0); +// Attribute form +.floating-toolbox { + background-color: #FFF; + border: 1px solid #DDD; + right: $-xl*2; + z-index: 99; + width: 48px; + overflow: hidden; + align-items: stretch; + flex-direction: row; + display: flex; + transition: width ease-in-out 180ms; + margin-top: -1px; + &.open { + width: 480px; + } + [toolbox-toggle] i { + transition: transform ease-in-out 180ms; + } + [toolbox-toggle] { + transition: background-color ease-in-out 180ms; + } + &.open [toolbox-toggle] { + background-color: rgba(255, 0, 0, 0.29); + } + &.open [toolbox-toggle] i { + transform: rotate(180deg); + } + > div { + flex: 1; + position: relative; + } + .tabs { + display: block; + border-right: 1px solid #DDD; + width: 54px; + flex: 0; + } + .tabs i { + color: rgba(0, 0, 0, 0.5); + padding: 0; + margin: 0; + } + .tabs > span { + display: block; + cursor: pointer; + padding: $-s $-m; + font-size: 13.5px; + line-height: 1.6; + border-bottom: 1px solid rgba(255, 255, 255, 0.3); + } + &.open .tabs > span.active { + color: #444; + background-color: rgba(0, 0, 0, 0.1); + } + div[tab-content] { + padding-bottom: 45px; + display: flex; + flex: 1; + flex-direction: column; + } + div[tab-content] .padded { + flex: 1; + padding-top: 0; + } + h4 { + font-size: 24px; + margin: $-m 0 0 0; + padding: 0 $-l $-s $-l; + } + .tags input { + max-width: 100%; + width: 100%; + min-width: 50px; + } + .tags td { + padding-right: $-s; + padding-top: $-s; + } + button.pos { + position: absolute; + bottom: 0; + display: block; + width: 100%; + padding: $-s; + height: 45px; + border: 0; + margin: 0; + box-shadow: none; + border-radius: 0; + &:hover{ + box-shadow: none; + } + } + .handle { + user-select: none; + cursor: move; + color: #999; + } + form { + display: flex; + flex: 1; + flex-direction: column; + overflow-y: scroll; } } + +[tab-content] { + display: none; +} + +.tag-display { + margin: $-xl $-xs; + border: 1px solid #DDD; + min-width: 180px; + max-width: 320px; + opacity: 0.7; + table { + width: 100%; + margin: 0; + padding: 0; + } + span { + color: #666; + margin-left: $-s; + } + .heading { + padding: $-xs $-s; + color: #444; + } + td { + border: 0; + border-bottom: 1px solid #DDD; + padding: $-xs $-s; + color: #444; + } + .tag-value { + color: #888; + } + td i { + color: #888; + } + tr:last-child td { + border-bottom: none; + } + .tag { + padding: $-s; + + } +} \ No newline at end of file diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss index 774088fa8..0a7da179b 100644 --- a/resources/assets/sass/styles.scss +++ b/resources/assets/sass/styles.scss @@ -207,113 +207,3 @@ $btt-size: 40px; color: #EEE; } } - -// Attribute form -.floating-toolbox { - background-color: #FFF; - border: 1px solid #DDD; - right: $-xl*2; - z-index: 99; - width: 48px; - overflow: hidden; - align-items: stretch; - flex-direction: row; - display: flex; - transition: width ease-in-out 180ms; - margin-top: -1px; - &.open { - width: 480px; - } - [toolbox-toggle] i { - transition: transform ease-in-out 180ms; - } - [toolbox-toggle] { - transition: background-color ease-in-out 180ms; - } - &.open [toolbox-toggle] { - background-color: rgba(255, 0, 0, 0.29); - } - &.open [toolbox-toggle] i { - transform: rotate(180deg); - } - > div { - flex: 1; - position: relative; - } - .tabs { - display: block; - border-right: 1px solid #DDD; - width: 54px; - flex: 0; - } - .tabs i { - color: rgba(0, 0, 0, 0.5); - padding: 0; - margin: 0; - } - .tabs > span { - display: block; - cursor: pointer; - padding: $-s $-m; - font-size: 13.5px; - line-height: 1.6; - border-bottom: 1px solid rgba(255, 255, 255, 0.3); - } - &.open .tabs > span.active { - color: #444; - background-color: rgba(0, 0, 0, 0.1); - } - div[tab-content] { - padding-bottom: 45px; - display: flex; - flex: 1; - } - div[tab-content] .padded { - flex: 1; - padding-top: 0; - } - h4 { - font-size: 24px; - margin: $-m 0 0 0; - padding: 0 $-l $-s $-l; - } - .tags input { - max-width: 100%; - width: 100%; - min-width: 50px; - } - .tags td { - padding-right: $-s; - padding-top: $-s; - } - button.pos { - position: absolute; - bottom: 0; - display: block; - width: 100%; - padding: $-s; - height: 45px; - border: 0; - margin: 0; - box-shadow: none; - border-radius: 0; - &:hover{ - box-shadow: none; - } - } - .handle { - user-select: none; - cursor: move; - color: #999; - } - form { - display: flex; - flex: 1; - flex-direction: column; - overflow-y: scroll; - } -} - -[tab-content] { - display: none; -} \ No newline at end of file diff --git a/resources/views/pages/edit.blade.php b/resources/views/pages/edit.blade.php index d5cb1d3e3..c58c8edfb 100644 --- a/resources/views/pages/edit.blade.php +++ b/resources/views/pages/edit.blade.php @@ -14,9 +14,9 @@ @endif @include('pages/form', ['model' => $page]) + @include('pages/form-toolbox') - @include('pages/form-toolbox') @include('partials/image-manager', ['imageType' => 'gallery', 'uploaded_to' => $page->id]) diff --git a/resources/views/pages/form-toolbox.blade.php b/resources/views/pages/form-toolbox.blade.php index 011094b9c..36044b789 100644 --- a/resources/views/pages/form-toolbox.blade.php +++ b/resources/views/pages/form-toolbox.blade.php @@ -5,33 +5,30 @@
-
-

Page Tags

-
-

Add some tags to better categorise your content.
You can assign a value to a tag for more in-depth organisation.

- - - - - - - - - -
- - - - - - +

Page Tags

+
+

Add some tags to better categorise your content.
You can assign a value to a tag for more in-depth organisation.

+
- -
+ + + + + + - -
-
- -
+ + + + + + + + + + +
+ +
+
\ No newline at end of file diff --git a/resources/views/pages/page-display.blade.php b/resources/views/pages/page-display.blade.php index babc4ccfd..df555da07 100644 --- a/resources/views/pages/page-display.blade.php +++ b/resources/views/pages/page-display.blade.php @@ -1,5 +1,22 @@
-

{{$page->name}}

+ +

{{$page->name}}

+ + @if(count($page->tags) > 0) +
+
Page Tags
+ + @foreach($page->tags as $tag) + + + @if($tag->value) @endif + + @endforeach +
value) colspan="2" @endif> {{ $tag->name }}{{$tag->value}}
+
+ @endif + +
{!! $page->html !!}
\ No newline at end of file