From 0d5dfad8cc9b3ad1a2023d71dba81fcd48183eab Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 30 Sep 2022 12:59:19 -0500 Subject: [PATCH] Move StatusContent css into status-content.css --- app/soapbox/components/status-content.css | 60 +++++++++ app/soapbox/components/status_content.tsx | 15 ++- .../normalizers/soapbox/soapbox_config.ts | 1 + app/soapbox/utils/greentext.ts | 2 +- app/styles/basics.scss | 8 -- app/styles/components/status.scss | 122 ------------------ tailwind.config.js | 6 + 7 files changed, 76 insertions(+), 138 deletions(-) create mode 100644 app/soapbox/components/status-content.css diff --git a/app/soapbox/components/status-content.css b/app/soapbox/components/status-content.css new file mode 100644 index 000000000..1c9e9dff9 --- /dev/null +++ b/app/soapbox/components/status-content.css @@ -0,0 +1,60 @@ +.status-content strong { + @apply font-bold; +} + +.status-content em { + @apply italic; +} + +.status-content ul, +.status-content ol { + @apply pl-10 mb-5; +} + +.status-content ul { + @apply list-disc list-outside; +} + +.status-content ol { + @apply list-decimal list-outside; +} + +.status-content blockquote { + @apply py-1 pl-4 mb-5 border-l-4 border-solid border-gray-400 text-gray-500 dark:text-gray-400; +} + +.status-content code { + @apply cursor-text font-mono; +} + +.status-content p > code, +.status-content pre { + @apply bg-gray-100 dark:bg-primary-800; +} + +/* Inline code */ +.status-content p > code { + @apply py-0.5 px-1 rounded-sm; +} + +/* Code block */ +.status-content pre { + @apply py-2 px-3 mb-5 leading-6 overflow-x-auto rounded-md break-all; +} + +.status-content pre:last-child { + @apply mb-0; +} + +/* Markdown images */ +.status-content img:not(.emojione):not([width][height]) { + @apply w-full h-72 object-contain rounded-lg overflow-hidden my-5 block; +} + +.status-content .big-emoji img.emojione { + @apply inline w-9 h-9 p-1; +} + +.status-content .status-link { + @apply hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue; +} diff --git a/app/soapbox/components/status_content.tsx b/app/soapbox/components/status_content.tsx index 2a8972315..468cb6d72 100644 --- a/app/soapbox/components/status_content.tsx +++ b/app/soapbox/components/status_content.tsx @@ -11,6 +11,7 @@ import { onlyEmoji as isOnlyEmoji } from 'soapbox/utils/rich_content'; import { isRtl } from '../rtl'; import Poll from './polls/poll'; +import './status-content.css'; import type { Status, Mention } from 'soapbox/types/entities'; @@ -28,7 +29,7 @@ interface IReadMoreButton { /** Button to expand a truncated status (due to too much content) */ const ReadMoreButton: React.FC = ({ onClick }) => ( - @@ -216,11 +217,11 @@ const StatusContent: React.FC = ({ status, expanded = false, onE const content = { __html: parsedHtml }; const spoilerContent = { __html: status.spoilerHtml }; const directionStyle: React.CSSProperties = { direction: 'ltr' }; - const className = classNames('status__content', { - 'status__content--with-action': onClick, + const className = classNames('status-content', { + 'cursor-pointer': onClick, 'status__content--with-spoiler': status.spoiler_text.length > 0, - 'status__content--collapsed': collapsed, - 'status__content--big': onlyEmoji, + 'max-h-[300px]': collapsed, + 'leading-normal big-emoji': onlyEmoji, }); if (isRtl(status.search_index)) { @@ -286,8 +287,8 @@ const StatusContent: React.FC = ({ status, expanded = false, onE ref={node} tabIndex={0} key='content' - className={classNames('status__content', { - 'status__content--big': onlyEmoji, + className={classNames('status-content', { + 'leading-normal big-emoji': onlyEmoji, })} style={directionStyle} dangerouslySetInnerHTML={content} diff --git a/app/soapbox/normalizers/soapbox/soapbox_config.ts b/app/soapbox/normalizers/soapbox/soapbox_config.ts index 0e6b5c280..75426e6c0 100644 --- a/app/soapbox/normalizers/soapbox/soapbox_config.ts +++ b/app/soapbox/normalizers/soapbox/soapbox_config.ts @@ -44,6 +44,7 @@ const DEFAULT_COLORS = ImmutableMap({ 900: '#7f1d1d', }), 'sea-blue': '#2feecc', + 'greentext': '#789922', }); export const PromoPanelItemRecord = ImmutableRecord({ diff --git a/app/soapbox/utils/greentext.ts b/app/soapbox/utils/greentext.ts index 52a25e2be..eab93b22a 100644 --- a/app/soapbox/utils/greentext.ts +++ b/app/soapbox/utils/greentext.ts @@ -11,7 +11,7 @@ export const addGreentext = (html: string): string => { .replace(/@\w+/gi, '') // remove mentions (even failed ones) .trim() .startsWith('>')) { - return `${string}`; + return `${string}`; } else { return string; } diff --git a/app/styles/basics.scss b/app/styles/basics.scss index 9db26912a..bc3d64ec3 100644 --- a/app/styles/basics.scss +++ b/app/styles/basics.scss @@ -99,14 +99,6 @@ noscript { } } -.floating-link { - @apply w-full h-full inset-0 absolute z-10; -} - -.greentext { - color: #789922; -} - // Virtuoso empty placeholder fix. // https://gitlab.com/petyosi/soapbox-fe/-/commit/1e22c39934b60e5e186de804060ecfdf1955b506 div[data-viewport-type="window"] { diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss index 83670fc38..c46dfc7ee 100644 --- a/app/styles/components/status.scss +++ b/app/styles/components/status.scss @@ -1,125 +1,3 @@ -.status__content { - p, - li { - strong { - font-weight: bold; - } - } - - p, - li { - em { - font-style: italic; - } - } - - ul, - ol { - @apply pl-10; - } - - ul { - list-style: disc outside none; - } - - ol { - list-style: decimal outside none; - } - - blockquote { - @apply py-1 pl-4 border-l-4 border-solid border-gray-400 text-gray-500 dark:text-gray-400; - } - - code { - font-family: 'Roboto Mono', monospace; - cursor: text; - } - - p > code, - pre { - @apply bg-gray-100 dark:bg-primary-800; - } - - /* Inline code */ - p > code { - padding: 2px 4px; - border-radius: 4px; - } - - /* Code block */ - pre { - line-height: 1.6em; - overflow-x: auto; - border-radius: 6px; - padding: 8px 12px; - margin-bottom: 20px; - word-break: break-all; - - &:last-child { - margin-bottom: 0; - } - } - - /* Markdown images */ - img:not(.emojione):not([width][height]) { - width: 100%; - height: 285.188px; - object-fit: contain; - background: var(--background-color); - border-radius: 4px; - overflow: hidden; - margin: 20px 0; - display: block; - } - - &--big { - line-height: normal !important; - - img.emojione { - display: inline; - width: 36px; - height: 36px; - padding: 5px; - } - } - - &--quote { - ul, - ol { - @apply pl-4; - } - - blockquote { - @apply pl-2; - } - } -} - -.status__content > ul, -.status__content > ol { - margin-bottom: 20px; -} - -.status__content > blockquote { - margin-bottom: 20px; -} - -.status__content--with-action { - cursor: pointer; -} - -.status__content.status__content--collapsed { - max-height: 20px * 15; // 15 lines is roughly above 500 characters -} - -.status__content__read-more-button { - @apply flex items-center text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline; -} - -.status-link { - @apply hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue; -} - .status { @apply min-h-[54px] cursor-default; diff --git a/tailwind.config.js b/tailwind.config.js index ff34b2da3..d24150dbf 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -35,6 +35,11 @@ module.exports = { 'Segoe UI Symbol', 'Noto Color Emoji', ], + 'mono': [ + 'Roboto Mono', + 'ui-monospace', + 'mono', + ], }, colors: parseColorMatrix({ // Define color matrix (of available colors) @@ -49,6 +54,7 @@ module.exports = { 'gradient-start': true, 'gradient-end': true, 'sea-blue': true, + 'greentext': true, }), animation: { 'sonar-scale-4': 'sonar-scale-4 3s linear infinite',