Updated UI to include new slideshow

CollegiateHouseWars/settings/defaults.py

@@ -26,6 +26,7 @@ INSTALLED_APPS = [
 
 MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
+    'whitenoise.middleware.WhiteNoiseMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
@@ -87,12 +88,26 @@ USE_TZ = True
 # https://docs.djangoproject.com/en/4.0/howto/static-files/
 
 STATIC_URL = 'static/'
-STATIC_ROOT = '/var/www/collegiate-housewars/static/'
+STATIC_ROOT = BASE_DIR / "staticfiles"
 
 STATICFILES_DIRS = [
     BASE_DIR / "static"
 ]
 
+LOGGING = {
+    'version': 1,
+    'disable_existing_loggers': False,
+    'handlers': {
+        'console': {
+            'class': 'logging.StreamHandler',
+        },
+    },
+    'root': {
+        'handlers': ['console'],
+        'level': 'WARNING',
+    },
+}
+
 # Default primary key field type
 # https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field
 

CollegiateHouseWars/settings/prod.py

@@ -11,7 +11,14 @@ DEBUG = False
 ALLOWED_HOSTS = [
     '45.79.52.230',
     'housewars.c4thebomb101.com',
-    'collegiate-housewars.herokuapp.com'
+    'collegiate-housewars.herokuapp.com',
+    'collegiate-housewars.up.railway.app'
+]
+
+CSRF_TRUSTED_ORIGINS = [
+    'https://housewars.c4thebomb101.com',
+    'https://collegiate-housewars.herokuapp.com',
+    'https://collegiate-housewars.up.railway.app'
 ]
 
 # Database
@@ -27,3 +34,5 @@ DATABASES = {
         'PORT': '3306'
     }
 }
+
+STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"

CollegiateHouseWars/wsgi.py

@@ -10,8 +10,10 @@ https://docs.djangoproject.com/en/4.0/howto/deployment/wsgi/
 import os
 
 from django.core.wsgi import get_wsgi_application
+from whitenoise import WhiteNoise
 
 os.environ.setdefault('DJANGO_SETTINGS_MODULE',
                       'CollegiateHouseWars.settings.prod')
 
 application = get_wsgi_application()
+application = WhiteNoise(application)

docker-compose.yml

@@ -11,7 +11,6 @@ services:
       - ./:/app
     networks:
       - housewars
-    env_file: .env
     environment:
       DJANGO_SETTINGS_MODULE: "CollegiateHouseWars.settings.docker"
     depends_on:

housewars/static/css/main.css

@@ -16,7 +16,7 @@ html, body {
 }
 
 #banner {
-    background-color: #00f;
+    background-color: #fff;
 }
 
 #step-counter {

templates/base.html

@@ -5,13 +5,18 @@
         <meta charset="ISO-8859-1" />
         <meta name="description" content="A website made by C4 Patino" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
-            integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
+        
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
+            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
+            crossorigin="anonymous"></script>
+        <script src="{% static 'jquery-3.6.1.min.js' %}"></script>
+
         <link rel="stylesheet" type="text/css" href='{% static "css/main.css" %}' />
         <link rel="icon" type="image/x-icon" href='{% static "favicon.ico" %}'>
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
-        <script src=" {% static 'smart-selects/admin/js/chainedfk.js' %}"></script>
+        <script src="{% static 'smart-selects/admin/js/chainedfk.js' %}"></script>
         <script src="{% static 'smart-selects/admin/js/chainedm2m.js' %}"></script>
 
         {% block title %}
@@ -21,8 +26,9 @@
         {% endblock %}
     </head>
     <body>
-        <main role="main" class="row max-height m-0 p-0">
-            <div class="col-lg-4 col-md-12 max-height m-0 p-5">
+        <main role="main" class="container-fluid h-100 m-0 p-0">
+            <div class="row h-100 m-0 p-0">
+                <div class="col-lg-4 col-md-12 p-5">
                     <div id="step-counter" class="mb-5">
                         {% block step-counter %}{% endblock %}
                     </div>
@@ -49,12 +55,37 @@
                         {% endif %}
                     </div>
                 </div>
-            <div id="banner" class="col max-height m-0"></div>
+                <div id="banner" class="col row align-items-center m-0 pe-5">
+                    <div id="carousel" class="carousel slide m-0 p-0" data-bs-ride="carousel">
+                        <div class="carousel-inner">
+                            <div class="carousel-item active">
+                                <img class="d-block w-100" src='{% static "img/IMG_5817.JPG" %}'>
+                            </div>
+                            <div class="carousel-item">
+                                <img class="d-block w-100" src='{% static "img/IMG_5818.JPG" %}'>
+                            </div>
+                            <div class="carousel-item">
+                                <img class="d-block w-100" src='{% static "img/IMG_5819.JPG" %}'>
+                            </div>
+                            <div class="carousel-item">
+                                <img class="d-block w-100" src='{% static "img/IMG_5821.JPG" %}'>
+                            </div>
+                            <div class="carousel-item">
+                                <img class="d-block w-100" src='{% static "img/IMG_5823.JPG" %}'>
+                            </div>
+                            <div class="carousel-item">
+                                <img class="d-block w-100" src='{% static "img/IMG_5826.JPG" %}'>
+                            </div>
+                            <div class="carousel-item">
+                                <img class="d-block w-100" src='{% static "img/IMG_5849.JPG" %}'>
+                            </div>
+                            <div class="carousel-item">
+                                <img class="d-block w-100" src='{% static "img/IMG_5856.JPG" %}'>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </main>
-        <script
-            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
-            integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
-            crossorigin="anonymous"
-        ></script>
     </body>
 </html>