Format the stage control so it isn't so wide

This commit is contained in:
Julian Stirling 2025-11-07 22:24:47 +00:00
parent cb9d134ac3
commit 8babf3f17b

View file

@ -1,34 +1,38 @@
<template> <template>
<div> <div class="uk-width-large">
<a class="uk-accordion-title" href="#">Configure</a> <p><b>Single Move Step Size</b></p>
<div class="uk-accordion-content"> <p>
<b>Keyboard Step Size</b> This sets the size (and direction) of movements within the web app. Including keyboard arrow
<div class="uk-grid-small uk-child-width-1-3" uk-grid> keys (and PageUp/PageDown). It also includes the navigation buttons in the control tab.
<div> </p>
<label class="uk-form-label" for="form-stacked-text">x</label> <p>These settings do not affect the operation of other actions your microscope performs.</p>
<div class="uk-form-controls"> <div class="uk-grid-small uk-child-width-1-3" uk-grid>
<input v-model="stepSize.x" class="uk-input uk-form-small" type="number" /> <div>
</div> <label class="uk-form-label" for="form-stacked-text">x</label>
<label class="uk-margin-small-right" <div class="uk-form-controls">
><input v-model="invert.x" class="uk-checkbox" type="checkbox" /> Invert x</label <input v-model="stepSize.x" class="uk-input uk-form-small" type="number" />
>
</div> </div>
<label class="uk-margin-small-right">
<input v-model="invert.x" class="uk-checkbox" type="checkbox" />
Invert x
</label>
</div>
<div> <div>
<label class="uk-form-label" for="form-stacked-text">y</label> <label class="uk-form-label" for="form-stacked-text">y</label>
<div class="uk-form-controls"> <div class="uk-form-controls">
<input v-model="stepSize.y" class="uk-input uk-form-small" type="number" /> <input v-model="stepSize.y" class="uk-input uk-form-small" type="number" />
</div>
<label class="uk-margin-small-right"
><input v-model="invert.y" class="uk-checkbox" type="checkbox" /> Invert y</label
>
</div> </div>
<label class="uk-margin-small-right">
<input v-model="invert.y" class="uk-checkbox" type="checkbox" />
Invert y
</label>
</div>
<div> <div>
<label class="uk-form-label" for="form-stacked-text">z</label> <label class="uk-form-label" for="form-stacked-text">z</label>
<div class="uk-form-controls"> <div class="uk-form-controls">
<input v-model="stepSize.z" class="uk-input uk-form-small" type="number" /> <input v-model="stepSize.z" class="uk-input uk-form-small" type="number" />
</div>
</div> </div>
</div> </div>
</div> </div>