dynamic width for search categories

This commit is contained in:
yazninja 2022-07-25 17:57:17 +08:00
parent 09186f41cc
commit 9066094381
2 changed files with 15 additions and 6 deletions

View file

@ -302,16 +302,23 @@
min-width: 120px;
}
}
.categories{
display: grid;
grid-template-columns: repeat(3, minmax(200px, 1fr));
gap: 1rem;
}
.cd-mediaitem-square.mediaitem-brick {
width: 530px !important;
width: 100% !important;
height: 168px;
padding-block: 0.5rem;
.artwork-container .artwork {
height: 168px !important;
width: 507px !important;
width: 100% !important;
z-index: 1;
}
.info-rect{
height: max-content;
}
.title {
font-weight: bold;
justify-content: left;

View file

@ -119,7 +119,7 @@
</div>
</template>
</div>
<div v-else>
<div v-else >
<div v-if="categoriesReady || getCategories()">
<div>
<div class="col" v-if="categoriesView != null && categoriesView != [] && categoriesView[0].attributes != null && categoriesView[0].attributes.title != null">
@ -131,6 +131,8 @@
<!-- <mediaitem-square :kind="'385'" size="600" v-for="item in recentlyPlayed.limit(10)" :item="item" :imagesize="800"></mediaitem-square>-->
<h3>{{categoriesView[0].attributes.title.stringForDisplay ?? ""}}</h3>
</div>
</div>
<div class="categories">
<mediaitem-square :kind="'385'" size="600"
:item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []"
:imagesize="800"