updated styling
This commit is contained in:
Graham Steffaniak
parent
e8739b5dd1
commit
421b1c9ef6
|
|
@ -28,6 +28,13 @@ header {
|
|||
background: var(--surfacePrimary);
|
||||
}
|
||||
|
||||
@supports (backdrop-filter: none) {
|
||||
header {
|
||||
background: transparent;
|
||||
backdrop-filter: blur(16px) invert(0.1);
|
||||
}
|
||||
}
|
||||
|
||||
#search #input {
|
||||
background: var(--surfaceSecondary);
|
||||
border-color: var(--surfacePrimary);
|
||||
|
|
@ -185,6 +192,9 @@ table th {
|
|||
#editor-container .bar {
|
||||
background: var(--surfacePrimary);
|
||||
}
|
||||
nav {
|
||||
background: var(--surfaceSecondary) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 736px) {
|
||||
#file-selection {
|
||||
|
|
@ -193,9 +203,6 @@ table th {
|
|||
#file-selection span {
|
||||
color: var(--textPrimary) !important;
|
||||
}
|
||||
nav {
|
||||
background: var(--surfaceSecondary) !important;
|
||||
}
|
||||
#dropdown {
|
||||
background: var(--surfaceSecondary) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,35 @@
|
|||
<template>
|
||||
<nav :class="{ active }">
|
||||
<template v-if="isLogged">
|
||||
<!--
|
||||
i want this here eventually
|
||||
<action
|
||||
v-if="headerButtons.download"
|
||||
icon="file_download"
|
||||
:label="$t('buttons.download')"
|
||||
@action="download"
|
||||
:counter="selectedCount"
|
||||
/>
|
||||
<action
|
||||
v-if="headerButtons.upload"
|
||||
icon="file_upload"
|
||||
id="upload-button"
|
||||
:label="$t('buttons.upload')"
|
||||
@action="upload"
|
||||
/>
|
||||
<action
|
||||
v-if="headerButtons.shell"
|
||||
icon="code"
|
||||
:label="$t('buttons.shell')"
|
||||
@action="$store.commit('toggleShell')"
|
||||
/>
|
||||
<action
|
||||
:icon="viewIcon"
|
||||
:label="$t('buttons.switchView')"
|
||||
@action="switchView"
|
||||
/>
|
||||
-->
|
||||
|
||||
<button
|
||||
class="action"
|
||||
@click="toRoot"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
<template>
|
||||
<header>
|
||||
<img v-if="showLogo !== undefined" :src="logoURL" />
|
||||
<action
|
||||
v-if="showMenu !== undefined"
|
||||
class="menu-button"
|
||||
icon="menu"
|
||||
:label="$t('buttons.toggleSidebar')"
|
||||
@action="openSidebar()"
|
||||
@action="toggleSidebar()"
|
||||
/>
|
||||
|
||||
<slot />
|
||||
|
|
@ -15,25 +13,11 @@
|
|||
<slot name="actions" />
|
||||
</div>
|
||||
|
||||
<action
|
||||
v-if="this.$slots.actions"
|
||||
id="more"
|
||||
icon="more_vert"
|
||||
:label="$t('buttons.more')"
|
||||
@action="$store.commit('showHover', 'more')"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="overlay"
|
||||
v-show="this.$store.state.show == 'more'"
|
||||
@click="$store.commit('closeHovers')"
|
||||
/>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { logoURL } from "@/utils/constants";
|
||||
|
||||
import Action from "@/components/header/Action";
|
||||
|
||||
export default {
|
||||
|
|
@ -48,8 +32,12 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
openSidebar() {
|
||||
this.$store.commit("showHover", "sidebar");
|
||||
toggleSidebar() {
|
||||
if ( this.$store.state.show == "sidebar" ) {
|
||||
this.$store.commit("closeHovers");
|
||||
} else {
|
||||
this.$store.commit("showHover", "sidebar");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<component ref="currentComponent" :is="currentComponent"></component>
|
||||
<div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -104,11 +103,6 @@ export default {
|
|||
|
||||
return (matched && this.show) || null;
|
||||
},
|
||||
showOverlay: function () {
|
||||
return (
|
||||
this.show !== null && this.show !== "search" && this.show !== "more"
|
||||
);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
resetPrompts() {
|
||||
|
|
|
|||
|
|
@ -77,7 +77,28 @@ nav .action {
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
nav {
|
||||
z-index: 99999;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
width: 16em;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
transition: .1s ease left;
|
||||
left: -17em;
|
||||
}
|
||||
|
||||
body.rtl nav {
|
||||
left: unset;
|
||||
right: -17em;
|
||||
}
|
||||
nav.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
body.rtl nav.active {
|
||||
left: unset;
|
||||
right: 0;
|
||||
}
|
||||
body.rtl .action {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
|
|
@ -92,9 +113,7 @@ nav .action > * {
|
|||
}
|
||||
|
||||
main {
|
||||
min-height: 1em;
|
||||
margin: 0 1em 1em auto;
|
||||
width: calc(100% - 19em);
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
|
|
|
|||
|
|
@ -311,17 +311,6 @@ body.rtl .card .card-title>*:first-child {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
animation: .1s show forwards;
|
||||
}
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * *
|
||||
* PROMPT - MOVE *
|
||||
|
|
|
|||
|
|
@ -3,17 +3,23 @@ header {
|
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.075);
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
position: fixed;
|
||||
justify-content: space-between;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 4em;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
padding: 0.5em 0.5em 0.5em 1em;
|
||||
padding: 0.5em;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(6px);
|
||||
background-color: white;
|
||||
}
|
||||
@supports (backdrop-filter: none) {
|
||||
header {
|
||||
background-color: transparent;
|
||||
backdrop-filter: blur(16px) invert(0.1);
|
||||
}
|
||||
}
|
||||
|
||||
header > * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
|
@ -27,11 +33,6 @@ header title {
|
|||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
header .overlay {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
header a,
|
||||
header a:hover {
|
||||
color: inherit;
|
||||
|
|
@ -55,20 +56,17 @@ header>div div {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
header .search-button,
|
||||
header .menu-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#more {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#search {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: 25em;
|
||||
position: absolute;
|
||||
height: 3em;
|
||||
width: 50%;
|
||||
max-width: 50em;
|
||||
left: 50%;
|
||||
transform: translate(-50%,0%);
|
||||
}
|
||||
|
||||
#search.active {
|
||||
|
|
|
|||
|
|
@ -1,19 +1,10 @@
|
|||
@media (max-width: 1024px) {
|
||||
nav {
|
||||
width: 10em
|
||||
}
|
||||
/* Mobile Only fix div hidden by bottom navigation bar of mobile browser when using height: 100vh */
|
||||
#previewer .preview {
|
||||
height: calc(100% - 4em) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
main {
|
||||
width: calc(100% - 13em)
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 736px) {
|
||||
body {
|
||||
padding-bottom: 5em;
|
||||
|
|
@ -27,23 +18,6 @@
|
|||
#more {
|
||||
display: inherit
|
||||
}
|
||||
header .overlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
#dropdown {
|
||||
position: fixed;
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
display: block;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
transform: scale(0);
|
||||
transition: .1s ease-in-out transform;
|
||||
transform-origin: top right;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
body.rtl #dropdown {
|
||||
right: unset;
|
||||
|
|
@ -51,25 +25,6 @@
|
|||
transform-origin: top left;
|
||||
}
|
||||
|
||||
#dropdown > div {
|
||||
display: block;
|
||||
}
|
||||
#dropdown.active {
|
||||
transform: scale(1);
|
||||
}
|
||||
#dropdown .action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
#dropdown .action span:not(.counter) {
|
||||
display: inline-block;
|
||||
padding: .4em;
|
||||
}
|
||||
#dropdown .counter {
|
||||
left: 2.25em;
|
||||
}
|
||||
#file-selection {
|
||||
position: fixed;
|
||||
bottom: 1em;
|
||||
|
|
@ -96,34 +51,7 @@
|
|||
#file-selection .action span {
|
||||
display: none;
|
||||
}
|
||||
nav {
|
||||
top: 0;
|
||||
z-index: 99999;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
width: 16em;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
transition: .1s ease left;
|
||||
left: -17em;
|
||||
}
|
||||
|
||||
body.rtl nav {
|
||||
left: unset;
|
||||
right: -17em;
|
||||
}
|
||||
nav.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
body.rtl nav.active {
|
||||
left: unset;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
header .search-button,
|
||||
header .menu-button {
|
||||
display: inherit;
|
||||
}
|
||||
header img {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -142,18 +70,9 @@
|
|||
body.rtl #nav .wrapper {
|
||||
margin-right: unset;
|
||||
}
|
||||
|
||||
body.rtl .dashboard .row {
|
||||
margin-right: unset;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 0 1em;
|
||||
width: calc(100% - 2em);
|
||||
}
|
||||
#search {
|
||||
display: none;
|
||||
}
|
||||
#search.active {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<header-bar showMenu showLogo>
|
||||
<search /> <title />
|
||||
<action
|
||||
class="search-button"
|
||||
icon="search"
|
||||
:label="$t('buttons.search')"
|
||||
@action="openSearch()"
|
||||
/>
|
||||
|
||||
<search />
|
||||
<template #actions>
|
||||
<template v-if="!isMobile">
|
||||
<template >
|
||||
<action
|
||||
v-if="headerButtons.share"
|
||||
icon="share"
|
||||
|
|
@ -44,39 +37,23 @@
|
|||
:label="$t('buttons.delete')"
|
||||
show="delete"
|
||||
/>
|
||||
<action
|
||||
v-if="headerButtons.info"
|
||||
icon="info"
|
||||
:label="$t('buttons.info')"
|
||||
show="info" />
|
||||
<action
|
||||
v-if="headerButtons.select"
|
||||
icon="check_circle"
|
||||
:label="$t('buttons.selectMultiple')"
|
||||
@action="toggleMultipleSelection"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<action
|
||||
v-if="headerButtons.shell"
|
||||
icon="code"
|
||||
:label="$t('buttons.shell')"
|
||||
@action="$store.commit('toggleShell')"
|
||||
/>
|
||||
<action
|
||||
:icon="viewIcon"
|
||||
:label="$t('buttons.switchView')"
|
||||
@action="switchView"
|
||||
/>
|
||||
<action
|
||||
v-if="headerButtons.download"
|
||||
icon="file_download"
|
||||
:label="$t('buttons.download')"
|
||||
@action="download"
|
||||
:counter="selectedCount"
|
||||
/>
|
||||
<action
|
||||
v-if="headerButtons.upload"
|
||||
icon="file_upload"
|
||||
id="upload-button"
|
||||
:label="$t('buttons.upload')"
|
||||
@action="upload"
|
||||
/>
|
||||
<action icon="info" :label="$t('buttons.info')" show="info" />
|
||||
<action
|
||||
icon="check_circle"
|
||||
:label="$t('buttons.selectMultiple')"
|
||||
@action="toggleMultipleSelection"
|
||||
/>
|
||||
</template>
|
||||
</header-bar>
|
||||
|
||||
|
|
@ -374,6 +351,8 @@ export default {
|
|||
},
|
||||
headerButtons() {
|
||||
return {
|
||||
info: this.selectedCount > 0,
|
||||
select: this.selectedCount > 0,
|
||||
upload: this.user.perm.create,
|
||||
download: this.user.perm.download,
|
||||
shell: this.user.perm.execute && enableExec,
|
||||
|
|
|
|||
Loading…
Reference in New Issue