jamesparkin/Results-Page
1
0
Fork 0
Code Issues 9 Pull Requests Projects 1 Releases Activity

isolating ocean css

Browse Source
This commit is contained in:
Corban-Lee 2023-05-19 01:17:34 +01:00
parent 9169541bae
commit 78b9cae0ab
6 changed files with 207 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/mainapp/templates/anglers.html
View File

@ -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>

21
src/mainapp/templates/index.html
View File

@ -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">

145
src/static/css/custom.css
View File

@ -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;
}

173
src/static/css/ocean.css Normal file
View File

@ -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;
}

7
src/static/js/ocean.js Normal file
View File

@ -0,0 +1,7 @@
$(document).ready(function() {
$("#pageHeader").hide();
$(".bubble").on("click", function() {
$(this).remove();
});
})

6
src/templates/base.html
View File

@ -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>