prettified pwa setting
This commit is contained in:
parent
5b143b2aea
commit
3ec21cb442
1 changed files with 25 additions and 4 deletions
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue