diff --git a/app/controllers/public_timelines_controller.rb b/app/controllers/public_timelines_controller.rb
index 53d4472d88d..c5fe789f44e 100644
--- a/app/controllers/public_timelines_controller.rb
+++ b/app/controllers/public_timelines_controller.rb
@@ -1,6 +1,7 @@
# frozen_string_literal: true
class PublicTimelinesController < ApplicationController
+ before_action :set_pack
layout 'public'
before_action :check_enabled
@@ -31,4 +32,8 @@ class PublicTimelinesController < ApplicationController
def set_instance_presenter
@instance_presenter = InstancePresenter.new
end
+
+ def set_pack
+ use_pack 'about'
+ end
end
diff --git a/app/javascript/flavours/glitch/containers/timeline_container.js b/app/javascript/flavours/glitch/containers/timeline_container.js
index 5a1f41f7a8e..6ce55666454 100644
--- a/app/javascript/flavours/glitch/containers/timeline_container.js
+++ b/app/javascript/flavours/glitch/containers/timeline_container.js
@@ -7,7 +7,6 @@ import { hydrateStore } from 'flavours/glitch/actions/store';
import { IntlProvider, addLocaleData } from 'react-intl';
import { getLocale } from 'mastodon/locales';
import PublicTimeline from 'flavours/glitch/features/standalone/public_timeline';
-import CommunityTimeline from 'flavours/glitch/features/standalone/community_timeline';
import HashtagTimeline from 'flavours/glitch/features/standalone/hashtag_timeline';
import ModalContainer from 'flavours/glitch/features/ui/containers/modal_container';
import initialState from 'flavours/glitch/util/initial_state';
@@ -26,24 +25,22 @@ export default class TimelineContainer extends React.PureComponent {
static propTypes = {
locale: PropTypes.string.isRequired,
hashtag: PropTypes.string,
- showPublicTimeline: PropTypes.bool.isRequired,
+ local: PropTypes.bool,
};
static defaultProps = {
- showPublicTimeline: initialState.settings.known_fediverse,
+ local: !initialState.settings.known_fediverse,
};
render () {
- const { locale, hashtag, showPublicTimeline } = this.props;
+ const { locale, hashtag, local } = this.props;
let timeline;
if (hashtag) {
timeline = ;
- } else if (showPublicTimeline) {
- timeline = ;
} else {
- timeline = ;
+ timeline = ;
}
return (
@@ -51,6 +48,7 @@ export default class TimelineContainer extends React.PureComponent {
{timeline}
+
{ReactDOM.createPortal(
,
document.getElementById('modal-container'),
diff --git a/app/javascript/flavours/glitch/features/standalone/community_timeline/index.js b/app/javascript/flavours/glitch/features/standalone/community_timeline/index.js
deleted file mode 100644
index 2b67e836ae2..00000000000
--- a/app/javascript/flavours/glitch/features/standalone/community_timeline/index.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container';
-import { expandCommunityTimeline } from 'flavours/glitch/actions/timelines';
-import Column from 'flavours/glitch/components/column';
-import ColumnHeader from 'flavours/glitch/components/column_header';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connectCommunityStream } from 'flavours/glitch/actions/streaming';
-
-const messages = defineMessages({
- title: { id: 'standalone.public_title', defaultMessage: 'A look inside...' },
-});
-
-@connect()
-@injectIntl
-export default class CommunityTimeline extends React.PureComponent {
-
- static propTypes = {
- dispatch: PropTypes.func.isRequired,
- intl: PropTypes.object.isRequired,
- };
-
- handleHeaderClick = () => {
- this.column.scrollTop();
- }
-
- setRef = c => {
- this.column = c;
- }
-
- componentDidMount () {
- const { dispatch } = this.props;
-
- dispatch(expandCommunityTimeline());
- this.disconnect = dispatch(connectCommunityStream());
- }
-
- componentWillUnmount () {
- if (this.disconnect) {
- this.disconnect();
- this.disconnect = null;
- }
- }
-
- handleLoadMore = maxId => {
- this.props.dispatch(expandCommunityTimeline({ maxId }));
- }
-
- render () {
- const { intl } = this.props;
-
- return (
-
-
-
-
-
- );
- }
-
-}
diff --git a/app/javascript/flavours/glitch/features/standalone/public_timeline/index.js b/app/javascript/flavours/glitch/features/standalone/public_timeline/index.js
index 907da399245..079f62f80cb 100644
--- a/app/javascript/flavours/glitch/features/standalone/public_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/standalone/public_timeline/index.js
@@ -1,42 +1,59 @@
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
-import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container';
-import { expandPublicTimeline } from 'flavours/glitch/actions/timelines';
-import Column from 'flavours/glitch/components/column';
-import ColumnHeader from 'flavours/glitch/components/column_header';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connectPublicStream } from 'flavours/glitch/actions/streaming';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { expandPublicTimeline, expandCommunityTimeline } from 'flavours/glitch/actions/timelines';
+import { connectPublicStream, connectCommunityStream } from 'flavours/glitch/actions/streaming';
+import Masonry from 'react-masonry-infinite';
+import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
+import DetailedStatusContainer from 'flavours/glitch/features/status/containers/detailed_status_container';
+import { debounce } from 'lodash';
+import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
-const messages = defineMessages({
- title: { id: 'standalone.public_title', defaultMessage: 'A look inside...' },
-});
+const mapStateToProps = (state, { local }) => {
+ const timeline = state.getIn(['timelines', local ? 'community' : 'public'], ImmutableMap());
-@connect()
-@injectIntl
-export default class PublicTimeline extends React.PureComponent {
+ return {
+ statusIds: timeline.get('items', ImmutableList()),
+ isLoading: timeline.get('isLoading', false),
+ hasMore: timeline.get('hasMore', false),
+ };
+};
+
+export default @connect(mapStateToProps)
+class PublicTimeline extends React.PureComponent {
static propTypes = {
dispatch: PropTypes.func.isRequired,
- intl: PropTypes.object.isRequired,
+ statusIds: ImmutablePropTypes.list.isRequired,
+ isLoading: PropTypes.bool.isRequired,
+ hasMore: PropTypes.bool.isRequired,
+ local: PropTypes.bool,
};
- handleHeaderClick = () => {
- this.column.scrollTop();
- }
-
- setRef = c => {
- this.column = c;
- }
-
componentDidMount () {
- const { dispatch } = this.props;
+ this._connect();
+ }
- dispatch(expandPublicTimeline());
- this.disconnect = dispatch(connectPublicStream());
+ componentDidUpdate (prevProps) {
+ if (prevProps.local !== this.props.local) {
+ this._disconnect();
+ this._connect();
+ }
}
componentWillUnmount () {
+ this._disconnect();
+ }
+
+ _connect () {
+ const { dispatch, local } = this.props;
+
+ dispatch(local ? expandCommunityTimeline() : expandPublicTimeline());
+ this.disconnect = dispatch(local ? connectCommunityStream() : connectPublicStream());
+ }
+
+ _disconnect () {
if (this.disconnect) {
this.disconnect();
this.disconnect = null;
@@ -44,27 +61,48 @@ export default class PublicTimeline extends React.PureComponent {
}
handleLoadMore = maxId => {
- this.props.dispatch(expandPublicTimeline({ maxId }));
+ const { dispatch, local } = this.props;
+ dispatch(local ? expandCommunityTimeline({ maxId }) : expandPublicTimeline({ maxId }));
}
+ setRef = c => {
+ this.masonry = c;
+ }
+
+ handleHeightChange = debounce(() => {
+ if (!this.masonry) {
+ return;
+ }
+
+ this.masonry.forcePack();
+ }, 50)
+
render () {
- const { intl } = this.props;
+ const { statusIds, hasMore, isLoading } = this.props;
+
+ const sizes = [
+ { columns: 1, gutter: 0 },
+ { mq: '415px', columns: 1, gutter: 10 },
+ { mq: '640px', columns: 2, gutter: 10 },
+ { mq: '960px', columns: 3, gutter: 10 },
+ { mq: '1255px', columns: 3, gutter: 10 },
+ ];
+
+ const loader = (isLoading && statusIds.isEmpty()) ? : undefined;
return (
-
-
-
-
-
+
+ {statusIds.map(statusId => (
+
+
+
+ )).toArray()}
+
);
}
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
index 373532e20ec..e78f16c5486 100644
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js
+++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
@@ -23,7 +23,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
};
static propTypes = {
- status: ImmutablePropTypes.map.isRequired,
+ status: ImmutablePropTypes.map,
settings: ImmutablePropTypes.map.isRequired,
onOpenMedia: PropTypes.func.isRequired,
onOpenVideo: PropTypes.func.isRequired,
diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss
index 329482458c0..7a457600e67 100644
--- a/app/javascript/flavours/glitch/styles/about.scss
+++ b/app/javascript/flavours/glitch/styles/about.scss
@@ -193,6 +193,7 @@ $small-breakpoint: 960px;
}
strong {
+ font-family: $font-display, sans-serif;
font-weight: 500;
font-size: 32px;
line-height: 48px;
@@ -282,168 +283,6 @@ $small-breakpoint: 960px;
}
.landing-page {
- .grid {
- display: grid;
- grid-gap: 10px;
- grid-template-columns: 1fr 2fr;
- grid-auto-columns: 25%;
- grid-auto-rows: max-content;
-
- .column-0 {
- display: none;
- }
-
- .column-1 {
- grid-column: 1;
- grid-row: 1;
- }
-
- .column-2 {
- grid-column: 2;
- grid-row: 1;
- }
-
- .column-3 {
- grid-column: 3;
- grid-row: 1 / 3;
- }
-
- .column-4 {
- grid-column: 1 / 3;
- grid-row: 2;
- }
- }
-
- @media screen and (max-width: $small-breakpoint) {
- .grid {
- grid-template-columns: 40% 60%;
-
- .column-0 {
- display: none;
- }
-
- .column-1 {
- grid-column: 1;
- grid-row: 1;
-
- &.non-preview .landing-page__forms {
- height: 100%;
- }
- }
-
- .column-2 {
- grid-column: 2;
- grid-row: 1 / 3;
-
- &.non-preview {
- grid-column: 2;
- grid-row: 1;
- }
- }
-
- .column-3 {
- grid-column: 1;
- grid-row: 2 / 4;
- }
-
- .column-4 {
- grid-column: 2;
- grid-row: 3;
-
- &.non-preview {
- grid-column: 1 / 3;
- grid-row: 2;
- }
- }
- }
- }
-
- @media screen and (max-width: $column-breakpoint) {
- .grid {
- grid-template-columns: 100%;
-
- .column-0 {
- display: block;
- grid-column: 1;
- grid-row: 1;
- }
-
- .column-1 {
- grid-column: 1;
- grid-row: 3;
-
- .brand {
- display: none;
- }
- }
-
- .column-2 {
- grid-column: 1;
- grid-row: 2;
-
- .landing-page__logo,
- .landing-page__call-to-action {
- display: none;
- }
-
- &.non-preview {
- grid-column: 1;
- grid-row: 2;
- }
- }
-
- .column-3 {
- grid-column: 1;
- grid-row: 5;
- }
-
- .column-4 {
- grid-column: 1;
- grid-row: 4;
-
- &.non-preview {
- grid-column: 1;
- grid-row: 4;
- }
- }
- }
- }
-
- .column-flex {
- display: flex;
- flex-direction: column;
- }
-
- .separator-or {
- position: relative;
- margin: 40px 0;
- text-align: center;
-
- &::before {
- content: "";
- display: block;
- width: 100%;
- height: 0;
- border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
- position: absolute;
- top: 50%;
- left: 0;
- }
-
- span {
- display: inline-block;
- background: $ui-base-color;
- font-size: 12px;
- font-weight: 500;
- color: $darker-text-color;
- text-transform: uppercase;
- position: relative;
- z-index: 1;
- padding: 0 8px;
- cursor: default;
- }
- }
-
p,
li {
font-family: $font-sans-serif, sans-serif;
@@ -460,28 +299,6 @@ $small-breakpoint: 960px;
}
}
- .closed-registrations-message {
- margin-top: 20px;
-
- &,
- p {
- text-align: center;
- font-size: 12px;
- line-height: 18px;
- color: $darker-text-color;
- margin-bottom: 0;
-
- a {
- color: $highlight-text-color;
- text-decoration: underline;
- }
- }
-
- p:last-child {
- margin-bottom: 0;
- }
- }
-
em {
display: inline;
margin: 0;
@@ -595,187 +412,6 @@ $small-breakpoint: 960px;
}
}
- .container-alt {
- width: 100%;
- box-sizing: border-box;
- max-width: 800px;
- margin: 0 auto;
- word-wrap: break-word;
- }
-
- .header-wrapper {
- padding-top: 15px;
- background: $ui-base-color;
- background: linear-gradient(150deg, lighten($ui-base-color, 8%), $ui-base-color);
- position: relative;
-
- &.compact {
- background: $ui-base-color;
- padding-bottom: 15px;
-
- .hero .heading {
- padding-bottom: 20px;
- font-family: $font-sans-serif, sans-serif;
- font-size: 16px;
- font-weight: 400;
- font-size: 16px;
- line-height: 30px;
- color: $darker-text-color;
-
- a {
- color: $highlight-text-color;
- text-decoration: underline;
- }
- }
- }
- }
-
- .brand {
- a {
- padding-left: 0;
- padding-right: 0;
- color: $white;
- }
-
- img {
- height: 32px;
- position: relative;
- top: 4px;
- left: -10px;
- }
- }
-
- .header {
- line-height: 30px;
- overflow: hidden;
-
- .container-alt {
- display: flex;
- justify-content: space-between;
- }
-
- .links {
- position: relative;
- z-index: 4;
-
- a {
- display: flex;
- justify-content: center;
- align-items: center;
- color: $darker-text-color;
- text-decoration: none;
- padding: 12px 16px;
- line-height: 32px;
- font-family: $font-display, sans-serif;
- font-weight: 500;
- font-size: 14px;
-
- &:hover {
- color: $secondary-text-color;
- }
- }
-
- ul {
- list-style: none;
- margin: 0;
-
- li {
- display: inline-block;
- vertical-align: bottom;
- margin: 0;
-
- &:first-child a {
- padding-left: 0;
- }
-
- &:last-child a {
- padding-right: 0;
- }
- }
- }
- }
-
- .hero {
- margin-top: 50px;
- align-items: center;
- position: relative;
-
- .heading {
- position: relative;
- z-index: 4;
- padding-bottom: 150px;
- }
-
- .simple_form,
- .closed-registrations-message {
- background: darken($ui-base-color, 4%);
- width: 280px;
- padding: 15px 20px;
- border-radius: 4px 4px 0 0;
- line-height: initial;
- position: relative;
- z-index: 4;
-
- .actions {
- margin-bottom: 0;
-
- button,
- .button,
- .block-button {
- margin-bottom: 0;
- }
- }
- }
-
- .closed-registrations-message {
- min-height: 330px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- }
- }
- }
-
- .about-short {
- background: darken($ui-base-color, 4%);
- padding: 50px 0 30px;
- font-family: $font-sans-serif, sans-serif;
- font-size: 16px;
- font-weight: 400;
- font-size: 16px;
- line-height: 30px;
- color: $darker-text-color;
-
- a {
- color: $highlight-text-color;
- text-decoration: underline;
- }
- }
-
- &.alternative {
- padding: 10px 0;
-
- .brand {
- text-align: center;
- padding: 30px 0;
- margin-bottom: 10px;
-
- img {
- position: static;
- padding: 10px 0;
- }
-
- @media screen and (max-width: $small-breakpoint) {
- padding: 15px 0;
- }
-
- @media screen and (max-width: $column-breakpoint) {
- padding: 0;
- margin-bottom: -10px;
- }
- }
- }
-
&__information,
&__forms {
padding: 20px;
@@ -970,215 +606,7 @@ $small-breakpoint: 960px;
}
}
- &__forms {
- height: 100%;
-
- @media screen and (max-width: $small-breakpoint) {
- height: auto;
- }
-
- @media screen and (max-width: $column-breakpoint) {
- background: transparent;
- box-shadow: none;
- padding: 0 20px;
- margin-top: 30px;
- margin-bottom: 40px;
-
- .separator-or {
- span {
- background: darken($ui-base-color, 8%);
- }
- }
- }
-
- hr {
- margin: 40px 0;
- }
-
- .button {
- display: block;
- }
-
- .subtle-hint a {
- text-decoration: none;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- }
- }
- }
-
- #mastodon-timeline {
- display: flex;
- -webkit-overflow-scrolling: touch;
- -ms-overflow-style: -ms-autohiding-scrollbar;
- font-family: $font-sans-serif, sans-serif;
- font-size: 13px;
- line-height: 18px;
- font-weight: 400;
- color: $primary-text-color;
- width: 100%;
- flex: 1 1 auto;
- overflow: hidden;
- height: 100%;
-
- .column-header {
- color: inherit;
- font-family: inherit;
- font-size: 16px;
- line-height: inherit;
- font-weight: inherit;
- margin: 0;
- padding: 0;
- }
-
- .column {
- padding: 0;
- border-radius: 4px;
- overflow: hidden;
- width: 100%;
- }
-
- .scrollable {
- height: 400px;
- }
-
- p {
- font-size: inherit;
- line-height: inherit;
- font-weight: inherit;
- color: $primary-text-color;
- margin-bottom: 20px;
-
- &:last-child {
- margin-bottom: 0;
- }
-
- a {
- color: $secondary-text-color;
- text-decoration: none;
- }
- }
-
- .attachment-list__list {
- margin-left: 0;
- list-style: none;
-
- li {
- font-size: inherit;
- line-height: inherit;
- font-weight: inherit;
- margin-bottom: 0;
-
- a {
- color: $dark-text-color;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
- }
- }
- }
-
- @media screen and (max-width: $column-breakpoint) {
- display: none;
- }
- }
-
- &__features {
- & > p {
- padding-right: 60px;
- }
-
- .features-list {
- margin: 40px 0;
- margin-top: 30px;
- }
-
- &__action {
- text-align: center;
- }
- }
-
- .features-list {
- .features-list__row {
- display: flex;
- padding: 10px 0;
- justify-content: space-between;
-
- .visual {
- flex: 0 0 auto;
- display: flex;
- align-items: center;
- margin-left: 15px;
-
- .fa {
- display: block;
- color: $darker-text-color;
- font-size: 48px;
- }
- }
-
- .text {
- font-size: 16px;
- line-height: 30px;
- color: $darker-text-color;
-
- h6 {
- font-size: inherit;
- line-height: inherit;
- margin-bottom: 0;
- }
- }
- }
-
- @media screen and (min-width: $small-breakpoint) {
- display: grid;
- grid-gap: 30px;
- grid-template-columns: 1fr 1fr;
- grid-auto-columns: 50%;
- grid-auto-rows: max-content;
- }
- }
-
- .footer-links {
- padding-bottom: 50px;
- text-align: right;
- color: $dark-text-color;
-
- p {
- font-size: 14px;
- }
-
- a {
- color: inherit;
- text-decoration: underline;
- }
- }
-
- &__footer {
- margin-top: 10px;
- text-align: center;
- color: $dark-text-color;
-
- p {
- font-size: 14px;
-
- a {
- color: inherit;
- text-decoration: underline;
- }
- }
- }
-
@media screen and (max-width: 840px) {
- .container-alt {
- padding: 0 20px;
- }
-
.information-board {
.container-alt {
padding-right: 20px;
@@ -1214,109 +642,217 @@ $small-breakpoint: 960px;
.features .container-alt {
display: block;
}
-
- .header {
- .links {
- padding-top: 15px;
- background: darken($ui-base-color, 4%);
-
- a {
- padding: 12px 8px;
- }
-
- .nav {
- display: flex;
- flex-flow: row wrap;
- justify-content: space-around;
- }
-
- .brand img {
- left: 0;
- top: 0;
- }
- }
-
- .hero {
- margin-top: 30px;
- padding: 0;
-
- .heading {
- padding: 30px 20px;
- text-align: center;
- }
-
- .simple_form,
- .closed-registrations-message {
- background: darken($ui-base-color, 8%);
- width: 100%;
- border-radius: 0;
- box-sizing: border-box;
- }
- }
- }
}
.cta {
margin: 20px;
}
+}
- &.tag-page {
- @media screen and (max-width: $column-breakpoint) {
+.landing {
+ margin-bottom: 100px;
+
+ @media screen and (max-width: 738px) {
+ margin-bottom: 0;
+ }
+
+ &__brand {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 100px;
+
+ img {
+ height: 52px;
+ }
+
+ @media screen and (max-width: $no-gap-breakpoint) {
padding: 0;
+ margin-bottom: 30px;
+ }
+ }
- .container {
- padding: 0;
+ .directory {
+ margin-top: 30px;
+ background: transparent;
+ box-shadow: none;
+ border-radius: 0;
+ }
+
+ .hero-widget {
+ margin-top: 30px;
+ margin-bottom: 0;
+
+ h4 {
+ padding: 10px;
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: 13px;
+ color: $darker-text-color;
+ }
+
+ &__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%;
}
+ }
- #mastodon-timeline {
+ .account {
+ padding: 10px 0;
+ border-bottom: 0;
+
+ .account__display-name {
display: flex;
- height: 100vh;
- border-radius: 0;
+ align-items: center;
+ }
+
+ .account__avatar {
+ width: 44px;
+ height: 44px;
+ background-size: 44px 44px;
}
}
- .grid {
- @media screen and (min-width: $small-breakpoint) {
- grid-template-columns: 33% 67%;
+ &__counter {
+ padding: 10px;
+
+ strong {
+ font-family: $font-display, sans-serif;
+ font-size: 15px;
+ font-weight: 700;
+ display: block;
}
- .column-2 {
- grid-column: 2;
+ span {
+ font-size: 14px;
+ color: $darker-text-color;
+ }
+ }
+ }
+
+ .simple_form .user_agreement .label_input > label {
+ font-weight: 400;
+ color: $darker-text-color;
+ }
+
+ .simple_form p.lead {
+ color: $darker-text-color;
+ font-size: 15px;
+ line-height: 20px;
+ font-weight: 400;
+ margin-bottom: 25px;
+ }
+
+ &__grid {
+ max-width: 960px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: minmax(0, 50%) minmax(0, 50%);
+ grid-gap: 30px;
+
+ @media screen and (max-width: 738px) {
+ grid-template-columns: minmax(0, 100%);
+ grid-gap: 10px;
+
+ &__column-login {
grid-row: 1;
- }
- }
+ display: flex;
+ flex-direction: column;
- .brand {
- text-align: unset;
- padding: 0;
-
- img {
- height: 48px;
- width: auto;
- }
- }
-
- .cta {
- margin: 0;
-
- .button {
- margin-right: 4px;
- }
- }
-
- @media screen and (max-width: $column-breakpoint) {
- .grid {
- grid-gap: 0;
-
- .column-1 {
- grid-column: 1;
- grid-row: 1;
+ .box-widget {
+ order: 2;
+ flex: 0 0 auto;
}
- .column-2 {
- display: none;
+ .hero-widget {
+ margin-top: 0;
+ margin-bottom: 10px;
+ order: 1;
+ flex: 0 0 auto;
+ }
+ }
+
+ &__column-registration {
+ grid-row: 2;
+ }
+
+ .directory {
+ margin-top: 10px;
+ }
+ }
+
+ @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%);
+ }
+
+ .directory {
+ margin-top: 0;
+
+ &__tag {
+ margin-bottom: 0;
+
+ & > a,
+ & > div {
+ border-radius: 0;
+ box-shadow: none;
+ }
+
+ &:last-child {
+ border-bottom: 0;
+ }
}
}
}
}
}
+
+.brand {
+ position: relative;
+ text-decoration: none;
+}
+
+.brand__tagline {
+ display: block;
+ position: absolute;
+ bottom: -10px;
+ left: 50px;
+ width: 300px;
+ color: $ui-primary-color;
+ text-decoration: none;
+ font-size: 14px;
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ position: static;
+ width: auto;
+ margin-top: 20px;
+ color: $dark-text-color;
+ }
+}
+
diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss
index bab982706fd..6051c1d00c2 100644
--- a/app/javascript/flavours/glitch/styles/forms.scss
+++ b/app/javascript/flavours/glitch/styles/forms.scss
@@ -68,6 +68,17 @@ code {
top: 2px;
left: 0;
}
+
+ label a {
+ color: $highlight-text-color;
+ text-decoration: underline;
+
+ &:hover,
+ &:active,
+ &:focus {
+ text-decoration: none;
+ }
+ }
}
}
@@ -305,7 +316,7 @@ code {
box-shadow: none;
}
- &:focus:invalid {
+ &:focus:invalid:not(:placeholder-shown) {
border-color: lighten($error-red, 12%);
}
@@ -346,6 +357,10 @@ code {
}
}
+ .input.disabled {
+ opacity: 0.5;
+ }
+
.actions {
margin-top: 30px;
display: flex;
@@ -392,6 +407,10 @@ code {
background-color: darken($ui-highlight-color, 5%);
}
+ &:disabled:hover {
+ background-color: $ui-primary-color;
+ }
+
&.negative {
background: $error-value-color;
diff --git a/app/javascript/flavours/glitch/styles/widgets.scss b/app/javascript/flavours/glitch/styles/widgets.scss
index 1eaf30c5b37..645192ea4ea 100644
--- a/app/javascript/flavours/glitch/styles/widgets.scss
+++ b/app/javascript/flavours/glitch/styles/widgets.scss
@@ -295,6 +295,11 @@
cursor: default;
}
+ &.disabled > div {
+ opacity: 0.5;
+ cursor: default;
+ }
+
h4 {
flex: 1 1 auto;
font-size: 18px;
diff --git a/app/views/public_timelines/show.html.haml b/app/views/public_timelines/show.html.haml
index 913d5d855d2..f80157c67a5 100644
--- a/app/views/public_timelines/show.html.haml
+++ b/app/views/public_timelines/show.html.haml
@@ -4,7 +4,6 @@
- content_for :header_tags do
%meta{ name: 'robots', content: 'noindex' }/
%script#initial-state{ type: 'application/json' }!= json_escape(@initial_state_json)
- = javascript_pack_tag 'about', integrity: true, crossorigin: 'anonymous'
.page-header
%h1= t('about.see_whats_happening')