fixed the remaining issues
This commit is contained in:
parent
5ffcddd3b9
commit
9a20a90932
4 changed files with 16 additions and 15 deletions
|
@ -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;
|
||||||
|
|
|
@ -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 />
|
||||||
|
|
|
@ -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 (
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue