projects/fipamo
1
0
Fork 1
Code Issues 8 Pull requests Projects 1 Releases 23 Wiki Activity

turned off date picker, cleaned up page edit UI

Browse source
This commit is contained in:
Ro 2020-05-29 20:25:22 -07:00
parent c2517997c7
commit bd15252475
5 changed files with 123 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
brain/views/page-edit.pug
View file

@ -18,35 +18,34 @@ block main-content
use(xlink:href='/assets/images/global/sprite.svg#entypo-image-inverted') use(xlink:href='/assets/images/global/sprite.svg#entypo-image-inverted')
#featured-image-drop #featured-image-drop
img#featured-image(src=page.feature) img#featured-image(src=page.feature)
#post-header.columns #post-header
#post-title.column #post-header-wrapper.columns
textarea(id="post_title" type='text', name='post_title' class='post-edit', placeholder='title', required, autofocus) #post-title.column
=page.title label TITLE
#calendar-icon textarea(id="post_title" type='text', name='post_title' class='post-edit', placeholder='title', required, autofocus)
svg(viewBox="0 0 20 20" class="icons") =page.title
use(xlink:href='/assets/images/global/sprite.svg#entypo-calendar')
input(id="post-date" type="text" value=date data-raw=rawDate) label CREATED
#post-options br
button#option-menu-pin.option-inactive.post-option-btn(data-active= status[0]) span= date
svg#option-page-icon(viewBox="0 0 20 20" class="icons") //#calendar-icon
use#option-page-icon(xlink:href='/assets/images/global/sprite.svg#entypo-pin') svg(viewBox="0 0 20 20" class="icons")
button#option-feature.option-inactive.post-option-btn(data-active= status[1]) use(xlink:href='/assets/images/global/sprite.svg#entypo-calendar')
svg#option-feature-icon(viewBox="0 0 20 20" class="icons") //input(id="post-date" type="text" value=date data-raw=rawDate)
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]) #post-meta.column
svg#option-published-icon(viewBox="0 0 20 20" class="icons") label TAGS
use#option-published-icon(xlink:href='/assets/images/global/sprite.svg#entypo-globe') textarea(id='post_tags' type='text', name='post_tags' class='form-control', placeholder='tags [comma seperated]', autofocus)
button#option-preview.option-inactive(data-active="false") =page.tags
svg#option-preview-icon(viewBox="0 0 20 20" class="icons") // file inputs for image uploads
use#option-preview-icon(xlink:href='/assets/images/global/sprite.svg#entypo-eye') label OPTIONS
#post-meta.column br
textarea(id='post_tags' type='text', name='post_tags' class='form-control', placeholder='tags [comma seperated]', autofocus) include partials/options
=page.tags input(id="featured-image-upload" type="file" name="featured-image-upload")
include partials/editor input(id="post-image-upload" type="file" name="post-image-upload")
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
#edit-post-wrapper include partials/editor
#edit-post-wrapper
pre pre
code#edit-post-text(contenteditable="true") !{content} code#edit-post-text(contenteditable="true") !{content}

13
brain/views/partials/options.pug Normal file
View file

@ -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')

2
src/com/controllers/PageEditor.js
View file

@ -61,12 +61,14 @@ export default class PostEditor {
}, },
false false
); );
/*
TinyDatePicker(document.getElementById('post-date'), { TinyDatePicker(document.getElementById('post-date'), {
mode: 'dp-below', mode: 'dp-below',
format() { format() {
//return self.dateUtils.getDate('origin', date); //return self.dateUtils.getDate('origin', date);
} }
}); });
*/
this.start(); this.start();
} }

3
src/styles/main/_editor.styl
View file

@ -4,7 +4,8 @@
border-radius 3px border-radius 3px
// background-opacity($primary - 10%, 0.50) // background-opacity($primary - 10%, 0.50)
width 100% width 100%
max-width 425px max-width 880px
margin-top 30px
z-index 2000 z-index 2000
button:nth-child(1) button:nth-child(1)

147
src/styles/main/_posts.styl
View file

@ -76,84 +76,95 @@
#post-header #post-header
// width 100% // width 100%
max-width 900px
margin 0 auto background $highlight
padding 0.75rem #post-header-wrapper
max-width 900px
#post-title margin 0 auto
#post_title padding 0.75rem
background $primary - 4% label
font-family $baseType color: $white
width 97.6% font-size: 0.8em
height 80px font-family $monoType
font-weight 600
span
color color $primary - 60%
font-size 1.5em font-size 1.5em
color $white
padding 5px
margin 0 0 5px 0
#post-date #post-title
background $primary - 10% #post_title
border-radius 0 3px 3px 0 background $highlight + 10%
width 39.5% font-family $baseType
font-family $baseType width 97.6%
color $highlight height 80px
height 30px font-size 2em
vertical-align top color $primary - 60%
text-align center padding 5px
margin 0 0 5px 0
#calendar-icon #post-date
background $primary - 15% background $primary - 10%
border-radius 3px 0 0 3px
display inline-block
padding 5.2px
color $secondary
#post-options
display inline-block
vertical-align top
width 49%
padding 0 0 0 3px
button:nth-child(1)
border-radius 3px 0 0 3px
button:nth-child(4)
border-radius 0 3px 3px 0 border-radius 0 3px 3px 0
width 39.5%
button font-family $baseType
width 25% color $highlight
height 39px height 30px
object-transitions(0.3s)
margin 0
border-radius 0
display inline-block
vertical-align top vertical-align top
text-align center text-align center
button[data-active='false'] #calendar-icon
background $secondary background $primary - 15%
border-radius 3px 0 0 3px
display inline-block
padding 5.2px
color $secondary
svg #post-meta
fill $primary #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
width 100%
padding 0
button[data-active='true'] button:nth-child(1)
background $tertiary border-radius 3px 0 0 3px
svg button:nth-child(4)
fill $tertiary - 70% border-radius 0 3px 3px 0
#post-meta button
#post_tags width 25%
background $primary - 4% height 39px
font-family $baseType object-transitions(0.3s)
width 97.6% margin 0
height 80px border-radius 0
color $secondary display inline-block
padding 5px vertical-align top
margin 0 0 5px 0 text-align center
#featured-image-upload, #post-image-upload button[data-active='false']
display none background $primary - 60%
svg
fill $white
button[data-active='true']
background $tertiary + 50%
svg
fill $primary - 60%
#featured-image-upload, #post-image-upload
display none
#post-feature #post-feature
width 100% width 100%
@ -197,8 +208,8 @@
//width 98.7% //width 98.7%
max-width 900px max-width 900px
border-radius 5px border-radius 5px
background $primary - 10% //background $primary - 10%
margin-bottom: 40px margin: 40px 0 40px 0
overflow hidden overflow hidden
pre pre