From 71e4e33259358464a61b49920171cf04f6176982 Mon Sep 17 00:00:00 2001
From: J2mF <mp4-12cs5@hotmail.com>
Date: Fri, 11 Mar 2022 17:57:05 +0200
Subject: [PATCH] [WIP] Html Designs (#18)

Change Log:
- Add slick js to categories
- Fix center alignment for categories
- Fix margin between columns
---
 .idea/expensia.iml          |  3 +++
 .idea/jsLibraryMappings.xml |  2 +-
 design/index.html           | 14 ++++++++++++--
 design/style.css            | 26 +++++++++++++++++++++++++-
 4 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/.idea/expensia.iml b/.idea/expensia.iml
index cafef0a..75dd6bc 100644
--- a/.idea/expensia.iml
+++ b/.idea/expensia.iml
@@ -18,6 +18,9 @@
     <orderEntry type="sourceFolder" forTests="false" />
     <orderEntry type="library" name="font-awesome" level="application" />
     <orderEntry type="library" name="Chart.js" level="application" />
+    <orderEntry type="library" name="slick" level="application" />
+    <orderEntry type="library" name="jquery-3.6.0" level="application" />
+    <orderEntry type="library" name="slick-theme" level="application" />
   </component>
   <component name="TemplatesService">
     <option name="TEMPLATE_CONFIGURATION" value="Django" />
diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
index 7556ea6..c44e587 100644
--- a/.idea/jsLibraryMappings.xml
+++ b/.idea/jsLibraryMappings.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="JavaScriptLibraryMappings">
-    <file url="file://$PROJECT_DIR$" libraries="{Chart.js, font-awesome}" />
+    <file url="file://$PROJECT_DIR$" libraries="{Chart.js, font-awesome, jquery-3.6.0, slick, slick-theme}" />
   </component>
 </project>
\ No newline at end of file
diff --git a/design/index.html b/design/index.html
index 4d1420b..0c04e09 100644
--- a/design/index.html
+++ b/design/index.html
@@ -4,6 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
     <link rel="stylesheet" href="style.css">
     <title>Expensia</title>
 </head>
@@ -19,7 +21,7 @@
         <h1 class="title">Expensia</h1>
         <div class="row">
             <div class="column">
-                <div class="list">
+                <div class="list list--vertical">
                     <div class="list__title">
                         Latest Spending
                         <i class="title__action">+</i>
@@ -94,7 +96,7 @@ <h1 class="title">Expensia</h1>
                         <i class="title__action">+</i>
                     </div>
                     <hr />
-                    <ul>
+                    <ul class="slick">
                         <li class="list__item">
                             <img class="item__icon" src="scratch.png" alt="">
                             <div class="item__details">
@@ -144,8 +146,10 @@ <h1 class="title">Expensia</h1>
         </div>
     </main>
 
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js" integrity="sha512-Tn2m0TIpgVyTzzvmxLNuqbSJH3JP8jm+Cy3hvHrW7ndTDcJ1w5mBiksqDBb8GpE2ksktFvDB/ykZ0mDpsZj20w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
     <script>
         const ctx = document.getElementById('expense-chart');
         const data = {
@@ -179,6 +183,12 @@ <h1 class="title">Expensia</h1>
         };
 
         const expenseChart = new Chart(ctx, config);
+        $('.slick').slick({
+            infinite: true,
+            slidesToShow: 4,
+            autoplay: true,
+            arrows: false,
+        });
     </script>
 </body>
 </html>
diff --git a/design/style.css b/design/style.css
index d736b0f..1d50390 100644
--- a/design/style.css
+++ b/design/style.css
@@ -122,6 +122,7 @@ body {
     flex: 50%;
     width: 50%;
     text-align: center;
+    margin-right: 1rem;
 }
 
 .list ul {
@@ -134,6 +135,16 @@ body {
     overflow-y: visible;
 }
 
+.list.list--vertical {
+    height: 100%;
+}
+
+.list.list--vertical ul {
+    overflow-y: scroll;
+    height: 80%;
+    padding: 0;
+}
+
 .list__title {
     text-align: left;
     color: darkslateblue;
@@ -168,11 +179,16 @@ body {
 }
 
 .list--horizontal .list__item {
-    display: inline-block;
+    max-width: 6rem;
+    align-content: center;
+    justify-items: center;
+    justify-content: center;
+    padding: 0.2rem;
 }
 
 .list__item:hover {
     background: #42b983;
+    color: white;
 }
 
 .item__icon {
@@ -182,6 +198,10 @@ body {
     margin-right: 10px;
 }
 
+.list--horizontal .item__icon {
+    margin: 0 auto;
+}
+
 .item__details {
     width: 100%;
     display: flex;
@@ -194,6 +214,10 @@ body {
     text-align: left;
 }
 
+.list--horizontal .item__name {
+    text-align: center;
+}
+
 .item__cost {
     flex: 10%;
     font-family: monospace;