chore: improve the coffee warehouse implementation (#308)

* chore: update GitHub Dashboard app

* chor: update Themes version

* chor: update the width of the Engagement component to fit in all themes

* chore: remove margin in the Menu in Bootstrap theme

* chore: make the Dashboard datePickers fully visible in all themes

* chore: update package-lock.json

* chore: remove duplicate CSS

* chore: make the header DDL the same height

* chore: update the checkbox selection handling and cell sizing based on selected theme

* chore: update filterin logic. Update Grid column widths

Co-authored-by: Petar Todorov <petar.todorov@progre>

Author: PekoPPT

examples-standalone/coffee-warehouse/package-lock.json

@@ -12,6 +12,7 @@
               <div class="card-container">
                 <router-view
                   :localization-language="localizationLanguage"
+                  :current-theme="currentTheme"
                 ></router-view>
               </div>
             </div>

examples-standalone/coffee-warehouse/public/static/themes/kendo-theme-bootstrap/all.css

@@ -239,3 +239,8 @@ $container-max-widths: (
   background-color: #f5f5f5;
   border-radius: 2px;
 }
+
+
+.k-menu.k-menu-vertical:not(.k-context-menu){
+  padding:0;
+}

examples-standalone/coffee-warehouse/public/static/themes/kendo-theme-default/all.css

@@ -184,89 +184,6 @@ a {
     }
 }
 
-// Header
-.header-bg {
-    background-image: url('./assets/images/header-bg.png');
-}
-
-.header {
-    height: 80px;
-    position: sticky;
-    top: 0;
-    z-index: 3;
-
-    .nav-container {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        height: 100%;
-        color: $white;
-    }
-
-    .menu-button {
-        flex: 0 0 50px;
-        text-align: center;
-    }
-
-    .hamburger-icon {
-        background-image: url('./assets/images/hamburger-icon.svg');
-        background-repeat: no-repeat;
-        width: 20px;
-        cursor: pointer;
-    }
-
-    .title {
-        display: flex;
-        flex: 1 0 auto;
-        flex-direction: column;
-        align-items: flex-start;
-        margin-left: 25px;
-    }
-
-    .k-avatar {
-        display: block;
-        width: 40px;
-        height: 40px;
-        flex-basis: 40px;
-        margin: 0 25px;
-        box-shadow: 0 0 0px 1px $white;
-    }
-
-    .settings {
-        display: none;
-    }
-}
-
-@media (min-width: 480px) {
-    .header {
-        .title {
-            flex-direction: row;
-            align-items: center;
-        }
-        .vl {
-            border-left: 1px solid $white;
-            height: 25px;
-            margin: 6px 15px;
-        }
-    }
-}
-
-@media (min-width: 768px) {
-    .header {
-        .settings {
-            display: flex;
-            flex: 0 0 auto;
-            align-items: center;
-        }
-
-        .k-dropdown {
-            max-width: 90px;
-            margin-left: 15px;
-        }
-    }
-}
-
 // Dashboard page
 .dashboard-page {
     .k-grid-toolbar .k-textbox {

examples-standalone/coffee-warehouse/public/static/themes/kendo-theme-material/all.css

@@ -20,14 +20,14 @@
       </buttongroup>
       <div class="card-ranges">
         <datepicker
-          style="width: 120px"
+          style="width: 130px"
           :value="dateRange.start"
           @change="onFromDateChange"
         >
         </datepicker>
         <span> - </span>
         <datepicker
-          style="width: 120px"
+          style="width: 130px"
           :value="dateRange.end"
           @change="onToDateChange"
         >

examples-standalone/coffee-warehouse/src/App.vue

@@ -5,7 +5,7 @@
     :type="'bar'"
     :series-defaults="seriesDefaults"
   >
-    <ChartArea :opacity="0" :width="200" :height="40" />
+    <ChartArea :opacity="0" :width="180" :height="40" />
     <ChartValueAxis>
       <ChartValueAxisItem :max="max" :min="min" />
     </ChartValueAxis>

examples-standalone/coffee-warehouse/src/assets/styles/app.scss

@@ -6,7 +6,7 @@
         <span class="vl"></span>
         <h2>{{ teamMessage }}</h2>
       </div>
-      <DropDownList :style="{ width: '230px' }" class="localeDropDownList" :value="currentLocale"
+      <DropDownList :style="{ width: '230px', height: '30px' }" class="localeDropDownList" :value="currentLocale"
         :text-field="'language'" @change="localeChange" :data-items="locales">
       </DropDownList>
       <DropDownList :data-items="themes" :text-field="'text'" :popup-settings="themesPopupSettings"