intervle - commit 52175f5

diff --git a/resources/css/app.css b/resources/css/app.css index 75b4e6b..962f8f6 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -22,9 +22,13 @@ --text-primary: #000000; --text-secondary: #4b4b4b; - --background-event-card-idle: #ffffff; - --background-event-card-hover: #eeeeee; - --background-event-card-click: #dddddd; + --background-card-control-idle: #eeeeee; + --background-card-control-idle: linear-gradient(0deg, rgb(203, 203, 203) 0%, rgb(187, 187, 187) 50%, rgb(213, 213, 213) 51%, rgb(222, 222, 222) 100%); + --background-card-control-hover: #f8f8f8; + --background-card-control-click: #c2c2c2; + + --background-event-card-idle: #DDDDDD; + --background-event-card-idle: linear-gradient(0deg,rgba(221, 221, 221, 1) 0%, rgba(220, 220, 220, 1) 50%, rgba(230, 230, 230, 1) 51%, rgba(250, 250, 250, 1) 100%); --background-event-card-correct: #acecae; --background-event-card-incorrect: #ecacae; @@ -35,6 +39,7 @@ --border-event-card-incorrect: 1px solid #a64f51; --box-shadow-standard: 2px 2px 4px rgba(0, 0, 0, 0.5); + --box-shadow-shimmer: inset 0 0 2px 1px rgb(255, 255, 255); } html { @@ -72,3 +77,15 @@ button { border-radius: var(--border-radius-standard); box-shadow: var(--box-shadow-standard); } + +button:hover { + background: var(--background-card-control-hover); + box-shadow: var(--box-shadow-standard), var(--box-shadow-shimmer); +} + +button:active { + background: var(--background-card-control-click); + box-shadow: inset var(--box-shadow-standard); +} + + diff --git a/resources/css/game.css b/resources/css/game.css index 1875915..2d876a8 100644 --- a/resources/css/game.css +++ b/resources/css/game.css @@ -8,30 +8,18 @@ } .event-container { + display: flex; + justify-content: space-between; + background: var(--background-event-card-idle); outline: var(--border-event-card-idle); border-radius: var(--border-radius-standard); - box-shadow: var(--box-shadow-standard); + box-shadow: var(--box-shadow-standard), var(--box-shadow-shimmer); margin: 8px; - padding: 12px; - text-align: left; - cursor: grab; transition: 0.1s ease; } -.event-container:hover { - background: var(--background-event-card-hover); - outline: var(--border-event-card-hover); -} -.event-container:active { - background: var(--background-event-card-click); - outline: var(--border-event-card-click); - - cursor: grabbing; - opacity: 40%; - scale: 110%; -} .event-correct { background: var(--background-event-card-correct); @@ -45,3 +33,34 @@ .events-info { color: var(--text-secondary); } + +.event-description { + margin: 12px; + text-align: left; + align-content: center; +} + +.reorder-controls { + border: var(--border-event-card-idle); + border-width: 0 0 0 1px; + display: grid; + width: 64px; +} +.reorder-control { + font-size: 16px; + font-weight: bolder; + background: var(--background-card-control-idle); +} +.reorder-control:hover { + background: var(--background-card-control-hover); + box-shadow: var(--box-shadow-standard), var(--box-shadow-shimmer); +} +.reorder-control:active { + background: var(--background-card-control-click); + box-shadow: inset var(--box-shadow-standard); +} +.reorder-up-btn { + border: var(--border-event-card-idle); + border-width: 0 0 1px 0; +} + diff --git a/resources/js/app.js b/resources/js/app.js index 2447dcd..ac5321d 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1,5 +1,6 @@ import './bootstrap'; + document.addEventListener('DOMContentLoaded', () => { if (/^\/(today|\d{8})\/?$/.test(window.location.pathname)) { const currentDate = window.location.pathname; @@ -7,8 +8,31 @@ document.addEventListener('DOMContentLoaded', () => { const eventsContainer = document.getElementById('events-container'); const eventContainers = eventsContainer.querySelectorAll('.event-container'); + function reorderItem(item, direction) { + const parent = item.parentNode; + + if (direction === -1) { // move up + const prev = item.previousElementSibling; + if (prev) { + parent.insertBefore(item, prev); + } + } + + if (direction === 1) { // move down + const next = item.nextElementSibling; + if (next) { + parent.insertBefore(next, item); + } + } + } + eventContainers.forEach(eventContainer => { - // will add dragging logic later + eventContainer.querySelector('.reorder-up-btn').addEventListener('click', () => { + reorderItem(eventContainer, -1); + }); + eventContainer.querySelector('.reorder-down-btn').addEventListener('click', () => { + reorderItem(eventContainer, 1); + }); }); const submitOrderBtn = document.getElementById('submit-order-button'); @@ -32,6 +56,9 @@ document.addEventListener('DOMContentLoaded', () => { displayResults(data) }); + document.querySelectorAll('.reorder-controls').forEach(control => { + control.remove() + }); submitOrderBtn.remove(); }); } diff --git a/resources/views/game/show.blade.php b/resources/views/game/show.blade.php index 65ef420..f38d741 100644 --- a/resources/views/game/show.blade.php +++ b/resources/views/game/show.blade.php @@ -11,7 +11,15 @@ <div id="events-container"> @foreach ($events as $event) <div data-event="{{ $event->id }}" class="event-container"> - <span>{{ $event->description }}</span> + <span class="event-description">{{ $event->description }}</span> + <div class="reorder-controls"> + <span class="reorder-control reorder-up-btn"> + <span class="control-text">/\</span> + </span> + <span class="reorder-control reorder-down-btn"> + <span class="control-text">\/</span> + </span> + </div> </div> @endforeach </div>