From f72ed21cd62541881c0ad19bac1b78e82f514413 Mon Sep 17 00:00:00 2001 From: Damien Erambert Date: Thu, 24 Aug 2017 10:28:49 -0700 Subject: Don't load Roboto webfont when system font is used in the app (#4591) * Don't load Roboto webfont when system font is used in the app * remove trailing whitespace --- app/javascript/styles/basics.scss | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'app/javascript/styles/basics.scss') diff --git a/app/javascript/styles/basics.scss b/app/javascript/styles/basics.scss index 4e51b555c..e524b7f26 100644 --- a/app/javascript/styles/basics.scss +++ b/app/javascript/styles/basics.scss @@ -1,5 +1,4 @@ body { - font-family: 'mastodon-font-sans-serif', sans-serif; background: $ui-base-color; background-size: cover; background-attachment: fixed; @@ -14,6 +13,11 @@ body { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; + // This is done because we want to use mastodon-font-sans-serif (a.k.a Roboto) on the `.ui` element in the app UI + &:not(.app-body) { + font-family: 'mastodon-font-sans-serif', sans-serif; + } + &.app-body { position: fixed; width: 100%; @@ -69,7 +73,7 @@ button { justify-content: center; } -.system-font { +.ui.system-font { // system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+) // -apple-system => Safari <11 specific // BlinkMacSystemFont => Chrome <56 on macOS specific @@ -83,3 +87,7 @@ button { // mastodon-font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0) font-family: system-ui, -apple-system,BlinkMacSystemFont, "Segoe UI","Oxygen", "Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",mastodon-font-sans-serif, sans-serif; } + +.ui:not(.system-font) { + font-family: 'mastodon-font-sans-serif', sans-serif; +} -- cgit From bab9afaa092e0eb8b3f11fdcdaf7a75d3ce94566 Mon Sep 17 00:00:00 2001 From: Lynx Kotoura Date: Mon, 28 Aug 2017 06:59:51 +0900 Subject: Adjust public profile pages (#4713) * Adjust account-grid in public profiles Full-width card on mobile UI. Set break-word for long name and ID. Fix margin. * Reduce padding-bottom of public profiles * Revive next prev buttons in mobile public profiles In followers followees pages. * Revert break-word for username * Fix overflow of display_name Need re-setting text-overflow and overflow in display: block; --- app/javascript/styles/accounts.scss | 14 +++++++++----- app/javascript/styles/basics.scss | 2 +- 2 files changed, 10 insertions(+), 6 deletions(-) (limited to 'app/javascript/styles/basics.scss') diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss index f1fbe873b..744650554 100644 --- a/app/javascript/styles/accounts.scss +++ b/app/javascript/styles/accounts.scss @@ -296,7 +296,9 @@ } .next, - .prev { + .prev, + .next a, + .prev a { display: inline-block; } } @@ -306,7 +308,7 @@ box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); background: darken($simple-background-color, 8%); border-radius: 0 0 4px 4px; - padding: 20px 10px; + padding: 20px 5px; padding-bottom: 10px; overflow: hidden; display: flex; @@ -325,11 +327,11 @@ background: $simple-background-color; border-radius: 4px; color: $ui-base-color; - margin-bottom: 10px; + margin: 0 5px 10px; position: relative; - &:nth-child(odd) { - margin-right: 10px; + @media screen and (max-width: 740px) { + width: calc(100% - 10px); } .account-grid-card__header { @@ -400,6 +402,8 @@ .display_name { font-size: 16px; display: block; + text-overflow: ellipsis; + overflow: hidden; } .username { diff --git a/app/javascript/styles/basics.scss b/app/javascript/styles/basics.scss index e524b7f26..6e87157ec 100644 --- a/app/javascript/styles/basics.scss +++ b/app/javascript/styles/basics.scss @@ -6,7 +6,7 @@ body { line-height: 18px; font-weight: 400; color: $primary-text-color; - padding-bottom: 140px; + padding-bottom: 40px; text-rendering: optimizelegibility; font-feature-settings: "kern"; text-size-adjust: none; -- cgit From 2305f7c391325c7abf8746ebb2bb560c13df4437 Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Fri, 1 Sep 2017 23:13:31 +0900 Subject: Use system's default font on non web UI pages (#4553) * Use system's default font on non web UI pages * Remove import for Redirect --- app/javascript/mastodon/features/ui/index.js | 9 +------ app/javascript/styles/basics.scss | 36 +++++++++++----------------- app/serializers/initial_state_serializer.rb | 1 - app/views/layouts/application.html.haml | 1 + 4 files changed, 16 insertions(+), 31 deletions(-) (limited to 'app/javascript/styles/basics.scss') diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index 34b59fcc5..8f971ae67 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -1,5 +1,4 @@ import React from 'react'; -import classNames from 'classnames'; import NotificationsContainer from './containers/notifications_container'; import PropTypes from 'prop-types'; import LoadingBarContainer from './containers/loading_bar_container'; @@ -43,7 +42,6 @@ import { import '../../components/status'; const mapStateToProps = state => ({ - systemFontUi: state.getIn(['meta', 'system_font_ui']), isComposing: state.getIn(['compose', 'is_composing']), }); @@ -58,7 +56,6 @@ export default class UI extends React.PureComponent { static propTypes = { dispatch: PropTypes.func.isRequired, children: PropTypes.node, - systemFontUi: PropTypes.bool, isComposing: PropTypes.bool, location: PropTypes.object, }; @@ -197,12 +194,8 @@ export default class UI extends React.PureComponent { const { width, draggingOver } = this.state; const { children } = this.props; - const className = classNames('ui', { - 'system-font': this.props.systemFontUi, - }); - return ( -
+
diff --git a/app/javascript/styles/basics.scss b/app/javascript/styles/basics.scss index 6e87157ec..f18a32201 100644 --- a/app/javascript/styles/basics.scss +++ b/app/javascript/styles/basics.scss @@ -1,4 +1,5 @@ body { + font-family: 'mastodon-font-sans-serif', sans-serif; background: $ui-base-color; background-size: cover; background-attachment: fixed; @@ -13,9 +14,19 @@ body { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; - // This is done because we want to use mastodon-font-sans-serif (a.k.a Roboto) on the `.ui` element in the app UI - &:not(.app-body) { - font-family: 'mastodon-font-sans-serif', sans-serif; + &.system-font { + // system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+) + // -apple-system => Safari <11 specific + // BlinkMacSystemFont => Chrome <56 on macOS specific + // Segoe UI => Windows 7/8/10 + // Oxygen => KDE + // Ubuntu => Unity/Ubuntu + // Cantarell => GNOME + // Fira Sans => Firefox OS + // Droid Sans => Older Androids (<4.0) + // Helvetica Neue => Older macOS <10.11 + // mastodon-font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0) + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", mastodon-font-sans-serif, sans-serif; } &.app-body { @@ -72,22 +83,3 @@ button { align-items: center; justify-content: center; } - -.ui.system-font { - // system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+) - // -apple-system => Safari <11 specific - // BlinkMacSystemFont => Chrome <56 on macOS specific - // Segoe UI => Windows 7/8/10 - // Oxygen => KDE - // Ubuntu => Unity/Ubuntu - // Cantarell => GNOME - // Fira Sans => Firefox OS - // Droid Sans => Older Androids (<4.0) - // Helvetica Neue => Older macOS <10.11 - // mastodon-font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0) - font-family: system-ui, -apple-system,BlinkMacSystemFont, "Segoe UI","Oxygen", "Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",mastodon-font-sans-serif, sans-serif; -} - -.ui:not(.system-font) { - font-family: 'mastodon-font-sans-serif', sans-serif; -} diff --git a/app/serializers/initial_state_serializer.rb b/app/serializers/initial_state_serializer.rb index 0ac5e8319..32ffcc688 100644 --- a/app/serializers/initial_state_serializer.rb +++ b/app/serializers/initial_state_serializer.rb @@ -19,7 +19,6 @@ class InitialStateSerializer < ActiveModel::Serializer store[:boost_modal] = object.current_account.user.setting_boost_modal store[:delete_modal] = object.current_account.user.setting_delete_modal store[:auto_play_gif] = object.current_account.user.setting_auto_play_gif - store[:system_font_ui] = object.current_account.user.setting_system_font_ui end store diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 82b20810a..0ba0ffc37 100755 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -35,6 +35,7 @@ = yield :header_tags - body_classes ||= @body_classes + - body_classes += ' system-font' if current_account&.user&.setting_system_font_ui %body{ class: add_rtl_body_class(body_classes) } = content_for?(:content) ? yield(:content) : yield -- cgit From a75aa62f5bd410e07ecf295248dc932fe2714c00 Mon Sep 17 00:00:00 2001 From: Cygnan Date: Sat, 2 Sep 2017 04:01:23 +0900 Subject: Adjust padding on the public profile page (#4757) * Fix a style issue on the public profile page for some mobile browsers Signed-off-by: Cygnan * Set padding-bottom to 20px Signed-off-by: Cygnan --- app/javascript/styles/basics.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) (limited to 'app/javascript/styles/basics.scss') diff --git a/app/javascript/styles/basics.scss b/app/javascript/styles/basics.scss index f18a32201..05c93b42e 100644 --- a/app/javascript/styles/basics.scss +++ b/app/javascript/styles/basics.scss @@ -7,7 +7,7 @@ body { line-height: 18px; font-weight: 400; color: $primary-text-color; - padding-bottom: 40px; + padding-bottom: 20px; text-rendering: optimizelegibility; font-feature-settings: "kern"; text-size-adjust: none; @@ -61,10 +61,6 @@ body { height: 100%; padding: 0; } - - @media screen and (max-width: 400px) { - padding-bottom: 0; - } } button { -- cgit