Skip to content

fix gallery ui in the edit aircraft page #93

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
flymia merged 1 commit into from
Jul 17, 2026
Merged

fix gallery ui in the edit aircraft page #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions resources/views/fleet/_gallery.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,9 @@
@if($canUpload) Upload the first one from the <strong>Upload</strong> tab. @endif
</div>
@else
<div class="row g-3 gallery-group">
<div class="gallery-group">
@foreach($approved as $img)
<div class="col-6 col-md-4">
<div class="gallery-cell">
<div class="position-relative gallery-tile">
<button type="button"
class="gallery-thumb"
Expand Down Expand Up @@ -106,9 +106,9 @@ class="gallery-thumb"
{{ $canModerate ? 'Awaiting review' : 'Your uploads awaiting review' }}
<span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle ms-1">{{ $pending->count() }}</span>
</h6>
<div class="row g-3 gallery-group">
<div class="gallery-group">
@foreach($pending as $img)
<div class="col-6 col-md-4">
<div class="gallery-cell">
<div class="position-relative gallery-tile">
<button type="button"
class="gallery-thumb is-pending"
Expand Down Expand Up @@ -189,6 +189,18 @@ class="form-control @error('screenshot') is-invalid @enderror" required>

@once
<style>
/* Thumbnail grid — sizes to the container, not the viewport, so tiles stay
a sensible size whether the gallery is full-width (edit) or in a column
(detail) instead of ballooning into 3 giant shots on wide screens. */
.aircraft-gallery .gallery-group {
display: grid;
/* Capped max (not 1fr) so a lone screenshot on the full-width edit page
stays tile-sized instead of stretching across the whole row. */
grid-template-columns: repeat(auto-fill, minmax(200px, 260px));
gap: 1rem;
justify-content: start;
}

/* Thumbnails */
.aircraft-gallery .gallery-thumb {
display: block;
Expand Down
27 changes: 15 additions & 12 deletions resources/views/fleet/edit.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
</div>
@endif

<form action="{{ route('editaircraft', $aircraft->id) }}" method="POST">
<form action="{{ route('editaircraft', $aircraft->id) }}" method="POST" id="editAircraftForm">
@csrf
<input type="hidden" id="used_by" name="used_by" value="{{ session('activeairline')->id }}" required>

Expand Down Expand Up @@ -224,17 +224,6 @@
</div>
</div>

<!-- Submit / Cancel Card -->
<div class="card border-0 shadow-sm">
<div class="card-body p-4 d-grid gap-2">
<button type="submit" class="btn btn-primary py-2.5 fw-semibold d-flex align-items-center justify-content-center gap-2">
<i class="bi bi-check-circle-fill"></i> Save Changes
</button>
<a href="{{ route('fleetmanager') }}" class="btn btn-outline-secondary py-2.5 text-center">
Cancel
</a>
</div>
</div>
</div>
</div>
</form>
Expand Down Expand Up @@ -292,6 +281,17 @@
</form>
</div>
</div>

{{-- Sticky action bar: pins to the viewport bottom while scrolling the form,
then rests above the site footer. Submit targets the form via form="editAircraftForm". --}}
<div class="edit-actionbar bg-body border rounded-3 shadow-lg mt-4 p-2 d-flex justify-content-end gap-2">
<a href="{{ route('fleetmanager') }}" class="btn btn-outline-secondary px-4">
Cancel
</a>
<button type="submit" form="editAircraftForm" class="btn btn-primary px-4 fw-semibold d-flex align-items-center gap-2">
<i class="bi bi-check-circle-fill"></i> Save Changes
</button>
</div>
</div>

<script>
Expand All @@ -318,5 +318,8 @@
.fs-7 { font-size: 0.775rem !important; }
.fs-8 { font-size: 0.7rem; }
.tracking-wider { letter-spacing: 0.05em; }
/* Sticky action bar: floats just above the viewport bottom while the form is
scrolled, resting at its natural spot (above the site footer) at page end. */
.edit-actionbar { position: sticky; bottom: 1rem; z-index: 1020; }
</style>
@endsection
Loading