Webapp: use flexbox styling to handle button spacing
Instead of setting `margin-left` on all but the first button, use the `gap` property to set the inter-button gap. This works properly when buttons rewrap.
This commit is contained in:
parent
bd2ebac519
commit
0d57d1e84d
@ -347,6 +347,8 @@ dl dd:empty {
|
||||
.btn-bar {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: calc(var(--spacer-sm) / 3) var(--spacer-sm);
|
||||
padding: var(--spacer-sm) 0;
|
||||
}
|
||||
|
||||
@ -371,13 +373,6 @@ dl dd:empty {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn-bar-group select+.btn,
|
||||
.btn-bar-group select+button,
|
||||
.btn-bar-group .btn+select,
|
||||
.btn-bar-group button+select {
|
||||
margin-left: var(--spacer-sm)
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
@ -458,10 +453,6 @@ button, input[type='button'], .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-bar .btn+.btn,
|
||||
.btn-bar button+button {
|
||||
margin-left: var(--spacer-sm);
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
input[type='button'][disabled],
|
||||
|
@ -1,18 +1,20 @@
|
||||
<template>
|
||||
<select v-model="selectedAction">
|
||||
<option value="" selected>
|
||||
<template v-if="!workers.selectedWorkers.length">Select a Worker</template>
|
||||
<template v-else>Choose an action...</template>
|
||||
</option>
|
||||
<template v-for="(action, key) in WORKER_ACTIONS">
|
||||
<option :key="action.label" :value="key" v-if="action.condition()">
|
||||
{{ action.label }}
|
||||
<div class="btn-bar workers">
|
||||
<select v-model="selectedAction">
|
||||
<option value="" selected>
|
||||
<template v-if="!workers.selectedWorkers.length">Select a Worker</template>
|
||||
<template v-else>Choose an action...</template>
|
||||
</option>
|
||||
</template>
|
||||
</select>
|
||||
<button :disabled="!canPerformAction" class="btn" @click.prevent="performWorkerAction">
|
||||
Apply
|
||||
</button>
|
||||
<template v-for="(action, key) in WORKER_ACTIONS">
|
||||
<option :key="action.label" :value="key" v-if="action.condition()">
|
||||
{{ action.label }}
|
||||
</option>
|
||||
</template>
|
||||
</select>
|
||||
<button :disabled="!canPerformAction" class="btn" @click.prevent="performWorkerAction">
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
Loading…
x
Reference in New Issue
Block a user