Playlist style fixes #6509

Merged
saltrafael merged 2 commits from playlist_fixes into master 2021-07-16 21:13:29 +02:00
5 changed files with 17 additions and 3 deletions

View file

@ -35,10 +35,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={<ClaimList isCardBody type="small" uris={collectionUrls} collectionId={id} empty={__('List is Empty')} />} body={<ClaimList isCardBody type="small" uris={collectionUrls} collectionId={id} empty={__('List is Empty')} />}
/> />

View file

@ -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>
); );

View file

@ -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;
} }

View file

@ -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) {

View file

@ -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;