Fixed tags

clr-li · Mar 25, 2024 · 6d61abf · 6d61abf
1 parent 56ac72b
commit 6d61abf
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 9 deletions.
diff --git a/public/admin.html b/public/admin.html
@@ -54,7 +54,7 @@ <h1>New Event</h1>
                 <form class="form" id="eventform">
                     <label for="name">Name:</label><br />
                     <input
-                        style="min-width: min(850px, calc(95vw))"
+                        style="min-width: var(--max-width-medium)"
                         type="text"
                         id="name"
                         name="name"
@@ -81,10 +81,13 @@ <h1>New Event</h1>
                     <div class="cols" style="justify-content: right">
                         <input type="time" id="endtime" name="endtime" />
                     </div>
-                    <div style="display: flex; justify-content: center; margin-bottom: 12px">
+                    <div style="display: flex; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; max-width: var(--max-width-medium); margin: auto;">
                         <label>Add Event Tags: </label>
-                        <div id="all-tags"></div>
-                        <button id="add-tag" class="plus-button" type="button">+</button>
+                        <div id="all-tags">
+                            <button id="add-tag" class="plus-button" type="button">+</button>
+                        </div>
+                    </div>
+                    <div style="display: flex; justify-content: center; margin-bottom: 12px">
                         <label style="font-size: 1.5rem; padding: 0.2rem">Repeat</label>
                         <div class="checkbox-wrapper-6">
                             <input

diff --git a/public/admin.js b/public/admin.js
@@ -296,6 +296,7 @@ document.getElementById('add-tag').onclick = () => {
     document.getElementById('add-tag').style.display = 'none';
     document.getElementById('all-tags').appendChild(tagName);
     document.getElementById('all-tags').appendChild(check);
+    document.getElementById('all-tags').setAttribute('style', 'display: flex; flex-wrap: wrap;');
 
     let checkBtn = document.getElementById('checkmark');
     checkBtn.onclick = () => {
@@ -304,7 +305,10 @@ document.getElementById('add-tag').onclick = () => {
             const addedTag = document.createElement('p');
             addedTag.className = 'tag';
             addedTag.textContent = tagValue;
-            document.getElementById('all-tags').appendChild(addedTag);
+            addedTag.setAttribute('style', 'height: fit-content');
+            document
+                .getElementById('all-tags')
+                .insertBefore(addedTag, document.getElementById('add-tag'));
             document.getElementById('add-tag').style.display = 'block';
             document.getElementById('all-tags').removeChild(tagName);
             document.getElementById('all-tags').removeChild(checkBtn);
@@ -321,7 +325,7 @@ function getEventData() {
             var endDate = new Date(eventinfo.endtimestamp * 1000);
             document.getElementById('eventdetails').innerHTML = /* html */ `
             <label for="update-name">Name:</label><br>
-            <input style="min-width: min(850px, calc(95vw));" type="text" value="${sanitizeText(
+            <input style="min-width: var(--max-width-medium);" type="text" value="${sanitizeText(
                 eventinfo.name,
             )}" id="update-name"><br>
             <label for="update-description">Description:</label><br>

diff --git a/public/components/ContactForm.js b/public/components/ContactForm.js
@@ -34,7 +34,7 @@ class ContactForm extends Component {
             }
             div {
                 width: 100%;
-                max-width: var(--max-width-small);
+                max-width: var(--max-width-medium);
                 margin: 0 auto;
                 height: 100%;
                 color: var(--accent);

diff --git a/public/styles/inputs.css b/public/styles/inputs.css
@@ -24,7 +24,7 @@ input:-webkit-autofill:active {
 }
 
 .form textarea {
-    min-width: min(850px, calc(95vw));
+    min-width: var(--max-width-medium);
     border: 2px solid var(--accent);
     resize: none;
 }

diff --git a/public/styles/variables.css b/public/styles/variables.css
@@ -16,7 +16,7 @@
     --success-lighter: lightgreen;
     --success-darker: darkgreen;
     --max-width: min(1000px, 100vw);
-    --max-width-small: min(800px, 100vw);
+    --max-width-medium: min(850px, calc(95vw));
     --delete: #f02828;
     --delete-lighter: #f87777;
     --delete-darker: #d30707;