Playlist style fixes (#6509)
* Fix spacing on List page * Fix alignment on List sidebar
This commit is contained in:
parent
e59c67a144
commit
9cdfb239c0
5 changed files with 17 additions and 3 deletions
|
@ -34,10 +34,10 @@ export default function CollectionContent(props: Props) {
|
||||||
</span>
|
</span>
|
||||||
}
|
}
|
||||||
titleActions={
|
titleActions={
|
||||||
<>
|
<div className="card__title-actions--link">
|
||||||
{/* TODO: BUTTON TO SAVE COLLECTION - Probably save/copy modal */}
|
{/* TODO: BUTTON TO SAVE COLLECTION - Probably save/copy modal */}
|
||||||
<Button label={'View List'} button="link" navigate={`/$/${PAGES.LIST}/${id}`} />
|
<Button label={'View List'} button="link" navigate={`/$/${PAGES.LIST}/${id}`} />
|
||||||
</>
|
</div>
|
||||||
}
|
}
|
||||||
body={
|
body={
|
||||||
<ClaimList
|
<ClaimList
|
||||||
|
|
|
@ -103,7 +103,7 @@ export default function CollectionPage(props: Props) {
|
||||||
|
|
||||||
const subTitle = (
|
const subTitle = (
|
||||||
<div>
|
<div>
|
||||||
{uri ? <span>{collectionCount} items</span> : <span>{collectionCount} items</span>}
|
<span className="collection__subtitle">{collectionCount} items</span>
|
||||||
{uri && <ClaimAuthor uri={uri} />}
|
{uri && <ClaimAuthor uri={uri} />}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -226,6 +226,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card__title-actions--link {
|
||||||
|
margin-top: var(--spacing-xs);
|
||||||
|
margin-right: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
.card__title-actions--small {
|
.card__title-actions--small {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -242,6 +242,10 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
.claim-preview__actions {
|
||||||
|
margin-left: var(--spacing-m);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: $breakpoint-xsmall) {
|
@media (max-width: $breakpoint-xsmall) {
|
||||||
|
|
|
@ -4,6 +4,11 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.collection__subtitle {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: var(--spacing-s);
|
||||||
|
}
|
||||||
|
|
||||||
.collection-preview__items {
|
.collection-preview__items {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
Loading…
Reference in a new issue