Skip to content

Commit

Permalink
Combine header and search form (#20)
Browse files Browse the repository at this point in the history 
This change gives more space to definitions and examples, which is
particularly important on smaller screens. A logo is substituted for
the text header in the main view, and the text header is re-shown
(without the search form) in menu and stats views.
TODO: is the logo right, or would an abbreviated text header be
better? Or something else?
  • Loading branch information
@mreichhoff
mreichhoff committed Jan 28, 2024
1 parent cb0e461 commit 7de588f
Show file tree
Hide file tree
Showing 7 changed files with 287 additions and 206 deletions.
64 changes: 31 additions & 33 deletions public/components/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,13 @@
<div id="left-menu-button-container" class="left-menu-button-container">
<i id="left-menu-button" class="menu-button"></i>
</div>
<h1 id="main-header" class="main-header">HanziGraph</h1>
<img class="logo" src="/images/hanzigraph-192x192.png"/>
<h1 id="text-header" style="display:none">HanziGraph</h1>
<form id="search-form">
<input id="hanzi-box" aria-label="Pick a hanzi or word" placeholder="Pick a hanzi or word" type="search"
enterkeyhint="search" class="primary-input" autocapitalize="off" autocomplete="off" />
<ul id="search-suggestions-container" class="search-suggestions" style="display:none"></ul>
</form>
<div id="right-menu-button-container" class="right-menu-button-container">
<a href="https://github.com/mreichhoff/HanziGraph/blob/main/README.md">
<svg stroke="currentColor" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
Expand All @@ -113,42 +119,34 @@ <h1 id="main-header" class="main-header">HanziGraph</h1>
</div>
</header>
<div id="main-app-container" class="primary-container">
<div id="controls" class="control-container">
<form id="search-form">
<input id="hanzi-box" aria-label="Choose any hanzi" placeholder="Choose any hanzi" type="search"
enterkeyhint="search" class="primary-input" autocapitalize="off" autocomplete="off" />
</form>
</div>
<div id="data-container" class="output-container">
<div id="text-container" class="primary-panel">
<div id="explore-container" class="section-container">
<p style="display:none" id="not-found-message">No data found 😞. Please try another.</p>
<div id="walkthrough" class="walkthrough">
<p>To get started, click the diagram, or search for any character.</p>
<p>The diagram shows the components of each character, the components of its components, and so
on.</p>
<p>
The diagram is color-coded by tone. When a component has similar pronunciation with its
parent, a label with pinyin (initial, final, or both) is shown. </p>
<p>Pinyin rules can be found on
<a class="active-link" href="https://pinyin.info/rules/initials_finals.html">pinyin.info</a>
</p>
</div>
<div id="examples">
</div>
<div id="text-container" class="primary-panel">
<div id="explore-container" class="section-container">
<p style="display:none" id="not-found-message">No data found 😞. Please try another.</p>
<div id="walkthrough" class="walkthrough">
<p>To get started, click the diagram, or search for any character.</p>
<p>The diagram shows the components of each character, the components of its components, and so
on.</p>
<p>
The diagram is color-coded by tone. When a component has similar pronunciation with its
parent, a label with pinyin (initial, final, or both) is shown. </p>
<p>Pinyin rules can be found on
<a class="active-link" href="https://pinyin.info/rules/initials_finals.html">pinyin.info</a>
</p>
</div>
</div>
<div id="graph-container" class="primary-panel">
<div id="tone-legend" class="legend">
<span class="tone1">1st tone</span>
<span class="tone2">2nd tone</span>
<span class="tone3">3rd tone</span>
<span class="tone4">4th tone</span>
<span class="tone-neutral">Other</span>
<div id="examples">
</div>
<div id="graph" class="graph"></div>
</div>
</div>
<div id="graph-container" class="primary-panel">
<div id="tone-legend" class="legend">
<span class="tone1">1st tone</span>
<span class="tone2">2nd tone</span>
<span class="tone3">3rd tone</span>
<span class="tone4">4th tone</span>
<span class="tone-neutral">Other</span>
</div>
<div id="graph" class="graph"></div>
</div>
</div>
<div id="menu-container" style="display:none">
<main class="menu">
Expand Down
122 changes: 79 additions & 43 deletions public/css/hanzi-graph.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@
--primary-font-color: rgba(0, 0, 0, 0.87);
--primary-font: Roboto, Helvetica, Arial, sans-serif;
--primary-font-weight: 300;
--primary-header-height: 40px;
--primary-header-height: 50px;
--primary-header-font-size: 30px;
--header-background-color: #eee7;
--secondary-header-font-size: 30px;
--tertiary-header-font-size: 22px;
--secondary-control-font-size: 14px;
Expand All @@ -24,9 +25,11 @@
--input-background-color: #fff;
--primary-input-box-shadow: 0 2px 3px 1px #eeee;
--positive-button-color: #6de200;
--right-button-margin: 10px 0 0 20px;
--menu-button-margin: 18px 0 0 0;
--primary-container-height: calc(100% - 42px);
--right-button-height: 22px;
/* I was told there would be no math */
--right-button-margin: calc((var(--primary-header-height) - var(--right-button-height)) / 2) 0 0 20px;
--menu-button-margin: calc(var(--primary-header-height) / 2 - 2px) 0 0 0;
--primary-container-height: calc(100% - (var(--primary-header-height) + 2px));
--legend-height: 20px;
--graph-height: calc(100% - var(--legend-height) - 4px);
--section-container-margin: 0 20px;
Expand All @@ -35,7 +38,6 @@
--bar-chart-height: 400px;
--bar-chart-width: 600px;
--bar-chart-font-size: 14px;
--output-container-height: calc(100% - 58px);
--controls-padding: 14px;
--study-result-buttons-width: 50%;
--legend-font-size: 14px;
Expand All @@ -55,6 +57,8 @@
--button-border-bottom: 3px solid var(--accent-color);
--graph-expand-button-box-shadow: 2px 2px #444;
--tag-border: 2px solid #333;
--examples-top-margin: 14px;
--graph-margin-top: 14px;
}

html {
Expand Down Expand Up @@ -107,10 +111,46 @@ ul {

.header {
display: grid;
grid-template-columns: 50px 1fr 50px;
grid-template-columns: 50px 44px 1fr 50px;
height: var(--primary-header-height);
text-align: center;
border-bottom: var(--border);
box-shadow: var(--primary-input-box-shadow);
background-color: var(--header-background-color);
}

.header.has-suggestions {
height: auto;
}

.header h1 {
/* keep it centered despite the logo, which gets 44px in the grid template */
margin-right: 44px;
line-height: var(--primary-header-height);
}

.header .logo {
height: 30px;
line-height: 30px;
width: 32px;
/* (header height - this element's height - border width*2) all over 2 */
margin-top: calc((var(--primary-header-height) - 30px - 6px) / 2);
border-radius: 50%;
background-color: var(--tone-4-color);
font-size: 20px;
font-weight: 400;
color: #000;
user-select: none;
border: 3px solid black;
cursor: pointer;
}

.header .logo.freq {
background-color: var(--tone-1-color);
}

.header.has-suggestions {
height: auto;
}

.control-container {
Expand All @@ -122,29 +162,21 @@ ul {
}

.primary-input {
width: 80%;
width: 90%;
max-width: 600px;
text-align: center;
height: var(--search-input-height);
font-size: var(--search-font-size);
margin: 10px auto auto 0;
margin: 9px auto;
padding: 0;
text-align: center;
border: var(--border);
border-radius: 16px;
box-shadow: var(--primary-input-box-shadow);
}

#walkthrough-character-set {
font-weight: bold;
}

.primary-container {
height: var(--primary-container-height);
}

.output-container {
height: var(--output-container-height);
/* TODO: should probably be grid, but that interacts strangely with cytoscape resizing */
display: flex;
max-width: 1300px;
margin: 0 auto;
Expand All @@ -154,6 +186,7 @@ ul {
width: 50%;
display: flex;
flex-direction: column;
margin: var(--primary-panel-margin);
}

.section-container {
Expand All @@ -178,11 +211,14 @@ ul {
margin-top: 10px;
}

#graph,
#flow-diagram-container {
#graph {
height: var(--graph-height);
}

#graph-container {
margin-top: var(--graph-margin-top);
}

.flow-explanation {
margin: 10px auto;
text-align: center;
Expand All @@ -192,7 +228,11 @@ ul {
#examples {
/* avoid scrollbars while animations run, otherwise unnecessary */
overflow-x: hidden;
margin-top: 4px;
margin-top: var(--examples-top-margin);
}

#examples .explanation {
font-weight: bold;
}

#examples .explanation {
Expand Down Expand Up @@ -449,11 +489,6 @@ h2.word-header {
margin-top: 6px;
}

.suggestions-explanation {
font-size: var(--instructions-font-size);
margin-top: 4px;
}

.context,
.coverage-explanation {
font-size: var(--instructions-font-size);
Expand Down Expand Up @@ -541,7 +576,7 @@ h2.word-header {
height: 30px;
border: 2px solid;
border-radius: 4px;
margin-top: 2px;
margin-top: calc((var(--primary-header-height) - 30px) / 2);
}

.exit-button::after,
Expand Down Expand Up @@ -574,7 +609,7 @@ h2.word-header {
position: relative;
display: block;
width: 20px;
height: 22px;
height: var(--right-button-height);
border: 2px solid;
border-radius: 3px;
cursor: pointer;
Expand Down Expand Up @@ -611,7 +646,7 @@ h2.word-header {
position: relative;
display: inline-block;
width: 22px;
height: 22px;
height: var(--right-button-height);
border: 2px solid;
border-radius: 100px;
margin: var(--right-button-margin);
Expand All @@ -633,6 +668,11 @@ h2.word-header {
transform: rotate(45deg)
}

.left-menu-button-container,
.right-menu-button-container {
cursor: pointer;
}

.right-menu-button-container .check {
border: 2px solid var(--legend-gradient-start);
}
Expand Down Expand Up @@ -720,7 +760,7 @@ h2.word-header {
position: absolute;
border-radius: 3px;
width: 2px;
height: 8px;
height: 10px;
background: currentColor;
transform: rotate(-45deg);
top: 10px;
Expand Down Expand Up @@ -841,6 +881,7 @@ h2.word-header {
text-align: center;
list-style-type: none;
overflow: hidden;
background-color: var(--background-color);
}

.search-suggestion {
Expand Down Expand Up @@ -1186,6 +1227,7 @@ main.auth-form {
@media (prefers-color-scheme: dark) {
:root {
--background-color: #121212;
--header-background-color: #121212;
--primary-font-color: rgba(255, 255, 255, 0.87);
--border: 1px solid #333;
--link-font-color: #68aaee;
Expand Down Expand Up @@ -1216,22 +1258,17 @@ main.auth-form {
:root {
--primary-header-font-size: 26px;
--tertiary-header-font-size: 20px;
--primary-header-height: 34px;
--right-button-margin: 6px 0 0 20px;
--menu-button-margin: 16px 0 0 0;
--primary-container-height: calc(100% - 35px);
--search-input-height: 26px;
--search-font-size: 18px;
--output-container-height: calc(100% - 48px);
--study-result-buttons-width: 80%;
--instructions-font-size: 14px;
--target-language-font-size: 22px;
--controls-padding: 10px;
--examples-top-margin: 14px;
--graph-margin-top: 0;
}

/* TODO(refactor): this is a result of oddities with grid + cytoscape + window resize */
/* ideally only variables */
.output-container {
.primary-container {
display: block;
}

Expand All @@ -1240,20 +1277,19 @@ main.auth-form {
}

#text-container {
height: 45%;
height: 50%;
}

/* TODO(refactor): why is this media query using graph-container but the main one uses graph? */
#graph-container,
#flow-diagram-container {
height: 55%;
#graph-container {
height: 50%;
border-top: var(--border);
}

/* should be unreachable other than when this media query is reached... */
@keyframes expand-panel {
0% {
height: 45%;
height: 50%;
}

100% {
Expand All @@ -1271,7 +1307,7 @@ main.auth-form {
}

100% {
height: 45%;
height: 50%;
}
}

Expand Down
Loading

0 comments on commit 7de588f

Please sign in to comment.