mirror of
https://github.com/discourse/discourse.git
synced 2025-02-14 20:32:46 +08:00
b8b29e79ad
Based on issues identified in https://meta.discourse.org/t/improved-bookmarks-with-reminders/144542/20 * Implement the resolvedTimezone() function on the user model where we return the user's timezone if it has been set, or we guess it using moment and save it to the user using an update call if it has not yet been set. This covers the cases of users who do not log out/in often who will not get their timezone set via login. This also makes sure the guess + save is done in a non-obtrusive way not on every page -- only when it is needed. * Before if a user's timezone was blank when they visited their profile page we were autofilling the dropdown with the guessed timezone from moment. However this was confusing as it would appear you have that timezone saved in the DB when you really didn't. Now we do not autofill the dropdown and added a button to automatically guess the current timezone to make everything more explicit.
731 lines
12 KiB
SCSS
731 lines
12 KiB
SCSS
// Common styles for "/user" section
|
|
// These styles are also used for "/groups" — test those pages if making significant changes
|
|
|
|
.user-content-wrapper {
|
|
// Grid layout
|
|
width: 100%;
|
|
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: 1;
|
|
grid-column-end: 3;
|
|
grid-row-start: 1;
|
|
grid-row-end: 2;
|
|
}
|
|
.user-secondary-navigation {
|
|
grid-column-start: 1;
|
|
grid-column-end: 2;
|
|
grid-row-start: 2;
|
|
grid-row-end: 3;
|
|
}
|
|
.solo-preference,
|
|
.user-content,
|
|
.spinner {
|
|
grid-row-start: 2;
|
|
grid-row-end: 4;
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
}
|
|
.user-content {
|
|
min-width: 100%;
|
|
}
|
|
.user-additional-controls + .user-content,
|
|
.user-secondary-navigation + .user-content {
|
|
grid-column-start: 2;
|
|
grid-column-end: 3;
|
|
}
|
|
.user-additional-controls {
|
|
grid-row-start: 3;
|
|
align-self: start;
|
|
justify-self: start;
|
|
}
|
|
}
|
|
|
|
.user-content {
|
|
.list-actions {
|
|
display: flex;
|
|
margin-bottom: s(3);
|
|
|
|
.btn {
|
|
margin-right: s(3);
|
|
}
|
|
}
|
|
|
|
.paginated-topics-list {
|
|
position: relative;
|
|
}
|
|
|
|
.show-mores {
|
|
width: 100%;
|
|
}
|
|
|
|
.d-icon-heart {
|
|
color: $love;
|
|
}
|
|
}
|
|
|
|
.user-main {
|
|
.about {
|
|
width: 100%;
|
|
margin-bottom: 15px;
|
|
|
|
&.has-background {
|
|
.user-profile-image {
|
|
background-size: cover;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.staff-counters {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.secondary {
|
|
display: inline-block;
|
|
width: 100%;
|
|
border-top: 1px solid $primary-low;
|
|
|
|
.btn {
|
|
padding: 4px 12px;
|
|
}
|
|
|
|
dl {
|
|
margin: 0;
|
|
padding: 5px 10px;
|
|
div {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
margin-right: 15px;
|
|
margin: 4px 0;
|
|
}
|
|
}
|
|
|
|
dt,
|
|
dd {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
dd {
|
|
padding: 0;
|
|
margin: 0 15px 0 0;
|
|
color: $primary;
|
|
|
|
&.groups {
|
|
span:not(:last-of-type) {
|
|
margin-right: 0.25em;
|
|
}
|
|
span:after {
|
|
content: ",";
|
|
}
|
|
span:last-of-type:after {
|
|
content: "";
|
|
}
|
|
}
|
|
}
|
|
|
|
dt {
|
|
color: $secondary-medium;
|
|
margin-right: 5px;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.details {
|
|
background: rgba($secondary, 0.8);
|
|
border-bottom: 1px solid $primary-low;
|
|
|
|
h1 {
|
|
font-size: $font-up-5;
|
|
font-weight: normal;
|
|
.d-icon {
|
|
font-size: 0.8em;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-weight: normal;
|
|
max-width: 100%;
|
|
@include ellipsis;
|
|
}
|
|
|
|
h3 {
|
|
font-weight: normal;
|
|
margin-bottom: 0.5em;
|
|
.d-icon:not(:first-of-type) {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.groups {
|
|
margin-left: 10px;
|
|
display: inline;
|
|
}
|
|
|
|
img.avatar {
|
|
float: left;
|
|
}
|
|
|
|
.suspended {
|
|
color: $danger;
|
|
}
|
|
|
|
.primary {
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
h1 {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.bio {
|
|
max-height: 300px;
|
|
overflow: auto;
|
|
|
|
a[href] {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-profile-avatar {
|
|
position: relative;
|
|
float: left;
|
|
.avatar-flair {
|
|
bottom: 8px;
|
|
right: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.controls {
|
|
ul {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.btn {
|
|
margin-bottom: 10px;
|
|
line-height: $line-height-medium;
|
|
}
|
|
}
|
|
|
|
&.collapsed-info {
|
|
.details {
|
|
margin-top: 0;
|
|
background: rgba($secondary, 0.8);
|
|
|
|
.bio {
|
|
display: none;
|
|
}
|
|
|
|
.primary {
|
|
width: 100%;
|
|
|
|
.avatar {
|
|
margin-right: 10px;
|
|
width: 45px;
|
|
height: 45px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: $font-up-3;
|
|
}
|
|
|
|
h2 {
|
|
font-size: $font-up-1;
|
|
}
|
|
h3,
|
|
h3.location-and-website {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-profile-avatar {
|
|
.avatar-flair {
|
|
bottom: 8px;
|
|
right: 2px;
|
|
.d-icon {
|
|
font-size: $font-0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.staff-counters {
|
|
background: $primary;
|
|
color: $secondary;
|
|
display: flex;
|
|
padding: 10px;
|
|
margin-bottom: s(4);
|
|
> div,
|
|
> div a {
|
|
display: flex;
|
|
align-items: baseline;
|
|
flex: 0 1 auto;
|
|
margin: 0 10px 0 0;
|
|
color: $secondary;
|
|
|
|
span {
|
|
padding: 0 7px 1px;
|
|
border-radius: 10px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.helpful-flags {
|
|
background-color: $success;
|
|
}
|
|
|
|
.flagged-posts {
|
|
background-color: #e49735;
|
|
}
|
|
|
|
.warnings-received {
|
|
background-color: $danger-medium;
|
|
}
|
|
|
|
.deleted-posts {
|
|
background-color: $danger-medium;
|
|
}
|
|
|
|
.suspensions {
|
|
background-color: $danger;
|
|
}
|
|
|
|
.user-field {
|
|
margin-bottom: 10px;
|
|
|
|
.controls {
|
|
label {
|
|
width: auto;
|
|
text-align: left;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.instructions {
|
|
color: $primary-medium;
|
|
margin-top: 5px;
|
|
margin-bottom: 10px;
|
|
font-size: $font-down-1;
|
|
}
|
|
}
|
|
}
|
|
.user-content {
|
|
.admin-controls nav {
|
|
margin: 0;
|
|
.nav-pills {
|
|
overflow-x: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-field {
|
|
.required {
|
|
vertical-align: top;
|
|
color: $danger;
|
|
font-weight: bold;
|
|
margin-left: 0.25em;
|
|
}
|
|
}
|
|
|
|
.public-user-fields {
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
|
|
.user-field-name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.collapsed-info & {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.avatar-selector {
|
|
.avatar-choice {
|
|
display: grid;
|
|
grid-template-columns: 2em 1fr auto;
|
|
grid-template-rows: auto auto;
|
|
align-items: center;
|
|
&:not(:last-of-type) {
|
|
margin-bottom: 0.75em;
|
|
}
|
|
span {
|
|
word-break: break-word; // Prevents long emails from breaking the modal width
|
|
}
|
|
input[type="radio"] {
|
|
margin-top: 0;
|
|
}
|
|
button {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
$label-max-width: 300px;
|
|
label.radio {
|
|
display: flex;
|
|
align-items: center;
|
|
max-width: $label-max-width;
|
|
margin: 0 0.5em 0 0;
|
|
padding: 0;
|
|
.avatar {
|
|
flex: 0 0 auto;
|
|
margin: 0 0.75em 0 0;
|
|
}
|
|
}
|
|
.error {
|
|
color: $danger;
|
|
margin: 0;
|
|
max-width: calc(#{$label-max-width} - 20px);
|
|
grid-column-start: 2;
|
|
grid-column-end: 3;
|
|
}
|
|
}
|
|
|
|
.top-section {
|
|
@include clearfix();
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.top-section,
|
|
.top-sub-section {
|
|
margin-bottom: 20px;
|
|
&.badges-section {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
.stats-title {
|
|
text-transform: uppercase;
|
|
margin-bottom: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.stats-section {
|
|
ul {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
li {
|
|
display: inline-block;
|
|
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 10px 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
color: $primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.value {
|
|
font-weight: bold;
|
|
font-size: $font-up-2;
|
|
}
|
|
|
|
.label {
|
|
color: $primary-medium;
|
|
}
|
|
}
|
|
|
|
.top-sub-section {
|
|
width: 50%;
|
|
|
|
ul {
|
|
max-width: 95%;
|
|
}
|
|
|
|
li {
|
|
border-left: $primary-low solid 2px;
|
|
padding: 5px 8px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.topic-info {
|
|
color: $primary-medium;
|
|
}
|
|
|
|
@media all and (max-width: 600px) {
|
|
float: none;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.replies-section,
|
|
.topics-section,
|
|
.links-section {
|
|
li {
|
|
word-wrap: break-word;
|
|
}
|
|
}
|
|
|
|
.links-section {
|
|
.domain {
|
|
font-size: $font-down-1;
|
|
color: $primary-medium;
|
|
}
|
|
}
|
|
|
|
.top-categories-section {
|
|
table {
|
|
max-width: 95%;
|
|
tr {
|
|
border: none;
|
|
}
|
|
td,
|
|
th {
|
|
padding: 0.5em;
|
|
&.topic-count,
|
|
&.reply-count {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.summary-user-list {
|
|
li {
|
|
height: 45px;
|
|
}
|
|
}
|
|
|
|
.groups {
|
|
.group-link {
|
|
color: $tertiary;
|
|
}
|
|
}
|
|
|
|
.user-preferences {
|
|
textarea {
|
|
height: 100px;
|
|
}
|
|
|
|
.tracking-controls {
|
|
label {
|
|
align-items: center;
|
|
display: inline-block;
|
|
.d-icon {
|
|
margin-right: 3px;
|
|
}
|
|
}
|
|
.select-kit.multi-select {
|
|
@include breakpoint(mobile-extra-large) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.show-tracking {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.static {
|
|
color: $primary;
|
|
display: inline-block;
|
|
}
|
|
|
|
.instructions {
|
|
color: $primary-medium;
|
|
margin-bottom: 10px;
|
|
font-size: $font-down-1;
|
|
line-height: $line-height-large;
|
|
|
|
a[href] {
|
|
color: $tertiary;
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.warning {
|
|
background-color: $danger-medium;
|
|
padding: 5px 8px;
|
|
color: $secondary;
|
|
width: 520px;
|
|
}
|
|
|
|
.warning-wrap {
|
|
height: 30px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.tracking-controls {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
&.second-factor-backup-preferences {
|
|
padding-left: 0;
|
|
|
|
.second-factor-token-input {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.form-horizontal .instructions {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.backup-codes {
|
|
margin: 2em 0;
|
|
|
|
.wrapper {
|
|
display: inline-block;
|
|
position: relative;
|
|
border-radius: 3px;
|
|
border: 1px solid $primary-low;
|
|
width: 100%;
|
|
}
|
|
|
|
.backup-codes-area {
|
|
resize: none;
|
|
padding: 0;
|
|
height: auto;
|
|
text-align: center;
|
|
width: 100%;
|
|
background: white;
|
|
border: 0;
|
|
cursor: auto;
|
|
outline: none;
|
|
font-family: monospace;
|
|
|
|
&:focus {
|
|
box-shadow: none;
|
|
border-color: $primary-low;
|
|
}
|
|
}
|
|
|
|
.backup-codes-copy-btn,
|
|
.backup-codes-download-btn {
|
|
right: 5px;
|
|
position: absolute;
|
|
}
|
|
|
|
.backup-codes-copy-btn {
|
|
top: 5px;
|
|
}
|
|
|
|
.backup-codes-download-btn {
|
|
top: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pref-associated-accounts table {
|
|
td {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
.featured-topic-link {
|
|
padding: 5px 0;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.paginated-topics-list {
|
|
.user-content {
|
|
width: 100%;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.large-notification {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
a {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.d-icon {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
span:first-child {
|
|
color: $primary;
|
|
}
|
|
|
|
// Can remove this once other languages have removed html from i18n values
|
|
div {
|
|
.fa {
|
|
display: none;
|
|
}
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.qr-code-container {
|
|
display: flex;
|
|
.qr-code {
|
|
padding: 5px 5px 0 5px;
|
|
background-color: white;
|
|
}
|
|
}
|
|
|
|
.second-factor {
|
|
&.instructions {
|
|
color: $primary-medium;
|
|
margin-top: 5px;
|
|
margin-bottom: 10px;
|
|
font-size: $font-down-1;
|
|
}
|
|
.second-factor-item {
|
|
margin-top: 0.75em;
|
|
}
|
|
.btn.edit {
|
|
min-height: auto;
|
|
}
|
|
}
|
|
|
|
.primary-textual .staged,
|
|
.user-card .staged {
|
|
font-style: italic;
|
|
}
|
|
|
|
.selectable-avatars {
|
|
max-height: 350px;
|
|
margin-bottom: 1em;
|
|
text-align: justify;
|
|
.selectable-avatar {
|
|
margin: 5px;
|
|
display: inline-block;
|
|
.avatar {
|
|
cursor: pointer;
|
|
width: 60px;
|
|
height: 60px;
|
|
&:hover {
|
|
box-shadow: 0 0 10px $primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.timezone-input {
|
|
margin-bottom: 0.5em;
|
|
}
|