Commit 17cd873d authored by nwindis's avatar nwindis
Browse files

Merge branch 'bugfix/#73-fixme-code-comments' into feature/#15-color-schema

* bugfix/#73-fixme-code-comments:
  FIX toggle filter drop down icon
  MINOR formatting
  ADD fixme info
  MINOR formatting
  FIX things in panelposition
  FIX things in panelboxes
parents d518a95d 059b8c29
......@@ -29,9 +29,15 @@
</div>
<!-- FIXME: remove inline style -->
<!-- FIXME: Current implementations in most browsers will remove from the accessibility tree any element with a display value of contents (but descendants will remain). This will cause the element itself to no longer be announced by screen reading technology. https://developer.mozilla.org/en-US/docs/Web/CSS/display#Accessibility_concerns -->
<div class="row" style="display: contents;">
<!-- FIXME: remove inline style -->
<div class="scroll-panel" :id="nodeid" :style="`font-size: ${fontsize}px`" v-html="content" />
<div
class="scroll-panel"
:id="nodeid"
:style="`font-size: ${fontsize}px`"
v-html="content"
/>
</div>
</div>
</template>
......
<template>
<section class="panel-position">
<section class="panel__position">
<q-btn
class="q-mb-md"
class="panel__button"
:icon="panelicon"
size="md"
@click="status = true"
......@@ -9,9 +9,15 @@
outline
/>
<q-dialog v-model="status" transition-show="scale" transition-hide="scale">
<!-- FIXME: remove inline style -->
<q-card style="width: 600px;">
<q-dialog
v-model="status"
transition-show="scale"
transition-hide="scale"
>
<q-card
:class="$q.dark.isActive ? 'bg-black' : 'bg-white text-black'"
class="panel__card"
>
<q-card-section>
<div class="text-h6 text-uppercase">Customize Panels</div>
</q-card-section>
......@@ -55,8 +61,16 @@ export default {
</script>
<style lang="scss" scoped>
.panel-position {
.panel__position {
display: flex;
justify-content: center;
}
.panel__card {
width: 600px;
}
.panel__button {
height: 75%;
}
</style>
......@@ -3,11 +3,12 @@
<section class="filter-buttons">
<q-btn-dropdown
v-if="$q.screen.width < 1100"
:dropdown-icon="dropicon"
flat
split
:class="$q.dark.isActive ? 'bg-black' : 'bg-grey-9'"
class="q-mb-md q-mr-md"
label="Toggle Panels"
label="Toggle panels ..."
>
<slot />
</q-btn-dropdown>
......@@ -21,6 +22,18 @@
</section>
</template>
<script>
import { fasCaretDown } from '@quasar/extras/fontawesome-v5';
export default {
computed: {
dropicon() {
return fasCaretDown;
},
},
};
</script>
<style lang="scss" scoped>
.filter-buttons {
align-items: center;
......
<template>
<section>
<div class="panels">
<div class="panels__wrap">
<Panelsdraggable
handle=".only-bedrag"
v-model="panels"
@change="$root.$emit('panels-position', panels)"
>
<div class="p-c" v-for="(panel, idx) in panels" v-show="panel.show" :key="`pa${idx}`">
<div class="panels" v-for="(panel, idx) in panels" v-show="panel.show" :key="`pa${idx}`">
<div
class="effected"
@dragleave.prevent="dragHighlightComponent($event, false)"
......@@ -16,8 +16,7 @@
:class="$q.dark.isActive ? 'bg-grey-8 text-white' : 'bg-grey-1 text-black'"
>
<div>
<!-- FIXME: use a div or alike, but not HTML header tag -->
<header>
<div class="panel__header">
<input
class="panel-textinput text-uppercase"
type="text"
......@@ -25,7 +24,7 @@
:value="panel.panel_label"
@input="(e) => handlePanelLabel(e, idx)"
/>
</header>
</div>
<q-separator />
<div class="components-list">
......@@ -145,27 +144,13 @@ export default {
</script>
<style lang="scss" scoped>
.panels {
.panels__wrap {
> * {
column-gap: 24px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
// FIXME: class name not self explanatory
.p-c {
position: relative;
> * {
height: 240px;
padding: 24px 8px;
}
}
header {
display: flex;
}
.components-list > * {
background-color: $light;
border-radius: 2px;
......@@ -180,4 +165,17 @@ export default {
top: -8px;
}
}
.panels {
position: relative;
> * {
height: 240px;
padding: 24px 8px;
}
}
.panel__header {
display: flex;
}
</style>
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