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

Merge branch 'groups-updates' of https://code.gab.com/gab/social/gab-social into develop

Browse Source
This commit is contained in:
Rob Colbert
2019-07-21 23:08:31 -04:00
parent daee22dcbb 6b43c2ee76
commit 46bec5710f
75 changed files with 2201 additions and 417 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,12 +18,17 @@
@import 'gabsocial/components';
// COMPONENTS
@import 'gabsocial/components/buttons';
@import 'gabsocial/components/tabs-bar';
@import 'gabsocial/components/dropdown-menu';
@import 'gabsocial/components/modal';
@import 'gabsocial/components/account-header';
@import 'gabsocial/components/user-panel';
@import 'gabsocial/components/compose-form';
@import 'gabsocial/components/group-card';
@import 'gabsocial/components/group-detail';
@import 'gabsocial/components/group-form';
@import 'gabsocial/components/group-sidebar-panel';
@import 'gabsocial/polls';
@import 'gabsocial/introduction';

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;

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

72
app/javascript/styles/gabsocial/components/group-card.scss Normal file
View File

@@ -0,0 +1,72 @@
.group-column-header {
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: #fff;}
}
}
.group-card-list {
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin-top: 20px;
}
.group-card {
display: block;
flex: 0 0 calc(50% - 20px/2);
@include gab-container-standards();
margin-bottom: 15px;
text-decoration: none;
overflow: hidden;
.group-card__header {
overflow: hidden;
img {
pointer-events: none;
width: 100%;
background: $gab-background-container;;
}
}
.group-card__content {
padding: 15px;
.group-card__title {
color: $primary-text-color;
font-size: 16px;
font-weight: bold;
}
.group-card__meta {
color: $gab-secondary-text;
font-size: 14px;
margin-top: 5px;
margin-bottom: 10px;
}
.group-card__description {
color: $primary-text-color;
font-size: 14px;
}
}
&:hover {
.group-card__title {
text-decoration: underline;
}
}
}

84
app/javascript/styles/gabsocial/components/group-detail.scss Normal file
View File

@@ -0,0 +1,84 @@
.group {
.group__header-container {
width: 100%;
display: flex;
justify-content: center;
flex-direction: row;
}
.group__header {
width: 100%;
max-width: 1150px;
background: $gab-background-container;
border-radius: 10px;
overflow: hidden;
margin: 20px 0;
.group__cover {
img {
width: 100%;
}
}
.group__tabs {
.group__tabs__tab {
display: inline-block;
text-decoration: none;
padding: 16px 22px;
text-align: center;
color: $primary-text-color;
&:hover,
&--active {
border-bottom: 2px solid $primary-text-color;
}
}
&:after {
content: "";
clear: both;
display: table;
}
button {
float: right;
margin: 7px;
}
div {
float: right;
margin: 4px;
}
}
}
.group__panel {
padding: 10px 10px 20px 10px;
h1 {
font-size: 22px;
font-weight: bold;
margin-bottom: 10px;
}
.group__panel__description {
font-size: 14px;
}
.group__panel__label {
display: inline-block;
margin-bottom: 10px;
border-radius: 4px;
background: $gab-background-container;
font-size: 13px;
padding: 4px 8px;
}
}
.group__feed {
background: $gab-background-container;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
overflow: hidden;
}
}

53
app/javascript/styles/gabsocial/components/group-form.scss Normal file
View File

@@ -0,0 +1,53 @@
.group-form {
background: $gab-background-container;
padding: 15px;
border-radius: 10px;
.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;}
}

33
app/javascript/styles/gabsocial/components/group-sidebar-panel.scss Normal file
View File

@@ -0,0 +1,33 @@
.group-sidebar-panel {
&__items {
padding: 0 15px 15px;
&__show-all {
color: $primary-text-color;
}
}
&__item {
display: block;
color: $primary-text-color;
text-decoration: none;
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
&__title {
font-weight: bold;
}
&__meta {
font-size: 0.8em;
color: $gab-secondary-text;
&__unread {
color: $gab-brand-default;
}
}
}
}

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;

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

@@ -12,6 +12,7 @@ $gab-brand-default: #21cf7a;
$gab-alert-red: #cc6643;
$gab-secondary-text: #999;
$gab-text-highlight: $gab-brand-default;
$gab-small-cta-primary: #607CF5;
// THEME COLORS
@@ -28,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