jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed docs siblings display on small screens

Browse Source
This commit is contained in:
ThaumRystra
2023-11-12 15:05:46 +02:00
parent d50ad58526
commit aaec54f36a
1 changed files with 45 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
app/imports/client/ui/docs/DocViewer.vue
View File

@@ -1,27 +1,32 @@
<template>
<v-row justify="center">
<v-row
justify="center"
class="doc-viewer"
>
<v-col
cols="12"
lg="8"
class="pt-0"
>
<v-card
style="float: right; z-index: 4;"
class="ma-4"
>
<v-fade-transition mode="out-in">
<v-list
v-if="siblingDocs.length > 1"
:dense="siblingDocs.length > 5"
>
<doc-list-item
v-for="sibling in siblingDocs"
:key="sibling._id"
:doc="sibling"
:icon="siblingHasIcon"
/>
</v-list>
</v-fade-transition>
</v-card>
<div class="sibling-list-parent">
<v-card
class="sibling-list"
>
<v-fade-transition mode="out-in">
<v-list
v-if="siblingDocs.length > 1"
:dense="siblingDocs.length > 5"
>
<doc-list-item
v-for="sibling in siblingDocs"
:key="sibling._id"
:doc="sibling"
:icon="siblingHasIcon"
/>
</v-list>
</v-fade-transition>
</v-card>
</div>
<v-fade-transition mode="out-in">
<div
:key="doc && doc.name || 'Documentation Home'"
@@ -133,4 +138,24 @@ export default {
},
}
}
</script>
</script>
<style lang="css" scoped>
@media (min-width: 500px) {
.sibling-list-parent {
float: right;
z-index: 4;
}
.sibling-list {
display: block !important;
}
}
.sibling-list-parent {
text-align: right;
margin: 0 16px 8px;
}
.sibling-list {
text-align: left;
display: inline-block;
}
</style>