Merge pull request #142 from ECE444-2023Fall/dev-hp-event-page-ui

Added UI to event page
ECE444-2023Fall · Nov 11, 2023 · 6817d77 · 6817d77
2 parents 518e803 + 65f08e4
commit 6817d77
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 13 deletions.
diff --git a/app/static/style.css b/app/static/style.css
@@ -9,6 +9,10 @@ h1{
     font-size: 45px;
 }
 
+p{
+  color: #1d293f;
+}
+
 h2{
   font-weight: 900;
   color: #1d293f;
@@ -112,6 +116,7 @@ ul.navbar-nav {
   font-size: 180%;
   color: #ccc;
 }
+
 /* ------------------------------------------------------------ */
 
 /* Below are the styles for new ratings*/
@@ -158,6 +163,27 @@ ul.navbar-nav {
 }
 /* ------------------------------------------------------------ */
 
+/* The defualt font of our website, we can experiment with it */
+
+.event-banner{
+  margin: auto;
+  border-radius: 1rem;
+  width: 100%;
+  height: 60vh;
+}
+
+.event-section{
+  padding-top: 2vh;
+  padding-bottom: 2vh;
+}
+
+.event-section-header{
+  font-weight: 700;
+  color: #1d293f;
+}
+
+/* ------------------------------------------------------------ */
+
 /* Below are the styles for user_main.html */
 
 .search-box{

diff --git a/app/templates/event.html b/app/templates/event.html
@@ -19,19 +19,72 @@
     {% endwith %}
 
     {% block page_content %}
-<!-- Creates a structured view of an event, displaying its name, description, venue, and an image banner related to the event, -->
-        <div class="page-header">
-            <h1>{{event.name}}</h1>
-            <h3>{{event.short_description}}</h3>
-            <p>{{event.long_description}}</p>
-            <p>Venue: {{event.venue}}</p>
-
-            <form action="/events/register/{{event.id}}" method="post">
-                <input type="submit" id="register_btn" class="btn btn-primary" value="Register"></input>
-            </form>
+        <!-- Creates a structured view of an event, displaying its name, description, venue, and an image banner related to the event, -->
+        <div class="row">
+            <div class="page-header">
+                <div style="text-align: center;">
+                    <img src="{{ url_for ('static', filename='event-assets/event_banner_' + event.id + '.png')}}" class="event-banner" alt="Event Banner">
+                </div>
+            </div>
         </div>
-        <div>
-          <img src="{{ url_for ('static', filename='event-assets/event_banner_' + event.id + '.png')}}" class="img-rounded" alt="Event Banner">
+        <div class="row">
+            <div>
+                <p style="font-weight: 500; font-size: 1.5em;">{{event.start_date}}</p>
+                <h1>{{event.name}}</h1>
+                <p>{{event.short_description}}</p>
+
+                <div class="event-section">
+                    <h4 class="event-section-header">Date and Time</h4>
+                    <p>Starts on: {{event.start_date}}</p>
+                    <p>Ends on: {{event.end_date}}</p>
+                    <p>From: {{event.start_time}} to {{event.end_time}} EST</p>
+                </div>
+
+                <div class="event-section">
+                    <h4 class="event-section-header">Location</h4>
+                    <p>Venue: {{event.venue}}</p>
+                </div>
+
+                <div class="event-section">
+                    <h4 class="event-section-header">About this event</h4>
+                    {% if event.additional_info != ""%}
+                    <p>{{event.long_description}}</p>
+                    {% else %}
+                    <p>The organizer did not provide detailed information about the event.</p>
+                    {% endif %}
+                </div>
+
+                <div class="event-section">
+                    <h4 class="event-section-header">Ticket Price</h4>
+                    {% if event.ticket_price == 0.0 %}
+                        <p>Tickets cost: Free</p>
+                    {% else %}
+                        <p>Tickets cost (per person): {{event.ticket_price}} CAD</p>
+                    {% endif %}
+                </div>
+
+                <div class="event-section">
+                    <h4 class="event-section-header">Location</h4>
+                    <p>Venue: {{event.venue}}</p>
+                </div>
+
+                <div class="event-section">
+                    {% if event.additional_info != "" %}
+                    <h4 class="event-section-header">Additional Information</h4>
+                    <p>Venue: {{event.additional_info}}</p>
+                    {% endif %}
+                </div>
+
+                <div class="event-section">
+                    {% if event.redirect_link != "" %}
+                        <button type="button" class="btn btn-light" href="{{event.redirect_link}}">Register</button>
+                    {% else %}
+                    <form action="/events/register/{{event.id}}" method="post"> 
+                        <input type="submit" id="register_btn" class="btn btn-primary" value="Register"></input>
+                    </form>
+                    {% endif %}
+                </div>
+            </div>
         </div>
         <script type=text/javascript>
             console.log("JS: Is running");

diff --git a/app/templates/user_main.html b/app/templates/user_main.html
@@ -63,7 +63,7 @@ <h1>University of Toronto Events</h1>
               <!-- Generates a form with a search input field and a search button. -->
               <form action="{{ url_for('search.search_events', filter=filter) }}" method="post">
                   <input class="search-box" name="query" id="search-text" autocomplete="off" placeholder="Search all events...">
-                  <button id="search-btn" class="btn btn-light my-2 my-sm-0" type="submit"><i class="fa-solid fa-magnifying-glass" style="color: #ea453f;"></i></button>
+                  <button id="search-btn" class="btn btn-light my-2 my-sm-0" type="submit"><i class="fa-solid fa-magnifying-glass" style="color: #FF7F50;"></i></button>
                   <!-- <button class="btn btn-light my-2 my-sm-0" type="submit" name="clear-search-button" value="clear">Clear Search</button> -->
               </form>