feat: make page more similar with the extensions page

This commit is contained in:
Vlad Stan 2023-01-20 15:08:48 +02:00
parent 223e92f9e2
commit cf4c9baeeb

View file

@ -46,7 +46,7 @@
style="font-size: 4rem" style="font-size: 4rem"
></q-icon> ></q-icon>
</div> </div>
<div class="col-9"> <div class="col-9 q-pl-sm">
<q-badge <q-badge
v-if="hasNewVersion(extension)" v-if="hasNewVersion(extension)"
color="green" color="green"
@ -54,24 +54,56 @@
> >
<small>New Version</small> <small>New Version</small>
</q-badge> </q-badge>
{% raw %}
<div class="text-h5 gt-sm q-mt-sm q-mb-xs">
{{ extension.name }}
</div>
<div
class="text-subtitle2 gt-sm"
style="font-size: 11px; height: 34px"
>
{{ extension.shortDescription }}
</div>
<div class="text-subtitle1 lt-md q-mt-sm q-mb-xs">
{{ extension.name }}
</div>
<div
class="text-subtitle2 lt-md"
style="font-size: 9px; height: 34px"
>
{{ extension.shortDescription }}
</div>
{% endraw %}
</div> </div>
</div> </div>
<div class="row q-pt-sm">
{% raw %} <div class="col">
<h5 class="q-mt-lg q-mb-xs">{{ extension.name}}</h5> <small v-if="extension.dependencies?.length">Depends on:</small>
<small>{{ extension.shortDescription }} </small> <small v-else>&nbsp;</small>
<div> <q-badge
<small v-if="extension.dependencies?.length">Depends on:</small> v-for="dep in extension.dependencies"
<small v-else>&nbsp;</small> :key="dep"
<q-badge color="orange"
v-for="dep in extension.dependencies" >
:key="dep" <small v-text="dep"></small>
color="orange" </q-badge>
> </div>
<small v-text="dep"></small> </div>
</q-badge> <div class="row q-pt-sm">
<div class="col">
<q-rating
max="5"
v-model="maxStars"
size="1.5em"
color="yellow"
icon="star_border"
icon-selected="star"
readonly
no-dimming
>
</q-rating>
</div>
</div> </div>
{% endraw %}
</q-card-section> </q-card-section>
<q-separator></q-separator> <q-separator></q-separator>
<q-card-actions> <q-card-actions>
@ -96,20 +128,7 @@
</div> </div>
<div class="col-2"> <div class="col-2">
<div class="float-right"> <div class="float-right"></div>
<small v-text="extension.stars"> </small>
<q-rating
max="1"
v-model="maxStars"
size="1.5em"
color="yellow"
icon="star"
icon-selected="star"
readonly
no-dimming
>
</q-rating>
</div>
</div> </div>
</q-card-actions> </q-card-actions>
</q-card> </q-card>