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

View file

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