Adding slide to pronoun preset selection
This commit is contained in:
parent
09890c3fe9
commit
39068091bc
|
|
@ -132,18 +132,35 @@ label {
|
|||
align-items: center;
|
||||
text-wrap: nowrap;
|
||||
gap: 6px;
|
||||
margin-top: 20px;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.primary-promt input {
|
||||
font-size: 50px;
|
||||
#header-name {
|
||||
margin-bottom: 17.25px;
|
||||
}
|
||||
|
||||
#header-pov {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 21.25px;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
#other {
|
||||
display: none; /* Modified by options.js */
|
||||
gap: 6px;
|
||||
margin-top: 12px;
|
||||
display: grid;
|
||||
overflow: hidden;
|
||||
margin-top: 8px;
|
||||
margin-left: 18px;
|
||||
gap: 6px;
|
||||
height: 0;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
#other.show-other {
|
||||
height: 297px; /* Height of other options */
|
||||
}
|
||||
|
||||
#header-pov.show-other {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
#other li {
|
||||
|
|
@ -217,6 +234,7 @@ h1 {
|
|||
ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -225,8 +243,7 @@ ul {
|
|||
display: grid;
|
||||
grid-template-columns: 7fr 5fr;
|
||||
gap: 8px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
button:not(.delete) {
|
||||
|
|
@ -246,8 +263,6 @@ button:not(.delete) {
|
|||
#button-grid > button {
|
||||
border-radius: .5em;
|
||||
width: 100%;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
gap: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -349,11 +364,11 @@ button:not(.delete):active > svg {
|
|||
}
|
||||
|
||||
#toggle:hover {
|
||||
background-color: var(--color-l-red-10);
|
||||
background-color: var(--color-l-red-10);
|
||||
}
|
||||
|
||||
#toggle:active {
|
||||
background-color: var(--color-l-red-20);
|
||||
background-color: var(--color-l-red-20);
|
||||
}
|
||||
|
||||
#toggle.is-on {
|
||||
|
|
@ -375,7 +390,7 @@ background-color: var(--color-l-red-20);
|
|||
|
||||
#configuration {
|
||||
background-color: var(--color-l-gray-10);
|
||||
padding: 10px;
|
||||
padding: 16px 10px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: .5em;
|
||||
margin-top: var(--small-text);
|
||||
|
|
@ -389,42 +404,6 @@ label {
|
|||
font-size: 50px;
|
||||
}
|
||||
|
||||
#other {
|
||||
display: none; /* Modified by options.js */
|
||||
gap: 6px;
|
||||
margin-top: 12px;
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
#other li {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
#other > li > label {
|
||||
font-size: var(--small-text);
|
||||
text-align: right;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
#other > li > input {
|
||||
font-size: var(--small-text);
|
||||
}
|
||||
|
||||
#other > li > select {
|
||||
font-size: var(--small-text);
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
#also > li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.lhs {
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -454,10 +433,11 @@ label {
|
|||
|
||||
#links {
|
||||
text-align: right;
|
||||
padding: var(--small-text) 0;
|
||||
}
|
||||
|
||||
#links > li {
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -22,14 +22,14 @@
|
|||
<form id="options">
|
||||
<h2 class="visually-hidden">Name</h2>
|
||||
|
||||
<div class="primary-prompt">
|
||||
<div id="header-name" class="primary-prompt">
|
||||
<label for="name">My name is</label>
|
||||
<input type="text" id="name" name="name">
|
||||
</div>
|
||||
|
||||
<h2 class="visually-hidden">Pronouns</h2>
|
||||
|
||||
<div class="primary-prompt">
|
||||
<div id="header-preset" class="primary-prompt">
|
||||
<label for="preset">My pronouns are</label>
|
||||
<select id="preset" name="preset">
|
||||
<option value=""></option>
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
|
||||
<h2 class="visually-hidden">Perspective</h2>
|
||||
|
||||
<div class="primary-prompt">
|
||||
<div id="header-pov" class="primary-prompt">
|
||||
<label for="pov">I prefer to read in</label>
|
||||
<select id="pov" name="pov">
|
||||
<option value=""></option>
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
|
||||
<h2 class="visually-hidden">Also replace</h2>
|
||||
|
||||
<label class="primary-prompt" for="lhs-1">I also want to replace...</label>
|
||||
<label id="header-also" for="lhs-1">I also want to replace...</label>
|
||||
|
||||
<ul id="also"></ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -238,10 +238,13 @@ function setFinal(li, isFinal) {
|
|||
/* Displays more options for pronouns if "other" is selected */
|
||||
function showOther() {
|
||||
let other = document.querySelector("#other");
|
||||
let headerPov = document.querySelector("#header-pov");
|
||||
if (document.querySelector("#preset").value == "other") {
|
||||
other.style.display = "grid";
|
||||
other.classList.add("show-other");
|
||||
headerPov.classList.add("show-other");
|
||||
} else {
|
||||
other.style.display = "none";
|
||||
other.classList.remove("show-other");
|
||||
headerPov.classList.remove("show-other");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue