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
app/javascript
gabsocial/features/groups
create
index.js
edit
index.js
styles
application.scss
gabsocial/components
group-form.scssinputs.scss

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

@ -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

@ -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

@ -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';

72
app/javascript/styles/gabsocial/components/group-form.scss

@ -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

@ -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;
// }
// }