Added CSS for Dashboard + Responsiveness for added elements (#122)

- Background colour altered - Shapes added behind graphs and text for better visuals - Added responsiveness for these shapes
DataBytes-Organisation · Nov 29, 2023 · 3d49a8a · 3d49a8a
1 parent ffb67d0
commit 3d49a8a
Show file tree

Hide file tree

Showing 2 changed files with 144 additions and 0 deletions.
diff --git a/neo_dolfin/static/css/dash2.css b/neo_dolfin/static/css/dash2.css
@@ -0,0 +1,137 @@
+body {
+    background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23464df3' fill-opacity='0.16'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+    max-height: 100vh !important;
+    /* max-width: 100vw !important; */
+    font-size: 1.6rem;
+}
+
+/* background colour */
+#rectangle-background{
+    width: 100vw;
+    height:100vh;
+    background: #BAC1C185;
+    opacity: 60%;
+    position:absolute;
+    z-index:-1;
+    border-radius: 0;
+    bottom:0px;
+    overflow: hidden;
+}
+
+/* current balance backing */
+#rectangle-balance{
+    width: 1400px;
+    height:60px;
+    background: #FFFFFF;
+    opacity: 100%;
+    display: flex;
+    align-items: end;
+    top: 17%;
+    left: 13%;
+    position:absolute;
+    z-index:-1;
+    border-radius: 20px;
+    bottom:0px;
+    overflow: hidden;
+}
+
+/* pie charts backing */
+#rectangle-pie-charts{
+    width: 1400px;
+    height:470px;
+    background: #FFFFFF;
+    opacity: 100%;
+    display: flex;
+    align-items: end;
+    top: 27%;
+    left: 13%;
+    position:absolute;
+    z-index:-1;
+    border-radius: 20px;
+    bottom:0px;
+    overflow: hidden;
+}
+
+/* left line graph backing */
+#rectangle-left-graph{
+    width: 675px;
+    height:300px;
+    background: #FFFFFF;
+    opacity: 100%;
+    display: flex;
+    align-items: end;
+    top: 79%;
+    left: 13%;
+    position:absolute;
+    z-index:-1;
+    border-radius: 20px;
+    bottom:0px;
+    overflow: hidden;
+}
+
+/* right line graph backing */
+#rectangle-right-graph{
+    width: 710px;
+    height:300px;
+    background: #FFFFFF;
+    opacity: 100%;
+    display: flex;
+    align-items: end;
+    top: 79%;
+    left: 50%;
+    position:absolute;
+    z-index:-1;
+    border-radius: 20px;
+    bottom:0px;
+    overflow: hidden;
+}
+
+/* responsiveness for shapes */
+@media screen and (max-width: 768px) {
+    #rectangle-pie-charts {
+        width: 75%;
+        top: 38%;
+    }
+
+    #rectangle-balance {
+        width: 75%;
+        height: 140px;
+        top: 19%;
+    }
+
+    #rectangle-left-graph {
+        width: 50%;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    #rectangle-pie-charts {
+        width: 90%;
+        left: 5%;
+        height: 200px;
+        top: 55%;
+    }
+
+    #rectangle-balance {
+        width: 90%;
+        left: 5%;
+        height: 200px;
+        top: 23%;
+    }
+}
+
+@media screen and (max-width: 320px) {
+    #rectangle-pie-charts {
+        width: 90%;
+        left: 5%;
+        height: 200px;
+        top: 55%;
+    }
+
+    #rectangle-balance {
+        width: 90%;
+        left: 5%;
+        height: 200px;
+        top: 23%;
+    }
+}
diff --git a/neo_dolfin/templates/dash2.html b/neo_dolfin/templates/dash2.html
@@ -614,6 +614,13 @@
 
     </script>
 
+    <!-- background shape elements -->
+    <div id="rectangle-background"></div>
+    <div id="rectangle-pie-charts"></div>
+    <div id="rectangle-left-graph"></div>    
+    <div id="rectangle-right-graph"></div> 
+    <div id="rectangle-balance"></div> 
+
     {% include 'components/chatbotWidget.html' %}
     {% include 'components/footer.html' %}
 </body>