responsive for posts index plugged in
This commit is contained in:
parent
c62fbf27c5
commit
10946d5326
4 changed files with 42 additions and 14 deletions
|
@ -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
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue