Merge pull request #5122 from JohnONolan/settings-cleanup

Cleaned up some derpy settings padding and widths
This commit is contained in:
Hannah Wolfe 2015-04-09 16:17:43 +01:00
commit e19573f5d5
3 changed files with 33 additions and 23 deletions

View File

@ -23,16 +23,18 @@
} }
} }
@media (min-width: 901px) {
.settings-content .settings-about {
padding: 25px 40px 0;
}
}
// //
// Logo & Version // Logo & Version
// -------------------------------------------------- // --------------------------------------------------
.about-ghost-intro { .about-ghost-intro {
@media (max-width: 550px) {
padding-top: 40px;
}
h1 { h1 {
margin-top: -6px; margin-top: -6px;
margin-bottom: -21px; margin-bottom: -21px;

View File

@ -174,11 +174,7 @@
} }
.content { .content {
padding: 40px; padding: 0 40px;
@media (max-width: 550px) {
padding-top: 15px;
}
@media (max-width: 900px) { @media (max-width: 900px) {
position: absolute; position: absolute;
@ -186,12 +182,13 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
padding-left: 15px; padding: 15px;
padding-right: 15px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
}//.content }//.content
.word-count { .word-count {
@ -409,7 +406,7 @@
// &.last-navigation-item { // &.last-navigation-item {
&:last-child { &:last-child {
padding-left: 27px; // simulate .navigation-item-drag-handle width + horizontal padding padding-left: 17px; // simulate .navigation-item-drag-handle width + horizontal padding
.navigation-item-drag-handle { .navigation-item-drag-handle {
display: none; display: none;
@ -418,15 +415,15 @@
} }
.navigation-item-drag-handle { .navigation-item-drag-handle {
padding: 6px 17px 0 10px; padding: 6px 17px 0 0;
width: 27px; width: 17px;
cursor: move; cursor: move;
@media (max-width: 600px) { @media (max-width: 600px) {
&:before { &:before {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 4px; left: 0;
margin-top: -9px; margin-top: -9px;
z-index: 20; z-index: 20;
} }
@ -517,6 +514,19 @@
// Code Injection // Code Injection
// -------------------------------------------------- // --------------------------------------------------
.settings-code {
.form-group {
max-width: 700px;
p {
margin: 0 0 4px 0;
}
}
code {
vertical-align: middle;
}
}
.settings-code-editor { .settings-code-editor {
width: 100%; width: 100%;
min-width: 250px; min-width: 250px;
@ -534,4 +544,4 @@
outline: 0; outline: 0;
} }
} }

View File

@ -9,21 +9,19 @@
<section class="content settings-code"> <section class="content settings-code">
<form id="settings-code" novalidate="novalidate"> <form id="settings-code" novalidate="novalidate">
<fieldset> <fieldset>
<div class="form-group"> <p>
<p> Ghost allows you to inject code into the top and bottom of your theme files without editing them. This allows for quick modifications to insert useful things like tracking codes and meta tags.
Ghost allows you to inject code into the top and bottom of your template files without editing them. This allows for quick modifications to insert useful things like tracking codes and meta data. </p>
</p>
</div>
<div class="form-group"> <div class="form-group">
<label for="ghost-head">Blog Header</label> <label for="ghost-head">Blog Header</label>
<p>Code here will be injected to the \{{ghost_head}} helper at the top of your page</p> <p>Code here will be injected into the <code>\{{ghost_head}}</code> tag on every page of your blog</p>
{{gh-cm-editor id="ghost-head" name="codeInjection[ghost_head]" class="settings-code-editor" type="text" value=model.ghost_head}} {{gh-cm-editor id="ghost-head" name="codeInjection[ghost_head]" class="settings-code-editor" type="text" value=model.ghost_head}}
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="ghost-foot">Blog Footer</label> <label for="ghost-foot">Blog Footer</label>
<p>Code here will be injected to the \{{ghost_foot}} helper at the bottom of your page</p> <p>Code here will be injected into the <code>\{{ghost_foot}}</code> tag on every page of your blog</p>
{{gh-cm-editor id="ghost-foot" name="codeInjection[ghost_foot]" class="settings-code-editor" type="text" value=model.ghost_foot}} {{gh-cm-editor id="ghost-foot" name="codeInjection[ghost_foot]" class="settings-code-editor" type="text" value=model.ghost_foot}}
</div> </div>
</fieldset> </fieldset>