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.
* "float" the buttons to the right, as we always place these kinds of
  buttons to the right.
This commit is contained in:
Bernhard Kirchen 2024-10-27 19:57:25 +01:00
parent b68df07b6a
commit 9206098541

View File

@ -78,19 +78,15 @@
</div> </div>
</div> </div>
<div class="row mb-3"> <div class="mb-3 d-flex justify-content-end gap-3" v-if="docLinks.length">
<div class="col-sm-2"></div> <a
<div class="col-sm-10"> v-for="(doc, index) in docLinks"
<div :key="index"
class="btn-group mb-2 me-2" :href="doc.url"
v-for="(doc, index) in pinMappingList.find( class="btn btn-primary"
(i) => i.name === deviceConfigList.curPin.name target="_blank"
)?.links" >{{ doc.name }}</a
:key="index" >
>
<a :href="doc.url" class="btn btn-primary" target="_blank">{{ doc.name }}</a>
</div>
</div>
</div> </div>
<div <div
@ -313,6 +309,12 @@ export default defineComponent({
this.deviceConfigList.led.every((v) => (v.brightness = this.deviceConfigList.led[0].brightness)); 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: { methods: {
getPinMappingList() { getPinMappingList() {
this.pinMappingLoading = true; this.pinMappingLoading = true;