mirror of
https://github.com/genemecija/learn-morse-code.git
synced 2026-01-18 14:30:14 +01:00
Hideable sidebars, header/footer styling
This commit is contained in:
Gene Mecija
parent
e677c6e9fc
commit
e82779e6ed
|
|
@ -32,6 +32,10 @@ export default React.memo(function App() {
|
|||
|
||||
const {gameMode} = useContext(GameModeContext)
|
||||
|
||||
function handleClick() {
|
||||
document.querySelector('.sidebar#right').classList.toggle('hide')
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
|
|
@ -70,7 +74,7 @@ export default React.memo(function App() {
|
|||
|
||||
<MorseButtons />
|
||||
</div>
|
||||
<div className="sidebar" id="right">
|
||||
<div className="sidebar" id="right" onClick={handleClick}>
|
||||
<div id="mainOptions">
|
||||
<h2>Options</h2>
|
||||
<ModePicker />
|
||||
|
|
|
|||
|
|
@ -2,8 +2,12 @@ import React from "react"
|
|||
|
||||
export default React.memo(function Info() {
|
||||
|
||||
function handleClick() {
|
||||
document.querySelector('.sidebar#left').classList.toggle('hide')
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="info">
|
||||
<div id="info" onClick={handleClick}>
|
||||
<h2>Info</h2>
|
||||
<p>Morse code is a method of communication via tones and silences of various lengths.</p>
|
||||
<ul>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ function Legend() {
|
|||
return (
|
||||
<div id="legend">
|
||||
<div id="title">
|
||||
<h2>Legend</h2>
|
||||
<h2>Morse Code Alphabet</h2>
|
||||
</div>
|
||||
<div id="legend-items">
|
||||
{legend}
|
||||
|
|
|
|||
|
|
@ -47,10 +47,8 @@ html, body {
|
|||
background: #333;
|
||||
font-family: "Rubik", sans-serif;
|
||||
font-size: 2.5em;
|
||||
font-weight: bold;
|
||||
color: #f1f1f1;
|
||||
-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;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#main-content {
|
||||
|
|
@ -58,16 +56,27 @@ html, body {
|
|||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
height: 95vh;
|
||||
width: 100%;
|
||||
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;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#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);
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -81,12 +90,24 @@ html, body {
|
|||
height: 100%;
|
||||
min-width: 400px;
|
||||
width: 400px;
|
||||
margin-top: 50px;
|
||||
padding: 1.5em;
|
||||
-webkit-box-shadow: inset -3px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: inset -3px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
-webkit-transition: all 300ms ease-in-out;
|
||||
transition: all 300ms ease-in-out;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#main-content .sidebar#left.hide {
|
||||
background: blue;
|
||||
left: -360px;
|
||||
}
|
||||
|
||||
#main-content .sidebar#right {
|
||||
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);
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -98,12 +119,20 @@ html, body {
|
|||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
min-width: 500px;
|
||||
min-width: 400px;
|
||||
width: 400px;
|
||||
padding: 1.5em;
|
||||
margin-top: 50px;
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
-webkit-box-shadow: inset 3px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: inset 3px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
z-index: 100;
|
||||
-webkit-transition: all 300ms ease-in-out;
|
||||
transition: all 300ms ease-in-out;
|
||||
}
|
||||
|
||||
#main-content .sidebar#right.hide {
|
||||
background: blue;
|
||||
right: -360px;
|
||||
}
|
||||
|
||||
#main-content #main-interface {
|
||||
|
|
@ -120,13 +149,20 @@ html, body {
|
|||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
min-width: 500px;
|
||||
width: 500px;
|
||||
width: 600px;
|
||||
position: relative;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
width: 100%;
|
||||
padding: 0.3em;
|
||||
background: #333;
|
||||
font-family: "Rubik", sans-serif;
|
||||
font-size: 1em;
|
||||
color: #f1f1f1;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
@ -696,7 +732,6 @@ i[class*="ri-"] {
|
|||
}
|
||||
|
||||
#morseBufferDisplay {
|
||||
border: 1px solid green;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -58,57 +58,96 @@ html, body {
|
|||
background: #333;
|
||||
font-family: $main-font;
|
||||
font-size: 2.5em;
|
||||
font-weight: bold;
|
||||
// font-weight: bold;
|
||||
color: $main-bg-color-light;
|
||||
box-shadow: $main-box-shadow-light;
|
||||
z-index: 1000;
|
||||
// box-shadow: $main-box-shadow-light;
|
||||
}
|
||||
#main-content {
|
||||
display: flex;
|
||||
height: 95vh;
|
||||
width: 100%;
|
||||
min-width: fit-content;
|
||||
// border: 1px solid red;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
align-self: center;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
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;
|
||||
height: 100%;
|
||||
min-width: 400px;
|
||||
width: 400px;
|
||||
margin-top: 50px;
|
||||
padding: 1.5em;
|
||||
box-shadow: inset -3px 0px 5px rgba(0,0,0,0.2);
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
// top: 50px;
|
||||
transition: all 300ms ease-in-out;
|
||||
z-index: 100;
|
||||
|
||||
&.hide {
|
||||
background: blue;
|
||||
left: -360px;
|
||||
// top: 50px;
|
||||
}
|
||||
}
|
||||
.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: 100%;
|
||||
min-width: 500px;
|
||||
min-width: 400px;
|
||||
width: 400px;
|
||||
padding: 1.5em;
|
||||
margin-top: 50px;
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
box-shadow: inset 3px 0px 5px rgba(0,0,0,0.2);
|
||||
z-index: 100;
|
||||
transition: all 300ms ease-in-out;
|
||||
|
||||
&.hide {
|
||||
background: blue;
|
||||
right: -360px;
|
||||
// top: 50px;
|
||||
}
|
||||
}
|
||||
#main-interface {
|
||||
// border: 1px solid blue;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-grow: 1;
|
||||
// flex-grow: 1;
|
||||
height: 100%;
|
||||
min-width: 500px;
|
||||
width: 500px;
|
||||
width: 600px;
|
||||
// width: 100%;
|
||||
position: relative;
|
||||
left: 0px;
|
||||
|
||||
}
|
||||
}
|
||||
footer {
|
||||
|
||||
#footer {
|
||||
width: 100%;
|
||||
padding: 0.3em;
|
||||
background: #333;
|
||||
font-family: $main-font;
|
||||
font-size: 1em;
|
||||
// font-weight: bold;
|
||||
color: $main-bg-color-light;
|
||||
z-index: 1000;
|
||||
// box-shadow: $main-box-shadow-light;
|
||||
}
|
||||
h2 {
|
||||
margin-bottom: 0.5em;
|
||||
|
|
@ -606,7 +645,7 @@ $button-height: 60px;
|
|||
|
||||
|
||||
#morseBufferDisplay {
|
||||
border: 1px solid green;
|
||||
// border: 1px solid green;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column-reverse;
|
||||
|
|
|
|||
Loading…
Reference in a new issue