[WIP] Html Designs (#18)

Change Log: - Add slick js to categories - Fix center alignment for categories - Fix margin between columns
TheKiddos · Mar 11, 2022 · 71e4e33 · 71e4e33
1 parent 3ac91aa
commit 71e4e33
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 4 deletions.
diff --git a/.idea/expensia.iml b/.idea/expensia.iml
diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
diff --git 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
@@ -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;