mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
WIP: New content (#528)
* Initial style updates * First pass content management design overhaul
This commit is contained in:
John O'Nolan
Kevin Ansfield
parent
fca572163b
commit
f7fe91ceac
7 changed files with 159 additions and 211 deletions
|
|
@ -1,74 +1,53 @@
|
||||||
/* Badges
|
/* Badges
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
||||||
.badge {
|
.gh-badge {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 2px 4px;
|
padding: 2px 4px 3px;
|
||||||
min-width: 10px;
|
border: color(var(--green) blackness(+8%)) 1px solid;
|
||||||
background-color: #777;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 0 0 1px #777;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
vertical-align: baseline;
|
font-size: 0.8em;
|
||||||
|
line-height: 1em;
|
||||||
|
font-weight: 400;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font-size: 1rem;
|
user-select: none;
|
||||||
line-height: 1;
|
background: linear-gradient(
|
||||||
font-weight: inherit;
|
color(var(--green) whiteness(+4%)),
|
||||||
|
color(var(--green) blackness(+4%))
|
||||||
|
);
|
||||||
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge:empty {
|
.gh-badge-blue {
|
||||||
display: none;
|
border: color(var(--blue) blackness(+8%)) 1px solid;
|
||||||
|
background: linear-gradient(
|
||||||
|
color(var(--blue) whiteness(+10%)),
|
||||||
|
color(var(--blue) blackness(+4%))
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn .badge {
|
.gh-badge-red {
|
||||||
position: relative;
|
border: color(var(--red) blackness(+8%)) 1px solid;
|
||||||
top: -1px;
|
background: linear-gradient(
|
||||||
|
color(var(--red) whiteness(+10%)),
|
||||||
|
color(var(--red) blackness(+4%))
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-xs .badge {
|
.gh-badge-black {
|
||||||
top: 0;
|
border: color(var(--darkgrey) blackness(+8%)) 1px solid;
|
||||||
padding: 1px 5px;
|
background: linear-gradient(
|
||||||
|
color(var(--darkgrey) whiteness(+10%)),
|
||||||
|
color(var(--darkgrey) blackness(+4%))
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
p .badge {
|
.gh-badge-outline {
|
||||||
position: relative;
|
border-color: color(var(--midgrey) l(+35%));
|
||||||
top: -2px;
|
color: color(var(--midgrey) l(+25%));
|
||||||
margin-left: -1px;
|
font-weight: 400;
|
||||||
padding: 0 4px 3px;
|
background: transparent;
|
||||||
}
|
box-shadow: none;
|
||||||
|
|
||||||
.nav-pills > li > a > .badge {
|
|
||||||
margin-left: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item .badge {
|
|
||||||
margin-top: -5px;
|
|
||||||
margin-left: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.badge:hover,
|
|
||||||
a.badge:focus {
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Colour variations
|
|
||||||
/* ---------------------------------------------------------- */
|
|
||||||
|
|
||||||
.badge.badge-blue {
|
|
||||||
background-color: var(--blue);
|
|
||||||
box-shadow: 0 0 0 1px var(--blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge.badge-green {
|
|
||||||
background-color: var(--green);
|
|
||||||
box-shadow: 0 0 0 1px var(--green);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge.badge-red {
|
|
||||||
background-color: var(--red);
|
|
||||||
box-shadow: 0 0 0 1px var(--red);
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,53 +3,45 @@
|
||||||
/* Header
|
/* Header
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
||||||
.gh-content-view-container .view-header {
|
.gh-contentfilter {
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.basic-filter {
|
|
||||||
margin-top: 0.5em;
|
|
||||||
border-bottom: #dfe1e3 1px solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.basic-filter ul {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
margin: 2vw 0 1vw;
|
||||||
margin-bottom: 0;
|
padding: 0;
|
||||||
padding-left: 0.7em;
|
border-top: color(var(--lightgrey)) 1px solid;
|
||||||
}
|
|
||||||
|
|
||||||
.basic-filter li {
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-contentfilter li {
|
||||||
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-bottom: 0;
|
margin: 0 25px 0 0;
|
||||||
padding: 0 0.5em 10px 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.basic-filter li.active {
|
.gh-contentfilter li.active:after {
|
||||||
border-bottom: #dfe1e3 3px solid ;
|
content: "";
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--darkgrey);
|
||||||
|
position: absolute;
|
||||||
|
top: -1px;
|
||||||
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.basic-filter li a {
|
.gh-contentfilter li a {
|
||||||
|
display: block;
|
||||||
|
padding: 13px 1px 0;
|
||||||
color: var(--midgrey);
|
color: var(--midgrey);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 300;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.basic-filter li a.active {
|
.gh-contentfilter a.active {
|
||||||
font-weight: bold;
|
font-weight: 500;
|
||||||
color: var(--darkgrey);
|
color: var(--darkgrey);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
.basic-filter ul {
|
|
||||||
padding-left: 8px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
|
||||||
.basic-filter ul {
|
|
||||||
padding-left: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Content List
|
/* Content List
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
@ -60,7 +52,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-list ol {
|
.content-list ol {
|
||||||
margin: 20px 4vw;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
@ -68,87 +60,50 @@
|
||||||
.gh-posts-list-item {
|
.gh-posts-list-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 24px 0 25px 0;
|
||||||
border-bottom: #dfe1e3 1px solid;
|
border-bottom: color(var(--lightgrey)) 1px solid;
|
||||||
}
|
|
||||||
|
|
||||||
.gh-posts-list-item a {
|
|
||||||
display: block;
|
|
||||||
padding: 19px 25px 22px 20px;
|
|
||||||
color: rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-posts-list-item a:hover {
|
.gh-posts-list-item a:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-posts-list-item .entry-title {
|
.gh-content-entry-title {
|
||||||
margin: 0 0 0.2em 0;
|
margin: 0 0 3px 0;
|
||||||
font-size: 1.5rem;
|
font-size: 2.2rem;
|
||||||
line-height: 1.3em;
|
font-weight: 600;
|
||||||
font-weight: normal;
|
letter-spacing: 0.4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-content-entry-title a {
|
||||||
|
color: color(var(--darkgrey) l(+3%));
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-posts-list-item p {
|
.gh-posts-list-item p {
|
||||||
margin: 0 0 1em 0;
|
margin: 0;
|
||||||
font-size: 0.8em;
|
font-size: 1.6rem;
|
||||||
line-height: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gh-posts-list-item .entry-meta {
|
|
||||||
position: relative;
|
|
||||||
margin-top: 7px;
|
|
||||||
line-height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gh-posts-list-item .avatar {
|
|
||||||
position: relative;
|
|
||||||
float: left;
|
|
||||||
margin: 1px 10px 0px 0;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
background-position: center center;
|
|
||||||
background-size: cover;
|
|
||||||
border-radius: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gh-posts-list-item .avatar img {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gh-posts-list-item .status,
|
|
||||||
.gh-posts-list-item .author {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
transition: opacity 0.15s linear;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-posts-list-item .avatar:hover + .author + .status {
|
|
||||||
opacity: 0;
|
.gh-content-entry-meta {
|
||||||
|
margin: 10px 0 0 0;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: var(--midgrey);
|
||||||
|
font-weight: 200;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-posts-list-item .avatar:hover + .author {
|
.gh-content-entry-meta .gh-badge {
|
||||||
opacity: 1;
|
margin-right: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-posts-list-item .author {
|
.gh-content-status-published {
|
||||||
position: absolute;
|
color: var(--darkgrey);
|
||||||
bottom: 0;
|
|
||||||
left: 28px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-posts-list-item .status .draft {
|
.gh-content-entry-author {
|
||||||
color: var(--red);
|
color: var(--darkgrey);
|
||||||
}
|
|
||||||
|
|
||||||
.gh-posts-list-item .status .scheduled {
|
|
||||||
color: var(--green);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 400px) {
|
@media (max-width: 400px) {
|
||||||
|
|
|
||||||
|
|
@ -49,12 +49,11 @@ body > .ember-view:not(.liquid-target-container) {
|
||||||
.gh-nav {
|
.gh-nav {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 800;
|
z-index: 800;
|
||||||
flex: 0 0 205px;
|
flex: 0 0 280px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-width: 0; /* TODO: This is a bullshit Firefox hack */
|
min-width: 0; /* TODO: This is a bullshit Firefox hack */
|
||||||
border-right: #dfe1e3 1px solid;
|
background: color(var(--lightgrey) l(+4%));
|
||||||
background: #f5f7f8;
|
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -216,7 +215,7 @@ body > .ember-view:not(.liquid-target-container) {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border-top: #dfe1e3 1px solid;
|
padding-bottom: 5px;
|
||||||
color: var(--midgrey);
|
color: var(--midgrey);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -458,6 +457,33 @@ body > .ember-view:not(.liquid-target-container) {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gh-canvas {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 2.9vw 4vw 3vw 4vw;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-canvas-header {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-canvas-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: 3.4rem;
|
||||||
|
line-height: 1.2em;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.4px;
|
||||||
|
}
|
||||||
|
|
||||||
.view-header {
|
.view-header {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
/* Colours */
|
/* Colours */
|
||||||
--darkgrey: #343f44;
|
--darkgrey: #343f44;
|
||||||
--midgrey: #738a94;
|
--midgrey: #738a94;
|
||||||
--lightgrey: #e2edf2;
|
--lightgrey: #e5eff5;
|
||||||
--blue: #3eb0ef;
|
--blue: #3eb0ef;
|
||||||
--red: #f05230;
|
--red: #f05230;
|
||||||
--orange: #fecd35;
|
--orange: #fecd35;
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,24 @@
|
||||||
<header class="view-header">
|
<header class="gh-canvas-header">
|
||||||
{{#gh-view-title openMobileMenu="openMobileMenu"}}<span>Your stories</span>{{/gh-view-title}}
|
<h2 class="gh-canvas-title">Your stories</h2>
|
||||||
<section class="view-actions">
|
<section class="view-actions">
|
||||||
{{link-to "New Story" "editor.new" class="btn btn-green" title="New Story" data-test-new-post-button=true}}
|
{{link-to "New Story" "editor.new" class="btn btn-green" title="New Story" data-test-new-post-button=true}}
|
||||||
</section>
|
</section>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section class="basic-filter">
|
<ul class="gh-contentfilter">
|
||||||
<ul>
|
{{#active-link}}
|
||||||
{{#active-link}}
|
{{link-to "All" "posts.index" (query-params type=null) data-test-all-filter-link=true}}
|
||||||
{{link-to "All" "posts.index" (query-params type=null) data-test-all-filter-link=true}}
|
{{/active-link}}
|
||||||
{{/active-link}}
|
{{#active-link}}
|
||||||
{{#active-link}}
|
{{link-to "Drafts" "posts.index" (query-params type="draft") data-test-drafts-filter-link=true}}
|
||||||
{{link-to "Drafts" "posts.index" (query-params type="draft") data-test-drafts-filter-link=true}}
|
{{/active-link}}
|
||||||
{{/active-link}}
|
{{#active-link}}
|
||||||
{{#active-link}}
|
{{link-to "Published" "posts.index" (query-params type="published") data-test-published-filter-link=true}}
|
||||||
{{link-to "Published" "posts.index" (query-params type="published") data-test-published-filter-link=true}}
|
{{/active-link}}
|
||||||
{{/active-link}}
|
{{#active-link}}
|
||||||
{{#active-link}}
|
{{link-to "Scheduled" "posts.index" (query-params type="scheduled") data-test-scheduled-filter-link=true}}
|
||||||
{{link-to "Scheduled" "posts.index" (query-params type="scheduled") data-test-scheduled-filter-link=true}}
|
{{/active-link}}
|
||||||
{{/active-link}}
|
{{#active-link}}
|
||||||
{{#active-link}}
|
{{link-to "Pages" "posts.index" (query-params type="page") data-test-pages-filter-link=true}}
|
||||||
{{link-to "Pages" "posts.index" (query-params type="page") data-test-pages-filter-link=true}}
|
{{/active-link}}
|
||||||
{{/active-link}}
|
</ul>
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,22 @@
|
||||||
{{#link-to "editor.edit" post.id class="permalink" title="Edit this post"}}
|
<h3 class="gh-content-entry-title">{{#link-to "editor.edit" post.id class="permalink" title="Edit this post"}}{{post.title}}{{/link-to}}</h3>
|
||||||
<h3 class="entry-title">{{post.title}}</h3>
|
<p>{{subText}}</p>
|
||||||
<p>{{subText}}</p>
|
|
||||||
|
|
||||||
<section class="entry-meta">
|
<section class="gh-content-entry-meta">
|
||||||
<span class="status">
|
{{#if isPublished}}
|
||||||
{{#if isPublished}}
|
{{#if post.page}}
|
||||||
{{#if post.page}}
|
<span class="gh-content-status-draft gh-badge gh-badge-black">Page</span>
|
||||||
<span class="page">Page</span>
|
|
||||||
{{else}}
|
|
||||||
<time datetime="{{post.publishedAtUTC}}" class="date published">
|
|
||||||
Published {{gh-format-timeago post.publishedAtUTC}}.
|
|
||||||
</time>
|
|
||||||
{{/if}}
|
|
||||||
{{else}}
|
{{else}}
|
||||||
{{#if isScheduled}}
|
<span class="gh-content-status-published">Published</span>
|
||||||
<span class="scheduled">Scheduled</span>
|
|
||||||
<span>–
|
|
||||||
<time datetime="{{post.publishedAtUTC}}" class-="date scheduled">
|
|
||||||
{{gh-format-time-scheduled post.publishedAtUTC blogTimezone}}
|
|
||||||
</time>
|
|
||||||
</span>
|
|
||||||
{{else}}
|
|
||||||
<span class="draft">Draft</span>
|
|
||||||
{{/if}}
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
{{else}}
|
||||||
|
{{#if isScheduled}}
|
||||||
|
<span class="gh-content-status-draft gh-badge">Scheduled</span>
|
||||||
|
{{else}}
|
||||||
|
<span class="gh-content-status-draft gh-badge gh-badge-red">Draft</span>
|
||||||
|
{{/if}}
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
Last edited {{gh-format-timeago post.updatedAtUTC}}
|
by <span class="gh-content-entry-author">{{authorName}}</span> —
|
||||||
– by {{authorName}}
|
Last edited {{gh-format-timeago post.updatedAtUTC}}
|
||||||
</span>
|
|
||||||
</section>
|
</section>
|
||||||
{{/link-to}}
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<section class="gh-view gh-content-view-container">
|
<section class="gh-canvas">
|
||||||
{{partial "posts-header"}}
|
{{partial "posts-header"}}
|
||||||
|
|
||||||
{{outlet}}
|
{{outlet}}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue