From bb4868fa988eb203cb5079672869aa3007232367 Mon Sep 17 00:00:00 2001 From: jorenchik Date: Sun, 4 Aug 2024 18:05:48 +0300 Subject: [PATCH] Deck listing frontend layout --- src/mdemory-app/frontend/index.html | 50 ++++++++++++++- src/mdemory-app/frontend/src/app.css | 92 +++++++++++++++------------- src/mdemory-app/frontend/src/main.ts | 12 +--- 3 files changed, 102 insertions(+), 52 deletions(-) diff --git a/src/mdemory-app/frontend/index.html b/src/mdemory-app/frontend/index.html index 83cb26a..2222f12 100644 --- a/src/mdemory-app/frontend/index.html +++ b/src/mdemory-app/frontend/index.html @@ -6,7 +6,55 @@ mdemory-app -
+
+
+
+

Memorybase

+
+ +
+ > + math +
+ + +
+ > + 2nd_semester +
+ + +
+ python +
+ + +
+ combinatorics +
+ + +
+ cpp +
+ +
+
+
+

countries: Flashcards

+
+
+ > + What is the capital of Latvia? +
+
+ > + What is the capital of Lithuania? +
+
+
+
+
diff --git a/src/mdemory-app/frontend/src/app.css b/src/mdemory-app/frontend/src/app.css index 59d06f6..189d744 100644 --- a/src/mdemory-app/frontend/src/app.css +++ b/src/mdemory-app/frontend/src/app.css @@ -1,54 +1,62 @@ -#logo { - display: block; - width: 50%; - height: 50%; - margin: auto; - padding: 10% 0 0; - background-position: center; - background-repeat: no-repeat; - background-size: 100% 100%; - background-origin: content-box; +.main-layout { + display: grid; + grid-template-columns: .35fr 1fr; /* Creates 3 equal columns */ + height: 100%; } -.result { - height: 20px; - line-height: 20px; - margin: 1.5rem auto; +.main-layout > div:nth-child(1) { + /*background: white;*/ + border-right: 1px solid gray; } -.input-box .btn { - width: 60px; - height: 30px; - line-height: 30px; - border-radius: 3px; - border: none; - margin: 0 0 0 20px; - padding: 0 8px; - cursor: pointer; +.main-layout .deck-list { + padding: 1rem; + display: flex; + flex-direction: column; + /*gap: .5rem;*/ } -.input-box .btn:hover { - background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); - color: #333333; +a { + color: unset; + text-decoration: unset; } -.input-box .input { - border: none; - border-radius: 3px; - outline: none; - height: 30px; - line-height: 30px; - padding: 0 10px; - background-color: rgba(240, 240, 240, 1); - -webkit-font-smoothing: antialiased; +.main-layout .deck { + border: 1px solid gray; + border-top: none; + display: flex; + align-items: center; + height: 30px; + padding-left: .5rem; + font-size: .8rem; + gap: 10px; } -.input-box .input:hover { - border: none; - background-color: rgba(255, 255, 255, 1); +.main-layout .deck:nth-child(1) { + border-top: 1px solid gray; +} + +h1, h2, h3, h4 { + font-size: 1.1rem; +} + + +.deck-listing { + display: flex; + flex-direction: column; + padding: 1rem; + gap: 1rem; +} + +.deck-listing .flashcard { + display: flex; + align-items: center; + border: 1px solid white; + height: 80px; + border-radius: .3rem; +} + +.deck-listing .flashcard > * { + margin-left: 15px; } -.input-box .input:focus { - border: none; - background-color: rgba(255, 255, 255, 1); -} \ No newline at end of file diff --git a/src/mdemory-app/frontend/src/main.ts b/src/mdemory-app/frontend/src/main.ts index b68d7d9..ac01649 100644 --- a/src/mdemory-app/frontend/src/main.ts +++ b/src/mdemory-app/frontend/src/main.ts @@ -27,15 +27,9 @@ window.greet = function () { } }; -document.querySelector('#app')!.innerHTML = ` - -
Please enter your name below 👇
-
- - -
- -`; + +//document.querySelector('#app')!.innerHTML = ` +//`; (document.getElementById('logo') as HTMLImageElement).src = logo; let nameElement = (document.getElementById("name") as HTMLInputElement);