schuetz3/schuetz3-erpnext
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[hub][vue] add skeleton state to DetailView

Browse Source
This commit is contained in:
Prateeksha Singh
2018-08-26 18:06:25 +05:30
parent 9e8d7bbeda
commit 5c9b13f5e5
6 changed files with 123 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
erpnext/public/js/hub/components/DetailView.vue
View File

@@ -5,32 +5,53 @@
<button class="btn btn-xs btn-default" data-route="marketplace/home">{{ back_to_home_text }}</button>
</div>
</div>
<div class="row margin-bottom">
<div v-if="show_skeleton" class="row margin-bottom">
<div class="col-md-3">
<div class="hub-item-image">
<img :src="image">
</div>
<div class="hub-item-skeleton-image"></div>
</div>
<div class="col-md-6">
<h2>{{ title }}</h2>
<h2 class="hub-skeleton" style="width: 75%;">Name</h2>
<div class="text-muted">
<p v-for="subtitle in subtitles"
:key="subtitle"
v-html="subtitle"
>
</p>
<p class="hub-skeleton" style="width: 35%;">Details</p>
<p class="hub-skeleton" style="width: 50%;">Ratings</p>
</div>
<hr>
<div class="hub-item-description">
<p class="hub-skeleton">Desc</p>
<p class="hub-skeleton" style="width: 85%;">Desc</p>
</div>
</div>
</div>
<div v-for="section in sections" class="row hub-item-description margin-bottom"
:key="section.title"
>
<h6 class="col-md-12 margin-top">
<b class="text-muted">{{ section.title }}</b>
</h6>
<p class="col-md-12" v-html="section.content">
</p>
<div v-else>
<div class="row margin-bottom">
<div class="col-md-3">
<div class="hub-item-image">
<img :src="image">
</div>
</div>
<div class="col-md-6">
<h2>{{ title }}</h2>
<div class="text-muted">
<p v-for="subtitle in subtitles"
:key="subtitle"
v-html="subtitle"
>
</p>
</div>
</div>
</div>
<div v-for="section in sections" class="row hub-item-description margin-bottom"
:key="section.title"
>
<h6 class="col-md-12 margin-top">
<b class="text-muted">{{ section.title }}</b>
</h6>
<p class="col-md-12" v-html="section.content">
</p>
</div>
</div>
</div>
@@ -40,7 +61,7 @@
export default {
name: 'detail-view',
props: ['title', 'subtitles', 'image', 'sections'],
props: ['title', 'subtitles', 'image', 'sections', 'show_skeleton'],
data() {
return {
back_to_home_text: __('Back to Home')