Playlist style fixes (#6509)

* Fix spacing on List page

* Fix alignment on List sidebar
This commit is contained in:
saltrafael 2021-07-16 16:13:28 -03:00 committed by GitHub
parent e59c67a144
commit 9cdfb239c0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 17 additions and 3 deletions

View file

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

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;