random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjustments to the create group form to match mockup specs.

Browse Source 
Strip out css for form input from component css file.
Created global form input css.
Padding adjustments.
This commit is contained in:
Dank Gabs 2019-07-22 22:35:46 -04:00
parent 97ad49c617
commit 47a18f6024
5 changed files with 67 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/gabsocial/features/groups/create/index.js
View File

@ -75,7 +75,8 @@ class Create extends React.PureComponent {
<form className='group-form' onSubmit={this.handleSubmit}>
<div>
<input
className='group-form__input'
className='standard'
type='text'
value={title}
disabled={disabled}
onChange={this.handleTitleChange}
@ -84,7 +85,8 @@ class Create extends React.PureComponent {
</div>
<div>
<input
className='group-form__input'
className='standard'
type='text'
value={description}
disabled={disabled}
onChange={this.handleDescriptionChange}

6
app/javascript/gabsocial/features/groups/edit/index.js
View File

@ -106,7 +106,8 @@ class Edit extends React.PureComponent {
<form className='group-form' onSubmit={this.handleSubmit}>
<div>
<input
className='group-form__input'
className='standard'
type='text'
value={title}
disabled={disabled}
onChange={this.handleTitleChange}
@ -116,7 +117,8 @@ class Edit extends React.PureComponent {
<div>
<input
className='group-form__input'
className='standard'
type='text'
value={description}
disabled={disabled}
onChange={this.handleDescriptionChange}

1
app/javascript/styles/application.scss
View File

@ -19,6 +19,7 @@
// COMPONENTS
@import 'gabsocial/components/buttons';
@import 'gabsocial/components/inputs';
@import 'gabsocial/components/tabs-bar';
@import 'gabsocial/components/dropdown-menu';
@import 'gabsocial/components/modal';

74
app/javascript/styles/gabsocial/components/group-form.scss
View File

@ -1,51 +1,25 @@
.group-form {
padding: 15px;
@include gab-container-standards();
.group-form__input {
height: 40px;
padding: 0 15px;
display: block;
color: $primary-text-color;
background: none;
border: 1px solid $secondary-text-color;
border-radius: 4px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
&:focus {
outline: none;
border-color: $primary-text-color;
}
}
.group-form__file-label {
font-size: 13px;
color: $secondary-text-color;
cursor: pointer;
&:hover {
color: $primary-text-color;
}
.fa {
font-size: 18px;
margin-right: 5px;
transform: translatey(2px);
}
&.group-form__file-label--selected {
color: $primary-text-color;
}
}
.group-form__file {
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
position: absolute;
pointer-events: none;
}
button {float: right;}
}
padding: 20px;
@include gab-container-standards();
.group-form__file-label {
font-size: 13px;
color: $secondary-text-color;
cursor: pointer;
&:hover {color: $primary-text-color;}
.fa {
font-size: 18px;
margin-right: 5px;
transform: translatey(2px);
}
&.group-form__file-label--selected {color: $primary-text-color;}
}
.group-form__file {
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
position: absolute;
pointer-events: none;
}
button {float: right;}
}

34
app/javascript/styles/gabsocial/components/inputs.scss Normal file
View File

@ -0,0 +1,34 @@
input {
&.standard {
&[type='text'] {
border: 1px solid;
corner-radius: 4px;
@include font-size(16);
border-color: $gab-placeholder-accent;
background: $gab-background-container;
body.theme-gabsocial-light & {
border-color: $gab-secondary-text;
background: $gab-background-base-light;
}
}
}
}
// .group-form__input {
// height: 40px;
// padding: 0 15px;
// display: block;
// color: $primary-text-color;
// background: none;
// border: 1px solid $secondary-text-color;
// border-radius: 4px;
// margin-bottom: 10px;
// width: 100%;
// box-sizing: border-box;
// &:focus {
// outline: none;
// border-color: $primary-text-color;
// }
// }