IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

REFACTOR: More consistent user/group page layouts

Browse Source
This commit is contained in:
Kris
2019-03-25 14:38:38 -04:00
parent cb70a328f5
commit df279251b7
23 changed files with 251 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
app/assets/stylesheets/common/base/user.scss
View File

@@ -1,12 +1,79 @@
// Common styles for "/user" section
// These styles are also used for "/groups" — test those pages if making significant changes
.user-right {
.user-content-wrapper {
// Grid layout
display: grid;
grid-template-columns: 1fr 5fr;
grid-template-rows: auto auto 1fr auto;
grid-row-gap: s(5);
.user-primary-navigation {
grid-column-start: span 2;
grid-row-start: 1;
grid-row-end: 2;
}
.user-secondary-navigation {
grid-column-start: 1;
grid-row-start: 2;
grid-row-end: 3;
}
.user-content,
.spinner {
grid-row-start: 2;
grid-row-end: 4;
grid-column-end: span 2;
}
.user-content {
min-width: 100%;
}
.user-secondary-navigation + .user-content {
grid-column-start: 2;
grid-column-end: span 1;
}
.user-additional-controls {
grid-row-start: 3;
align-self: start;
justify-self: start;
}
}
.user-content-wrapper { // IE11 Support
display: -ms-grid;
-ms-grid-columns: 1fr 5fr;
-ms-grid-rows: auto auto 1fr auto;
.user-primary-navigation {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
}
.user-secondary-navigation {
-ms-grid-row: 1;
-ms-grid-column: 2;
}
.user-content,
.spinner {
-ms-grid-row: 2;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
}
.user-secondary-navigation + .user-content {
-ms-grid-column: 2;
-ms-grid-column-span: 1;
}
.user-additional-controls {
-ms-grid-row: 3;
-ms-grid-column-align: start;
-ms-grid-row-align: start;
}
}
.user-content {
.list-actions {
display: flex;
margin-bottom: 10px;
margin-bottom: s(3);
.btn {
margin-right: 10px;
margin-right: s(3);
}
}
@@ -17,6 +84,10 @@
.show-mores {
width: 100%;
}
.d-icon-heart {
color: $love;
}
}
.user-main {
@@ -163,14 +234,6 @@
}
&.collapsed-info {
.controls {
margin-top: 0;
}
.profile-image {
height: 0;
}
.details {
margin-top: 0;
background: rgba($secondary, 0.8);
@@ -180,12 +243,9 @@
}
.primary {
text-align: left;
margin-top: 0;
width: 100%;
.avatar {
float: left;
margin-right: 10px;
width: 45px;
height: 45px;
@@ -197,7 +257,6 @@
h2 {
font-size: $font-up-1;
margin-top: 4px;
}
h3,
h3.location-and-website {
@@ -210,7 +269,7 @@
.avatar-flair {
bottom: 8px;
right: 2px;
.fa {
.d-icon {
font-size: $font-0;
}
}
@@ -229,34 +288,22 @@
align-items: baseline;
flex: 0 1 auto;
margin: 0 10px 0 0;
color: $secondary;
span {
padding: 1px 6px;
padding: 0 7px 1px;
border-radius: 10px;
margin-right: 5px;
}
}
a {
color: $secondary;
}
.active {
font-weight: bold;
}
}
.pill {
border-radius: 15px;
display: inline-block;
height: 30px;
width: 30px;
text-align: center;
vertical-align: middle;
line-height: $line-height-large;
}
.helpful-flags {
background-color: green;
background-color: $success;
}
.flagged-posts {
@@ -264,25 +311,20 @@
}
.warnings-received {
background-color: #ec441b;
background-color: $danger-medium;
}
.deleted-posts {
background-color: #ec441b;
background-color: $danger-medium;
}
.suspensions {
background-color: #c22020;
background-color: $danger;
}
.user-field {
clear: both;
margin-bottom: 10px;
&.text {
padding-top: 18px;
}
.controls {
label {
width: auto;
@@ -291,11 +333,10 @@
}
.instructions {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-medium;
margin-top: 5px;
margin-bottom: 10px;
font-size: $font-down-1;
line-height: $line-height-large;
}
}
}
@@ -331,42 +372,7 @@
}
}
.user-navigation {
.map {
height: 50px;
}
.avatar {
float: left;
width: 45px;
}
nav.buttons {
width: 180px;
padding: 0;
.btn {
width: 100%;
margin-bottom: 5px;
box-sizing: border-box;
}
}
h2 {
a {
font-size: $font-0;
color: scale-color($tertiary, $lightness: -10%);
cursor: pointer;
}
}
}
.user-table {
position: relative;
margin-top: 20px;
}
.avatar-selector {
padding-bottom: 0 !important;
label.radio {
padding-left: 10px;
}
@@ -390,10 +396,6 @@
}
}
.user-nav {
margin: 5px 0;
}
.top-section {
@include clearfix();
ul {
@@ -424,14 +426,14 @@
li {
display: inline-block;
padding: 10px 14px;
margin: 0 5px 10px 0;
padding: 10px 14px 10px 0;
margin: 0 10px 10px 0;
&.linked-stat {
// This makes the entire "box" (the li) clickable instead of a narrow area.
padding: 0;
a {
padding: 10px 14px;
padding: 10px 14px 10px 0;
width: 100%;
height: 100%;
display: block;
@@ -440,23 +442,13 @@
}
}
li:last-of-type {
margin: 0;
}
.value {
font-weight: bold;
font-size: $font-up-2;
}
.label {
// TODO: Remove once all languages have been translated to remove icons from
// their user-stat labels
.fa:nth-of-type(2) {
display: none;
}
color: blend-primary-secondary(50%);
color: $primary-medium;
}
}
@@ -474,7 +466,7 @@
}
.topic-info {
color: dark-light-choose($primary-medium, $secondary-high);
color: $primary-medium;
}
@media all and (max-width: 600px) {
@@ -494,7 +486,7 @@
.links-section {
.domain {
font-size: $font-down-1;
color: dark-light-choose($primary-medium, $secondary-high);
color: $primary-medium;
}
}
@@ -517,7 +509,7 @@
.summary-user-list {
li {
height: 40px;
height: 45px;
}
}
@@ -532,13 +524,22 @@
height: 100px;
}
.tracking-controls {
label {
align-items: center;
.d-icon {
margin-right: 3px;
}
}
}
.static {
color: $primary;
display: inline-block;
}
.instructions {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-medium;
margin-bottom: 10px;
font-size: $font-down-1;
line-height: $line-height-large;
@@ -564,8 +565,7 @@
margin-bottom: 10px;
}
.category-notifications .category-controls,
.tag-notifications .tag-controls {
.tracking-controls {
margin-top: 24px;
}
@@ -698,7 +698,3 @@
}
}
}
.user-summary-page .d-icon-heart {
color: $love;
}