diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js index 32ef38d6..caa7c48c 100644 --- a/src/components/settings_modal/settings_modal.js +++ b/src/components/settings_modal/settings_modal.js @@ -24,6 +24,9 @@ const SettingsModal = { } }, computed: { + currentSaveStateNotice () { + return this.$store.state.interface.settings.currentSaveStateNotice + }, modalActivated () { return this.$store.state.interface.settingsModalState !== 'hidden' }, diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js index b27fbd28..48101a90 100644 --- a/src/components/settings_modal/settings_modal_content.js +++ b/src/components/settings_modal/settings_modal_content.js @@ -25,9 +25,6 @@ const SettingsModalContent = { ThemeTab }, computed: { - currentSaveStateNotice () { - return this.$store.state.interface.settings.currentSaveStateNotice - }, isLoggedIn () { return !!this.$store.state.users.currentUser } diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue index 8b83e48c..283b4ef8 100644 --- a/src/components/settings_modal/settings_modal_content.vue +++ b/src/components/settings_modal/settings_modal_content.vue @@ -40,7 +40,7 @@
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss index e0b1a2df..926eceff 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss @@ -95,20 +95,25 @@ align-items: baseline; width: 100%; min-height: 30px; - - .btn { - min-width: 1px; - flex: 0 auto; - padding: 0 1em; - } + margin-bottom: 1em; p { flex: 1; margin: 0; margin-right: .5em; } + } - margin-bottom: 1em; + .tab-header-buttons { + display: flex; + flex-direction: column; + + .btn { + min-width: 1px; + flex: 0 auto; + padding: 0 1em; + margin-bottom: .5em; + } } .shadow-selector { diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue index 33098498..fcfad23b 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue @@ -126,18 +126,20 @@ >

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

- - +
+ + +

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

{{ $t('settings.style.common_colors.main') }}

diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js index 2d04e15d..616f1a19 100644 --- a/src/components/tab_switcher/tab_switcher.js +++ b/src/components/tab_switcher/tab_switcher.js @@ -95,9 +95,12 @@ export default Vue.component('tab-switcher', { disabled={slot.data.attrs.disabled} onClick={this.activateTab(index)} class={classesTab.join(' ')} + type="button" > {!slot.data.attrs.icon ? '' : ()} - {slot.data.attrs.label} + + {slot.data.attrs.label} + ) @@ -110,13 +113,23 @@ export default Vue.component('tab-switcher', { if (slot.data.attrs.fullHeight) { classes.push('full-height') } + const newSlot = ( +
+ { + this.sideTabBar + ?

{slot.data.attrs.label}

+ : '' + } + {slot} +
+ ) if (this.renderOnlyFocused) { return active - ?
{slot}
+ ?
{newSlot}
:
} - return
{slot}
+ return
{newSlot}
}) return ( diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index d60e065b..db58f4cd 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -10,12 +10,14 @@ &.top-tabs { flex-direction: column; + > .tabs { width: 100%; overflow-y: hidden; overflow-x: auto; padding-top: 5px; flex-direction: row; + &::after, &::before { content: ''; flex: 1 1 auto; @@ -51,34 +53,47 @@ &.side-tabs { flex-direction: row; + @media all and (max-width: 800px) { overflow-x: auto; } + > .contents { - flex: 0 1 80%; - @media all and (max-width: 800px) { - min-width: 96vw; - } + flex: 1 1 auto; } + > .tabs { - flex: 1 0 auto; + flex: 0 0 auto; overflow-y: auto; overflow-x: hidden; flex-direction: column; + &::after, &::before { - flex: 1 0 .5em; + flex-shrink: 0; + flex-basis: .5em; content: ''; border-right: 1px solid; border-right-color: $fallback--border; border-right-color: var(--border, $fallback--border); } + + &::after { + flex-grow: 1; + } + &::before { flex-grow: 0; } + .tab-wrapper { min-width: 10em; display: flex; flex-direction: column; + + @media all and (max-width: 800px) { + min-width: 1em; + } + &:not(.active)::after { top: 0; right: 0; @@ -87,6 +102,7 @@ border-right-color: $fallback--border; border-right-color: var(--border, $fallback--border); } + &::before { flex: 0 0 6px; content: ''; @@ -94,6 +110,7 @@ border-right-color: $fallback--border; border-right-color: var(--border, $fallback--border); } + &:last-child .tab { margin-bottom: 0; } @@ -106,26 +123,23 @@ min-width: 1px; border-top-right-radius: 0; border-bottom-right-radius: 0; + padding-left: 1em; padding-right: calc(1em + 200px); - margin-right: 6px - 200px; - margin-left: 6px; - } - - .tab-wrapper { - min-width: 10em; - &:not(.active)::after { - top: 0; - right: 0; - bottom: 0; - border-right: 1px solid; - border-right-color: $fallback--border; - border-right-color: var(--border, $fallback--border); + margin-right: calc(1em - 200px); + margin-left: 1em; + @media all and (max-width: 800px) { + padding-left: .25em; + padding-right: calc(.25em + 200px); + margin-right: calc(.25em - 200px); + margin-left: .25em; + .text { + display: none + } } } } } - .contents { flex: 1 0 auto; min-height: 0px; @@ -142,14 +156,14 @@ .tab { position: relative; white-space: nowrap; - padding: 6px 1em; + background-color: $fallback--fg; + background-color: var(--tab, $fallback--fg); + &, &:active .tab-icon { color: $fallback--text; color: var(--tabText, $fallback--text); } - background-color: $fallback--fg; - background-color: var(--tab, $fallback--fg); &:not(.active) { z-index: 4; @@ -173,7 +187,6 @@ } } - .tabs { display: flex; position: relative; @@ -198,4 +211,17 @@ } } } + + .mobile-label { + padding-left: .3em; + padding-bottom: .25em; + margin-top: .5em; + margin-left: .2em; + margin-bottom: .25em; + border-bottom: 1px solid var(--border, $fallback--border); + + @media all and (min-width: 800px) { + display: none; + } + } }