Front-end formatting for event management

Co-authored-by: JV888 <JV888@users.noreply.github.com>

Front-end formatting for event management
Co-authored-by: JV888 <JV888@users.noreply.github.com>
f7b9ad7a · Ciella Francisco · 54fa57bf · 54fa57bf · f7b9ad7a · f7b9ad7a
Commit f7b9ad7a authored Apr 11, 2024 by Ciella Francisco 😵
12 changed files
--- a/redbrickboard/accounts/__init__.py
+++ b/redbrickboard/accounts/__init__.py
--- a/redbrickboard/event_management/templates/event_management/event-details.html
+++ b/redbrickboard/event_management/templates/event_management/event-details.html
+{% extends 'base.html' %}
+{% load static %}
+{% block title %}Widget's Forum{% endblock %}
 {% block content %}
 <img src="{{ object.event_header.url }}" width = '300'/>
 <p><a href='{{ object.get_absolute_url }}'>{{ object }}</a></p>

--- a/redbrickboard/event_management/templates/event_management/event-list.html
+++ b/redbrickboard/event_management/templates/event_management/event-list.html
+{% extends 'base.html' %}
+{% load static %}
+{% block title %}Widget's Forum{% endblock %}
 {% block content %}
 <ul>
    {% for event in object_list %}

--- a/redbrickboard/eventcatalog/__init__.py
+++ b/redbrickboard/eventcatalog/__init__.py
--- a/redbrickboard/media/headers/IMG_0346.JPG
+++ b/redbrickboard/media/headers/IMG_0346.JPG
--- a/redbrickboard/media/headers/Screenshot_from_2024-03-26_18-52-02.png
+++ b/redbrickboard/media/headers/Screenshot_from_2024-03-26_18-52-02.png
--- a/redbrickboard/media/headers/Screenshot_from_2024-03-26_18-52-02_oAG9C4h.png
+++ b/redbrickboard/media/headers/Screenshot_from_2024-03-26_18-52-02_oAG9C4h.png
--- a/redbrickboard/media/headers/Screenshot_from_2024-03-26_19-27-19.png
+++ b/redbrickboard/media/headers/Screenshot_from_2024-03-26_19-27-19.png
--- a/redbrickboard/media/headers/weverse_1-256164181.jpg
+++ b/redbrickboard/media/headers/weverse_1-256164181.jpg
--- a/redbrickboard/redbrickboard/__init__.py
+++ b/redbrickboard/redbrickboard/__init__.py
--- a/redbrickboard/static/css/custom.css
+++ b/redbrickboard/static/css/custom.css
@@ -14,7 +14,7 @@
     font-size: 1rem;
 }

-.blue-text {
+/* .blue-text {
     color: var(--theme-prusian-blue);
 }

@@ -22,9 +22,10 @@
     font-family: 'Inria Sans';
     font-weight: 400;
     font-style: normal;
-}
+} */

 body {
+     font-family: "Inter";
     background-color: var(--theme-dutch-white);
     background-image: url("/static/images/Continuous Background.png");
     background-position: left top;
@@ -32,7 +33,49 @@ body {
     background-size: 80%;
 }

-.btn-red {
+.navbar-brand {
+     display: contents;
+}
+
+.nav-link {
+     color: var(--theme-orange);
+}
+
+.nav-item {
+     #add-event-btn {
+          background-color: var(--theme-prusian-blue);
+     }
+
+     #log-out-btn {
+          background-color: var(--theme-bright-red);
+     }
+
+     .btn {
+          color: white;
+
+          &:hover {
+               box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
+          }
+     }
+}
+
+@media (max-width: 576px) {
+     .logo {
+          width:100px;
+          height:auto;
+     }
+}
+
+@media (min-width: 577px) {
+     .logo {
+          width:20%; 
+          max-width:200px;
+          height:auto;
+     }
+}
+
+
+/* .btn-red {
     transition: all 0.3s ease-in;
     font-size: 1.5vw;
     background-color: var(--theme-bright-red);
@@ -47,8 +90,8 @@ body {
     background-color: var(--theme-prusian-blue);
     color: #fff;
     border-color: var(--theme-prusian-blue);
-}
-
+} */
+/* 
 @media (max-width: 950px) {
     .navbar-brand { 
        width: 90%; 
@@ -86,7 +129,7 @@ body {
     font-size: 1.55vw;
     color: var(--theme-prusian-blue) !important;
     text-decoration: underline;
-}
+} */

 #trial {
     align-items: center;

--- a/redbrickboard/templates/base.html
+++ b/redbrickboard/templates/base.html
@@ -17,7 +17,36 @@
  
 </head>
 <body>
-  <nav class="px-5 navbar navbar-expand-lg navbar-light bg-light">
+     <nav class="navbar navbar-expand-md navbar-light bg-light px-5">
+          <div class="container-fluid">
+               <a class="navbar-brand" href="#"> <!--link to about page/section-->
+                    <img src="{% static '/images/Logo with Name.png' %}" alt="Red Brick Board" class="logo">
+               </a>
+               <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav" aria-controls="nav" aria-expanded="false" aria-label="Toggle Navigation">
+                    <span class="navbar-toggler-icon"></span>
+               </button>
+               <div class="collapse navbar-collapse justify-content-end align-items-center" id="nav">
+                    <ul class="navbar-nav">
+                         <li class="nav-item">
+                              <a href="#" class="nav-link mt-1">Home</a>
+                         </li>
+                         <li class="nav-item">
+                              <a href="#" class="nav-link mt-1">Catalog</a>
+                         </li>
+                         <li class="nav-item">
+                              <a href="#" class="nav-link me-4 mt-1">Profile</a>
+                         </li>
+                         <li class="nav-item">
+                              <a href="#" class="btn me-3 mt-1" id="add-event-btn">Add Event</a>
+                         </li>
+                         <li class="nav-item">
+                              <a href="#" class="btn mt-1" id="log-out-btn">Log Out</a>
+                         </li>
+                    </ul>
+               </div>
+          </div>
+     </nav>
+  <!-- <nav class="px-5 navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid justify-content-end">
    <a class="navbar-brand" href="/">
          <img src="{% static '/images/Logo with Name.png' %}" alt="Red Brick Board" style="width:30%; height:auto;">
@@ -45,7 +74,7 @@
        </li>
      </ul>
  </div>
-</nav>
+</nav> -->
  {% block content %}
  {% endblock %}
 </body>