weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added .ol-select in a select (icon menu) and some title/tooltips.

Browse Source
This commit is contained in:
PeekabooSteam 2023-03-07 08:59:36 +00:00
parent 3911b8fefe
commit 11a495f4ac
3 changed files with 40 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
client/public/stylesheets/olympus.css
View File

@ -84,80 +84,81 @@ button[disabled="disabled"] {
.ol-select {
color: var( --nav-text );
position: relative;
}
.ol-select .ol-select-value {
.ol-select > .ol-select-value {
align-content: center;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
cursor:pointer;
display:flex;
justify-content: left;
position: relative;
text-align: center;
white-space: nowrap;
width: fit-content;
}
.ol-select:not( .ol-select-image ) .ol-select-value {
.ol-select:not( .ol-select-image ) > .ol-select-value {
background-color: var( --background-grey );
border-radius: var( --border-radius-sm );
padding:1em;
width:100%;
}
.ol-select:not( .ol-select-image ) .ol-select-value:before {
.ol-select:not( .ol-select-image ) > .ol-select-value:before {
content: "[ ]";
margin-right: 10px;
}
.ol-select:not( .ol-select-image ) .ol-select-value:after {
.ol-select:not( .ol-select-image ) > .ol-select-value:after {
content: "[V]";
margin-left:10px;
}
.ol-select .ol-select-options {
.ol-select > .ol-select-options {
overflow:hidden;
max-height: 0;
position: relative;
translate:0 -2px;
}
.ol-select.ol-select-image .ol-select-options {
.ol-select.ol-select-image > .ol-select-options {
position:absolute;
}
.ol-select.is-open .ol-select-options {
.ol-select.is-open > .ol-select-options {
max-height: fit-content;
overflow: visible;
padding:8px 0;
}
.ol-select .ol-select-options > div {
.ol-select > .ol-select-options > div {
background-color: var( --background-grey );
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
display:flex;
justify-content: left;
padding:6px 25px;
width:100%;
}
.ol-select .ol-select-options > div:first-of-type {
.ol-select > .ol-select-options > div:first-of-type {
border-top-left-radius: var( --border-radius-md );
border-top-right-radius: var( --border-radius-md );
padding-top:16px;
}
.ol-select .ol-select-options > div:last-of-type {
.ol-select > .ol-select-options > div:last-of-type {
border-bottom-left-radius: var( --border-radius-md );
border-bottom-right-radius: var( --border-radius-md );
padding-bottom:16px;
}
.ol-select .ol-select-options div hr {
.ol-select > .ol-select-options div hr {
background-color: white;
height:1px;
width:100%;
}
.ol-select .ol-select-options div button {
.ol-select > .ol-select-options div button {
background-color: transparent;
border:none;
border-radius: 0;
@ -169,7 +170,7 @@ button[disabled="disabled"] {
width:fit-content;
}
.ol-select .ol-select-options > div button:hover {
.ol-select > .ol-select-options > div button:hover {
text-decoration: underline;
}

2
client/src/index.ts
View File

@ -75,6 +75,8 @@ function setup() {
// Do open/close toggle
select.addEventListener( "click", ev => {
ev.preventDefault();
ev.stopPropagation();
select.classList.toggle( "is-open" );
});

26
client/views/navbar.ejs
View File

@ -9,6 +9,22 @@
<h2>Olympus</h2>
<p>v0.1.0</p>
</div>
<div>
<div class="ol-select">
<div class="ol-select-value">Current mode</div>
<div class="ol-select-options">
<div>
<button title="Switch to Mode A">Mode A</button>
</div>
<div>
<button title="Switch to Mode B">Mode B</button>
</div>
<div>
<button title="Switch to Mode C">Mode C</button>
</div>
</div>
</div>
</div>
<div>
<hr />
</div>
@ -67,11 +83,11 @@
</div>
<div class="ol-group">
<button>P</button>
<button>G</button>
<button>S</button>
<button>N</button>
<button>T</button>
<button title="Toggle planes visibility">P</button>
<button title="Toggle vehicle visibility">G</button>
<button title="Toggle SAM visibility">S</button>
<button title="Toggle navy visibility">N</button>
<button title="Toggle threat ring visibility">T</button>
</div>
<div class="ol-group ol-group-checkbox">