Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix dropdown bug in guide #573

Draft
wants to merge 18 commits into
base: main
Choose a base branch
from
Draft

fix dropdown bug in guide #573

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
b5b8eeb
add template.js
cn1t Aug 16, 2023
e15846a
Merge branch 'main' into 571-website-bug-fix-dropdown-in-guide-window
cn1t Aug 16, 2023
424a904
i absolutely despise query selectors
cn1t Aug 16, 2023
c76feb0
fix small thing
cn1t Aug 16, 2023
11e7d88
Add clustrmaps
cn1t Aug 17, 2023
3c9c670
Merge branch 'main' into 571-website-bug-fix-dropdown-in-guide-window
cn1t Aug 18, 2023
ee860fa
Remove 1 option
cn1t Aug 18, 2023
cf40b8b
Merge branch '571-website-bug-fix-dropdown-in-guide-window' of https:…
cn1t Aug 18, 2023
37f4314
Comments
cn1t Aug 18, 2023
6f50c5f
this is torture
cn1t Aug 19, 2023
e650e8e
Merge branch 'main' into 571-website-bug-fix-dropdown-in-guide-window
9glenda Aug 20, 2023
628fedb
added a new dropdown implementation written from scratch and simple t…
9glenda Aug 20, 2023
274e0f6
fix ts error and speed up anim
cn1t Aug 20, 2023
efb5ec0
added event listener "change"
9glenda Aug 21, 2023
bbbf958
close dropdowns in new one is open
9glenda Aug 21, 2023
73c50b7
Merge branch 'main' into 571-website-bug-fix-dropdown-in-guide-window
9glenda Aug 22, 2023
febb8aa
Merge branch 'main' into 571-website-bug-fix-dropdown-in-guide-window
9glenda Aug 24, 2023
faad4a4
new dropdown code in guide. I HATE CSS!!!!!!!!
9glenda Aug 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions web/css/guide.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,7 @@ body {
overflow: hidden;
}

.ww,
.us,
.ca,
.uk {
li {
margin-bottom: 1rem;
justify-self: center;
width: auto;
Expand Down
16 changes: 6 additions & 10 deletions web/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,30 +35,26 @@ html {
height: unset !important;
}

.gender-select,
.ethnicity-select,
.religion-select,
.civilstatus-select,
.dropdown-select {
position: relative;
font-family: Arial;
margin-top: 0.5rem;
width: 17rem;
}

.gender-select select,
.ethnicity-select select,
.religion-select select,
.civilstatus-select select,
.dropdown-select select {
display: none;
/*hide original SELECT element:*/
}

.country-select {
margin-top: 0 !important;
}

.select-selected {
margin-bottom: 1rem;
justify-self: center;
width: 20rem;
width: 17rem;
height: 3rem;
border-radius: 1rem;
box-shadow: var(--shadowPreset-3);
Expand All @@ -72,7 +68,7 @@ html {
position: absolute;
content: "";
top: 14px;
right: -3.5rem;
right: 0.5rem;
width: 0;
height: 0;
border: 6px solid transparent;
Expand Down
35 changes: 24 additions & 11 deletions web/guide.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
<link rel="stylesheet" href="./css/guide.css">
<script type="module" src="./dist/ts/framework.js" defer></script>
<script type="module" src="./dist/ts/guide.js" defer></script>
<script type="module" src="./dist/ts/templates.js" defer></script>

<script type="text/javascript" defer>
// Check local storage for theme setting
Expand All @@ -30,19 +31,31 @@
</script>
</head>
<body>
<!-- Templates -->
<template id="dropdown-template">
<div class="dropdown">
<div class="table">
<p class="tag"></p> <!-- Gender -->
<div class="dropdown-select">
<select>
<option></option> <!-- Select gender: -->
</select>
</div>
</div>
</div>
</template>

<div class="dd-nav-bar-top"></div>
<div class="dd-nav-bar">
<div class="country-select">
<select>
<option value="0">Select country:</option>
<option value="WW">WorldWide</option>
<option value="UK">United Kingdom</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="SE">Sweden</option>
<option value="DE">Germany</option>
</select>
</div>
<custom-dropdown title="country" no-tag>
<custom-option>Select country:</custom-option>
<custom-option>WorldWide</custom-option>
<custom-option>United Kingdom</custom-option>
<custom-option>United States</custom-option>
<custom-option>Canada</custom-option>
<custom-option>Sweden</custom-option>
<custom-option>Germany</custom-option>
</custom-dropdown>

<div class="existing-info-form">
<div class="form-option">
Expand Down
5 changes: 4 additions & 1 deletion web/ts/guide.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,10 @@ function preListHandler() {
}
}

document.querySelector(".select-selected")!.addEventListener("DOMSubtreeModified", preListHandler);
const foo = document.querySelector("body > div.dd-nav-bar > custom-dropdown[title='country']")!;
const selectedcountry = foo.shadowRoot!.querySelector("div > div > div > div.select-selected")!;

selectedcountry!.addEventListener("DOMSubtreeModified", preListHandler);

checkboxName.addEventListener('change', preListHandler);

Expand Down
9 changes: 8 additions & 1 deletion web/ts/templates.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,10 @@ class CustomDropdown extends HTMLElement {
// Get dropdown title attribute and set initial values
const dropdownTitleAttr = this.getAttribute("title")!;
const dropdownTitle = dropdownTitleAttr.charAt(0).toUpperCase() + dropdownTitleAttr.slice(1) + ":";
dropdownTitleElement.textContent = dropdownTitle;

if (!this.hasAttribute("no-tag")) {
dropdownTitleElement.textContent = dropdownTitle;
}

// Set initial option for select element
const selElmntTag = selElmnt.children[0] as HTMLOptionElement;
Expand All @@ -43,6 +46,10 @@ class CustomDropdown extends HTMLElement {
const labelText = selElmnt.options[0].innerHTML;
selectSelectedDiv.innerHTML = labelText;

if (this.getAttribute("title") == "country") {
node.classList.add("country-select");
}

const b = document.createElement("div");
b.className = "select-items select-hide";

Expand Down
Loading