Skip to content

Commit 86f2186

Browse files
frasermolyneuxfrasermolyneux
committed
feat: Enhance map rotation management with drag-and-drop functionality and styling
1 parent 7417a57 commit 86f2186

7 files changed

Lines changed: 49 additions & 21 deletions

File tree

‎src/XtremeIdiots.Portal.Web/Styles/app.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
@use 'features/banfilemonitors';
4747
@use 'features/rcon';
4848
@use 'features/changelog';
49+
@use 'features/map-rotations';
4950

5051
// 7. Vendor - Third-party library overrides
5152
@use 'vendor/bootstrap-overrides';

‎src/XtremeIdiots.Portal.Web/Styles/features/_map-rotations.scss‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
@use '../tokens/colors' as *;
2+
3+
// Map Rotation Editor - drag-and-drop list styles
4+
5+
.map-rotation-item {
6+
cursor: grab;
7+
transition: border-color 0.15s ease, box-shadow 0.15s ease;
8+
9+
&:hover {
10+
border-color: $border-color-light !important;
11+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
12+
}
13+
14+
&--dragging {
15+
cursor: grabbing;
16+
}
17+
}
18+
19+
.map-rotation-drag-handle {
20+
cursor: grab;
21+
color: $xi-text-muted;
22+
font-size: 1.1rem;
23+
padding: 0.25rem;
24+
display: flex;
25+
align-items: center;
26+
27+
&:hover {
28+
color: $xi-text;
29+
}
30+
31+
.map-rotation-item--dragging & {
32+
cursor: grabbing;
33+
}
34+
}

‎src/XtremeIdiots.Portal.Web/Views/MapRotations/AssignmentStatus.cshtml‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -195,14 +195,10 @@
195195
var mapDto = Model.Maps.FirstOrDefault(m => m.MapId == rotationMap.MapId);
196196
if (mapDto != null)
197197
{
198-
<div class="col-md-3 col-sm-4 col-6 mb-3">
199-
<div class="card h-100">
200-
<img src="@(mapDto.MapImageUri ?? "/images/noimage.jpg")" class="card-img-top" alt="@mapDto.MapName" loading="lazy" style="max-height:120px;object-fit:cover;" />
201-
<div class="card-body p-2">
202-
<small class="text-muted">#@(i + 1)</small>
203-
<h6 class="card-title mb-0">@mapDto.MapName</h6>
204-
</div>
205-
</div>
198+
<div class="col-md-3 col-sm-4 col-6 mb-3 text-center">
199+
<img src="@(mapDto.MapImageUri ?? "/images/noimage.jpg")" class="map-image img-fluid" alt="Map image for @mapDto.MapName" loading="lazy" />
200+
<small class="text-muted">#@(i + 1)</small>
201+
<h6 class="mb-0">@mapDto.MapName</h6>
206202
</div>
207203
}
208204
}

‎src/XtremeIdiots.Portal.Web/Views/MapRotations/Create.cshtml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
<div class="mb-3">
5151
<label class="control-label">Maps</label>
5252
<input type="text" id="mapSearch" class="form-control" placeholder="Search for maps by name..." autocomplete="off" />
53-
<small class="form-text text-muted">Type at least 2 characters to search. Click a map to add it to the rotation.</small>
53+
<small class="form-text text-muted">Type at least 2 characters to search. Use the <i class="fa-solid fa-grip-vertical"></i> handle to drag and reorder maps. Click × to remove.</small>
5454
</div>
5555
<div id="selectedMapsList" class="mb-3"></div>
5656
<div id="mapIdsContainer"></div>

‎src/XtremeIdiots.Portal.Web/Views/MapRotations/Details.cshtml‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -74,14 +74,10 @@
7474
var mapDto = Model.Maps.FirstOrDefault(m => m.MapId == rotationMap.MapId);
7575
if (mapDto != null)
7676
{
77-
<div class="col-md-3 col-sm-4 col-6 mb-3">
78-
<div class="card h-100">
79-
<img src="@(mapDto.MapImageUri ?? "/images/noimage.jpg")" class="card-img-top" alt="@mapDto.MapName" loading="lazy" style="max-height:120px;object-fit:cover;" />
80-
<div class="card-body p-2">
81-
<small class="text-muted">#@(i + 1)</small>
82-
<h6 class="card-title mb-0">@mapDto.MapName</h6>
83-
</div>
84-
</div>
77+
<div class="col-md-3 col-sm-4 col-6 mb-3 text-center">
78+
<img src="@(mapDto.MapImageUri ?? "/images/noimage.jpg")" class="map-image img-fluid" alt="Map image for @mapDto.MapName" loading="lazy" />
79+
<small class="text-muted">#@(i + 1)</small>
80+
<h6 class="mb-0">@mapDto.MapName</h6>
8581
</div>
8682
}
8783
}

‎src/XtremeIdiots.Portal.Web/Views/MapRotations/Edit.cshtml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
<div class="mb-3">
5151
<label class="control-label">Maps</label>
5252
<input type="text" id="mapSearch" class="form-control" placeholder="Search for maps by name..." autocomplete="off" />
53-
<small class="form-text text-muted">Type at least 2 characters to search. Drag to reorder. Click × to remove.</small>
53+
<small class="form-text text-muted">Type at least 2 characters to search. Use the <i class="fa-solid fa-grip-vertical"></i> handle to drag and reorder maps. Click × to remove.</small>
5454
</div>
5555
<div id="selectedMapsList" class="mb-3"></div>
5656
<div id="mapIdsContainer">

‎src/XtremeIdiots.Portal.Web/wwwroot/js/map-rotation-editor.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,11 @@
4040
);
4141

4242
// Visual card
43-
const $card = $('<div class="d-flex align-items-center border rounded p-2 mb-2 bg-light" draggable="true"></div>');
43+
const $card = $('<div class="map-rotation-item d-flex align-items-center border rounded p-2 mb-2 bg-light" draggable="true"></div>');
4444
$card.attr('data-index', index);
4545
$card.attr('data-map-id', map.id);
4646

47+
$card.append('<span class="map-rotation-drag-handle me-2" title="Drag to reorder"><i class="fa-solid fa-grip-vertical"></i></span>');
4748
$card.append('<span class="badge bg-secondary me-2" style="min-width:28px;">' + (index + 1) + '</span>');
4849
$card.append($('<img>').attr('src', map.imageUrl || '/images/noimage.jpg').attr('alt', map.text).css({ width: '48px', height: '32px', objectFit: 'cover', borderRadius: '4px' }).addClass('me-2'));
4950
$card.append($('<span>').addClass('flex-grow-1').text(map.text));
@@ -58,10 +59,10 @@
5859
// Drag and drop
5960
$card.on('dragstart', function (e) {
6061
e.originalEvent.dataTransfer.setData('text/plain', index.toString());
61-
$(this).addClass('opacity-50');
62+
$(this).addClass('opacity-50 map-rotation-item--dragging');
6263
});
6364
$card.on('dragend', function () {
64-
$(this).removeClass('opacity-50');
65+
$(this).removeClass('opacity-50 map-rotation-item--dragging');
6566
});
6667
$card.on('dragover', function (e) {
6768
e.preventDefault();

0 commit comments

Comments
 (0)