Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement 'About' modal #4

Merged
merged 1 commit into from
Aug 21, 2024
Merged

Implement 'About' modal #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 0 additions & 11 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,6 @@ Ancient Greek Vocabulary
[![License][License badge]][License URL]
![Last Commit][last commit badge]

A Quizlet alternative to study Ancient Greek vocabulary with a much better visual. Please try the
<img src="https://github.com/QubitPi/QubitPi/blob/master/img/可莉-25.png?raw=true" width="70px"> [App](https://qubitpi.github.io/ancient-greek-vocabulary/)

The essence of this project is to implement the philosophy that __all languages are different__, whether it's their
fonts, areas of difficulties, or history.

I was stuyding German and wanted some movie to sharpen my listening skills. So I watched this movie called "Generation War". It is this movie that teach me there were also great people in Nazi Germany.
I name this project: (...)


How Did the Project Start
-------------------------

Expand All @@ -26,7 +16,6 @@ the other day and saw this horribly formatted Greek text:
<img src="./bad-font.png" width="60%">
</div>


The Greek font looks terribly uncomfortable, because Quizlet uses the same font for all languages and I certainly don't
like it. So I decided to make my own flash card with a much better font (see the Note below) that results something like
this:
Expand Down
2 changes: 1 addition & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Ancient Greek</title>
<title>Wilhelm</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
62 changes: 62 additions & 0 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,68 @@ body {
height: 50px;
width: 50px;
fill: var(--blue);
z-index: 99999;
}

.about-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: z-index 0.3s step-end, top 0ms ease-in-out 300ms;
z-index: -1000;
}

.about-modal .overlay {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 100ms ease-in-out 200ms;
}

.about-modal .about-modal-content {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%) scale(1.15);
width: 95%;
max-width: 350px;
background: #fff;
padding: 25px;
opacity: 0;
border-radius: 20px;
box-shadow: 0 2px 2px 5px rgba(0, 0, 0, 0.05);
transition: all 300ms ease-in-out;
}

.about-modal .about-modal-content h2 {
margin: 10px 0;
font-size: 25px;
color: var(--black1);
text-align: center;
}

.about-modal .about-modal-content p {
margin: 15px 0;
font-size: 16px;
color:var(--black1);
}

.about-modal.active {
top: 0;
transition: top 0ms ease-in-out 0ms;
z-index: 99999;
}
.about-modal.active .overlay {
opacity: 1;
transition: all 300ms ease-in-out;
}
.about-modal.active .about-modal-content {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}

/* ================== Word List ============== */
Expand Down
25 changes: 20 additions & 5 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ function App() {
const [hoveredItem, setHoveredItem] = useState<string>(ANCIENT_GREEK)
const [vocabulary, setVocabulary] = useState(greekVocabulary)

const [aboutModalShow, setAboutModalShow] = useState<boolean>(false)


const handleToggleClick = () => {
setToggled(!toggled)
Expand Down Expand Up @@ -100,7 +102,20 @@ function App() {
</div>

<div className="about">
<About className="icon"/>
<About className="icon" onClick={() => setAboutModalShow(true)}/>
<div className={aboutModalShow ? "about-modal active" : "about-modal"}>
<div className={aboutModalShow ? "overlay active" : "overlay"} onClick={() => setAboutModalShow(false)}></div>
<div className={aboutModalShow ? "about-modal-content active" : "about-modal-content"}>
<h2>About Wilhelm</h2>
<p>
All languages are unique, whether it's their fonts, areas of difficulties, or history.
</p>

<p>
Wihelm is a Quizlet alternative to study vocabularies with a much better visual.
</p>
</div>
</div>
</div>
</div>

Expand All @@ -118,10 +133,10 @@ function App() {

<table>
<thead>
<tr>
<td>Word</td>
<td>Definition</td>
<td>Status</td>
<tr>
<td>Word</td>
<td>Definition</td>
<td>Status</td>
</tr>
</thead>

Expand Down
Loading