Tweak UI
This commit is contained in:
parent
503f23ad3b
commit
f32cad2667
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="vrtktovg _formItem" v-size="{ max: [500] }">
|
<div class="vrtktovg _formItem" v-size="{ max: [500] }" v-sticky-container>
|
||||||
<div class="_formLabel"><slot name="label"></slot></div>
|
<div class="_formLabel"><slot name="label"></slot></div>
|
||||||
<div class="main _form_group">
|
<div class="main _form_group">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
|
@ -21,14 +21,6 @@ export default defineComponent({
|
||||||
> ::v-deep(*) {
|
> ::v-deep(*) {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
&:not(:first-child) {
|
|
||||||
&._formPanel, ._formPanel {
|
|
||||||
border-top: none;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
&._formPanel, ._formPanel {
|
&._formPanel, ._formPanel {
|
||||||
border-bottom: solid 0.5px var(--divider);
|
border-bottom: solid 0.5px var(--divider);
|
||||||
|
@ -36,6 +28,14 @@ export default defineComponent({
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:not(:first-child) {
|
||||||
|
&._formPanel, ._formPanel {
|
||||||
|
border-top: none;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -22,9 +22,16 @@ export default defineComponent({
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 14px 16px;
|
padding: 14px 16px;
|
||||||
|
|
||||||
|
> .key {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
> .value {
|
> .value {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -310,6 +310,7 @@ export default defineComponent({
|
||||||
|
|
||||||
> .widgets {
|
> .widgets {
|
||||||
//--panelShadow: none;
|
//--panelShadow: none;
|
||||||
|
width: 300px;
|
||||||
|
|
||||||
@media (max-width: $widgets-hide-threshold) {
|
@media (max-width: $widgets-hide-threshold) {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
@ -2,8 +2,8 @@
|
||||||
<div class="efzpzdvf">
|
<div class="efzpzdvf">
|
||||||
<XWidgets :edit="editMode" :widgets="$store.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
|
<XWidgets :edit="editMode" :widgets="$store.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
|
||||||
|
|
||||||
<button v-if="editMode" @click="editMode = false" class="_textButton" style="font-size: 0.9em;"><Fa :icon="faCheck"/> {{ $ts.editWidgetsExit }}</button>
|
<button v-if="editMode" @click="editMode = false" class="_textButton edit" style="font-size: 0.9em;"><Fa :icon="faCheck"/> {{ $ts.editWidgetsExit }}</button>
|
||||||
<button v-else @click="editMode = true" class="_textButton" style="font-size: 0.9em;"><Fa :icon="faPencilAlt"/> {{ $ts.editWidgets }}</button>
|
<button v-else @click="editMode = true" class="_textButton edit" style="font-size: 0.9em;"><Fa :icon="faPencilAlt"/> {{ $ts.editWidgets }}</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -62,18 +62,11 @@ export default defineComponent({
|
||||||
position: sticky;
|
position: sticky;
|
||||||
height: min-content;
|
height: min-content;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
|
||||||
> * {
|
> .edit {
|
||||||
margin: var(--margin) 0;
|
display: block;
|
||||||
width: 300px;
|
margin: 16px auto;
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .add {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue