Improved scenes and movies meta header layout and responsiveness.
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
defineProps({
|
||||
const props = defineProps({
|
||||
results: {
|
||||
type: Number,
|
||||
default: null,
|
||||
@@ -10,25 +10,47 @@ defineProps({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// pages with their own filters toggle control the sidebar with these, otherwise it keeps its own state and toggle
|
||||
showFull: {
|
||||
type: Boolean,
|
||||
default: null,
|
||||
},
|
||||
showCompact: {
|
||||
type: Boolean,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
// desktop defaults to open, compact defaults to closed
|
||||
// we can't measure viewframe in SSR, so use separate toggles
|
||||
const showFilters = ref(true);
|
||||
const showFiltersCompact = ref(false);
|
||||
const ownShowFull = ref(true);
|
||||
const ownShowCompact = ref(false);
|
||||
|
||||
const isControlled = computed(() => props.showFull !== null || props.showCompact !== null);
|
||||
const showFull = computed(() => (isControlled.value ? !!props.showFull : ownShowFull.value));
|
||||
const showCompact = computed(() => (isControlled.value ? !!props.showCompact : ownShowCompact.value));
|
||||
|
||||
function toggleFilters(state) {
|
||||
showFilters.value = state ?? !showFilters.value;
|
||||
showFiltersCompact.value = state ?? !showFiltersCompact.value;
|
||||
if (isControlled.value) {
|
||||
if (state === false) {
|
||||
emit('close');
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
ownShowFull.value = state ?? !ownShowFull.value;
|
||||
ownShowCompact.value = state ?? !ownShowCompact.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="filters-frame">
|
||||
<div
|
||||
v-show="showFilters"
|
||||
class="filters-container"
|
||||
:class="{ show: showFiltersCompact }"
|
||||
:class="{ 'show-full': showFull, 'show-compact': showCompact }"
|
||||
@click="toggleFilters(false)"
|
||||
>
|
||||
<div class="filters-sidebar">
|
||||
@@ -47,9 +69,10 @@ function toggleFilters(state) {
|
||||
>Show {{ results }} {{ results > 1 ? 'results' : 'result' }}</button>
|
||||
</div>
|
||||
|
||||
<!-- in full mode, pages with their own toggle close the sidebar with that, compact mode still needs a way out of the overlay -->
|
||||
<div
|
||||
class="filters-toggle close"
|
||||
:class="{ 'show-full': showFilters, 'show-compact': showFiltersCompact }"
|
||||
:class="{ 'show-full': showFull && !isControlled, 'show-compact': showCompact }"
|
||||
@click.stop="toggleFilters(false)"
|
||||
>
|
||||
<Icon
|
||||
@@ -65,8 +88,9 @@ function toggleFilters(state) {
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="!isControlled"
|
||||
class="filters-toggle open"
|
||||
:class="{ 'show-full': !showFilters, 'show-compact': !showFiltersCompact }"
|
||||
:class="{ 'show-full': !showFull, 'show-compact': !showCompact }"
|
||||
@click.stop="toggleFilters(true)"
|
||||
><Icon icon="filter" /></div>
|
||||
</div>
|
||||
@@ -359,8 +383,12 @@ function toggleFilters(state) {
|
||||
}
|
||||
|
||||
.filters-container {
|
||||
display: flex;
|
||||
display: none;
|
||||
height: 100%;
|
||||
|
||||
&.show-full {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.filters-sidebar {
|
||||
@@ -450,7 +478,11 @@ function toggleFilters(state) {
|
||||
z-index: 500;
|
||||
background: var(--background-dim);
|
||||
|
||||
&.show {
|
||||
&.show-full {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.show-compact {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
+117
-27
@@ -1,50 +1,140 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
// desktop and compact have separate open states, because we can't measure the viewport in SSR
|
||||
showFull: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showCompact: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
count: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['toggle']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="filters-toggle open"
|
||||
@click.stop="emit('toggle')"
|
||||
><Icon icon="filter" /></div>
|
||||
<button
|
||||
type="button"
|
||||
class="filter-toggle nobutton"
|
||||
:class="{
|
||||
'open-full': showFull,
|
||||
'open-compact': showCompact,
|
||||
'active': count > 0,
|
||||
}"
|
||||
@click="emit('toggle')"
|
||||
>
|
||||
<!-- the media query picks the open state of the current viewport, matching the sidebar's own breakpoint -->
|
||||
<Icon
|
||||
icon="arrow-left2"
|
||||
class="toggle-close"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
icon="filter"
|
||||
class="toggle-open"
|
||||
/>
|
||||
|
||||
<!-- not filter-count, the filters sidebar has a global style by that name -->
|
||||
<span
|
||||
v-if="count > 0"
|
||||
class="toggle-count"
|
||||
>{{ count }}</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.filters-toggle {
|
||||
min-width: 2.75rem;
|
||||
height: 3rem;
|
||||
justify-content: center;
|
||||
.filter-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 .25rem;
|
||||
border-radius: 0 .5rem .5rem 0;
|
||||
background: var(--background);
|
||||
color: var(--glass);
|
||||
gap: .75rem;
|
||||
padding: 0 1rem;
|
||||
border-radius: 0 .25rem .25rem 0;
|
||||
margin-right: 1rem;
|
||||
font-weight: bold;
|
||||
box-shadow: inset 0 0 3px var(--shadow-weak-30);
|
||||
|
||||
&.open {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
&.show-full {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.close .cross {
|
||||
display: none;
|
||||
}
|
||||
color: var(--glass-strong-10);
|
||||
background: var(--background);
|
||||
box-shadow: 0 0 3px var(--shadow-weak-30);
|
||||
|
||||
.icon {
|
||||
fill: var(--glass);
|
||||
fill: var(--glass-strong-10);
|
||||
margin: .75rem 0 .75rem 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
padding-right: .75rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 3px var(--shadow-weak-20);
|
||||
|
||||
.icon {
|
||||
fill: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.open-full {
|
||||
.toggle-close {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.toggle-open {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-count {
|
||||
min-width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 .25rem;
|
||||
border-radius: .625rem;
|
||||
background: var(--primary);
|
||||
color: var(--text-light);
|
||||
font-size: .8rem;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@media (--compact) {
|
||||
.filter-toggle {
|
||||
/* the full mode state doesn't apply in compact mode, matches the specificity of the open-full rule to override it */
|
||||
&,
|
||||
&.open-full {
|
||||
.toggle-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-open {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/* after the reset, so it wins when both states are open */
|
||||
&.open-compact {
|
||||
.toggle-close {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.toggle-open {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user