mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-27 22:49:56 -05:00
Refactor settings and content wrappers to allow smooth overflows and properly show headers on mobile
Closes #4186, Closes #4190, Closes #4150 - Alters markup to allow for correct use of `-webkit-overflow-scrolling: touch;` - Updates the debug page to use the same markup as the rest of the settings page - Solve floating tag bar issue by making it absolute, not fixed
This commit is contained in:
Paul Adam Davis
parent
27fe725357
commit
a4a3bcb2d8
7 changed files with 185 additions and 144 deletions
|
|
@ -200,6 +200,7 @@
|
|||
@media (max-width: 900px) {
|
||||
width: 100%;
|
||||
border: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.unfeatured {
|
||||
|
|
@ -217,7 +218,7 @@
|
|||
|
||||
.normal {
|
||||
text-transform: none;
|
||||
margin:0 3px;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.content-preview-content {
|
||||
|
|
@ -225,8 +226,14 @@
|
|||
word-break: break-word;
|
||||
hyphens: auto;
|
||||
|
||||
@media (max-width:400px) {
|
||||
padding: 0;
|
||||
@media (max-width: 900px) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
|
|
|
|||
|
|
@ -172,7 +172,6 @@
|
|||
background: #fff;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
top: 44px;
|
||||
|
|
|
|||
|
|
@ -176,7 +176,7 @@
|
|||
top: 40px;
|
||||
}
|
||||
@media (max-height: 560px) {
|
||||
height: calc(100% - 40px);
|
||||
height: calc(100% - 5px);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -426,7 +426,7 @@ body.zen {
|
|||
padding: 0;
|
||||
color: $midgrey;
|
||||
background: darken($darkgrey, 4%);
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
@ -701,7 +701,7 @@ body.zen {
|
|||
.post-settings {
|
||||
@include icon($i-settings, 14px);
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
padding: 8px 10px;
|
||||
color: $midgrey;
|
||||
transition: all 0.15s ease-out 0s;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -138,7 +138,6 @@
|
|||
|
||||
// The main content panel on the right
|
||||
.settings-content {
|
||||
margin-left: 25%;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
&.fade-in {
|
||||
|
|
@ -146,6 +145,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 901px) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 25%;
|
||||
bottom: 0;
|
||||
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.settings-general img {
|
||||
max-width: 100%;
|
||||
max-height: 400px;
|
||||
|
|
@ -162,6 +172,18 @@
|
|||
@media (max-width: 550px) {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
} // .content
|
||||
|
||||
.word-count {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,14 @@
|
|||
// Slug: /ghost/settings/users/username/
|
||||
// --------------------------------------------------
|
||||
|
||||
.content.settings-user {
|
||||
padding: 0;
|
||||
|
||||
@media (min-width: 901px) {
|
||||
padding: 0 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-actions-cog {
|
||||
padding: 9px 11px;
|
||||
}
|
||||
|
|
@ -12,7 +20,7 @@
|
|||
position: relative;
|
||||
width: auto;
|
||||
height: 300px;
|
||||
margin: 0 40px;
|
||||
margin: 0;
|
||||
background: #fafafa no-repeat center center;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
|
|
@ -65,7 +73,7 @@
|
|||
left: 40px;
|
||||
}
|
||||
@media (min-width: 1001px) {
|
||||
width: calc(100% - 221px);
|
||||
width: calc(100% - 181px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -77,7 +85,6 @@
|
|||
}
|
||||
|
||||
fieldset {
|
||||
padding: 0 15px 0 40px;
|
||||
@media (max-width: 650px) {
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
|
@ -125,14 +132,6 @@
|
|||
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.user-details-top,
|
||||
.user-details-bottom {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-image {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -144,13 +143,13 @@
|
|||
|
||||
@media (max-width: 650px) {
|
||||
top: -159px;
|
||||
left: -19px;
|
||||
left: 21px;
|
||||
}
|
||||
|
||||
width: 126px;
|
||||
height: 126px;
|
||||
float: left;
|
||||
margin-left: 34px;
|
||||
margin-left: -6px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
border-radius: 100%;
|
||||
|
|
|
|||
|
|
@ -1,49 +1,59 @@
|
|||
<div class="wrapper settings-debug">
|
||||
<aside class="settings-sidebar" role="complementary">
|
||||
<header>
|
||||
<h1 class="title">Ugly Debug Tools</h1>
|
||||
</header>
|
||||
</aside>
|
||||
<header class="page-header">
|
||||
<button class="menu-button js-menu-button" {{action "toggleGlobalMobileNav"}}><span class="sr-only">Menu</span></button>
|
||||
<h2 class="page-title">Settings</h2>
|
||||
</header>
|
||||
|
||||
<section class="settings-content active">
|
||||
<section class="content">
|
||||
<div class="page-content">
|
||||
|
||||
<div class="settings-content">
|
||||
|
||||
<header class="settings-view-header">
|
||||
<h2 class="page-title">Ugly Debug Tools</h2>
|
||||
<div class="js-settings-header-inner settings-header-inner">
|
||||
{{#link-to 'settings' class='btn btn-default btn-back'}}Back{{/link-to}}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="content settings-debug">
|
||||
<form id="settings-export">
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label>Export</label>
|
||||
<a class="btn btn-blue" {{action "exportData"}}>Export</a>
|
||||
<p>Export the blog settings and data.</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
{{#gh-form id="settings-import" enctype="multipart/form-data"}}
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label>Import</label>
|
||||
{{partial "import-errors"}}
|
||||
{{gh-file-upload id="importfile" uploadButtonText=uploadButtonText}}
|
||||
<p>Import from another Ghost installation. If you import a user, this will replace the current user & log you out.</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
{{/gh-form}}
|
||||
<form id="settings-resetdb">
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label>Delete all Content</label>
|
||||
<a href="javascript:void(0);" class="btn btn-red js-delete" {{action "openModal" "deleteAll"}}>Delete</a>
|
||||
<p>Delete all posts and tags from the database.</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<form id="settings-testmail">
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label>Send a test email</label>
|
||||
<button type="submit" id="sendtestmail" class="btn btn-blue" {{action "sendTestEmail"}}>Send</button>
|
||||
<p>Sends a test email to your address.</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label>Export</label>
|
||||
<a class="btn btn-blue" {{action "exportData"}}>Export</a>
|
||||
<p>Export the blog settings and data.</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
{{#gh-form id="settings-import" enctype="multipart/form-data"}}
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label>Import</label>
|
||||
{{partial "import-errors"}}
|
||||
{{gh-file-upload id="importfile" uploadButtonText=uploadButtonText}}
|
||||
<p>Import from another Ghost installation. If you import a user, this will replace the current user & log you out.</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
{{/gh-form}}
|
||||
<form id="settings-resetdb">
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label>Delete all Content</label>
|
||||
<a href="javascript:void(0);" class="btn btn-red js-delete" {{action "openModal" "deleteAll"}}>Delete</a>
|
||||
<p>Delete all posts and tags from the database.</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<form id="settings-testmail">
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label>Send a test email</label>
|
||||
<button type="submit" id="sendtestmail" class="btn btn-blue" {{action "sendTestEmail"}}>Send</button>
|
||||
<p>Sends a test email to your address.</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -20,99 +20,103 @@
|
|||
</section>
|
||||
</header>
|
||||
|
||||
<figure class="user-cover" {{bind-attr style=cover}}>
|
||||
<button class="btn btn-default user-cover-edit js-modal-cover" {{action "openModal" "upload" user "cover"}}>Change Cover</button>
|
||||
</figure>
|
||||
<div class="content settings-user">
|
||||
|
||||
<form class="user-profile" novalidate="novalidate" autocomplete="off">
|
||||
<figure class="user-cover" {{bind-attr style=cover}}>
|
||||
<button class="btn btn-default user-cover-edit js-modal-cover" {{action "openModal" "upload" user "cover"}}>Change Cover</button>
|
||||
</figure>
|
||||
|
||||
{{!-- Horrible hack to prevent Chrome from incorrectly auto-filling inputs --}}
|
||||
<input style="display:none;" type="text" name="fakeusernameremembered"/>
|
||||
<input style="display:none;" type="password" name="fakepasswordremembered"/>
|
||||
<form class="user-profile" novalidate="novalidate" autocomplete="off">
|
||||
|
||||
<fieldset class="user-details-top">
|
||||
{{!-- Horrible hack to prevent Chrome from incorrectly auto-filling inputs --}}
|
||||
<input style="display:none;" type="text" name="fakeusernameremembered"/>
|
||||
<input style="display:none;" type="password" name="fakepasswordremembered"/>
|
||||
|
||||
<figure class="user-image">
|
||||
<div id="user-image" class="img" {{bind-attr style=image}} href="#"><span class="hidden">{{name}}"s Picture</span></div>
|
||||
<button type="button" {{action "openModal" "upload" user "image"}} class="edit-user-image js-modal-image">Edit Picture</button>
|
||||
</figure>
|
||||
<fieldset class="user-details-top">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="user-name">Full Name</label>
|
||||
{{input value=user.name id="user-name" class="user-name" placeholder="Full Name" autocorrect="off"}}
|
||||
<p>Use your real name so people can recognise you</p>
|
||||
</div>
|
||||
<figure class="user-image">
|
||||
<div id="user-image" class="img" {{bind-attr style=image}} href="#"><span class="hidden">{{name}}"s Picture</span></div>
|
||||
<button type="button" {{action "openModal" "upload" user "image"}} class="edit-user-image js-modal-image">Edit Picture</button>
|
||||
</figure>
|
||||
|
||||
</fieldset>
|
||||
<div class="form-group">
|
||||
<label for="user-name">Full Name</label>
|
||||
{{input value=user.name id="user-name" class="user-name" placeholder="Full Name" autocorrect="off"}}
|
||||
<p>Use your real name so people can recognise you</p>
|
||||
</div>
|
||||
|
||||
<fieldset class="user-details-bottom">
|
||||
</fieldset>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="user-slug">Slug</label>
|
||||
{{gh-input class="user-name" id="user-slug" value=slugValue name="user" focus-out="updateSlug" placeholder="Slug" selectOnClick="true" autocorrect="off"}}
|
||||
<p>{{gh-blog-url}}/author/{{slugValue}}</p>
|
||||
</div>
|
||||
<fieldset class="user-details-bottom">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="user-email">Email</label>
|
||||
{{input type="email" value=user.email id="user-email" placeholder="Email Address" autocapitalize="off" autocorrect="off" autocomplete="off"}}
|
||||
<p>Used for notifications</p>
|
||||
</div>
|
||||
{{#if view.rolesDropdownIsVisible}}
|
||||
<div class="form-group">
|
||||
<label for="user-role">Role</label>
|
||||
{{gh-role-selector
|
||||
initialValue=role
|
||||
onChange="changeRole"
|
||||
selectId="user-role"}}
|
||||
<p>What permissions should this user have?</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="form-group">
|
||||
<label for="user-location">Location</label>
|
||||
{{input type="text" value=user.location id="user-location"}}
|
||||
<p>Where in the world do you live?</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="user-slug">Slug</label>
|
||||
{{gh-input class="user-name" id="user-slug" value=slugValue name="user" focus-out="updateSlug" placeholder="Slug" selectOnClick="true" autocorrect="off"}}
|
||||
<p>{{gh-blog-url}}/author/{{slugValue}}</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="user-website">Website</label>
|
||||
{{input type="url" value=user.website id="user-website" autocapitalize="off" autocorrect="off" autocomplete="off"}}
|
||||
<p>Have a website or blog other than this one? Link it!</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="user-email">Email</label>
|
||||
{{input type="email" value=user.email id="user-email" placeholder="Email Address" autocapitalize="off" autocorrect="off" autocomplete="off"}}
|
||||
<p>Used for notifications</p>
|
||||
</div>
|
||||
{{#if view.rolesDropdownIsVisible}}
|
||||
<div class="form-group">
|
||||
<label for="user-role">Role</label>
|
||||
{{gh-role-selector
|
||||
initialValue=role
|
||||
onChange="changeRole"
|
||||
selectId="user-role"}}
|
||||
<p>What permissions should this user have?</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="form-group">
|
||||
<label for="user-location">Location</label>
|
||||
{{input type="text" value=user.location id="user-location"}}
|
||||
<p>Where in the world do you live?</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group bio-container">
|
||||
<label for="user-bio">Bio</label>
|
||||
{{textarea id="user-bio" value=user.bio}}
|
||||
<p>
|
||||
Write about you, in 200 characters or less.
|
||||
{{gh-count-characters user.bio}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="user-website">Website</label>
|
||||
{{input type="url" value=user.website id="user-website" autocapitalize="off" autocorrect="off" autocomplete="off"}}
|
||||
<p>Have a website or blog other than this one? Link it!</p>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<div class="form-group bio-container">
|
||||
<label for="user-bio">Bio</label>
|
||||
{{textarea id="user-bio" value=user.bio}}
|
||||
<p>
|
||||
Write about you, in 200 characters or less.
|
||||
{{gh-count-characters user.bio}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
<hr />
|
||||
|
||||
<fieldset>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="user-password-old">Old Password</label>
|
||||
{{input value=user.password type="password" id="user-password-old"}}
|
||||
</div>
|
||||
<fieldset>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="user-password-new">New Password</label>
|
||||
{{input value=user.newPassword type="password" id="user-password-new"}}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="user-password-old">Old Password</label>
|
||||
{{input value=user.password type="password" id="user-password-old"}}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="user-new-password-verification">Verify Password</label>
|
||||
{{input value=user.ne2Password type="password" id="user-new-password-verification"}}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="button" class="btn btn-red button-change-password" {{action "password"}}>Change Password</button>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="user-password-new">New Password</label>
|
||||
{{input value=user.newPassword type="password" id="user-password-new"}}
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
<div class="form-group">
|
||||
<label for="user-new-password-verification">Verify Password</label>
|
||||
{{input value=user.ne2Password type="password" id="user-new-password-verification"}}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="button" class="btn btn-red button-change-password" {{action "password"}}>Change Password</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
Loading…
Add table
Reference in a new issue