Tidy up HTML spacing and styling

This commit is contained in:
Julian Stirling 2025-10-21 16:05:53 +01:00
parent 5c2d61baaa
commit 4c1dcdb8d1
2 changed files with 44 additions and 23 deletions

View file

@ -1,11 +1,11 @@
<template> <template>
<div id="scan-modal" ref="scanModal" style="padding: 10px;" uk-modal> <div id="scan-modal" ref="scanModal" uk-modal>
<div <div
id="scan-modal-body"
class="uk-modal-dialog uk-modal-body" class="uk-modal-dialog uk-modal-body"
v-if="selectedScan" v-if="selectedScan"
style="padding: 10px; width: 95%; height: 95%; display: flex; flex-direction: column;"
> >
<h2 class="uk-modal-title" style="flex: 0 0 auto;"> <h2 id="scan-modal-title" class="uk-modal-title">
{{ selectedScan.name }} {{ selectedScan.name }}
<button class="uk-modal-close uk-float-right" type="button"> <button class="uk-modal-close uk-float-right" type="button">
<span class="material-symbols-outlined">close</span> <span class="material-symbols-outlined">close</span>
@ -71,8 +71,7 @@
<button <button
type="button" type="button"
class="uk-button uk-button-default" class="uk-button uk-button-default reset-button"
style="margin-top: 0.5rem;"
@click="resetFilters" @click="resetFilters"
> >
Reset Filters Reset Filters
@ -139,6 +138,22 @@ input[type="range"] {
z-index: 1001; z-index: 1001;
} }
#scan-modal {
padding: 10px;
}
#scan-modal-body {
padding: 10px;
width: 95%;
height: 95%;
display: flex;
flex-direction: column;
}
#scan-modal-title {
flex: 0 0 auto;
}
.controlsContainer { .controlsContainer {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -158,4 +173,8 @@ input[type="range"] {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.reset-button{
margin-top: 0.5rem;
}
</style> </style>

View file

@ -10,26 +10,25 @@
<!-- Right side buttons --> <!-- Right side buttons -->
<div class="uk-navbar-right"> <div class="uk-navbar-right">
<div class="uk-grid"> <div class="uk-grid">
<div style="margin-top:5px;margin-bottom: 2px"> <div class="scan-list-button">
<action-button <action-button
class="uk-width-1-1" class="uk-width-1-1"
thing="smart_scan" thing="smart_scan"
action="stitch_all_scans" action="stitch_all_scans"
submit-label="Stitch All Remaining" submit-label="Stitch All Remaining"
:can-terminate="true" :can-terminate="true"
:button-primary="false" :button-primary="false"
:modal-progress="true" :modal-progress="true"
:requires-confirmation="true" :requires-confirmation="true"
:confirmation-message=" :confirmation-message="
'<h3>Stitch all unstitched scans?</h3><br>Depending on the number and size of scans, this may be slow, and your microscope should not be used during the stitching.' '<h3>Stitch all unstitched scans?</h3><br>Depending on the number and size of scans, this may be slow, and your microscope should not be used during the stitching.'
" "
@error="modalError" @error="modalError"
/> />
</div> </div>
<div> <div>
<button <button
class="uk-button uk-button-default uk-width-1-1" class="uk-button uk-button-default uk-width-1-1 scan-list-button"
style="margin-top:5px;margin-bottom: 2px"
type="button" type="button"
@click="deleteAllScans()" @click="deleteAllScans()"
> >
@ -38,8 +37,7 @@
</div> </div>
<div> <div>
<button <button
class="uk-button uk-button-default uk-width-1-1" class="uk-button uk-button-default uk-width-1-1 scan-list-button"
style="margin-top:5px;margin-bottom: 2px"
type="button" type="button"
@click="updateScans()" @click="updateScans()"
> >
@ -236,4 +234,8 @@ export default {
margin-bottom: 30px; margin-bottom: 30px;
} }
.scan-list-button {
margin-top: 5px;
margin-bottom: 2px;
}
</style> </style>