webapp: optimize placement of device profile doc buttons

* remove empty container for device profile links. if a device profile
  has no links, no buttons are generated, but a row was still part of
  the DOM, adding spurious space between the select and the alert with
  the hint.
This commit is contained in:
Bernhard Kirchen 2024-10-27 19:57:25 +01:00 committed by Thomas Basler
parent bac7179f73
commit f1c095e41d

View File

@ -78,18 +78,17 @@
</div>
</div>
<div class="row mb-3">
<div class="row mb-3" v-if="docLinks.length">
<div class="col-sm-2"></div>
<div class="col-sm-10">
<div
class="btn-group mb-2 me-2"
v-for="(doc, index) in pinMappingList.find(
(i) => i.name === deviceConfigList.curPin.name
)?.links"
<div class="col-sm-10 d-flex gap-3">
<a
v-for="(doc, index) in docLinks"
:key="index"
:href="doc.url"
class="btn btn-primary"
target="_blank"
>{{ doc.name }}</a
>
<a :href="doc.url" class="btn btn-primary" target="_blank">{{ doc.name }}</a>
</div>
</div>
</div>
@ -315,6 +314,12 @@ export default defineComponent({
this.deviceConfigList.led.every((v) => (v.brightness = this.deviceConfigList.led[0].brightness));
},
},
computed: {
docLinks() {
const mapping = this.pinMappingList.find((i) => i.name === this.deviceConfigList.curPin.name);
return mapping?.links || [];
},
},
methods: {
getLanguageList() {
this.languageLoading = true;