Vasanko/cista-storage
Vasanko/cista-storage
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

More robust and flexible layout.

Browse Source
This commit is contained in:
Leo Vasanko 2023-11-18 21:55:52 -08:00
parent 434e55f303
commit a9d713dbd0
7 changed files with 58 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/index.html
View File

@ -8,5 +8,4 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
<body id="app">
<div id="app"></div>

38
frontend/src/assets/main.css
View File

@ -89,9 +89,10 @@
--header-background: none; --header-background: none;
--header-color: black; --header-color: black;
} }
nav, .headermain,
.menu, .menu,
.rename-button { .rename-button,
.suggest-gallery {
display: none !important; display: none !important;
} }
.breadcrumb > a { .breadcrumb > a {
@ -107,9 +108,12 @@
} }
.breadcrumb svg { .breadcrumb svg {
fill: black !important; fill: black !important;
margin: 0 .5rem 0 1rem !important;
}
body#app {
height: auto !important;
} }
main { main {
height: auto !important;
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }
thead tr { thead tr {
@ -118,6 +122,17 @@
background: none !important; background: none !important;
border-bottom: 1pt solid black !important; border-bottom: 1pt solid black !important;
} }
audio::-webkit-media-controls-timeline,
video::-webkit-media-controls-timeline {
display: none;
}
audio::-webkit-media-controls,
video::-webkit-media-controls {
display: none;
}
tr, figure {
page-break-inside: avoid;
}
.selection { .selection {
min-width: 0 !important; min-width: 0 !important;
padding: 0 !important; padding: 0 !important;
@ -157,6 +172,7 @@ tbody .modified {
font-family: 'Roboto Mono'; font-family: 'Roboto Mono';
} }
header { header {
flex: 0 0 auto;
background-color: var(--header-background); background-color: var(--header-background);
color: var(--header-color); color: var(--header-color);
font-size: var(--header-font-size); font-size: var(--header-font-size);
@ -198,21 +214,23 @@ table {
border: 0; border: 0;
gap: 0; gap: 0;
} }
#app { body#app {
height: 100%; height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
main {
flex: 1 1 auto;
padding-bottom: 3em; /* convenience space on the bottom */
overflow-y: scroll;
text-align: center;
}
header nav.headermain { header nav.headermain {
/* Position so that tooltips can appear on top of other positioned elements */ /* Position so that tooltips can appear on top of other positioned elements */
position: relative; position: relative;
z-index: 100; z-index: 100;
} }
main {
height: calc(100svh - var(--header-height));
padding-bottom: 3em; /* convenience space on the bottom */
overflow-y: scroll;
}
.spacer { flex-grow: 1 } .spacer { flex-grow: 1 }
.smallgap { flex-shrink: 1; width: 2em } .smallgap { flex-shrink: 1; width: 2em }

1
frontend/src/components/BreadCrumb.vue
View File

@ -10,6 +10,7 @@
> >
<a href="#/" <a href="#/"
:ref="el => setLinkRef(0, el)" :ref="el => setLinkRef(0, el)"
class="home"
:class="{ current: !!isCurrent(0) }" :class="{ current: !!isCurrent(0) }"
:aria-current="isCurrent(0)" :aria-current="isCurrent(0)"
@click.prevent="navigate(0)" @click.prevent="navigate(0)"

9
frontend/src/components/Gallery.vue
View File

@ -244,12 +244,13 @@ const contextMenu = (ev: MouseEvent, doc: Doc) => {
<style scoped> <style scoped>
.gallery { .gallery {
padding: 1rem; padding: 1em;
width: 100%; width: 100%;
display: grid; display: grid;
gap: .5rem; gap: .5em;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-auto-rows: 15rem; grid-template-rows: repeat(minmax(auto, 15em));
align-items: end;
} }
.breadcrumb { .breadcrumb {
position: absolute; position: absolute;

17
frontend/src/components/GalleryFigure.vue
View File

@ -37,21 +37,24 @@ const m = ref<typeof MediaPreview | null>(null)
<style scoped> <style scoped>
.gallery figure { .gallery figure {
height: 15rem; max-height: 15em;
position: relative; position: relative;
border-radius: .5rem; border-radius: .5em;
overflow: hidden; overflow: hidden;
margin: 0; margin: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; justify-content: end;
overflow: hidden; overflow: hidden;
} }
.icon {
justify-self: end;
}
figure caption { figure caption {
font-weight: 600; font-weight: 600;
color: var(--text-color); color: var(--text-color);
text-shadow: 0 0 .2rem var(--primary-background), 0 0 .2rem var(--primary-background); text-shadow: 0 0 .2em var(--primary-background), 0 0 .2em var(--primary-background);
} }
.cursor caption { .cursor caption {
background: var(--accent-color); background: var(--accent-color);
@ -73,15 +76,15 @@ caption label {
} }
label span { label span {
flex: 1 1; flex: 1 1;
margin-right: 2rem; margin-right: 2em;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
label input[type='checkbox'] { label input[type='checkbox'] {
width: 2rem; width: 2em;
height: 2rem; height: 2em;
opacity: 0; opacity: 0;
flex-shrink: 0; flex-shrink: 0;
} }

25
frontend/src/components/MediaPreview.vue
View File

@ -2,8 +2,8 @@
<img v-if=preview() :src="`${doc.previewurl}?${quality}&t=${doc.mtime}`" alt=""> <img v-if=preview() :src="`${doc.previewurl}?${quality}&t=${doc.mtime}`" alt="">
<img v-else-if=doc.img :src=doc.url alt=""> <img v-else-if=doc.img :src=doc.url alt="">
<span v-else-if=doc.dir class="folder icon"></span> <span v-else-if=doc.dir class="folder icon"></span>
<video ref=vid v-else-if=video() :src=doc.url :poster="`${doc.previewurl}?${quality}&t=${doc.mtime}`" controls preload=none @click.prevent>📄</video> <video ref=vid v-else-if=video() :src=doc.url :poster="`${doc.previewurl}?${quality}&t=${doc.mtime}`" controls preload=none @click.prevent>🎞️</video>
<audio ref=aud v-else-if=audio() :src=doc.url controls preload=metadata @click.stop>📄</audio> <audio ref=aud v-else-if=audio() :src=doc.url controls preload=metadata @click.stop>🔈</audio>
<span v-else-if=archive() class="archive icon"></span> <span v-else-if=archive() class="archive icon"></span>
<span v-else class="file icon" :class="`ext-${doc.ext}`"></span> <span v-else class="file icon" :class="`ext-${doc.ext}`"></span>
</template> </template>
@ -43,22 +43,21 @@ const preview = () => (
</script> </script>
<style scoped> <style scoped>
img, embed, .icon { img, embed, .icon, audio, video {
font-size: 10em; font-size: 10em;
border-radius: .5rem;
overflow: hidden; overflow: hidden;
text-align: center;
object-fit: cover;
object-position: center;
min-width: 50%;
height: 100%;
}
audio, video {
height: 100%;
min-width: 50%; min-width: 50%;
max-width: 100%; max-width: 100%;
min-height: 50%;
max-height: 100%;
object-fit: cover;
border-radius: .05em;
}
img {
justify-self: start;
}
audio, video {
padding-bottom: 2rem; padding-bottom: 2rem;
margin: auto;
} }
.folder::before { .folder::before {
content: '📁'; content: '📁';

2
frontend/src/views/ExplorerView.vue
View File

@ -4,7 +4,7 @@
<p v-if="!store.connected">No Connection</p> <p v-if="!store.connected">No Connection</p>
<p v-else-if="store.document.length === 0">Waiting for File List</p> <p v-else-if="store.document.length === 0">Waiting for File List</p>
<p v-else-if="store.query">No matches!</p> <p v-else-if="store.query">No matches!</p>
<p v-else-if="!store.document.some(doc => (doc.loc ? `${doc.loc}/${doc.name}` : doc.name) === props.path.join('/'))">Folder not found.</p> <p v-else-if="!store.document.some(doc => (doc.loc ? `${doc.loc}/${doc.name}` : doc.name) === props.path.join('/'))">Folder not found</p>
<p v-else>Empty folder</p> <p v-else>Empty folder</p>
</div> </div>
<Gallery <Gallery