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>
<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 }"
>
<div class="uk-card-media-top">

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

@ -1,6 +1,6 @@
<template>
<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">
<a href="#">

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

@ -1,9 +1,11 @@
<template>
<div class="galleryDisplay uk-padding uk-padding-remove-top">
<!-- Gallery nav bar -->
<nav
class="uk-navbar-container uk-navbar-transparent navbar"
class="gallery-navbar uk-navbar-container uk-navbar-transparent"
uk-navbar="mode: click"
>
<!-- Left side controls -->
<div
class="uk-navbar-left uk-padding-remove-top uk-padding-remove-bottom"
>
@ -53,6 +55,7 @@
</ul>
</div>
<!-- Right side buttons -->
<div class="uk-navbar-right">
<div class="uk-grid">
<div>
@ -71,14 +74,16 @@
</div>
</nav>
<!-- Gallery -->
<div
v-if="$store.getters.ready"
class="uk-padding-remove-top"
uk-lightbox="toggle: .lightbox-link"
>
<!-- Folder heading -->
<div
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
href="#"
@ -95,7 +100,8 @@
</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">
<scanCard
v-if="'isScan' in item"
@ -374,9 +380,29 @@ export default {
</script>
<style scoped lang="less">
.navbar {
.gallery-navbar {
border-width: 0 0 1px 0;
border-style: solid;
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>