0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00

Fix user profile settings

References #3810, #3944

- Fixes several small visual bugs with the user settings page
- Changes `.settings-subview-header` to use a clearfix instead of `overflow: hidden;` (fixing style issues in #3944)
This commit is contained in:
Paul Adam Davis 2014-09-04 15:03:07 +01:00
parent 5e0c890b4d
commit ecf5d045f3
3 changed files with 31 additions and 11 deletions

View file

@ -156,7 +156,7 @@
padding-right: 15px; padding-right: 15px;
} }
@media (max-width: 550px) { @media (max-width: 550px) {
padding: 0 15px 40px; padding-top: 15px;
} }
} // .content } // .content
@ -238,6 +238,7 @@
// This is the header for /ghost/settings/view/subview/ // This is the header for /ghost/settings/view/subview/
// It's black and fixed position at the top of the screen // It's black and fixed position at the top of the screen
.settings-subview-header { .settings-subview-header {
@include clearfix;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -248,7 +249,6 @@
text-align: center; text-align: center;
color: #fff; color: #fff;
background: #242628; background: #242628;
overflow: hidden;
.btn-back { .btn-back {
position: absolute; position: absolute;

View file

@ -4,6 +4,10 @@
// Slug: /ghost/settings/users/username/ // Slug: /ghost/settings/users/username/
// -------------------------------------------------- // --------------------------------------------------
.user-actions-cog {
padding: 9px 11px;
}
.user-cover { .user-cover {
position: relative; position: relative;
width: auto; width: auto;
@ -14,7 +18,7 @@
overflow: hidden; overflow: hidden;
@media (max-width: 900px) { @media (max-width: 900px) {
margin: 0 15px; margin: 0;
} }
// Gradient overlay // Gradient overlay
@ -32,13 +36,13 @@
.user-cover-edit { .user-cover-edit {
position: absolute; position: absolute;
right: 35px; right: 35px;
bottom: 34px; bottom: 29px;
min-height: 34px; min-height: 37px;
height: 34px; height: 37px;
background: rgba(0,0,0,0.3); background: rgba(0,0,0,0.3);
border-radius: 0;
color: rgba(255,255,255,0.8); color: rgba(255,255,255,0.8);
z-index: 2; z-index: 2;
border-width: 0;
border-radius: $rounded; border-radius: $rounded;
transition: color 0.3s ease, background 0.3s ease; transition: color 0.3s ease, background 0.3s ease;
@media (max-width: 1000px) { @media (max-width: 1000px) {
@ -77,7 +81,13 @@
} }
fieldset { fieldset {
padding: 0 0 0 40px; padding: 0 15px 0 40px;
@media (max-width: 650px) {
padding: 0 40px;
}
@media (max-width: 550px) {
padding: 0 15px;
}
} }
textarea { textarea {
@ -89,6 +99,11 @@
@media (max-width: 650px) { @media (max-width: 650px) {
margin-bottom: 10px; margin-bottom: 10px;
label[for='user-name'] { // Reverse the affects of .sr-only
position: static;
width: auto;
height: auto;
}
} }
@media (min-width: 651px) { @media (min-width: 651px) {
@ -97,10 +112,15 @@
p { p {
color: #fff; color: #fff;
} }
.user-name {
border-color: #fff;
}
} }
.user-name { @media (min-width: 901px) {
border-color: #fff; .user-name {
width: calc(100% - 20px);
}
} }
} }

View file

@ -21,7 +21,7 @@
</header> </header>
<figure class="user-cover" {{bind-attr style=cover}}> <figure class="user-cover" {{bind-attr style=cover}}>
<button class="user-cover-edit js-modal-cover" {{action "openModal" "upload" user "cover"}}>Change Cover</button> <button class="btn btn-default user-cover-edit js-modal-cover" {{action "openModal" "upload" user "cover"}}>Change Cover</button>
</figure> </figure>
<form class="user-profile" novalidate="novalidate" autocomplete="off"> <form class="user-profile" novalidate="novalidate" autocomplete="off">