feat(desk): Responsive 3-2-1 col, skeleton divs

frappe/public/js/frappe/views/components/Desktop.vue

@@ -109,7 +109,7 @@ export default {
 
 <style lang="less" scoped>
 .modules-page-container {
-    margin: 70px 85px;
+    margin: 70px 0px;
 }
 
 .module-category {    
@@ -120,7 +120,7 @@ export default {
 
 .modules-container {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
     column-gap: 15px;
     row-gap: 15px;
 }

frappe/public/js/frappe/views/components/ModuleDetail.vue

@@ -1,19 +1,25 @@
 <template>
-    <div class="sections-container">
-        <div v-for="section in sections"
-            :key="section.name"
-            class="border section-box"
-        >
-            <h4 class="h4"> {{ section.label }} </h4>
-            <p v-for="item in section.items" class="small"
-                :key="item.name"
-                :data-youtube-id="item.type==='help' ? item.youtube_id : false"
+    <div>
+        <div v-if="sections.length" class="sections-container">
+            <div v-for="section in sections"
+                :key="section.name"
+                class="border section-box"
             >
-                <a :href="item.route">{{ item.label || __(item.name) }}</a>
-                <span class="open-notification global hide"
-                    @click="item.doctype || item.name ? frappe.ui.notifications.show_open_count_list(item.doctype || item.name) : false"
-                    :data-doctype="item.doctype || item.name"></span>
-            </p>
+                <h4 class="h4"> {{ section.label }} </h4>
+                <p v-for="item in section.items" class="small"
+                    :key="section.name + item.name"
+                    :data-youtube-id="item.type==='help' ? item.youtube_id : false"
+                >
+                    <a :href="item.route">{{ item.label || __(item.name) }}</a>
+                    <span class="open-notification global hide"
+                        @click="item.doctype || item.name ? frappe.ui.notifications.show_open_count_list(item.doctype || item.name) : false"
+                        :data-doctype="item.doctype || item.name"></span>
+                </p>
+            </div>
+        </div>
+
+        <div v-else class="sections-container">
+            <div v-for="n in 3" :key="n" class="skeleton-section-box"></div>
         </div>
     </div>
 </template>
@@ -29,7 +35,7 @@ export default {
 <style lang="less" scoped>
 .sections-container {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
     column-gap: 15px;
     row-gap: 15px;
 }
@@ -43,6 +49,12 @@ export default {
     }
 }
 
+.skeleton-section-box {
+    background-color: #f5f7fa;
+    height: 250px;
+    border-radius: 4px;
+}
+
 .h4 {
     margin-bottom: 15px;
 }

frappe/public/js/frappe/views/components/Modules.vue

@@ -67,6 +67,7 @@ export default {
             if(cache) {
                 this.current_module_sections = cache;
             } else {
+                this.current_module_sections = [];
                 return frappe.call({
                     method: "frappe.desk.moduleview.get",
                     args: {
@@ -140,56 +141,7 @@ export default {
 
 <style lang="less" scoped>
 .modules-page-container {
-    margin: 70px 85px;
-}
-
-.module-category {    
-    margin-top: 30px;
-    margin-bottom: 15px;
-    border-bottom: 1px solid #d0d8dd;
-}
-
-.modules-container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    column-gap: 15px;
-    row-gap: 15px;
-}
-
-.module-box {
-    border-radius: 4px;
-    cursor: pointer;
-    padding: 5px 0px;
-    display: block;
-}
-
-.module-box:hover {
-    background-color: #fafbfc;
-}
-
-.module-box-content {
-    padding-right: 15px;
-    flex: 1;
-
-    h4 {
-        margin-bottom: 5px
-    }
-
-    p {
-        margin-top: 5px;
-        font-size: 80%;
-    }
-}
-
-.icon-box {
-    padding: 15px;
-    width: 54px;
-    display: flex;
-    justify-content: center;
-}
-
-.icon {
-    font-size: 24px;
+    margin: 15px 0px;
 }
 
 </style>

frappe/public/js/frappe/views/pageview.js

@@ -46,8 +46,8 @@ frappe.views.pageview = {
 				let page = frappe.container.add_page('desktop');
 				frappe.container.change_to('desktop');
 
-				let container = $('<div></div>').appendTo(page);
-				container = $('<div class="layout-main-section"></div>').appendTo(container);
+				let container = $('<div class="container"></div>').appendTo(page);
+				container = $('<div></div>').appendTo(container);
 				
 				frappe.require('/assets/js/frappe-vue.min.js', () => {
 					Vue.prototype.__ = window.__;