From 78b9cae0ab920b75f048178f51572846f9949f1a Mon Sep 17 00:00:00 2001
From: Corban-Lee <77944149+XordK@users.noreply.github.com>
Date: Fri, 19 May 2023 01:17:34 +0100
Subject: [PATCH] isolating ocean css

---
 src/mainapp/templates/anglers.html |  22 ++--
 src/mainapp/templates/index.html   |  21 ++--
 src/static/css/custom.css          | 145 +-----------------------
 src/static/css/ocean.css           | 173 +++++++++++++++++++++++++++++
 src/static/js/ocean.js             |   7 ++
 src/templates/base.html            |   6 +-
 6 files changed, 207 insertions(+), 167 deletions(-)
 create mode 100644 src/static/css/ocean.css
 create mode 100644 src/static/js/ocean.js

diff --git a/src/mainapp/templates/anglers.html b/src/mainapp/templates/anglers.html
index 292da06..e2b6f60 100644
--- a/src/mainapp/templates/anglers.html
+++ b/src/mainapp/templates/anglers.html
@@ -11,15 +11,15 @@
 {% endblock style %}
 
 {% block header_buttons %}
-<a href="/" class="btn btn-company px-4">Back</a>
+    <a href="/" class="btn btn-company px-4">Back</a>
 {% endblock header_buttons %}
 
 {% block content %}
 
-    <div class="w-100">
+    <div class="d-flex flex-column flex-grow-1">
 
-        <div class="p-4 row">
-            <div class="col-md-3">
+        <div class="m-4 mb-0 row">
+            <div class="col-xl-4 col-md-8 mb-md-0 mb-4">
                 <div class="input-group">
                     <button type="button" data-bs-toggle="dropdown" class="btn btn-outline-company border-secondary-subtle">
                         <i class="bi bi-sort-up"></i>
@@ -28,8 +28,8 @@
                     <button type="button" class="btn btn-outline-company border-secondary-subtle rounded-end" id="searchButton"><i class="bi bi-search"></i></button>
                 </div>
             </div>
-            <div class="col-md">
-                <div class="input-group">
+            <div class="col-xl-3 col-md-4">
+                <div class="input-group d-flex justify-content-md-end">
                     <button class="btn border-secondary-subtle btn-outline-company me-4 rounded-end" id="addAngler" data-bs-toggle="tooltip" data-bs-title="Add Angler" data-bs-custom-class="light-tooltip">
                         <i class="bi bi-plus-lg"></i>
                     </button>
@@ -44,9 +44,15 @@
             </div>
         </div>
     
-        <div class="px-4 mt-2 mb-4 row">
+        <div class="row mx-4 my-2">
+            <div class="col-xl-7">
+                <hr>
+            </div>
+        </div>
+
+        <div class="m-4 mt-0 row">
             {% for angler in anglers %}
-            <div class="col-md-2 mb-4">
+            <div class="col-xl-3 col-lg-4 col-sm-6 mb-4">
                 <div class="card w-100 h-100 fluid-hover-zoom shadow-sm md-shadow-on-hover">
                     <div class="card-body">
                         <h5 class="card-title">{{ angler.first_name }}</h5>
diff --git a/src/mainapp/templates/index.html b/src/mainapp/templates/index.html
index 1321f46..5b453c1 100644
--- a/src/mainapp/templates/index.html
+++ b/src/mainapp/templates/index.html
@@ -1,9 +1,14 @@
 {% extends "base.html" %}
+{% load static %}
+
+{% block style %}
+    <link rel="stylesheet" href="{% static 'css/ocean.css' %}">
+{% endblock style %}
 
 {% block content %}
 
-    <div class="flex-grow-1">
-        <div class="ocean">
+    <div class="flex-grow-1 overflow-hidden">
+        <div id="ocean">
             <div class="bubble bubble--1"></div>
             <div class="bubble bubble--2"></div>
             <div class="bubble bubble--3"></div>
@@ -22,17 +27,7 @@
 {% endblock content %}
 
 {% block scripts %}
-<script type="text/javascript">
-    $(document).ready(function() {
-        $("#pageHeader").hide();
-
-        $(".bubble").each(function() {
-            $(this).on("click", function() {
-                $(this).remove();
-            });
-        });
-    })
-</script>
+    <script src="{% static 'js/ocean.js' %}"></script>
 {% endblock scripts %}
 
 <!-- <h2 class="h1 p-4">
diff --git a/src/static/css/custom.css b/src/static/css/custom.css
index 0b8f375..7db4c8d 100644
--- a/src/static/css/custom.css
+++ b/src/static/css/custom.css
@@ -141,150 +141,9 @@ input[type='radio']:checked {
 }
 
 html, body {
+    overflow: hidden !important;
+    max-width: 100vw;
     height: 100%;
-}
-
-body {
     margin: 0;
-    overflow: hidden;
-  }
-  
- 
-.ocean {
-position: relative;
-width: 100vw;
-height: 100vh;
-background-image: linear-gradient(0deg, #182848, #2980b9)
 }
 
-.bubble {
-width: 30px;
-height: 30px;
-border-radius: 100%;
-position: absolute;
-background-color: white;
-bottom: -30px;
-opacity: 0.2;
-animation: bubble 15s ease-in-out infinite,
-    sideWays 4s ease-in-out infinite alternate;
-}
-
-@keyframes bubble {
-0% {
-    transform: translateY(0%);
-    opacity: 0.06;
-}
-100% {
-    transform: translateY(-120vh);
-}
-}
-
-@keyframes sideWays {
-0% {
-    margin-left: 0px;
-}
-100% {
-    margin-left: 200px;
-}
-}
-
-.bubble--1 {
-left: 10%;
-animation-delay: 0.5s;
-animation-duration: 16s;
-opacity: 0.2;
-}
-
-.bubble--2 {
-width: 15px;
-height: 15px;
-left: 40%;
-animation-delay: 1s;
-animation-duration: 10s;
-opacity: 0.1;
-}
-
-.bubble--3 {
-width: 10px;
-height: 10px;
-left: 30%;
-animation-delay: 5s;
-animation-duration: 20s;
-opacity: 0.3;
-}
-
-.bubble--4 {
-width: 25px;
-height: 25px;
-left: 40%;
-animation-delay: 8s;
-animation-duration: 17s;
-opacity: 0.2;
-}
-
-.bubble--5 {
-width: 30px;
-height: 30px;
-left: 60%;
-animation-delay: 10s;
-animation-duration: 15s;
-opacity: 0.1;
-}
-
-.bubble--6 {
-width: 10px;
-height: 10px;
-left: 80%;
-animation-delay: 3s;
-animation-duration: 30s;
-opacity: 0.4;
-}
-
-.bubble--7 {
-width: 15px;
-height: 15px;
-left: 90%;
-animation-delay: -7s;
-animation-duration: 25s;
-opacity: 0.3;
-}
-
-.bubble--9 {
-width: 20px;
-height: 20px;
-left: 50%;
-bottom: 30px;
-animation-delay: -5s;
-animation-duration: 19s;
-opacity: 0.2;
-}
-
-.bubble--10 {
-width: 40px;
-height: 40px;
-left: 30%;
-bottom: 30px;
-animation-delay: -21s;
-animation-duration: 16s;
-opacity: 0.3;
-}
-
-.bubble--11 {
-width: 30px;
-height: 30px;
-left: 60%;
-bottom: 30px;
-animation-delay: -13.75s;
-animation-duration: 20s;
-opacity: 0.3;
-}
-
-.bubble--11 {
-width: 25px;
-height: 25px;
-left: 90%;
-bottom: 30px;
-animation-delay: -10.5s;
-animation-duration: 19s;
-opacity: 0.3;
-}
diff --git a/src/static/css/ocean.css b/src/static/css/ocean.css
new file mode 100644
index 0000000..c6cc362
--- /dev/null
+++ b/src/static/css/ocean.css
@@ -0,0 +1,173 @@
+#ocean {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    background-image: linear-gradient(0deg, #182848, #2980b9)
+}
+    
+.bubble {
+    width: 30px;
+    height: 30px;
+    border-radius: 100%;
+    position: absolute;
+    background-color: white;
+    bottom: -30px;
+    opacity: 0.2;
+    animation: bubble 15s ease-in-out infinite, sideWays 4s ease-in-out infinite alternate;
+}
+
+.fish {
+    top: 50%;
+    left: 20%;
+    width: 30px;
+    height: 30px;
+    border-radius: 100%;
+    position: absolute;
+    background-color: yellow;
+    bottom: -30px;
+    opacity: 0.6;
+    animation: swimHorizontal 35s ease-in-out, swimVertical 4s ease-in-out infinite alternate;
+}
+
+.fish--1 {
+    top: 75%;
+}
+
+@keyframes swimHorizontal {
+    0% {
+        margin-left: 1500px;
+    }
+    100% {
+        margin-left: -1000px;
+    }
+}
+
+@keyframes swimVertical {
+    0% {
+        margin-top: 0;
+    }
+    100% {
+        margin-top: 20px;
+    }
+}
+
+@keyframes bubble {
+    0% {
+        transform: translateY(0%);
+        opacity: 0.06;
+    }
+    100% {
+        transform: translateY(-120vh);
+    }
+}
+    
+@keyframes sideWays {
+    0% {
+        margin-left: 0px;
+    }
+    100% {
+        margin-left: 200px;
+    }
+}
+    
+.bubble--1 {
+    left: 10%;
+    animation-delay: 0.5s;
+    animation-duration: 16s;
+    opacity: 0.2;
+}
+    
+.bubble--2 {
+    width: 15px;
+    height: 15px;
+    left: 40%;
+    animation-delay: 1s;
+    animation-duration: 10s;
+    opacity: 0.1;
+}
+    
+.bubble--3 {
+    width: 10px;
+    height: 10px;
+    left: 30%;
+    animation-delay: 5s;
+    animation-duration: 20s;
+    opacity: 0.3;
+}
+    
+.bubble--4 {
+    width: 25px;
+    height: 25px;
+    left: 40%;
+    animation-delay: 8s;
+    animation-duration: 17s;
+    opacity: 0.2;
+}
+    
+.bubble--5 {
+    width: 30px;
+    height: 30px;
+    left: 60%;
+    animation-delay: 10s;
+    animation-duration: 15s;
+    opacity: 0.1;
+}
+    
+.bubble--6 {
+    width: 10px;
+    height: 10px;
+    left: 80%;
+    animation-delay: 3s;
+    animation-duration: 30s;
+    opacity: 0.4;
+}
+    
+.bubble--7 {
+    width: 15px;
+    height: 15px;
+    left: 90%;
+    animation-delay: -7s;
+    animation-duration: 25s;
+    opacity: 0.3;
+    }
+    
+.bubble--9 {
+    width: 20px;
+    height: 20px;
+    left: 50%;
+    bottom: 30px;
+    animation-delay: -5s;
+    animation-duration: 19s;
+    opacity: 0.2;
+}
+    
+.bubble--10 {
+    width: 40px;
+    height: 40px;
+    left: 30%;
+    bottom: 30px;
+    animation-delay: -21s;
+    animation-duration: 16s;
+    opacity: 0.3;
+}
+    
+.bubble--11 {
+    width: 30px;
+    height: 30px;
+    left: 60%;
+    bottom: 30px;
+    animation-delay: -13.75s;
+    animation-duration: 20s;
+    opacity: 0.3;
+}
+    
+.bubble--11 {
+    width: 25px;
+    height: 25px;
+    left: 90%;
+    bottom: 30px;
+    animation-delay: -10.5s;
+    animation-duration: 19s;
+    opacity: 0.3;
+}
+    
\ No newline at end of file
diff --git a/src/static/js/ocean.js b/src/static/js/ocean.js
new file mode 100644
index 0000000..afc4bdf
--- /dev/null
+++ b/src/static/js/ocean.js
@@ -0,0 +1,7 @@
+$(document).ready(function() {
+    $("#pageHeader").hide();
+
+    $(".bubble").on("click", function() {
+        $(this).remove();
+    });
+})
diff --git a/src/templates/base.html b/src/templates/base.html
index 06aeba3..783f39a 100644
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -17,7 +17,7 @@
     <body class="font-helvetica mw-100">
 
         <div class="d-flex align-content-stretch h-100 align-self-stretch">
-            <aside class="company-bg text-white d-flex flex-column flex-shrink-0 py-3 position-fixed h-100" id="sidebar">
+            <aside class="company-bg text-white d-flex flex-column flex-shrink-0 py-3 position-fixed h-100 shadow-lg z-3" id="sidebar">
                 <a href="/" class="d-flex align-items-center mb-3 mb-md-0 text-reset text-decoration-none px-2">
                     <img src="{% static 'img/at-logo.png' %}" alt="" class="w-100">
                 </a>
@@ -52,7 +52,7 @@
                     </li>
                 </ul>
             </aside>
-            <div class="flex-grow-1 d-flex flex-column h-100" id="webContent">
+            <div class="flex-grow-1 d-flex flex-column" id="webContent">
                 <div class="bg-body-secondary shadow-sm p-3 align-items-center" id="pageHeader" style="display: flex;">
                     <h1 class="h2 mb-0" id="headerTitle"></h1>
                     <div class="ms-auto">
@@ -60,7 +60,7 @@
                         {% endblock header_buttons %}
                     </div>
                 </div>
-                <div class="flex-grow-1 d-flex">
+                <div class="flex-grow-1 d-flex overflow-auto">
                     {% block content %}
                     {% endblock content %}
                 </div>