add card automatically turn into new card

software-students-spring2024 · Mar 2, 2024 · ca49d54 · ca49d54
1 parent b349fc8
commit ca49d54
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 38 deletions.
diff --git a/static/css/style.css b/static/css/style.css
@@ -109,7 +109,7 @@ h3 {
 
 }
 
-.add-deck-form {
+/* #add-deck-form {
   position: fixed;
   top: 50%;
   top: 50%;
@@ -126,40 +126,52 @@ h3 {
   border-radius: .5rem;
   background: #7F5F59;
   text-align: center;
-}
+} */
 
-.add-deck-form input[type=submit] {
+/* #add-deck-form input[type=submit] {
   color: #63514F;
   background: #D9D9D9;
   text-align: center;
   font-size: 55px; 
   border-radius: .5rem;
   padding: 40px;
-}
+} */
 
-.add-deck-form input[type=text] {
-  color: #63514F;
-  background: #D9D9D9;
+#add-deck-form input[type=text] {
+  color: #fafafa;
+  background-color: transparent;
   text-align: center;
   font-size: 55px; 
-  border-radius: .5rem;
+  border: none; 
+  outline: none; 
+
 }
 
-.add-deck-form label {
+/* #add-deck-form label {
   color: #D9D9D9;
   text-align: center;
   font-size: 55px; 
   border-radius: .5rem;
-}
+} */
 
-.add-deck-form p {
-  position: absolute;
-  top: .1rem;
-  left: 1rem;
-  color: #D9D9D9;
-  font-size: 55px; 
-  margin: 0;
-}
+#add-deck-form p {
+  /* position: absolute; */
+  /* top: .1rem; */
+  /* left: 1rem; */
+  color: #fafafa;
+  /* margin: 0; */
+} 
+
+/* .add-deck-input {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: center;
+  margin: auto;
+  width: 90%;
+  aspect-ratio: 9 / 5;
+
+} */
 
 .vertical-align {
   display: flex;

diff --git a/templates/decks.html b/templates/decks.html
@@ -8,17 +8,17 @@
 
     {% for deck in mainDecks %}
         <a href="{{ url_for('displayDeck', username='guest', deckTitle=deck.title )}}" style="text-decoration:none" class="deck-link">
-            <button class="main-deck">
+            <div class="main-deck">
                 <h3>{{ deck.title }}</h3>
-            </button>
+            </div>
         </a>
     {% endfor %}
 
     {% for deck in personalDecks %}
-        <a href="{{ url_for('displayDeck', username=username, deckTitle=deck.title) }}" style="text-decoration:none" class="deck-link">>
-            <button class="personal-deck">
+        <a href="{{ url_for('displayDeck', username=username, deckTitle=deck.title) }}" style="text-decoration:none" class="deck-link">
+            <div class="personal-deck">
                 <h3>{{ deck.title }}</h3>
-            </button>
+            </div>
         </a>
     {% endfor %}
 
@@ -29,7 +29,7 @@ <h3>{{ deck.title }}</h3>
         searchBar.addEventListener("input", function() {
             const searchTerm = searchBar.value.toLowerCase();
             deckLinks.forEach(function(link) {
-                const deckTitle = link.querySelector("h3").textContent.toLowerCase();
+                const deckTitle = link.querySelector(".deck-title").textContent.toLowerCase();
                 if (deckTitle.includes(searchTerm)) {
                     link.style.display = "block";
                 } else {
@@ -40,29 +40,27 @@ <h3>{{ deck.title }}</h3>
     </script>
 
     {% if isAuth %} 
-    <button class="add-deck">
-        <h3> + </h3>
-    </button>
 
-        <form action="{{ url_for('createDeck', username=username) }}" method="post" class="add-deck-form" style="display: none">
-            <p>x</p>
-            <div>
-                <label for="title">Title: </label>
-                <input type="text" name="title" required>
-            </div>
-            <div>
-                <input type="submit" name="create" value="CREATE DECK" />
+        <form action="{{ url_for('createDeck', username=username) }}" method="post" id="add-deck-form" class="personal-deck" style="display: none">
+            <div class="vertical-align">
+                <p>CANCEL</p>
+                <input type="text" name="title" placeholder="Type..." required>
+                <input class="user-input" type="submit" name="create" value="CREATE DECK" />
             </div>
         </form>
+
+        <div class="add-deck">
+            <h3> + </h3>
+        </div>
 
         <script>
             const addDeck = document.querySelector(".add-deck")
             addDeck.addEventListener("click", function() {
-                document.querySelector(".add-deck-form").style.display="flex"
+                document.querySelector("#add-deck-form").style.display="flex"
             })
-            const exitAddDeck = document.querySelector(".add-deck-form p")
+            const exitAddDeck = document.querySelector("#add-deck-form p")
             exitAddDeck.addEventListener("click", function() {
-                document.querySelector(".add-deck-form").style.display="none"
+                document.querySelector("#add-deck-form").style.display="none"
             })
         </script>
     {% endif %}