From b6cf2bcefd5ddd20c11ee4b0d0f94e29e8f59c40 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 28 Oct 2020 21:31:16 +0200 Subject: [PATCH] improved the semantics for our icon scale, fixed preview, fixed navbar desktop --- src/App.scss | 12 ++++-- src/App.vue | 9 ++-- src/components/chat_new/chat_new.vue | 3 +- .../extra_buttons/extra_buttons.vue | 2 +- .../favorite_button/favorite_button.vue | 6 +-- .../global_notice_list/global_notice_list.vue | 2 +- .../image_cropper/image_cropper.vue | 2 +- src/components/login_form/login_form.vue | 2 +- src/components/mfa_form/recovery_form.vue | 2 +- src/components/mfa_form/totp_form.vue | 2 +- src/components/mobile_nav/mobile_nav.vue | 9 ++-- src/components/nav_panel/nav_panel.vue | 41 +++++++------------ src/components/notification/notification.vue | 8 ++-- .../password_reset/password_reset.vue | 2 +- .../post_status_form/post_status_form.vue | 16 ++++---- src/components/react_button/react_button.vue | 3 +- src/components/reply_button/reply_button.vue | 6 +-- .../retweet_button/retweet_button.vue | 9 ++-- .../scope_selector/scope_selector.vue | 12 ++---- src/components/search_bar/search_bar.vue | 6 +-- .../settings_modal/tabs/profile_tab.vue | 4 +- .../settings_modal/tabs/theme_tab/preview.vue | 8 ++-- src/components/side_drawer/side_drawer.vue | 38 ++++++----------- src/components/status/status.vue | 24 ++++------- .../timeline_menu/timeline_menu.vue | 15 +++---- src/components/user_card/user_card.vue | 3 +- 26 files changed, 95 insertions(+), 151 deletions(-) diff --git a/src/App.scss b/src/App.scss index 06915e16..6884f314 100644 --- a/src/App.scss +++ b/src/App.scss @@ -812,14 +812,18 @@ nav { } } -.button-icon { - &.svg-inline--fa.fa-lg { - display: inline-block; - padding: 0 0.3em; +.fa-scale-110 { + &.svg-inline--fa { font-size: 1.1em; } } +.fa-old-padding { + &.svg-inline--fa { + padding: 0 0.3em; + } +} + @keyframes shakeError { 0% { transform: translateX(0); diff --git a/src/App.vue b/src/App.vue index c27f51bf..6e44c7e9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -53,8 +53,7 @@ > @@ -66,8 +65,7 @@ target="_blank" > @@ -78,8 +76,7 @@ @click.prevent="logout" > diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue index 8f02a699..f3894a3a 100644 --- a/src/components/chat_new/chat_new.vue +++ b/src/components/chat_new/chat_new.vue @@ -20,8 +20,7 @@
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue index 4bf1e62a..f32ea02d 100644 --- a/src/components/extra_buttons/extra_buttons.vue +++ b/src/components/extra_buttons/extra_buttons.vue @@ -107,7 +107,7 @@
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue index 6c7bfdab..dfe12f86 100644 --- a/src/components/favorite_button/favorite_button.vue +++ b/src/components/favorite_button/favorite_button.vue @@ -2,11 +2,10 @@
{{ status.fave_num }} @@ -14,10 +13,9 @@
{{ status.fave_num }}
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue index 06b6af9c..8a33b9eb 100644 --- a/src/components/global_notice_list/global_notice_list.vue +++ b/src/components/global_notice_list/global_notice_list.vue @@ -10,7 +10,7 @@ {{ $t(notice.messageKey, notice.messageArgs) }}
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue index 605f7427..75def612 100644 --- a/src/components/image_cropper/image_cropper.vue +++ b/src/components/image_cropper/image_cropper.vue @@ -43,7 +43,7 @@ > {{ submitErrorMsg }} diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index 4ab5d192..a1f77210 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -77,7 +77,7 @@
{{ error }} diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue index f6526d2a..78953649 100644 --- a/src/components/mfa_form/recovery_form.vue +++ b/src/components/mfa_form/recovery_form.vue @@ -55,7 +55,7 @@
{{ error }} diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue index 0c6412ea..9401cad5 100644 --- a/src/components/mfa_form/totp_form.vue +++ b/src/components/mfa_form/totp_form.vue @@ -58,7 +58,7 @@ {{ error }} diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue index db9b0ba0..d2bc65ab 100644 --- a/src/components/mobile_nav/mobile_nav.vue +++ b/src/components/mobile_nav/mobile_nav.vue @@ -16,8 +16,7 @@ @click.stop.prevent="toggleMobileSidebar()" >
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 4755d7b7..e7301328 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -9,22 +9,18 @@ > - {{ $t("nav.timelines") }} + />{{ $t("nav.timelines") }}
  • - {{ $t("nav.interactions") }} + />{{ $t("nav.interactions") }}
  • @@ -37,22 +33,18 @@
  • - {{ $t("nav.chats") }} + />{{ $t("nav.chats") }}
  • - {{ $t("nav.friend_requests") }} + />{{ $t("nav.friend_requests") }} @@ -94,7 +85,7 @@ } .follow-request-count { - margin: -6px 10px; + vertical-align: bottom; background-color: $fallback--bg; background-color: var(--input, $fallback--faint); } @@ -126,7 +117,8 @@ a { display: block; - padding: 0.8em 0.85em; + align-items: stretch; + padding: 0.9em 1em; &:hover { background-color: $fallback--lightBg; @@ -156,13 +148,8 @@ } } - .button-icon { - margin-left: -0.1em; - margin-right: 0.2em; - } - - .button-icon:before { - width: 1.1em; + .fa-scale-110 { + margin-right: 0.8em; } } diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index b609ae04..2bbde108 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -19,7 +19,7 @@ class="unmute" @click.prevent="toggleMute" >
  • @@ -137,7 +137,7 @@ href="#" @click.prevent="toggleMute" > @@ -157,13 +157,13 @@ >
    diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue index ae7b0e26..a0ac8941 100644 --- a/src/components/reply_button/reply_button.vue +++ b/src/components/reply_button/reply_button.vue @@ -2,9 +2,8 @@
    diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue index 706c6b81..b234f3d9 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -3,9 +3,8 @@ @@ -25,9 +23,8 @@
    {{ status.repeat_num }} diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue index a43af23b..a22a4fda 100644 --- a/src/components/scope_selector/scope_selector.vue +++ b/src/components/scope_selector/scope_selector.vue @@ -12,8 +12,7 @@ >
    diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue index 442e91b2..f1c3fd7a 100644 --- a/src/components/search_bar/search_bar.vue +++ b/src/components/search_bar/search_bar.vue @@ -8,8 +8,7 @@ :title="$t('nav.search')" > @@ -34,10 +33,9 @@ diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue index 5a659fc8..d62bc392 100644 --- a/src/components/settings_modal/tabs/profile_tab.vue +++ b/src/components/settings_modal/tabs/profile_tab.vue @@ -235,7 +235,7 @@ > Error: {{ bannerUploadError }} @@ -286,7 +286,7 @@ Error: {{ backgroundUploadError }} diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue index 20201e18..3174fd7c 100644 --- a/src/components/settings_modal/tabs/theme_tab/preview.vue +++ b/src/components/settings_modal/tabs/theme_tab/preview.vue @@ -42,25 +42,25 @@
    diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index 2a4d794a..eac0ddb2 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -37,9 +37,8 @@ > {{ $t("login.login") }} @@ -50,9 +49,8 @@ > {{ $t("nav.timelines") }} @@ -66,9 +64,8 @@ style="position: relative" > {{ $t("nav.chats") }} {{ $t("nav.interactions") }} @@ -97,9 +93,8 @@ > {{ $t("nav.friend_requests") }} {{ $t("shoutbox.title") }} @@ -131,9 +125,8 @@ > {{ $t("nav.search") }} @@ -144,9 +137,8 @@ > {{ $t("nav.who_to_follow") }} @@ -157,9 +149,8 @@ @click="openSettingsModal" > {{ $t("settings.settings") }} @@ -167,9 +158,8 @@
  • {{ $t("nav.about") }} @@ -183,9 +173,8 @@ target="_blank" > {{ $t("nav.administration") }} @@ -199,9 +188,8 @@ @click="doLogout" > {{ $t("login.logout") }} @@ -284,7 +272,7 @@ --lightText: var(--popoverLightText, $fallback--lightText); --icon: var(--popoverIcon, $fallback--icon); - .button-icon:before { + .fa-scale-110 fa-old-padding:before { width: 1.1em; } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index c94862d4..21412faa 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -11,7 +11,7 @@ > {{ error }} @@ -22,7 +22,7 @@ @@ -49,13 +49,12 @@
  • @@ -186,9 +185,8 @@ :title="status.visibility | capitalize" >
    @@ -249,9 +244,8 @@ @click.prevent="gotoOriginal(status.in_reply_to_status_id)" > {{ $t("nav.timeline") }} @@ -28,8 +27,7 @@ {{ $t("nav.bookmarks") }} @@ -38,8 +36,7 @@ {{ $t("nav.dms") }} @@ -48,8 +45,7 @@ {{ $t("nav.public_tl") }} @@ -58,8 +54,7 @@ {{ $t("nav.twkn") }} diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index c5f10b75..55e231d2 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -22,9 +22,8 @@ />