Commit 306ff5b6 authored by nwindis's avatar nwindis
Browse files

FIX things in panelboxes

parent 515375b1
Pipeline #153872 passed with stages
in 3 minutes and 47 seconds
<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>
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