heonian.org/heonian-conversation
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

design changes for popup

Browse Source
This commit is contained in:
remi 2022-05-06 17:07:07 +02:00
parent cb09f7235d
commit 6823641f73
4 changed files with 39 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
html/pop_up.html
View File

@ -1,16 +1,18 @@
<div id="popup-container" style="opacity: 0; pointer-events: none;">
<div id="popup">
<h1>um</h1>
<div>
<b><span id="popup-e">heonian: </span></b><span id="popup-heo"></span><br>
<p id="popup-heo"></p>
<div class="spacer"></div>
<div id="popup-middle">
<b>type: </b><span id="popup-type"></span><br>
<div id="popup-quirks-container"><b>quirks:</b> <span id="popup-quirks"></span></div>
<div id="popup-quirks-container"><span id="popup-quirks"></span></div>
</div>
<div class="spacer"></div>
<p id="popup-meaning"></p>
</div>
</div>
<div id="smol-popup" style="opacity: 0; pointer-events: none;">
<h1>um</h1>
<p id="smol-meaning"></p>
<p style="font-size:0.75rem">click for more info!</p>
<p>click for more info!</p>
</div>

3
main.js
View File

@ -137,12 +137,10 @@ function showPopup(ogword, word, quirks = "") {
p.querySelector("h1").innerText = words[word]["romanizationProper"];
p.querySelector("#popup-heo").innerText = words[word]["heonian"];
p.querySelector("h1").style.fontFamily = "var(--font-normal)";
p.querySelector("#popup-e").innerText = "heonian: ";
} else {
p.querySelector("h1").innerText = words[word]["heonian"];
p.querySelector("#popup-heo").innerText = words[word]["romanizationProper"];
p.querySelector("h1").style.fontFamily = "var(--font-heonian)";
p.querySelector("#popup-e").innerText = "romanization: ";
}
p.querySelector("#popup-type").innerText = words[word]["type"];
p.querySelector("#popup-meaning").innerText = words[word]["meaning"];
@ -161,7 +159,6 @@ function showPopup(ogword, word, quirks = "") {
p.querySelector("#popup-meaning").innerText = quirkBadges[quirk]["description"];
p.querySelector("#popup-type").innerText = quirkBadges[quirk]["type"];
p.querySelector("#popup-quirks-container").style.display = "none";
p.querySelector("#popup-e").innerText = "bending: ";
p.querySelector("#popup-heo").innerText = quirkBadges[quirk]["bending"];
}
} catch (e) {

10
test.html
View File

@ -4292,18 +4292,20 @@ fayu
<div id="popup-container" style="opacity: 0; pointer-events: none;">
<div id="popup">
<h1>um</h1>
<div>
<b><span id="popup-e">heonian: </span></b><span id="popup-heo"></span><br>
<p id="popup-heo"></p>
<div class="spacer"></div>
<div id="popup-middle">
<b>type: </b><span id="popup-type"></span><br>
<div id="popup-quirks-container"><b>quirks:</b> <span id="popup-quirks"></span></div>
<div id="popup-quirks-container"><span id="popup-quirks"></span></div>
</div>
<div class="spacer"></div>
<p id="popup-meaning"></p>
</div>
</div>
<div id="smol-popup" style="opacity: 0; pointer-events: none;">
<h1>um</h1>
<p id="smol-meaning"></p>
<p style="font-size:0.75rem">click for more info!</p>
<p>click for more info!</p>
</div>
</main>
<script src="main.js"></script>

31
text_analysis.css
View File

@ -13,6 +13,7 @@
--right-color: #61ce61;
--font-normal: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--font-heonian: "heonian", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--popup-bg: rgba(255,255,255,0.6);
}
@media (prefers-color-scheme: dark) {
@ -24,6 +25,7 @@
--spacer-color-2: rgba(255, 255, 255, 0.2);
--left-color: rgb(38,37,40);
--right-color: #61ce61;
--popup-bg: rgba(30,30,30,0.6);
}
}
@ -174,7 +176,9 @@ main {
#popup {
width: 300px;
background-color: var(--left-color);
background-color: var(--popup-bg);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-radius: 8px;
padding: 8px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
@ -183,7 +187,9 @@ main {
#smol-popup {
width: 200px;
background-color: var(--left-color);
background-color: var(--popup-bg);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-radius: 8px;
padding: 8px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
@ -192,24 +198,41 @@ main {
left: 0;
transition: opacity 0.3s;
text-align: center;
/* padding-top: 0px; account for Funny */
}
#popup h1 {
#popup h1, #smol-popup h1 {
text-align: center;
margin: 0;
}
#smol-popup h1 {
#smol-popup p {
margin: 0;
}
#smol-popup p:last-child {
font-size: 0.75rem;
color: var(--spacer-color);
margin-top: 4px;
}
#popup-heo, #smol-heo {
font-family: "heonian";
text-align: center;
margin: 4px;
margin-bottom: 8px;
}
#popup-middle, #popup-meaning {
padding: 8px;
margin: 0;
}
#popup-quirks {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
margin-top: 8px;
}
#popup-quirks * {