forked from projects/fipamo
turned off date picker, cleaned up page edit UI
This commit is contained in:
parent
c2517997c7
commit
bd15252475
5 changed files with 123 additions and 97 deletions
|
@ -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
13
brain/views/partials/options.pug
Normal 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')
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue