monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Further reduce CSS and markup differences with upstream (#2637) 

* Reduce differences in `MovedNote` markup and styling

* Remove unused setting toggle meta text support

* Fix various CSS discrepancies with upstream

* Further reduce differences with upstream
This commit is contained in:
Claire 2024-02-20 23:06:17 +01:00 committed by GitHub
parent 4ad7fadb82
commit bf6e57b420
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 50 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx
View File

@ -1,54 +1,38 @@
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { withRouter } from 'react-router-dom';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import TripIcon from '@/material-icons/400-24px/trip.svg?react';
import { Icon } from 'flavours/glitch/components/icon';
import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
import { AvatarOverlay } from '../../../components/avatar_overlay'; import { AvatarOverlay } from '../../../components/avatar_overlay';
import { DisplayName } from '../../../components/display_name'; import { DisplayName } from '../../../components/display_name';
import { Permalink } from '../../../components/permalink';
class MovedNote extends ImmutablePureComponent { export default class MovedNote extends ImmutablePureComponent {
static propTypes = { static propTypes = {
from: ImmutablePropTypes.map.isRequired, from: ImmutablePropTypes.map.isRequired,
to: ImmutablePropTypes.map.isRequired, to: ImmutablePropTypes.map.isRequired,
...WithRouterPropTypes,
};
handleAccountClick = e => {
if (e.button === 0) {
e.preventDefault();
this.props.history.push(`/@${this.props.to.get('acct')}`);
}
e.stopPropagation();
}; };
render () { render () {
const { from, to } = this.props; const { from, to } = this.props;
const displayNameHtml = { __html: from.get('display_name_html') };
return ( return (
<div className='account__moved-note'> <div className='moved-account-banner'>
<div className='account__moved-note__message'> <div className='moved-account-banner__message'>
<div className='account__moved-note__icon-wrapper'><Icon id='suitcase' className='account__moved-note__icon' icon={TripIcon} /></div> <FormattedMessage id='account.moved_to' defaultMessage='{name} has indicated that their new account is now:' values={{ name: <bdi><strong dangerouslySetInnerHTML={{ __html: from.get('display_name_html') }} /></bdi> }} />
<FormattedMessage id='account.moved_to' defaultMessage='{name} has indicated that their new account is now:' values={{ name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi> }} />
</div> </div>
<a href={to.get('url')} onClick={this.handleAccountClick} className='detailed-status__display-name'> <div className='moved-account-banner__action'>
<div className='detailed-status__display-avatar'><AvatarOverlay account={to} friend={from} /></div> <Permalink to={`/@${to.get('acct')}`} href={to.get('url')} className='detailed-status__display-name'>
<DisplayName account={to} /> <div className='detailed-status__display-avatar'><AvatarOverlay account={to} friend={from} /></div>
</a> <DisplayName account={to} />
</Permalink>
<Permalink to={`/@${to.get('acct')}`} href={to.get('url')} className='button'><FormattedMessage id='account.go_to_profile' defaultMessage='Go to profile' /></Permalink>
</div>
</div> </div>
); );
} }
} }
export default withRouter(MovedNote);

4
app/javascript/flavours/glitch/features/notifications/components/setting_toggle.jsx
View File

@ -12,7 +12,6 @@ export default class SettingToggle extends PureComponent {
settings: ImmutablePropTypes.map.isRequired, settings: ImmutablePropTypes.map.isRequired,
settingPath: PropTypes.array.isRequired, settingPath: PropTypes.array.isRequired,
label: PropTypes.node.isRequired, label: PropTypes.node.isRequired,
meta: PropTypes.node,
onChange: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired,
defaultValue: PropTypes.bool, defaultValue: PropTypes.bool,
disabled: PropTypes.bool, disabled: PropTypes.bool,
@ -23,14 +22,13 @@ export default class SettingToggle extends PureComponent {
}; };
render () { render () {
const { prefix, settings, settingPath, label, meta, defaultValue, disabled } = this.props; const { prefix, settings, settingPath, label, defaultValue, disabled } = this.props;
const id = ['setting-toggle', prefix, ...settingPath].filter(Boolean).join('-'); const id = ['setting-toggle', prefix, ...settingPath].filter(Boolean).join('-');
return ( return (
<div className='setting-toggle'> <div className='setting-toggle'>
<Toggle disabled={disabled} id={id} checked={settings.getIn(settingPath, defaultValue)} onChange={this.onChange} onKeyDown={this.onKeyDown} /> <Toggle disabled={disabled} id={id} checked={settings.getIn(settingPath, defaultValue)} onChange={this.onChange} onKeyDown={this.onKeyDown} />
<label htmlFor={id} className='setting-toggle__label'>{label}</label> <label htmlFor={id} className='setting-toggle__label'>{label}</label>
{meta && <span className='setting-meta__label'>{meta}</span>}
</div> </div>
); );
} }

168
app/javascript/flavours/glitch/styles/components.scss
View File

@ -374,7 +374,7 @@ body > [data-popper-placement] {
} }
.compose-form { .compose-form {
padding: 10px; padding: 10px; // glitch: reduced padding
&__sensitive-button { &__sensitive-button {
padding: 10px; padding: 10px;
@ -1032,7 +1032,7 @@ body > [data-popper-placement] {
} }
.status { .status {
padding: 10px 14px; padding: 10px 14px; // glitch: reduced padding
min-height: 54px; min-height: 54px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
cursor: auto; cursor: auto;
@ -1050,9 +1050,11 @@ body > [data-popper-placement] {
opacity: 1; opacity: 1;
animation: fade 150ms linear; animation: fade 150ms linear;
.media-gallery,
.video-player, .video-player,
.audio-player { .audio-player,
margin-top: 8px; .attachment-list {
margin-top: 8px; // glitch: reduced margins
} }
&.status-direct { &.status-direct {
@ -1085,7 +1087,7 @@ body > [data-popper-placement] {
color: $highlight-text-color; color: $highlight-text-color;
} }
a.status__content__spoiler-link { &__spoiler-link {
color: $primary-text-color; color: $primary-text-color;
background: $ui-primary-color; background: $ui-primary-color;
@ -1251,7 +1253,6 @@ body > [data-popper-placement] {
.status__display-name { .status__display-name {
color: $dark-text-color; color: $dark-text-color;
overflow: hidden;
} }
.status__info .status__display-name { .status__info .status__display-name {
@ -1359,7 +1360,7 @@ body > [data-popper-placement] {
} }
.status__prepend { .status__prepend {
padding: 8px 14px; // intentionally reduced padding in glitch-soc padding: 8px 14px; // glitch: reduced padding
padding-bottom: 0; padding-bottom: 0;
display: inline-flex; display: inline-flex;
gap: 10px; gap: 10px;
@ -1400,7 +1401,7 @@ body > [data-popper-placement] {
.detailed-status { .detailed-status {
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);
padding: 14px 10px; padding: 14px 10px; // glitch: reduced padding
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid lighten($ui-base-color, 8%);
&--flex { &--flex {
@ -1456,7 +1457,7 @@ body > [data-popper-placement] {
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 8px 0; padding: 8px 0; // glitch: reduced padding
} }
.compose-form__textarea-icons { .compose-form__textarea-icons {
@ -1527,7 +1528,7 @@ body > [data-popper-placement] {
} }
.account { .account {
padding: 10px; padding: 10px; // glitch: reduced padding
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
.account__display-name { .account__display-name {
@ -1790,7 +1791,7 @@ a.account__display-name {
} }
.notification__report { .notification__report {
padding: 10px; // deliberate glitch-soc change padding: 10px; // glitch: reduced padding
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
display: flex; display: flex;
gap: 10px; gap: 10px;
@ -1827,12 +1828,12 @@ a.account__display-name {
} }
.notification__message { .notification__message {
padding: 8px 14px 0; // padding intentionally reduced for glitch-soc padding: 8px 14px; // glitch: reduced padding
padding-bottom: 0;
cursor: default; cursor: default;
color: $darker-text-color; color: $darker-text-color;
font-size: 15px; font-size: 15px;
line-height: 22px;
// line-height: 22px; omitted in glitch-soc for space saving
font-weight: 500; font-weight: 500;
display: flex; display: flex;
align-items: center; align-items: center;
@ -1885,7 +1886,6 @@ a.account__display-name {
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: $primary-text-color;
text-decoration: underline; text-decoration: underline;
} }
} }
@ -1975,7 +1975,7 @@ a.account__display-name {
} }
.navigation-bar { .navigation-bar {
padding: 10px; padding: 10px; // glitch: reduced padding
display: flex; display: flex;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
@ -2012,6 +2012,7 @@ a.account__display-name {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1 1 auto; flex: 1 1 auto;
line-height: 20px;
} }
.navigation-bar__profile-account { .navigation-bar__profile-account {
@ -2056,14 +2057,14 @@ a.account__display-name {
.dropdown-menu__separator { .dropdown-menu__separator {
border-bottom: 1px solid var(--dropdown-border-color); border-bottom: 1px solid var(--dropdown-border-color);
margin: 2px 0; margin: 2px 0; // glitch: reduced margins
height: 0; height: 0;
} }
.dropdown-menu { .dropdown-menu {
background: var(--dropdown-background-color); background: var(--dropdown-background-color);
border: 1px solid var(--dropdown-border-color); border: 1px solid var(--dropdown-border-color);
padding: 2px; padding: 2px; // glitch: reduced padding
border-radius: 4px; border-radius: 4px;
box-shadow: var(--dropdown-shadow); box-shadow: var(--dropdown-shadow);
z-index: 9999; z-index: 9999;
@ -2093,8 +2094,8 @@ a.account__display-name {
&__container { &__container {
&__header { &__header {
border-bottom: 1px solid var(--dropdown-border-color); border-bottom: 1px solid var(--dropdown-border-color);
padding: 6px 14px; padding: 6px 14px; // glitch: reduced padding
padding-bottom: 12px; padding-bottom: 12px; // glitch: reduced padding
margin-bottom: 4px; margin-bottom: 4px;
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
@ -2150,7 +2151,7 @@ a.account__display-name {
font: inherit; font: inherit;
display: block; display: block;
width: 100%; width: 100%;
padding: 6px 14px; padding: 6px 14px; // glitch: reduced padding
border: 0; border: 0;
margin: 0; margin: 0;
background: transparent; background: transparent;
@ -2931,6 +2932,8 @@ $ui-header-height: 55px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 310px; min-height: 310px;
padding-bottom: 71px;
margin-bottom: -71px;
} }
.compose-form__autosuggest-wrapper { .compose-form__autosuggest-wrapper {
@ -3645,7 +3648,7 @@ a.status-card {
.status-card__content { .status-card__content {
flex: 1 1 auto; flex: 1 1 auto;
overflow: hidden; overflow: hidden;
padding: 8px 10px; // intentional glitch-soc change to reduce padding padding: 8px 10px; // glitch: reduced padding
box-sizing: border-box; box-sizing: border-box;
max-width: 100%; max-width: 100%;
} }
@ -3684,7 +3687,7 @@ a.status-card {
.status-card__image { .status-card__image {
flex: 0 0 auto; flex: 0 0 auto;
width: 96px; // intentional glitch-soc change to better use space width: 96px; // glitch: intentional change to better use space
aspect-ratio: 1; aspect-ratio: 1;
background: lighten($ui-base-color, 8%); background: lighten($ui-base-color, 8%);
position: relative; position: relative;
@ -4392,12 +4395,12 @@ a.status-card {
z-index: 100; z-index: 100;
&--minified { &--minified {
display: flex; display: flex; // glitch: media icon in spoiler button
inset-inline-start: 4px; inset-inline-start: 4px;
top: 4px; top: 4px;
width: auto; width: auto;
height: auto; height: auto;
align-items: center; align-items: center; // glitch: media icon in spoiler button
} }
&--click-thru { &--click-thru {
@ -4616,8 +4619,7 @@ a.status-card {
line-height: 24px; line-height: 24px;
} }
.setting-toggle__label, .setting-toggle__label {
.setting-meta__label {
color: $darker-text-color; color: $darker-text-color;
display: inline-block; display: inline-block;
margin-bottom: 14px; margin-bottom: 14px;
@ -4625,10 +4627,6 @@ a.status-card {
vertical-align: middle; vertical-align: middle;
} }
.setting-meta__label {
float: right;
}
.limited-account-hint { .limited-account-hint {
p { p {
color: $secondary-text-color; color: $secondary-text-color;
@ -5162,43 +5160,6 @@ a.status-card {
} }
} }
.account__moved-note {
padding: 14px 10px;
padding-bottom: 16px;
background: lighten($ui-base-color, 4%);
border-top: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
&__message {
position: relative;
margin-inline-start: 58px;
color: $dark-text-color;
padding: 8px 0;
padding-top: 0;
padding-bottom: 4px;
font-size: 14px;
> span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
}
&__icon-wrapper {
inset-inline-start: -26px;
position: absolute;
}
.detailed-status__display-avatar {
position: relative;
}
.detailed-status__display-name {
margin-bottom: 0;
}
}
@keyframes spring-flip-in { @keyframes spring-flip-in {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
@ -5340,16 +5301,6 @@ a.status-card {
} }
} }
.notification-favourite {
.status.status-direct {
background: transparent;
.icon-button.disabled {
color: lighten($action-button-color, 13%);
}
}
}
.language-dropdown { .language-dropdown {
&__dropdown { &__dropdown {
background: $simple-background-color; background: $simple-background-color;
@ -6666,6 +6617,7 @@ a.status-card {
z-index: 9999; z-index: 9999;
} }
// glitch: deprecated settings modal
img.modal-warning { img.modal-warning {
display: block; display: block;
margin: auto; margin: auto;
@ -6673,65 +6625,19 @@ img.modal-warning {
width: 60px; width: 60px;
} }
.column { // glitch: optional wide mode
overflow: hidden; .wide .columns-area:not(.columns-area--mobile) {
.column {
.wide .columns-area:not(.columns-area--mobile) & {
flex: auto; flex: auto;
min-width: 330px; min-width: 330px;
max-width: 400px; max-width: 400px;
} }
> .scrollable { .drawer {
background: $ui-base-color;
border-radius: 0 0 4px 4px;
}
}
.drawer {
padding: 10px 5px;
flex: none;
&:first-child {
padding-inline-start: 10px;
}
&:last-child {
padding-inline-end: 10px;
}
@media screen and (width <= 630px) {
flex: auto;
}
@media screen and (width <= 630px) {
&,
&:first-child,
&:last-child {
padding: 0;
}
}
.wide & {
min-width: 300px; min-width: 300px;
max-width: 400px; max-width: 400px;
flex: 1 1 200px; flex: 1 1 200px;
} }
@media screen and (width <= 630px) {
:root & {
// Overrides `.wide` for single-column view
flex: auto;
width: 100%;
min-width: 0;
max-width: none;
padding: 0;
}
}
.react-swipeable-view-container & {
height: 100%;
}
} }
.media-gallery__item__badges { .media-gallery__item__badges {
@ -6769,7 +6675,7 @@ img.modal-warning {
font-size: 14px; font-size: 14px;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid lighten($ui-base-color, 8%);
border-radius: 4px; border-radius: 4px;
margin-top: 14px; // glitch-soc change to reduce margins margin-top: 14px; // glitch: reduced margins
overflow: hidden; overflow: hidden;
&__icon { &__icon {
@ -6811,7 +6717,7 @@ img.modal-warning {
&.compact { &.compact {
border: 0; border: 0;
margin-top: 4px; // glitch-soc addition to reduce margins margin-top: 4px; // glitch: reduced margins
.attachment-list__list { .attachment-list__list {
padding: 0; padding: 0;
@ -6908,8 +6814,6 @@ img.modal-warning {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: 100%; width: 100%;
display: flex;
justify-content: center;
} }
.media-gallery__item-gifv-thumbnail { .media-gallery__item-gifv-thumbnail {