fixed the remaining issues

This commit is contained in:
Henry Jameson 2020-05-28 21:26:33 +03:00
parent 5ffcddd3b9
commit 9a20a90932
4 changed files with 16 additions and 15 deletions

View file

@ -2,10 +2,6 @@
.settings_tab-switcher { .settings_tab-switcher {
height: 100%; height: 100%;
.full-height {
height: 100%;
}
.setting-item { .setting-item {
border-bottom: 2px solid var(--fg, $fallback--fg); border-bottom: 2px solid var(--fg, $fallback--fg);
margin: 1em 1em 1.4em; margin: 1em 1em 1.4em;

View file

@ -55,7 +55,6 @@
v-if="isLoggedIn" v-if="isLoggedIn"
:label="$t('settings.mutes_and_blocks')" :label="$t('settings.mutes_and_blocks')"
:fullHeight="true" :fullHeight="true"
class="full-height"
icon="eye-off" icon="eye-off"
> >
<MutesAndBlocksTab /> <MutesAndBlocksTab />

View file

@ -113,23 +113,20 @@ export default Vue.component('tab-switcher', {
if (slot.data.attrs.fullHeight) { if (slot.data.attrs.fullHeight) {
classes.push('full-height') classes.push('full-height')
} }
const newSlot = ( const renderSlot = (!this.renderOnlyFocused || active)
? slot
: ''
return (
<div class={classes}> <div class={classes}>
{ {
this.sideTabBar this.sideTabBar
? <h1 class="mobile-label">{slot.data.attrs.label}</h1> ? <h1 class="mobile-label">{slot.data.attrs.label}</h1>
: '' : ''
} }
{slot} {renderSlot}
</div> </div>
) )
if (this.renderOnlyFocused) {
return active
? <div class={classes.join(' ')}>{newSlot}</div>
: <div class={classes.join(' ')}></div>
}
return <div class={classes.join(' ')}>{newSlot}</div>
}) })
return ( return (

View file

@ -125,8 +125,9 @@
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
padding-left: 1em; padding-left: 1em;
padding-right: calc(1em + 200px); padding-right: calc(1em + 200px);
margin-right: calc(1em - 200px); margin-right: -200px;
margin-left: 1em; margin-left: 1em;
@media all and (max-width: 800px) { @media all and (max-width: 800px) {
padding-left: .25em; padding-left: .25em;
padding-right: calc(.25em + 200px); padding-right: calc(.25em + 200px);
@ -147,6 +148,14 @@
.hidden { .hidden {
display: none; display: none;
} }
.full-height {
height: 100%;
display: flex;
flex-direction: column;
> *:not(.mobile-label) {
flex: 1;
}
}
&.scrollable-tabs { &.scrollable-tabs {
overflow-y: auto; overflow-y: auto;