From bd15252475f1c8429ac9c5c27435df590bc3a55e Mon Sep 17 00:00:00 2001 From: Ro Date: Fri, 29 May 2020 20:25:22 -0700 Subject: [PATCH] turned off date picker, cleaned up page edit UI --- brain/views/page-edit.pug | 55 ++++++------ brain/views/partials/options.pug | 13 +++ src/com/controllers/PageEditor.js | 2 + src/styles/main/_editor.styl | 3 +- src/styles/main/_posts.styl | 143 ++++++++++++++++-------------- 5 files changed, 121 insertions(+), 95 deletions(-) create mode 100644 brain/views/partials/options.pug diff --git a/brain/views/page-edit.pug b/brain/views/page-edit.pug index 219411e..80eaead 100644 --- a/brain/views/page-edit.pug +++ b/brain/views/page-edit.pug @@ -18,35 +18,34 @@ block main-content use(xlink:href='/assets/images/global/sprite.svg#entypo-image-inverted') #featured-image-drop img#featured-image(src=page.feature) - #post-header.columns - #post-title.column - textarea(id="post_title" type='text', name='post_title' class='post-edit', placeholder='title', required, autofocus) - =page.title - #calendar-icon - svg(viewBox="0 0 20 20" class="icons") - use(xlink:href='/assets/images/global/sprite.svg#entypo-calendar') - input(id="post-date" type="text" value=date data-raw=rawDate) - #post-options - button#option-menu-pin.option-inactive.post-option-btn(data-active= status[0]) - svg#option-page-icon(viewBox="0 0 20 20" class="icons") - use#option-page-icon(xlink:href='/assets/images/global/sprite.svg#entypo-pin') - button#option-feature.option-inactive.post-option-btn(data-active= status[1]) - svg#option-feature-icon(viewBox="0 0 20 20" class="icons") - use#option-feature-icon(xlink:href='/assets/images/global/sprite.svg#entypo-star') - button#option-published.option-inactive.post-option-btn(data-active= status[2]) - svg#option-published-icon(viewBox="0 0 20 20" class="icons") - use#option-published-icon(xlink:href='/assets/images/global/sprite.svg#entypo-globe') - button#option-preview.option-inactive(data-active="false") - svg#option-preview-icon(viewBox="0 0 20 20" class="icons") - use#option-preview-icon(xlink:href='/assets/images/global/sprite.svg#entypo-eye') - #post-meta.column - textarea(id='post_tags' type='text', name='post_tags' class='form-control', placeholder='tags [comma seperated]', autofocus) - =page.tags - include partials/editor - input(id="featured-image-upload" type="file" name="featured-image-upload") - input(id="post-image-upload" type="file" name="post-image-upload") + #post-header + #post-header-wrapper.columns + #post-title.column + label TITLE + textarea(id="post_title" type='text', name='post_title' class='post-edit', placeholder='title', required, autofocus) + =page.title + + label CREATED + br + span= date + //#calendar-icon + svg(viewBox="0 0 20 20" class="icons") + use(xlink:href='/assets/images/global/sprite.svg#entypo-calendar') + //input(id="post-date" type="text" value=date data-raw=rawDate) + + #post-meta.column + label TAGS + textarea(id='post_tags' type='text', name='post_tags' class='form-control', placeholder='tags [comma seperated]', autofocus) + =page.tags + // file inputs for image uploads + label OPTIONS + br + include partials/options + input(id="featured-image-upload" type="file" name="featured-image-upload") + input(id="post-image-upload" type="file" name="post-image-upload") #edit-post - #edit-post-wrapper + include partials/editor + #edit-post-wrapper pre code#edit-post-text(contenteditable="true") !{content} diff --git a/brain/views/partials/options.pug b/brain/views/partials/options.pug new file mode 100644 index 0000000..c2336bd --- /dev/null +++ b/brain/views/partials/options.pug @@ -0,0 +1,13 @@ +#post-options + button#option-menu-pin.option-inactive.post-option-btn(data-active= status[0]) + svg#option-page-icon(viewBox="0 0 20 20" class="icons") + use#option-page-icon(xlink:href='/assets/images/global/sprite.svg#entypo-pin') + button#option-feature.option-inactive.post-option-btn(data-active= status[1]) + svg#option-feature-icon(viewBox="0 0 20 20" class="icons") + use#option-feature-icon(xlink:href='/assets/images/global/sprite.svg#entypo-star') + button#option-published.option-inactive.post-option-btn(data-active= status[2]) + svg#option-published-icon(viewBox="0 0 20 20" class="icons") + use#option-published-icon(xlink:href='/assets/images/global/sprite.svg#entypo-globe') + button#option-preview.option-inactive(data-active="false") + svg#option-preview-icon(viewBox="0 0 20 20" class="icons") + use#option-preview-icon(xlink:href='/assets/images/global/sprite.svg#entypo-eye') \ No newline at end of file diff --git a/src/com/controllers/PageEditor.js b/src/com/controllers/PageEditor.js index 11b36d0..104da8c 100644 --- a/src/com/controllers/PageEditor.js +++ b/src/com/controllers/PageEditor.js @@ -61,12 +61,14 @@ export default class PostEditor { }, false ); + /* TinyDatePicker(document.getElementById('post-date'), { mode: 'dp-below', format() { //return self.dateUtils.getDate('origin', date); } }); + */ this.start(); } diff --git a/src/styles/main/_editor.styl b/src/styles/main/_editor.styl index 0fd3547..a69a29f 100644 --- a/src/styles/main/_editor.styl +++ b/src/styles/main/_editor.styl @@ -4,7 +4,8 @@ border-radius 3px // background-opacity($primary - 10%, 0.50) width 100% - max-width 425px + max-width 880px + margin-top 30px z-index 2000 button:nth-child(1) diff --git a/src/styles/main/_posts.styl b/src/styles/main/_posts.styl index 3afd039..33532a6 100644 --- a/src/styles/main/_posts.styl +++ b/src/styles/main/_posts.styl @@ -76,84 +76,95 @@ #post-header // width 100% - max-width 900px - margin 0 auto - padding 0.75rem - - #post-title - #post_title - background $primary - 4% - font-family $baseType - width 97.6% - height 80px + + background $highlight + #post-header-wrapper + max-width 900px + margin 0 auto + padding 0.75rem + label + color: $white + font-size: 0.8em + font-family $monoType + font-weight 600 + span + color color $primary - 60% font-size 1.5em - color $white - padding 5px - margin 0 0 5px 0 - - #post-date - background $primary - 10% - border-radius 0 3px 3px 0 - width 39.5% - font-family $baseType - color $highlight - height 30px - vertical-align top - text-align center - #calendar-icon - background $primary - 15% - border-radius 3px 0 0 3px - display inline-block - padding 5.2px - color $secondary + #post-title + #post_title + background $highlight + 10% + font-family $baseType + width 97.6% + height 80px + font-size 2em + color $primary - 60% + padding 5px + margin 0 0 5px 0 - #post-options - display inline-block - vertical-align top - width 49% - padding 0 0 0 3px + #post-date + background $primary - 10% + border-radius 0 3px 3px 0 + width 39.5% + font-family $baseType + color $highlight + height 30px + vertical-align top + text-align center - button:nth-child(1) + #calendar-icon + background $primary - 15% border-radius 3px 0 0 3px + display inline-block + padding 5.2px + color $secondary - button:nth-child(4) - border-radius 0 3px 3px 0 - - button - width 25% - height 39px - object-transitions(0.3s) - margin 0 - border-radius 0 + #post-meta + #post_tags + background $highlight + 10% + font-family $baseType + width 97.6% + height 80px + color $primary - 60% + padding 5px + margin 0 0 5px 0 + + #post-options display inline-block vertical-align top - text-align center + width 100% + padding 0 - button[data-active='false'] - background $secondary + button:nth-child(1) + border-radius 3px 0 0 3px - svg - fill $primary + button:nth-child(4) + border-radius 0 3px 3px 0 - button[data-active='true'] - background $tertiary + button + width 25% + height 39px + object-transitions(0.3s) + margin 0 + border-radius 0 + display inline-block + vertical-align top + text-align center - svg - fill $tertiary - 70% + button[data-active='false'] + background $primary - 60% - #post-meta - #post_tags - background $primary - 4% - font-family $baseType - width 97.6% - height 80px - color $secondary - padding 5px - margin 0 0 5px 0 + svg + fill $white - #featured-image-upload, #post-image-upload - display none + button[data-active='true'] + background $tertiary + 50% + + svg + fill $primary - 60% + + #featured-image-upload, #post-image-upload + display none #post-feature width 100% @@ -197,8 +208,8 @@ //width 98.7% max-width 900px border-radius 5px - background $primary - 10% - margin-bottom: 40px + //background $primary - 10% + margin: 40px 0 40px 0 overflow hidden pre