user blogging WIP
parent
e66e7a5828
commit
423af40124
|
@ -27,7 +27,7 @@ object index {
|
|||
newPostLink
|
||||
)
|
||||
),
|
||||
div(cls := "ublog-index__posts infinite-scroll")(
|
||||
div(cls := "ublog-index__posts ublog-post-cards infinite-scroll")(
|
||||
posts.currentPageResults map { postView.card(_) },
|
||||
pagerNext(posts, np => s"${routes.Ublog.index(user.username, np).url}")
|
||||
)
|
||||
|
@ -47,7 +47,7 @@ object index {
|
|||
newPostLink
|
||||
)
|
||||
),
|
||||
div(cls := "ublog-index__posts ublog-index__posts--drafts infinite-scroll")(
|
||||
div(cls := "ublog-index__posts ublog-index__posts--drafts ublog-post-cards infinite-scroll")(
|
||||
posts.currentPageResults map { postView.card(_, postView.editUrlOf) },
|
||||
pagerNext(posts, np => s"${routes.Ublog.drafts(user.username, np).url}")
|
||||
)
|
||||
|
|
|
@ -38,7 +38,7 @@ object post {
|
|||
span(cls := "ublog-post__meta__date")(semanticDate(date))
|
||||
}
|
||||
),
|
||||
div(cls := "ublog-post__image"),
|
||||
imageOf(post)(cls := "ublog-post__image"),
|
||||
strong(cls := "ublog-post__intro")(post.intro),
|
||||
div(cls := "ublog-post__markup")(markup)
|
||||
)
|
||||
|
@ -59,41 +59,28 @@ object post {
|
|||
def editUrlOf(post: UblogPost) = routes.Ublog.edit(usernameOrId(post.user), post.id.value)
|
||||
|
||||
def thumbnailOf(post: UblogPost) = {
|
||||
val (w, h) = (400, 200)
|
||||
val (w, h) = (600, 200)
|
||||
post.image match {
|
||||
case Some(image) =>
|
||||
img(
|
||||
width := w,
|
||||
height := h,
|
||||
cls := "ublog-post-image",
|
||||
src := picfitUrl(image).thumbnail(w, h)
|
||||
)
|
||||
baseImg(src := picfitUrl(image).thumbnail(w, h))
|
||||
case _ =>
|
||||
img(
|
||||
width := w,
|
||||
height := h,
|
||||
cls := "default image",
|
||||
src := assetUrl("images/placeholder.png"),
|
||||
alt := "Default blog post image"
|
||||
)
|
||||
div(cls := "ublog-post-image-default")
|
||||
}
|
||||
}
|
||||
|
||||
def imageOf(post: UblogPost, height: Int = 300) =
|
||||
def imageOf(post: UblogPost, height: Int = 400) =
|
||||
post.image match {
|
||||
case Some(image) =>
|
||||
img(
|
||||
attr("height") := height,
|
||||
cls := "ublog-post-image",
|
||||
baseImg(
|
||||
heightA := height,
|
||||
src := picfitUrl(image).resize(Right(height))
|
||||
)
|
||||
case _ =>
|
||||
img(
|
||||
attr("height") := height,
|
||||
cls := "default image",
|
||||
src := assetUrl("images/placeholder.png"),
|
||||
alt := "Default blog post image"
|
||||
baseImg(
|
||||
heightA := height,
|
||||
src := assetUrl("images/placeholder.png")
|
||||
)
|
||||
}
|
||||
|
||||
private val baseImg = img(cls := "ublog-post-image")
|
||||
}
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 19 KiB |
|
@ -1,4 +1,3 @@
|
|||
@import '../../../common/css/plugin';
|
||||
@import '../../../common/css/form/form3';
|
||||
@import '../ublog/ublog';
|
||||
@import '../ublog/form';
|
||||
|
|
|
@ -0,0 +1,58 @@
|
|||
.ublog-post {
|
||||
&-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
|
||||
grid-gap: 3vmin;
|
||||
}
|
||||
&-card {
|
||||
@extend %box-neat-force;
|
||||
|
||||
@include transition;
|
||||
|
||||
background: $c-bg-zebra;
|
||||
color: $c-font;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 5px $c-link, 0 0 20px $c-link;
|
||||
}
|
||||
|
||||
time {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0.2em 0.5em;
|
||||
background: #111;
|
||||
color: #ddd;
|
||||
border-radius: 0 0 $box-radius-size 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&__image {
|
||||
height: 200px;
|
||||
&.ublog-post-image-default {
|
||||
background-image: img-url('placeholder-margin.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding: 2vmin;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 1.3em;
|
||||
color: $c-font-clear;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__intro {
|
||||
@extend %roboto;
|
||||
|
||||
margin-top: 2vmin;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,13 +1,11 @@
|
|||
@import 'card';
|
||||
@import 'form';
|
||||
|
||||
.ublog {
|
||||
&-index {
|
||||
.box__top__actions {
|
||||
@extend %flex-center;
|
||||
}
|
||||
&__posts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
|
||||
grid-gap: 3vmin;
|
||||
}
|
||||
}
|
||||
&-post {
|
||||
&__header {
|
||||
|
@ -39,53 +37,4 @@
|
|||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
&-post-card {
|
||||
@extend %box-neat-force;
|
||||
|
||||
@include transition;
|
||||
|
||||
background: $c-bg-zebra;
|
||||
color: $c-font;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 5px $c-link, 0 0 20px $c-link;
|
||||
}
|
||||
|
||||
time {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0.2em 0.5em;
|
||||
background: #111;
|
||||
color: #ddd;
|
||||
border-radius: 0 0 $box-radius-size 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: 10vh;
|
||||
background: $c-bg-zebra;
|
||||
background: #888;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding: 2vmin;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 1.3em;
|
||||
color: $c-font-clear;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__intro {
|
||||
@extend %roboto;
|
||||
|
||||
margin-top: 2vmin;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue