Skip to content

Commit

Permalink
Merge pull request #11529 from nanaya/form-cleanup
Browse files Browse the repository at this point in the history 
Form styling cleanup
  • Loading branch information
@notbakaneko
notbakaneko authored Oct 7, 2024
2 parents 702d218 + 49f5b83 commit 08a982c
Show file tree
Hide file tree
Showing 5 changed files with 78 additions and 139 deletions.
80 changes: 1 addition & 79 deletions resources/css/bem/artist-track-search-form.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@
// See the LICENCE file in the repository root for full licence text.

.artist-track-search-form {
--input-bg: hsl(var(--hsl-b5));
--input-border-radius: @border-radius--large;
background: hsl(var(--hsl-b4));
background-color: hsl(var(--hsl-b4));

&__advanced {
display: grid;
Expand All @@ -16,16 +14,6 @@
}
}

&__big-input {
.reset-input();
background: var(--input-bg);
border-radius: var(--input-border-radius);
height: 50px;
width: 100%;
font-size: @font-size--title-small-4;
padding: 10px;
}

&__content {
--vertical-gutter: 20px;
.default-gutter-v2();
Expand All @@ -40,70 +28,4 @@
gap: 5px;
}
}

&__genre-link {
.link-plain();
font-size: @font-size--normal;
font-weight: bold;
background: hsl(var(--hsl-b3));
color: hsl(var(--hsl-c1));
padding: 2px 15px 3px; // slightly more on the bottom to compensate font vertical alignment
border-radius: 10000px;
transition: none;
text-align: center;
white-space: nowrap;

&:focus,
&:active {
color: hsl(var(--hsl-c1));
}

&:hover {
background: hsl(var(--hsl-l1));
color: hsl(var(--hsl-b6));
}

&--active {
background: hsl(var(--hsl-b1));
}
}

&__genres {
display: grid;
gap: 5px;
grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
}

&__input-group {
--label-colour: hsl(var(--hsl-c2));
background: var(--input-bg);
border-radius: var(--input-border-radius);
text-transform: initial;
padding: 5px 10px 10px;
font-weight: initial;
margin: 0;

&--2 {
grid-column-end: span 2;
}

&--4 {
grid-column-end: span 2;

@media @desktop {
grid-column-end: span 4;
}
}

&--genre {
--label-colour: hsl(var(--hsl-c1));
background: none;
}
}

&__label {
color: var(--label-colour);
font-size: @font-size--normal;
padding-bottom: 5px;
}
}
54 changes: 32 additions & 22 deletions resources/css/bem/input-container.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,37 @@

.input-container {
--label-colour: hsl(var(--hsl-c2));
--input-bg: hsl(var(--hsl-b5));
--label-padding-base: 5px;
--input-bg: hsl(var(--hsl-b6));
--input-border-colour: var(--input-border-base-colour);
--input-border-base-colour: transparent;
--input-border-hover-colour: hsl(var(--hsl-l3));
--input-border-focus-colour: hsl(var(--hsl-l1));
--input-border-error-colour: hsl(var(--hsl-red-2));
--input-padding: var(--label-padding-base) var(--input-padding-base)
var(--input-padding-base);
--input-padding-base: 10px;

display: flex;
flex-direction: column;
background: var(--input-bg);
border-radius: 5px;
background-color: var(--input-bg);
border-radius: @border-radius-large;
text-transform: initial;
font-weight: initial;
font-size: inherit;
box-shadow: inset 0 0 0 2px var(--input-border-colour);

margin: 0;
padding: 5px 10px 10px;
width: 100%;

&:focus-within {
--input-border-colour: var(--input-border-focus-colour);
}

&:hover {
--input-border-colour: var(--input-border-hover-colour);
}

&--2 {
grid-column-end: span 2;
}
Expand All @@ -29,16 +46,8 @@
}
}

&--chat {
--input-bg: hsl(var(--hsl-b6));

border: 2px solid transparent;
padding: 5px;
font-size: var(--input-size);
}

&--error {
border-color: hsl(var(--hsl-red-2)) !important;
--input-border-colour: var(--input-border-error-colour);
}

&--fill {
Expand All @@ -50,26 +59,27 @@

&--genre {
--label-colour: hsl(var(--hsl-c1));
background: none;
--input-bg: transparent;
--input-border-hover-colour: transparent;
--input-border-focus-colour: transparent;
--input-border-error-colour: transparent;
}

&--judging {
--input-bg: hsl(var(--hsl-b3));

border: 2px solid transparent;
padding: 5px;
margin: 20px 0;
}

&:focus-within {
border-color: hsl(var(--hsl-l1));
}
&--search-box {
font-size: @font-size--title-small-4;
--input-padding: 15px var(--input-padding-base);
}

&__label {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
margin: 0;
color: var(--label-colour);
font-size: @font-size--normal;
padding: var(--label-padding-base) var(--input-padding-base) 0;
}
}
1 change: 1 addition & 0 deletions resources/css/bem/input-text.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@
background: transparent;
resize: none;
width: 100%;
padding: var(--input-padding);
}
54 changes: 30 additions & 24 deletions resources/js/artist-tracks-index/search-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,13 +97,15 @@ export default class SearchForm extends React.Component<Props> {
<form className='artist-track-search-form' onSubmit={this.handleSubmit}>
<input className='u-invisible' type='submit' />
<div className='artist-track-search-form__content'>
<input
className='artist-track-search-form__big-input'
name='query'
onChange={this.handleChangeString}
placeholder={trans('beatmaps.listing.search.prompt')}
value={this.params.query ?? ''}
/>
<div className='input-container input-container--search-box'>
<input
className='input-text'
name='query'
onChange={this.handleChangeString}
placeholder={trans('beatmaps.listing.search.prompt')}
value={this.params.query ?? ''}
/>
</div>

<h3 className='title title--artist-track-search-advanced'>
{trans('artist.tracks.index.form.advanced')}
Expand Down Expand Up @@ -174,27 +176,31 @@ export default class SearchForm extends React.Component<Props> {
</InputContainer>

<InputContainer labelKey='artist.tracks.index.form.genre' modifiers={['4', 'genre']}>
<div className='artist-track-search-form-switches'>
{this.renderGenreLink(trans('artist.tracks.index.form.genre_all'), null)}
{this.props.availableGenres.map((genre) => this.renderGenreLink(genre, genre))}
<div className='input-text'>
<div className='artist-track-search-form-switches'>
{this.renderGenreLink(trans('artist.tracks.index.form.genre_all'), null)}
{this.props.availableGenres.map((genre) => this.renderGenreLink(genre, genre))}
</div>
</div>
</InputContainer>

<InputContainer labelKey='artist.tracks.index.form.exclusive_only' modifiers={['4', 'genre']}>
<div className='artist-track-search-form-switches'>
{([['all', false], ['exclusive_only', true]] as const).map(([label, value]) => (
<a
key={label}
className={classWithModifiers('artist-track-search-form-switches__link', {
active: this.params.exclusive_only === value,
})}
data-value={value}
href={makeLink({ ...this.params, exclusive_only: value })}
onClick={this.handleExclusiveOnlyLinkClick}
>
{trans(`artist.tracks.index.exclusive_only.${label}`)}
</a>
))}
<div className='input-text'>
<div className='artist-track-search-form-switches'>
{([['all', false], ['exclusive_only', true]] as const).map(([label, value]) => (
<a
key={label}
className={classWithModifiers('artist-track-search-form-switches__link', {
active: this.params.exclusive_only === value,
})}
data-value={value}
href={makeLink({ ...this.params, exclusive_only: value })}
onClick={this.handleExclusiveOnlyLinkClick}
>
{trans(`artist.tracks.index.exclusive_only.${label}`)}
</a>
))}
</div>
</div>
</InputContainer>
</div>
Expand Down
28 changes: 14 additions & 14 deletions resources/js/chat/create-announcement.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,6 @@ export default class CreateAnnouncement extends React.Component<Props> {
</InputContainer>
<InputContainer
labelKey='chat.form.labels.description'
modifiers='chat'
{...this.model.inputContainerPropsFor('description')}
>
<input
Expand All @@ -77,25 +76,26 @@ export default class CreateAnnouncement extends React.Component<Props> {
<InputContainer
for='chat-form-users'
labelKey='chat.form.labels.users'
modifiers='chat'
{...this.model.inputContainerPropsFor('users')}
>
<div className='chat-form-users'>
<UserCardBrick user={core.currentUserOrFail} />
<UsernameInput
id='chat-form-users'
ignoreCurrentUser
name='users'
onBlur={this.handleBlur}
onValidUsersChanged={this.handleValidUsersChanged}
onValueChanged={this.handleUsernameInputValueChanged}
{...this.usernameInputInitialProps}
/>
<div className='input-text'>
<div className='chat-form-users'>
<UserCardBrick user={core.currentUserOrFail} />
<UsernameInput
id='chat-form-users'
ignoreCurrentUser
name='users'
onBlur={this.handleBlur}
onValidUsersChanged={this.handleValidUsersChanged}
onValueChanged={this.handleUsernameInputValueChanged}
{...this.usernameInputInitialProps}
/>
</div>
</div>
</InputContainer>
<InputContainer
labelKey='chat.form.labels.message'
modifiers={['chat', 'fill']}
modifiers='fill'
{...this.model.inputContainerPropsFor('message')}
>
<textarea
Expand Down

0 comments on commit 08a982c

Please sign in to comment.