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

Merge branch 'styling/patch-colors-for-groups-updates' into 'groups-updates'

Browse Source 
Updates for the Groups styling

See merge request gab/social/gab-social!14
This commit is contained in:
Rob Colbert 2019-07-22 02:55:26 +00:00
commit 6b43c2ee76
10 changed files with 64 additions and 52 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

@ -82,7 +82,6 @@ class Create extends React.PureComponent {
placeholder={intl.formatMessage(messages.title)}
/>
</div>
<div>
<input
className='group-form__input'
@ -92,12 +91,10 @@ class Create extends React.PureComponent {
placeholder={intl.formatMessage(messages.description)}
/>
</div>
<div>
<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)}
</label>
<input
type='file'
className='group-form__file'
@ -105,8 +102,7 @@ class Create extends React.PureComponent {
disabled={disabled}
onChange={this.handleCoverImageChange}
/>
<button>{intl.formatMessage(messages.create)}</button>
<button className='standard-small'>{intl.formatMessage(messages.create)}</button>
</div>
</form>
);

2
app/javascript/gabsocial/features/groups/index/index.js
View File

@ -50,7 +50,7 @@ class Groups extends ImmutablePureComponent {
return (
<div className="group-column-header">
<div className="group-column-header__cta"><Link to="/groups/create">{intl.formatMessage(messages.create)}</Link></div>
<div className="group-column-header__cta"><Link to="/groups/create" className="button standard-small">{intl.formatMessage(messages.create)}</Link></div>
<div className="group-column-header__title">{intl.formatMessage(messages.heading)}</div>
<div className="column-header__wrapper">

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

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

20
app/javascript/styles/gabsocial/_mixins.scss
View File

@ -1,3 +1,23 @@
// NEW GAB SPECIFIC MIXINS
// THEME MIXINS
// standard container drop shadow
@mixin light-theme-shadow() {box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);}
// common properties for all standard containers
@mixin gab-container-standards() {
border-radius: 10px;
background: $gab-background-container;
body.theme-gabsocial-light & {
@include light-theme-shadow();
background: $gab-background-container-light;
}
}
// OLDER MIXINS
@mixin avatar-radius() {
border-radius: 50%;
background: transparent no-repeat;

13
app/javascript/styles/gabsocial/components.scss
View File

@ -1303,7 +1303,7 @@ a.account__display-name {
flex: 1 1 auto;
flex-direction: row;
justify-content: flex-start;
overflow-x: auto;
//overflow-x: auto;
position: relative;
&__panels {
@ -1321,14 +1321,14 @@ a.account__display-name {
pointer-events: none;
display: flex;
justify-content: flex-end;
padding-top: 10px;
padding-top: 15px;
&--start {
justify-content: flex-start;
}
&__inner {
width: 285px;
width: 265px;
pointer-events: auto;
height: 100%;
}
@ -1342,7 +1342,8 @@ a.account__display-name {
flex-direction: column;
@media screen and (min-width: 360px) {
padding: 0 10px;
margin: 0 20px;
padding: 0;
}
}
}
@ -1476,7 +1477,7 @@ a.account__display-name {
flex-direction: column;
width: 100%;
margin: 0 auto;
overflow: hidden;
//overflow: hidden;
.column,
.drawer {
@ -1501,7 +1502,7 @@ a.account__display-name {
}
@media screen and (min-width: 360px) {
padding: 10px 0;
padding: 15px 0;
}
@media screen and (min-width: 630px) {

23
app/javascript/styles/gabsocial/components/buttons.scss Normal file
View File

@ -0,0 +1,23 @@
button,
a.button {
&.standard {
// NOTE - will define the larger standard buttons here and apply class where used.
&-small {
height: 20px;
padding: 5px 15px;
border: none;
border-radius: 4px;
@include font-size(11);
@include line-height(11);
@include font-weight(bold);
text-transform: uppercase;
color: white;
background: $gab-small-cta-primary;
}
}
}

21
app/javascript/styles/gabsocial/components/group-card.scss
View File

@ -1,47 +1,38 @@
$height: 80px;
.group-column-header {
border-radius: 10px;
background: $gab-background-container;
overflow: hidden;
@include gab-container-standards();
.group-column-header__title {
padding: 15px;
font-size: 20px;
font-weight: bold;
}
.group-column-header__cta {
float: right;
padding: 15px;
font-size: 17px;
a {
color: $primary-text-color;
}
a {color: #fff;}
}
}
.group-card-list {
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin-top: 15px;
margin-top: 20px;
}
.group-card {
display: block;
flex: 0 0 calc(50% - 15px/2);
flex: 0 0 calc(50% - 20px/2);
@include gab-container-standards();
margin-bottom: 15px;
background: $gab-background-container;
text-decoration: none;
border-radius: 10px;
overflow: hidden;
.group-card__header {
height: $height;
overflow: hidden;
img {

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

@ -49,18 +49,5 @@
position: absolute;
pointer-events: none;
}
button {
background: $gab-blue;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
border: none;
border-radius: 4px;
height: 25px;
padding: 1px 12px;
font-weight: bold;
float: right;
}
button {float: right;}
}

10
app/javascript/styles/gabsocial/components/user-panel.scss
View File

@ -1,15 +1,9 @@
.user-panel {
display: flex;
width: 285px;
width: 265px;
flex-direction: column;
overflow-y: hidden;
border-radius: 10px;
background: $gab-background-container;
body.theme-gabsocial-light & {
@include light-theme-shadow();
background: $gab-background-container-light;
}
@include gab-container-standards();
&__header {
display: block;
height: 112px;

5
app/javascript/styles/gabsocial/variables.scss
View File

@ -12,7 +12,7 @@ $gab-brand-default: #21cf7a;
$gab-alert-red: #cc6643;
$gab-secondary-text: #999;
$gab-text-highlight: $gab-brand-default;
$gab-blue: #627ff2;
$gab-small-cta-primary: #607CF5;
// THEME COLORS
@ -29,8 +29,7 @@ $gab-background-container-light: #fff;
$gab-default-text-light: #6c6c6c;
// theme mixins
@mixin light-theme-shadow() {box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);}
// BREAKPOINT SETS