mirror of
https://github.com/genemecija/learn-morse-code.git
synced 2026-01-20 15:20:24 +01:00
Info, layout, sidebar updates
This commit is contained in:
Gene Mecija
parent
030a0386df
commit
2f19154e90
31
src/App.js
31
src/App.js
|
|
@ -33,10 +33,10 @@ export default React.memo(function App() {
|
|||
const {gameMode} = useContext(GameModeContext)
|
||||
|
||||
function toggleRight() {
|
||||
document.querySelector('.sidebar#right').classList.toggle('hide')
|
||||
document.querySelector('.sidebar#left').classList.toggle('hide')
|
||||
}
|
||||
function toggleLeft() {
|
||||
document.querySelector('.sidebar#left').classList.toggle('hide')
|
||||
document.querySelector('.sidebar#right').classList.toggle('hide')
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -49,8 +49,18 @@ export default React.memo(function App() {
|
|||
<WordListPickerContextProvider>
|
||||
<WordFeederContextProvider>
|
||||
<GameClockContextProvider>
|
||||
<div className="sidebar" id="left" onClick={toggleLeft}>
|
||||
<Info />
|
||||
<div className="sidebar" id="left">
|
||||
<div id="settings-icon" onClick={toggleRight}><i class="ri-settings-3-fill"></i></div>
|
||||
<div id="mainOptions">
|
||||
<h1>Options</h1>
|
||||
<ModePicker />
|
||||
<KeyTypePicker />
|
||||
<WordsPerMinute />
|
||||
{/* {gameMode === 'challenge' &&
|
||||
<WordListPicker />
|
||||
} */}
|
||||
</div>
|
||||
<Legend />
|
||||
</div>
|
||||
<div id="main-interface">
|
||||
|
||||
|
|
@ -78,17 +88,8 @@ export default React.memo(function App() {
|
|||
<MorseButtons />
|
||||
</div>
|
||||
<div className="sidebar" id="right">
|
||||
<div id="settings" onClick={toggleRight}><i class="ri-settings-3-fill"></i></div>
|
||||
<div id="mainOptions">
|
||||
<h2>Options</h2>
|
||||
<ModePicker />
|
||||
<KeyTypePicker />
|
||||
<WordsPerMinute />
|
||||
{/* {gameMode === 'challenge' &&
|
||||
<WordListPicker />
|
||||
} */}
|
||||
</div>
|
||||
<Legend />
|
||||
<div id="info-icon" onClick={toggleLeft}><i class="ri-information-line"></i></div>
|
||||
<Info />
|
||||
</div>
|
||||
</GameClockContextProvider>
|
||||
</WordFeederContextProvider>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import React from "react"
|
||||
import useMorsePlayer from "../hooks/useMorsePlayer"
|
||||
import straight_key from "../images/straight_key.jpg"
|
||||
import electronic_key from "../images/electronic_key.jpg"
|
||||
|
||||
export default React.memo(function Info() {
|
||||
|
||||
|
|
@ -7,37 +9,39 @@ export default React.memo(function Info() {
|
|||
|
||||
return (
|
||||
<div id="info">
|
||||
<h2>Info</h2>
|
||||
<h1>Info</h1>
|
||||
<p>Morse code is a method of communication via short and long tones with standard spacing between each tone.</p>
|
||||
|
||||
<h3>Dits and Dahs</h3>
|
||||
<h2>Dits and Dahs</h2>
|
||||
<p>
|
||||
<b>Dit</b> <i className="ri-volume-up-fill" onClick={() => playMorseWord('.')}></i><br />
|
||||
<h3>Dit</h3> <i className="ri-volume-up-fill" onClick={() => playMorseWord('.')}></i><br />
|
||||
Denoted as a dot (.), dits are short tones and are base unit of morse code.<br />
|
||||
<b>Dah</b> <i className="ri-volume-up-fill" onClick={() => playMorseWord('-')}></i><br />
|
||||
<h3>Dah</h3> <i className="ri-volume-up-fill" onClick={() => playMorseWord('-')}></i><br />
|
||||
Denoted as a dash (-), dahs are long tones the length of three dits.
|
||||
</p>
|
||||
|
||||
<h3>Spacing</h3>
|
||||
<h2>Spacing</h2 >
|
||||
<p>
|
||||
<b>Intra-character Spacing</b> <i className="ri-volume-up-fill" onClick={() => playMorseWord('...')}></i><br />
|
||||
<h3>Intra-character Spacing</h3> <i className="ri-volume-up-fill" onClick={() => playMorseWord('...')}></i><br />
|
||||
Silence between dits and dahs the length of one dit. Three dits separated by dit-long spaces is an "S".<br />
|
||||
<b>Inter-character Spacing</b> <i className="ri-volume-up-fill" onClick={() => playMorseWord('. . .')}></i><br />
|
||||
<h3>Inter-character Spacing</h3> <i className="ri-volume-up-fill" onClick={() => playMorseWord('. . .')}></i><br />
|
||||
Silence the length of 3 dits. Three dits separated by three-dit-long spaces is "EEE".<br />
|
||||
<b>Inter-word Spacing</b> <i className="ri-volume-up-fill" onClick={() => playMorseWord('././.')}></i><br />
|
||||
<h3>Inter-word Spacing</h3> <i className="ri-volume-up-fill" onClick={() => playMorseWord('././.')}></i><br />
|
||||
Silence the length of 7 dits. Three dits separated by seven-dit-long spaces is "E E E".
|
||||
</p>
|
||||
|
||||
<h3>Speed</h3>
|
||||
<h2>Speed</h2 >
|
||||
<p>
|
||||
Adjusting the <b>WPM</b> (Words Per Minute) in the Options Menu on the right sidebar will adjust the lengths of the dits, dahs, and spacing accordingly.
|
||||
</p>
|
||||
|
||||
<h3>Telegraph Key Types</h3>
|
||||
<h2>Telegraph Key Types</h2 >
|
||||
<p>The instrument used to send morse code is called the key.</p>
|
||||
<img src='./media/images/straight_key.jpg' alt="Straight Key"></img>
|
||||
<p><b>Straight Keys</b> use a single button and generates tones when pressed down. Straight keys require greater accuracy as you control the dits, dahs, and spacing manually.</p>
|
||||
<img src={"../media/images/electronic_key.jpg"} alt="Electronic Key"></img>
|
||||
|
||||
<center><img src={straight_key} alt="Straight Key" /></center>
|
||||
<p><b>Straight Keys</b> use a single button and generates tones when pressed down. Straight keys require greater accuracy as you control the dits, dahs, and spacing manually.</p><br/>
|
||||
|
||||
<center><img src={electronic_key} alt="Electronic Key"></img></center>
|
||||
<p><b>Electronic Keys</b> automatically generate dits or dahs of appropriate length. The Electronic Keyer used here is an Iambic keyer. It uses two paddles, one for dits, one for dahs. Switch between the two at the appropriate times to build letters.</p>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -10,10 +10,20 @@ function Legend() {
|
|||
function handleClick(e) {
|
||||
e.preventDefault()
|
||||
|
||||
let word = e.target.innerHTML
|
||||
let newWord = convertWordToMorse(word)
|
||||
console.log(newWord);
|
||||
playMorseWord(newWord)
|
||||
let word = e.target.innerText
|
||||
|
||||
// let newWord = word
|
||||
|
||||
if (e.target.className === 'alpha') {
|
||||
word = convertWordToMorse(word)
|
||||
}
|
||||
|
||||
if (e.target.id === 'test') {
|
||||
word = convertWordToMorse(e.target.innerText)
|
||||
}
|
||||
|
||||
console.log(word);
|
||||
playMorseWord(word)
|
||||
}
|
||||
|
||||
function convertWordToMorse(word) {
|
||||
|
|
@ -26,16 +36,16 @@ function Legend() {
|
|||
}
|
||||
|
||||
const legend = Object.keys(morseCode).map((morse, index) =>
|
||||
<div key={"legend_item_"+index} className="item">
|
||||
<button key={"legend_btn_"+index} onClick={handleClick}>{morse.toUpperCase()}</button>
|
||||
<span key={"legend_spn_"+index}>{morseCode[morse]}</span>
|
||||
</div>
|
||||
<button key={"legend_item_"+index} className="item" onClick={handleClick}>
|
||||
<span className="alpha" key={"legend_btn_"+index}>{morse.toUpperCase()}</span>
|
||||
<span className="morse" key={"legend_spn_"+index}>{morseCode[morse]}</span>
|
||||
</button>
|
||||
)
|
||||
|
||||
return (
|
||||
<div id="legend">
|
||||
<div id="title">
|
||||
<h2>Morse Code Alphabet</h2>
|
||||
<h1>Morse Code</h1>
|
||||
</div>
|
||||
<div id="legend-items">
|
||||
{legend}
|
||||
|
|
|
|||
204
src/css/App.css
204
src/css/App.css
|
|
@ -59,9 +59,10 @@ html, body {
|
|||
min-width: -webkit-fit-content;
|
||||
min-width: -moz-fit-content;
|
||||
min-width: fit-content;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
|
|
@ -73,7 +74,6 @@ html, body {
|
|||
}
|
||||
|
||||
#main-content .sidebar#left {
|
||||
border: 1px solid yellowgreen;
|
||||
background: #f1f1f1;
|
||||
-webkit-box-shadow: 3px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 3px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
|
|
@ -84,44 +84,69 @@ html, body {
|
|||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-box-pack: space-evenly;
|
||||
-ms-flex-pack: space-evenly;
|
||||
justify-content: space-evenly;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
height: calc(100% - 5em);
|
||||
min-width: 500px;
|
||||
width: 500px;
|
||||
min-width: 400px;
|
||||
width: 30%;
|
||||
margin-top: 50px;
|
||||
padding: 1.5em;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 100;
|
||||
-webkit-transition: all 300ms ease-in-out;
|
||||
transition: all 300ms ease-in-out;
|
||||
-webkit-transition: all 500ms ease-in-out;
|
||||
transition: all 500ms ease-in-out;
|
||||
}
|
||||
|
||||
#main-content .sidebar#left #mainOptions, #main-content .sidebar#left #legend {
|
||||
-webkit-transition: all 500ms ease-in-out;
|
||||
transition: all 500ms ease-in-out;
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
#main-content .sidebar#left #mainOptions h1, #main-content .sidebar#left #legend h1 {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
#main-content .sidebar#left.hide {
|
||||
background: blue;
|
||||
left: -460px;
|
||||
left: calc(-30% + 40px);
|
||||
top: 0px;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
#main-content .sidebar#left #info {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
line-height: 1.5em;
|
||||
#main-content .sidebar#left.hide #mainOptions, #main-content .sidebar#left.hide #legend {
|
||||
opacity: 0%;
|
||||
}
|
||||
|
||||
#main-content .sidebar#left #info h3 {
|
||||
font-family: "Roboto", sans-serif;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5;
|
||||
#main-content .sidebar#left.hide #settings {
|
||||
-webkit-transform: rotateZ(270deg);
|
||||
transform: rotateZ(270deg);
|
||||
}
|
||||
|
||||
#main-content .sidebar#left #info p {
|
||||
margin-bottom: 10px;
|
||||
#main-content .sidebar#left #settings-icon {
|
||||
width: -webkit-fit-content;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
height: -webkit-fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 5px;
|
||||
-webkit-transition: all 500ms ease-in-out;
|
||||
transition: all 500ms ease-in-out;
|
||||
}
|
||||
|
||||
#main-content .sidebar#left #settings-icon i {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#main-content .sidebar#right {
|
||||
border: 1px solid green;
|
||||
background: #f1f1f1;
|
||||
-webkit-box-shadow: -3px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: -3px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
|
|
@ -132,40 +157,62 @@ html, body {
|
|||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
height: calc(100% - 5em);
|
||||
min-width: 400px;
|
||||
width: 400px;
|
||||
padding: 1.5em;
|
||||
padding-top: 70px;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
margin-top: 50px;
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
right: 0;
|
||||
height: calc(100% - 5em);
|
||||
min-width: 400px;
|
||||
width: 30%;
|
||||
z-index: 100;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
line-height: 1.5em;
|
||||
-webkit-transition: all 300ms ease-in-out;
|
||||
transition: all 300ms ease-in-out;
|
||||
-webkit-transition: all 500ms ease-in-out;
|
||||
transition: all 500ms ease-in-out;
|
||||
}
|
||||
|
||||
#main-content .sidebar#right.hide {
|
||||
background: blue;
|
||||
right: -360px;
|
||||
right: calc(-30% + 43px);
|
||||
}
|
||||
|
||||
#main-content .sidebar#right.hide #mainOptions, #main-content .sidebar#right.hide #legend {
|
||||
#main-content .sidebar#right.hide #info {
|
||||
opacity: 0%;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
#main-content .sidebar#right.hide #settings {
|
||||
-webkit-transform: rotateZ(270deg);
|
||||
transform: rotateZ(270deg);
|
||||
#main-content .sidebar#right #info {
|
||||
padding: 2.5em;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 1em;
|
||||
line-height: 1.5em;
|
||||
opacity: 100%;
|
||||
overflow-y: scroll;
|
||||
-webkit-transition: all 500ms ease-in-out;
|
||||
transition: all 500ms ease-in-out;
|
||||
}
|
||||
|
||||
#main-content .sidebar#right #settings {
|
||||
#main-content .sidebar#right #info h1, #main-content .sidebar#right #info h2 {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
#main-content .sidebar#right #info h3 {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.1em;
|
||||
}
|
||||
|
||||
#main-content .sidebar#right #info p {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
#main-content .sidebar#right #info img {
|
||||
width: 50%;
|
||||
image-rendering: optimizeSpeed;
|
||||
}
|
||||
|
||||
#main-content .sidebar#right #info-icon {
|
||||
width: -webkit-fit-content;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
|
|
@ -177,9 +224,10 @@ html, body {
|
|||
left: 5px;
|
||||
-webkit-transition: all 500ms ease-in-out;
|
||||
transition: all 500ms ease-in-out;
|
||||
z-index: 1010;
|
||||
}
|
||||
|
||||
#main-content .sidebar#right #settings i {
|
||||
#main-content .sidebar#right #info-icon i {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
|
|
@ -198,8 +246,10 @@ html, body {
|
|||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
height: 100%;
|
||||
width: 600px;
|
||||
min-width: 600px;
|
||||
width: 40%;
|
||||
position: relative;
|
||||
padding-top: 150px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
|
|
@ -236,7 +286,7 @@ i[class*="ri-"] {
|
|||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
width: 380px;
|
||||
max-width: 95vw;
|
||||
height: 200px;
|
||||
}
|
||||
|
|
@ -262,15 +312,13 @@ i[class*="ri-"] {
|
|||
|
||||
#mainOptions .mode-picker #title {
|
||||
font-weight: bold;
|
||||
font-size: 1.08em;
|
||||
font-size: 1.3em;
|
||||
min-width: 100px;
|
||||
height: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding-left: 0px;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
|
|
@ -289,7 +337,6 @@ i[class*="ri-"] {
|
|||
}
|
||||
|
||||
#mainOptions .mode-picker #input {
|
||||
margin-left: 10px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -306,8 +353,8 @@ i[class*="ri-"] {
|
|||
text-align: center;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd;
|
||||
height: 1.3rem;
|
||||
font-size: 0.75em;
|
||||
height: 1.5rem;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
#mainOptions .mode-picker #input select {
|
||||
|
|
@ -315,15 +362,14 @@ i[class*="ri-"] {
|
|||
}
|
||||
|
||||
#mainOptions .mode-picker #input button {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 1.6em;
|
||||
height: 1.6em;
|
||||
border-radius: 3px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
#mainOptions .mode-picker #input button i {
|
||||
position: relative;
|
||||
left: -1px;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -336,7 +382,7 @@ i[class*="ri-"] {
|
|||
padding: 0.3em;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
font-size: 0.75em;
|
||||
font-size: 0.9em;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
|
@ -347,7 +393,7 @@ i[class*="ri-"] {
|
|||
|
||||
#legend {
|
||||
background: #f1f1f1;
|
||||
width: 100%;
|
||||
width: 380px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -374,38 +420,48 @@ i[class*="ri-"] {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
#legend #legend-items .item, #legend #legend-items span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#legend #legend-items .item {
|
||||
font-family: "Courier", monospace;
|
||||
font-size: 0.9em;
|
||||
border: 1px solid #ccc;
|
||||
margin: 1px;
|
||||
width: 19%;
|
||||
width: 20%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#legend #legend-items .item button {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin: 4px;
|
||||
padding: 0.3em;
|
||||
border: 0px;
|
||||
border-radius: 2px;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
|
||||
}
|
||||
|
||||
#legend #legend-items .item button:active {
|
||||
#legend #legend-items .item:active {
|
||||
-webkit-transform: translateY(3px);
|
||||
transform: translateY(3px);
|
||||
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#legend #legend-items .item span {
|
||||
width: 60%;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
#legend #legend-items .item span:first-child {
|
||||
display: inline-block;
|
||||
padding: 1px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
background: #DDD;
|
||||
border-radius: 2px;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
#legend #legend-items .item span:last-child {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#morseButton {
|
||||
|
|
@ -814,6 +870,7 @@ i[class*="ri-"] {
|
|||
#morseBufferDisplay #alphanumeric-container {
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
width: 300px;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
padding-top: 10px;
|
||||
|
|
@ -822,6 +879,7 @@ i[class*="ri-"] {
|
|||
#morseBufferDisplay #alphanumeric-container #alphanumeric {
|
||||
background: #fdfdfd;
|
||||
height: 5rem;
|
||||
width: 100%;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding-top: 0.45rem;
|
||||
|
|
@ -829,8 +887,6 @@ i[class*="ri-"] {
|
|||
min-width: 4rem;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
|
|
@ -69,8 +69,9 @@ html, body {
|
|||
display: flex;
|
||||
height: 95vh;
|
||||
min-width: fit-content;
|
||||
width: 100%;
|
||||
// border: 1px solid red;
|
||||
justify-content: flex-start;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -78,72 +79,39 @@ html, body {
|
|||
left: 0px;
|
||||
|
||||
.sidebar#left {
|
||||
border: 1px solid yellowgreen;
|
||||
// border: 1px solid yellowgreen;
|
||||
background: $main-bg-color-light;
|
||||
box-shadow: 3px 0px 5px rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
// height: 100%;
|
||||
height: calc(100% - 5em);
|
||||
min-width: 500px;
|
||||
width: 500px;
|
||||
min-width: 400px;
|
||||
width: 30%;
|
||||
margin-top: 50px;
|
||||
padding: 1.5em;
|
||||
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
z-index: 100;
|
||||
|
||||
transition: all 300ms ease-in-out;
|
||||
transition: all 500ms ease-in-out;
|
||||
|
||||
&.hide {
|
||||
background: blue;
|
||||
left: -460px;
|
||||
// top: 50px;
|
||||
}
|
||||
|
||||
#info {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
line-height: 1.5em;
|
||||
|
||||
h3 {
|
||||
font-family: $main-font;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5;
|
||||
// text-transform: uppercase;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
#mainOptions, #legend {
|
||||
h1 {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
transition: all 500ms ease-in-out;
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
.sidebar#right {
|
||||
border: 1px solid green;
|
||||
background: $main-bg-color-light;
|
||||
box-shadow: -3px 0px 5px rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: calc(100% - 5em);
|
||||
min-width: 400px;
|
||||
width: 400px;
|
||||
padding: 1.5em;
|
||||
padding-top: 70px;
|
||||
top: 0px;
|
||||
margin-top: 50px;
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
z-index: 100;
|
||||
|
||||
font-family: 'Roboto', sans-serif;
|
||||
line-height: 1.5em;
|
||||
|
||||
transition: all 300ms ease-in-out;
|
||||
|
||||
&.hide {
|
||||
background: blue;
|
||||
right: -360px;
|
||||
left: calc(-30% + 40px);
|
||||
top: 0px;
|
||||
overflow-y: hidden;
|
||||
#mainOptions, #legend {
|
||||
opacity: 0%;
|
||||
}
|
||||
|
|
@ -153,15 +121,88 @@ html, body {
|
|||
transform: rotateZ(270deg);
|
||||
}
|
||||
}
|
||||
|
||||
#settings {
|
||||
#settings-icon {
|
||||
// border: 1px solid red;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 5px;
|
||||
transition: all 500ms ease-in-out;
|
||||
i {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar#right {
|
||||
// border: 1px solid green;
|
||||
background: $main-bg-color-light;
|
||||
box-shadow: -3px 0px 5px rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
margin-top: 50px;
|
||||
// left: calc(100vw - 30%);
|
||||
right: 0;
|
||||
|
||||
height: calc(100% - 5em);
|
||||
min-width: 400px;
|
||||
width: 30%;
|
||||
|
||||
z-index: 100;
|
||||
|
||||
font-family: 'Roboto', sans-serif;
|
||||
line-height: 1.5em;
|
||||
|
||||
transition: all 500ms ease-in-out;
|
||||
|
||||
&.hide {
|
||||
// left: calc(100% - 40px);
|
||||
right: calc(-30% + 43px);
|
||||
#info {
|
||||
opacity: 0%;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
#info {
|
||||
// border: 1px solid darkcyan;
|
||||
// margin-left: 20px;
|
||||
// padding: 1.5em;
|
||||
padding: 2.5em;
|
||||
font-family: $main-font;
|
||||
font-size: 1em;
|
||||
line-height: 1.5em;
|
||||
opacity: 100%;
|
||||
overflow-y: scroll;
|
||||
transition: all 500ms ease-in-out;
|
||||
|
||||
h1, h2 {
|
||||
margin-bottom: 0.3em;
|
||||
// text-transform: uppercase;
|
||||
}
|
||||
h3 {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.1em;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
img {
|
||||
width: 50%;
|
||||
image-rendering: optimizeSpeed;
|
||||
}
|
||||
}
|
||||
#info-icon {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 5px;
|
||||
transition: all 500ms ease-in-out;
|
||||
z-index: 1010;
|
||||
i {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
|
@ -176,9 +217,11 @@ html, body {
|
|||
justify-content: flex-start;
|
||||
// flex-grow: 1;
|
||||
height: 100%;
|
||||
width: 600px;
|
||||
min-width: 600px;
|
||||
width: 40%;
|
||||
// width: 100%;
|
||||
position: relative;
|
||||
padding-top: 150px;
|
||||
left: 0px;
|
||||
|
||||
}
|
||||
|
|
@ -209,10 +252,11 @@ i[class*="ri-"] {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
width: 380px;
|
||||
max-width: 95vw;
|
||||
height: 200px;
|
||||
// border: 1px solid red;
|
||||
|
||||
.mode-picker {
|
||||
// border: 1px solid green;
|
||||
width: 100%;
|
||||
|
|
@ -225,15 +269,15 @@ i[class*="ri-"] {
|
|||
padding: 5px;
|
||||
height: 2.4em;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-weight: bold;
|
||||
font-size: 1.08em;
|
||||
font-size: 1.3em;
|
||||
// border: 1px solid red;
|
||||
min-width: 100px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
padding-left: 0px;
|
||||
justify-content: flex-start;
|
||||
// justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
#buttons {
|
||||
|
|
@ -243,7 +287,7 @@ i[class*="ri-"] {
|
|||
align-items: center;
|
||||
}
|
||||
#input {
|
||||
margin-left: 10px;
|
||||
// margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
input {
|
||||
|
|
@ -252,22 +296,23 @@ i[class*="ri-"] {
|
|||
text-align: center;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd;
|
||||
height: 1.3rem;
|
||||
font-size: 0.75em;
|
||||
height: 1.5rem;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
select {
|
||||
height: 1.4rem;
|
||||
}
|
||||
button {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 1.6em;
|
||||
height: 1.6em;
|
||||
border-radius: 3px;
|
||||
font-size: 0.9em;
|
||||
// line-height: 10px;
|
||||
i {
|
||||
position: relative;
|
||||
left: -1px;
|
||||
// top: -2px;
|
||||
font-size: 1.1em;
|
||||
// left: -1px;
|
||||
// top: -1px;
|
||||
// font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
@ -281,7 +326,7 @@ i[class*="ri-"] {
|
|||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
|
||||
font-size: 0.75em;
|
||||
font-size: 0.9em;
|
||||
color: $main-font-color-light;
|
||||
|
||||
&.selected {
|
||||
|
|
@ -295,7 +340,7 @@ i[class*="ri-"] {
|
|||
#legend {
|
||||
// border: 1px solid orange;
|
||||
background: $main-bg-color-light;
|
||||
width: 100%;
|
||||
width: 380px;
|
||||
// height: 325px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -307,29 +352,58 @@ i[class*="ri-"] {
|
|||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
.item, span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item {
|
||||
font-family: $ditDah-font;
|
||||
font-size: 0.9em;
|
||||
border: 1px solid #ccc;
|
||||
margin: 1px;
|
||||
width: 19%;
|
||||
width: 20%;
|
||||
// height: 2em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: space-between;
|
||||
|
||||
button {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 4px;
|
||||
border: 0px;
|
||||
border-radius: 2px;
|
||||
box-shadow: $main-box-shadow-light;
|
||||
&:active {
|
||||
transform: translateY(3px);
|
||||
box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
|
||||
}
|
||||
margin: 4px;
|
||||
padding: 0.3em;
|
||||
border: 0px;
|
||||
border-radius: 2px;
|
||||
box-shadow: $main-box-shadow-light;
|
||||
&:active {
|
||||
transform: translateY(3px);
|
||||
box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
|
||||
}
|
||||
span {
|
||||
width: 60%;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
// button {
|
||||
// width: 20px;
|
||||
// height: 20px;
|
||||
// margin: 4px;
|
||||
// border: 0px;
|
||||
// border-radius: 2px;
|
||||
// box-shadow: $main-box-shadow-light;
|
||||
// &:active {
|
||||
// transform: translateY(3px);
|
||||
// box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
|
||||
// }
|
||||
// }
|
||||
span:first-child {
|
||||
display: inline-block;
|
||||
padding: 1px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
background: #DDD;
|
||||
border-radius: 2px;
|
||||
|
||||
font-size: 1.3em;
|
||||
// width: 60%;
|
||||
// justify-content: center;
|
||||
// text-align: center;
|
||||
}
|
||||
span:last-child {
|
||||
// background: #08c;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -718,6 +792,7 @@ $button-height: 60px;
|
|||
#alphanumeric-container {
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
width: 300px;
|
||||
overflow: hidden;
|
||||
|
||||
display: inline-block;
|
||||
|
|
@ -728,6 +803,7 @@ $button-height: 60px;
|
|||
// border: 1px solid blue;
|
||||
background: #fdfdfd;
|
||||
height: 5rem;
|
||||
width: 100%;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding-top: 0.45rem;
|
||||
|
|
@ -735,7 +811,7 @@ $button-height: 60px;
|
|||
min-width: 4rem;
|
||||
margin-bottom: 10px;
|
||||
border-radius: $main-border-radius;
|
||||
box-shadow: $main-box-shadow-light;
|
||||
// box-shadow: $main-box-shadow-light;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue