Commit 4fdd5ea0 authored by nwindis's avatar nwindis
Browse files

refactor: save space wherever possible

parent 2e875d30
Pipeline #188267 passed with stages
in 8 minutes and 32 seconds
......@@ -14,6 +14,8 @@
:itemurls="itemurls"
:manifests="manifests"
:panels="panels"
:projectcolors="config.colors"
:standalone="config.standalone"
/>
<q-page-container class="root">
......@@ -32,19 +34,11 @@
:tree="tree"
/>
</q-page-container>
<q-footer>
<Footer
:projectcolors="config.colors"
:standalone="config.standalone"
/>
</q-footer>
</q-layout>
</template>
<script>
import { colors } from 'quasar';
import Footer from '@/components/footer.vue';
import Header from '@/components/header.vue';
import Panels from '@/mixins/panels';
......@@ -52,7 +46,6 @@ export default {
name: 'TIDO',
components: {
Header,
Footer,
},
mixins: [Panels],
data() {
......
......@@ -19,18 +19,18 @@
/>
</q-tabs>
<div>
<div class="q-px-sm">
<q-btn
class="cursor-pointer"
flat
round
size="md"
size="sm"
title="Increase Textsize"
@click="increase()"
>
<q-icon
:name="fasSearchPlus"
size="sm"
size="xs"
:color="$q.dark.isActive ? 'white' : 'accent'"
/>
</q-btn>
......@@ -39,14 +39,14 @@
class="cursor-pointer"
flat
round
size="md"
size="sm"
title="Decrease Textsize"
:color="$q.dark.isActive ? 'white' : 'accent'"
@click="decrease()"
>
<q-icon
:name="fasSearchMinus"
size="sm"
size="xs"
:color="$q.dark.isActive ? 'white' : 'accent'"
/>
</q-btn>
......
......@@ -2,14 +2,16 @@
<q-toolbar
:class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'"
>
<div
bordered
class="row justify-start items-center"
reveal
>
<Language v-if="standalone" />
<Color :projectcolors="projectcolors" />
<Softwareinfo />
<div class="footer__wrap">
<div
bordered
class="row justify-center items-center"
reveal
>
<Language v-if="standalone" />
<Color :projectcolors="projectcolors" />
<Softwareinfo />
</div>
</div>
</q-toolbar>
</template>
......@@ -35,3 +37,10 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.footer__wrap {
margin: 0 auto;
max-width: 1200px;
}
</style>
<template>
<q-header>
<q-toolbar
elevated
:class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'"
>
<Infobar
v-if="config.headers.info && manifests.length"
class="col-xs-12 q-pl-md"
:collectiontitle="collectiontitle"
:item="item"
:manifests="manifests"
/>
</q-toolbar>
<q-header :class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'">
<div class="header__wrap">
<q-toolbar>
<Infobar
v-if="config.headers.info && manifests.length"
class="col-xs-12"
:collectiontitle="collectiontitle"
:item="item"
:manifests="manifests"
/>
</q-toolbar>
<q-toolbar
elevated
:class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'"
>
<Navbar
v-if="config.headers.navigation"
:itemurls="itemurls"
:labels="config.labels"
:manifests="manifests"
/>
<div>
<q-toolbar class="q-pb-sm">
<Navbar
v-if="config.headers.navigation"
:itemurls="itemurls"
:labels="config.labels"
:manifests="manifests"
/>
<q-space />
<q-space />
<ToggleIndex
v-if="config.headers.toggle"
:panels="panels"
/>
</q-toolbar>
<ToggleIndex
v-if="config.headers.toggle"
:panels="panels"
/>
<Language v-if="standalone" />
<Color :projectcolors="projectcolors" />
<Softwareinfo />
</q-toolbar>
</div>
</div>
</q-header>
</template>
<script>
import Color from '@/components/color.vue';
import Infobar from '@/components/infobar.vue';
import Language from '@/components/language.vue';
import Navbar from '@/components/navbar.vue';
import Softwareinfo from '@/components/softwareinfo.vue';
import ToggleIndex from '@/components/togglebar/toggleIndex.vue';
export default {
name: 'Header',
components: {
Color,
Infobar,
Language,
Navbar,
Softwareinfo,
ToggleIndex,
},
props: {
......@@ -75,20 +82,18 @@ export default {
type: Array,
default: () => [],
},
projectcolors: {
type: Object,
default: () => {},
},
standalone: Boolean,
},
};
</script>
<style lang="scss" scoped>
header {
left: 0;
position: absolute;
top: 0;
}
.bar {
margin-left: auto;
margin-right: auto;
.header__wrap {
margin: 0 auto;
max-width: 1200px;
}
</style>
<template>
<div>
<h1 class="text-h4 text-bold text-uppercase">
<h1 class="text-h5 text-bold text-uppercase q-mb-none q-mt-xs">
{{ collectiontitle }}
</h1>
<h2 class="text-h5 text-bold text-uppercase q-mt-none q-mb-ml">
<h2 class="text-h6 text-bold text-uppercase q-mt-none q-mb-none">
<span>{{ manifesttitle }}</span>
<q-icon
class="q-pb-xs q-pl-sm q-pr-sm"
size="sm"
size="xs"
:color="$q.dark.isActive ? 'white' : 'accent'"
:name="fasChevronRight"
/>
......@@ -55,10 +55,3 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.title {
font-size: 28px !important;
letter-spacing: 2px;
}
</style>
<template>
<div class="item-content">
<div class="item-content panel__meta">
<!-- Collection-->
<q-list v-if="config.meta.collection.all && Object.keys(collection).length">
<q-item class="q-px-none">
<q-item class="q-pa-none">
<q-item-section class="text-h6 caps">
Collection
</q-item-section>
......@@ -26,17 +26,11 @@
</q-item-label>
</q-item-section>
</q-item>
<q-separator
v-if="showSeparator(config.meta.collection.all && (config.meta.manifest.all || config.meta.item.all))"
class="q-mt-md q-mb-sm"
inset
/>
</q-list>
<!-- Manifest-->
<q-list v-if="config.meta.manifest.all && itemcount">
<q-item class="q-px-none">
<q-item class="q-pa-none">
<q-item-section class="text-h6 caps">
{{ labels.manifest }} {{ sequenceindex + 1 }} / {{ manifests.length }}
</q-item-section>
......@@ -81,15 +75,9 @@
</div>
</q-list>
<q-separator
v-if="showSeparator(config.meta.manifest.all && config.meta.item.all)"
inset
class="q-mt-md q-mb-sm"
/>
<!-- Item-->
<q-list v-if="config.meta.item.all">
<q-item class="q-px-none">
<q-item class="q-pa-none">
<q-item-section class="text-h6 caps">
{{ labels.item }} {{ itemindex + 1 }} / {{ itemcount }}
</q-item-section>
......@@ -225,3 +213,9 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.panel__meta {
padding: 8px;
}
</style>
......@@ -4,29 +4,35 @@
unelevated
:color="$q.dark.isActive ? 'grey-1 text-grey-10' : 'accent'"
:disabled="itemindex <= 0"
size="xs"
style="font-size: 14px;"
padding="xs"
class="q-px-sm"
@click="toggleSheet(--itemindex)"
>
<q-icon
class="q-pr-sm"
:name="fasArrowLeft"
size="sm"
size="16px"
class="q-pr-xs"
/>
{{ captionprev }}
</q-btn>
<q-btn
size="md"
unelevated
:color="$q.dark.isActive ? 'grey-1 text-grey-10' : 'accent'"
:disabled="itemindex >= itemurls.length - 1"
size="xs"
style="font-size: 14px;"
padding="xs"
class="q-px-sm"
@click="toggleSheet(++itemindex)"
>
{{ captionnext }}
<q-icon
:name="fasArrowRight"
size="sm"
class="q-pl-sm"
size="16px"
class="q-pl-xs"
/>
</q-btn>
</div>
......
......@@ -10,11 +10,11 @@
:key="idx"
flat
round
size="md"
size="sm"
:color="$q.dark.isActive ? 'white' : 'accent'"
>
<q-icon
size="sm"
size="xs"
:name="btn.svg"
/>
</q-btn>
......
<template>
<div>
<q-btn-dropdown
v-if="$q.screen.width < 1100"
v-if="$q.screen.width > 10"
:dropdown-icon="dropicon"
outline
flat
:class="$q.dark.isActive ? 'bg-black' : 'bg-secondary text-black'"
label="Toggle panels"
label="Show/Hide Panels"
>
<slot />
</q-btn-dropdown>
......
<template>
<q-toolbar>
<q-toolbar-title class="text-h6 absolute-center">
{{ heading | capitalize }}
</q-toolbar-title>
</q-toolbar>
<div class="text-body1 text-weight-medium text-center q-pb-xs q-pt-xs">
{{ heading | capitalize }}
</div>
</template>
<script>
......
......@@ -31,7 +31,7 @@
-->
<script id="tido-config" type="application/json">
{
"entrypoint": "",
"entrypoint": "https://subugoe.pages.gwdg.de/emo/backend/sampledata/collection.json",
"colors": {
"primary": "",
"secondary": "",
......
......@@ -173,6 +173,5 @@ export default {
flex: 1;
flex-direction: column;
overflow: scroll;
padding: 8px;
}
</style>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment