treehouse
/
mastodon
20
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Change styling and layout of account notes UI

lolsob-rspec
Thibaut Girka 2020-07-07 17:47:33 +02:00 committed by ThibG
parent 3c8a8a0b45
commit 52eaecaef7
2 changed files with 30 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/javascript/flavours/glitch/features/account/components/account_note.js
View File

@ -63,6 +63,14 @@ class Header extends ImmutablePureComponent {
</button> </button>
</div> </div>
); );
} else {
action_buttons = (
<div className='account__header__account-note__buttons'>
<button className='text-btn' tabIndex='0' onClick={this.props.onEditAccountNote} disabled={isSubmitting}>
<Icon id='pencil' size={15} /> <FormattedMessage id='account_note.edit' defaultMessage='Edit' />
</button>
</div>
);
} }
let note_container = null; let note_container = null;
@ -85,17 +93,10 @@ class Header extends ImmutablePureComponent {
return ( return (
<div className='account__header__account-note'> <div className='account__header__account-note'>
<div className='account__header__account-note__header'> <div className='account__header__account-note__header'>
<strong><FormattedMessage id='account.account_note_header' defaultMessage='Your note for @{name}' values={{ name: account.get('username') }} /></strong> <strong><FormattedMessage id='account.account_note_header' defaultMessage='Note' /></strong>
{!isEditing && ( {action_buttons}
<div>
<button className='text-btn' tabIndex='0' onClick={this.props.onEditAccountNote} disabled={isSubmitting}>
<Icon id='pencil' size={15} /> <FormattedMessage id='account_note.edit' defaultMessage='Edit' />
</button>
</div>
)}
</div> </div>
{note_container} {note_container}
{action_buttons}
</div> </div>
); );
} }

32
app/javascript/flavours/glitch/styles/components/accounts.scss
View File

@ -714,42 +714,44 @@
} }
&__account-note { &__account-note {
margin: 5px; margin: 0 -5px;
padding: 10px; padding: 10px 15px;
background: $ui-highlight-color;
color: $primary-text-color;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 4px;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
border-top: 1px solid lighten($ui-base-color, 12%);
border-bottom: 1px solid lighten($ui-base-color, 12%);
&__header { &__header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
margin-bottom: 5px;
color: $darker-text-color;
} }
&__content { &__content {
white-space: pre-wrap; white-space: pre-wrap;
margin-top: 5px; padding: 10px 0;
} }
&__buttons { &__buttons {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
margin-top: 5px; flex: 1 0;
.flex-spacer { .flex-spacer {
flex: 0 0 20px; flex: 0 0 15px;
background: transparent; background: transparent;
} }
} }
strong { strong {
font-size: 15px; font-size: 12px;
font-weight: 500; font-weight: 500;
text-transform: uppercase;
} }
button:hover span { button:hover span {
@ -759,18 +761,24 @@
textarea { textarea {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: calc(100% + 20px);
margin: 0; margin: 0;
margin-top: 5px; margin-top: 5px;
color: $inverted-text-color; color: $secondary-text-color;
background: $simple-background-color; background: $ui-base-color;
padding: 10px; padding: 10px;
margin: 0 -10px;
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
resize: none; resize: none;
border: 0; border: 0;
outline: 0; outline: 0;
border-radius: 4px; border-radius: 4px;
&::placeholder {
color: $dark-text-color;
opacity: 1;
}
} }
} }
} }