From df346596cfacb93aa68edeb39f8b11f00548930b Mon Sep 17 00:00:00 2001 From: mgabdev <> Date: Tue, 4 Feb 2020 10:50:18 -0500 Subject: [PATCH] Progress --- app/controllers/home_controller.rb | 2 +- .../{header => }/assets/gab_logo/gab_logo.js | 8 +- .../assets/gab_logo/gab_logo.scss | 0 .../{header => }/assets/gab_logo/index.js | 0 .../assets/tabs_bar_icon/group_icon.js | 0 .../assets/tabs_bar_icon/home_icon.js | 0 .../assets/tabs_bar_icon/index.js | 0 .../tabs_bar_icon/notifications_icon.js | 0 .../assets/tabs_bar_icon/search_icon.js | 0 .../components/{header => }/header.js | 65 ++-- .../gabsocial/components/header/header.scss | 285 ------------------ .../gabsocial/components/header/index.js | 1 - .../gabsocial/components/link_footer.js | 161 ++++++++++ .../gabsocial/components/link_footer/index.js | 1 - .../components/link_footer/link_footer.js | 64 ---- .../components/link_footer/link_footer.scss | 33 -- .../gabsocial/components/page_layout.js | 34 +++ .../gabsocial/components/page_layout/index.js | 1 - .../components/page_layout/page_layout.js | 36 --- .../components/page_layout/page_layout.scss | 54 ---- app/javascript/gabsocial/features/ui/ui.js | 142 ++++----- app/javascript/gabsocial/pages/home_page.js | 16 +- app/javascript/styles/global.css | 253 +++++++--------- app/views/home/index.html.haml | 2 +- config/webpack/rules/css.js | 2 +- 25 files changed, 427 insertions(+), 733 deletions(-) rename app/javascript/gabsocial/components/{header => }/assets/gab_logo/gab_logo.js (70%) rename app/javascript/gabsocial/components/{header => }/assets/gab_logo/gab_logo.scss (100%) rename app/javascript/gabsocial/components/{header => }/assets/gab_logo/index.js (100%) rename app/javascript/gabsocial/components/{header => }/assets/tabs_bar_icon/group_icon.js (100%) rename app/javascript/gabsocial/components/{header => }/assets/tabs_bar_icon/home_icon.js (100%) rename app/javascript/gabsocial/components/{header => }/assets/tabs_bar_icon/index.js (100%) rename app/javascript/gabsocial/components/{header => }/assets/tabs_bar_icon/notifications_icon.js (100%) rename app/javascript/gabsocial/components/{header => }/assets/tabs_bar_icon/search_icon.js (100%) rename app/javascript/gabsocial/components/{header => }/header.js (82%) delete mode 100644 app/javascript/gabsocial/components/header/header.scss delete mode 100644 app/javascript/gabsocial/components/header/index.js create mode 100644 app/javascript/gabsocial/components/link_footer.js delete mode 100644 app/javascript/gabsocial/components/link_footer/index.js delete mode 100644 app/javascript/gabsocial/components/link_footer/link_footer.js delete mode 100644 app/javascript/gabsocial/components/link_footer/link_footer.scss create mode 100644 app/javascript/gabsocial/components/page_layout.js delete mode 100644 app/javascript/gabsocial/components/page_layout/index.js delete mode 100644 app/javascript/gabsocial/components/page_layout/page_layout.js delete mode 100644 app/javascript/gabsocial/components/page_layout/page_layout.scss diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb index 3cdc9fb9..133df2e7 100644 --- a/app/controllers/home_controller.rb +++ b/app/controllers/home_controller.rb @@ -7,7 +7,7 @@ class HomeController < ApplicationController before_action :set_data_for_meta def index - @body_classes = 'app-body' + # end private diff --git a/app/javascript/gabsocial/components/header/assets/gab_logo/gab_logo.js b/app/javascript/gabsocial/components/assets/gab_logo/gab_logo.js similarity index 70% rename from app/javascript/gabsocial/components/header/assets/gab_logo/gab_logo.js rename to app/javascript/gabsocial/components/assets/gab_logo/gab_logo.js index a942b869..49274119 100644 --- a/app/javascript/gabsocial/components/header/assets/gab_logo/gab_logo.js +++ b/app/javascript/gabsocial/components/assets/gab_logo/gab_logo.js @@ -1,13 +1,11 @@ import './gab_logo.scss' const GabLogo = ({ - className = 'gab-logo', width = '50px', height = '30px', viewBox = '0 0 50 30' }) => ( - - - diff --git a/app/javascript/gabsocial/components/header/assets/gab_logo/gab_logo.scss b/app/javascript/gabsocial/components/assets/gab_logo/gab_logo.scss similarity index 100% rename from app/javascript/gabsocial/components/header/assets/gab_logo/gab_logo.scss rename to app/javascript/gabsocial/components/assets/gab_logo/gab_logo.scss diff --git a/app/javascript/gabsocial/components/header/assets/gab_logo/index.js b/app/javascript/gabsocial/components/assets/gab_logo/index.js similarity index 100% rename from app/javascript/gabsocial/components/header/assets/gab_logo/index.js rename to app/javascript/gabsocial/components/assets/gab_logo/index.js diff --git a/app/javascript/gabsocial/components/header/assets/tabs_bar_icon/group_icon.js b/app/javascript/gabsocial/components/assets/tabs_bar_icon/group_icon.js similarity index 100% rename from app/javascript/gabsocial/components/header/assets/tabs_bar_icon/group_icon.js rename to app/javascript/gabsocial/components/assets/tabs_bar_icon/group_icon.js diff --git a/app/javascript/gabsocial/components/header/assets/tabs_bar_icon/home_icon.js b/app/javascript/gabsocial/components/assets/tabs_bar_icon/home_icon.js similarity index 100% rename from app/javascript/gabsocial/components/header/assets/tabs_bar_icon/home_icon.js rename to app/javascript/gabsocial/components/assets/tabs_bar_icon/home_icon.js diff --git a/app/javascript/gabsocial/components/header/assets/tabs_bar_icon/index.js b/app/javascript/gabsocial/components/assets/tabs_bar_icon/index.js similarity index 100% rename from app/javascript/gabsocial/components/header/assets/tabs_bar_icon/index.js rename to app/javascript/gabsocial/components/assets/tabs_bar_icon/index.js diff --git a/app/javascript/gabsocial/components/header/assets/tabs_bar_icon/notifications_icon.js b/app/javascript/gabsocial/components/assets/tabs_bar_icon/notifications_icon.js similarity index 100% rename from app/javascript/gabsocial/components/header/assets/tabs_bar_icon/notifications_icon.js rename to app/javascript/gabsocial/components/assets/tabs_bar_icon/notifications_icon.js diff --git a/app/javascript/gabsocial/components/header/assets/tabs_bar_icon/search_icon.js b/app/javascript/gabsocial/components/assets/tabs_bar_icon/search_icon.js similarity index 100% rename from app/javascript/gabsocial/components/header/assets/tabs_bar_icon/search_icon.js rename to app/javascript/gabsocial/components/assets/tabs_bar_icon/search_icon.js diff --git a/app/javascript/gabsocial/components/header/header.js b/app/javascript/gabsocial/components/header.js similarity index 82% rename from app/javascript/gabsocial/components/header/header.js rename to app/javascript/gabsocial/components/header.js index 80acdc26..149ff28f 100644 --- a/app/javascript/gabsocial/components/header/header.js +++ b/app/javascript/gabsocial/components/header.js @@ -3,15 +3,15 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { injectIntl, defineMessages } from 'react-intl'; import classNames from 'classnames'; -import Avatar from '../avatar'; -import IconButton from '../icon_button'; -import Icon from '../icon'; -import DisplayName from '../display_name'; -import { closeSidebar } from '../../actions/sidebar'; -import { shortNumberFormat } from '../../utils/numbers'; -import { me } from '../../initial_state'; -import { makeGetAccount } from '../../selectors'; -import ProgressPanel from '../progress_panel'; +import Avatar from './avatar'; +import IconButton from './icon_button'; +import Icon from './icon'; +import DisplayName from './display_name'; +import { closeSidebar } from '../actions/sidebar'; +import { shortNumberFormat } from '../utils/numbers'; +import { me } from '../initial_state'; +import { makeGetAccount } from '../selectors'; +import ProgressPanel from './progress_panel'; import GabLogo from './assets/gab_logo'; import { GroupIcon, @@ -19,8 +19,6 @@ import { NotificationsIcon, } from './assets/tabs_bar_icon'; -console.log("header global - styles:", styles); - const messages = defineMessages({ followers: { id: 'account.followers', defaultMessage: 'Followers' }, follows: { id: 'account.follows', defaultMessage: 'Follows' }, @@ -120,17 +118,17 @@ class Header extends ImmutablePureComponent { { name: 'Notifications', icon: , - to: '/', + to: '/notifications', }, { name: 'Groups', icon: , - to: '/', + to: '/groups', }, { name: 'Lists', icon: , - to: '/', + to: '/lists', }, { name: 'Chat', @@ -150,37 +148,34 @@ class Header extends ImmutablePureComponent { ]; return ( -
-
-
-
-

- +
+
+
+
+

+ - +

-
diff --git a/app/javascript/gabsocial/components/header/header.scss b/app/javascript/gabsocial/components/header/header.scss deleted file mode 100644 index ee7b7c88..00000000 --- a/app/javascript/gabsocial/components/header/header.scss +++ /dev/null @@ -1,285 +0,0 @@ -.header { - display: flex; - flex-basis: auto; - flex-direction: column; - flex-shrink: 0; - flex-grow: 1; - align-items: flex-end; - z-index: 3; - - &__container { - display: flex; - flex-basis: auto; - flex-direction: column; - flex-shrink: 0; - width: 275px; - } - - &__heading { - display: flex; - width: 100%; - margin-top: 4px; - - &__btn { - display: flex; - max-width: 100%; - padding: 10px; - cursor: pointer; - } - } -} - -.header-scrollarea { - position: fixed; - height: 100%; - top: 0; - - &__container { - display: flex; - width: 275px; - height: 100%; - padding-left: 20px; - padding-right: 20px; - flex-direction: column; - align-items: flex-start; - overflow: hidden; - overflow-y: scroll; - } -} - -.header-nav { - display: flex; - width: 100%; - flex-direction: column; - - &__item { - display: flex; - align-items: flex-start; - width: 100%; - flex-grow: 1; - height: 54px; - cursor: pointer; - text-decoration: none; - - @include vertical-padding(4px); - - &__block { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - max-width: 100%; - padding: 10px; - border-radius: 27px; - } - - &__icon { - @include size(26px); - - &__path { - stroke: #fff; - fill: none; - stroke-width: 4px; - stroke-linecap: round; - - &--fill { - stroke: none !important; - fill: #fff !important; - } - } - } - - &__title { - overflow-wrap: break-word; - font-size: 19px; - color: #fff; - - @include horizontal-margin(15px); - } - - &:hover & { - &__block { - background-color: rgba($gab-brand-default, 0.25); - } - - &__title { - color: $gab-brand-default; - } - } - } -} - -// .sidebar-menu { -// display: flex; -// position: fixed; -// flex-direction: column; -// width: 275px; -// height: 100vh; -// top: 0; -// bottom: 0; -// left: 0; -// background: $gab-background-container; -// transform: translateX(-275px); -// transition: all 0.15s linear; -// z-index: 10001; - -// body.theme-gabsocial-light & { -// background: $gab-background-container-light; -// } - -// &__root { -// display: none; -// } - -// &__wrapper { -// display: block; -// position: fixed; -// top: 0; -// left: 0; -// right: 0; -// bottom: 0; -// z-index: 10000; -// background-color: transparent; -// transition: background-color 0.2s linear; -// transition-delay: 0.1s; -// } - -// &__content { -// display: flex; -// flex: 1 1; -// flex-direction: column; -// padding-bottom: 40px; -// overflow: hidden; -// overflow-y: scroll; -// -webkit-overflow-scrolling: touch; -// } - -// &__section { -// display: block; -// margin: 4px 0; -// border-top: 1px solid lighten($ui-base-color, 4%); - -// &--borderless { -// margin: 0; -// border-top: none; -// } -// } - -// @media (max-width: 400px) { -// width: 90vw; -// } -// } - -// .sidebar-menu__root--visible { -// display: block; - -// .sidebar-menu { -// transform: translateX(0); -// } - -// .sidebar-menu__wrapper { -// background-color: rgba(0,0,0,0.3); -// } -// } - -// .sidebar-menu-header { -// display: flex; -// height: 46px; -// padding: 12px 14px; -// border-bottom: 1px solid lighten($ui-base-color, 4%); -// box-sizing: border-box; -// align-items: center; - -// &__title { -// display: block; -// font-size: 18px; -// font-weight: 600; -// color: $primary-text-color; -// } - -// &__btn { -// margin-left: auto; -// } -// } - -// .sidebar-menu-profile { -// display: block; -// padding: 14px 18px; - -// &__avatar { -// display: block; -// width: 56px; -// height: 56px; -// } - -// &__name { -// display: block; -// margin-top: 10px; - -// .display-name__account { -// display: block; -// margin-top: 2px; -// } -// } - -// &__stats { -// display: flex; -// margin-top: 12px; -// } -// } - -// .sidebar-menu-profile-stat { -// display: flex; -// font-size: 14px; -// text-decoration: none; - -// &:not(:first-of-type) { -// margin-left: 18px; -// } - -// &__value { -// display: flex; -// margin-right: 3px; -// font-weight: 700; -// color: $primary-text-color; -// } - -// &__label { -// display: flex; -// color: $primary-text-color; -// } - -// &:hover { -// text-decoration: underline; -// } -// } - -// .sidebar-menu-item { -// display: flex; -// padding: 16px 18px; -// cursor: pointer; -// text-decoration: none; -// color: $primary-text-color; -// font-size: 15px; -// font-weight: 400; -// height: 50px; -// box-sizing: border-box; - -// &:hover { -// background-color: rgba($gab-brand-default, 0.1); - -// .fa { -// color: $primary-text-color; -// } -// } - -// .fa { -// margin-right: 10px; -// } - -// &:hover { -// &__title { -// color: $primary-text-color; -// } -// } -// } \ No newline at end of file diff --git a/app/javascript/gabsocial/components/header/index.js b/app/javascript/gabsocial/components/header/index.js deleted file mode 100644 index a997a96d..00000000 --- a/app/javascript/gabsocial/components/header/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './header'; \ No newline at end of file diff --git a/app/javascript/gabsocial/components/link_footer.js b/app/javascript/gabsocial/components/link_footer.js new file mode 100644 index 00000000..99948e85 --- /dev/null +++ b/app/javascript/gabsocial/components/link_footer.js @@ -0,0 +1,161 @@ +import moment from 'moment' +import classNames from 'classnames/bind' +import { + defineMessages, + injectIntl, +} from 'react-intl' +import { openModal } from '../actions/modal' +import { + version, + repository, + source_url, + me, +} from '../initial_state' + +const messages = defineMessages({ + invite: { id: 'getting_started.invite', defaultMessage: 'Invite people' }, + hotkeys: { id: 'navigation_bar.keyboard_shortcuts', defaultMessage: 'Hotkeys' }, + security: { id: 'getting_started.security', defaultMessage: 'Security' }, + about: { id: 'navigation_bar.info', defaultMessage: 'About' }, + developers: { id: 'getting_started.developers', defaultMessage: 'Developers' }, + terms: { id: 'getting_started.terms', defaultMessage: 'Terms of Service' }, + dmca: { id: 'getting_started.dmca', defaultMessage: 'DMCA' }, + terms: { id: 'getting_started.terms_of_sale', defaultMessage: 'Terms of Sale' }, + privacy: { id: 'getting_started.privacy', defaultMessage: 'Privacy Policy' }, + logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' }, + notice: { id: 'getting_started.open_source_notice', defaultMessage: 'Gab Social is open source software. You can contribute or report issues on our self-hosted GitLab at {gitlab}.' }, +}) + +const mapDispatchToProps = (dispatch) => ({ + onOpenHotkeys() { + dispatch(openModal('HOTKEYS')) + }, +}) + +export default @connect(null, mapDispatchToProps) +@injectIntl +class LinkFooter extends PureComponent { + + static propTypes = { + intl: PropTypes.object.isRequired, + onOpenHotkeys: PropTypes.func.isRequired, + } + + state = { + hoveringItemIndex: null, + } + + onMouseEnterLinkFooterItem = (i) => { + this.setState({ + hoveringItemIndex: i, + }) + } + + onMouseLeaveLinkFooterItem = () => { + this.setState({ + hoveringItemIndex: null, + }) + } + + render() { + const { onOpenHotkeys, intl } = this.props + const { hoveringItemIndex } = this.state + + const cx = classNames.bind(styles); + + const currentYear = moment().format('YYYY') + + const linkFooterItems = [ + { + to: '#', + onClick: onOpenHotkeys, + text: intl.formatMessage(messages.hotkeys), + requiresUser: true, + }, + { + to: '/auth/edit', + text: intl.formatMessage(messages.security), + requiresUser: true, + }, + { + to: '/about', + text: intl.formatMessage(messages.about), + }, + { + to: '/settings/applications', + text: intl.formatMessage(messages.developers), + }, + { + to: '/about/tos', + text: intl.formatMessage(messages.terms), + }, + { + to: '/about/dmca', + text: intl.formatMessage(messages.dmca), + }, + { + to: '/about/sales', + text: intl.formatMessage(messages.terms), + }, + { + to: '/about/privacy', + text: intl.formatMessage(messages.privacy), + }, + { + to: '/auth/sign_out', + text: intl.formatMessage(messages.logout), + requiresUser: true, + logout: true, + }, + ] + + return ( +
+ + +

+ {intl.formatMessage(messages.invite, { + gitlab: ( + + {repository} + (v{version}) + + ) + })} +

+

© {currentYear} Gab AI Inc.

+
+ ) + } + +} \ No newline at end of file diff --git a/app/javascript/gabsocial/components/link_footer/index.js b/app/javascript/gabsocial/components/link_footer/index.js deleted file mode 100644 index 263615b1..00000000 --- a/app/javascript/gabsocial/components/link_footer/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './link_footer'; \ No newline at end of file diff --git a/app/javascript/gabsocial/components/link_footer/link_footer.js b/app/javascript/gabsocial/components/link_footer/link_footer.js deleted file mode 100644 index c14219df..00000000 --- a/app/javascript/gabsocial/components/link_footer/link_footer.js +++ /dev/null @@ -1,64 +0,0 @@ -import { defineMessages, injectIntl } from 'react-intl'; -import { openModal } from '../../actions/modal'; -import { invitesEnabled, version, repository, source_url, me } from '../../initial_state'; - -import './link_footer.scss'; - -const messages = defineMessages({ - invite: { id:'getting_started.invite', defaultMessage: 'Invite people' }, - hotkeys: { id: 'navigation_bar.keyboard_shortcuts', defaultMessage: 'Hotkeys' }, - security: { id: 'getting_started.security', defaultMessage: 'Security' }, - about: { id: 'navigation_bar.info', defaultMessage: 'About' }, - developers: { id: 'getting_started.developers', defaultMessage: 'Developers' }, - terms: { id: 'getting_started.terms', defaultMessage: 'Terms of Service' }, - dmca: { id: 'getting_started.dmca', defaultMessage: 'DMCA' }, - terms: { id: 'getting_started.terms_of_sale', defaultMessage: 'Terms of Sale' }, - privacy: { id: 'getting_started.privacy', defaultMessage: 'Privacy Policy' }, - logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' }, - notice: { id: 'getting_started.open_source_notice', defaultMessage: 'Gab Social is open source software. You can contribute or report issues on our self-hosted GitLab at {gitlab}.' }, -}); - -const mapDispatchToProps = (dispatch) => ({ - onOpenHotkeys() { - dispatch(openModal('HOTKEYS')); - }, -}); - -export default @connect(null, mapDispatchToProps) -@injectIntl -class LinkFooter extends PureComponent { - - static propTypes = { - intl: PropTypes.object.isRequired, - onOpenHotkeys: PropTypes.func.isRequired, - }; - - render() { - const { onOpenHotkeys, intl } = this.props; - - return ( - - ); - } - -}; \ No newline at end of file diff --git a/app/javascript/gabsocial/components/link_footer/link_footer.scss b/app/javascript/gabsocial/components/link_footer/link_footer.scss deleted file mode 100644 index fe0709cf..00000000 --- a/app/javascript/gabsocial/components/link_footer/link_footer.scss +++ /dev/null @@ -1,33 +0,0 @@ -.link-footer { - flex: 0 0 auto; - padding: 20px 10px 10px 10px; - - ul { - margin-bottom: 10px; - li { - display: inline; - } - } - - p { - color: $dark-text-color; - font-size: 13px; - margin-bottom: 20px; - - a { - color: $gab-secondary-text; - text-decoration: underline; - } - } - - a { - text-decoration: none; - color: $gab-secondary-text; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } -} \ No newline at end of file diff --git a/app/javascript/gabsocial/components/page_layout.js b/app/javascript/gabsocial/components/page_layout.js new file mode 100644 index 00000000..4f51d205 --- /dev/null +++ b/app/javascript/gabsocial/components/page_layout.js @@ -0,0 +1,34 @@ +import Header from './header' + +export default class PageLayout extends PureComponent { + static propTypes = { + layout: PropTypes.object, + }; + + render() { + const { children, layout } = this.props; + + const right = layout.RIGHT || null; + + return ( +
+
+
+
+
+
+ {children} +
+
+
+
+ {right} +
+
+
+
+
+ ) + } + +} diff --git a/app/javascript/gabsocial/components/page_layout/index.js b/app/javascript/gabsocial/components/page_layout/index.js deleted file mode 100644 index 4c875621..00000000 --- a/app/javascript/gabsocial/components/page_layout/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './page_layout'; \ No newline at end of file diff --git a/app/javascript/gabsocial/components/page_layout/page_layout.js b/app/javascript/gabsocial/components/page_layout/page_layout.js deleted file mode 100644 index d85ab439..00000000 --- a/app/javascript/gabsocial/components/page_layout/page_layout.js +++ /dev/null @@ -1,36 +0,0 @@ -import Header from '../header' - -console.log("in the page_layout - styles:", styles); - -export default class PageLayout extends PureComponent { - static propTypes = { - layout: PropTypes.object, - }; - - render() { - const { children, layout } = this.props; - - const right = layout.RIGHT || null; - - return ( -
- {/*
*/} -
-
-
-
- { /* children */ } -
-
-
-
- { /* right */ } -
-
-
-
-
- ) - } - -} diff --git a/app/javascript/gabsocial/components/page_layout/page_layout.scss b/app/javascript/gabsocial/components/page_layout/page_layout.scss deleted file mode 100644 index f6f41292..00000000 --- a/app/javascript/gabsocial/components/page_layout/page_layout.scss +++ /dev/null @@ -1,54 +0,0 @@ -.page { - display: flex; - flex-direction: row; - width: 100%; - - &__top { - display: flex; - z-index: 105; - - @include size(100%, auto); - - @media (min-width:895px) { - top: -290px; - position: sticky; - } - } - - .main { - display: flex; - flex-basis: auto; - flex-direction: column; - flex-shrink: 1; - flex-grow: 1; - align-items: flex-start; - - &__container { - display: flex; - align-items: stretch; - justify-content: space-between; - flex-grow: 1; - flex-direction: row; - width: 990px; - } - } -} - -.main-contents { - display: flex; - max-width: 600px; - z-index: 1; - - &__inner { - - } -} - -.main-sidebar { - display: flex; - width: 350px; - - &__inner { - - } -} \ No newline at end of file diff --git a/app/javascript/gabsocial/features/ui/ui.js b/app/javascript/gabsocial/features/ui/ui.js index 3c0ef068..c6914ea2 100644 --- a/app/javascript/gabsocial/features/ui/ui.js +++ b/app/javascript/gabsocial/features/ui/ui.js @@ -16,52 +16,52 @@ import { clearHeight } from '../../actions/height_cache'; import { openModal } from '../../actions/modal'; import WrappedRoute from './util/wrapped_route'; import { isMobile } from '../../utils/is_mobile'; -import NotificationsContainer from '../../containers/notifications_container'; -import LoadingBarContainer from '../../containers/loading_bar_container'; -import ModalContainer from '../../containers/modal_container'; -import UploadArea from '../../components/upload_area'; -import FooterBar from '../../components/footer_bar'; +// import NotificationsContainer from '../../containers/notifications_container'; +// import LoadingBarContainer from '../../containers/loading_bar_container'; +// import ModalContainer from '../../containers/modal_container'; +// import UploadArea from '../../components/upload_area'; +// import FooterBar from '../../components/footer_bar'; // import TrendsPanel from './components/trends_panel'; -import { WhoToFollowPanel } from '../../components/panel'; -import LinkFooter from '../../components/link_footer'; -import ProfilePage from '../../pages/profile_page'; +// import { WhoToFollowPanel } from '../../components/panel'; +// import LinkFooter from '../../components/link_footer'; +// import ProfilePage from '../../pages/profile_page'; // import GroupsPage from 'gabsocial/pages/groups_page'; -import GroupPage from '../../pages/group_page'; -import SearchPage from '../../pages/search_page'; +// import GroupPage from '../../pages/group_page'; +// import SearchPage from '../../pages/search_page'; import HomePage from '../../pages/home_page'; -import GroupSidebarPanel from '../groups/sidebar_panel'; +// import GroupSidebarPanel from '../groups/sidebar_panel'; import { - Status, - GettingStarted, - CommunityTimeline, - AccountTimeline, - AccountGallery, + // Status, + // GettingStarted, + // CommunityTimeline, + // AccountTimeline, + // AccountGallery, HomeTimeline, - Followers, - Following, - Reblogs, - Favourites, - DirectTimeline, - HashtagTimeline, - Notifications, - FollowRequests, - GenericNotFound, - FavouritedStatuses, - Blocks, - DomainBlocks, - Mutes, - PinnedStatuses, - Search, - Explore, - Groups, - GroupTimeline, - ListTimeline, - Lists, - GroupMembers, - GroupRemovedAccounts, - GroupCreate, - GroupEdit, + // Followers, + // Following, + // Reblogs, + // Favourites, + // DirectTimeline, + // HashtagTimeline, + // Notifications, + // FollowRequests, + // GenericNotFound, + // FavouritedStatuses, + // Blocks, + // DomainBlocks, + // Mutes, + // PinnedStatuses, + // Search, + // Explore, + // Groups, + // GroupTimeline, + // ListTimeline, + // Lists, + // GroupMembers, + // GroupRemovedAccounts, + // GroupCreate, + // GroupEdit, } from './util/async-components'; import { me, meUsername } from '../../initial_state'; @@ -70,8 +70,8 @@ import { me, meUsername } from '../../initial_state'; import '../../components/status'; import { fetchGroups } from '../../actions/groups'; -import '../../../styles/application.scss'; -import './ui.scss'; +// import '../../../styles/application.scss'; +// import './ui.scss'; const messages = defineMessages({ beforeUnload: { id: 'ui.beforeunload', defaultMessage: 'Your draft will be lost if you leave Gab Social.' }, @@ -114,30 +114,30 @@ const keyMap = { }; const LAYOUT = { - EMPTY: { - LEFT: null, - RIGHT: null, - }, - DEFAULT: { - LEFT: [ - , - , - ], - RIGHT: [ - // , - - ], - }, - STATUS: { - TOP: null, - LEFT: null, - RIGHT: [ - , - , - // , - , - ], - }, + // EMPTY: { + // LEFT: null, + // RIGHT: null, + // }, + // DEFAULT: { + // LEFT: [ + // , + // , + // ], + // RIGHT: [ + // // , + // + // ], + // }, + // STATUS: { + // TOP: null, + // LEFT: null, + // RIGHT: [ + // , + // , + // // , + // , + // ], + // }, }; const shouldHideFAB = path => path.match(/^\/posts\/|^\/search|^\/getting-started/); @@ -182,12 +182,12 @@ class SwitchingColumnsArea extends PureComponent { - + {/* - {/* + - */} + @@ -240,7 +240,7 @@ class SwitchingColumnsArea extends PureComponent { - + */} ); } @@ -531,7 +531,7 @@ class UI extends PureComponent { return ( -
+
{children} diff --git a/app/javascript/gabsocial/pages/home_page.js b/app/javascript/gabsocial/pages/home_page.js index 3bee39e6..2f2e2c76 100644 --- a/app/javascript/gabsocial/pages/home_page.js +++ b/app/javascript/gabsocial/pages/home_page.js @@ -1,10 +1,10 @@ import { Fragment } from 'react'; -import GroupSidebarPanel from '../features/groups/sidebar_panel'; +// import GroupSidebarPanel from '../features/groups/sidebar_panel'; import LinkFooter from '../components/link_footer'; -import PromoPanel from '../components/promo_panel'; -import UserPanel from '../components/user_panel'; +// import PromoPanel from '../components/promo_panel'; +// import UserPanel from '../components/user_panel'; import PageLayout from '../components/page_layout'; -import TimelineComposeBlock from '../components/timeline_compose_block'; +// import TimelineComposeBlock from '../components/timeline_compose_block'; export default class HomePage extends PureComponent { render () { @@ -15,15 +15,15 @@ export default class HomePage extends PureComponent { layout={{ RIGHT: ( - - + {/**/} + {/**/} ), }} > - - {children} + {/**/} + {/*children*/} ) } diff --git a/app/javascript/styles/global.css b/app/javascript/styles/global.css index 381ed736..0d64c756 100644 --- a/app/javascript/styles/global.css +++ b/app/javascript/styles/global.css @@ -1,55 +1,33 @@ -html,body{ +html, body { height: 100%; -} - -body{ - -ms-overflow-style:scrollbar; - overflow-y:scroll; - overscroll-behavior-y:none; -} - -html { - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + margin: 0; + padding: 0; } body { - margin: 0; + overflow-y: scroll; + overscroll-behavior-y: none; } .default { - align-items: stretch; - border: 0 solid black; - box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; + align-items: stretch; flex-shrink: 0; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; - min-height: 0px; - min-width: 0px; - padding-bottom: 0px; - padding-left: 0px; - padding-right: 0px; - padding-top: 0px; - position: relative; + border: 0 solid black; z-index: 0; + margin: 0; + padding: 0; + box-sizing: border-box; + position: relative; } .text { - font: 14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif; -} - -.color-black { - color: rgba(0, 0, 0, 1.00); -} - -.inline { display: inline; + white-space: pre-wrap; + word-wrap: break-word; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif; } .wrap { @@ -57,128 +35,131 @@ body { word-wrap: break-word; } +.overflowWrapBreakWord { + overflow-wrap: break-word; +} + .inherit { color: inherit; font: inherit; white-space: inherit; } -.r-13awgt0 { - -ms-flex-negative: 1; - -ms-flex-positive: 1; - -ms-flex-preferred-size: 0%; - -webkit-box-flex: 1; - -webkit-flex-basis: 0%; - -webkit-flex-grow: 1; - -webkit-flex-shrink: 1; +.flex-normal { flex-basis: 0%; flex-grow: 1; flex-shrink: 1; } -.r-4qtqp9 { - display: inline-block; +.flexGrow1 { flex-grow: 1; } +.flexShrink1 { flex-shrink: 1; } +.flexRow { flex-direction: row; } +.flexWrap { flex-wrap: wrap; } + +.alignItemsEnd { align-items: flex-end; } +.alignItemsStart { align-items: flex-start; } +.alignItemsCenter { align-items: center; } + +.justifyContentSpaceBetween { justify-content: space-between; } +.justifyContentCenter { justify-content: center; } + +.overflowHidden { + overflow-x: hidden; + overflow-y: hidden; } -.r-ywje51 { - margin-bottom: auto; - margin-left: auto; - margin-right: auto; - margin-top: auto; -} - -.r-hvic4v { - display: none; -} - -.r-1adg3ll { - display: block; -} - - -.r-12vffkv>* { - pointer-events: auto; -} - -.r-12vffkv { - pointer-events: none !important; -} - -.r-14lw9ot { - background-color: rgba(255, 255, 255, 1.00); -} - -.r-1p0dtai { - bottom: 0px; -} - -.r-1d2f490 { - left: 0px; -} - -.r-1xcajam { - position: fixed; -} - -.r-zchlnj { - right: 0px; -} - -.r-ipm5af { - top: 0px; -} - -.r-yyyyoo { - fill: currentcolor; -} - -.r-1xvli5t { - height: 1.25em; -} - -.r-dnmrzs { +.textOverflowEllipsis { max-width: 100%; + overflow-x: hidden; + overflow-y: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -.r-bnwqim { - position: relative; +.circle { border-radius: 9999px; } + +.marginAuto { margin: auto; } + +.displayNone { display: none; } +.displayBlock { display: block; } +.displayInline { display: inline; } +.displayInlineBlock { display: inline-block; } + +.cursorPointer { cursor: pointer } + +.pointerEventsAuto > * { pointer-events: auto;} +.pointerEventsNone { pointer-events: none !important; } + +.backgroundWhite { background-color: #fff; } +.colorBlack { color: #000; } +.colorSubtle { color: #666; } +.colorBrand { color: rgb(29, 161, 242); } +.fillColorBrand { fill: #21cf7a; } + +.bottom0 { bottom: 0; } +.left0 { left: 0px; } +.right0 { right: 0px; } +.top0 { top: 0px; } + +.lineHeight125 { height: 1.25em; } +.lineHeight2 { line-height: 2em; } + +.positionFixed { position: fixed; } +.positionRelative { position: relative; } +.positionAbsolute { position: absolute; } + +.noSelect { user-select: none; } + +.height100PC { height: 100%; } +.height50PX { height: 50px; } +.height72PX { height: 72px; } + +.width990PX { width: 990px; } +.width600PX { width: 600px; } +.width350PX { width: 350px; } +.width275PX { width: 275px; } +.width100PC { width: 100%; } +.width72PX { width: 72px; } +.maxWidth100PC { max-width: 100%; } + +.top0 { top: 0; } +.top60PC { top: 60%; } + +.textAlignCenter { text-align: center; } + +.fontSize19PX { font-size: 19px; } +.fontSize13PX { font-size: 13px; } + +.fontWeightNormal { font-weight: 400; } +.fontWeightBold { font-weight: 600; } + +.noUnderline { text-decoration: none; } +.underline { text-decoration: underline; } + +.z1 { z-index: 1; } +.z2 { z-index: 2; } +.z3 { z-index: 3; } + +.marginVertical5PX { + margin-top: 5px; + margin-bottom: 5px; } -.r-1plcrui { - vertical-align: text-bottom; +.paddingVertical10PX { + padding-top: 10px; + padding-bottom: 10px; } -.r-lrvibr { - -moz-user-select: none; - -ms-user-select: none; - -webkit-user-select: none; - user-select: none; +.paddingHoizontal10PX { + padding-left: 10px; + padding-right: 10px; } -.color-brand { - color: rgba(29, 161, 242, 1.00); +.paddingHorizontal20PX { + padding-left: 20px; + padding-right: 20px; } -.height-72-px { - height: 72px; -} - -.position-relative { - position: absolute; -} - -.width-72-px { - width: 72px; -} - -.top-60-pc { - top: 60%; -} - -.line-height-2 { - line-height: 2em; -} - -.text-align-center { - text-align: center; +.paddingRight15PX { + padding-right: 15px; } \ No newline at end of file diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml index cc7f95c0..1154ea83 100644 --- a/app/views/home/index.html.haml +++ b/app/views/home/index.html.haml @@ -8,7 +8,7 @@ = javascript_pack_tag 'application', integrity: true, crossorigin: 'anonymous' -.app-holder#gabsocial{ data: { props: Oj.dump(default_props) } } +#gabsocial{ data: { props: Oj.dump(default_props) } } %noscript = image_pack_tag 'logo.png', alt: 'Gab Social' diff --git a/config/webpack/rules/css.js b/config/webpack/rules/css.js index 5eea451f..f048cea7 100644 --- a/config/webpack/rules/css.js +++ b/config/webpack/rules/css.js @@ -19,7 +19,7 @@ module.exports = { sourceMap: true, importLoaders: 2, modules: true, - // localIdentName: '[name]', + localIdentName: '[hash:base64:5]', }, }, {