bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add 10px gap between statuses

Browse source
This commit is contained in:
Alex Gleason 2021-09-12 19:33:00 -05:00
parent 9b723794b5
commit a3f162a2ea
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
9 changed files with 52 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/soapbox/pages/home_page.js
View file

@ -62,8 +62,8 @@ class HomePage extends ImmutablePureComponent {
</div> </div>
</div> </div>
<div className='columns-area__panels__main'> <div className='columns-area__panels__main columns-area__panels__main--transparent'>
<div className='columns-area columns-area--mobile'> <div className='columns-area columns-area--mobile columns-area--transparent'>
{me && <div className='timeline-compose-block' ref={this.composeBlock}> {me && <div className='timeline-compose-block' ref={this.composeBlock}>
<Link className='timeline-compose-block__avatar' to={`/@${acct}`}> <Link className='timeline-compose-block__avatar' to={`/@${acct}`}>
<Avatar account={account} size={46} /> <Avatar account={account} size={46} />

4
app/soapbox/pages/status_page.js
View file

@ -38,8 +38,8 @@ class StatusPage extends ImmutablePureComponent {
</div> </div>
</div> </div>
<div className='columns-area__panels__main'> <div className='columns-area__panels__main columns-area__panels__main--transparent'>
<div className='columns-area columns-area--mobile'> <div className='columns-area columns-area--mobile columns-area--transparent'>
{children} {children}
</div> </div>
</div> </div>

27
app/styles/components/columns.scss
View file

@ -333,6 +333,32 @@
@include standard-panel; @include standard-panel;
} }
.columns-area--transparent .column {
background: transparent;
border-radius: 0;
box-shadow: none;
margin-top: -10px;
.column-back-button {
background: transparent;
margin-bottom: -10px;
}
.slist {
margin-top: -10px;
}
.account__section-headline {
background: transparent;
border: 0;
}
.empty-column-indicator,
.error-column {
background: transparent;
}
}
.column-header__wrapper { .column-header__wrapper {
position: relative; position: relative;
flex: 0 0 auto; flex: 0 0 auto;
@ -411,6 +437,7 @@
border-radius: 10px; border-radius: 10px;
transition: 0.2s; transition: 0.2s;
opacity: 0; opacity: 0;
z-index: -1;
} }
@media screen and (max-width: $nav-breakpoint-2) { @media screen and (max-width: $nav-breakpoint-2) {

6
app/styles/components/detailed-status.scss
View file

@ -7,7 +7,6 @@
} }
.detailed-status { .detailed-status {
background: hsla(var(--brand-color_hsl), 0.03);
padding: 14px 10px; padding: 14px 10px;
&--flex { &--flex {
@ -64,7 +63,6 @@
} }
.detailed-status__action-bar { .detailed-status__action-bar {
background: hsla(var(--brand-color_hsl), 0.03);
border-top: 1px solid var(--brand-color--faint); border-top: 1px solid var(--brand-color--faint);
border-bottom: 1px solid var(--brand-color--faint); border-bottom: 1px solid var(--brand-color--faint);
display: flex; display: flex;
@ -91,7 +89,6 @@
.icon_button__text { .icon_button__text {
font-size: 14px; font-size: 14px;
padding-left: 3px; padding-left: 3px;
transform: translateY(-1px);
} }
} }
@ -113,7 +110,10 @@
} }
.detailed-status__wrapper { .detailed-status__wrapper {
@include standard-panel;
margin: 10px 0;
position: relative; position: relative;
overflow: hidden;
} }
.detailed-status__application, .detailed-status__application,

1
app/styles/components/drawer.scss
View file

@ -20,7 +20,6 @@
.column, .column,
.drawer { .drawer {
flex: 1 1 100%; flex: 1 1 100%;
overflow: hidden;
} }
.drawer__pager { .drawer__pager {

4
app/styles/components/notification.scss
View file

@ -51,3 +51,7 @@
.notification__relative_time { .notification__relative_time {
float: right; float: right;
} }
.notification .status__wrapper {
box-shadow: none;
}

3
app/styles/components/promo-panel.scss
View file

@ -6,7 +6,8 @@
.promo-panel-item { .promo-panel-item {
@include standard-panel-shadow; @include standard-panel-shadow;
display: block; display: flex;
align-items: center;
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
color: var(--primary-text-color); color: var(--primary-text-color);

15
app/styles/components/status.scss
View file

@ -126,6 +126,11 @@
vertical-align: middle; vertical-align: middle;
} }
.status__wrapper {
@include standard-panel;
margin: 10px 0;
}
.status__wrapper--filtered { .status__wrapper--filtered {
color: var(--primary-text-color); color: var(--primary-text-color);
border: 0; border: 0;
@ -150,7 +155,6 @@
padding-left: 68px; padding-left: 68px;
position: relative; position: relative;
min-height: 54px; min-height: 54px;
border-bottom: 1px solid var(--brand-color--faint);
cursor: default; cursor: default;
@supports (-ms-overflow-style: -ms-autohiding-scrollbar) { @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
@ -472,20 +476,13 @@
.focusable { .focusable {
&:focus { &:focus {
outline: 0; outline: 0;
background: var(--brand-color--faint); box-shadow: 0 0 6px 0 hsla(var(--brand-color_hsl), 0.7);
.status.status-direct { .status.status-direct {
background: var(--brand-color--med);
&.muted { &.muted {
background: transparent; background: transparent;
} }
} }
.detailed-status,
.detailed-status__action-bar {
background: var(--brand-color--med);
}
} }
} }

6
app/styles/ui.scss
View file

@ -363,6 +363,7 @@
width: 61px; width: 61px;
height: 61px; height: 61px;
background-color: var(--brand-color); background-color: var(--brand-color);
color: white;
border: 0; border: 0;
border-radius: 999px; border-radius: 999px;
box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5); box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5);
@ -388,6 +389,11 @@
color: #fff; color: #fff;
margin: 0; margin: 0;
} }
.svg-icon {
width: 26px;
height: 26px;
}
} }
@media screen and (min-width: 360px) { @media screen and (min-width: 360px) {