Updated UI of Main Page

.github/workflows/docker-image.yml

@@ -31,7 +31,7 @@ jobs:
         echo "Sleeping for 60 seconds"
         sleep 45
         docker ps -a
-        if curl -s http://localhost:5000/ | grep "Login to UofT Event Hub"
+        if curl -s http://localhost:5000/ | grep "Login to UofT EventHub"
           then
             echo "Login page detected. PR can be merged!"
           else

app/static/style.css

@@ -225,7 +225,7 @@ ul.navbar-nav {
   padding: 1em 2em;
   height: 3.5vh;
   background: #fff;
-  margin: 100px auto 0;
+  margin: 35px auto 0;
   border-radius: 5px;
   border: 10px solid rgba(255,255,255,.5);
   font-size: 23px;
@@ -269,15 +269,21 @@ button .fa-solid{
 }
 
 .btn-light{
-  background-color: #fff;
-  border-color: #fff;
+  background-color: #f6f6f6;
+  border-color: #f6f6f6;
 }
 
 .btn-light:hover{
   background-color: #FF7F50;
   color: white;
 }
 
+.btn-toggle{
+  background-color: #FF7F50;
+  border-color: #FF7F50;
+  color: white;
+}
+
 .row{
   display: flex;
   align-items: center;

app/templates/base.html

@@ -66,7 +66,7 @@ <h3 class="nav-logo"> UofT Event<span class="hub">Hub</span>  </h3>
           <div class="row d-flex justify-content-center align-items-center h-100">
             <div class="col-lg-12 col-xl-11">
                 <div class="page-header">
-                    <p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Login to UofT Event Hub</p>
+                    <p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Login to UofT Event<span style="color: #FF7F50;">Hub</span></p>
                 </div>
                 {% with messages = get_flashed_messages(with_categories=true) %}
                 {% if messages %}

app/templates/create_event.html

@@ -33,14 +33,11 @@
                     <div class="card-body p-md-5">
                       <div class="row align-items-center justify-content-center">
                         <div class="col-12 col-md-8">
+                          <p style="text-align: left;"><a href="/organizer"><i class="fa-solid fa-arrow-left" style="color: #FF7F50; font-size: 1.75rem;"></i></a></p>
                           <div class="page-header-create-event">
                             <h1>Create Event</h1>
                           </div>
                             {{ wtf.quick_form(form) }}
-                            <!--for now cancel button is in next line, until then leaving it as hyperlink
-                              <a href="/organizer" class="btn btn-default">Cancel</a>
-                            -->
-                          <p><a href="/organizer">Return to main</a></p>
                         </div>
                       </div>
                     </div>
@@ -53,4 +50,3 @@ <h1>Create Event</h1>
     {% endblock %}
 </div>
 {% endblock %}
-

app/templates/user_events.html

@@ -83,7 +83,7 @@ <h1>My Events</h1>
             <div class="col-xs-12 col-sm-12" style="text-align: center;">
               <form action="{{ url_for('filter.filter_events', search=search) }}" method="post">
                   {% for filter_tag in filter_tags %}
-                  <button id="sort-key-btn" class="btn btn-light my-2 my-sm-0" type="submit" name="filter-tag" value="{{filter_tag | lower}}">{{filter_tag}}</button>
+                  <button id="sort-key-btn" class="btn btn-light my-2 my-sm-0" style="margin-right: 10px;" type="submit" name="filter-tag" value="{{filter_tag | lower}}">{{filter_tag}}</button>
                   {% endfor %}
                   <button id="sort-clear-btn" class="btn btn-light my-2 my-sm-0" type="submit" name="filter-tag" value="clear">Clear Filters</button>
               </form>
@@ -108,7 +108,7 @@ <h4 class="card-title">
                           </a>
                         </h4>
                         <p class="">
-                            {{value.description}}
+                            {{value.short_description}}
                         </p>
                     </div>
                     <div class="card-read-more">

app/templates/user_main.html

@@ -67,29 +67,26 @@ <h1>University of Toronto Events</h1>
                   <!-- <button class="btn btn-light my-2 my-sm-0" type="submit" name="clear-search-button" value="clear">Clear Search</button> -->
               </form>
 
-              <!-- Generates a form to toggle between the user views -->
-              <!-- Form sends a POST request to flask to change the toggle value on the backend-side -->
-              <!-- And the new toggle value (from the server) is embedded in the button element -->
-              <form action="{{ url_for('user.toggle', filter=filter, search=search) }}" method="post">
-                <button id="toggleViewButton" class="btn btn-primary" embedded-toggle-data="{{toggle}}" type="submit">Toggle View</button>
-              </form>
-
               <!-- <div class="col-xs-12 col-sm-12" style="text-align: center; display: block; position: relative;"> -->
                 <!-- The text box to display autocomplete suggestions -->
                 <div class="dropdown-menu autocomplete-drop-down"></div>
               <!-- </div> -->
             </div>
           </div>
-          <div class="row" style="text-align: center;">
-
-          </div>
+          <div class="row" style="text-align: center;"></div>
           <div class="row" style="text-align: center;">
             <div class="col-xs-12 col-sm-12" style="text-align: center;">
-              <form action="{{ url_for('filter.filter_events', search=search) }}" method="post">
+              <form action="{{ url_for('filter.filter_events', search=search) }}" method="post" class="d-inline">
                   {% for filter_tag in filter_tags %}
-                  <button id="sort-key-btn" class="btn btn-light my-2 my-sm-0" type="submit" name="filter-tag" value="{{filter_tag | lower}}">{{filter_tag}}</button>
+                  <button id="sort-key-btn" class="btn btn-light my-2 my-sm-0" style="margin-right: 10px;" type="submit" name="filter-tag" value="{{filter_tag | lower}}">{{filter_tag}}</button>
                   {% endfor %}
-                  <button id="sort-clear-btn" class="btn btn-light my-2 my-sm-0" type="submit" name="filter-tag" value="clear">Clear Filters</button>
+                  <button id="sort-clear-btn" class="btn btn-light my-2 my-sm-0" style="margin-right: 10px;" type="submit" name="filter-tag" value="clear">Clear Filters</button>
+              </form>
+              <!-- Generates a form to toggle between the user views -->
+              <!-- Form sends a POST request to flask to change the toggle value on the backend-side -->
+              <!-- And the new toggle value (from the server) is embedded in the button element -->
+              <form action="{{ url_for('user.toggle', filter=filter, search=search) }}" method="post" class="d-inline">
+                <button id="toggleViewButton" class="btn btn-toggle" embedded-toggle-data="{{toggle}}" type="submit"><i class="fa-regular fa-calendar fa-xl"></i></button>
               </form>
             </div>
           </div>

app/user.py

@@ -54,6 +54,7 @@ def main(filter="all", search=None):
     # Get the toggle value stored in the session 
     # OR set it to False by default (if session doesn't have a value)
     toggle = session.get('toggle_value', False)
+    session['toggle_value'] = toggle
 
     return render_template("user_main.html", event_data=dict_of_events_details, event_data_json=event_data_json, 
                            search=search, filter=filter, filter_tags=FILTERS, toggle=toggle)