1
0
mirror of https://github.com/amir20/dozzle.git synced 2025-12-21 21:33:18 +01:00

fix: Updates to sidebar on mobile to align closer to desktop (#2562)

This commit is contained in:
ab623
2023-12-05 15:53:10 +00:00
committed by GitHub
parent f240b7011b
commit 24f298b94d

View File

@@ -20,7 +20,7 @@
</div> </div>
<transition name="fade"> <transition name="fade">
<div v-show="show"> <div v-show="show" class="h-[calc(100vh-60px)] overflow-auto">
<div class="mt-4 flex items-center justify-center gap-2"> <div class="mt-4 flex items-center justify-center gap-2">
<dropdown-menu <dropdown-menu
v-model="sessionHost" v-model="sessionHost"
@@ -39,7 +39,7 @@
<ul class="menu"> <ul class="menu">
<li class="menu-title">{{ $t("label.containers") }}</li> <li class="menu-title">{{ $t("label.containers") }}</li>
<li v-for="item in sortedContainers" :key="item.id"> <li v-for="item in sortedContainers" :key="item.id" :class="item.state">
<router-link <router-link
:to="{ name: 'container-id', params: { id: item.id } }" :to="{ name: 'container-id', params: { id: item.id } }"
active-class="active-primary" active-class="active-primary"
@@ -85,6 +85,10 @@ const sortedContainers = computed(() =>
const hosts = computed(() => config.hosts.map(({ id, name }) => ({ value: id, label: name }))); const hosts = computed(() => config.hosts.map(({ id, name }) => ({ value: id, label: name })));
</script> </script>
<style scoped lang="postcss"> <style scoped lang="postcss">
li.exited {
@apply opacity-50;
}
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
@apply transition-opacity; @apply transition-opacity;