From eacb89176c34cb2e1bdfbfafa80b9e499d75938f Mon Sep 17 00:00:00 2001 From: Pax1601 Date: Tue, 7 Nov 2023 17:37:19 +0100 Subject: [PATCH] Completed new resizable design --- client/public/stylesheets/layout/layout.css | 3 +- client/public/stylesheets/other/toolbar.css | 5 +-- .../public/stylesheets/panels/unitcontrol.css | 7 ++--- client/public/stylesheets/panels/unitinfo.css | 31 ++++++++++++++++--- .../images/icons/circle-info-solid.svg | 1 + client/src/panels/unitcontrolpanel.ts | 9 ++++++ client/views/panels/unitcontrol.ejs | 2 +- client/views/panels/unitinfo.ejs | 1 + 8 files changed, 47 insertions(+), 12 deletions(-) create mode 100644 client/public/themes/olympus/images/icons/circle-info-solid.svg diff --git a/client/public/stylesheets/layout/layout.css b/client/public/stylesheets/layout/layout.css index 3a85782b..ba4adc98 100644 --- a/client/public/stylesheets/layout/layout.css +++ b/client/public/stylesheets/layout/layout.css @@ -42,6 +42,7 @@ #unit-control-panel { height: fit-content; + width: fit-content; left: 10px; position: absolute; z-index: 9999; @@ -51,7 +52,7 @@ bottom: 20px; font-size: 12px; position: absolute; - width: 600px; + width: fit-content; z-index: 9999; padding: 24px 30px; display: flex; diff --git a/client/public/stylesheets/other/toolbar.css b/client/public/stylesheets/other/toolbar.css index 69fe943c..c90df5f8 100644 --- a/client/public/stylesheets/other/toolbar.css +++ b/client/public/stylesheets/other/toolbar.css @@ -55,6 +55,7 @@ } #toolbar-container>*:not(:first-child):not(:hover) { + height: 52px; align-items: center; justify-content: center; aspect-ratio: 1/1; @@ -62,8 +63,8 @@ #toolbar-container>*:not(:first-child):not(:hover)>svg { display: block; - width: 30px; - height: 30px; + width: 24px; + height: 24px; filter: invert(); } diff --git a/client/public/stylesheets/panels/unitcontrol.css b/client/public/stylesheets/panels/unitcontrol.css index 2888c6ac..69ecb6b5 100644 --- a/client/public/stylesheets/panels/unitcontrol.css +++ b/client/public/stylesheets/panels/unitcontrol.css @@ -7,14 +7,13 @@ body.feature-forceShowUnitControlPanel #unit-control-panel { flex-direction: row; column-gap: 10px; row-gap: 10px; - width: 350px; } #unit-control-panel>div:nth-child(2) { display: flex; flex-direction: column; row-gap: 10px; - width: 100%; + width: 300px; } #unit-control-panel>*:nth-child(1) { @@ -29,8 +28,8 @@ body.feature-forceShowUnitControlPanel #unit-control-panel { #unit-control-panel>*:nth-child(1) svg { display: flex; - width: 30px; - height: 30px; + width: 24px; + height: 24px; filter: invert(100%); } diff --git a/client/public/stylesheets/panels/unitinfo.css b/client/public/stylesheets/panels/unitinfo.css index 20e8e0b0..3535b5b5 100644 --- a/client/public/stylesheets/panels/unitinfo.css +++ b/client/public/stylesheets/panels/unitinfo.css @@ -1,19 +1,41 @@ #unit-info-panel>* { position: relative; - min-height: 100px; bottom: 0px; } + +#unit-info-panel>*:nth-child(1) { + display: flex; + width: 24px; + height: 24px; + margin: 6px; + filter: invert(100%); +} + +#unit-info-panel:hover>*:nth-child(1) { + display: none; +} + +#unit-info-panel:not(:hover) { + width: fit-content; + height: fit-content; + padding: 10px; + margin: 0px; +} + +#unit-info-panel:not(:hover)>*:not(:first-child) { + display: none; +} #unit-info-panel>.panel-section { border-right: 1px solid #555; padding: 0 30px; } -#unit-info-panel>.panel-section:first-child { +#unit-info-panel>.panel-section:first-of-type { padding-left: 0px; } -#unit-info-panel>.panel-section:last-child { +#unit-info-panel>.panel-section:last-of-type{ padding-right: 0px; } @@ -27,6 +49,7 @@ justify-content: space-between; row-gap: 4px; position: relative; + width: 300px; } #unit-label { @@ -41,7 +64,7 @@ #unit-name { margin-bottom: 4px; padding: 0px 0; - width: 200px; + width: 100%; text-overflow: ellipsis; text-wrap: nowrap; overflow: hidden; diff --git a/client/public/themes/olympus/images/icons/circle-info-solid.svg b/client/public/themes/olympus/images/icons/circle-info-solid.svg new file mode 100644 index 00000000..652acbee --- /dev/null +++ b/client/public/themes/olympus/images/icons/circle-info-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/panels/unitcontrolpanel.ts b/client/src/panels/unitcontrolpanel.ts index d69364ae..1ec769f6 100644 --- a/client/src/panels/unitcontrolpanel.ts +++ b/client/src/panels/unitcontrolpanel.ts @@ -137,10 +137,13 @@ export class UnitControlPanel extends Panel { this.#updateRapidControls(); }); + window.addEventListener("resize", (e: any) => this.#calculateMaxHeight()); + const element = document.getElementById("toolbar-container"); if (element) new ResizeObserver(() => this.#calculateTop()).observe(element); + this.#calculateMaxHeight() this.hide(); } @@ -480,4 +483,10 @@ export class UnitControlPanel extends Panel { if (element) this.getElement().style.top = `${element.offsetTop + element.offsetHeight + 10}px`; } + + #calculateMaxHeight() { + const element = document.getElementById("unit-control-panel-content"); + if (element) + element.style.maxHeight = `${window.innerHeight - this.getElement().offsetTop - 10}px`; + } } \ No newline at end of file diff --git a/client/views/panels/unitcontrol.ejs b/client/views/panels/unitcontrol.ejs index eecba75d..ec9d2b3b 100644 --- a/client/views/panels/unitcontrol.ejs +++ b/client/views/panels/unitcontrol.ejs @@ -1,7 +1,7 @@
-
+

Selected Units

diff --git a/client/views/panels/unitinfo.ejs b/client/views/panels/unitinfo.ejs index 25e35ed1..f1daa12b 100644 --- a/client/views/panels/unitinfo.ejs +++ b/client/views/panels/unitinfo.ejs @@ -1,4 +1,5 @@
+