From 36426ed4ad450320f4a4e598c41355a6d8faad66 Mon Sep 17 00:00:00 2001 From: Sasha Sorokin Date: Sat, 11 Jan 2020 08:14:45 +0700 Subject: Use heading actions and placeholders in settings (#12801) This commit: - Refactors centered text blocks currently used for placeholders for empty tables and puts styles for it in separate class - .centered-text, simply aliasing text-align: center. Which is furtherly used in this commit. - Improves applications settings page to use heading actions, moving "New application" button there, and displaying placeholder "You have no applications" in place of empty table. - Improves custom emoji settings page to use heading action for "Upload" button, making it more easily accessible without need to scroll through all of the emojis. - Improves email domain blocks settings page, moving "Add new" to the heading actions and using placeholder "No e-mail domains currently blacklisted" instead of showing empty table. --- app/javascript/styles/mastodon/admin.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index 203365f5e..9bd030964 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -878,3 +878,7 @@ a.name-tag, color: $primary-text-color; } } + +.center-text { + text-align: center; +} -- cgit From 5dcca33c561ebeca9cf12eba8a39efee0dd484d0 Mon Sep 17 00:00:00 2001 From: Sasha Sorokin Date: Sun, 12 Jan 2020 20:16:20 +0700 Subject: Correct margins for heading actions (#12797) This commit changes margins of the page heading header, actions in order to fix displaying with low screen size and long enough header. It is working by giving heading and action buttons margin from top and then negating it in parent element. Whenever flex item wrap, the "negated" margin will be applied again, providing us nice space between header and action buttons. This commit also adds a margin to header, so it does not clamp with the heading actions and they wrap a little earlier (15px ahead). As well as the left margin is not anymore applied to the first action. --- app/javascript/styles/mastodon/admin.scss | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index 9bd030964..89c45cab6 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -186,17 +186,22 @@ $content-width: 840px; padding-bottom: 40px; border-bottom: 1px solid lighten($ui-base-color, 8%); - margin-bottom: 40px; + + margin: -15px -15px 40px 0; flex-wrap: wrap; align-items: center; - justify-content: space-between; + & > * { + margin-top: 15px; + margin-right: 15px; + } + &-actions { display: inline-flex; - & > * { + & > :not(:first-child) { margin-left: 5px; } } -- cgit From 7da54001fe21d1fd10ede5ac78e5c76f25afc08e Mon Sep 17 00:00:00 2001 From: Sasha Sorokin Date: Sun, 12 Jan 2020 20:16:46 +0700 Subject: Avoid using uppercase text-transform (#12684) One user suggested that the loading indicator should not be written ALL CAPS, at first it was thought this change is very minor, but then a few other people asked agreed on the same thing - variant without caps looks better. It may be related that it is harder to read or just looks too "catchy". Moreover, I asked @rf@mastodonsocial.ru community what they think of that and 82% of 22 people agreed on this change. This commit removes all usage of text-transform: uppercase, where the font size specified, it changes the value by one pixel larger, so we still keeping the "designed" size of the labels but without using CAPS. --- app/javascript/styles/mastodon/_mixins.scss | 3 +-- app/javascript/styles/mastodon/about.scss | 3 +-- app/javascript/styles/mastodon/accounts.scss | 1 - app/javascript/styles/mastodon/admin.scss | 10 +++------- app/javascript/styles/mastodon/components.scss | 27 +++++++++----------------- app/javascript/styles/mastodon/footer.scss | 1 - app/javascript/styles/mastodon/forms.scss | 2 -- app/javascript/styles/mastodon/widgets.scss | 7 ++----- 8 files changed, 16 insertions(+), 38 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss index 68cad0fde..4e3e1434a 100644 --- a/app/javascript/styles/mastodon/_mixins.scss +++ b/app/javascript/styles/mastodon/_mixins.scss @@ -34,9 +34,8 @@ box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); h4 { - text-transform: uppercase; color: $light-text-color; - font-size: 13px; + font-size: 14px; font-weight: 500; margin-bottom: 10px; } diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index cf16b54ac..201235187 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -719,9 +719,8 @@ $small-breakpoint: 960px; h4 { padding: 10px; - text-transform: uppercase; font-weight: 700; - font-size: 13px; + font-size: 14px; color: $darker-text-color; } diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index 5dc067f0e..a1681afe6 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -129,7 +129,6 @@ .older, .newer { - text-transform: uppercase; color: $secondary-text-color; } diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index 89c45cab6..7f22f58a1 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -232,8 +232,7 @@ $content-width: 840px; } h4 { - text-transform: uppercase; - font-size: 13px; + font-size: 14px; font-weight: 700; color: $darker-text-color; padding-bottom: 8px; @@ -408,8 +407,7 @@ body, strong { font-weight: 500; - text-transform: uppercase; - font-size: 12px; + font-size: 13px; @each $lang in $cjk-langs { &:lang(#{$lang}) { @@ -422,8 +420,7 @@ body, display: inline-block; color: $darker-text-color; text-decoration: none; - text-transform: uppercase; - font-size: 12px; + font-size: 13px; font-weight: 500; border-bottom: 2px solid $ui-base-color; @@ -757,7 +754,6 @@ a.name-tag, flex: 0 0 auto; font-weight: 500; color: $darker-text-color; - text-transform: uppercase; text-align: right; a { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 7121030d2..94671c350 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -33,7 +33,7 @@ cursor: pointer; display: inline-block; font-family: inherit; - font-size: 14px; + font-size: 15px; font-weight: 500; height: 36px; letter-spacing: 0; @@ -42,7 +42,6 @@ padding: 0 16px; position: relative; text-align: center; - text-transform: uppercase; text-decoration: none; text-overflow: ellipsis; transition: all 100ms ease-in; @@ -887,9 +886,8 @@ border: 0; color: $inverted-text-color; font-weight: 700; - font-size: 11px; + font-size: 12px; padding: 0 6px; - text-transform: uppercase; line-height: 20px; cursor: pointer; vertical-align: middle; @@ -1411,8 +1409,7 @@ a .account__avatar { & > span { display: block; - text-transform: uppercase; - font-size: 11px; + font-size: 12px; color: $darker-text-color; } @@ -2760,9 +2757,8 @@ a.account__display-name { background: $ui-base-color; color: $dark-text-color; padding: 8px 20px; - font-size: 12px; + font-size: 13px; font-weight: 500; - text-transform: uppercase; cursor: default; } @@ -2827,8 +2823,7 @@ a.account__display-name { margin-top: 10px; h4 { - font-size: 12px; - text-transform: uppercase; + font-size: 13px; color: $darker-text-color; padding: 10px; font-weight: 500; @@ -3350,9 +3345,8 @@ a.status-card.compact:hover { .loading-indicator { color: $dark-text-color; - font-size: 12px; + font-size: 13px; font-weight: 400; - text-transform: uppercase; overflow: visible; position: absolute; top: 50%; @@ -3716,8 +3710,7 @@ a.status-card.compact:hover { display: block; vertical-align: top; background-color: $base-overlay-background; - text-transform: uppercase; - font-size: 11px; + font-size: 12px; font-weight: 500; padding: 4px; border-radius: 4px; @@ -3969,8 +3962,7 @@ a.status-card.compact:hover { } span { - font-size: 12px; - text-transform: uppercase; + font-size: 13px; font-weight: 500; display: block; } @@ -4569,8 +4561,7 @@ a.status-card.compact:hover { font-weight: 500; color: $inverted-text-color; margin-bottom: 5px; - text-transform: uppercase; - font-size: 12px; + font-size: 13px; } &__case { diff --git a/app/javascript/styles/mastodon/footer.scss b/app/javascript/styles/mastodon/footer.scss index 00d290883..f016248ba 100644 --- a/app/javascript/styles/mastodon/footer.scss +++ b/app/javascript/styles/mastodon/footer.scss @@ -94,7 +94,6 @@ } h4 { - text-transform: uppercase; font-weight: 700; margin-bottom: 8px; color: $darker-text-color; diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index a0478bf7f..8965ce675 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -414,7 +414,6 @@ code { line-height: inherit; height: auto; padding: 10px; - text-transform: uppercase; text-decoration: none; text-align: center; box-sizing: border-box; @@ -657,7 +656,6 @@ code { a { color: $highlight-text-color; - text-transform: uppercase; text-decoration: none; font-weight: 700; diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index ca050a8d9..90e1581bb 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -76,9 +76,8 @@ h4 { padding: 10px; - text-transform: uppercase; font-weight: 700; - font-size: 13px; + font-size: 14px; color: $darker-text-color; } @@ -139,9 +138,8 @@ h4 { padding: 10px; - text-transform: uppercase; font-weight: 700; - font-size: 13px; + font-size: 14px; color: $darker-text-color; } @@ -408,7 +406,6 @@ thead th { text-align: center; - text-transform: uppercase; color: $darker-text-color; font-weight: 700; padding: 10px; -- cgit