added labels to fields

Mole1424 · Sep 17, 2024 · 27b62df · 27b62df
1 parent ab159d2
commit 27b62df
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 17 deletions.
diff --git a/app.py b/app.py
@@ -19,21 +19,21 @@ def index():
 @app.route("/createEmail", methods=["POST"])
 def create_email():
     json = request.get_json()
-    week_no = sanitize(json["weekNo"])
+    week_no = escape(json["weekNo"])
     introduction = sanitize(json["introduction"])
     events = json["events"]
     # apply markdown to the escaped description
     for event in events:
-        event["title"] = sanitize(event["title"])
+        event["title"] = escape(event["title"])
         event["description"] = sanitize(event["description"])
-        event["tldr"] = sanitize(event["tldr"])
+        event["tldr"] = sanitize(event["tldr"])[3:-4]  # remove <p> and </p> tags
     conclusion = sanitize(json["conclusion"])
-    name = sanitize(json["name"])
-    whatsapp = sanitize(json["whatsapp"])
-    instagram = sanitize(json["instagram"])
-    email = sanitize(json["email"])
-    facebook = sanitize(json["facebook"])
-    website = sanitize(json["website"])
+    name = escape(json["name"])
+    whatsapp = escape(json["whatsapp"])
+    instagram = escape(json["instagram"])
+    email = escape(json["email"])
+    facebook = escape(json["facebook"])
+    website = escape(json["website"])
     return render_template(
         "newsletter.html",
         week_no=week_no,

diff --git a/static/main.css b/static/main.css
@@ -72,7 +72,6 @@ body {
 .email>* {
     margin-bottom: 1vh;
     resize: none;
-    width: 100%;
     border: 1px solid var(--accent);
     border-radius: 5px;
 }
@@ -82,14 +81,21 @@ body {
     border-radius: 0;
 }
 
+.label {
+    font-size: medium;
+    display: inline;
+    border: none !important;
+    margin-right: 0 !important;
+}
+
 .introduction {
     width: calc(100% - 2px);
     min-height: 5vh;
 }
 
 .event {
     width: 100%;
-    height: 20vh;
+    height: 22vh;
 }
 
 .event>* {
@@ -101,9 +107,8 @@ body {
 
 .event-name {
     height: 10%;
-    width: 92%;
-    margin-top: 2%;
-    margin-right: 0;
+    width: 80%;
+    margin: 1% 0;
 }
 
 .event-close {
@@ -124,6 +129,7 @@ body {
     width: 95%;
     height: 40%;
     resize: none;
+    margin-bottom: 1%;
 }
 
 .event-tldr {
@@ -139,10 +145,12 @@ body {
 }
 
 .conclusion {
+    width: calc(100% - 2px);
     height: 5vh;
 }
 
 .links {
+    width: calc(100% - 2px);
     display: flex;
     flex-direction: column;
     justify-content: center;

diff --git a/templates/main.html b/templates/main.html
@@ -24,22 +24,29 @@ <h2>Becuase the SU website is a pain in the ass</h2>
     </div>
     <div class="emails">
         <div class="email" id="markdown">
-            <input type="text" id="weekNumber" name="weekNumber" placeholder="Week Number">
+            <label for="weekNumber" class="label">Week Number</label>
+            <input type="text" id="weekNumber" name="weekNumber" placeholder="Week Number"></br>
+            <label for="introduction" class="label">Introduction</label>
             <textarea class="introduction" id="introduction" name="introduction" placeholder="Introduction"></textarea>
             {% for i in range(1, num_events+1) %}
                 <div class="event" id="event{{i}}">
+                    <label for="event{{i}}Name" class="label">Event {{i}} Name</label>
                     <input type="text" class="event-name" id="event{{i}}Name" name="event{{i}}Name" placeholder="Event {{i}} Name">
                     {% if i != 1 %}
                         <button class="event-close" id="event{{i}}Close" onclick="closeCustomEvent({{i}});">x</button>
                     {% endif %}
+                    <label for="event{{i}}Description" class="label">Event {{i}} Description</label>
                     <textarea class="event-description" id="event{{i}}Description" placeholder="Event {{i}} Description"></textarea>
+                    <label for="event{{i}}tldr" class="label">Event {{i}} tldr</label>
                     <input type="text" class="event-tldr" id="event{{i}}tldr" name="event{{i}}tldr" placeholder="Event {{i}} tldr">
                 </div>
             {% endfor %}
             <div class="add-event-container">
                 <button class="button" id="addEvent" onclick="createCustomEvent()">+</button>
             </div>
+            <label for="conclusion" class="label">Conclusion</label>
             <textarea class="conclusion" id="conclusion" name="conclusion" placeholder="Conclusion"></textarea>
+            <label for="name" class="label">Name</label>
             <input type="text" id="name" name="name" placeholder="Name">
             <div class="links">
                 <div class="link">

diff --git a/templates/newsletter.html b/templates/newsletter.html
@@ -830,7 +830,7 @@
                                                                         <tbody>
                                                                             <tr>
                                                                                 <td class="mcnTextContent" style="padding-top:0; padding-right:18px; padding-bottom:9px; padding-left:18px;" valign="top">
-                                                                                    <h1>DofE Newsletter Week {{week_no}}</h1>
+                                                                                    <h1>DofE Newsletter Week {{week_no | safe }}</h1>
                                                                                     <br />
                                                                                     {{ introduction | safe }}
                                                                                 </td>
@@ -883,7 +883,7 @@ <h1>DofE Newsletter Week {{week_no}}</h1>
                                                                         <tbody>
                                                                             <tr>
                                                                                 <td class="mcnTextContent" style="padding-top:0; padding-right:18px; padding-bottom:9px; padding-left:18px;" valign="top">
-                                                                                    <h3>{{ event.title }}</h3>
+                                                                                    <h3>{{ event.title | safe }}</h3>
 
                                                                                     <hr />
                                                                                     <div id="Content">