mirror of
https://github.com/TryGhost/Ghost.git
synced 2023-12-13 21:00:40 +01:00
Complete post-settings menu refactor
This commit is contained in:
parent
bbc1d0207e
commit
4ee1b9849b
7 changed files with 327 additions and 269 deletions
|
@ -402,6 +402,19 @@ body.zen {
|
|||
|
||||
@include breakpoint($netbook) {font-weight: normal;}
|
||||
|
||||
.post-settings {
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $lightgrey;
|
||||
}
|
||||
}
|
||||
|
||||
.post-settings-menu {
|
||||
position: absolute;
|
||||
bottom: 44px;
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
button {
|
||||
min-height: 30px;
|
||||
height: 30px;
|
||||
|
@ -615,28 +628,6 @@ body.zen {
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.entry-settings {
|
||||
@include icon($i-settings, 14px);
|
||||
@include box-sizing(border-box);
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
color: $midgrey;
|
||||
@include transition;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $lightgrey;
|
||||
}
|
||||
}
|
||||
|
||||
.entry-settings-menu {
|
||||
position: absolute;
|
||||
bottom: 44px;
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
#entry-actions {
|
||||
margin-right: 6px;
|
||||
position: relative;
|
||||
|
@ -651,13 +642,16 @@ body.zen {
|
|||
/* =============================================================================
|
||||
Markdown Help Modal
|
||||
============================================================================= */
|
||||
|
||||
.markdown-help-container{
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.modal-markdown-help-table {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
CodeMirror
|
||||
============================================================================= */
|
||||
|
|
|
@ -229,12 +229,12 @@
|
|||
.post-controls {
|
||||
float:right;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul {
|
||||
position: absolute;
|
||||
top:15px;
|
||||
right:-10px;
|
||||
}
|
||||
.post-settings-menu {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
.post-edit {
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
* Table of Contents:
|
||||
*
|
||||
* General
|
||||
* Checkboxes
|
||||
* Buttons
|
||||
* Split Buttons
|
||||
*
|
||||
|
@ -15,43 +16,32 @@
|
|||
General
|
||||
============================================================================= */
|
||||
|
||||
%label {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
left: 0;
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
color: $brown;
|
||||
text-align: right;
|
||||
|
||||
@include breakpoint(550px) {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
width: auto;
|
||||
margin-bottom: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
margin: 0 0 3em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 2em 0;
|
||||
border-bottom:$lightbrown 1px solid;
|
||||
font-size: 1.2em;
|
||||
line-height: 2.0em;
|
||||
color: $brown;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
left: 0;
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
color: $brown;
|
||||
text-align: right;
|
||||
|
||||
@include breakpoint(550px) {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
width: auto;
|
||||
margin-bottom: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
label,
|
||||
.label {
|
||||
@extend %label;
|
||||
}
|
||||
|
||||
p {
|
||||
|
@ -60,94 +50,137 @@ form {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
@include box-sizing(border-box);
|
||||
width: 276px;
|
||||
padding: 5px 7px;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.4em;
|
||||
background: #fff;
|
||||
border: darken($lightbrown, 5%) 1px solid;
|
||||
border-radius: $rounded;
|
||||
@include transition(all 0.15s ease-in-out);
|
||||
|
||||
@include breakpoint(550px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
min-width: 250px;
|
||||
height: auto;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="date"]:focus,
|
||||
input[type="month"]:focus,
|
||||
input[type="week"]:focus,
|
||||
input[type="time"]:focus,
|
||||
input[type="datetime"]:focus,
|
||||
input[type="datetime-local"]:focus,
|
||||
textarea:focus {
|
||||
border: $brown 1px solid;
|
||||
background: #fff;
|
||||
outline: none;
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
@include box-sizing(border-box);
|
||||
width: 270px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
|
||||
@include breakpoint(550px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.radio input[type="radio"],
|
||||
.checkbox input[type="checkbox"] {
|
||||
float: left;
|
||||
width:auto;
|
||||
margin-right: 6px;
|
||||
margin-top: 4px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.radio, .checkbox {
|
||||
width: auto;
|
||||
margin: 5px 0;
|
||||
font-weight: normal;
|
||||
padding:0.55em 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
position: relative;
|
||||
margin: 1.5em 0;
|
||||
padding-left: 140px;
|
||||
|
||||
@include breakpoint(550px) { padding-left: 0; }
|
||||
}
|
||||
|
||||
}//form
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
margin: 0 0 3em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 2em 0;
|
||||
border-bottom:$lightbrown 1px solid;
|
||||
font-size: 1.2em;
|
||||
line-height: 2.0em;
|
||||
color: $brown;
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
@include box-sizing(border-box);
|
||||
width: 276px;
|
||||
padding: 5px 7px;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.4em;
|
||||
background: #fff;
|
||||
border: darken($lightbrown, 5%) 1px solid;
|
||||
border-radius: $rounded;
|
||||
@include transition(all 0.15s ease-in-out);
|
||||
|
||||
@include breakpoint(550px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
min-width: 250px;
|
||||
height: auto;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="date"]:focus,
|
||||
input[type="month"]:focus,
|
||||
input[type="week"]:focus,
|
||||
input[type="time"]:focus,
|
||||
input[type="datetime"]:focus,
|
||||
input[type="datetime-local"]:focus,
|
||||
textarea:focus {
|
||||
border: $brown 1px solid;
|
||||
background: #fff;
|
||||
outline: none;
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
@include box-sizing(border-box);
|
||||
width: 270px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
|
||||
@include breakpoint(550px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
position: relative;
|
||||
margin: 1.5em 0;
|
||||
padding-left: 140px;
|
||||
|
||||
@include breakpoint(550px) { padding-left: 0; }
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Checkboxes
|
||||
============================================================================= */
|
||||
|
||||
// Hide the default checkbox
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Turn the label element into a fake checkbox
|
||||
.checkbox {
|
||||
@include box-sizing(border-box);
|
||||
position: relative;
|
||||
top: auto;
|
||||
margin-top: 0.5em;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
border-radius: $rounded;
|
||||
background: lighten($lightbrown, 5%);
|
||||
border: darken($lightbrown, 5%) 1px solid;
|
||||
@include transition(all 0.2s ease);
|
||||
|
||||
// Create a checkmark, hidden by default
|
||||
&:after {
|
||||
opacity: 0;
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 3px;
|
||||
top: 5px;
|
||||
left: 4px;
|
||||
border: 3px solid #fff;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
@include transform(rotate(-45deg));
|
||||
}
|
||||
}
|
||||
|
||||
// If the checkbox is checked, show the the :after element
|
||||
input[type=checkbox]:checked + .checkbox { background: $green; border: lighten($green, 10%); }
|
||||
input[type=checkbox]:checked + .checkbox:after { opacity: 1; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Buttons
|
||||
|
|
|
@ -318,7 +318,7 @@ table {
|
|||
padding: 8px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
vertical-align: middle;
|
||||
border-top: 1px solid $lightbrown;
|
||||
}
|
||||
|
||||
|
@ -834,77 +834,96 @@ nav {
|
|||
Post Settings
|
||||
========================================================================== */
|
||||
|
||||
.post-settings {
|
||||
@include icon($i-settings, 14px);
|
||||
@include box-sizing(border-box);
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
color: $midgrey;
|
||||
@include transition;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $darkgrey;
|
||||
}
|
||||
}
|
||||
|
||||
.post-settings-menu {
|
||||
padding-top: 0;
|
||||
text-transform: none;
|
||||
|
||||
li {
|
||||
a {
|
||||
padding: 10px 15px;
|
||||
table {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
font-size: 11px;
|
||||
line-height: 1em;
|
||||
margin-right: 1em;
|
||||
td {
|
||||
padding: 0;
|
||||
border-top: none;
|
||||
border-bottom: lighten($grey, 5%) 1px solid;
|
||||
}
|
||||
|
||||
.post-setting-label {
|
||||
padding: 8px 10px 8px 15px;
|
||||
border-right: lighten($grey, 5%) 1px solid;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
%label {
|
||||
position: static;
|
||||
width: auto;
|
||||
font-weight: normal;
|
||||
color: $midgrey;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 200px;
|
||||
margin: 0;
|
||||
|
||||
@include breakpoint(550px) { width: 200px; }
|
||||
|
||||
&[type="text"] {
|
||||
border: none;
|
||||
padding: 8px 0 8px 10px;
|
||||
color: $lightgrey;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
|
||||
&:focus {
|
||||
background: $grey;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-setting-item {
|
||||
position: relative;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
@include position(absolute, 9px 0 0 10px);
|
||||
margin-top: 0;
|
||||
width: 18px;
|
||||
border: lighten($grey, 10%) 1px solid;
|
||||
background: $grey;
|
||||
}
|
||||
|
||||
.delete {
|
||||
@include icon($i-trash) { position: relative; top: -2px; };
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
@include icon($i-trash) {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
margin-right: 10px
|
||||
};
|
||||
|
||||
&:hover { background: $red; }
|
||||
}
|
||||
}
|
||||
|
||||
.post-setting {
|
||||
min-width: 300px;
|
||||
border-bottom: 1px solid #35393b;
|
||||
|
||||
&:first-child {
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #e2edf2;
|
||||
line-height: 1.68em;
|
||||
}
|
||||
}
|
||||
|
||||
.post-setting-label {
|
||||
float: left;
|
||||
width: 26%;
|
||||
text-align: right;
|
||||
padding: 10px 2%;
|
||||
border-right: 1px solid #35393b;
|
||||
}
|
||||
|
||||
.post-setting-field {
|
||||
float: left;
|
||||
width: 64%;
|
||||
padding: 8px 2%;
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.post-settings {
|
||||
@include icon($i-settings, 14px);
|
||||
padding: 5px;
|
||||
/* margin-right: -5px;*/
|
||||
}
|
||||
|
||||
.post-setting-calendar {
|
||||
@include icon-after($i-calendar, 18px);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
margin-top: -25px; /* This doesn't work in FF */
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Notifications
|
||||
|
@ -1223,7 +1242,7 @@ main {
|
|||
}
|
||||
}
|
||||
|
||||
span {
|
||||
small {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
|
|
|
@ -4,39 +4,46 @@
|
|||
<span class="hidden">Star</span>
|
||||
</a>
|
||||
{{! TODO: JavaScript toggle featured/unfeatured}}
|
||||
<span class="status">{{#if published}}Published{{else}}Written{{/if}}</span>
|
||||
<span class="normal">by</span>
|
||||
<span class="author">{{#if author.name}}{{author.name}}{{else}}{{author.email}}{{/if}}</span>
|
||||
<small>
|
||||
<span class="status">{{#if published}}Published{{else}}Written{{/if}}</span>
|
||||
<span class="normal">by</span>
|
||||
<span class="author">{{#if author.name}}{{author.name}}{{else}}{{author.email}}{{/if}}</span>
|
||||
</small>
|
||||
<section class="post-controls">
|
||||
<a class="post-edit" href="#" title="Edit Post"><span class="hidden">Edit Post</span></a>
|
||||
<a class="post-settings" href="#" data-toggle=".post-settings-menu" title="Post Settings"><span class="hidden">Post Settings</span></a>
|
||||
<ul class="post-settings-menu menu-drop-right overlay">
|
||||
<li class="post-setting">
|
||||
<div class="post-setting-label">
|
||||
<label for="url">URL</label>
|
||||
</div>
|
||||
<div class="post-setting-field">
|
||||
<input class="post-setting-slug" type="text" value="{{{slug}}}">
|
||||
</div>
|
||||
</li>
|
||||
<li class="post-setting">
|
||||
<div class="post-setting-label">
|
||||
<label for="url">Pub Date</label>
|
||||
</div>
|
||||
<div class="post-setting-field">
|
||||
<input class="post-setting-date" type="text" value="">
|
||||
</div>
|
||||
</li>
|
||||
<li class="post-setting">
|
||||
<div class="post-setting-label">
|
||||
<label for="static-page">Static Page</label>
|
||||
</div>
|
||||
<div class="post-setting-field">
|
||||
<input id="static-page" class="post-setting-static-page" type="checkbox" value="">
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="#" class="delete hidden">Delete This Post</a></li>
|
||||
</ul>
|
||||
<div class="post-settings-menu menu-drop-right overlay">
|
||||
<form>
|
||||
<table class="plain">
|
||||
<tr class="post-setting">
|
||||
<td class="post-setting-label">
|
||||
<label for="url">URL</label>
|
||||
</td>
|
||||
<td class="post-setting-field">
|
||||
<input id="url" class="post-setting-slug" type="text" value="" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="post-setting">
|
||||
<td class="post-setting-label">
|
||||
<label for="pub-date">Pub Date</label>
|
||||
</td>
|
||||
<td class="post-setting-field">
|
||||
<input id="pub-date" class="post-setting-date" type="text" value=""><!--<span class="post-setting-calendar"></span>-->
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="post-setting">
|
||||
<td class="post-setting-label">
|
||||
<span class="label">Static Page</span>
|
||||
</td>
|
||||
<td class="post-setting-item">
|
||||
<input id="static-page" class="post-setting-static-page" type="checkbox" value="">
|
||||
<label class="checkbox" for="static-page"></label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<a class="delete" href="#">Delete This Post</a>
|
||||
</div>
|
||||
</section>
|
||||
</header>
|
||||
<section class="content-preview-content">
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<section class="content-list js-content-list">
|
||||
<header class="floatingheader">
|
||||
<section class="content-filter">
|
||||
<span>All Posts</span>
|
||||
<small>All Posts</small>
|
||||
</section>
|
||||
<a href="/ghost/editor/" class="button button-add" title="New Post"><span class="hidden">New Post</span></a>
|
||||
</header>
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
<section class="entry-markdown active">
|
||||
<header class="floatingheader">
|
||||
Markdown
|
||||
<small>Markdown</small>
|
||||
<a class="markdown-help" href="#"><span class="hidden">What is Markdown?</span></a>
|
||||
</header>
|
||||
<section id="entry-markdown-content" class="entry-markdown-content" data-filestorage={{fileStorage}}>
|
||||
|
@ -21,7 +21,7 @@
|
|||
|
||||
<section class="entry-preview">
|
||||
<header class="floatingheader">
|
||||
Preview <span class="entry-word-count js-entry-word-count">0 words</span>
|
||||
<small>Preview <span class="entry-word-count js-entry-word-count">0 words</span></small>
|
||||
</header>
|
||||
<section class="entry-preview-content">
|
||||
<div class="rendered-markdown">
|
||||
|
@ -40,36 +40,41 @@
|
|||
<ul class="suggestions overlay"></ul>
|
||||
</section>
|
||||
<div class="right">
|
||||
|
||||
|
||||
<section id="entry-controls">
|
||||
<a class="entry-settings" href="#" data-toggle=".entry-settings-menu" title="Post Settings"><span class="hidden">Post Settings</span></a>
|
||||
<ul class="post-settings-menu entry-settings-menu menu-right overlay">
|
||||
<li class="post-setting">
|
||||
<div class="post-setting-label">
|
||||
<label for="url">URL</label>
|
||||
</div>
|
||||
<div class="post-setting-field">
|
||||
<input id="url" class="post-setting-slug" type="text" value="" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="post-setting">
|
||||
<div class="post-setting-label">
|
||||
<label for="pub-date">Pub Date</label>
|
||||
</div>
|
||||
<div class="post-setting-field">
|
||||
<input id="pub-date" class="post-setting-date" type="text" value=""><!--<span class="post-setting-calendar"></span>-->
|
||||
</div>
|
||||
</li>
|
||||
<li class="post-setting">
|
||||
<div class="post-setting-label">
|
||||
<label for="static-page">Static Page</label>
|
||||
</div>
|
||||
<div class="post-setting-field">
|
||||
<input id="static-page" class="post-setting-static-page" type="checkbox" value="">
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="#" class="delete hidden">Delete This Post</a></li>
|
||||
</ul>
|
||||
<a class="post-settings" href="#" data-toggle=".post-settings-menu" title="Post Settings"><span class="hidden">Post Settings</span></a>
|
||||
<div class="post-settings-menu menu-right overlay">
|
||||
<form>
|
||||
<table class="plain">
|
||||
<tr class="post-setting">
|
||||
<td class="post-setting-label">
|
||||
<label for="url">URL</label>
|
||||
</td>
|
||||
<td class="post-setting-field">
|
||||
<input id="url" class="post-setting-slug" type="text" value="" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="post-setting">
|
||||
<td class="post-setting-label">
|
||||
<label for="pub-date">Pub Date</label>
|
||||
</td>
|
||||
<td class="post-setting-field">
|
||||
<input id="pub-date" class="post-setting-date" type="text" value=""><!--<span class="post-setting-calendar"></span>-->
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="post-setting">
|
||||
<td class="post-setting-label">
|
||||
<span class="label">Static Page</span>
|
||||
</td>
|
||||
<td class="post-setting-item">
|
||||
<input id="static-page" class="post-setting-static-page" type="checkbox" value="">
|
||||
<label class="checkbox" for="static-page"></label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<a class="delete" href="#">Delete This Post</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="entry-actions" class="js-publish-splitbutton splitbutton-save">
|
||||
|
|
Loading…
Reference in a new issue