mobile styling hot fixes
This commit is contained in:
parent
462f1542e7
commit
b44182e751
|
@ -13,7 +13,6 @@ function ListBlocked(props: Props) {
|
||||||
return (
|
return (
|
||||||
<Page>
|
<Page>
|
||||||
{uris && uris.length ? (
|
{uris && uris.length ? (
|
||||||
<div className="card">
|
|
||||||
<ClaimList
|
<ClaimList
|
||||||
header={<h1>{__('Your Blocked Channels')}</h1>}
|
header={<h1>{__('Your Blocked Channels')}</h1>}
|
||||||
persistedStorageKey="block-list-published"
|
persistedStorageKey="block-list-published"
|
||||||
|
@ -21,7 +20,6 @@ function ListBlocked(props: Props) {
|
||||||
defaultSort
|
defaultSort
|
||||||
showHiddenByUser
|
showHiddenByUser
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
) : (
|
) : (
|
||||||
<div className="main--empty">
|
<div className="main--empty">
|
||||||
<section className="card card--section">
|
<section className="card card--section">
|
||||||
|
|
|
@ -24,10 +24,16 @@ $metadata-z-index: 1;
|
||||||
|
|
||||||
.channel-cover,
|
.channel-cover,
|
||||||
.channel-cover__custom {
|
.channel-cover__custom {
|
||||||
height: var(--cover-photo-height);
|
min-height: var(--cover-photo-height);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-top-left-radius: var(--card-radius);
|
border-top-left-radius: var(--card-radius);
|
||||||
border-top-right-radius: var(--card-radius);
|
border-top-right-radius: var(--card-radius);
|
||||||
|
|
||||||
|
@media (max-width: $breakpoint-small) {
|
||||||
|
// Yikes
|
||||||
|
// I, Sean Yesmunt, take full responsibility for this monster
|
||||||
|
min-height: calc(var(--cover-photo-height) + 2 * var(--spacing-xlarge) + var(--spacing-medium));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.channel-thumbnail {
|
.channel-thumbnail {
|
||||||
|
@ -106,6 +112,7 @@ $metadata-z-index: 1;
|
||||||
|
|
||||||
@media (max-width: $breakpoint-small) {
|
@media (max-width: $breakpoint-small) {
|
||||||
padding-left: var(--spacing-medium);
|
padding-left: var(--spacing-medium);
|
||||||
|
padding-top: calc(2 * var(--spacing-xlarge));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -122,6 +129,10 @@ $metadata-z-index: 1;
|
||||||
.button {
|
.button {
|
||||||
margin-left: var(--spacing-medium);
|
margin-left: var(--spacing-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: $breakpoint-small) {
|
||||||
|
padding-top: var(--spacing-xlarge);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.channel__meta {
|
.channel__meta {
|
||||||
|
@ -135,9 +146,11 @@ $metadata-z-index: 1;
|
||||||
|
|
||||||
.channel__quick-actions {
|
.channel__quick-actions {
|
||||||
@extend .card__actions;
|
@extend .card__actions;
|
||||||
|
margin-left: var(--spacing-medium);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: var(--spacing-medium);
|
right: var(--spacing-medium);
|
||||||
margin-top: var(--spacing-medium);
|
margin-top: var(--spacing-medium);
|
||||||
z-index: $metadata-z-index;
|
z-index: $metadata-z-index;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,7 +18,7 @@ html {
|
||||||
|
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
background-color: var(--color-background);
|
background-color: var(--color-background);
|
||||||
font-size: 16px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
Loading…
Reference in a new issue