RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve mobile selection bar

pull/162/head
Varun Patil 2022-10-31 21:59:24 -07:00
parent 1bd9e79445
commit b26abaf8b1
2 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.vue
View File

@ -268,6 +268,7 @@ body {
// Prevent content overflow on NC <25 // Prevent content overflow on NC <25
#content-vue { #content-vue {
max-height: 100vh; max-height: 100vh;
z-index: 3000; // above header
} }
// Patch viewer to remove the title and // Patch viewer to remove the title and

21
src/components/SelectionManager.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div v-if="selection.size > 0" class="top-bar"> <div v-if="selection.size > 0" class="top-bar">
<NcActions> <NcActions :inline="1">
<NcActionButton <NcActionButton
:aria-label="t('memories', 'Cancel')" :aria-label="t('memories', 'Cancel')"
@click="clearSelection()" @click="clearSelection()"
@ -88,7 +88,7 @@ type Selection = Map<number, IPhoto>;
CloseIcon, CloseIcon,
}, },
}) })
export default class SelectionHandler extends Mixins(GlobalMixin, UserConfig) { export default class SelectionManager extends Mixins(GlobalMixin, UserConfig) {
@Prop() public selection: Selection; @Prop() public selection: Selection;
@Prop() public heads: { [dayid: number]: IHeadRow }; @Prop() public heads: { [dayid: number]: IHeadRow };
@ -509,11 +509,11 @@ export default class SelectionHandler extends Mixins(GlobalMixin, UserConfig) {
right: 60px; right: 60px;
padding: 8px; padding: 8px;
width: 400px; width: 400px;
max-width: calc(100vw - 30px); max-width: 100vw;
background-color: var(--color-main-background); background-color: var(--color-main-background);
box-shadow: 0 0 2px gray; box-shadow: 0 0 2px gray;
border-radius: 10px; border-radius: 10px;
opacity: 0.95; opacity: 0.97;
display: flex; display: flex;
vertical-align: middle; vertical-align: middle;
z-index: 100; z-index: 100;
@ -524,9 +524,16 @@ export default class SelectionHandler extends Mixins(GlobalMixin, UserConfig) {
padding-left: 8px; padding-left: 8px;
} }
@media (max-width: 768px) { @media (max-width: 1024px) { // sidebar is hidden below this point
top: 35px; top: 0;
right: 15px; left: 0;
right: unset;
position: fixed;
width: 100vw;
border-radius: 0px;
opacity: 1;
padding-top: 3px;
padding-bottom: 3px;
} }
} }
</style> </style>