Commit fc4f3f28 authored by Rob Colbert's avatar Rob Colbert

Merge branch 'styling/styling-updates' into 'develop'

Fixed column margins (again) debugged the bouncing effect on mobile / finished desktop edit and create groups forms.

See merge request gab/social/gab-social!21
parents 8346ff08 ce3cefa1
...@@ -95,7 +95,7 @@ class Create extends React.PureComponent { ...@@ -95,7 +95,7 @@ class Create extends React.PureComponent {
</div> </div>
<div> <div>
<label htmlFor='group_cover_image' className={classNames('group-form__file-label', { 'group-form__file-label--selected': coverImage !== null })}> <label htmlFor='group_cover_image' className={classNames('group-form__file-label', { 'group-form__file-label--selected': coverImage !== null })}>
<Icon id='camera' /> {intl.formatMessage(coverImage === null ? messages.coverImage : messages.coverImageChange)} {intl.formatMessage(coverImage === null ? messages.coverImage : messages.coverImageChange)}
</label> </label>
<input <input
type='file' type='file'
......
...@@ -128,7 +128,7 @@ class Edit extends React.PureComponent { ...@@ -128,7 +128,7 @@ class Edit extends React.PureComponent {
<div> <div>
<label htmlFor='group_cover_image' className={classNames('group-form__file-label', { 'group-form__file-label--selected': coverImage !== null })}> <label htmlFor='group_cover_image' className={classNames('group-form__file-label', { 'group-form__file-label--selected': coverImage !== null })}>
<Icon id='camera' /> {intl.formatMessage(coverImage === null ? messages.coverImage : messages.coverImageChange)} {intl.formatMessage(coverImage === null ? messages.coverImage : messages.coverImageChange)}
</label> </label>
<input <input
......
...@@ -1310,22 +1310,26 @@ a.account__display-name { ...@@ -1310,22 +1310,26 @@ a.account__display-name {
} }
&__inner { &__inner {
width: 285px; width: 265px;
pointer-events: auto; pointer-events: auto;
height: 100%; height: 100%;
} }
} }
&__main { &__main {
display: flex;
flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 600px; max-width: 600px;
display: flex; padding: 0 20px;
flex-direction: column; @media screen and (max-width: 375px) {
@media screen and (min-width: 360px) {
padding: 0 10px; padding: 0 10px;
} }
@media screen and (min-width: 895px) {
margin: 0 20px;
padding: 0;
}
} }
} }
} }
......
.group-form { .group-form {
padding: 20px; padding: 20px;
@include gab-container-standards(); @include gab-container-standards();
&,
div {
box-sizing: border-box;
float: left;
width: 100%;
}
input[type=text], input[type=text],
textarea { textarea {
&.standard { &.standard {
...@@ -8,18 +14,31 @@ ...@@ -8,18 +14,31 @@
margin: 0 0 10px; margin: 0 0 10px;
} }
} }
textarea {height: 88px;} textarea {
float: left;
height: 88px;
}
.group-form__file-label { .group-form__file-label {
font-size: 13px;
color: $secondary-text-color;
cursor: pointer; cursor: pointer;
&:hover {color: $primary-text-color;} display: block;
.fa { box-sizing: border-box;
font-size: 18px; float: left;
margin-right: 5px; height: 20px;
transform: translatey(2px); padding: 3px 0 0 33px;
@include font-size(12);
@include font-weight(light);
color: $gab-secondary-text;
background-repeat: no-repeat;
background-image: url('../images/sprite-post-functions.png');
background-size: 100px 1200px;
&:hover {
color: $gab-brand-default;
background-position: 0 -100px;
}
&.group-form__file-label--selected {
background-position: 0 -100px;
color: $gab-brand-default;;
} }
&.group-form__file-label--selected {color: $primary-text-color;}
} }
.group-form__file { .group-form__file {
width: 1px; width: 1px;
......
.user-panel { .user-panel {
display: flex; display: flex;
width: 285px; width: 265px;
flex-direction: column; flex-direction: column;
overflow-y: hidden; overflow-y: hidden;
@include gab-container-standards(); @include gab-container-standards();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment