Commit 246928a0 authored by nwindis's avatar nwindis
Browse files

feat: add project header (wip)

parent 46d99593
Pipeline #200914 passed with stages
in 4 minutes and 33 seconds
......@@ -15,6 +15,7 @@
:panels="panels"
:projectcolors="config.colors"
:standalone="config.standalone"
:projectheader="config.projectheader"
/>
<q-page-container class="root">
......
<template>
<q-header :class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'">
<ProjectHeader
v-if="config.projectheader.show"
:projectheader="projectheader"
/>
<div class="header__wrap">
<q-toolbar v-if="config.headers.info">
<Infobar
......@@ -61,6 +65,7 @@ import Language from '@/components/language.vue';
import Navbar from '@/components/navbar.vue';
import Softwareinfo from '@/components/softwareinfo.vue';
import TogglePanels from '@/components/togglebar/togglePanels.vue';
import ProjectHeader from '@/components/projectheader.vue';
export default {
name: 'Header',
......@@ -71,6 +76,7 @@ export default {
Navbar,
Softwareinfo,
TogglePanels,
ProjectHeader,
},
props: {
collectiontitle: {
......@@ -106,6 +112,10 @@ export default {
default: () => {},
},
standalone: Boolean,
projectheader: {
type: Object,
default: () => {},
},
},
};
</script>
......
<template>
<div
class="projectheader q-py-xs"
:class="$q.dark.isActive ? 'bg-white text-black' : 'bg-accent'"
>
<div class="content">
<q-breadcrumbs :class="$q.dark.isActive ? 'text-black' : 'text-white'">
<q-breadcrumbs-el
:class="$q.dark.isActive ? 'text-black' : 'text-white'"
:label="projectheader.title_back"
to="/"
:icon="fasHome"
/>
<q-breadcrumbs-el
:class="$q.dark.isActive ? 'text-black' : 'text-white'"
:label="projectheader.title_view"
:icon="fasFileAlt"
/>
</q-breadcrumbs>
</div>
</div>
</template>
<script>
import {
fasHome,
fasFileAlt,
} from '@quasar/extras/fontawesome-v5';
export default {
name: 'ProjectHeader',
props: {
projectheader: {
type: Object,
required: true,
},
},
created() {
this.fasHome = fasHome;
this.fasFileAlt = fasFileAlt;
},
};
</script>
<style lang="scss" scoped>
.content {
margin: 0 auto;
max-width: 1200px;
padding: 0 12px;
}
.projectheader {
@media (prefers-color-scheme: dark) {
background-color: var(--q-color-white);
color: var(--q-color-dark);
}
}
.q-breadcrumbs__el-icon {
font-size: 100% !important;
}
</style>
......@@ -107,7 +107,12 @@
],
"rtl": false,
"lang": "en-us",
"standalone": true
"standalone": true,
"projectheader": {
"show": true,
"title_back": "The Syriac, Arabic, and Karshuni Ahiqar Texts",
"title_view": "Edition Viewer"
}
}
</script>
......
Markdown is supported
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