Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Cleanup & debug .nav-stacked styles

This commit is contained in:
minusfive 2017-08-23 16:16:18 -04:00 committed by Robin Ward
parent 950c9e50ac
commit 38eef177d4
4 changed files with 87 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/javascripts/discourse/templates/user/notifications.hbs
View File

@ -5,8 +5,7 @@
</li> </li>
<li> <li>
{{#link-to 'userNotifications.responses'}} {{#link-to 'userNotifications.responses'}}
{{d-icon "reply" class="glyph"}} {{d-icon "reply" class="glyph"}}{{i18n 'user_action_groups.6'}}
{{i18n 'user_action_groups.6'}}
{{/link-to}} {{/link-to}}
</li> </li>
<li> <li>

81
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -36,8 +36,8 @@ $mobile-breakpoint: 700px;
tr {text-align: left;} tr {text-align: left;}
td, th {padding: 8px;} td, th {padding: 8px;}
td { td {
border-bottom: 1px solid $primary-low; border-bottom: 1px solid $primary-low;
border-top: 1px solid $primary-low; border-top: 1px solid $primary-low;
} }
th { th {
text-align: left; text-align: left;
@ -94,7 +94,7 @@ td.flaggers td {
.site-text { .site-text {
cursor: pointer; cursor: pointer;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid $primary-low;
margin-bottom: 0.5em; margin-bottom: 0.5em;
&.overridden { &.overridden {
@ -112,7 +112,7 @@ td.flaggers td {
.site-text-value { .site-text-value {
margin: 0.5em 5em 0.5em 0; margin: 0.5em 5em 0.5em 0;
max-height: 100px; max-height: 100px;
color: $primary-medium; color: $primary-medium;
} }
} }
@ -136,7 +136,7 @@ td.flaggers td {
font-size: 0.857em; font-size: 0.857em;
float: right; float: right;
margin-right: 10px; margin-right: 10px;
background-color: $primary-low; background-color: $primary-low;
padding: 2px 5px; padding: 2px 5px;
border-radius: 5px; border-radius: 5px;
color: $primary; color: $primary;
@ -229,16 +229,16 @@ td.flaggers td {
} }
.admin-controls { .admin-controls {
background-color: $primary-low; background-color: $primary-low;
padding: 10px 10px 3px 0; padding: 10px 10px 3px 0;
@include clearfix; @include clearfix;
.nav.nav-pills { .nav.nav-pills {
li.active { li.active {
a { a {
border-color: $primary-low; border-color: $primary-low;
background-color: $primary-medium; background-color: $primary-medium;
&:hover { &:hover {
background-color: $primary-medium; background-color: $primary-medium;
} }
} }
} }
@ -374,23 +374,18 @@ td.flaggers td {
.admin-nav { .admin-nav {
width: 18.018%; width: 18.018%;
position: relative; position: relative;
li a.active {
color: $secondary;
background-color: $quaternary;
}
// The admin-nav becomes a slide-out menu at the mobile-nav breakpoint // The admin-nav becomes a slide-out menu at the mobile-nav breakpoint
@media (max-width: $mobile-breakpoint) { @media (max-width: $mobile-breakpoint) {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
width: 50%; width: 50%;
} }
margin-top: 30px;
.nav-stacked {
border-right: none;
@media (max-width: $mobile-breakpoint) {
//margin-right: 10px;
}
}
li a.active {
color: $secondary;
background-color: $quaternary;
}
} }
.admin-detail { .admin-detail {
@ -403,7 +398,7 @@ td.flaggers td {
// Todo: set this properly - it needs to be >= the menu height // Todo: set this properly - it needs to be >= the menu height
min-height: 875px; min-height: 875px;
margin-left: 0; margin-left: 0;
border-left: solid 1px $primary-low; border-left: solid 1px $primary-low;
padding: 30px 0 30px 30px; padding: 30px 0 30px 30px;
@media (max-width: $mobile-breakpoint) { @media (max-width: $mobile-breakpoint) {
padding: 30px 0; padding: 30px 0;
@ -485,7 +480,7 @@ td.flaggers td {
} }
padding: 1px; padding: 1px;
background-color: $secondary; background-color: $secondary;
border: 1px solid $primary-low; border: 1px solid $primary-low;
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3); box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3);
transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s;
@ -553,7 +548,7 @@ section.details {
color: $primary; color: $primary;
padding: 5px 10px; padding: 5px 10px;
margin: 30px 0 5px 0; margin: 30px 0 5px 0;
border-bottom: 5px solid $primary-low; border-bottom: 5px solid $primary-low;
} }
} }
@ -596,7 +591,7 @@ section.details {
&.highlight-danger { &.highlight-danger {
background-color: scale-color($danger, $lightness: 50%); background-color: scale-color($danger, $lightness: 50%);
} }
border-top: 1px solid $primary-low; border-top: 1px solid $primary-low;
&:before, &:after { &:before, &:after {
display: table; display: table;
content: ""; content: "";
@ -716,14 +711,14 @@ section.details {
font-size: 1em; font-size: 1em;
line-height: 16px; line-height: 16px;
padding: 4px; padding: 4px;
background-color: $primary-low; background-color: $primary-low;
} }
.badge-query-plan { .badge-query-plan {
font-size: 0.857em; font-size: 0.857em;
line-height: 13px; line-height: 13px;
padding: 4px; padding: 4px;
background-color: $primary-low; background-color: $primary-low;
} }
.count-warning { .count-warning {
@ -922,7 +917,7 @@ table.api-keys {
th { th {
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
background: $primary-low; background: $primary-low;
} }
th.title { th.title {
text-align: left; text-align: left;
@ -972,7 +967,7 @@ table.api-keys {
} }
&.detected-problems { &.detected-problems {
background: $primary-low; background: $primary-low;
margin-bottom: 20px; margin-bottom: 20px;
.look-here { .look-here {
@ -997,7 +992,7 @@ table.api-keys {
text-align: right; text-align: right;
} }
.btn { .btn {
background: $primary-low; background: $primary-low;
} }
ul { ul {
margin-left: 0; margin-left: 0;
@ -1047,7 +1042,7 @@ table.api-keys {
} }
.commits-widget { .commits-widget {
border: solid 1px $primary-low; border: solid 1px $primary-low;
height: 180px; height: 180px;
margin-bottom: 36px; margin-bottom: 36px;
@ -1070,7 +1065,7 @@ table.api-keys {
color: $primary; color: $primary;
font-weight: bold; font-weight: bold;
height: 30px; height: 30px;
background: $primary-low; background: $primary-low;
cursor: pointer; cursor: pointer;
h1 { h1 {
@ -1093,7 +1088,7 @@ table.api-keys {
@extend .clearfix; @extend .clearfix;
line-height: 1.0em; line-height: 1.0em;
padding: 6px 8px; padding: 6px 8px;
background-color: $primary-low; background-color: $primary-low;
.left { .left {
float: left; float: left;
} }
@ -1103,7 +1098,7 @@ table.api-keys {
img { img {
margin-top: 2px; margin-top: 2px;
border: solid 1px $primary-low; border: solid 1px $primary-low;
padding: 2px; padding: 2px;
background-color: $secondary; background-color: $secondary;
} }
@ -1134,11 +1129,11 @@ table.api-keys {
width: 6px; width: 6px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: $primary-low; background: $primary-low;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
border-left: solid 1px $primary-low; border-left: solid 1px $primary-low;
} }
} }
@ -1313,7 +1308,7 @@ table.api-keys {
color: $primary; color: $primary;
&:hover { &:hover {
color: $primary; color: $primary;
background-color: $primary-low; background-color: $primary-low;
} }
@ -1343,7 +1338,7 @@ table.api-keys {
.heading-container { .heading-container {
width: 100%; width: 100%;
background-color: $primary-low; background-color: $primary-low;
} }
.col.heading { .col.heading {
font-weight: bold; font-weight: bold;
@ -1359,7 +1354,7 @@ table.api-keys {
.ember-list-item-view { .ember-list-item-view {
width: 100%; width: 100%;
border-top: solid 1px $primary-low; border-top: solid 1px $primary-low;
} }
} }
@ -1447,14 +1442,6 @@ button.ru {
} }
} }
@media all
and (max-width : 850px) {
html:not(.mobile-view) .admin-content .nav-stacked {
.glyph {width: auto; position: relative;}
> li > a {padding: 13px}
}
}
@media all @media all
and (min-width : 320px) and (min-width : 320px)
and (max-width : 500px) { and (max-width : 500px) {
@ -1549,7 +1536,7 @@ tr.not-activated {
.user-field { .user-field {
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid $primary-low;
.form-display { .form-display {
width: 25%; width: 25%;

39
app/assets/stylesheets/common/components/navs.scss
View File

@ -50,38 +50,42 @@
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background: $primary-low; background: $primary-low;
li { li {
border-bottom: 1px solid $primary-low; border-bottom: 1px solid $primary-low;
position: relative; position: relative;
&:last-of-type { &:last-of-type {
border-bottom: 0; border-bottom: 0;
} }
&.indent {
padding-left: 15px;
}
a { a {
margin: 0; margin: 0;
padding: 13px 13px 13px 30px; padding: 13px;
font-size: 1.143em; font-size: 1.143em;
line-height: 20px; line-height: 20px;
cursor: pointer; cursor: pointer;
color: $primary; color: $primary;
} }
} }
> li.indent {
padding-left: 15px; .active > a,
} li > a.active {
.active > a, & li > a.active
{
color: $secondary; color: $secondary;
background-color: $quaternary; background-color: $quaternary;
}
.active > a::after, & li > a.active::after &:after {
{ left: 90%;
left: 90%; top: 33%;
top: 33%; content: " ";
content: " "; position: absolute;
position: absolute; border: 8px solid transparent;
border: 8px solid transparent; border-left-color: $secondary;
border-left-color: $secondary; }
} }
.count { .count {
@ -91,10 +95,9 @@
.glyph { .glyph {
font-size: 0.857em; font-size: 0.857em;
width: 30px; width: 1.25em;
text-align: center; text-align: center;
position: absolute; margin-right: .5em;
left: 2px;
line-height: 20px; line-height: 20px;
} }
} }

80
app/assets/stylesheets/desktop/user.scss
View File

@ -107,24 +107,34 @@
} }
} }
.user-navigation .nav-stacked .glyph {
display: none;
// float: right;
// display: block;
// position: static;
}
.user-navigation { .user-navigation {
display: table-cell; display: table-cell;
vertical-align: top; vertical-align: top;
width: 170px; width: 170px;
padding-left: 30px;
h3 { .nav-stacked {
color: $primary; background-color: transparent;
margin: 20px 0 10px 0; li {
border-bottom: none;
a {
color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 40%));
}
a.active {
color: $primary;
font-weight: bold;
background-color: transparent;
&:after {
display: none;
}
}
&.archive {
padding-left: 15px;
}
}
} }
} }
.viewing-self .user-main .about.collapsed-info { .viewing-self .user-main .about.collapsed-info {
@ -174,7 +184,7 @@
th { th {
text-align: left; text-align: left;
border-bottom: 3px solid $primary-low; border-bottom: 3px solid $primary-low;
padding: 0 0 10px 0; padding: 0 0 10px 0;
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
font-weight: normal; font-weight: normal;
@ -182,7 +192,7 @@
td { td {
padding: 10px 0 10px 0; padding: 10px 0 10px 0;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid $primary-low;
} }
} }
@ -194,7 +204,7 @@
} }
.user-invite-controls { .user-invite-controls {
background-color: $primary-low; background-color: $primary-low;
padding: 5px 10px 0px 0; padding: 5px 10px 0px 0;
height: 35px; height: 35px;
} }
@ -226,8 +236,8 @@
.secondary { .secondary {
background: scale-color($secondary, $lightness: -5%); background: scale-color($secondary, $lightness: -5%);
border-top: 1px solid $primary-low; border-top: 1px solid $primary-low;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid $primary-low;
font-size: 0.929em; font-size: 0.929em;
.btn { padding: 3px 12px; } .btn { padding: 3px 12px; }
@ -276,8 +286,8 @@
transition: margin .15s linear; transition: margin .15s linear;
blockquote { blockquote {
background-color: $secondary-low; background-color: $secondary-low;
border-left-color: $secondary-low; border-left-color: $secondary-low;
} }
h1 { h1 {
@ -404,7 +414,7 @@
padding: 0 0 2px 0; padding: 0 0 2px 0;
margin-top: 0; margin-top: 0;
background: rgba($secondary, .85); background: rgba($secondary, .85);
border-bottom: 1px solid $primary-low; border-bottom: 1px solid $primary-low;
.bio { display: none; } .bio { display: none; }
.primary { .primary {
@ -461,7 +471,7 @@
.item { .item {
padding: 20px 8px 15px 8px; padding: 20px 8px 15px 8px;
background-color: $secondary; background-color: $secondary;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid $primary-low;
} }
.type { .type {
color: $primary; color: $primary;
@ -637,31 +647,3 @@
float: right; float: right;
margin-bottom: 5px; margin-bottom: 5px;
} }
.user-main .nav-stacked {
&.activity-list {
padding-top: 20px;
}
background-color: transparent;
li {
border-bottom: none;
> a {
padding: 8px 13px;
color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 40%));
}
}
li > a.active {
color: $primary;
font-weight: bold;
background-color: transparent;
}
li > a.active:after {
display: none;
}
li.archive {
padding-left: 15px;
}
}