vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

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

Browse source
This commit is contained in:
Prateeksha Singh 2019-01-29 09:31:22 +05:30
parent aeebf1edf2
commit 2c55c65928
4 changed files with 33 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frappe/public/js/frappe/views/components/Desktop.vue
View file

@ -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;
}

42
frappe/public/js/frappe/views/components/ModuleDetail.vue
View file

@ -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;
}

52
frappe/public/js/frappe/views/components/Modules.vue
View file

@ -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>

4
frappe/public/js/frappe/views/pageview.js
View file

@ -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.__;