rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improved gallery layout

Browse source
This commit is contained in:
Joel Collins 2020-03-17 17:39:20 +00:00
parent d8626b7e13
commit 0a1b138bcb
3 changed files with 32 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/viewComponents/galleryComponents/captureCard.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div <div
class="captureCard uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium" class="capture-card uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium"
:class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }" :class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }"
> >
<div class="uk-card-media-top"> <div class="uk-card-media-top">

2
src/components/viewComponents/galleryComponents/scanCard.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div <div
class="captureCard uk-card uk-card-primary uk-card-hover uk-padding-remove uk-width-medium" class="capture-card uk-card uk-card-primary uk-card-hover uk-padding-remove uk-width-medium"
> >
<div class="uk-card-media-top"> <div class="uk-card-media-top">
<a href="#"> <a href="#">

34
src/components/viewComponents/galleryDisplay.vue
View file

@ -1,9 +1,11 @@
<template> <template>
<div class="galleryDisplay uk-padding uk-padding-remove-top"> <div class="galleryDisplay uk-padding uk-padding-remove-top">
<!-- Gallery nav bar -->
<nav <nav
class="uk-navbar-container uk-navbar-transparent navbar" class="gallery-navbar uk-navbar-container uk-navbar-transparent"
uk-navbar="mode: click" uk-navbar="mode: click"
> >
<!-- Left side controls -->
<div <div
class="uk-navbar-left uk-padding-remove-top uk-padding-remove-bottom" class="uk-navbar-left uk-padding-remove-top uk-padding-remove-bottom"
> >
@ -53,6 +55,7 @@
</ul> </ul>
</div> </div>
<!-- Right side buttons -->
<div class="uk-navbar-right"> <div class="uk-navbar-right">
<div class="uk-grid"> <div class="uk-grid">
<div> <div>
@ -71,14 +74,16 @@
</div> </div>
</nav> </nav>
<!-- Gallery -->
<div <div
v-if="$store.getters.ready" v-if="$store.getters.ready"
class="uk-padding-remove-top" class="uk-padding-remove-top"
uk-lightbox="toggle: .lightbox-link" uk-lightbox="toggle: .lightbox-link"
> >
<!-- Folder heading -->
<div <div
v-if="galleryFolder" v-if="galleryFolder"
class="uk-flex uk-flex-middle uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom" class="gallery-folder-heading uk-flex uk-flex-middle"
> >
<a <a
href="#" href="#"
@ -95,7 +100,8 @@
</div> </div>
</div> </div>
<div class="uk-grid-medium uk-grid-match uk-margin-top" uk-grid> <!-- Gallery capture cards -->
<div class="gallery-grid">
<div v-for="item in sortedItems" :key="item.metadata.id"> <div v-for="item in sortedItems" :key="item.metadata.id">
<scanCard <scanCard
v-if="'isScan' in item" v-if="'isScan' in item"
@ -374,9 +380,29 @@ export default {
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.navbar { .gallery-navbar {
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
border-style: solid; border-style: solid;
border-color: rgba(180, 180, 180, 0.25); border-color: rgba(180, 180, 180, 0.25);
} }
.gallery-navbar,
.gallery-folder-heading {
margin-bottom: 30px;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, 320px);
justify-content: center;
}
.gallery-grid > div {
display: inline-block;
margin-bottom: 20px;
}
/deep/ .capture-card {
width: 300px;
height: 100%; // Used to have all cards in a row match their heights
margin-left: auto;
margin-right: auto;
}
</style> </style>