Skip to content

Commit eec1129

Browse files
ZabrafaxZabrafax
committed
about window added
1 parent a84a62f commit eec1129

File tree

5 files changed

+187
-3
lines changed

5 files changed

+187
-3
lines changed

‎frontend/src/components/Header.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import './BaseLayout.css';
22
import styles from './Header.module.css';
33
import {useTheme} from "./contexts/ThemeContext";
44

5-
function Header({ onAccountClick, onSettingsClick, onFullscreenClick }) {
5+
function Header({ onAccountClick, onSettingsClick, onAboutClick, onFullscreenClick }) {
66
const { firstThemeColor, textThemeColor } = useTheme();
77

88
function handleAccountClick(e) {
@@ -15,6 +15,11 @@ function Header({ onAccountClick, onSettingsClick, onFullscreenClick }) {
1515
onSettingsClick();
1616
}
1717

18+
function handleAboutClick(e) {
19+
e.preventDefault();
20+
onAboutClick();
21+
}
22+
1823
function handleFullscreenClick(e) {
1924
e.preventDefault();
2025
onFullscreenClick();
@@ -42,6 +47,13 @@ function Header({ onAccountClick, onSettingsClick, onFullscreenClick }) {
4247
style={{ "--after-color": textThemeColor }}
4348
>SETTINGS</a>
4449
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
50+
<a
51+
className={styles.Header__a__button}
52+
onClick={handleAboutClick}
53+
href="#"
54+
style={{ "--after-color": textThemeColor }}
55+
>ABOUT</a>
56+
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
4557
<a
4658
className={styles.Header__a__button}
4759
onClick={handleFullscreenClick}

‎frontend/src/components/Main.js‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import AccountWindow from "./windows/AccountWindow";
1010
import {useErrorContext} from "./contexts/ErrorContext";
1111
import {useDeviceContext} from "./contexts/DeviceContext";
1212
import MobileHeader from "./MobileHeader";
13+
import AboutWindow from "./windows/AboutWindow";
1314

1415
function Main() {
1516
const { isMobile } = useDeviceContext();
@@ -60,12 +61,31 @@ function Main() {
6061
setIsSettingsVisible(false);
6162
}
6263

64+
/*
65+
About window
66+
*/
67+
const [isAboutWindowVisible, setIsAboutWindowVisible] = useState(false);
68+
69+
const onAboutClick = () => {
70+
if (!isAboutWindowVisible) {
71+
closeAllWindows();
72+
setIsAboutWindowVisible(true);
73+
} else {
74+
setIsAboutWindowVisible(false);
75+
}
76+
}
77+
78+
const onAboutCrossClick = () => {
79+
setIsAboutWindowVisible(false);
80+
}
81+
6382
/*
6483
Close all windows
6584
*/
6685
const closeAllWindows = () => {
67-
setIsSettingsVisible(false);
6886
setIsAccountWindowVisible(false);
87+
setIsSettingsVisible(false);
88+
setIsAboutWindowVisible(false);
6989
}
7090

7191
/*
@@ -123,11 +143,13 @@ function Main() {
123143
? <MobileHeader
124144
onAccountClick={onAccountClick}
125145
onSettingsClick={onSettingsClick}
146+
onAboutClick={onAboutClick}
126147
onFullscreenClick={toggleFullscreen}
127148
/>
128149
: <Header
129150
onAccountClick={onAccountClick}
130151
onSettingsClick={onSettingsClick}
152+
onAboutClick={onAboutClick}
131153
onFullscreenClick={toggleFullscreen}
132154
/>
133155
)}
@@ -165,6 +187,12 @@ function Main() {
165187
/>
166188
}
167189

190+
{isAboutWindowVisible &&
191+
<AboutWindow
192+
onAboutCrossClick={onAboutCrossClick}
193+
/>
194+
}
195+
168196
{isErrorWindowActive &&
169197
<ServerErrorWindow />
170198
}

‎frontend/src/components/MobileHeader.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {useState} from "react";
44
import {HEXtoRGBA} from "./utils/colorUtils";
55
import MobileHeaderAButton from "./MobileHeaderAButton";
66

7-
function MobileHeader({ onAccountClick, onSettingsClick, onFullscreenClick }) {
7+
function MobileHeader({ onAccountClick, onSettingsClick, onAboutClick, onFullscreenClick }) {
88
const { firstThemeColor, alphaThemePercent, textThemeColor } = useTheme();
99

1010
const [isNavOpen, setIsNavOpen] = useState(false);
@@ -26,6 +26,11 @@ function MobileHeader({ onAccountClick, onSettingsClick, onFullscreenClick }) {
2626
setTimeout(() => onSettingsClick(), 200);
2727
}
2828

29+
function handleAboutClick() {
30+
setIsNavOpen(false);
31+
setTimeout(() => onAboutClick(), 200);
32+
}
33+
2934
function handleFullscreenClick() {
3035
setIsNavOpen(false);
3136
setTimeout(() => onFullscreenClick(), 200);
@@ -70,6 +75,11 @@ function MobileHeader({ onAccountClick, onSettingsClick, onFullscreenClick }) {
7075
textThemeColor={textThemeColor}
7176
onClick={handleSettingsClick}
7277
/>
78+
<MobileHeaderAButton
79+
name="ABOUT"
80+
textThemeColor={textThemeColor}
81+
onClick={handleAboutClick}
82+
/>
7383
<MobileHeaderAButton
7484
name="FULLSCREEN"
7585
textThemeColor={textThemeColor}

‎frontend/src/components/windows/AboutWindow.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
.About__window {
2+
z-index: 1000;
3+
position: absolute;
4+
top: calc(5rem + (100vh - 5rem - 5rem - 300px) / 3);
5+
left: auto;
6+
7+
width: 500px;
8+
height: fit-content;
9+
max-height: 450px;
10+
11+
font-weight: 200;
12+
}
13+
14+
.About__window__main__wrapper {
15+
display: flex;
16+
flex-direction: column;
17+
align-items: start;
18+
justify-content: start;
19+
20+
text-align: left;
21+
}
22+
23+
.About__window .Small__a__button {
24+
font-weight: initial;
25+
}
26+
27+
.About__window p {
28+
font-size: 1.2rem;
29+
}
30+
31+
.About__window p:not(:first-of-type) {
32+
margin-top: 0.5rem;
33+
}
34+
35+
.About__window p a {
36+
position: relative;
37+
38+
font-size: 1.2rem !important;
39+
font-style: italic;
40+
41+
color: inherit;
42+
text-decoration: none;
43+
}
44+
45+
.About__window p a::after {
46+
content: "";
47+
position: absolute;
48+
49+
left: 0;
50+
right: 0;
51+
bottom: 0;
52+
53+
width: 100%;
54+
height: 2px;
55+
56+
background-color: var(--after-color, black);
57+
58+
transform: translateZ(0) scaleX(0);
59+
transition: transform 0.2s;
60+
}
61+
62+
.About__window p a:hover::after, .About__window p a:focus::after {
63+
transform: translateZ(0) scaleX(1);
64+
}
65+
66+
.About__window .Small__a__button {
67+
margin-top: 1rem;
68+
69+
align-self: center;
70+
71+
font-size: 1.2rem;
72+
}
73+
74+
@media (max-width: 768px) {
75+
.About__window {
76+
width: 100%;
77+
}
78+
}

‎frontend/src/components/windows/AboutWindow.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import {HEXtoRGBA} from "../utils/colorUtils";
2+
import './AboutWindow.css';
3+
import {useTheme} from "../contexts/ThemeContext";
4+
import './Window.css';
5+
6+
function AboutWindow( {onAboutCrossClick} ) {
7+
const { firstThemeColor, textThemeColor, alphaThemePercent } = useTheme();
8+
9+
return (
10+
<div
11+
className="About__window Window"
12+
style={{
13+
backgroundColor: HEXtoRGBA(firstThemeColor, alphaThemePercent)
14+
}}
15+
>
16+
<div className="Window__top__wrapper">
17+
<h2>About</h2>
18+
{/*
19+
eslint-disable-next-line
20+
jsx-a11y/anchor-is-valid,
21+
jsx-a11y/anchor-has-content,
22+
jsx-a11y/click-events-have-key-events,
23+
jsx-a11y/no-static-element-interactions
24+
*/}
25+
<a
26+
className="Closing__cross"
27+
onClick={onAboutCrossClick}
28+
style={{ "--after-color": textThemeColor }}
29+
></a>
30+
</div>
31+
<div className="About__window__main__wrapper Window__main__wrapper">
32+
<p>
33+
Meta Clock is a web application that displays time with customizable themes and settings.
34+
</p>
35+
<p>
36+
Inspired by <a
37+
href="https://www.humanssince1982.com/en-eu/products/clockclock-24-white"
38+
>
39+
ClockClock 24
40+
</a>,
41+
it is built as a GitHub project to showcase skills in React, Spring, and PostgreSQL.
42+
</p>
43+
<p>
44+
Due to free hosting, the server may take a couple of minutes to start.
45+
</p>
46+
<a
47+
style={{ "--after-color": textThemeColor }}
48+
href="https://github.com/Zabrafax/spring-react-meta-clock"
49+
className="Small__a__button"
50+
>Visit GitHub</a>
51+
</div>
52+
</div>
53+
);
54+
}
55+
56+
export default AboutWindow;

0 commit comments

Comments
 (0)