updated header location
This commit is contained in:
Graham Steffaniak
parent
f9f82d7298
commit
8b6a6a1afe
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -138,9 +138,11 @@
|
|||
<div class="sizeInputWrapper">
|
||||
<p>Smaller Than:</p>
|
||||
<input
|
||||
|
||||
class="sizeInput"
|
||||
v-model="smallerThan"
|
||||
type="text"
|
||||
type="number"
|
||||
min="0"
|
||||
placeholder="number"
|
||||
/>
|
||||
<p>MB</p>
|
||||
|
|
@ -150,7 +152,7 @@
|
|||
<input
|
||||
class="sizeInput"
|
||||
v-model="largerThan"
|
||||
type="text"
|
||||
type="number"
|
||||
placeholder="number"
|
||||
/>
|
||||
<p>MB</p>
|
||||
|
|
@ -202,9 +204,13 @@
|
|||
border-color: gray;
|
||||
width: 30em;
|
||||
padding-top: 0em;
|
||||
border-bottom-right-radius: 1em;
|
||||
border-width: 2px;
|
||||
border-bottom-left-radius: 1em;
|
||||
border-color: #a7a7a7;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 1em;
|
||||
border-top: none;
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
background-color: white;
|
||||
max-height: 80vh;
|
||||
left: 50%;
|
||||
|
|
@ -213,7 +219,12 @@
|
|||
-webkit-box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#search.active #result-desktop ul li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .3em 0;
|
||||
margin-right: .3em;
|
||||
}
|
||||
#result-list.active {
|
||||
width: 65em !important;
|
||||
max-width: 85vw !important;
|
||||
|
|
@ -244,10 +255,15 @@
|
|||
display: flex;
|
||||
height: 100%;
|
||||
padding: 0em 0.75em;
|
||||
border-radius: 0.3em;
|
||||
border-style: solid;
|
||||
border-color: #ccc;
|
||||
border-radius: 1em;
|
||||
border-style: solid;
|
||||
border-color: #a7a7a7;
|
||||
border-width: 1px;
|
||||
transition: 1s ease all;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#search input {
|
||||
|
|
@ -293,7 +309,7 @@
|
|||
color: rgba(0, 0, 0, 0.6);
|
||||
height: 0;
|
||||
transition: 2s ease height, 2s ease padding;
|
||||
z-index: 1;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
body.rtl #search #result {
|
||||
|
|
@ -337,8 +353,9 @@ body.rtl #search #result ul > * {
|
|||
display: block;
|
||||
}
|
||||
#search.active #input {
|
||||
border-top-left-radius: 1em;
|
||||
border-top-right-radius: 1em;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-style: none;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
|
|
@ -432,20 +449,23 @@ body.rtl #search .boxes h3 {
|
|||
width: 5em;
|
||||
border-radius: 1em;
|
||||
padding: 1em;
|
||||
|
||||
border: solid !important;
|
||||
backdrop-filter: invert(.1);
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.sizeInputWrapper {
|
||||
border-radius: 1em;
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
border-style: groove;
|
||||
display: flex;
|
||||
background-color: rgb(245, 245, 245);
|
||||
padding: 0.25em;
|
||||
height: 3em;
|
||||
align-items: center;
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
background-color: rgb(245, 245, 245);
|
||||
padding: 0.25em;
|
||||
height: 3em;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
border: 1px solid #ccc
|
||||
}
|
||||
|
||||
.helpButton {
|
||||
|
|
@ -518,13 +538,14 @@ export default {
|
|||
watch: {
|
||||
active(active) {
|
||||
const resultList = document.getElementById("result-list");
|
||||
if (active) {
|
||||
setTimeout(() => {
|
||||
resultList.classList.add("active");
|
||||
}, 100);
|
||||
return true;
|
||||
if (!active) {
|
||||
resultList.classList.remove("active");
|
||||
return
|
||||
}
|
||||
resultList.classList.remove("active");
|
||||
setTimeout(() => {
|
||||
resultList.classList.add("active");
|
||||
}, 100);
|
||||
|
||||
},
|
||||
show(val, old) {
|
||||
this.active = val === "search";
|
||||
|
|
@ -683,10 +704,10 @@ export default {
|
|||
} catch (error) {
|
||||
this.$showError(error);
|
||||
}
|
||||
if (this.results.length == 0 && this.ongoing == false) {
|
||||
this.ongoing = false;
|
||||
if (this.results.length == 0) {
|
||||
this.noneMessage = "No results found in indexed search.";
|
||||
}
|
||||
this.ongoing = false;
|
||||
},
|
||||
toggleHelp() {
|
||||
this.showHelp = !this.showHelp;
|
||||
|
|
|
|||
|
|
@ -4,8 +4,19 @@ body {
|
|||
padding-top: 4em;
|
||||
background-color: #fafafa;
|
||||
color: #333333;
|
||||
overflow:auto;
|
||||
overflow:initial;
|
||||
|
||||
}
|
||||
body::-webkit-scrollbar {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* Hiding scrollbar for IE, Edge and Firefox */
|
||||
body {
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
}
|
||||
body.rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
|
@ -63,7 +74,7 @@ nav {
|
|||
top: 0;
|
||||
padding-top: 4em;
|
||||
left: -19em;
|
||||
z-index: 10000;
|
||||
z-index: 4;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -110,7 +121,13 @@ nav .action > * {
|
|||
|
||||
/* Main Content */
|
||||
main {
|
||||
margin: 1em;
|
||||
position: fixed;
|
||||
padding: 1em;
|
||||
padding-top: 4em;
|
||||
overflow: scroll;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
|
|
|
|||
|
|
@ -302,7 +302,7 @@ body.rtl .card .card-title>*:first-child {
|
|||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
z-index: 3;
|
||||
animation: .3s show ease-in;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
/* Header */
|
||||
header {
|
||||
z-index: 1000;
|
||||
z-index: 5;
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -52,19 +52,16 @@
|
|||
body.rtl .dashboard .row {
|
||||
margin-right: unset;
|
||||
}
|
||||
|
||||
#search.active {
|
||||
display: block;
|
||||
#search {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
#search.active {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
#search.active #input {
|
||||
|
|
@ -79,7 +76,8 @@
|
|||
}
|
||||
|
||||
#search.active #result {
|
||||
height: 100vh
|
||||
height: 100vh;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#search.active #result>p>i {
|
||||
|
|
@ -102,7 +100,12 @@
|
|||
}
|
||||
|
||||
#result-list {
|
||||
padding-top: 3em;
|
||||
width:100%;
|
||||
left: 0;
|
||||
top: 4em;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
overflow: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@
|
|||
<div v-if="progress" class="progress">
|
||||
<div v-bind:style="{ width: this.progress + '%' }"></div>
|
||||
</div>
|
||||
<header-bar showMenu showLogo>
|
||||
<search />
|
||||
<template #actions>
|
||||
<action icon="grid_view" :label="$t('buttons.switchView')" @action="switchView" />
|
||||
</template>
|
||||
</header-bar>
|
||||
<sidebar></sidebar>
|
||||
<main>
|
||||
<router-view></router-view>
|
||||
|
|
@ -20,10 +26,16 @@ import Prompts from "@/components/prompts/Prompts";
|
|||
import Shell from "@/components/Shell";
|
||||
import UploadFiles from "../components/prompts/UploadFiles";
|
||||
import { enableExec } from "@/utils/constants";
|
||||
import HeaderBar from "@/components/header/HeaderBar";
|
||||
import Search from "@/components/Search";
|
||||
import Action from "@/components/header/Action";
|
||||
|
||||
export default {
|
||||
name: "layout",
|
||||
components: {
|
||||
Action,
|
||||
HeaderBar,
|
||||
Search,
|
||||
Sidebar,
|
||||
Prompts,
|
||||
Shell,
|
||||
|
|
@ -42,5 +54,26 @@ export default {
|
|||
this.$store.commit("closeHovers");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
switchView: async function () {
|
||||
this.$store.commit("closeHovers");
|
||||
const modes = {
|
||||
list: "mosaic",
|
||||
mosaic: "mosaic gallery",
|
||||
"mosaic gallery": "list",
|
||||
};
|
||||
|
||||
const data = {
|
||||
id: this.user.id,
|
||||
viewMode: modes[this.user.viewMode] || "list",
|
||||
};
|
||||
//users.update(data, ["viewMode"]).catch(this.$showError);
|
||||
this.$store.commit("updateUser", data);
|
||||
|
||||
//this.setItemWeight();
|
||||
//this.fillWindow();
|
||||
},
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<header-bar showMenu showLogo>
|
||||
<search />
|
||||
<template #actions>
|
||||
<action :icon="viewIcon" :label="$t('buttons.switchView')" @action="switchView" />
|
||||
</template>
|
||||
</header-bar>
|
||||
|
||||
<div id="file-selection">
|
||||
<span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
|
||||
<div v-if="selectedCount > 0" id="file-selection">
|
||||
<span >{{ selectedCount }} selected</span>
|
||||
<template>
|
||||
<action
|
||||
v-if="headerButtons.select"
|
||||
|
|
@ -217,17 +210,13 @@ import * as upload from "@/utils/upload";
|
|||
import css from "@/utils/css";
|
||||
import throttle from "lodash.throttle";
|
||||
|
||||
import HeaderBar from "@/components/header/HeaderBar";
|
||||
import Action from "@/components/header/Action";
|
||||
import Search from "@/components/Search";
|
||||
import Item from "@/components/files/ListingItem";
|
||||
|
||||
export default {
|
||||
name: "listing",
|
||||
components: {
|
||||
HeaderBar,
|
||||
Action,
|
||||
Search,
|
||||
Item,
|
||||
},
|
||||
data: function () {
|
||||
|
|
@ -740,27 +729,7 @@ export default {
|
|||
},
|
||||
});
|
||||
},
|
||||
switchView: async function () {
|
||||
this.$store.commit("closeHovers");
|
||||
const modes = {
|
||||
list: "mosaic",
|
||||
mosaic: "mosaic gallery",
|
||||
"mosaic gallery": "list",
|
||||
};
|
||||
|
||||
const data = {
|
||||
id: this.user.id,
|
||||
viewMode: modes[this.user.viewMode] || "list",
|
||||
};
|
||||
|
||||
users.update(data, ["viewMode"]).catch(this.$showError);
|
||||
|
||||
// Await ensures correct value for setItemWeight()
|
||||
await this.$store.commit("updateUser", data);
|
||||
|
||||
this.setItemWeight();
|
||||
this.fillWindow();
|
||||
},
|
||||
upload: function () {
|
||||
if (
|
||||
typeof window.DataTransferItem !== "undefined" &&
|
||||
|
|
|
|||
Loading…
Reference in New Issue