From eacbd9b5009a3646854b59e9983753fd288ea1c4 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 27 Aug 2018 22:22:25 +0300 Subject: Separated tab-switcher into a reusable component. This depends on JSX addition --- src/components/tab_switcher/tab_switcher.jsx | 44 +++++ src/components/tab_switcher/tab_switcher.scss | 47 +++++ src/components/user_settings/user_settings.js | 4 +- src/components/user_settings/user_settings.vue | 246 ++++++++++++------------- 4 files changed, 215 insertions(+), 126 deletions(-) create mode 100644 src/components/tab_switcher/tab_switcher.jsx create mode 100644 src/components/tab_switcher/tab_switcher.scss (limited to 'src') diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx new file mode 100644 index 00000000..0a6eec11 --- /dev/null +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -0,0 +1,44 @@ +import Vue from 'vue' + +import './tab_switcher.scss' + +export default Vue.component('tab-switcher', { + name: 'TabSwitcher', + data () { + return { + active: 0 + } + }, + methods: { + activateTab(index) { + return () => this.active = index; + } + }, + render(h) { + const tabs = this.$slots.default + .filter(slot => slot.data) + .map((slot, index) => { + const classes = ['tab'] + + if (index === this.active) { + classes.push('active') + } + return () + }); + const contents = ( +
+ {this.$slots.default.filter(slot => slot.data)[this.active]} +
+ ); + return ( +
+
+ {tabs} +
+
+ {contents} +
+
+ ) + } +}) diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss new file mode 100644 index 00000000..f83dc7c2 --- /dev/null +++ b/src/components/tab_switcher/tab_switcher.scss @@ -0,0 +1,47 @@ +@import '../../_variables.scss'; + +.tab-switcher { + .tabs { + display: flex; + position: relative; + justify-content: center; + width: 100%; + overflow: hidden; + padding-top: 5px; + + &::after, &::before { + display: block; + content: ''; + flex: 1 1 auto; + } + + .tab, &::after, &::before { + border-bottom: 1px solid; + border-bottom-color: $fallback--btn; + border-bottom-color: var(--btn, $fallback--btn); + } + + .tab { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: .3em 1em; + + &::-moz-focus-inner { + border: none; + } + + &:not(.active) { + border-bottom: 1px solid; + border-bottom-color: $fallback--btn; + border-bottom-color: var(--btn, $fallback--btn); + z-index: 4; + } + + &.active { + background: transparent; + border-bottom: none; + z-index: 5; + } + } + } +} diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index f046885e..0b13a668 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -1,3 +1,4 @@ +import TabSwitcher from '../tab_switcher/tab_switcher.jsx' import StyleSwitcher from '../style_switcher/style_switcher.vue' const UserSettings = { @@ -23,7 +24,8 @@ const UserSettings = { } }, components: { - StyleSwitcher + StyleSwitcher, + TabSwitcher }, computed: { user () { diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index c3ca1dbd..64627d92 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -4,126 +4,131 @@ {{$t('settings.user_settings')}}
-
- - - -
-
-

{{$t('settings.name_bio')}}

-

{{$t('settings.name')}}

- -

{{$t('settings.bio')}}

- -

- - -

-
- -
- - - - + +
+
+

{{$t('settings.name_bio')}}

+

{{$t('settings.name')}}

+ +

{{$t('settings.bio')}}

+ +

+ + +

+
+ +
+ + + + +
+
+ +
+
+

{{$t('settings.avatar')}}

+

{{$t('settings.current_avatar')}}

+ +

{{$t('settings.set_new_avatar')}}

+ + +
+ +
+ + +
+
+

{{$t('settings.profile_banner')}}

+

{{$t('settings.current_profile_banner')}}

+ +

{{$t('settings.set_new_profile_banner')}}

+ + +
+ +
+ + +
+
+

{{$t('settings.profile_background')}}

+

{{$t('settings.set_new_profile_background')}}

+ + +
+ +
+ +
- -
-
-

{{$t('settings.avatar')}}

-

{{$t('settings.current_avatar')}}

- -

{{$t('settings.set_new_avatar')}}

- - -
- -
- - -
-
-

{{$t('settings.profile_banner')}}

-

{{$t('settings.current_profile_banner')}}

- -

{{$t('settings.set_new_profile_banner')}}

- - -
- -
- - -
-
-

{{$t('settings.profile_background')}}

-

{{$t('settings.set_new_profile_background')}}

- - -
- -
- - -
-
-

{{$t('settings.change_password')}}

-
-

{{$t('settings.current_password')}}

- -
-
-

{{$t('settings.new_password')}}

- -
-
-

{{$t('settings.confirm_new_password')}}

- -
- -

{{$t('settings.changed_password')}}

-

{{$t('settings.change_password_error')}}

-

{{changePasswordError}}

-
-
-

{{$t('settings.follow_import')}}

-

{{$t('settings.import_followers_from_a_csv_file')}}

-
- -
- - -
- -

{{$t('settings.follows_imported')}}

-
-
- -

{{$t('settings.follow_import_error')}}

+ +
+
+

{{$t('settings.change_password')}}

+
+

{{$t('settings.current_password')}}

+ +
+
+

{{$t('settings.new_password')}}

+ +
+
+

{{$t('settings.confirm_new_password')}}

+ +
+ +

{{$t('settings.changed_password')}}

+

{{$t('settings.change_password_error')}}

+

{{changePasswordError}}

+
+ +
+

{{$t('settings.delete_account')}}

+

{{$t('settings.delete_account_description')}}

+
+

{{$t('settings.delete_account_instructions')}}

+

{{$t('login.password')}}

+ + +
+

{{$t('settings.delete_account_error')}}

+

{{deleteAccountError}}

+ +
-
-
-

{{$t('settings.follow_export')}}

- -
-
-

{{$t('settings.follow_export_processing')}}

-
-
-
-

{{$t('settings.delete_account')}}

-

{{$t('settings.delete_account_description')}}

-
-

{{$t('settings.delete_account_instructions')}}

-

{{$t('login.password')}}

- - + +
+
+

{{$t('settings.follow_import')}}

+

{{$t('settings.import_followers_from_a_csv_file')}}

+
+ +
+ + +
+ +

{{$t('settings.follows_imported')}}

+
+
+ +

{{$t('settings.follow_import_error')}}

+
+
+
+

{{$t('settings.follow_export')}}

+ +
+
+

{{$t('settings.follow_export_processing')}}

+
-

{{$t('settings.delete_account_error')}}

-

{{deleteAccountError}}

- -
+
@@ -151,13 +156,4 @@ margin: 0.25em; } } - -.tab-switcher { - margin: 7px 7px; - display: inline-block; - - button { - height: 30px; - } -} -- cgit v1.2.3-70-g09d2 From fd604dfd2a8110ea62028d399917937b4535ea51 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 27 Aug 2018 22:40:30 +0300 Subject: fixed still-image not preserving original aspect ratio and resolution. --- src/components/still-image/still-image.js | 6 +++++- src/components/still-image/still-image.vue | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js index 0839aca5..5ad06dc2 100644 --- a/src/components/still-image/still-image.js +++ b/src/components/still-image/still-image.js @@ -18,7 +18,11 @@ const StillImage = { onLoad () { const canvas = this.$refs.canvas if (!canvas) return - canvas.getContext('2d').drawImage(this.$refs.src, 1, 1, canvas.width, canvas.height) + const width = this.$refs.src.naturalWidth + const height = this.$refs.src.naturalHeight + canvas.width = width + canvas.height = height + canvas.getContext('2d').drawImage(this.$refs.src, 0, 0, width, height) } } } diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue index a37c678d..e23f8bc1 100644 --- a/src/components/still-image/still-image.vue +++ b/src/components/still-image/still-image.vue @@ -60,6 +60,7 @@ right: 0; width: 100%; height: 100%; + object-fit: contain; } } -- cgit v1.2.3-70-g09d2 From 226849b26ec0d6cbb752a1e4ae52577ccb00bd84 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 27 Aug 2018 23:15:58 +0300 Subject: Added logic to process reply to favorite request and update likes counter accordingly. Should fix some of cases of doubled likes and likes counter not decrementing. --- src/modules/statuses.js | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/modules/statuses.js b/src/modules/statuses.js index ff2cb098..0dd88266 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -225,7 +225,8 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us }, 'favorite': (favorite) => { // Only update if this is a new favorite. - if (!state.favorites.has(favorite.id)) { + // Ignore our own favorites because we get info about likes as response to like request + if (!state.favorites.has(favorite.id) && user.id !== favorite.user.id) { state.favorites.add(favorite.id) favoriteStatus(favorite) } @@ -347,6 +348,11 @@ export const mutations = { const newStatus = state.allStatusesObject[status.id] newStatus.favorited = value }, + setFavoritedConfirm (state, { status }) { + const newStatus = state.allStatusesObject[status.id] + newStatus.favorited = status.favorited + newStatus.fave_num = status.fave_num + }, setRetweeted (state, { status, value }) { const newStatus = state.allStatusesObject[status.id] newStatus.repeated = value @@ -424,11 +430,31 @@ const statuses = { // Optimistic favoriting... commit('setFavorited', { status, value: true }) apiService.favorite({ id: status.id, credentials: rootState.users.currentUser.credentials }) + .then(response => { + if (response.ok) { + return response.json() + } else { + return {} + } + }) + .then(status => { + commit('setFavoritedConfirm', { status }) + }) }, unfavorite ({ rootState, commit }, status) { // Optimistic favoriting... commit('setFavorited', { status, value: false }) apiService.unfavorite({ id: status.id, credentials: rootState.users.currentUser.credentials }) + .then(response => { + if (response.ok) { + return response.json() + } else { + return {} + } + }) + .then(status => { + commit('setFavoritedConfirm', { status }) + }) }, retweet ({ rootState, commit }, status) { // Optimistic retweeting... -- cgit v1.2.3-70-g09d2 From 68d15f665e178ca37181b66beae5d833db08df52 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 28 Aug 2018 13:42:44 +0300 Subject: Show lock icon instead of hiding repeat button, tusky-style. Added hint explaining what's going on. Fixes favorite button jumping left and right depending on post visibility --- src/components/retweet_button/retweet_button.vue | 11 ++++++++--- src/i18n/messages.js | 6 ++++-- 2 files changed, 12 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue index f5b00599..ee5722bd 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -1,7 +1,12 @@ -- cgit v1.2.3-70-g09d2 From b48a3210a3056385484e60551dd601177839b6cd Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 28 Aug 2018 14:28:05 +0300 Subject: tabs for settings --- src/components/settings/settings.js | 2 + src/components/settings/settings.vue | 169 +++++++++++++++++++---------------- src/i18n/messages.js | 2 + 3 files changed, 95 insertions(+), 78 deletions(-) (limited to 'src') diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index f8eaad00..333633c9 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -1,4 +1,5 @@ /* eslint-env browser */ +import TabSwitcher from '../tab_switcher/tab_switcher.jsx' import StyleSwitcher from '../style_switcher/style_switcher.vue' import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue' import { filter, trim } from 'lodash' @@ -29,6 +30,7 @@ const settings = { } }, components: { + TabSwitcher, StyleSwitcher, InterfaceLanguageSwitcher }, diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index f500a1b0..923c6970 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -4,90 +4,99 @@ {{$t('settings.settings')}}
-
-

{{$t('settings.theme')}}

- -
-
-

{{$t('settings.filtering')}}

-

{{$t('settings.filtering_explanation')}}

- -
-
-

{{$t('nav.timeline')}}

-
    -
  • - - -
    • -
  • - - -
      + +
      +
      +

      {{ $t('settings.interfaceLanguage') }}

      + +
      +
      +

      {{$t('nav.timeline')}}

      +
      • - - + + +
        • +
      • + + +
          +
        • + + +
          • +
        +
        • +
      • + + +
        • +
      • + + +
        • +
      • +
      - -
    • - - -
      • -
    • - - -
      • -
    • - -
      • -
    -
-
-

{{$t('settings.attachments')}}

-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
      +
+
+

{{$t('settings.attachments')}}

+
  • - - -
    - ! {{$t('settings.limited_availability')}} -
    + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
      +
    • + + +
      + ! {{$t('settings.limited_availability')}} +
      +
      • +
- - -
-
-

{{ $t('settings.interfaceLanguage') }}

- -
+
+
+ +
+
+ +
+
+ +
+
+

{{$t('settings.filtering_explanation')}}

+ +
+
+ +
@@ -103,6 +112,10 @@ margin: 1em 1em 1.4em; padding-bottom: 1.4em; + &:last-child { + border-bottom: none; + } + textarea { width: 100%; diff --git a/src/i18n/messages.js b/src/i18n/messages.js index c9a4961c..cd8fa512 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -277,6 +277,7 @@ const en = { no_retweet_hint: 'Post is marked as followers-only or direct and cannot be repeated' }, settings: { + general: 'General', user_settings: 'User Settings', name_bio: 'Name & Bio', name: 'Name', @@ -1625,6 +1626,7 @@ const ru = { no_retweet_hint: 'Пост помечен как "только для подписчиков" или "личное" и поэтому не может быть повторён' }, settings: { + general: 'Общие', user_settings: 'Настройки пользователя', name_bio: 'Имя и описание', name: 'Имя', -- cgit v1.2.3-70-g09d2 From cff4177bf3a7622fa41542c380c462a70359b258 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 28 Aug 2018 15:38:07 +0300 Subject: settings page update --- src/components/settings/settings.vue | 12 +- src/components/style_switcher/style_switcher.vue | 230 ++++++++++++++--------- src/i18n/messages.js | 12 +- 3 files changed, 157 insertions(+), 97 deletions(-) (limited to 'src') diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 923c6970..240cd70a 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -114,6 +114,12 @@ &:last-child { border-bottom: none; + padding-bottom: 0; + margin-bottom: 1em; + } + + select { + min-width: 10em; } @@ -143,8 +149,12 @@ } .btn { - margin-top: 1em; min-height: 28px; + } + + .submit { + margin-top: 1em; + min-height: 30px; width: 10em; } } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 59bd2971..72a338bd 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -1,102 +1,30 @@ @@ -144,15 +159,19 @@ color: var(--cRed, $fallback--cRed); } +.apply-container, .radius-container, -.color-container { +.color-container, +.presets-container { display: flex; p { + flex: 2 0 100%; margin-top: 2em; margin-bottom: .5em; } } + .radius-container { flex-direction: column; } @@ -162,6 +181,36 @@ justify-content: space-between; } +.presets-container { + justify-content: center; + .import-export { + display: flex; + + .btn { + margin-left: .5em; + } + } +} + +.preview-container { + border-top: 1px dashed; + border-bottom: 1px dashed; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); + margin: 1em -1em 0; + padding: 1em; + + .btn { + margin-top: 1em; + min-height: 30px; + width: 10em; + } +} + +.apply-container { + justify-content: center; +} + .radius-item, .color-item { min-width: 20em; @@ -229,6 +278,7 @@ flex: 0; min-width: 2em; cursor: pointer; + max-height: 29px; } .theme-preview-content { diff --git a/src/i18n/messages.js b/src/i18n/messages.js index cd8fa512..cccf48cc 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -48,8 +48,8 @@ const de = { settings: 'Einstellungen', theme: 'Farbschema', presets: 'Voreinstellungen', - export_theme: 'Aktuelles Theme exportieren', - import_theme: 'Gespeichertes Theme laden', + export_theme: 'Farbschema speichern', + import_theme: 'Farbschema laden', invalid_theme_imported: 'Die ausgewählte Datei ist kein unterstütztes Pleroma-Theme. Keine Änderungen wurden vorgenommen.', theme_help: 'Benutze HTML Farbcodes (#rrggbb) um dein Farbschema anzupassen', radii_help: 'Kantenrundung (in Pixel) der Oberfläche anpassen', @@ -293,8 +293,8 @@ const en = { settings: 'Settings', theme: 'Theme', presets: 'Presets', - export_theme: 'Export current theme', - import_theme: 'Load saved theme', + export_theme: 'Save preset', + import_theme: 'Load preset', theme_help: 'Use hex color codes (#rrggbb) to customize your color theme.', invalid_theme_imported: 'The selected file is not a supported Pleroma theme. No changes to your theme were made.', radii_help: 'Set up interface edge rounding (in pixels)', @@ -1641,8 +1641,8 @@ const ru = { set_new_profile_background: 'Загрузить новый фон профиля', settings: 'Настройки', theme: 'Тема', - export_theme: 'Экспортировать текущую тему', - import_theme: 'Загрузить сохранённую тему', + export_theme: 'Сохранить Тему', + import_theme: 'Загрузить Тему', presets: 'Пресеты', theme_help: 'Используйте шестнадцатеричные коды цветов (#rrggbb) для настройки темы.', radii_help: 'Округление краёв элементов интерфейса (в пикселях)', -- cgit v1.2.3-70-g09d2 From c3b27ab4c2d6ca03d8bea171735521b770172104 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 28 Aug 2018 15:47:42 +0300 Subject: moved replies filtering to "filter" category in settings, made it more consistent --- src/components/settings/settings.vue | 21 +++++++++++---------- src/i18n/messages.js | 5 +++++ 2 files changed, 16 insertions(+), 10 deletions(-) (limited to 'src') diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 240cd70a..2f70c209 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -35,16 +35,6 @@ -
  • - -
    • @@ -90,6 +80,17 @@
    +
    + {{$t('settings.replies_in_timeline')}} + +

    {{$t('settings.filtering_explanation')}}

    diff --git a/src/i18n/messages.js b/src/i18n/messages.js index cccf48cc..ebc96e81 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -327,6 +327,7 @@ const en = { loop_video: 'Loop videos', loop_video_silent_only: 'Loop only videos without sound (i.e. Mastodon\'s "gifs")', reply_link_preview: 'Enable reply-link preview on mouse hover', + replies_in_timeline: 'Replies in timeline', reply_visibility_all: 'Show all replies', reply_visibility_following: 'Only show replies directed at me or users I\'m following', reply_visibility_self: 'Only show replies directed at me', @@ -1674,6 +1675,10 @@ const ru = { loop_video: 'Зациливать видео', loop_video_silent_only: 'Зацикливать только беззвучные видео (т.е. "гифки" с Mastodon)', reply_link_preview: 'Включить предварительный просмотр ответа при наведении мыши', + replies_in_timeline: 'Ответы в ленте', + reply_visibility_all: 'Показывать все ответы', + reply_visibility_following: 'Показывать только ответы мне и тех на кого я подписан', + reply_visibility_self: 'Показывать только ответы мне', follow_import: 'Импортировать читаемых', import_followers_from_a_csv_file: 'Импортировать читаемых из файла .csv', follows_imported: 'Список читаемых импортирован. Обработка займёт некоторое время..', -- cgit v1.2.3-70-g09d2 From 330288b4cd874bb960735edb1acde01b0bfbf684 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 28 Aug 2018 16:14:32 +0300 Subject: panel styling cleanup --- src/App.scss | 15 ++++++-- src/components/notifications/notifications.scss | 46 ++++--------------------- src/components/notifications/notifications.vue | 6 ++-- src/components/timeline/timeline.vue | 29 ---------------- 4 files changed, 23 insertions(+), 73 deletions(-) (limited to 'src') diff --git a/src/App.scss b/src/App.scss index 3b8b3224..b4692f26 100644 --- a/src/App.scss +++ b/src/App.scss @@ -48,7 +48,7 @@ a { color: var(--link, $fallback--link); } -button{ +button { user-select: none; color: $fallback--fg; color: var(--fg, $fallback--fg); @@ -282,15 +282,25 @@ main-router { } .panel-heading { + display: flex; border-radius: $fallback--panelRadius $fallback--panelRadius 0 0; border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0; background-size: cover; - padding: 0.6em 1.0em; + padding: .6em .6em; text-align: left; font-size: 1.3em; line-height: 24px; background-color: $fallback--btn; background-color: var(--btn, $fallback--btn); + align-items: baseline; + + .title { + flex: 1 0 auto; + } + + button { + height: 100%; + } } .panel-heading.stub { @@ -460,4 +470,3 @@ nav { border-radius: $fallback--inputRadius; border-radius: var(--inputRadius, $fallback--inputRadius); } - diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 5b09685b..0213d5b8 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -4,58 +4,25 @@ // a bit of a hack to allow scrolling below notifications padding-bottom: 15em; - .title { - display: inline-block; - } - - .panel { - background: $fallback--bg; - background: var(--bg, $fallback--bg) - } - - .panel-body { - border-color: $fallback--border; - border-color: var(--border, $fallback--border) - } - - .panel-heading { - // force the text to stay centered, while keeping - // the button in the right side of the panel heading - position: relative; - background: $fallback--btn; - background: var(--btn, $fallback--btn); - color: $fallback--fg; - color: var(--fg, $fallback--fg); - display: flex; - align-items: baseline; - .read-button { - position: absolute; - right: 0.7em; - height: 1.8em; - line-height: 100%; - } - } - .unseen-count { display: inline-block; background-color: $fallback--cRed; background-color: var(--cRed, $fallback--cRed); text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); - min-width: 1.3em; - border-radius: 1.3em; - margin: 0 0.2em 0 -0.4em; + border-radius: 99px; + min-width: 1.5em; + max-width: 1.5em; + min-height: 1.5em; + max-height: 1.5em; color: white; font-size: 0.9em; text-align: center; - line-height: 1.3em; } .loadmore-error { position: absolute; right: 0.6em; - font-size: 14px; min-width: 6em; - font-family: sans-serif; text-align: center; padding: 0 0.25em 0 0.25em; margin: 0; @@ -73,7 +40,8 @@ box-sizing: border-box; display: flex; border-bottom: 1px solid; - border-bottom-color: inherit; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); .broken-favorite { border-radius: $fallback--tooltipRadius; diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index a0b0e5f5..7a4322f9 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -2,8 +2,10 @@
    - {{unseenCount}} -
    {{$t('notifications.notifications')}}
    +
    + {{$t('notifications.notifications')}} + {{unseenCount}} +
    {{$t('timeline.error_fetching')}}
    diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index c4e0fbce..ed354030 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -57,36 +57,8 @@ @import '../../_variables.scss'; .timeline { - .timeline-heading { - position: relative; - display: flex; - } - - .title { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 70%; - } - - .loadmore-button { - position: absolute; - right: 0.6em; - font-size: 14px; - - min-width: 6em; - height: 1.8em; - line-height: 100%; - } - .loadmore-text { - position: absolute; - right: 0.6em; font-size: 14px; - min-width: 6em; - font-family: sans-serif; - text-align: center; - padding: 0 0.5em 0 0.5em; opacity: 0.8; background-color: transparent; color: $fallback--faint; @@ -98,7 +70,6 @@ right: 0.6em; font-size: 14px; min-width: 6em; - font-family: sans-serif; text-align: center; padding: 0 0.25em 0 0.25em; margin: 0; -- cgit v1.2.3-70-g09d2 From da362b2b88b9d21a5cca654feafde5bea612a31a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 28 Aug 2018 16:20:04 +0300 Subject: minor style tweaks --- src/App.scss | 9 +++++++++ src/components/tab_switcher/tab_switcher.scss | 4 ---- 2 files changed, 9 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/App.scss b/src/App.scss index b4692f26..d0c4b26c 100644 --- a/src/App.scss +++ b/src/App.scss @@ -64,10 +64,19 @@ button { font-size: 14px; font-family: sans-serif; + &::-moz-focus-inner { + border: none; + } + &:hover { box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3); } + &:active { + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + border-top: 1px solid rgba(0, 0, 0, 0.2); + } + &:disabled { cursor: not-allowed; opacity: 0.5; diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index f83dc7c2..374a19c5 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -26,10 +26,6 @@ border-bottom-right-radius: 0; padding: .3em 1em; - &::-moz-focus-inner { - border: none; - } - &:not(.active) { border-bottom: 1px solid; border-bottom-color: $fallback--btn; -- cgit v1.2.3-70-g09d2 From 66a22762c21f652342ca2421f732650c261abc02 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 28 Aug 2018 16:22:49 +0300 Subject: fixup! Separated tab-switcher into a reusable component. This depends on JSX addition --- src/components/settings/settings.vue | 6 +++--- src/components/tab_switcher/tab_switcher.jsx | 2 +- src/components/user_settings/user_settings.vue | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 2f70c209..c92602b7 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -5,7 +5,7 @@
    -
    +

    {{ $t('settings.interfaceLanguage') }}

    @@ -73,13 +73,13 @@
    -
    +
    -
    +
    {{$t('settings.replies_in_timeline')}}