are0h
/
Fipamo
1
2
Fork 0
Code Issues 19 Pull Requests 1 Packages Projects 1 Releases 22 Wiki Activity

responsive style for post editor, navigation, and settingsk

Browse Source
sql-version-freeze
Ro 6 years ago
parent 10946d5326
commit ee82fcaa20
9 changed files with 483 additions and 270 deletions
Show Stats Download Patch File Download Diff File

134
themes/dash/assets/css/dash.css
Unescape Escape View File

@ -1884,7 +1884,7 @@ svg.icons {
display: none;
}
#settings-index {
width: 100%;
width: 94%;
max-width: 900px;
margin: 0 auto;
}
@ -2047,6 +2047,30 @@ svg.icons {
font-size: 0.8em;
margin: 0 0 0 10px;
}
@media only screen and (max-width: 375px) {
#nav-index #nav-index-wrapper #nav-pages .nav-item {
width: 94.5%;
font-size: 1em;
}
#nav-index #nav-index-wrapper #nav-pages .nav-item label {
width: 47%;
vertical-align: top;
margin-top: 0px;
line-height: 1em;
}
}
@media only screen and (max-width: 320px) {
#nav-index #nav-index-wrapper #nav-pages .nav-item {
width: 94.5%;
font-size: 1em;
}
#nav-index #nav-index-wrapper #nav-pages .nav-item label {
width: 37%;
vertical-align: top;
margin-top: 0px;
line-height: 1em;
}
}
/**
-------------------------------
-- Forms
@ -2184,6 +2208,7 @@ select {
}
#post-edit-index {
width: 100%;
overflow: hidden;
}
#post-edit-index #post-edit-index-wrapper {
width: 100%;
@ -2206,20 +2231,19 @@ select {
#post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date {
background: #32414e;
border-radius: 0 3px 3px 0;
width: 105px;
width: 39.5%;
font-family: 'Apercu';
color: #fc6399;
height: 30px;
vertical-align: top;
text-align: center;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-title label {
#post-edit-index #post-edit-index-wrapper #post-header #post-title #calendar-icon {
background: #2f3d4a;
border-radius: 3px 0 0 3px;
display: inline-block;
padding: 5px;
padding: 2.9px;
color: #b2cce5;
line-height: 30px;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-title #post-options {
display: inline-block;
@ -2333,6 +2357,84 @@ select {
width: 100%;
max-width: 900px;
}
@media only screen and (max-width: 800px) {
#post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date {
width: 37.6%;
}
}
@media only screen and (max-width: 768px) {
#post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date {
width: 43.1%;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control {
max-width: 100%;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control button {
width: 9.91%;
}
}
@media only screen and (max-width: 640px) {
#post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date {
width: 42%;
}
}
@media only screen and (max-width: 480px) {
#post-index #post-index-wrapper #post-index-menu a {
font-size: 0.95em;
}
#post-index #post-index-wrapper #post-index-menu a label {
display: none;
visibility: hidden;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-title #post-options {
margin: 5px 0 0 0;
width: 100%;
padding: 0;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date {
width: 89.2%;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control button {
width: 9.91%;
}
}
@media only screen and (max-width: 320px) {
#post-index #post-index-wrapper #post-index-menu a {
font-size: 0.95em;
}
#post-index #post-index-wrapper #post-index-menu a label {
display: none;
visibility: hidden;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-title #post_title {
width: 96.4%;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-title #post-options {
margin: 5px 0 0 0;
width: 100%;
padding: 0;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date {
width: 83.1%;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-meta #post_tags {
width: 96.4%;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control .content-editor-btn-icon svg.icons {
width: 20px;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control .post-sumbit-btn svg.icons {
width: 20px;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control button {
width: 10%;
}
}
/**
-------------------------------
-- Editor
-------------------------------
* */
.dp-modal {
position: fixed;
top: 0;
@ -2378,7 +2480,7 @@ select {
position: absolute;
font-size: 0.8em;
width: 400px;
max-width: 100vw;
max-width: 90vw;
}
.dp-permanent {
position: relative;
@ -2576,14 +2678,14 @@ select {
.dp-month:focus,
.dp-year:focus {
outline: none;
background: #bad1e8;
background: #212b34;
color: #f2f1ef;
}
.dp-selected:hover,
.dp-selected:focus,
.dp-selected {
background: #b2cce5;
color: #f2f1ef;
background: #fc6399;
color: #161d23;
}
.dp-day-disabled {
background: transparent;
@ -2610,15 +2712,6 @@ select {
padding: 8px;
}
}
@media only screen and (max-width: 480px) {
#post-index #post-index-wrapper #post-index-menu a {
font-size: 0.95em;
}
#post-index #post-index-wrapper #post-index-menu a label {
display: none;
visibility: hidden;
}
}
@-moz-keyframes slide-up {
0% {
transform: translate(-50%, 100%);
@ -2651,11 +2744,6 @@ select {
transform: translate(-50%, -50%);
}
}
/**
-------------------------------
-- Editor
-------------------------------
* */
#edit-control {
top: 1px;
border-radius: 3px;

2
themes/dash/assets/css/dash.css.map
View File

File diff suppressed because one or more lines are too long

2
themes/dash/assets/js/dash.min.js vendored
Unescape Escape View File

@ -9020,7 +9020,7 @@ var parent = module.bundle.parent;
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
var hostname = "" || location.hostname;
var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
var ws = new WebSocket(protocol + '://' + hostname + ':' + "56361" + '/');
var ws = new WebSocket(protocol + '://' + hostname + ':' + "55275" + '/');
ws.onmessage = function (event) {
var data = JSON.parse(event.data);

4
themes/dash/post-edit.pug
Unescape Escape View File

@ -39,7 +39,9 @@ block main-content
#post-title.column
textarea(id="post_title" type='text', name='post_title' class='post-edit', placeholder='title', required, autofocus)
=post_title
label Date Posted
#calendar-icon
svg(viewBox="0 0 20 20" class="icons")
use(xlink:href='/dash/assets/images/sprite.svg#entypo-calendar')
input(id="post-date" type="text" value=post_date)
#post-options
button#option-page.option-inactive.post-option-btn(data-active= status[0])

1
themes/dash/src/styles/dash.styl
Unescape Escape View File

@ -70,5 +70,6 @@
-- Editor
-------------------------------
* */
@import 'main/_calendar'
@import 'main/_editor'
@import 'main/_editor-highlight'

245
themes/dash/src/styles/main/_calendar.styl
Unescape Escape View File

@ -0,0 +1,245 @@
// TINY DATE
.dp-modal
position fixed
top 0
left 0
right 0
bottom 0
// background rgba(255, 255, 255, 0.75)
background-opacity($primary - 70%, 0.75)
z-index 2000
.dp
position relative
background $primary // #FFF
box-shadow 2px 2px 16px rgba(0, 0, 0, 0.25)
line-height 1.4
border-radius 4px
max-height 400px
z-index 5000
padding-top 6px
overflow hidden
-webkit-tap-highlight-color transparent
.dp:before
content ' '
height 6px
position absolute
top 0
left 0
right 0
background $highlight
// background linear-gradient(-90deg, #3B99FC 0%, #8AEFC8 100%)
.dp-permanent .dp
padding-top 0
border 1px solid #EEE
box-shadow none
.dp-permanent .dp:before
display none
.dp-cal
min-height 300px
.dp-below
position absolute
font-size 0.8em
width 400px
max-width 90vw
.dp-permanent
position relative
font-size 0.8em
width 400px
max-width 100vw
.dp-permanent .dp
z-index 0
.dp-modal .dp
position absolute
top 50%
left 50%
max-width 600px
width calc(100% - 4em)
transform translate(-50%, -50%)
animation slide-up 0.3s forwards
.dp-months
padding 24px
.dp-years
box-sizing border-box
max-height 400px
padding 8px 0
overflow auto !important /* HACK for Chrome on Android */
.dp-cal-month, .dp-cal-year, .dp-day, .dp-month, .dp-year
box-sizing border-box
text-align center
text-decoration none
position relative
color $white
border-radius 2px
border 0
background transparent
.dp-cal-header
position relative
text-align center
padding-bottom 16px
background $primary - 10%
.dp-next, .dp-prev
position absolute
width 30px
height 30px
overflow hidden
top 14px
color $primary - 50%
border-radius 2px
border 0
background transparent
.dp-next:focus, .dp-prev:focus, .dp-next:hover, .dp-prev:hover
outline none
color inherit
.dp-prev
left 24px
.dp-next
right 24px
.dp-prev:before, .dp-next:before
content ''
border 2px solid
width 10px
height 10px
display inline-block
transform rotate(-45deg)
transition border-color 0.2s
margin 9px 0 40px 4px
.dp-prev:before
border-right 0
border-bottom 0
.dp-next:before
border-left 0
border-top 0
margin-left 0
margin-right 4px
.dp-cal-month, .dp-cal-year
display inline-block
font-size 1.4em
padding 16px 8px 8px
outline none
.dp-cal-footer
text-align center
background $primary - 10%
.dp-day-today:after
content ''
height 0
width 0
border 7px solid $highlight
border-bottom-color transparent
border-left-color transparent
position absolute
top 0
right 0
.dp-close, .dp-clear, .dp-today
box-sizing border-box
display inline-block
width 33%
padding 8px
text-decoration none
color $primary - 50%
border 0
background transparent
.dp-permanent .dp-close, .dp-permanent .dp-clear
display none
.dp-close:active, .dp-clear:active, .dp-today:active, .dp-next:active, .dp-prev:active, .dp-cal-month:active, .dp-cal-year:active
background $highlight
color $white
@media screen and (min-device-width: 1200px)
.dp-close:hover, .dp-close:focus, .dp-clear:hover, .dp-clear:focus, .dp-today:hover, .dp-today:focus, .dp-next:hover, .dp-next:focus, .dp-prev:hover, .dp-prev:focus, .dp-cal-month:focus, .dp-cal-month:hover, .dp-cal-year:hover, .dp-cal-year:focus
background $highlight
color $white
.dp-col-header, .dp-day
width 14.28571429%
display inline-block
padding 8px
text-align center
.dp-col-header
color #AAA
text-transform uppercase
font-weight 300
font-size 0.8em
padding 8px 0
.dp-month
width 33%
display inline-block
padding 8px
.dp-year
display block
padding 8px 40px
width 100%
.dp-edge-day
color #AAA
.dp-day:hover, .dp-month:hover, .dp-year:hover, .dp-current:focus, .dp-current, .dp-day:focus, .dp-month:focus, .dp-year:focus
outline none
background $primary - 40%
color $white
.dp-selected:hover, .dp-selected:focus, .dp-selected
background $highlight
color $primary - 60%
.dp-day-disabled
background transparent
color #DDD
.dp-day-disabled:focus, .dp-day-disabled:hover
background #DDD
.dp-focuser
position absolute
z-index 0
top 50%
left 50%
/**
-------------------------------
-- Responsive
-------------------------------
* */
@media (max-width: 480px), (max-height: 480px)
.dp-modal .dp
font-size 0.9em
width auto
width 100%
.dp-day-of-week, .dp-day
padding 8px
@keyframes slide-up
0%
transform translate(-50%, 100%)
100%
transform translate(-50%, -50%)

28
themes/dash/src/styles/main/_navigation.styl
Unescape Escape View File

@ -32,3 +32,31 @@
button
font-size 0.8em
margin 0 0 0 10px
@media only screen and (max-width: 375px)
#nav-index
#nav-index-wrapper
#nav-pages
.nav-item
width 94.5%
font-size 1em
label
width 47%
vertical-align top
margin-top 0px
line-height 1em
@media only screen and (max-width: 320px)
#nav-index
#nav-index-wrapper
#nav-pages
.nav-item
width 94.5%
font-size 1em
label
width 37%
vertical-align top
margin-top 0px
line-height 1em

333
themes/dash/src/styles/main/_posts.styl
Unescape Escape View File

@ -69,6 +69,7 @@
#post-edit-index
width 100%
overflow hidden
#post-edit-index-wrapper
width 100%
@ -93,20 +94,19 @@
#post-date
background $primary - 10%
border-radius 0 3px 3px 0
width 105px
width 39.5%
font-family 'Apercu'
color $highlight
height 30px
vertical-align top
text-align center
label
#calendar-icon
background $primary - 15%
border-radius 3px 0 0 3px
display inline-block
padding 5px
padding 2.9px
color $secondary
line-height 30px
#post-options
display inline-block
@ -218,253 +218,71 @@
width 100%
max-width 900px
// TINY DATE
.dp-modal
position fixed
top 0
left 0
right 0
bottom 0
// background rgba(255, 255, 255, 0.75)
background-opacity($primary - 70%, 0.75)
z-index 2000
.dp
position relative
background $primary // #FFF
box-shadow 2px 2px 16px rgba(0, 0, 0, 0.25)
line-height 1.4
border-radius 4px
max-height 400px
z-index 5000
padding-top 6px
overflow hidden
-webkit-tap-highlight-color transparent
.dp:before
content ' '
height 6px
position absolute
top 0
left 0
right 0
background $highlight
// background linear-gradient(-90deg, #3B99FC 0%, #8AEFC8 100%)
.dp-permanent .dp
padding-top 0
border 1px solid #EEE
box-shadow none
.dp-permanent .dp:before
display none
.dp-cal
min-height 300px
.dp-below
position absolute
font-size 0.8em
width 400px
max-width 100vw
.dp-permanent
position relative
font-size 0.8em
width 400px
max-width 100vw
.dp-permanent .dp
z-index 0
.dp-modal .dp
position absolute
top 50%
left 50%
max-width 600px
width calc(100% - 4em)
transform translate(-50%, -50%)
animation slide-up 0.3s forwards
.dp-months
padding 24px
.dp-years
box-sizing border-box
max-height 400px
padding 8px 0
overflow auto !important /* HACK for Chrome on Android */
.dp-cal-month, .dp-cal-year, .dp-day, .dp-month, .dp-year
box-sizing border-box
text-align center
text-decoration none
position relative
color $white
border-radius 2px
border 0
background transparent
.dp-cal-header
position relative
text-align center
padding-bottom 16px
background $primary - 10%
.dp-next, .dp-prev
position absolute
width 30px
height 30px
overflow hidden
top 14px
color $primary - 50%
border-radius 2px
border 0
background transparent
.dp-next:focus, .dp-prev:focus, .dp-next:hover, .dp-prev:hover
outline none
color inherit
.dp-prev
left 24px
.dp-next
right 24px
.dp-prev:before, .dp-next:before
content ''
border 2px solid
width 10px
height 10px
display inline-block
transform rotate(-45deg)
transition border-color 0.2s
margin 9px 0 40px 4px
.dp-prev:before
border-right 0
border-bottom 0
.dp-next:before
border-left 0
border-top 0
margin-left 0
margin-right 4px
.dp-cal-month, .dp-cal-year
display inline-block
font-size 1.4em
padding 16px 8px 8px
outline none
.dp-cal-footer
text-align center
background $primary - 10%
.dp-day-today:after
content ''
height 0
width 0
border 7px solid $highlight
border-bottom-color transparent
border-left-color transparent
position absolute
top 0
right 0
.dp-close, .dp-clear, .dp-today
box-sizing border-box
display inline-block
width 33%
padding 8px
text-decoration none
color $primary - 50%
border 0
background transparent
.dp-permanent .dp-close, .dp-permanent .dp-clear
display none
.dp-close:active, .dp-clear:active, .dp-today:active, .dp-next:active, .dp-prev:active, .dp-cal-month:active, .dp-cal-year:active
background $highlight
color $white
@media screen and (min-device-width: 1200px)
.dp-close:hover, .dp-close:focus, .dp-clear:hover, .dp-clear:focus, .dp-today:hover, .dp-today:focus, .dp-next:hover, .dp-next:focus, .dp-prev:hover, .dp-prev:focus, .dp-cal-month:focus, .dp-cal-month:hover, .dp-cal-year:hover, .dp-cal-year:focus
background $highlight
color $white
.dp-col-header, .dp-day
width 14.28571429%
display inline-block
padding 8px
text-align center
.dp-col-header
color #AAA
text-transform uppercase
font-weight 300
font-size 0.8em
padding 8px 0
.dp-month
width 33%
display inline-block
padding 8px
.dp-year
display block
padding 8px 40px
width 100%
.dp-edge-day
color #AAA
.dp-day:hover, .dp-month:hover, .dp-year:hover, .dp-current:focus, .dp-current, .dp-day:focus, .dp-month:focus, .dp-year:focus
outline none
background $secondary + 10%
color $white
.dp-selected:hover, .dp-selected:focus, .dp-selected
background $secondary
color $white
.dp-day-disabled
background transparent
color #DDD
.dp-day-disabled:focus, .dp-day-disabled:hover
background #DDD
.dp-focuser
position absolute
z-index 0
top 50%
left 50%
/**
-------------------------------
-- Responsive
-------------------------------
* */
@media (max-width: 480px), (max-height: 480px)
.dp-modal .dp
font-size 0.9em
width auto
width 100%
@media only screen and (max-width: 800px)
#post-edit-index
#post-edit-index-wrapper
#post-header
#post-title
#post-date
width 37.6%
@media only screen and (max-width: 768px)
#post-edit-index
#post-edit-index-wrapper
#post-header
#post-title
#post-date
width 43.1%
#post-meta
#edit-control
max-width 100%
button
width 9.91%
@media only screen and (max-width: 640px)
#post-edit-index
#post-edit-index-wrapper
#post-header
#post-title
#post-date
width 42%
.dp-day-of-week, .dp-day
padding 8px
@media only screen and (max-width: 480px)
#post-index
#post-index-wrapper
#post-index-menu
a
font-size 0.95em
@keyframes slide-up
0%
transform translate(-50%, 100%)
label
display none
visibility hidden
100%
transform translate(-50%, -50%)
#post-edit-index
#post-edit-index-wrapper
#post-header
#post-title
#post-options
margin 5px 0 0 0
width 100%
padding 0
@media only screen and (max-width: 480px)
#post-date
width 89.2%
#post-meta
#edit-control
button
width 9.91%
@media only screen and (max-width: 320px)
#post-index
#post-index-wrapper
#post-index-menu
@ -474,3 +292,34 @@
label
display none
visibility hidden
#post-edit-index
#post-edit-index-wrapper
#post-header
#post-title
#post_title
width 96.4%
#post-options
margin 5px 0 0 0
width 100%
padding 0
#post-date
width 83.1%
#post-meta
#post_tags
width 96.4%
#edit-control
.content-editor-btn-icon
svg.icons
width 20px
.post-sumbit-btn
svg.icons
width 20px
button
width 10%

2
themes/dash/src/styles/main/_settings.styl
Unescape Escape View File

@ -21,7 +21,7 @@
display none
#settings-index
width 100%
width 94%
max-width 900px
margin 0 auto

Write Preview
Loading…
Cancel
Save