mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-03 23:00:14 -05:00
Merge pull request #4844 from PaulAdamDavis/content-list-style
Update content list styles
This commit is contained in:
commit
9881af3404
3 changed files with 51 additions and 26 deletions
|
@ -112,25 +112,47 @@
|
||||||
|
|
||||||
.entry-title {
|
.entry-title {
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
line-height: 1.25em;
|
line-height: 1.4em;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.views {
|
.entry-meta {
|
||||||
@include icon($i-stats, 10px, $brown);
|
margin-top: 14px;
|
||||||
float: right;
|
line-height: 18px;
|
||||||
text-align: right;
|
|
||||||
margin-left: 15px;
|
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
float: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 18px;
|
||||||
|
margin-right: 14px;
|
||||||
|
float: left; // Used instead of `display: block;` to remove the stupid space under the image.
|
||||||
|
object-fit: cover; // Like using 'background-size: cover;', but on an img tag - https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
|
||||||
|
}
|
||||||
|
|
||||||
|
.status,
|
||||||
|
.author {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: 300;
|
||||||
|
transition: opacity 0.15s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar:hover + .author + .status {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar:hover + .author {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 22px;
|
||||||
|
left: 56px;
|
||||||
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status {
|
.status {
|
||||||
font-size: 1.3rem;
|
|
||||||
font-weight: 300;
|
|
||||||
|
|
||||||
.draft {
|
.draft {
|
||||||
color: $red;
|
color: $red;
|
||||||
}
|
}
|
||||||
|
@ -140,10 +162,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.featured .status {
|
.featured {
|
||||||
@include icon($i-featured, 11px) {
|
@include icon($i-featured, 11px) {
|
||||||
margin-right: 10px;
|
|
||||||
vertical-align: 7%;
|
vertical-align: 7%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 25px;
|
||||||
|
right: 25px;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -155,13 +179,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
|
position: relative;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-bottom: $lightbrown 1px solid;
|
border-bottom: $lightbrown 1px solid;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 20px 20px;
|
padding: 19px 20px 22px 24px;
|
||||||
color: rgba(0,0,0,0.5);
|
color: rgba(0,0,0,0.5);
|
||||||
|
|
||||||
@include icon-after($i-chevron) {
|
@include icon-after($i-chevron) {
|
||||||
|
@ -195,18 +220,8 @@
|
||||||
@media (min-width: 901px) {
|
@media (min-width: 901px) {
|
||||||
border-bottom: lighten($midgrey, 40%) 1px solid;
|
border-bottom: lighten($midgrey, 40%) 1px solid;
|
||||||
background: lighten($lightbrown, 5%);
|
background: lighten($lightbrown, 5%);
|
||||||
box-shadow:
|
|
||||||
lighten($midgrey, 40%) 0 -1px 0, // top border
|
|
||||||
rgba(0,0,0,0.06) 7px 0 0 inset, // big left border
|
|
||||||
lighten($midgrey, 40%) 1px 0 0 inset; // small left border
|
|
||||||
|
|
||||||
.views {
|
|
||||||
@include icon($i-stats, 10px, $darkgrey);
|
|
||||||
color: $darkgrey;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}//li.active
|
|
||||||
}//.content-list
|
}//.content-list
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -2,6 +2,14 @@ var PostController = Ember.Controller.extend({
|
||||||
isPublished: Ember.computed.equal('model.status', 'published'),
|
isPublished: Ember.computed.equal('model.status', 'published'),
|
||||||
classNameBindings: ['model.featured'],
|
classNameBindings: ['model.featured'],
|
||||||
|
|
||||||
|
authorName: Ember.computed('model.author.name', 'model.author.email', function () {
|
||||||
|
return this.get('model.author.name') || this.get('model.author.email');
|
||||||
|
}),
|
||||||
|
|
||||||
|
authorAvatar: Ember.computed('model.author.image', function () {
|
||||||
|
return this.get('model.author.image') || this.get('ghostPaths.url').asset('/shared/img/user-image.png');
|
||||||
|
}),
|
||||||
|
|
||||||
actions: {
|
actions: {
|
||||||
toggleFeatured: function () {
|
toggleFeatured: function () {
|
||||||
var options = {disableNProgress: true},
|
var options = {disableNProgress: true},
|
||||||
|
|
|
@ -17,6 +17,8 @@
|
||||||
{{#link-to "posts.post" post class="permalink" alternateActive=view.active title="Edit this post"}}
|
{{#link-to "posts.post" post class="permalink" alternateActive=view.active title="Edit this post"}}
|
||||||
<h3 class="entry-title">{{post.model.title}}</h3>
|
<h3 class="entry-title">{{post.model.title}}</h3>
|
||||||
<section class="entry-meta">
|
<section class="entry-meta">
|
||||||
|
<img class="avatar" {{bind-attr src="post.authorAvatar" title="post.authorName"}}>
|
||||||
|
<span class="author">{{post.authorName}}</span>
|
||||||
<span class="status">
|
<span class="status">
|
||||||
{{#if post.isPublished}}
|
{{#if post.isPublished}}
|
||||||
{{#if post.model.page}}
|
{{#if post.model.page}}
|
||||||
|
|
Loading…
Add table
Reference in a new issue