Address issues from #1, #2

telerik · Oct 6, 2021 · 9508030 · 9508030
1 parent bc3001c
commit 9508030
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 22 deletions.
diff --git a/AdminDashboard/AdminDashboard/Pages/Index.cshtml b/AdminDashboard/AdminDashboard/Pages/Index.cshtml
@@ -7,24 +7,29 @@
 @{
     ViewData["Title"] = "Overview";
 }
-
+<script>
+    $(".k-tilelayout-item").on("resize", function () {
+        console.log('opaaa')
+        resizeWidgets()
+    })
+</script>
 <div class="k-d-flex-col k-justify-content-center">
     <div class="greeting">
         Hello Again, @userManager.GetUserAsync(User).Result.FullName!
     </div>
 
 
     <script id="tasks-ontrack-template" type="text/html">
-        <div style="font-size: 84px; line-height: 101px; color: \\#37B400">22</div>
-        <div class="k-card-title">In Backlog: 43</div>
+        <div style="font-size: 84px; font-weight:300; line-height: 101px; color: \\#37B400">22</div>
+        <div class="k-card-title" style="color: \\#666666">In Backlog: 43</div>
     </script>
     <script id="overdue-tasks-template" type="text/html">
-        <div style="font-size: 84px; line-height: 101px; color: \\#F31700">7</div>
-        <div class="k-card-title">From Yesterday: 16</div>
+        <div style="font-size: 84px; font-weight: 300; line-height: 101px; color: \\#F31700">7</div>
+        <div class="k-card-title" style="color: \\#666666">From Yesterday: 16</div>
     </script>
     <script id="issues-template" type="text/html">
-        <div style="font-size: 84px; line-height: 101px; color: \\#FFC000">47</div>
-        <div class="k-card-title">Closed By Team: 15</div>
+        <div style="font-size: 84px; font-weight: 300; line-height: 101px; color: \\#FFC000">47</div>
+        <div class="k-card-title" style="color: \\#666666">Closed By Team: 15</div>
     </script>
     <script id="used-space-template" type="text/html">
         <div>
@@ -33,7 +38,7 @@
                 </scale>
             </kendo-arcgauge>
         </div>
-        <div class="k-card-title">25 of 50GB Used</div>
+        <div class="k-card-title" style="color: \\#666666">25 of 50GB Used</div>
     </script>
 
     <script id="total-points-header-template" type="text/html">
@@ -237,7 +242,7 @@
     }
 
     function resizeWidgets() {
-        $("#chart").getKendoChart().resize()
+        $("#chart").getKendoChart().resize(true)
         $("#grid").getKendoGrid().resize(true)
     }
 
@@ -248,8 +253,15 @@
             resizeWidgets()
         })
     })
+
 </script>
 <style>
+    @@media only screen and (max-width: 600px) {
+        .k-tilelayout-item.k-card {
+            grid-column-end: span 4 !important;
+        }
+    }
+
     .negativeBudget {
         color: #FF6358;
     }
@@ -278,4 +290,8 @@
         padding: 16px;
         background: #fafafa;
     }
+
+    .k-rating-container .k-rating-item {
+        padding: 0;
+    }
 </style>
diff --git a/AdminDashboard/AdminDashboard/Pages/Performance.cshtml b/AdminDashboard/AdminDashboard/Pages/Performance.cshtml
@@ -61,7 +61,9 @@
             <labels template="\\#= data.series._groupValue\\#"></labels>
         </chart-legend>
         <category-axis>
-            <category-axis-item categories="daysOfWeek"></category-axis-item>
+            <category-axis-item categories="daysOfWeek">
+            <labels template="\\# if(kendo.support.mobileOS != false){return kendo.toString(kendo.date.dayOfWeek(new Date(),index),'ddd')} else {return value} \\#"></labels>
+            </category-axis-item>
         </category-axis>
         <datasource>
             <transport>
@@ -287,6 +289,11 @@
     </containers>
 </kendo-tilelayout>
 <style>
+    @@media only screen and (max-width: 600px) {
+        .k-tilelayout-item.k-card {
+            grid-column-end: span 6 !important;
+        }
+    }
     .k-card-title {
         font-size: 20px;
         line-height: 24px;
@@ -355,7 +362,7 @@
     }
     function resizeWidgets() {
         var charts = $(".k-chart");
-        charts.each((idx, elem) => $(elem).getKendoChart().resize())
+        charts.each((idx, elem) => $(elem).getKendoChart().resize(true))
     }
 
     $(document).ready(function () {

diff --git a/AdminDashboard/AdminDashboard/Pages/Settings.cshtml b/AdminDashboard/AdminDashboard/Pages/Settings.cshtml
@@ -101,7 +101,7 @@
     <div class="k-d-flex-col k-align-items-center k-justify-content-around">
         <div style="width: 100px; height: 100px; background-image: url(@Url.Content("~/assets/settings/cloud.svg"))"></div>
         <div class="k-state-disabled">Partly Cloudy</div>
-        <div style="font-size: 70px; line-height: 84px; color: \\#0058E9">12 &\\#176;C</div>
+        <div style="font-size: 70px; font-weight: 300; line-height: 84px; color: \\#0058E9">12 &\\#176;C</div>
     </div>
     <div class="k-card-footer">
         <div class="weather-data-container k-d-flex-row k-align-items-center k-justify-content-center">
@@ -134,6 +134,15 @@
     </containers>
 </kendo-tilelayout>
 <style>
+    @@media only screen and (max-width: 600px) {
+        .k-tilelayout-item.k-card {
+            grid-column-end: span 3 !important;
+        }
+
+        .k-grid-cols-2 {
+            grid-template-columns: repeat(1,minmax(0,1fr));
+        }
+    }
     #settings .k-card-header {
         border-style: none;
     }

diff --git a/AdminDashboard/AdminDashboard/Pages/Shared/_Layout.cshtml b/AdminDashboard/AdminDashboard/Pages/Shared/_Layout.cshtml
@@ -1,5 +1,8 @@
 @using AdminDashboard.Data.Models
 @inject UserManager<ApplicationUser> userManager
+@{ 
+    var routeUrl = Url.RouteUrl(ViewContext.RouteData.Values);
+}
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -10,7 +13,7 @@
     <link rel="stylesheet" href="~/css/site.css" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
 
 
     @* Add the Kendo UI styles: *@
@@ -23,14 +26,14 @@
     <script src="https://kendo.cdn.telerik.com/2021.2.616/js/jszip.min.js"></script>
 </head>
 <body>
-    <kendo-drawer name="drawer" mode="push" width="240" position="left" template-id="drawerTemplate" navigatable="true">
+    <kendo-drawer name="drawer" mode="push" width="240" position="left" template-id="drawerTemplate" auto-collapse="false" on-item-click="onItemClick">
         <mini enabled="false" />
         <content>
             <div>
                 <main role="main">
                     <kendo-appbar name="appbar" theme-color="AppBarThemeColor.Inherit" style="height:48px;">
                         <items>
-                            <appbar-item type="AppBarItemType.ContentItem" template="<span id='menuIcon' href='\\#'><span class='k-icon k-i-menu'></span></span>"></appbar-item>
+                            <appbar-item type="AppBarItemType.ContentItem" template="<span id='menuIcon' href='\\#' onclick='toggleDrawer()'><span class='k-icon k-i-menu'></span></span>"></appbar-item>
                             <appbar-item type="AppBarItemType.Spacer" width="16px"></appbar-item>
                             <appbar-item type="AppBarItemType.ContentItem" template="<div class='title'>@ViewData["Title"]</div>"></appbar-item>
                             <appbar-item type="AppBarItemType.Spacer"></appbar-item>
@@ -60,11 +63,11 @@
             </form>
         </div>
         <ul>
-            <li><a data-role='drawer-item' asp-page="/Index"><span class="k-icon k-i-grid "></span>Dashboard</a></li>
-            <li><a data-role='drawer-item' asp-page="/Performance"><span class="k-icon k-i-globe"></span>Performance and Sales</a></li>
-            <li><a data-role='drawer-item' asp-page="/Products"><span class="k-icon k-i-aggregate-fields"></span>Products</a></li>
+            <li data-role='drawer-item'><a asp-page="/Index"><span class="k-icon k-i-grid "></span>Dashboard</a></li>
+            <li data-role='drawer-item'><a asp-page="/Performance"><span class="k-icon k-i-globe"></span>Performance and Sales</a></li>
+            <li data-role='drawer-item'><a asp-page="/Products"><span class="k-icon k-i-aggregate-fields"></span>Products</a></li>
             <li data-role='drawer-separator'></li>
-            <li><a data-role='drawer-item' asp-page="/Settings"><span class="k-icon k-i-gear"></span>Settings</a></li>
+            <li data-role='drawer-item'><a asp-page="/Settings"><span class="k-icon k-i-gear"></span>Settings</a></li>
         </ul>
     </script>
 
@@ -79,6 +82,10 @@
             text-decoration-line: underline;
         }
 
+        #menuIcon {
+            cursor:pointer;
+        }
+
         .title {
             font-size: 18px;
             line-height: 20px;
@@ -91,14 +98,48 @@
             color: #424242;
             cursor: pointer;
         }
+
+        li[data-role='drawer-item'] > a{
+            color: #424242;
+        }
+        li.k-state-selected[data-role='drawer-item'] > a {
+            color: #FFFFFF;
+        }
+        .k-drawer-wrapper {
+            transition: all .3s ease-in-out;
+        }
     </style>
 
     <script>
         $(document).ready(function () {
-            $("#menuIcon").click(function () {
-                $("#drawer").getKendoDrawer().show();
-            })
+            $('a[href="@routeUrl"]').parent().addClass('k-state-selected');
+
+            $('.k-drawer-container').addClass('k-drawer-expanded');
+            $('.k-drawer-wrapper').css('width', '240px');
+            if ($(window).width() < 600) {
+                $("#drawer").getKendoDrawer().hide()
+                $('.k-drawer-container').removeClass('k-drawer-expanded');
+            }
+            //$('.k-drawer-wrapper').css('transition', 'all .3s ease-in-out')
         })
+
+        function toggleDrawer() {
+            var drawerInstance = $("#drawer").getKendoDrawer();
+            var drawerContainer = drawerInstance.drawerContainer;
+            if (drawerContainer.hasClass("k-drawer-expanded")) {
+                drawerInstance.hide();
+                $('.k-drawer-container').removeClass('k-drawer-expanded');
+            } else {
+                drawerInstance.show();
+            }
+            setTimeout(resizeWidgets,400)
+        }
+        function onItemClick(e) {
+            if (!e.item.hasClass("k-drawer-separator")) {
+                var targetPage = e.item.find("a").attr("href");
+                window.location.href = targetPage;
+            }
+        }
     </script>
 
     <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>