ui: Move camera action buttons below image viewer

On mobile, the screen is too narrow to put the action buttons to the
right of the image viewer.
bugfix/ci-buildah
Dustin 2025-03-08 20:12:20 -06:00
parent 2d7ff417fc
commit 2050ebf088
2 changed files with 12 additions and 23 deletions

View File

@ -3,11 +3,6 @@
} }
#photo-view { #photo-view {
display: flex;
}
#photo-view .workspace {
flex-grow: 1;
text-align: center; text-align: center;
} }

View File

@ -36,18 +36,13 @@
<video class="invisible"></video> <video class="invisible"></video>
</div> </div>
<div class="buttons"> <div class="buttons">
<div> <sl-tooltip content="Take Photo">
<sl-tooltip content="Take Photo" placement="left">
<sl-icon-button name="camera" label="Take Photo"></sl-icon-button> <sl-icon-button name="camera" label="Take Photo"></sl-icon-button>
</sl-tooltip> </sl-tooltip>
</div> <sl-tooltip content="Crop">
<div>
<sl-tooltip content="Crop" placement="left">
<sl-icon-button name="crop" label="Crop"></sl-icon-button> <sl-icon-button name="crop" label="Crop"></sl-icon-button>
</sl-tooltip> </sl-tooltip>
</div> <sl-tooltip content="Start Over">
<div>
<sl-tooltip content="Start Over" placement="left">
<sl-icon-button <sl-icon-button
name="trash" name="trash"
label="Start Over" label="Start Over"
@ -55,7 +50,6 @@
</sl-tooltip> </sl-tooltip>
</div> </div>
</div> </div>
</div>
</sl-details> </sl-details>
<footer> <footer>
<sl-button type="reset" variant="secondary">Reset</sl-button <sl-button type="reset" variant="secondary">Reset</sl-button