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

Progress

Browse Source
This commit is contained in:
mgabdev
2020-01-24 16:18:17 -05:00
parent 3af35f4840
commit a2b5d72e08
40 changed files with 539 additions and 873 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/gabsocial/components/bundle_column_error/bundle_column_error.js
View File

@@ -1,6 +1,6 @@
import { defineMessages, injectIntl } from 'react-intl';
import Column from '../column';
import ColumnHeader from '../column_header';
import { ColumnHeader } from '../column_header';
import IconButton from '../icon_button';
import './bundle_column_error.scss';

39
app/javascript/gabsocial/components/icon/icon.scss
View File

File diff suppressed because one or more lines are too long

2
app/javascript/gabsocial/containers/media_container.js
View File

@@ -7,7 +7,7 @@ import Video from '../features/video';
import Card from '../features/status/components/card';
import Poll from 'gabsocial/components/poll';
import ModalRoot from '../components/modal_root';
import MediaModal from '../components/modal';
import { MediaModal } from '../components/modal';
import { List as ImmutableList, fromJS } from 'immutable';
const { localeData, messages } = getLocale();

2
app/javascript/gabsocial/features/community_timeline/community_timeline.js
View File

@@ -2,7 +2,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import StatusListContainer from '../../containers/status_list_container';
import Column from '../../components/column';
import ColumnSettings from './components/column_settings';
import HomeColumnHeader from '../../components/column_header';
import { HomeColumnHeader } from '../../components/column_header';
import {
expandCommunityTimeline,
expandPublicTimeline,

2
app/javascript/gabsocial/features/compose/components/search_results/search_results.js
View File

@@ -5,7 +5,7 @@ import AccountContainer from '../../../../containers/account_container';
import StatusContainer from '../../../../containers/status_container';
import TrendingItem from '../../../../components/trending_item';
import Icon from '../../../../components/icon';
import WhoToFollowPanel from '../../../../components/panel';
import { WhoToFollowPanel } from '../../../../components/panel';
import './search_results.scss';

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

@@ -101,7 +101,7 @@ class Create extends PureComponent {
disabled={disabled}
onChange={this.handleCoverImageChange}
/>
<button className='standard-small'>{intl.formatMessage(messages.create)}</button>
<button className='button'>{intl.formatMessage(messages.create)}</button>
</div>
</form>
);

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

@@ -47,7 +47,7 @@ class Groups extends ImmutablePureComponent {
return (
<div className="group-column-header">
<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__cta"><Link to="/groups/create" className="button">{intl.formatMessage(messages.create)}</Link></div>
<div className="group-column-header__title">{intl.formatMessage(messages.heading)}</div>
<div className="column-header__wrapper">

2
app/javascript/gabsocial/features/hashtag_timeline/hashtag_timeline.js
View File

@@ -1,6 +1,6 @@
import StatusListContainer from '../../containers/status_list_container';
import Column from '../../components/column';
import ColumnHeader from '../../components/column_header';
import { ColumnHeader } from '../../components/column_header';
import { expandHashtagTimeline, clearTimeline } from '../../actions/timelines';
import { FormattedMessage } from 'react-intl';
import { connectHashtagStream } from '../../actions/streaming';

2
app/javascript/gabsocial/features/list_timeline/list_timeline.js
View File

@@ -10,7 +10,7 @@ import { fetchList, deleteList } from '../../actions/lists';
import { openModal } from '../../actions/modal';
import ColumnIndicator from '../../components/column_indicator';
import Icon from '../../components/icon';
import HomeColumnHeader from '../../components/column_header';
import { HomeColumnHeader } from '../../components/column_header';
import Button from '../../components/button';
import ColumnHeaderSettingButton from '../../components/column_header_setting_button';

2
app/javascript/gabsocial/features/notifications/notifications.js
View File

@@ -5,7 +5,7 @@ import { createSelector } from 'reselect';
import { List as ImmutableList } from 'immutable';
import { debounce } from 'lodash';
import Column from '../../components/column';
import ColumnHeader from '../../components/column_header';
import { ColumnHeader } from '../../components/column_header';
import {
expandNotifications,
scrollTopNotifications,

4
app/javascript/gabsocial/features/status/status.js
View File

@@ -32,12 +32,12 @@ import {
import { initMuteModal } from '../../actions/mutes';
import { initReport } from '../../actions/reports';
import { makeGetStatus } from '../../selectors';
import ColumnHeader from '../../components/column_header';
import { ColumnHeader } from '../../components/column_header';
import StatusContainer from '../../containers/status_container';
import { openModal } from '../../actions/modal';
import { boostModal, deleteModal, me } from '../../initial_state';
import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../../utils/fullscreen';
import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
import { textForScreenReader, defaultMediaVisibility } from '../../components/status/status';
import Icon from '../../components/icon';
import ColumnIndicator from '../../components/column_indicator';

3
app/javascript/gabsocial/features/ui/ui.js
View File

@@ -18,7 +18,7 @@ import { openModal } from '../../actions/modal';
import WrappedRoute from './util/wrapped_route';
import UploadArea from '../../components/upload_area';
import TabsBar from '../../components/tabs_bar';
import WhoToFollowPanel from '../../components/panel';
import { WhoToFollowPanel } from '../../components/panel';
import LinkFooter from '../../components/link_footer';
import ProfilePage from 'gabsocial/pages/profile_page';
import GroupPage from 'gabsocial/pages/group_page';
@@ -65,6 +65,7 @@ import '../../components/status';
import { fetchGroups } from '../../actions/groups';
import { Fragment } from 'react';
import '../../../styles/application.scss';
import './ui.scss';
const messages = defineMessages({

4
app/javascript/gabsocial/pages/group_page.js
View File

@@ -2,9 +2,9 @@ import { Fragment } from 'react';
import { PropTypes } from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import WhoToFollowPanel from '../components/panel';
import { WhoToFollowPanel } from '../components/panel';
import LinkFooter from '../components/link_footer';
import PromoPanel from '../components/panel';
import PromoPanel from '../components/promo_panel';
import HeaderContainer from '../features/groups/timeline/containers/header_container';
import GroupPanel from '../features/groups/timeline/components/panel';
import { fetchGroup } from '../actions/groups';

63
app/javascript/styles/_mixins.scss
View File

@@ -130,11 +130,11 @@
line-height: $lineHeight;
}
@if ($textAlign != '') {
@if ($textAlign !='') {
text-align: $textAlign;
}
@if ($letterSpacing != '') {
@if ($letterSpacing !='') {
letter-spacing: $letterSpacing;
}
}
@@ -184,11 +184,11 @@
overflow: hidden;
text-overflow: ellipsis;
@if ($whitespace != '') {
@if ($whitespace !='') {
white-space: $whitespace;
}
@if ($wordWrap != '') {
@if ($wordWrap !='') {
word-wrap: $wordWrap;
}
}
@@ -247,6 +247,7 @@
@include text-sizing(16px, 400, 19px);
@include border-design($gab-placeholder-accent, 1px, 4px);
@include input-placeholder {
color: $gab-placeholder-accent;
}
@@ -260,4 +261,58 @@
&:active {
outline: 0 !important;
}
}
// TYPEOGRAPHY MIXINS
// declare the font family using these shortcuts
@mixin font-roboto() {
font-family: 'Roboto', Arial, sans-serif !important;
}
@mixin font-montserrat() {
font-family: 'Montserrat', Arial, sans-serif !important;
}
// Declare font weights as a numerical value in rendered output
// Prevents certain browsers which do not play nice with "light, medium" textual declarations
// Numeical values always work more consistently across browsers
// Each font-weight is linked with the @font-face declaration to the actual font file
@mixin font-weight($weight) {
@if $weight=='light' {
font-weight: 300;
}
@if $weight=='normal' {
font-weight: 400;
}
@if $weight=='medium' {
font-weight: 500;
}
@if $weight=='bold' {
font-weight: 700;
}
@if $weight=='extrabold' {
font-weight: 800;
}
}
// Use these mixins to define font-size and line-height
// html and body declaration allows developer to pass px value as argument
// Rendered css will default to "rem" and fall back to "px" for unsupported browsers
@mixin font-size($size) {
$rem: ($size / 10);
$px: $size;
font-size: #{$px + "px"};
font-size: #{$rem + "rem"};
}
@mixin line-height($size) {
$rem: ($size / 10);
$px: $size;
line-height: #{$px + "px"};
line-height: #{$rem + "rem"};
}

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

@@ -1,67 +1,38 @@
@import './_variables';
@import './_colors';
@import './_themes';
@import './_font_families';
@import './_mixins';
@import './variables';
@import './colors';
@import './themes';
@import './font_families';
@import './mixins';
@import '_variables';
@import '_colors';
@import '_themes';
@import '_font_families';
@import '_mixins';
@import 'variables';
@import 'colors';
@import 'themes';
@import 'font_families';
@import 'mixins';
@import 'gabsocial/variables';
@import './gabsocial/variables';
// @import 'gabsocial/fonts';
// @import 'gabsocial/reset';
// @import 'gabsocial/scrollbars';
// @import 'gabsocial/basics';
// @import 'gabsocial/containers';
// @import 'gabsocial/lists';
// @import 'gabsocial/footer';
// @import 'gabsocial/compact_header';
// @import 'gabsocial/widgets';
// @import 'gabsocial/forms';
// @import 'gabsocial/accounts';
// @import 'gabsocial/stream_entries';
// @import 'gabsocial/boost';
@import 'gabsocial/fonts';
@import 'gabsocial/reset';
@import 'gabsocial/basics';
@import 'gabsocial/containers';
@import 'gabsocial/lists';
@import 'gabsocial/footer';
@import 'gabsocial/compact_header';
@import 'gabsocial/widgets';
@import 'gabsocial/forms';
@import 'gabsocial/accounts';
@import 'gabsocial/stream_entries';
// NOTE - In the process of stripping this giant file into individual components (below)
// @import 'gabsocial/components';
@import 'gabsocial/components';
// COMPONENTS
// @import 'gabsocial/components/buttons';
// @import 'gabsocial/components/inputs';
// @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/components/inputs';
@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';
// @import 'gabsocial/emoji_picker';
// @import 'gabsocial/about';
// @import 'gabsocial/tables';
// @import 'gabsocial/admin';
// @import 'gabsocial/dashboard';
// @import 'gabsocial/rtl';
// @import 'gabsocial/accessibility';
@import 'gabsocial/polls';
@import 'gabsocial/emoji_picker';
@import 'gabsocial/about';
@import 'gabsocial/tables';
@import 'gabsocial/admin';
@import 'gabsocial/dashboard';
@import 'gabsocial/rtl';
@import 'gabsocial/accessibility';

3
app/javascript/styles/contrast.scss
View File

@@ -1,3 +0,0 @@
// @import 'contrast/variables';
// @import 'application';
// @import 'contrast/diff';

3
app/javascript/styles/gabsocial-light.scss
View File

@@ -1,3 +0,0 @@
// @import 'gabsocial-light/variables';
// @import 'application';
// @import 'gabsocial-light/diff';

4
app/javascript/styles/gabsocial-light/diff.scss
View File

@@ -321,10 +321,6 @@
}
.box-widget,
.contact-widget,
.landing-page__information.contact-widget,
.moved-account-widget,
.memoriam-widget,
.activity-stream,
.nothing-here,
.directory__tag > a,

80
app/javascript/styles/gabsocial/about.scss
View File

@@ -632,66 +632,6 @@ $small-breakpoint: 960px;
border-radius: 0;
}
.hero-widget {
@include vertical-margin(30px, 0);
h4 {
padding: 10px;
text-transform: uppercase;
color: $darker-text-color;
@include text-sizing(13px, 700);
}
&__text {
border-radius: 0;
padding-bottom: 0;
}
&__footer {
background: $ui-base-color;
padding: 10px;
border-radius: 0 0 4px 4px;
display: flex;
&__column {
flex: 1 1 50%;
}
}
.account {
padding: 10px 0;
border-bottom: 0;
.account__display-name {
display: flex;
align-items: center;
}
.account__avatar {
background-size: 44px 44px;
@include size(44px);
}
}
&__counter {
padding: 10px;
strong {
font-family: $font-display, sans-serif;
display: block;
@include text-sizing(15px, 700);
}
span {
font-size: 14px;
color: $darker-text-color;
}
}
}
.simple_form .user_agreement .label_input > label {
font-weight: 400;
color: $darker-text-color;
@@ -724,13 +664,6 @@ $small-breakpoint: 960px;
order: 2;
flex: 0 0 auto;
}
.hero-widget {
order: 1;
flex: 0 0 auto;
@include vertical-margin(0, 10px);
}
}
&__column-registration {
@@ -745,19 +678,6 @@ $small-breakpoint: 960px;
@media screen and (max-width: $no-gap-breakpoint) {
grid-gap: 0;
.hero-widget {
display: block;
margin-bottom: 0;
box-shadow: none;
&__img,
&__img img,
&__footer {
border-radius: 0;
}
}
.hero-widget,
.box-widget,
.directory__tag {
border-bottom: 1px solid lighten($ui-base-color, 8%);

1
app/javascript/styles/gabsocial/basics.scss
View File

@@ -139,7 +139,6 @@ button {
}
.app-holder {
&,
&>div {
outline: 0 !important;

38
app/javascript/styles/gabsocial/boost.scss
View File

File diff suppressed because one or more lines are too long

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

@@ -3,101 +3,6 @@
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.button {
background-color: $ui-highlight-color;
border: 10px none;
border-radius: 4px;
box-sizing: border-box;
color: $primary-text-color;
cursor: pointer;
display: inline-block;
font-family: inherit;
padding: 0 16px;
position: relative;
text-decoration: none;
@include size(auto, 36px);
@include text-overflow(nowrap);
@include text-sizing(14px, 500, 36px, center, 0);
&:active,
&:focus,
&:hover {
background-color: lighten($ui-highlight-color, 10%);
}
&--destructive {
transition: none;
&:active,
&:focus,
&:hover {
background-color: $error-red;
transition: none;
}
}
&:disabled,
&.disabled {
background-color: $ui-primary-color;
cursor: default;
}
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important;
}
&.button-alternative {
color: $inverted-text-color;
background: $ui-primary-color;
&:active,
&:focus,
&:hover {
background-color: lighten($ui-primary-color, 4%);
}
}
&.button-alternative-2 {
background: $ui-base-lighter-color;
&:active,
&:focus,
&:hover {
background-color: lighten($ui-base-lighter-color, 4%);
}
}
&.button-secondary {
color: $darker-text-color;
background: transparent;
padding: 3px 15px;
border: 1px solid $ui-primary-color;
&:active,
&:focus,
&:hover {
border-color: lighten($ui-primary-color, 4%);
color: lighten($darker-text-color, 4%);
}
&:disabled {
opacity: 0.5;
}
}
&.button--block {
display: block;
width: 100%;
}
}
.invisible {
font-size: 0 !important;
line-height: 0 !important;

22
app/javascript/styles/gabsocial/components/buttons.scss
View File

@@ -1,22 +0,0 @@
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;
text-transform: uppercase;
color: white;
background: $gab-small-cta-primary;
@include text-sizing(11px, 700, 11px);
}
}
}

115
app/javascript/styles/gabsocial/fonts.scss
View File

@@ -1,87 +1,52 @@
// Roboto Regular
@font-face {
font-family: 'Roboto';
font-weight: 400;
font-style: normal;
src: url('../fonts/roboto/roboto-regular-400.eot?#iefix');
src: url('../fonts/roboto/roboto-regular-400.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-regular-400.woff2') format('woff2'),
url('../fonts/roboto/roboto-regular-400.woff') format('woff'),
url('../fonts/roboto/roboto-regular-400.ttf') format('truetype'),
url('../fonts/roboto/roboto-regular-400.svg') format('svg');
}
font-family: 'Roboto';
font-weight: 400;
font-style: normal;
src: url('../fonts/roboto/roboto-regular-400.eot?#iefix');
src: url('../fonts/roboto/roboto-regular-400.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-regular-400.woff2') format('woff2'),
url('../fonts/roboto/roboto-regular-400.woff') format('woff'),
url('../fonts/roboto/roboto-regular-400.ttf') format('truetype'),
url('../fonts/roboto/roboto-regular-400.svg') format('svg');
}
// Roboto Light
@font-face {
font-family: 'Roboto';
font-weight: 300;
font-style: normal;
src: url('../fonts/roboto/roboto-light-300.eot?#iefix');
src: url('../fonts/roboto/roboto-light-300.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-light-300.woff2') format('woff2'),
url('../fonts/roboto/roboto-light-300.woff') format('woff'),
url('../fonts/roboto/roboto-light-300.ttf') format('truetype'),
url('../fonts/roboto/roboto-light-300.svg') format('svg');
}
font-family: 'Roboto';
font-weight: 300;
font-style: normal;
src: url('../fonts/roboto/roboto-light-300.eot?#iefix');
src: url('../fonts/roboto/roboto-light-300.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-light-300.woff2') format('woff2'),
url('../fonts/roboto/roboto-light-300.woff') format('woff'),
url('../fonts/roboto/roboto-light-300.ttf') format('truetype'),
url('../fonts/roboto/roboto-light-300.svg') format('svg');
}
// Roboto Bold
@font-face {
font-family: 'Roboto';
font-weight: 700;
font-style: normal;
src: url('../fonts/roboto/roboto-bold-700.eot?#iefix');
src: url('../fonts/roboto/roboto-bold-700.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-bold-700.woff2') format('woff2'),
url('../fonts/roboto/roboto-bold-700.woff') format('woff'),
url('../fonts/roboto/roboto-bold-700.ttf') format('truetype'),
url('../fonts/roboto/roboto-bold-700.svg') format('svg');
}
font-family: 'Roboto';
font-weight: 700;
font-style: normal;
src: url('../fonts/roboto/roboto-bold-700.eot?#iefix');
src: url('../fonts/roboto/roboto-bold-700.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-bold-700.woff2') format('woff2'),
url('../fonts/roboto/roboto-bold-700.woff') format('woff'),
url('../fonts/roboto/roboto-bold-700.ttf') format('truetype'),
url('../fonts/roboto/roboto-bold-700.svg') format('svg');
}
// Montserrat Extra Bold
// Used for all bold number, scoreboard, count displays
@font-face {
font-family: 'Montserrat';
font-weight: 800;
font-style: normal;
src: url('../fonts/montserrat/montserrat-extra-bold-800.eot?#iefix');
src: url('../fonts/montserrat/montserrat-extra-bold-800.eot?#iefix') format('embedded-opentype'),
url('../fonts/montserrat/montserrat-extra-bold-800.woff2') format('woff2'),
url('../fonts/montserrat/montserrat-extra-bold-800.woff') format('woff'),
url('../fonts/montserrat/montserrat-extra-bold-800.ttf') format('truetype'),
url('../fonts/montserrat/montserrat-extra-bold-800.svg') format('svg');
}
// TYPEOGRAPHY MIXINS
// declare the font family using these shortcuts
@mixin font-roboto() {font-family: 'Roboto', Arial, sans-serif !important;}
@mixin font-montserrat() {font-family: 'Montserrat', Arial, sans-serif !important;}
// Declare font weights as a numerical value in rendered output
// Prevents certain browsers which do not play nice with "light, medium" textual declarations
// Numeical values always work more consistently across browsers
// Each font-weight is linked with the @font-face declaration to the actual font file
@mixin font-weight($weight) {
@if $weight == 'light' {font-weight: 300;}
@if $weight == 'normal' {font-weight: 400;}
@if $weight == 'medium' {font-weight: 500;}
@if $weight == 'bold' {font-weight: 700;}
@if $weight == 'extrabold' {font-weight: 800;}
}
// Use these mixins to define font-size and line-height
// html and body declaration allows developer to pass px value as argument
// Rendered css will default to "rem" and fall back to "px" for unsupported browsers
@mixin font-size($size) {
$rem: ($size / 10);
$px: $size;
font-size: #{$px + "px"};
font-size: #{$rem + "rem"};
}
@mixin line-height($size) {
$rem: ($size / 10);
$px: $size;
line-height: #{$px + "px"};
line-height: #{$rem + "rem"};
}
font-family: 'Montserrat';
font-weight: 800;
font-style: normal;
src: url('../fonts/montserrat/montserrat-extra-bold-800.eot?#iefix');
src: url('../fonts/montserrat/montserrat-extra-bold-800.eot?#iefix') format('embedded-opentype'),
url('../fonts/montserrat/montserrat-extra-bold-800.woff2') format('woff2'),
url('../fonts/montserrat/montserrat-extra-bold-800.woff') format('woff'),
url('../fonts/montserrat/montserrat-extra-bold-800.ttf') format('truetype'),
url('../fonts/montserrat/montserrat-extra-bold-800.svg') format('svg');
}

0
app/javascript/styles/gabsocial/introduction.scss
View File

35
app/javascript/styles/gabsocial/scrollbars.scss
View File

@@ -1,35 +0,0 @@
// A lot of this stuff is temporary for now.
// Content containers are meant to behave much differently than the mastodon default UI
// For now linking default gab colors to replace the base UI colors and formulas
html {scrollbar-color: lighten($gab-background-container, 4%) $gab-background-container;}
::-webkit-scrollbar {
@include size(12px);
}
::-webkit-scrollbar-thumb {
border: none;
background: rgba($gab-placeholder-accent, .5);
@at-root body.theme-gabsocial-light#{&} {background: rgba($gab-background-container-light, .3);}
}
::-webkit-scrollbar-thumb:hover {
background: rgba($gab-placeholder-accent, .75);
@at-root body.theme-gabsocial-light#{&} {background: rgba($gab-background-container-light, .4);}
}
::-webkit-scrollbar-thumb:active {
background: $gab-placeholder-accent;
@at-root body.theme-gabsocial-light#{&} {background: rgba($gab-background-container-light, .5);}
}
::-webkit-scrollbar-track {
border: none;
background: rgba($gab-background-container, .5);
@at-root body.theme-gabsocial-light#{&} {background: rgba($gab-background-base, .3);}
}
::-webkit-scrollbar-track:hover {
background: rgba($gab-background-container, .75);
@at-root body.theme-gabsocial-light#{&} {background: rgba($gab-background-base, .4);}
}
::-webkit-scrollbar-track:active {
background: $gab-background-container;
@at-root body.theme-gabsocial-light#{&} {background: rgba($gab-background-base, .5);}
}
::-webkit-scrollbar-corner {background: transparent;}

224
app/javascript/styles/gabsocial/widgets.scss
View File

@@ -1,105 +1,3 @@
.hero-widget {
margin-bottom: 10px;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
&__img {
width: 100%;
position: relative;
overflow: hidden;
border-radius: 4px 4px 0 0;
background: $base-shadow-color;
img {
object-fit: cover;
display: block;
margin: 0;
border-radius: 4px 4px 0 0;
@include size(100%);
}
}
&__text {
background: $ui-base-color;
padding: 20px;
border-radius: 0 0 4px 4px;
color: $darker-text-color;
word-wrap: break-word;
@include text-sizing(15px, 400, 20px);
.emojione {
margin: -3px 0 0;
@include size(20px);
}
p {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
em {
display: inline;
margin: 0;
padding: 0;
background: transparent;
font-family: inherit;
color: lighten($darker-text-color, 10%);
@include text-sizing(inherit, 700, inherit);
}
a {
color: $secondary-text-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
@media screen and (max-width: $no-gap-breakpoint) {
display: none;
}
}
.endorsements-widget {
margin-bottom: 10px;
padding-bottom: 10px;
h4 {
padding: 10px;
text-transform: uppercase;
color: $darker-text-color;
@include text-sizing(13px, 700);
}
.account {
padding: 10px 0;
&:last-child {
border-bottom: 0;
}
.account__display-name {
display: flex;
align-items: center;
}
.account__avatar {
background-size: 44px 44px;
@include size(44px);
}
}
}
.box-widget {
padding: 20px;
border-radius: 4px;
@@ -107,124 +5,6 @@
box-shadow: 0 0 1px 1px rgba($base-shadow-color, 0.2);
}
.contact-widget,
.landing-page__information.contact-widget {
box-sizing: border-box;
padding: 20px;
min-height: 100%;
border-radius: 4px;
background: $ui-base-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
}
.contact-widget {
color: $darker-text-color;
word-wrap: break-word;
@include text-sizing(15px, 400, 20px);
strong {
font-weight: 500;
}
p {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
&__mail {
margin-top: 10px;
a {
color: $primary-text-color;
text-decoration: none;
}
}
}
.moved-account-widget {
padding: 15px;
padding-bottom: 20px;
border-radius: 4px;
background: $ui-base-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
color: $secondary-text-color;
font-weight: 400;
margin-bottom: 10px;
strong,
a {
font-weight: 500;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
a {
color: inherit;
text-decoration: underline;
&.mention {
text-decoration: none;
span {
text-decoration: none;
}
&:focus,
&:hover,
&:active {
text-decoration: none;
span {
text-decoration: underline;
}
}
}
}
&__message {
margin-bottom: 15px;
.fa {
margin-right: 5px;
color: $darker-text-color;
}
}
&__card {
.detailed-status__display-avatar {
position: relative;
cursor: pointer;
}
.detailed-status__display-name {
margin-bottom: 0;
text-decoration: none;
span {
font-weight: 400;
}
}
}
}
.memoriam-widget {
padding: 20px;
border-radius: 4px;
background: $base-shadow-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
font-size: 14px;
color: $darker-text-color;
margin-bottom: 10px;
}
.page-header {
background: lighten($ui-base-color, 8%);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
@@ -421,11 +201,7 @@
}
}
.moved-account-widget,
.memoriam-widget,
.box-widget,
.contact-widget,
.landing-page__information.contact-widget,
.directory,
.page-header {
@media screen and (max-width: $no-gap-breakpoint) {

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

@@ -1,5 +1,6 @@
@import 'gabsocial/variables';
// : todo :
//Check this out later - replace with 'gabsocial/fonts'
//@import 'fonts/roboto';

18
app/views/accounts/_moved.html.haml
View File

@@ -1,18 +0,0 @@
- moved_to_account = account.moved_to_account
.moved-account-widget
.moved-account-widget__message
= fa_icon 'suitcase'
= t('accounts.moved_html', name: content_tag(:bdi, content_tag(:strong, display_name(account, custom_emojify: true), class: :emojify)), new_profile_link: link_to(content_tag(:strong, safe_join(['@', content_tag(:span, moved_to_account.acct)])), TagManager.instance.url_for(moved_to_account), class: 'mention'))
.moved-account-widget__card
= link_to TagManager.instance.url_for(moved_to_account), class: 'detailed-status__display-name p-author h-card', target: '_blank', rel: 'me noopener' do
.detailed-status__display-avatar
.account__avatar-overlay
.account__avatar-overlay-base{ style: "background-image: url('#{moved_to_account.avatar.url(:original)}')" }
.account__avatar-overlay-overlay{ style: "background-image: url('#{account.avatar.url(:original)}')" }
%span.display-name
%bdi
%strong.emojify= display_name(moved_to_account, custom_emojify: true)
%span @#{moved_to_account.acct}

14
app/views/accounts/show.html.haml
View File

@@ -51,20 +51,8 @@
.entry= link_to_more @older_url
.column-1
- if @account.memorial?
.memoriam-widget= t('in_memoriam_html')
- elsif @account.moved?
= render 'moved', account: @account
= render 'bio', account: @account
- unless @endorsed_accounts.empty?
.endorsements-widget
%h4= t 'accounts.choices_html', name: content_tag(:bdi, display_name(@account, custom_emojify: true))
- @endorsed_accounts.each do |account|
= account_link_to account
- @account.featured_tags.order(statuses_count: :desc).each do |featured_tag|
.directory__tag{ class: params[:tag] == featured_tag.name ? 'active' : nil }
= link_to short_account_tag_path(@account, featured_tag.tag) do
@@ -77,5 +65,3 @@
- else
%time{ datetime: featured_tag.last_status_at.iso8601, title: l(featured_tag.last_status_at) }= l featured_tag.last_status_at
.trends__item__current= number_to_human featured_tag.statuses_count, strip_insignificant_zeros: true
= render 'application/sidebar'

6
app/views/application/_sidebar.html.haml
View File

@@ -1,6 +0,0 @@
.hero-widget
.hero-widget__img
= image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.jpg'), alt: @instance_presenter.site_title
.hero-widget__text
%p= @instance_presenter.site_short_description.html_safe.presence || @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname)

3
app/views/layouts/application.html.haml
View File

@@ -21,7 +21,8 @@
%title= content_for?(:page_title) ? safe_join([yield(:page_title).chomp.html_safe, title], ' - ') : title
= stylesheet_pack_tag 'common', media: 'all'
= stylesheet_pack_tag current_theme, media: 'all'
= stylesheet_pack_tag 'application', media: 'all'
-# = stylesheet_pack_tag current_theme, media: 'all'
= javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous'
= javascript_pack_tag "locale_#{I18n.locale}", integrity: true, crossorigin: 'anonymous'
= csrf_meta_tags

2
app/views/stream_entries/show.html.haml
View File

@@ -21,5 +21,3 @@
.column-0
.activity-stream.h-entry
= render partial: "stream_entries/#{@type}", locals: { @type.to_sym => @stream_entry.activity, include_threads: true }
.column-1
= render 'application/sidebar'