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,24 +36,18 @@
<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> <sl-tooltip content="Crop">
</div> <sl-icon-button name="crop" label="Crop"></sl-icon-button>
<div> </sl-tooltip>
<sl-tooltip content="Crop" placement="left"> <sl-tooltip content="Start Over">
<sl-icon-button name="crop" label="Crop"></sl-icon-button> <sl-icon-button
</sl-tooltip> name="trash"
</div> label="Start Over"
<div> ></sl-icon-button>
<sl-tooltip content="Start Over" placement="left"> </sl-tooltip>
<sl-icon-button
name="trash"
label="Start Over"
></sl-icon-button>
</sl-tooltip>
</div>
</div> </div>
</div> </div>
</sl-details> </sl-details>