responsive for posts index plugged in

This commit is contained in:
Ro 2019-03-03 12:34:14 -05:00
parent c62fbf27c5
commit 10946d5326
4 changed files with 42 additions and 14 deletions

View file

@ -2120,6 +2120,7 @@ select {
} }
#post-index #post-index-wrapper { #post-index #post-index-wrapper {
padding: 0.75rem; padding: 0.75rem;
overflow: hidden;
} }
#post-index #post-index-wrapper #post-index-menu { #post-index #post-index-wrapper #post-index-menu {
color: #f2f1ef; color: #f2f1ef;
@ -2152,15 +2153,16 @@ select {
text-decoration: none; text-decoration: none;
margin: 0 0 20px 0; margin: 0 0 20px 0;
border-radius: 3px; border-radius: 3px;
overflow: hidden;
color: #161d23; color: #161d23;
} }
#post-index #post-index-wrapper #posts-list a.post-link label { #post-index #post-index-wrapper #posts-list a.post-link label {
font-size: 1.3em; font-size: 2em;
font-weight: 500; font-weight: 500;
padding: 10px; padding: 10px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
width: 45%; width: 100%;
} }
#post-index #post-index-wrapper #posts-list a.post-link span { #post-index #post-index-wrapper #posts-list a.post-link span {
display: inline-block; display: inline-block;
@ -2168,8 +2170,7 @@ select {
font-size: 0.8em; font-size: 0.8em;
font-family: 'Apercu-Mono'; font-family: 'Apercu-Mono';
width: 50%; width: 50%;
text-align: right; padding: 0 0 0 10px;
padding: 10px;
} }
#post-index #post-index-wrapper #posts-list a.post-link div.post-bg { #post-index #post-index-wrapper #posts-list a.post-link div.post-bg {
width: 100%; width: 100%;
@ -2177,7 +2178,7 @@ select {
background-color: #fc6399; background-color: #fc6399;
} }
#post-index #post-index-wrapper #posts-list a.post-link p { #post-index #post-index-wrapper #posts-list a.post-link p {
padding: 10px; padding: 5px 10px 5px 10px;
font-size: 1.2em; font-size: 1.2em;
font-weight: 400; font-weight: 400;
} }
@ -2609,6 +2610,15 @@ select {
padding: 8px; 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 { @-moz-keyframes slide-up {
0% { 0% {
transform: translate(-50%, 100%); transform: translate(-50%, 100%);

File diff suppressed because one or more lines are too long

View file

@ -18,14 +18,16 @@ block main-content
- else - else
a(href="/@/dashboard/posts/list/deleted")= "Deleted ("+page_info.deleted+")" a(href="/@/dashboard/posts/list/deleted")= "Deleted ("+page_info.deleted+")"
a.add-new-post(href="/@/dashboard/posts/add/new") + Create New Post a.add-new-post(href="/@/dashboard/posts/add/new") +
label Create New Post
#posts-list #posts-list
- var index = 0; - var index = 0;
- for ( index; index < items.length; index++) - for ( index; index < items.length; index++)
a.post-link(href="/@/dashboard/posts/edit/"+items[index].post.uuid id=items[index].post.uuid) a.post-link(href="/@/dashboard/posts/edit/"+items[index].post.uuid id=items[index].post.uuid)
div.post-bg(style="background: #fc6399 url("+items[index].post.feature.substr(8)+") no-repeat center center / cover")
label= items[index].post.title label= items[index].post.title
span= items[index].post.created span= items[index].post.created
div.post-bg(style="background: #fc6399 url("+items[index].post.feature.substr(8)+") no-repeat center center / cover")
p= items[index].post.plaintext.substr(0, 200)+"..." p= items[index].post.plaintext.substr(0, 200)+"..."
- var next = parseInt(page_index, 10) + 1 - var next = parseInt(page_index, 10) + 1

View file

@ -5,6 +5,7 @@
#post-index-wrapper #post-index-wrapper
padding 0.75rem padding 0.75rem
overflow hidden
#post-index-menu #post-index-menu
color $white color $white
@ -37,15 +38,16 @@
text-decoration none text-decoration none
margin 0 0 20px 0 margin 0 0 20px 0
border-radius 3px border-radius 3px
overflow hidden
color $primary - 60% color $primary - 60%
label label
font-size 1.3em font-size 2em
font-weight 500 font-weight 500
padding 10px padding 10px
display inline-block display inline-block
vertical-align top vertical-align top
width 45% width 100%
span span
display inline-block display inline-block
@ -53,8 +55,7 @@
font-size 0.8em font-size 0.8em
font-family 'Apercu-Mono' font-family 'Apercu-Mono'
width 50% width 50%
text-align right padding 0 0 0 10px
padding 10px
div.post-bg div.post-bg
width 100% width 100%
@ -62,7 +63,7 @@
background-color $highlight background-color $highlight
p p
padding 10px padding 5px 10px 5px 10px
font-size 1.2em font-size 1.2em
font-weight 400 font-weight 400
@ -442,7 +443,11 @@
top 50% top 50%
left 50% left 50%
/* Responsive overrides */ /**
-------------------------------
-- Responsive
-------------------------------
* */
@media (max-width: 480px), (max-height: 480px) @media (max-width: 480px), (max-height: 480px)
.dp-modal .dp .dp-modal .dp
font-size 0.9em font-size 0.9em
@ -458,3 +463,14 @@
100% 100%
transform translate(-50%, -50%) transform translate(-50%, -50%)
@media only screen and (max-width: 480px)
#post-index
#post-index-wrapper
#post-index-menu
a
font-size 0.95em
label
display none
visibility hidden