Skip to content

Commit

Permalink
Merge pull request #92 from software-students-spring2024/delete-card
Browse files Browse the repository at this point in the history
Improve Edit Card UI
gboeker authored Mar 5, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents dbe2d6f + c810d4f commit aa0f7f1
Showing 3 changed files with 27 additions and 30 deletions.
27 changes: 9 additions & 18 deletions static/css/style.css
Original file line number Diff line number Diff line change
@@ -56,7 +56,7 @@ p a{



.delete-deck {
.icon-top-left {
position: absolute;
top: -7%;
left: -7%;
@@ -84,7 +84,9 @@ p a{
.card-question {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: relative;
margin: auto;
width: 90%;
aspect-ratio: 8 / 5;
@@ -240,27 +242,16 @@ p a{
margin: auto;
}

#close-icon {
position: absolute;
top: 35%;
left: 13%;
transform: translate(-50%, -50%);
}

#card-form textarea {
.text-card {
font-family: sans-serif;
color: #e1948d;
padding: 5px;
width: 13em;
min-height: 1em;
overflow: auto;
text-align: center;
font-size: 55px;
text-transform: uppercase;
padding-top: 7rem;
padding-bottom: 7rem;
width: 40rem;
background: transparent;
border: none;

}
#card-form textarea:focus {
font-weight: bold;
outline: none;
}

28 changes: 17 additions & 11 deletions templates/card.html
Original file line number Diff line number Diff line change
@@ -22,18 +22,18 @@ <h3 id="next-question"> START </h3>
<form method="post" id="card-form" style="display: none">
<div class="question-box">
<div class="card-question">
<div class="vertical-align">
<svg id="close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="120px" height="120px">
<circle fill="#63514F" cx="15" cy="15" r="10" />
<path fill="#D9D9D9" d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M16.414,15 c0,0,3.139,3.139,3.293,3.293c0.391,0.391,0.391,1.024,0,1.414c-0.391,0.391-1.024,0.391-1.414,0C18.139,19.554,15,16.414,15,16.414 s-3.139,3.139-3.293,3.293c-0.391,0.391-1.024,0.391-1.414,0c-0.391-0.391-0.391-1.024,0-1.414C10.446,18.139,13.586,15,13.586,15 s-3.139-3.139-3.293-3.293c-0.391-0.391-0.391-1.024,0-1.414c0.391-0.391,1.024-0.391,1.414,0C11.861,10.446,15,13.586,15,13.586 s3.139-3.139,3.293-3.293c0.391-0.391,1.024-0.391,1.414,0c0.391,0.391,0.391,1.024,0,1.414C19.554,11.861,16.414,15,16.414,15z"/>
</svg>
<textarea name="question" required placeholder="Type..."></textarea>
<input type="hidden" name="oldQuestion">
<button class="button">Done</button>
<div id="close-icon" class="icon-top-left">
<span class="fa-stack fa-4x">
<i class="fa-solid fa-circle fa-stack-2x " style="color:#eae1df"></i>
<i class="fa-solid fa-xmark fa-stack-1x" style="color:#382c2b"></i>
</span>
</div>

<input type="hidden" name="oldQuestion">
<div name="question" class="text-card" required contentEditable oninput="updateHiddenInput(this.textContent)"></div>
<input type="hidden" name="question" id="hidden-question"> <!-- Hidden input field to hold the question content -->
</div>
</div>
<button class="button">Done</button>
</form>

<button id="add-card-button" class="button2" >Add Card</button>
@@ -48,6 +48,12 @@ <h3 id="next-question"> START </h3>


<script>

// update the hidden input field with the content of the contentEditable div
function updateHiddenInput(content) {
document.querySelector("#hidden-question").value = content;
}

// Selecting DOm elements
const nextQuestion = document.querySelector("#next-question");
const card = document.querySelector("#card");
@@ -155,7 +161,7 @@ <h3 id="next-question"> START </h3>
document.querySelector("#edit-card-button").style.display="none"
document.querySelector("#delete-card-button").style.display="none"
document.querySelector("#card-form").style.display="initial"
document.querySelector("#card-form textarea").textContent = cardList[cardIndex]
document.querySelector("#card-form .text-card").textContent = cardList[cardIndex]
document.querySelector("#card-form input").value = cardList[cardIndex]

document.querySelector("#question-box").style.display="none"
@@ -184,7 +190,7 @@ <h3 id="next-question"> START </h3>
}
// Resetting card form content and displaying question box
document.querySelector("#card-form").style.display="none"
document.querySelector("#card-form textarea").textContent = ""
document.querySelector("#card-form .text-card").textContent = ""
document.querySelector("#card-form input").value = ""
document.querySelector("#question-box").style.display="flex"
})
2 changes: 1 addition & 1 deletion templates/decks.html
Original file line number Diff line number Diff line change
@@ -18,7 +18,7 @@ <h3>{{ deck.title }}</h3>
<a href="{{ url_for('displayDeck', username=username, deckTitle=deck.title) }}" style="text-decoration:none" class="deck-link">
<div class="personal-deck" >
<object>
<a href="{{ url_for('deleteDeck', username=username, deckTitle=deck.title) }}" class="delete-deck">
<a href="{{ url_for('deleteDeck', username=username, deckTitle=deck.title) }}" class="icon-top-left">
<span class="fa-stack fa-4x">
<i class="fa-solid fa-circle fa-stack-2x " style="color:#eae1df"></i>
<i class="fa-regular fa-trash-can fa-stack-1x fa-inverse " style="color:#382c2b"></i>

0 comments on commit aa0f7f1

Please sign in to comment.