kristoferssolo/mdemory
1
0
Fork 0
mirror of https://github.com/jorenchik/mdemory.git synced 2026-03-22 00:26:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Deck listing frontend layout

Browse Source
This commit is contained in:
jorenchik
2024-08-04 18:05:48 +03:00
parent c925df3fc4
commit bb4868fa98
3 changed files with 102 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/mdemory-app/frontend/index.html
View File

@@ -6,7 +6,55 @@
<title>mdemory-app</title> <title>mdemory-app</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app">
<div class="main-layout">
<div>
<h3>Memorybase</h3>
<div class="deck-list">
<a href="#">
<div class="deck">
<span>&gt;</span>
<span>math</span>
</div>
</a>
<a href="#">
<div class="deck">
<span>&gt;</span>
<span>2nd_semester</span>
</div>
</a>
<a href="#">
<div class="deck">
python
</div>
</a>
<a href="#">
<div class="deck">
combinatorics
</div>
</a>
<a href="#">
<div class="deck">
cpp
</div>
</a>
</div>
</div>
<div>
<h2>countries: Flashcards</h2>
<div class="deck-listing">
<div class="flashcard">
<span>&gt;</span>
<span>What is the capital of Latvia?</span>
</div>
<div class="flashcard">
<span>&gt;</span>
<span>What is the capital of Lithuania?</span>
</div>
</div>
</div>
</div>
</div>
<script src="./src/main.ts" type="module"></script> <script src="./src/main.ts" type="module"></script>
</body> </body>
</html> </html>

88
src/mdemory-app/frontend/src/app.css
View File

@@ -1,54 +1,62 @@
#logo { .main-layout {
display: block; display: grid;
width: 50%; grid-template-columns: .35fr 1fr; /* Creates 3 equal columns */
height: 50%; height: 100%;
margin: auto;
padding: 10% 0 0;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box;
} }
.result { .main-layout > div:nth-child(1) {
height: 20px; /*background: white;*/
line-height: 20px; border-right: 1px solid gray;
margin: 1.5rem auto;
} }
.input-box .btn { .main-layout .deck-list {
width: 60px; padding: 1rem;
display: flex;
flex-direction: column;
/*gap: .5rem;*/
}
a {
color: unset;
text-decoration: unset;
}
.main-layout .deck {
border: 1px solid gray;
border-top: none;
display: flex;
align-items: center;
height: 30px; height: 30px;
line-height: 30px; padding-left: .5rem;
border-radius: 3px; font-size: .8rem;
border: none; gap: 10px;
margin: 0 0 0 20px;
padding: 0 8px;
cursor: pointer;
} }
.input-box .btn:hover { .main-layout .deck:nth-child(1) {
background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); border-top: 1px solid gray;
color: #333333;
} }
.input-box .input { h1, h2, h3, h4 {
border: none; font-size: 1.1rem;
border-radius: 3px;
outline: none;
height: 30px;
line-height: 30px;
padding: 0 10px;
background-color: rgba(240, 240, 240, 1);
-webkit-font-smoothing: antialiased;
} }
.input-box .input:hover {
border: none; .deck-listing {
background-color: rgba(255, 255, 255, 1); display: flex;
flex-direction: column;
padding: 1rem;
gap: 1rem;
} }
.input-box .input:focus { .deck-listing .flashcard {
border: none; display: flex;
background-color: rgba(255, 255, 255, 1); align-items: center;
border: 1px solid white;
height: 80px;
border-radius: .3rem;
} }
.deck-listing .flashcard > * {
margin-left: 15px;
}

12
src/mdemory-app/frontend/src/main.ts
View File

@@ -27,15 +27,9 @@ window.greet = function () {
} }
}; };
document.querySelector('#app')!.innerHTML = `
<img id="logo" class="logo"> //document.querySelector('#app')!.innerHTML = `
<div class="result" id="result">Please enter your name below 👇</div> //`;
<div class="input-box" id="input">
<input class="input" id="name" type="text" autocomplete="off" />
<button class="btn" onclick="greet()">Greet</button>
</div>
</div>
`;
(document.getElementById('logo') as HTMLImageElement).src = logo; (document.getElementById('logo') as HTMLImageElement).src = logo;
let nameElement = (document.getElementById("name") as HTMLInputElement); let nameElement = (document.getElementById("name") as HTMLInputElement);