prettified pwa setting

This commit is contained in:
Henry Jameson 2025-12-11 15:06:36 +02:00
commit 3ec21cb442

View file

@ -4,7 +4,7 @@
class="PWAManifestIconsSetting setting-item" class="PWAManifestIconsSetting setting-item"
> >
<label <label
class="setting-label" class="pwa-label setting-label"
:class="{ 'faint': shouldBeDisabled }" :class="{ 'faint': shouldBeDisabled }"
> >
<template v-if="backendDescriptionLabel"> <template v-if="backendDescriptionLabel">
@ -22,12 +22,12 @@
> >
{{ backendDescriptionDescription + ' ' }} {{ backendDescriptionDescription + ' ' }}
</p> </p>
<ul class="setting-list"> <ul class="setting-list setting-control">
<li <li
v-for="(item, index) in visibleState" v-for="(item, index) in visibleState"
:key="index" :key="index"
> >
<div> <div class="setting-item">
<dl> <dl>
<dt><code>purpose</code></dt> <dt><code>purpose</code></dt>
<dd> <dd>
@ -96,13 +96,34 @@
<script src="./pwa_manifest_icons_setting.js"></script> <script src="./pwa_manifest_icons_setting.js"></script>
<style lang="scss"> <style lang="scss">
.PWAManifestIconsSetting { .PWAManifestIconsSetting {
display: inline-block; &.setting-item {
display: grid;
grid-template-areas:
"label control"
"desc control"
". draft";
grid-template-rows: 2em auto 1fr;
}
.pwa-label.setting-label {
align-self: end;
}
.setting-description {
text-align: right;
align-self: start;
}
.setting-list { .setting-list {
display: grid; display: grid;
gap: 0.5em; gap: 0.5em;
} }
.setting-item {
display: inline-block;
}
.buttons { .buttons {
display: flex; display: flex;
gap: 0.5em; gap: 0.5em;