From 8510bb69ec12a08000b8b76445552ba5f2cf4ed9 Mon Sep 17 00:00:00 2001 From: Claude Brisson Date: Sun, 3 Dec 2023 15:05:27 +0100 Subject: [PATCH] New player dialog and bugfixes --- view-webapp/src/main/sass/main.scss | 61 ++++++++++--- view-webapp/src/main/sass/tour.scss | 4 +- .../main/webapp/WEB-INF/layouts/standard.html | 7 +- view-webapp/src/main/webapp/index.html | 55 ------------ view-webapp/src/main/webapp/js/domhelper.js | 16 +++- view-webapp/src/main/webapp/js/main.js | 32 ++++--- .../main/webapp/js/tour-information.inc.js | 2 +- .../main/webapp/js/tour-registration.inc.js | 9 ++ .../src/main/webapp/tour-information.inc.html | 2 +- .../main/webapp/tour-registration.inc.html | 85 +++++++++++++++++-- view-webapp/src/main/webapp/tour.html | 3 +- 11 files changed, 179 insertions(+), 97 deletions(-) create mode 100644 view-webapp/src/main/webapp/js/tour-registration.inc.js diff --git a/view-webapp/src/main/sass/main.scss b/view-webapp/src/main/sass/main.scss index 1cedfd9..11f97af 100644 --- a/view-webapp/src/main/sass/main.scss +++ b/view-webapp/src/main/sass/main.scss @@ -93,7 +93,7 @@ background-color: black; opacity: 0; transition: opacity 0.5s; - z-index: 1000; + z-index: 50; pointer-events: none; } @@ -268,17 +268,20 @@ color: red; } + body.initial { + .popup-body { + transition: initial; + } + } .popup { - /* display: none; */ position: fixed; - top: 50%; + top: 10vh; left: 50%; - transform: translate(-50%, -50%); + transform: translate(-50%, 0px); max-width: max(90vw, 800px); - max-height: 90vh; + max-height: 80vh; margin: auto; z-index: 100; - border-radius: 3px; pointer-events: none; div.close { position: absolute; @@ -293,23 +296,25 @@ } } .popup-body { - max-height: 70vh; - max-width: 100vw; + max-height: 80vh; + max-width: 80vw; transform: rotate3d(1, 0, 0, 90deg); + transition: transform 1s cubic-bezier(0.500, 0.250, 0.300, 1.650); + background-color: white; + padding: 1em; + border-radius: 5px; + overflow-x: hidden; + overflow-y: auto; .popup-content { display: flex; flex-direction: column; - align-items: center; + align-items: stretch; justify-content: start; - padding: 2em; text-align: justify; max-height: inherit; - overflow: auto; } .popup-footer { position: relative; - color: rgba(255, 255, 255, 0.6); - padding: 2em; text-align: justify; display: flex; flex-flow: row wrap; @@ -319,6 +324,7 @@ } } &.shown { + pointer-events: initial; transition: transform 1s cubic-bezier(0.500, 0.250, 0.300, 1.650); display: block; .popup-body { @@ -326,4 +332,33 @@ } } } + + .checkbox { + width: 50px; + height: 26px; + border-radius: 18px; + background-color: #F7D6A3; + display: flex; + align-items: center; + padding-left: 5px; + padding-right: 5px; + cursor: pointer; + .circle { + background-color: #6B5E8A; + transform: translateX(0px); + border-radius: 50%; + width: 20px; + height: 20px; + transition: 300ms; + } + input { + display: none; + } + &.active { + background-color: rgb(218, 114, 80); + .circle { + transform: translateX(20px); + } + } + } } diff --git a/view-webapp/src/main/sass/tour.scss b/view-webapp/src/main/sass/tour.scss index 55b4e35..cfe55d4 100644 --- a/view-webapp/src/main/sass/tour.scss +++ b/view-webapp/src/main/sass/tour.scss @@ -18,7 +18,7 @@ display: none; } &.edit { - input, select, .edit { + input:not(.hidden), select:not(.hidden), .edit:not(.hidden) { display: initial; } .info, #edit { @@ -29,7 +29,7 @@ div.field:not(.hidden) { display: flex; flex-flow: column nowrap; - justify-content: space-between; + justify-content: space-around; margin: 1px; background-color: #eeeeee; } diff --git a/view-webapp/src/main/webapp/WEB-INF/layouts/standard.html b/view-webapp/src/main/webapp/WEB-INF/layouts/standard.html index 108392a..fad05e1 100644 --- a/view-webapp/src/main/webapp/WEB-INF/layouts/standard.html +++ b/view-webapp/src/main/webapp/WEB-INF/layouts/standard.html @@ -20,7 +20,7 @@ // ]]# - + #* Debugging code to list all web context properties
#foreach($attr in $application.getAttributeNames()) @@ -58,7 +58,7 @@ -
+
@@ -76,6 +76,7 @@ const locale = '${request.locale}'; // #[[ onLoad(() => { + $('body').removeClass('initial'); $('#lang').on('click', e => { $('#lang-list').toggleClass('shown'); }); @@ -90,10 +91,10 @@ } }); $('.popup .close').on('click', e => { - console.log('click'); let popup = e.target.closest('.popup'); if (popup) { popup.classList.remove('shown'); + $('body').removeClass('dimmed'); } }); diff --git a/view-webapp/src/main/webapp/index.html b/view-webapp/src/main/webapp/index.html index 32ce041..4f0d61d 100644 --- a/view-webapp/src/main/webapp/index.html +++ b/view-webapp/src/main/webapp/index.html @@ -13,58 +13,3 @@
#end - -## -## New Tournament dialog -## - - - diff --git a/view-webapp/src/main/webapp/js/domhelper.js b/view-webapp/src/main/webapp/js/domhelper.js index 395d70e..ad4d685 100644 --- a/view-webapp/src/main/webapp/js/domhelper.js +++ b/view-webapp/src/main/webapp/js/domhelper.js @@ -49,7 +49,7 @@ Element.prototype.toggleClass = function(className) { NodeList.prototype.hasClass = function(className) { return this.item(0).classList.contains(className); } -Element.prototype.toggleClass = function(className) { +Element.prototype.hasClass = function(className) { this.classList.contains(className); } Node.prototype.offset = function() { @@ -102,3 +102,17 @@ Element.prototype.text = function(txt) { this.textContent = txt; } } +NodeList.prototype.item = function (i) { + return this[+i || 0]; +}; +NodeList.prototype.find = function(selector) { + let result = []; + this.forEach(function (elem, i) { + let partial = elem.find(selector); + result = result.concat([...partial]); + }); + return Reflect.construct(Array, result, NodeList); +} +Element.prototype.find = function (selector) { + return this.querySelectorAll(':scope ' + selector); +} diff --git a/view-webapp/src/main/webapp/js/main.js b/view-webapp/src/main/webapp/js/main.js index fc0db8a..ace4781 100644 --- a/view-webapp/src/main/webapp/js/main.js +++ b/view-webapp/src/main/webapp/js/main.js @@ -136,19 +136,27 @@ function spinner(show) { else $('#backdrop').removeClass('active'); } +function modal(id) { + $('body').addClass('dimmed'); + $(`#${id}.popup`).addClass('shown'); +} + onLoad(() => { - /* - document.on('click', e => { - if (!e.target.closest('.modal')) $('.modal').hide(); - }) + $('button.close').on('click', e => { + let modal = e.target.closest('.popup'); + if (modal) { + modal.removeClass('shown'); + $('body').removeClass('dimmed'); + } + }); + $('.checkbox').on('click', e => { + let chk = e.target.closest('.checkbox'); + chk.toggleClass('active'); + let checkbox = chk.find('input')[0]; + checkbox.checked = !checkbox.checked; + }); + /* commented for now - do we want this? + $('#dimmer').on('click', e => $('.popup').removeClass('shown'); */ - $('i.close.icon').on('click', e => { - let modal = e.target.closest('.modal'); - if (modal) modal.modal(false); - }); - $('.modal .actions .cancel').on('click', e => { - e.target.closest('.modal').modal(false); - }); - $('#dimmer').on('click', e => $('.modal').modal(false)); }); diff --git a/view-webapp/src/main/webapp/js/tour-information.inc.js b/view-webapp/src/main/webapp/js/tour-information.inc.js index 34e351e..4c11c23 100644 --- a/view-webapp/src/main/webapp/js/tour-information.inc.js +++ b/view-webapp/src/main/webapp/js/tour-information.inc.js @@ -7,7 +7,7 @@ onLoad(() => { $('#cancel, #close').on('click', e => { e.preventDefault(); - if ($('#tournament-infos').hasClass('edit')) { + if ($('#tournament-infos').hasClass('edit') && typeof(tour_id) !== 'undefined') { $('#tournament-infos').removeClass('edit') } else { document.location.href = '/index'; diff --git a/view-webapp/src/main/webapp/js/tour-registration.inc.js b/view-webapp/src/main/webapp/js/tour-registration.inc.js new file mode 100644 index 0000000..b7ed768 --- /dev/null +++ b/view-webapp/src/main/webapp/js/tour-registration.inc.js @@ -0,0 +1,9 @@ +onLoad(() => { + $('input.numeric').imask({ + mask: Number, + scale: 0, + min: 0, + max: 4000 + }); + //$('') +}); diff --git a/view-webapp/src/main/webapp/tour-information.inc.html b/view-webapp/src/main/webapp/tour-information.inc.html index 2118d98..ae624fc 100644 --- a/view-webapp/src/main/webapp/tour-information.inc.html +++ b/view-webapp/src/main/webapp/tour-information.inc.html @@ -1,4 +1,4 @@ -
+
diff --git a/view-webapp/src/main/webapp/tour-registration.inc.html b/view-webapp/src/main/webapp/tour-registration.inc.html index 677eea7..55987a6 100644 --- a/view-webapp/src/main/webapp/tour-registration.inc.html +++ b/view-webapp/src/main/webapp/tour-registration.inc.html @@ -14,31 +14,100 @@ $parts