Skip to content

GitLab

Commit 2b2137b0 authored by nwindis's avatar nwindis ☕
Browse files

REFACTOR simplify things again 

#15
parent 7abb2235
Pipeline #153216 failed with stages
in 2 minutes and 19 seconds
Hide whitespace changes
Inline Side-by-side
src/components/footer.vue
View file @ 2b2137b0
......@@ -3,6 +3,7 @@
bordered
reveal
class="row justify-start items-center"
:class="$q.dark.isActive ? 'bg-dark' : 'bg-primary'"
>
<Language v-if="standalone" />
<Softwareinfo />
......@@ -24,14 +25,3 @@ export default {
},
};
</script>
<style lang="scss" scoped>
footer {
background-color: $color-footer__background;
color: $color-footer__font-color;
@media (prefers-color-scheme: dark) {
background-color: $color-footer__background--dark;
color: $color-footer__font-color--dark;
}
}
</style>
src/components/header.vue
View file @ 2b2137b0
<template>
<q-header elevated>
<q-header
elevated
:class="$q.dark.isActive ? 'bg-dark' : 'bg-primary'"
>
<div class="bar row justify-between items-center">
<Infobar v-if="config.headers.info && manifests.length"
class="col-xs-12 q-pl-md"
......@@ -65,15 +68,9 @@ export default {
<style lang="scss" scoped>
header {
background-color: $color-header__background;
color: $color-header__font-color;
left: 0;
position: absolute;
top: 0;
@media (prefers-color-scheme: dark) {
background-color: $color-header__background--dark;
color: $color-header__font-color--dark;
}
}
.bar {
......
src/components/infobar.vue
View file @ 2b2137b0
<template>
<div class="info-bar">
<h1 class="info-bar__title text-h5 text-bold text-uppercase">
<div>
<h1 class="text-h5 text-bold text-uppercase">
<span>{{ cut(collectiontitle) }}</span>
<!-- FIXME: Size is best set with Quasar'xs-xl -->
<q-icon class="info-bar__icon q-pb-sm" size="40px" :name="fasChevronRight" />
<q-icon
class="q-pb-xs q-ml-xs"
size="sm"
:name="fasChevronRight"
/>
<span>{{ cut(manifesttitle) }}</span>
<!-- FIXME: Size is best set with Quasar'xs-xl -->
<q-icon class="info-bar__icon q-pb-sm" size="40px" :name="fasChevronRight" />
<q-icon
class="q-pb-xs q-ml-xs"
size="sm"
:name="fasChevronRight"
/>
<span>{{ itemlabel }}</span>
</h1>
</div>
......@@ -47,26 +55,3 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.info-bar {
background-color: $color-info-bar__background;
@media (prefers-color-scheme: dark) {
background-color: $color-info-bar__background--dark;
}
}
.info-bar__title {
color: $color-info-bar__title;
@media (prefers-color-scheme: dark) {
color: $color-info-bar__title--dark;
}
}
.info-bar__icon {
fill: $color-info-bar__icon;
@media (prefers-color-scheme: dark) {
fill: $color-info-bar__icon--dark;
}
}
</style>
src/components/navbar.vue
View file @ 2b2137b0
<template>
<div class="nav-bar">
<div>
<q-btn
class="nav-bar__button q-mb-md"
class="q-mb-md"
unelevated
:color="$q.dark.isActive ? 'grey-8' : 'accent'"
:disabled="itemindex <= 0"
@click="toggleSheet(--itemindex)"
>
......@@ -10,15 +11,15 @@
<q-icon
class="q-pr-sm"
:name="fasArrowLeft"
size="24px"
/>
{{ captionprev }}
</q-btn>
<q-btn
class="nav-bar__button q-mb-md manual-focus"
class="q-mb-md"
size="md"
unelevated
manual-focus
:color="$q.dark.isActive ? 'grey-8' : 'accent'"
:disabled="itemindex >= itemurls.length - 1"
@click="toggleSheet(++itemindex)"
>
......@@ -26,7 +27,6 @@
<!-- FIXME: Size is best set with Quasar'xs-xl -->
<q-icon
:name="fasArrowRight"
size="24px"
class="q-pl-sm"
/>
</q-btn>
......@@ -55,54 +55,6 @@ button:first-of-type {
}
}
.nav-bar {
background-color: $color-nav-bar__background;
color: $color-nav-bar__font;
@media (prefers-color-scheme: dark) {
background-color: $color-nav-bar__background--dark;
color: $color-nav-bar__font--dark;
}
}
.nav-bar__button {
background-color: $color-nav-bar__button__background;
color: $color-nav-bar__button__font;
@media (prefers-color-scheme: dark) {
background-color: $color-nav-bar__button__background--dark;
color: $color-nav-bar__button__font--dark;
}
svg {
fill: $color-nav-bar__icon;
@media (prefers-color-scheme: dark) {
fill: $color-nav-bar__icon--dark;
}
}
&:active,
&:hover,
&:focus {
svg {
fill: $color-nav-bar__icon--active;
@media (prefers-color-scheme: dark) {
fill: $color-nav-bar__icon--active-dark;
}
}
background-color: $color-nav-bar__button__background--active;
@media (prefers-color-scheme: dark) {
background-color: $color-nav-bar__button__background--active-dark;
color: $color-nav-bar__button__font--active-dark;
}
}
&:disabled {
background-color: $color-nav-bar__button__background--disabled;
@media (prefers-color-scheme: dark) {
background-color: $color-nav-bar__button__background--disabled-dark;
}
}
}
.q-input {
width: 100%;
@media (min-width: 600px) {
......
src/components/softwareinfo.vue
View file @ 2b2137b0
<template>
<div class="softwareinfo col-xs-auto">
<div class="col-xs-auto">
<q-btn
flat
label=""
......@@ -57,8 +57,13 @@
</q-btn>
</q-card-section>
<q-card-actions align="right" class="text-primary">
<q-btn flat label="Close" v-close-popup />
<q-card-actions align="right">
<q-btn
:class="$q.dark.isActive ? 'text-white' : 'text-black'"
flat
label="Close"
v-close-popup
/>
</q-card-actions>
</q-card>
</q-dialog>
......
src/components/togglebar/panelsposition.vue
View file @ 2b2137b0
<template>
<section class="panel-position">
<q-btn
class="panel-position__button"
class="q-mb-md"
:icon="panelicon"
size="md"
@click="status = true"
label="Customize"
flat
outline
/>
<q-dialog
......@@ -15,10 +16,7 @@
transition-hide="scale"
>
<!-- FIXME: remove inline style -->
<q-card
class="panel-position__modal"
style="width: 600px;"
>
<q-card style="width: 600px;">
<q-card-section>
<div class="text-h6 text-uppercase">Customize Panels</div>
</q-card-section>
......@@ -62,28 +60,6 @@ export default {
</script>
<style lang="scss" scoped>
.panel-position__button {
background-color: $color-panel-position__button__background;
color: $color-panel-position__button__font;
height: 75%;
@media (prefers-color-scheme: dark) {
background-color: $color-panel-position__button__background--dark;
color: $color-panel-position__button__font--dark;
}
&:active,
&:hover,
&:focus {
background-color: $color-panel-position__button__background--active;
color: $color-panel-position__button__font--active;
}
}
.panel-position__modal {
background-color: $color-panel-position__modal__background;
color: $color-panel-position__modal__font;
}
.panel-position {
display: flex;
justify-content: center;
......
src/components/togglebar/toggleFilter.vue
View file @ 2b2137b0
<template>
<!-- FIXME: semantically this is not a section -->
<section class="filter-buttons">
<q-btn-dropdown v-if="$q.screen.width < 1100"
class="toggle-filter__button q-mb-md"
<q-btn-dropdown
v-if="$q.screen.width < 1100"
outline
:color="$q.dark.isActive ? 'bg-black' : 'grey-12'"
class="q-mb-md q-mr-md"
label="Toggle Panels"
>
<slot />
</q-btn-dropdown>
<div class="q-mb-md toggle-filter__button without-dropdown" v-else>
<div
class="q-mb-md without-dropdown q-mr-md"
v-else
>
<slot />
</div>
</section>
......@@ -20,20 +26,4 @@
display: flex;
justify-content: center;
}
.toggle-filter__button {
background-color: $color-toggle-filter__button__background;
color: $color-toggle-filter__button__font;
@media (prefers-color-scheme: dark) {
background-color: $color-toggle-filter__button__background--dark;
color: $color-toggle-filter__button__font--dark;
}
&:active,
&:hover,
&:focus {
background-color: $color-toggle-filter__button__background--active;
color: $color-toggle-filter__button__font--active;
}
}
</style>
src/components/togglebar/toggleIndex.vue
View file @ 2b2137b0
......@@ -3,8 +3,9 @@
<ToggleFilter>
<q-list class="toggle-list">
<q-item v-for="(p, i) in panels" :key="`toggle${i}`"
:class="$q.dark.isActive ? 'bg-black' : 'bg-grey-2'"
:class="$q.dark.isActive ? 'bg-black' : 'bg-grey-9 text-white'"
clickable
flat
v-close-popup
:title="handleToggleTitle(i)"
@click="() => handleStatusPanel(i)"
......@@ -12,15 +13,15 @@
<q-icon class="q-pr-xs" size="xs" :name="renderCheckIcon(i)" />
{{ p.panel_label.toUpperCase() }}
</q-item>
<q-item
:class="$q.dark.isActive ? 'bg-black' : 'bg-grey-5'"
:class="$q.dark.isActive ? 'bg-black' : 'bg-grey-8 text-white'"
clickable
flat
title="Reset panels to default view"
v-close-popup
@click="()=> handleStatusPanel(-1, true)"
>
<q-icon class="q-pr-xs text-capitalize" size="xs" :name="fasUndo" />
<q-icon class="q-pr-xs" size="xs" :name="fasUndo" />
{{ 'RESET' }}
</q-item>
</q-list>
......@@ -92,4 +93,9 @@ button {
button:last-of-type {
margin-right: 0;
}
.q-item {
min-height: 0;
}
</style>
src/components/tree.vue
View file @ 2b2137b0
......@@ -81,14 +81,10 @@ export default {
.q-tree__node-collapsible .q-tree__children {
> .q-tree__node--parent {
> .q-tree__node-header {
background-color: $light;
left: 0;
position: sticky;
top: 0;
z-index: 999;
@media (prefers-color-scheme: dark) {
background-color: $grey-9;
}
}
}
}
......
src/components/util/panelboxes.vue
View file @ 2b2137b0
......@@ -42,8 +42,9 @@
<div class="actions">
<q-btn
class="only-bedrag panel-boxes__handle"
class="only-bedrag panel-boxes__handle bg-accent text-white"
round
flat
size="xs"
title="Drag and drop the panels to reorder."
:icon="fasArrowsAlt"
......@@ -139,27 +140,6 @@ export default {
</script>
<style lang="scss" scoped>
.panel-boxes__handle {
background-color: $color-panel-boxes__handle__background;
color: $color-panel-boxes__handle__font;
@media (prefers-color-scheme: dark) {
background-color: $color-panel-boxes__handle__background--dark;
color: $color-panel-boxes__handle__font--dark;
}
&:active,
&:hover,
&:focus {
background-color: $color-panel-boxes__handle__background--active;
color: $color-panel-boxes__handle__font--active;
}
svg {
fill: lime;
}
}
.panels {
> * {
column-gap: 20px;
......@@ -172,7 +152,7 @@ export default {
position: relative;
> * {
background-color: $light;
// background-color: $light;
height: 300px;
padding: 15px 10px;
}
......@@ -183,7 +163,7 @@ export default {
}
.components-list > * {
background-color: $light;
// background-color: $light;
border-radius: 5px;
cursor: move;
margin: 10px 0;
......
src/css/global.scss
View file @ 2b2137b0
body {
// FIXME: don't use !important
background-color: $color-body__background !important;
// background-color: $color-body__background !important;
height: 100vh;
overflow-y: hidden;
@media (max-width: 1023px) {
overflow-y: auto !important;
}
@media (prefers-color-scheme: dark) {
// FIXME: don't use !important
background-color: $color-body__background--dark !important;
}
// @media (prefers-color-scheme: dark) {
// // FIXME: don't use !important
// background-color: $color-body__background--dark !important;
// }
}
.scroll-panel {
position: relative;
.sticky {
background: $light;
// background: $light;
display: flex;
justify-content: flex-start;
left: 0;
......
src/css/quasar.variables.scss
View file @ 2b2137b0
......@@ -12,88 +12,7 @@
// to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website.
$light: #fff;
$dark: #1d1d1d;
$black: #000;
$primary: #1a3771;
// BODY
$color-body__background: $light !default;
$color-body__background--dark: $dark !default;
// HEADER
$color-header__background: $light !default;
$color-header__background--dark: $dark !default;
$color-header__font-color: $dark !default;
$color-header__font-color--dark: $light !default;
// INFO BAR
$color-info-bar__background: $light !default;
$color-info-bar__background--dark: $dark !default;
$color-info-bar__title: $dark !default;
$color-info-bar__title--dark: $light !default;
$color-info-bar__icon: $dark !default;
$color-info-bar__icon--dark: $light !default;
// NAV BAR
$color-nav-bar__background: $light;
$color-nav-bar__font: $dark;
$color-nav-bar__background--dark: $dark;
$color-nav-bar__font--dark: $dark;
$color-nav-bar__button__font: $light !default;
$color-nav-bar__button__font--active: $light !default;
$color-nav-bar__button__font--disabled: $light !default;
$color-nav-bar__button__font--dark: $light !default;
$color-nav-bar__button__font--active-dark: $light !default;
$color-nav-bar__button__font--disabled-dark: $light !default;
$color-nav-bar__button__background: $dark !default;
$color-nav-bar__button__background--active: $primary !default;
$color-nav-bar__button__background--disabled: $dark !default;
$color-nav-bar__button__background--dark: $black !default;
$color-nav-bar__button__background--active-dark: $primary !default;
$color-nav-bar__button__background--disabled-dark: $dark !default;
$color-nav-bar__icon: $light !default;
$color-nav-bar__icon--active: $light !default;
$color-nav-bar__icon--disabled: $light !default;
$color-nav-bar__icon--dark: $light !default;
$color-nav-bar__icon--active-dark: $light !default;
$color-nav-bar__icon--disabled-dark: $light !default;
// TOGGLE FILTER
$color-toggle-filter__button__background: $dark;
$color-toggle-filter__button__background--active: $primary;
$color-toggle-filter__button__background--dark: $black;
$color-toggle-filter__button__font: $light;
$color-toggle-filter__button__font--active: $light;
$color-toggle-filter__button__font--dark: $light;
// PANEL POSITION
$color-panel-position__button__background: $dark;
$color-panel-position__button__background--active: $primary;
$color-panel-position__button__background--dark: $black;
$color-panel-position__button__background--active-dark: $dark;
$color-panel-position__button__font: $light;
$color-panel-position__button__font--active: $light;
$color-panel-position__button__font--dark: $light;
$color-panel-position__button__font--active-dark: $light;
$color-panel-position__modal__background: $light;
$color-panel-position__modal__font: $dark;
// PANEL BOXES
$color-panel-boxes__handle__background: $dark;
$color-panel-boxes__handle__background--active: $primary;
$color-panel-boxes__handle__background--dark: $light;
$color-panel-boxes__handle__font: $light;
$color-panel-boxes__handle__font--active: $light;
$color-panel-boxes__handle__font--dark: $dark;
// FOOTER
$color-footer__background: $light !default;
$color-footer__background--dark: $dark !default;
$color-footer__font-color: $light !default;
$color-footer__font-color--dark: $dark !default;
$accent: #ff8717;
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