From 42dd4f1653d0fc856758fde30ffc07b88b559578 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sat, 23 Sep 2023 12:21:38 +0800 Subject: [PATCH 1/3] refactor(about-thread): fill in real data --- .../thread/AboutThread/LabelList.tsx | 22 ++++++ .../thread/AboutThread/MediaReports.tsx | 49 +++++++++++++ src/containers/thread/AboutThread/Sidebar.tsx | 70 ++++++++----------- .../thread/AboutThread/styles/label_list.ts | 19 +++++ .../AboutThread/styles/media_reports.ts | 54 ++++++++++++++ .../thread/AboutThread/styles/sidebar.ts | 25 ++----- src/hooks/useAboutInfo.ts | 34 +++++++++ src/schemas/fragments/base.ts | 16 +++++ src/schemas/fragments/index.ts | 2 + src/schemas/pages/community.ts | 26 +++---- src/stores/Model/Community.ts | 1 + src/widgets/Linker/index.tsx | 9 +-- src/widgets/Linker/styles/index.ts | 4 +- utils/i18n/index.js | 11 +++ utils/ssr.js | 2 + 15 files changed, 262 insertions(+), 82 deletions(-) create mode 100644 src/containers/thread/AboutThread/LabelList.tsx create mode 100644 src/containers/thread/AboutThread/MediaReports.tsx create mode 100644 src/containers/thread/AboutThread/styles/label_list.ts create mode 100644 src/containers/thread/AboutThread/styles/media_reports.ts create mode 100644 src/hooks/useAboutInfo.ts diff --git a/src/containers/thread/AboutThread/LabelList.tsx b/src/containers/thread/AboutThread/LabelList.tsx new file mode 100644 index 000000000..bc6ac8fbe --- /dev/null +++ b/src/containers/thread/AboutThread/LabelList.tsx @@ -0,0 +1,22 @@ +import { FC } from 'react' + +import type { TSpace } from '@/spec' +import { Trans } from '@/i18n' + +import { Wrapper, Label } from './styles/label_list' + +type TProps = { + items: string[] +} & TSpace + +const LabelList: FC = ({ items, ...restProps }) => { + return ( + + {items.map((item: string) => ( + + ))} + + ) +} + +export default LabelList diff --git a/src/containers/thread/AboutThread/MediaReports.tsx b/src/containers/thread/AboutThread/MediaReports.tsx new file mode 100644 index 000000000..31f3c749e --- /dev/null +++ b/src/containers/thread/AboutThread/MediaReports.tsx @@ -0,0 +1,49 @@ +import { FC } from 'react' + +import type { TMediaReport } from '@/spec' +import { sortByIndex } from '@/helper' + +import { + Wrapper, + PreviewWrapper, + Brand, + Favicon, + SiteName, + Title, + ArrowBox, + ArrowIcon, +} from './styles/media_reports' + +type TProps = { + items: TMediaReport[] +} + +const MediaReports: FC = ({ items }) => { + return ( + + {/* @ts-ignore */} + {sortByIndex(items).map((item: TMediaReport) => { + const { index, favicon, title, url, siteName } = item + if (!title) return null + + return ( + + + + {siteName} + + + + {title} + + + + + + ) + })} + + ) +} + +export default MediaReports diff --git a/src/containers/thread/AboutThread/Sidebar.tsx b/src/containers/thread/AboutThread/Sidebar.tsx index c6f581dd9..69044c8e2 100755 --- a/src/containers/thread/AboutThread/Sidebar.tsx +++ b/src/containers/thread/AboutThread/Sidebar.tsx @@ -1,62 +1,52 @@ -import { FC, memo } from 'react' +import { FC } from 'react' +import { observer } from 'mobx-react' +import { isEmpty } from 'ramda' -import { DEME_SOCIALS } from '@/constant/social' +import useAboutInfo from '@/hooks/useAboutInfo' -import { Br, Divider } from '@/widgets/Common' +import { Divider } from '@/widgets/Common' import Linker from '@/widgets/Linker' - import SocialList from '@/widgets/SocialList' -import { - Wrapper, - MobileWrapper, - Block, - Title, - Reports, - ReportsArticle, - Press, - Desc, -} from './styles/sidebar' +import LabelList from './LabelList' +import MediaReports from './MediaReports' + +import { Wrapper, MobileWrapper, Block, Title, Desc } from './styles/sidebar' const Content = () => { + const { homepage, cities, techstacks, socialLinks, mediaReports } = useAboutInfo() + + const noMediaReports = mediaReports.length <= 1 && !mediaReports[0].title + return ( <> - + 官方主页 - + - + 关注我们 - + - - 技术栈 - Typescript, Elixir - - + 所在地 - 成都, 厦门 + + + - - 链接 - 喜马拉雅 + + 技术栈 + + + - - + {!noMediaReports && } + 媒体报道 -
- - 36kr - 新一代xxx一体化协作平台「XXX」获1000万元Pre - -
- - 科技周刊 - 这个平台太酷了 - + ) @@ -76,4 +66,4 @@ const Sidebar: FC = () => { ) } -export default memo(Sidebar) +export default observer(Sidebar) diff --git a/src/containers/thread/AboutThread/styles/label_list.ts b/src/containers/thread/AboutThread/styles/label_list.ts new file mode 100644 index 000000000..bcc63dfb8 --- /dev/null +++ b/src/containers/thread/AboutThread/styles/label_list.ts @@ -0,0 +1,19 @@ +import styled from 'styled-components' + +import type { TSpace } from '@/spec' + +import css, { theme } from '@/css' + +export const Wrapper = styled.div` + ${css.rowWrap('align-center')}; + gap: 0 8px; + ${(props) => css.spaceMargins(props)}; +` +export const Label = styled.div` + border: 1px solid; + color: ${theme('article.title')}; + border-color: ${theme('divider')}; + padding: 1px 8px; + font-size: 13px; + border-radius: 8px; +` diff --git a/src/containers/thread/AboutThread/styles/media_reports.ts b/src/containers/thread/AboutThread/styles/media_reports.ts new file mode 100644 index 000000000..2b5224569 --- /dev/null +++ b/src/containers/thread/AboutThread/styles/media_reports.ts @@ -0,0 +1,54 @@ +import styled from 'styled-components' +import Link from 'next/link' + +import css, { theme } from '@/css' +import ArrowSVG from '@/icons/ArrowUpRight' +import Img from '@/Img' + +export const Wrapper = styled.div`` + +export const PreviewWrapper = styled.div` + ${css.row('align-center')}; + width: 300px; + margin-bottom: 10px; + margin-top: 15px; +` +export const Brand = styled.div` + ${css.row('align-center')}; + background: ${theme('hoverBg')}; + padding: 2px 5px; + border-radius: 4px; + margin-right: 8px; +` +export const Favicon = styled(Img)` + ${css.size(16)}; + margin-right: 5px; +` +export const SiteName = styled.div` + color: ${theme('article.digest')}; + font-size: 12px; + word-break: keep-all; +` +export const Title = styled(Link)` + color: ${theme('article.digest')}; + text-decoration: none; + font-size: 14px; + ${css.cutRest('130px')}; + margin-top: -1px; + + &:hover { + text-decoration: underline; + color: ${theme('article.digest')}; + } +` +export const ArrowBox = styled.div` + ${css.size(14)}; + opacity: 0; + ${PreviewWrapper}:hover & { + opacity: 1; + } +` +export const ArrowIcon = styled(ArrowSVG)` + ${css.size(14)}; + fill: ${theme('hint')}; +` diff --git a/src/containers/thread/AboutThread/styles/sidebar.ts b/src/containers/thread/AboutThread/styles/sidebar.ts index 8362b23b3..357c8dbd9 100755 --- a/src/containers/thread/AboutThread/styles/sidebar.ts +++ b/src/containers/thread/AboutThread/styles/sidebar.ts @@ -28,12 +28,14 @@ export const MobileWrapper = styled.div` `}; ` -export const Block = styled.div` +export const Block = styled.div<{ hide?: boolean }>` + display: ${({ hide }) => (hide ? 'none' : 'block')}; + margin-bottom: 20px; ` export const Title = styled.div` - font-size: 14px; + font-size: 13px; color: ${theme('article.digest')}; font-weight: 500; margin-bottom: 10px; @@ -44,22 +46,3 @@ export const Desc = styled.div` color: ${theme('article.digest')}; line-height: 1.6; ` -export const Reports = styled.div` - ${css.row('align-center')}; -` -export const ReportsArticle = styled(Desc)` - ${css.lineClamp(1)}; -` -export const Press = styled.div` - /* color: #ec633f; */ - border: 1px solid; - border-color: ${theme('article.info')}; - color: ${theme('article.info')}; - font-weight: 600; - padding: 0 4px; - border-radius: 4px; - font-size: 11px; - margin-left: -1px; - margin-right: 8px; - cursor: pointer; -` diff --git a/src/hooks/useAboutInfo.ts b/src/hooks/useAboutInfo.ts new file mode 100644 index 000000000..6b4ad5498 --- /dev/null +++ b/src/hooks/useAboutInfo.ts @@ -0,0 +1,34 @@ +import { useContext } from 'react' +import { MobXProviderContext } from 'mobx-react' + +import type { TSocialItem, TMediaReport } from '@/spec' + +type TABoutInfo = { + homepage: string | null + cities: string[] + techstacks: string[] + socialLinks: TSocialItem[] + mediaReports: TMediaReport[] +} + +/** + * NOTE: should use observer to wrap the component who use this hook + */ +const useAboutInfo = (): TABoutInfo => { + const { store } = useContext(MobXProviderContext) + + if (store === null) { + throw new Error('Store cannot be null, please add a context provider') + } + const { homepage, city, techstack, socialLinks, mediaReports } = store.dashboardThread + + return { + homepage, + cities: city.split(','), + techstacks: techstack.split(','), + socialLinks, + mediaReports, + } +} + +export default useAboutInfo diff --git a/src/schemas/fragments/base.ts b/src/schemas/fragments/base.ts index 8475ad66f..7e1f9021d 100755 --- a/src/schemas/fragments/base.ts +++ b/src/schemas/fragments/base.ts @@ -42,6 +42,22 @@ export const wallpaper = ` hasBlur hasShadow ` +export const seo = ` + seoEnable + ogSiteName + ogTitle + ogDescription + ogUrl + ogImage + twTitle + twDescription + twUrl + twCard + twSite + twImage + twImageWidth + twImageHeight +` export const tag = ` id title diff --git a/src/schemas/fragments/index.ts b/src/schemas/fragments/index.ts index 9906be386..239553d7f 100755 --- a/src/schemas/fragments/index.ts +++ b/src/schemas/fragments/index.ts @@ -30,6 +30,7 @@ import { getUndoUpvoteSchema, customLink, wallpaper, + seo, } from './base' import { pagedPosts } from './paged' @@ -42,6 +43,7 @@ const F = { author, customLink, wallpaper, + seo, tag, pagedPosts, user, diff --git a/src/schemas/pages/community.ts b/src/schemas/pages/community.ts index 668e2583a..c8ca0ef60 100755 --- a/src/schemas/pages/community.ts +++ b/src/schemas/pages/community.ts @@ -44,6 +44,16 @@ export const community = ` homepage logo desc + city + techstack + introduction + } + mediaReports { + url + title + siteName + favicon + index } wallpaper { ${F.wallpaper} @@ -54,26 +64,12 @@ export const community = ` footerLinks { ${F.customLink} } - socialLinks { type link } seo { - seoEnable - ogSiteName - ogTitle - ogDescription - ogUrl - ogImage - twTitle - twDescription - twUrl - twCard - twSite - twImage - twImageWidth - twImageHeight + ${F.seo} } nameAlias { slug diff --git a/src/stores/Model/Community.ts b/src/stores/Model/Community.ts index c93fb2720..d41c1938a 100755 --- a/src/stores/Model/Community.ts +++ b/src/stores/Model/Community.ts @@ -33,6 +33,7 @@ export const Moderator = T.model('Moderator', { // TODO: const DashboardBaseInfo = T.model('DashboardBaseInfo', { homepage: T.opt(T.str, ''), + favicon: T.opt(T.str, ''), }) // TODO: diff --git a/src/widgets/Linker/index.tsx b/src/widgets/Linker/index.tsx index fe6113cdf..53207d5f4 100755 --- a/src/widgets/Linker/index.tsx +++ b/src/widgets/Linker/index.tsx @@ -10,6 +10,7 @@ import type { TSpace } from '@/spec' import { buildLog } from '@/logger' +import { prettyURL } from '@/fmt' import Tooltip from '@/widgets/Tooltip' import { Wrapper, LinkIcon, LinkOutIcon, Source, PopHint } from './styles' @@ -40,18 +41,18 @@ const Linker: FC = ({ return ( - {external ? : } - + + {/* {!external ? : } */} {src}} placement="bottom" hideOnClick={false} - delay={500} + delay={300} offset={[-10, 0] as [number, number]} noPadding > - {src} + {prettyURL(src)} diff --git a/src/widgets/Linker/styles/index.ts b/src/widgets/Linker/styles/index.ts index 2c154aa18..3c8b1fa20 100755 --- a/src/widgets/Linker/styles/index.ts +++ b/src/widgets/Linker/styles/index.ts @@ -26,10 +26,10 @@ export const Hint = styled.div` margin-top: 2px; ` export const LinkIcon = styled(LinkSVG)` - ${css.size(15)}; + ${css.size(18)}; + margin-top: 2px; fill: ${theme('article.digest')}; margin-right: 3px; - opacity: 0.6; ` export const LinkOutIcon = styled(LinkOutSVG)` ${css.size(10)}; diff --git a/utils/i18n/index.js b/utils/i18n/index.js index 569306d49..516a2a789 100755 --- a/utils/i18n/index.js +++ b/utils/i18n/index.js @@ -52,6 +52,17 @@ const I18nDict = { WEIBO: '微博', BOSS: 'Boss 直聘', LAGOU: '拉钩', + + // city + chengdu: '成都', + wuhan: '武汉', + beijing: '北京', + shanghai: '上海', + hangzhou: '杭州', + shenzhen: '深圳', + guangzhou: '广州', + suzhou: '苏州', + xian: '西安', } export const Trans = (key) => I18nDict[key] || key diff --git a/utils/ssr.js b/utils/ssr.js index e87a8ebcc..0d65cf109 100755 --- a/utils/ssr.js +++ b/utils/ssr.js @@ -261,6 +261,7 @@ export const ssrParseDashboard = (community) => { baseInfo, headerLinks, footerLinks, + mediaReports, } = dashboard const fieldsObj = removeEmptyValuesFromObject({ @@ -275,6 +276,7 @@ export const ssrParseDashboard = (community) => { headerLinks, footerLinks, moderators, + mediaReports, }) return { From c9ffcc8f8b5e45bf04fdd694581fc065e4cbbd45 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sat, 23 Sep 2023 12:49:25 +0800 Subject: [PATCH 2/3] refactor(thread): adjust page metric --- .../content/CommunityContent/AboutContent.tsx | 12 ++--- .../CommunityContent/ChangeLogContent.tsx | 2 +- .../content/CommunityContent/DocContent.tsx | 3 +- .../CommunityContent/KanbanContent.tsx | 2 +- .../thread/AboutThread/ExtraInfo.tsx | 51 +++++++++++-------- src/containers/thread/AboutThread/index.tsx | 3 +- .../thread/AboutThread/styles/extra_info.ts | 31 ++--------- .../thread/AboutThread/styles/index.ts | 2 +- .../thread/DashboardThread/store/Models.ts | 2 +- .../DocThread/styles/blocks_layout/index.ts | 2 +- .../thread/DocThread/styles/index.ts | 2 +- src/hooks/useMetric.ts | 4 ++ 12 files changed, 51 insertions(+), 65 deletions(-) diff --git a/src/containers/content/CommunityContent/AboutContent.tsx b/src/containers/content/CommunityContent/AboutContent.tsx index 00352a9e4..c7ffa3b4c 100755 --- a/src/containers/content/CommunityContent/AboutContent.tsx +++ b/src/containers/content/CommunityContent/AboutContent.tsx @@ -5,9 +5,8 @@ import { FC } from 'react' import useMobileDetect from '@groupher/use-mobile-detect-hook' -import type { TMetric } from '@/spec' -import METRIC from '@/constant/metric' import useBannerLayout from '@/hooks/useBannerLayout' +import useMetric from '@/hooks/useMetric' import { bond } from '@/mobx' import { BANNER_LAYOUT } from '@/constant/layout' @@ -22,25 +21,22 @@ import { Wrapper, SidebarWrapper, InnerWrapper, ContentWrapper, MobileCardsWrapp type TProps = { communityContent?: TStore - metric?: TMetric } /** * only for AboutThread, but link to the common communityContent store */ -const CommunityContentContainer: FC = ({ - communityContent: store, - metric = METRIC.COMMUNITY, -}) => { +const CommunityContentContainer: FC = ({ communityContent: store }) => { useInit(store) + const metric = useMetric() const bannerLayout = useBannerLayout() const { isMobile } = useMobileDetect() const LayoutWrapper = bannerLayout === BANNER_LAYOUT.SIDEBAR ? SidebarWrapper : Wrapper return ( - + {isMobile ? ( diff --git a/src/containers/content/CommunityContent/ChangeLogContent.tsx b/src/containers/content/CommunityContent/ChangeLogContent.tsx index bdb472b7f..0dbb2ec4d 100755 --- a/src/containers/content/CommunityContent/ChangeLogContent.tsx +++ b/src/containers/content/CommunityContent/ChangeLogContent.tsx @@ -36,7 +36,7 @@ const CommunityContentContainer: FC = ({ communityContent: store }) => { const LayoutWrapper = globalLayout.banner === BANNER_LAYOUT.SIDEBAR ? SidebarWrapper : Wrapper return ( - + {isMobile ? ( diff --git a/src/containers/content/CommunityContent/DocContent.tsx b/src/containers/content/CommunityContent/DocContent.tsx index fa6780312..3c7e0a01b 100644 --- a/src/containers/content/CommunityContent/DocContent.tsx +++ b/src/containers/content/CommunityContent/DocContent.tsx @@ -28,6 +28,7 @@ type TProps = { const CommunityContentContainer: FC = ({ communityContent: store }) => { useInit(store) const metric = useMetric() + const bannerLayout = useBannerLayout() const { isMobile } = useMobileDetect() @@ -35,7 +36,7 @@ const CommunityContentContainer: FC = ({ communityContent: store }) => { const LayoutWrapper = isSidebarLayout ? SidebarWrapper : Wrapper return ( - + {isMobile ? ( diff --git a/src/containers/content/CommunityContent/KanbanContent.tsx b/src/containers/content/CommunityContent/KanbanContent.tsx index 12b33c8f9..f36c8fa3c 100755 --- a/src/containers/content/CommunityContent/KanbanContent.tsx +++ b/src/containers/content/CommunityContent/KanbanContent.tsx @@ -32,7 +32,7 @@ const CommunityContentContainer: FC = ({ communityContent: store }) => { const LayoutWrapper = bannerLayout === BANNER_LAYOUT.SIDEBAR ? SidebarWrapper : Wrapper return ( - + diff --git a/src/containers/thread/AboutThread/ExtraInfo.tsx b/src/containers/thread/AboutThread/ExtraInfo.tsx index 2b801f965..50e4194ca 100644 --- a/src/containers/thread/AboutThread/ExtraInfo.tsx +++ b/src/containers/thread/AboutThread/ExtraInfo.tsx @@ -1,35 +1,44 @@ -import { FC, memo } from 'react' +import { FC } from 'react' +import { observer } from 'mobx-react' +import { isEmpty } from 'ramda' -import { Br, SexyDivider as Divider } from '@/widgets/Common' +import useAboutInfo from '@/hooks/useAboutInfo' +import { SexyDivider as Divider } from '@/widgets/Common' +import SocialList from '@/widgets/SocialList' -import { Wrapper, Block, Title, Reports, ReportsArticle, Press, Desc } from './styles/extra_info' +import LabelList from './LabelList' +import MediaReports from './MediaReports' + +import { Wrapper, Block, Title } from './styles/extra_info' const Content = () => { + const { cities, techstacks, socialLinks, mediaReports } = useAboutInfo() + + const noMediaReports = mediaReports.length <= 1 && !mediaReports[0].title + return ( <> + + + 所在地 + + + 技术栈 - Typescript, Elixir + - - 所在地 - 成都, 厦门 + + + 关注我们 + - - + + 媒体报道 -
- - 36kr - 新一代xxx一体化协作平台「XXX」获1000万元Pre - -
- - 科技周刊 - 这个平台太酷了 - + - + ) } @@ -42,4 +51,4 @@ const ExtraInfo: FC = () => { ) } -export default memo(ExtraInfo) +export default observer(ExtraInfo) diff --git a/src/containers/thread/AboutThread/index.tsx b/src/containers/thread/AboutThread/index.tsx index 4a0f0f38a..89da29fda 100755 --- a/src/containers/thread/AboutThread/index.tsx +++ b/src/containers/thread/AboutThread/index.tsx @@ -63,10 +63,9 @@ const AboutThreadContainer: FC = ({ 社区概况 + - - diff --git a/src/containers/thread/AboutThread/styles/extra_info.ts b/src/containers/thread/AboutThread/styles/extra_info.ts index f57fd3bf9..e156fa6ba 100644 --- a/src/containers/thread/AboutThread/styles/extra_info.ts +++ b/src/containers/thread/AboutThread/styles/extra_info.ts @@ -5,8 +5,8 @@ import css, { theme } from '@/css' export const Wrapper = styled.div` ${css.row()}; flex-wrap: wrap; - width: 100%; height: auto; + width: 600px; padding-top: 10px; padding-bottom: 0; margin-top: 20px; @@ -25,7 +25,9 @@ export const MobileWrapper = styled.div` `}; ` -export const Block = styled.div` +export const Block = styled.div<{ hide?: boolean }>` + display: ${({ hide }) => (hide ? 'none' : 'block')}; + margin-bottom: 20px; width: 50%; ` @@ -36,28 +38,3 @@ export const Title = styled.div` font-weight: 500; margin-bottom: 10px; ` -export const Desc = styled.div` - font-size: 14px; - font-weight: 400; - color: ${theme('article.digest')}; - line-height: 1.6; -` -export const Reports = styled.div` - ${css.row('align-center')}; -` -export const ReportsArticle = styled(Desc)` - ${css.lineClamp(1)}; -` -export const Press = styled.div` - /* color: #ec633f; */ - border: 1px solid; - border-color: ${theme('article.info')}; - color: ${theme('article.info')}; - font-weight: 600; - padding: 0 4px; - border-radius: 4px; - font-size: 11px; - margin-left: -1px; - margin-right: 8px; - cursor: pointer; -` diff --git a/src/containers/thread/AboutThread/styles/index.ts b/src/containers/thread/AboutThread/styles/index.ts index 40d2b3fc1..d26194f16 100755 --- a/src/containers/thread/AboutThread/styles/index.ts +++ b/src/containers/thread/AboutThread/styles/index.ts @@ -11,7 +11,7 @@ export const Wrapper = styled.div.attrs(({ testid }) => ({ ${css.row('align-start')}; width: 100%; - padding-left: ${({ bannerLayout }) => (bannerLayout === BANNER_LAYOUT.SIDEBAR ? '85px' : '')}; + padding-left: ${({ bannerLayout }) => (bannerLayout === BANNER_LAYOUT.SIDEBAR ? '90px' : '')}; ${css.media.mobile` ${css.column('align-start')}; diff --git a/src/containers/thread/DashboardThread/store/Models.ts b/src/containers/thread/DashboardThread/store/Models.ts index 8dce6391e..60c78409a 100644 --- a/src/containers/thread/DashboardThread/store/Models.ts +++ b/src/containers/thread/DashboardThread/store/Models.ts @@ -147,7 +147,7 @@ export const settingsModalFields = { docFaqLayout: T.opt(T.enum(values(DOC_FAQ_LAYOUT)), DOC_FAQ_LAYOUT.COLLAPSE), avatarLayout: T.opt(T.enum(values(AVATAR_LAYOUT)), AVATAR_LAYOUT.SQUARE), brandLayout: T.opt(T.enum(values(BRAND_LAYOUT)), BRAND_LAYOUT.BOTH), - bannerLayout: T.opt(T.enum(values(BANNER_LAYOUT)), BANNER_LAYOUT.HEADER), + bannerLayout: T.opt(T.enum(values(BANNER_LAYOUT)), BANNER_LAYOUT.SIDEBAR), topbarLayout: T.opt(T.enum(values(TOPBAR_LAYOUT)), TOPBAR_LAYOUT.NO), topbarBg: T.opt(T.enum(keys(COLORS)), COLOR_NAME.ORANGE), diff --git a/src/containers/thread/DocThread/styles/blocks_layout/index.ts b/src/containers/thread/DocThread/styles/blocks_layout/index.ts index 8b254169b..a83a096a9 100644 --- a/src/containers/thread/DocThread/styles/blocks_layout/index.ts +++ b/src/containers/thread/DocThread/styles/blocks_layout/index.ts @@ -11,7 +11,7 @@ export const Wrapper = styled.div<{ bannerLayout: TBannerLayout }>` ${({ bannerLayout }) => bannerLayout !== BANNER_LAYOUT.SIDEBAR - ? 'width: 100%;margin-left: 58px;margin-top: 30px;' + ? 'width: 100%; margin-left: 58px; margin-top: 30px;' : 'width: auto;'} ` export const CatsWrapper = styled(MainWrapper)` diff --git a/src/containers/thread/DocThread/styles/index.ts b/src/containers/thread/DocThread/styles/index.ts index 0dc0dde55..8b503d5f8 100644 --- a/src/containers/thread/DocThread/styles/index.ts +++ b/src/containers/thread/DocThread/styles/index.ts @@ -10,7 +10,7 @@ export const Wrapper = styled.div.attrs(({ testid }) => ({ }))` ${css.column('align-center')}; width: ${({ bannerLayout }) => - bannerLayout === BANNER_LAYOUT.SIDEBAR ? 'calc(100% + 100px)' : '100px'}; + bannerLayout === BANNER_LAYOUT.SIDEBAR ? 'calc(100% + 30px)' : '100px'}; padding-left: ${({ bannerLayout }) => bannerLayout === BANNER_LAYOUT.SIDEBAR ? '100px' : '50px'}; diff --git a/src/hooks/useMetric.ts b/src/hooks/useMetric.ts index be72d84f0..3f5cb9ac7 100644 --- a/src/hooks/useMetric.ts +++ b/src/hooks/useMetric.ts @@ -21,6 +21,10 @@ const useMetric = (): TMetric => { return METRIC.COMMUNITY_SIDEBAR } + if (store.metric === METRIC.DOC && bannerLayout === BANNER_LAYOUT.SIDEBAR) { + return METRIC.COMMUNITY_SIDEBAR + } + return store.metric as TMetric } From d5a8f37bc4de836eac757221f57f8f3f16e5337d Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sat, 23 Sep 2023 13:03:50 +0800 Subject: [PATCH 3/3] refactor(css): rm un-need flex-wrap property --- .../ArticleContent/styles/desktop_view/side_info.tsx | 3 +-- .../content/LandingPage/styles/feature_wall/index.ts | 3 +-- .../content/LandingPage/styles/feature_wall/user_voice.ts | 3 +-- .../content/LandingPage/styles/tech_stacks/index.ts | 3 +-- .../UserContent/styles/sidebar/community_editor_info.ts | 3 +-- .../styles/content/fake_browser/mask_panel.ts | 3 +-- .../editor/CoverEditor/styles/toolbox/light_block.ts | 3 +-- .../editor/CoverEditor/styles/toolbox/position_block.ts | 3 +-- src/containers/editor/PassportEditor/styles/selects.ts | 3 +-- .../WallpaperEditor/styles/build_in/gradient_group.ts | 3 +-- .../editor/WallpaperEditor/styles/build_in/pictrue_group.ts | 3 +-- src/containers/thread/AboutThread/styles/extra_info.ts | 3 +-- .../thread/DashboardThread/styles/doc/block_layout/index.ts | 3 +-- .../DashboardThread/styles/footer/editors/group/index.ts | 3 +-- .../thread/DashboardThread/styles/header/editors/index.ts | 3 +-- .../styles/layout/doc_layout/faq_template.ts | 3 +-- .../styles/layout/doc_layout/main_template.ts | 6 ++---- .../thread/DashboardThread/styles/threads/doc_thread.ts | 3 +-- .../thread/DashboardThread/styles/widgets/base_setting.ts | 3 +-- .../thread/DocThread/styles/blocks_layout/index.ts | 3 +-- .../thread/DocThread/styles/cards_layout/index.ts | 3 +-- .../tool/ArticleSticker/styles/comment_sticker.ts | 3 +-- src/containers/tool/CollectionFolder/styles/setter.ts | 3 +-- .../tool/CommunityTagSetter/styles/community_setter/body.ts | 3 +-- .../tool/CommunityTagSetter/styles/community_setter/list.ts | 3 +-- .../tool/CommunityTagSetter/styles/tag_setter/body.ts | 3 +-- .../tool/CommunityTagSetter/styles/tag_setter/group_tags.ts | 3 +-- src/containers/tool/Share/styles/panel/platform.ts | 3 +-- src/containers/user/UserLister/styles/list/normal_layout.ts | 3 +-- src/containers/user/UserLister/styles/user_list.ts | 3 +-- src/widgets/ArticlesFilter/styles/selected_filters.ts | 3 +-- src/widgets/ContributorList/styles/index.ts | 3 +-- src/widgets/FaIcons/styles/panel.ts | 3 +-- src/widgets/FaqList/styles/flat.ts | 3 +-- src/widgets/GalleryHub/styles/directory_gallery.ts | 3 +-- src/widgets/GalleryHub/styles/friends_gallery.ts | 3 +-- src/widgets/GalleryHub/styles/image_gallery/index.ts | 3 +-- src/widgets/GalleryHub/styles/inline_tags.ts | 3 +-- .../GalleryHub/styles/people_gallery/developer_gallery.ts | 3 +-- .../GalleryHub/styles/people_gallery/fame_people_gallery.ts | 3 +-- src/widgets/GalleryHub/styles/product_gallery.ts | 3 +-- src/widgets/GalleryHub/styles/snippet_gallery.ts | 3 +-- src/widgets/GalleryHub/styles/sponsor_gallery/index.ts | 3 +-- src/widgets/Loading/styles/index.ts | 3 +-- src/widgets/StateSelector/styles/full_panel.ts | 3 +-- .../Switcher/styles/pagi_option_selector/main_column.ts | 3 +-- src/widgets/TagNote/styles/index.ts | 3 +-- src/widgets/ThemeSelector/styles/card_selector.ts | 3 +-- src/widgets/ThemeSelector/styles/gallery_selector.ts | 3 +-- src/widgets/UserBrief/styles/social_icons.ts | 3 +-- src/widgets/UserBrief/styles/works_badge.ts | 3 +-- utils/css/flex.ts | 5 +++++ utils/css/index.ts | 3 ++- 53 files changed, 59 insertions(+), 105 deletions(-) diff --git a/src/containers/content/ArticleContent/styles/desktop_view/side_info.tsx b/src/containers/content/ArticleContent/styles/desktop_view/side_info.tsx index 2b4f87b35..12c8e9e23 100644 --- a/src/containers/content/ArticleContent/styles/desktop_view/side_info.tsx +++ b/src/containers/content/ArticleContent/styles/desktop_view/side_info.tsx @@ -53,8 +53,7 @@ export const Value = styled.div` ` export const UserList = styled.div` - ${css.column()}; - flex-wrap: wrap; + ${css.columnWrap()}; gap: 10px 0; ` diff --git a/src/containers/content/LandingPage/styles/feature_wall/index.ts b/src/containers/content/LandingPage/styles/feature_wall/index.ts index ae32efda2..939d7cae4 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/index.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/index.ts @@ -59,8 +59,7 @@ export const FeatList = styled.div` ` export const MobileIntroLists = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; gap: 16px 0; padding-left: 10px; margin-top: -25px; diff --git a/src/containers/content/LandingPage/styles/feature_wall/user_voice.ts b/src/containers/content/LandingPage/styles/feature_wall/user_voice.ts index d2b4278fe..7a036bcd3 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/user_voice.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/user_voice.ts @@ -10,8 +10,7 @@ import TreesSVG from '@/icons/Trees' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.row('align-both')}; - flex-wrap: wrap; + ${css.rowWrap('align-both')}; gap: 40px 25px; height: auto; margin-top: 80px; diff --git a/src/containers/content/LandingPage/styles/tech_stacks/index.ts b/src/containers/content/LandingPage/styles/tech_stacks/index.ts index 90a76b419..3ed5c45f7 100644 --- a/src/containers/content/LandingPage/styles/tech_stacks/index.ts +++ b/src/containers/content/LandingPage/styles/tech_stacks/index.ts @@ -71,8 +71,7 @@ export const CADBackground = styled(Img)` `}; ` export const TechsWrapper = styled.div` - ${css.row('align-both')}; - flex-wrap: wrap; + ${css.rowWrap('align-both')}; gap: 15px 50px; height: 440px; width: 100%; diff --git a/src/containers/content/UserContent/styles/sidebar/community_editor_info.ts b/src/containers/content/UserContent/styles/sidebar/community_editor_info.ts index c29730aec..10d7d6d53 100755 --- a/src/containers/content/UserContent/styles/sidebar/community_editor_info.ts +++ b/src/containers/content/UserContent/styles/sidebar/community_editor_info.ts @@ -3,10 +3,9 @@ import styled from 'styled-components' import css, { theme } from '@/css' export const Wrapper = styled.div` - ${css.row('align-center')}; + ${css.rowWrap('align-center')}; margin-top: 10px; color: ${theme('banner.desc')}; - flex-wrap: wrap; ` export const Text = styled.div` diff --git a/src/containers/editor/CommunityEditor/styles/content/fake_browser/mask_panel.ts b/src/containers/editor/CommunityEditor/styles/content/fake_browser/mask_panel.ts index d9f53b9bc..8f6d22ede 100644 --- a/src/containers/editor/CommunityEditor/styles/content/fake_browser/mask_panel.ts +++ b/src/containers/editor/CommunityEditor/styles/content/fake_browser/mask_panel.ts @@ -18,8 +18,7 @@ export const Wrapper = styled.div` ` export const InnerWrapper = styled.div` width: calc(100% + 148px); - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; gap: 16px 0; ` export const InnerWrapperColumn = styled.div` diff --git a/src/containers/editor/CoverEditor/styles/toolbox/light_block.ts b/src/containers/editor/CoverEditor/styles/toolbox/light_block.ts index 86b3727a7..47da78af5 100644 --- a/src/containers/editor/CoverEditor/styles/toolbox/light_block.ts +++ b/src/containers/editor/CoverEditor/styles/toolbox/light_block.ts @@ -11,8 +11,7 @@ export const Wrapper = styled.div` ` export const Block = styled.div` ${css.size(48)}; - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; gap: 3px; padding: 4px; border-radius: 2px; diff --git a/src/containers/editor/CoverEditor/styles/toolbox/position_block.ts b/src/containers/editor/CoverEditor/styles/toolbox/position_block.ts index c5e24a2bd..eddbffb3a 100644 --- a/src/containers/editor/CoverEditor/styles/toolbox/position_block.ts +++ b/src/containers/editor/CoverEditor/styles/toolbox/position_block.ts @@ -11,8 +11,7 @@ export const Wrapper = styled.div` ` export const Block = styled.div` ${css.size(47)}; - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; border-radius: 2px; border: 1px solid; border-color: ${theme('divider')}; diff --git a/src/containers/editor/PassportEditor/styles/selects.ts b/src/containers/editor/PassportEditor/styles/selects.ts index bfec8faa6..f4e7d59d7 100644 --- a/src/containers/editor/PassportEditor/styles/selects.ts +++ b/src/containers/editor/PassportEditor/styles/selects.ts @@ -7,8 +7,7 @@ import CheckSVG from '@/icons/Check' export const Wrapper = styled.div` width: 100%; - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; gap: 10px 0; position: relative; ` diff --git a/src/containers/editor/WallpaperEditor/styles/build_in/gradient_group.ts b/src/containers/editor/WallpaperEditor/styles/build_in/gradient_group.ts index b5dba7728..94ec900f9 100755 --- a/src/containers/editor/WallpaperEditor/styles/build_in/gradient_group.ts +++ b/src/containers/editor/WallpaperEditor/styles/build_in/gradient_group.ts @@ -6,9 +6,8 @@ import css, { animate, theme } from '@/css' import PenSVG from '@/icons/EditPen' export const Wrapper = styled.div` - ${css.row()}; + ${css.rowWrap()}; width: calc(100% + 30px); - flex-wrap: wrap; gap: 0 12px; margin-top: 10px; diff --git a/src/containers/editor/WallpaperEditor/styles/build_in/pictrue_group.ts b/src/containers/editor/WallpaperEditor/styles/build_in/pictrue_group.ts index 4f67dea44..7584e2031 100644 --- a/src/containers/editor/WallpaperEditor/styles/build_in/pictrue_group.ts +++ b/src/containers/editor/WallpaperEditor/styles/build_in/pictrue_group.ts @@ -7,9 +7,8 @@ import CheckedSVG from '@/icons/CheckBold' import CircleArrowSVG from '@/icons/CircleArrow' export const Wrapper = styled.div<{ showMore: boolean }>` - ${css.row()}; + ${css.rowWrap()}; width: calc(100% + 30px); - flex-wrap: wrap; gap: 15px 16px; margin-top: 10px; position: relative; diff --git a/src/containers/thread/AboutThread/styles/extra_info.ts b/src/containers/thread/AboutThread/styles/extra_info.ts index e156fa6ba..2c7941f54 100644 --- a/src/containers/thread/AboutThread/styles/extra_info.ts +++ b/src/containers/thread/AboutThread/styles/extra_info.ts @@ -3,8 +3,7 @@ import styled from 'styled-components' import css, { theme } from '@/css' export const Wrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; height: auto; width: 600px; padding-top: 10px; diff --git a/src/containers/thread/DashboardThread/styles/doc/block_layout/index.ts b/src/containers/thread/DashboardThread/styles/doc/block_layout/index.ts index a60a89a45..1cf6eeb96 100644 --- a/src/containers/thread/DashboardThread/styles/doc/block_layout/index.ts +++ b/src/containers/thread/DashboardThread/styles/doc/block_layout/index.ts @@ -8,8 +8,7 @@ export const Wrapper = styled.div` margin-top: 10px; ` export const CatsWrapper = styled.div` - ${css.row('justify-start')}; - flex-wrap: wrap; + ${css.rowWrap('justify-start')}; gap: 15px 20px; flex-grow: 1; diff --git a/src/containers/thread/DashboardThread/styles/footer/editors/group/index.ts b/src/containers/thread/DashboardThread/styles/footer/editors/group/index.ts index 6570aa226..8131e66f6 100644 --- a/src/containers/thread/DashboardThread/styles/footer/editors/group/index.ts +++ b/src/containers/thread/DashboardThread/styles/footer/editors/group/index.ts @@ -18,8 +18,7 @@ export const PlusIcon = styled(PlusSVG)` margin-right: 6px; ` export const LinkGroup = styled.div` - ${css.row('justify-start')}; - flex-wrap: wrap; + ${css.rowWrap('justify-start')}; width: calc(100% + 50px); gap: 30px; ` diff --git a/src/containers/thread/DashboardThread/styles/header/editors/index.ts b/src/containers/thread/DashboardThread/styles/header/editors/index.ts index d7bfa985c..1f902216b 100644 --- a/src/containers/thread/DashboardThread/styles/header/editors/index.ts +++ b/src/containers/thread/DashboardThread/styles/header/editors/index.ts @@ -69,9 +69,8 @@ export const PlusIcon = styled(PlusSVG)` ` export const LinkGroup = styled.div` - ${css.row('justify-start')}; + ${css.rowWrap('justify-start')}; margin-top: 30px; - flex-wrap: wrap; width: calc(100% + 50px); gap: 30px; ` diff --git a/src/containers/thread/DashboardThread/styles/layout/doc_layout/faq_template.ts b/src/containers/thread/DashboardThread/styles/layout/doc_layout/faq_template.ts index f1f8025ef..231980d3a 100644 --- a/src/containers/thread/DashboardThread/styles/layout/doc_layout/faq_template.ts +++ b/src/containers/thread/DashboardThread/styles/layout/doc_layout/faq_template.ts @@ -11,8 +11,7 @@ export const FlatLayoutWrapper = styled.div` width: 100%; ` export const FlatLists = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; gap: 22px 0; width: 100%; margin-top: 15px; diff --git a/src/containers/thread/DashboardThread/styles/layout/doc_layout/main_template.ts b/src/containers/thread/DashboardThread/styles/layout/doc_layout/main_template.ts index c79012583..4d0ecf2a9 100644 --- a/src/containers/thread/DashboardThread/styles/layout/doc_layout/main_template.ts +++ b/src/containers/thread/DashboardThread/styles/layout/doc_layout/main_template.ts @@ -10,8 +10,7 @@ import ToolSVG from '@/icons/Heart' export { Bar, Circle } from '..' export const CardssLayoutWrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; gap: 10px; width: 100%; ` @@ -26,8 +25,7 @@ export const FooterMore = styled.div` width: 80%; ` export const BlocksLayoutWrapper = styled.div<{ withDivider?: boolean }>` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; gap: 22px 0; border-right: ${({ withDivider }) => (withDivider ? '1px solid' : 'none')}; border-right-color: ${theme('divider')}; diff --git a/src/containers/thread/DashboardThread/styles/threads/doc_thread.ts b/src/containers/thread/DashboardThread/styles/threads/doc_thread.ts index 3a24db9f2..c66b172c5 100644 --- a/src/containers/thread/DashboardThread/styles/threads/doc_thread.ts +++ b/src/containers/thread/DashboardThread/styles/threads/doc_thread.ts @@ -3,8 +3,7 @@ import styled from 'styled-components' import css, { theme } from '@/css' export const Wrapper = styled.div` - ${css.row('justify-between')}; - flex-wrap: wrap; + ${css.rowWrap('justify-between')}; border-left: 2px solid; border-left-color: ${theme('divider')}; diff --git a/src/containers/thread/DashboardThread/styles/widgets/base_setting.ts b/src/containers/thread/DashboardThread/styles/widgets/base_setting.ts index 56985ebd0..3c434621f 100755 --- a/src/containers/thread/DashboardThread/styles/widgets/base_setting.ts +++ b/src/containers/thread/DashboardThread/styles/widgets/base_setting.ts @@ -23,8 +23,7 @@ export const TheColor = styled.div<{ color: TColorName }>` // threads export const ThreadsWrapper = styled.div` - ${css.row('justify-between')}; - flex-wrap: wrap; + ${css.rowWrap('justify-between')}; border: 1px solid; border-color: ${theme('divider')}; diff --git a/src/containers/thread/DocThread/styles/blocks_layout/index.ts b/src/containers/thread/DocThread/styles/blocks_layout/index.ts index a83a096a9..e63608c83 100644 --- a/src/containers/thread/DocThread/styles/blocks_layout/index.ts +++ b/src/containers/thread/DocThread/styles/blocks_layout/index.ts @@ -15,8 +15,7 @@ export const Wrapper = styled.div<{ bannerLayout: TBannerLayout }>` : 'width: auto;'} ` export const CatsWrapper = styled(MainWrapper)` - ${css.row('justify-between')}; - flex-wrap: wrap; + ${css.rowWrap('justify-between')}; flex-grow: 1; width: 100%; diff --git a/src/containers/thread/DocThread/styles/cards_layout/index.ts b/src/containers/thread/DocThread/styles/cards_layout/index.ts index 6be309e91..b2812a2c3 100644 --- a/src/containers/thread/DocThread/styles/cards_layout/index.ts +++ b/src/containers/thread/DocThread/styles/cards_layout/index.ts @@ -10,8 +10,7 @@ export const Wrapper = styled.div` margin-left: -30px; ` export const CatsWrapper = styled(MainWrapper)` - ${css.row('justify-between')}; - flex-wrap: wrap; + ${css.rowWrap('justify-between')}; flex-grow: 1; gap: 20px 10px; diff --git a/src/containers/tool/ArticleSticker/styles/comment_sticker.ts b/src/containers/tool/ArticleSticker/styles/comment_sticker.ts index 3d83a9536..8ea2b3029 100755 --- a/src/containers/tool/ArticleSticker/styles/comment_sticker.ts +++ b/src/containers/tool/ArticleSticker/styles/comment_sticker.ts @@ -27,8 +27,7 @@ export const TotalNum = styled.span<{ highlight: boolean }>` margin-right: 4px; ` export const UsersWrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; ` export const Avatar = styled(Img)` ${css.circle(20)}; diff --git a/src/containers/tool/CollectionFolder/styles/setter.ts b/src/containers/tool/CollectionFolder/styles/setter.ts index d6871d4c6..79d9e4ccb 100755 --- a/src/containers/tool/CollectionFolder/styles/setter.ts +++ b/src/containers/tool/CollectionFolder/styles/setter.ts @@ -39,8 +39,7 @@ export const Artiment = styled.div` margin-right: 5px; ` export const ListWrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; flex-grow: 1; padding-top: 35px; padding-right: 15px; diff --git a/src/containers/tool/CommunityTagSetter/styles/community_setter/body.ts b/src/containers/tool/CommunityTagSetter/styles/community_setter/body.ts index c88e795c9..84920e597 100755 --- a/src/containers/tool/CommunityTagSetter/styles/community_setter/body.ts +++ b/src/containers/tool/CommunityTagSetter/styles/community_setter/body.ts @@ -10,6 +10,5 @@ export const Wrapper = styled.div` min-height: 400px; ` export const InnerWrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; ` diff --git a/src/containers/tool/CommunityTagSetter/styles/community_setter/list.ts b/src/containers/tool/CommunityTagSetter/styles/community_setter/list.ts index 95077424a..75a3809ed 100755 --- a/src/containers/tool/CommunityTagSetter/styles/community_setter/list.ts +++ b/src/containers/tool/CommunityTagSetter/styles/community_setter/list.ts @@ -6,8 +6,7 @@ export const Wrapper = styled.div` margin-bottom: 8px; ` export const InnerWrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; ` export const HintTitle = styled.div<{ highlight: boolean }>` font-size: 13px; diff --git a/src/containers/tool/CommunityTagSetter/styles/tag_setter/body.ts b/src/containers/tool/CommunityTagSetter/styles/tag_setter/body.ts index de865a63d..f74efaa3e 100755 --- a/src/containers/tool/CommunityTagSetter/styles/tag_setter/body.ts +++ b/src/containers/tool/CommunityTagSetter/styles/tag_setter/body.ts @@ -10,6 +10,5 @@ export const Wrapper = styled.div` min-height: 300px; ` export const InnerWrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; ` diff --git a/src/containers/tool/CommunityTagSetter/styles/tag_setter/group_tags.ts b/src/containers/tool/CommunityTagSetter/styles/tag_setter/group_tags.ts index 69b7be20b..7c62532e6 100755 --- a/src/containers/tool/CommunityTagSetter/styles/tag_setter/group_tags.ts +++ b/src/containers/tool/CommunityTagSetter/styles/tag_setter/group_tags.ts @@ -6,8 +6,7 @@ export const Wrapper = styled.div` margin-bottom: 8px; ` export const InnerWrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; ` export const HintTitle = styled.div` font-size: 13px; diff --git a/src/containers/tool/Share/styles/panel/platform.ts b/src/containers/tool/Share/styles/panel/platform.ts index dbff26a19..12eddd186 100755 --- a/src/containers/tool/Share/styles/panel/platform.ts +++ b/src/containers/tool/Share/styles/panel/platform.ts @@ -38,8 +38,7 @@ export const Article = styled.div` margin-right: 5px; ` export const InnerWrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; ${css.media.mobile` justify-content: space-between; diff --git a/src/containers/user/UserLister/styles/list/normal_layout.ts b/src/containers/user/UserLister/styles/list/normal_layout.ts index 996640e1c..18e2a173c 100755 --- a/src/containers/user/UserLister/styles/list/normal_layout.ts +++ b/src/containers/user/UserLister/styles/list/normal_layout.ts @@ -6,8 +6,7 @@ import css, { theme } from '@/css' import CitySVG from '@/icons/City' export const Wrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; ` export const UserWrapper = styled.div` diff --git a/src/containers/user/UserLister/styles/user_list.ts b/src/containers/user/UserLister/styles/user_list.ts index e866d76d7..674d7500a 100755 --- a/src/containers/user/UserLister/styles/user_list.ts +++ b/src/containers/user/UserLister/styles/user_list.ts @@ -4,8 +4,7 @@ import Img from '@/Img' import css, { theme } from '@/css' export const TableWrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; ` // background: ${theme('drawer.articleBg')}; diff --git a/src/widgets/ArticlesFilter/styles/selected_filters.ts b/src/widgets/ArticlesFilter/styles/selected_filters.ts index 2bd10d965..df3ab64d9 100755 --- a/src/widgets/ArticlesFilter/styles/selected_filters.ts +++ b/src/widgets/ArticlesFilter/styles/selected_filters.ts @@ -3,8 +3,7 @@ import styled from 'styled-components' import css from '@/css' export const Wrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; margin-left: 15px; margin-top: -1px; diff --git a/src/widgets/ContributorList/styles/index.ts b/src/widgets/ContributorList/styles/index.ts index dfc66b7f1..f9e2fb089 100755 --- a/src/widgets/ContributorList/styles/index.ts +++ b/src/widgets/ContributorList/styles/index.ts @@ -5,8 +5,7 @@ import css from '@/css' import Img from '@/Img' export const Wrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; margin-top: 15px; ` export const AvatarLink = styled.a`` diff --git a/src/widgets/FaIcons/styles/panel.ts b/src/widgets/FaIcons/styles/panel.ts index 726b6015b..c8c986c01 100644 --- a/src/widgets/FaIcons/styles/panel.ts +++ b/src/widgets/FaIcons/styles/panel.ts @@ -51,8 +51,7 @@ export const Title = styled.div` ` export const ColorWrapper = styled.div` - ${css.row('align-both')}; - flex-wrap: wrap; + ${css.rowWrap('align-both')}; margin-top: 8px; padding-bottom: 14px; gap: 6px 10px; diff --git a/src/widgets/FaqList/styles/flat.ts b/src/widgets/FaqList/styles/flat.ts index 3d5b26d57..10e62b037 100644 --- a/src/widgets/FaqList/styles/flat.ts +++ b/src/widgets/FaqList/styles/flat.ts @@ -41,8 +41,7 @@ export const BrandText = styled.div<{ large: boolean }>` `}; ` export const Content = styled.div<{ large: boolean }>` - ${css.row('justify-between')}; - flex-wrap: wrap; + ${css.rowWrap('justify-between')}; gap: ${({ large }) => (large ? '45px' : '50px')}; ${css.media.mobile` diff --git a/src/widgets/GalleryHub/styles/directory_gallery.ts b/src/widgets/GalleryHub/styles/directory_gallery.ts index 66c503315..c8c28a7ee 100755 --- a/src/widgets/GalleryHub/styles/directory_gallery.ts +++ b/src/widgets/GalleryHub/styles/directory_gallery.ts @@ -4,8 +4,7 @@ import Img from '@/Img' import css, { theme } from '@/css' export const Wrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; color: ${theme('article.digest')}; width: 100%; ` diff --git a/src/widgets/GalleryHub/styles/friends_gallery.ts b/src/widgets/GalleryHub/styles/friends_gallery.ts index a0bf6020a..a08516bfd 100755 --- a/src/widgets/GalleryHub/styles/friends_gallery.ts +++ b/src/widgets/GalleryHub/styles/friends_gallery.ts @@ -7,8 +7,7 @@ export const Wrapper = styled.div` ${css.column('align-center')}; ` export const BlockWrapper = styled.div` - ${css.row('justify-start')}; - flex-wrap: wrap; + ${css.rowWrap('justify-start')}; color: ${theme('article.digest')}; width: 100%; min-height: 500px; diff --git a/src/widgets/GalleryHub/styles/image_gallery/index.ts b/src/widgets/GalleryHub/styles/image_gallery/index.ts index fefb4d91c..48dc95d09 100755 --- a/src/widgets/GalleryHub/styles/image_gallery/index.ts +++ b/src/widgets/GalleryHub/styles/image_gallery/index.ts @@ -8,8 +8,7 @@ export const Wrapper = styled.div` ` // GalleryWrapper base export const WrapperBase = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; color: ${theme('article.digest')}; width: 100%; ` diff --git a/src/widgets/GalleryHub/styles/inline_tags.ts b/src/widgets/GalleryHub/styles/inline_tags.ts index a2901fb5d..7664c7fc6 100755 --- a/src/widgets/GalleryHub/styles/inline_tags.ts +++ b/src/widgets/GalleryHub/styles/inline_tags.ts @@ -4,8 +4,7 @@ import styled from 'styled-components' import css from '@/css' export const Wrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; margin-top: 18px; ` export const Tag = styled.div` diff --git a/src/widgets/GalleryHub/styles/people_gallery/developer_gallery.ts b/src/widgets/GalleryHub/styles/people_gallery/developer_gallery.ts index 0380c0c4b..403341c7f 100755 --- a/src/widgets/GalleryHub/styles/people_gallery/developer_gallery.ts +++ b/src/widgets/GalleryHub/styles/people_gallery/developer_gallery.ts @@ -6,8 +6,7 @@ import css, { theme } from '@/css' import { Block as BlockBase, Footer as FooterBase } from '.' export const Wrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; color: ${theme('article.digest')}; width: 100%; ` diff --git a/src/widgets/GalleryHub/styles/people_gallery/fame_people_gallery.ts b/src/widgets/GalleryHub/styles/people_gallery/fame_people_gallery.ts index 5301b1c76..49e578e16 100755 --- a/src/widgets/GalleryHub/styles/people_gallery/fame_people_gallery.ts +++ b/src/widgets/GalleryHub/styles/people_gallery/fame_people_gallery.ts @@ -6,8 +6,7 @@ import css, { theme } from '@/css' import { Block as BlockBase, Footer as FooterBase } from '.' export const Wrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; color: ${theme('article.digest')}; width: 100%; ` diff --git a/src/widgets/GalleryHub/styles/product_gallery.ts b/src/widgets/GalleryHub/styles/product_gallery.ts index 81da14d98..5f014077e 100755 --- a/src/widgets/GalleryHub/styles/product_gallery.ts +++ b/src/widgets/GalleryHub/styles/product_gallery.ts @@ -4,8 +4,7 @@ import Img from '@/Img' import css, { theme } from '@/css' export const Wrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; color: ${theme('article.digest')}; width: 100%; ` diff --git a/src/widgets/GalleryHub/styles/snippet_gallery.ts b/src/widgets/GalleryHub/styles/snippet_gallery.ts index a35c1ef51..7c2563ff2 100755 --- a/src/widgets/GalleryHub/styles/snippet_gallery.ts +++ b/src/widgets/GalleryHub/styles/snippet_gallery.ts @@ -4,8 +4,7 @@ import Img from '@/Img' import css, { theme } from '@/css' export const Wrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; color: ${theme('article.digest')}; width: 100%; ` diff --git a/src/widgets/GalleryHub/styles/sponsor_gallery/index.ts b/src/widgets/GalleryHub/styles/sponsor_gallery/index.ts index 34dd31334..e09071cf3 100755 --- a/src/widgets/GalleryHub/styles/sponsor_gallery/index.ts +++ b/src/widgets/GalleryHub/styles/sponsor_gallery/index.ts @@ -4,9 +4,8 @@ import Img from '@/Img' import css, { theme } from '@/css' export const Wrapper = styled.div<{ center: boolean }>` - ${css.row()}; + ${css.rowWrap()}; justify-content: ${({ center }) => (center ? 'center' : 'flex-start')}; - flex-wrap: wrap; color: ${theme('article.digest')}; width: 100%; diff --git a/src/widgets/Loading/styles/index.ts b/src/widgets/Loading/styles/index.ts index e90acbfbc..1853a01dc 100755 --- a/src/widgets/Loading/styles/index.ts +++ b/src/widgets/Loading/styles/index.ts @@ -3,8 +3,7 @@ import styled from 'styled-components' import css from '@/css' export const Wrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; ` export const CheatsheetCard = styled.div` width: 44%; diff --git a/src/widgets/StateSelector/styles/full_panel.ts b/src/widgets/StateSelector/styles/full_panel.ts index f469ee201..24805b268 100644 --- a/src/widgets/StateSelector/styles/full_panel.ts +++ b/src/widgets/StateSelector/styles/full_panel.ts @@ -66,8 +66,7 @@ export const RejectIndexIcon = styled(RejectIcon)` ` export const RejectGroup = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; display: none; ${RejectSection}:hover & { diff --git a/src/widgets/Switcher/styles/pagi_option_selector/main_column.ts b/src/widgets/Switcher/styles/pagi_option_selector/main_column.ts index c7525f8b0..2ce772467 100755 --- a/src/widgets/Switcher/styles/pagi_option_selector/main_column.ts +++ b/src/widgets/Switcher/styles/pagi_option_selector/main_column.ts @@ -16,8 +16,7 @@ export const MainBar = styled(SwitchBarBase)` height: 100%; ` export const SubBarWrapper = styled.div` - ${css.row('justify-between')}; - flex-wrap: wrap; + ${css.rowWrap('justify-between')}; width: 11px; height: 100%; margin-left: 3px; diff --git a/src/widgets/TagNote/styles/index.ts b/src/widgets/TagNote/styles/index.ts index b82b41f86..4e34cec4f 100644 --- a/src/widgets/TagNote/styles/index.ts +++ b/src/widgets/TagNote/styles/index.ts @@ -12,8 +12,7 @@ import css, { theme } from '@/css' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.row('justify-between')}; - flex-wrap: wrap; + ${css.rowWrap('justify-between')}; border-bottom: 1px solid; border-color: ${theme('divider')}; diff --git a/src/widgets/ThemeSelector/styles/card_selector.ts b/src/widgets/ThemeSelector/styles/card_selector.ts index 41914ce8b..9533efc63 100755 --- a/src/widgets/ThemeSelector/styles/card_selector.ts +++ b/src/widgets/ThemeSelector/styles/card_selector.ts @@ -7,8 +7,7 @@ import css, { theme } from '@/css' import { Dot } from '.' export const Wrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; ` export const ThemeDot = styled(Dot)`` diff --git a/src/widgets/ThemeSelector/styles/gallery_selector.ts b/src/widgets/ThemeSelector/styles/gallery_selector.ts index 2b6733448..41c347a12 100755 --- a/src/widgets/ThemeSelector/styles/gallery_selector.ts +++ b/src/widgets/ThemeSelector/styles/gallery_selector.ts @@ -6,8 +6,7 @@ import css, { theme } from '@/css' import { Dot } from '.' export const Wrapper = styled.div` - ${css.row('align-both')}; - flex-wrap: wrap; + ${css.rowWrap('align-both')}; ` export const ThemeDot = styled(Dot)` ${css.circle(20)}; diff --git a/src/widgets/UserBrief/styles/social_icons.ts b/src/widgets/UserBrief/styles/social_icons.ts index 43201ad83..f58bcaba0 100755 --- a/src/widgets/UserBrief/styles/social_icons.ts +++ b/src/widgets/UserBrief/styles/social_icons.ts @@ -4,8 +4,7 @@ import css, { theme } from '@/css' import Img from '@/Img' export const Wrapper = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; padding: 0 2px; padding-right: 10px; ` diff --git a/src/widgets/UserBrief/styles/works_badge.ts b/src/widgets/UserBrief/styles/works_badge.ts index ff3bb8068..85bb0b2a1 100755 --- a/src/widgets/UserBrief/styles/works_badge.ts +++ b/src/widgets/UserBrief/styles/works_badge.ts @@ -12,8 +12,7 @@ export const Title = styled.div` margin-bottom: 12px; ` export const List = styled.div` - ${css.row()}; - flex-wrap: wrap; + ${css.rowWrap()}; ` export const Item = styled.div` ${css.column('align-both')}; diff --git a/utils/css/flex.ts b/utils/css/flex.ts index a2ea2f1ec..ab47903fb 100755 --- a/utils/css/flex.ts +++ b/utils/css/flex.ts @@ -64,6 +64,11 @@ export const flexColumn = (rule1: TFlexRule = '', rule2: TFlexRule = ''): string ${flex(rule1, rule2)}; flex-direction: column; ` +export const flexColumnWrap = (rule1: TFlexRule = '', rule2: TFlexRule = ''): string => ` + ${flex(rule1, rule2)}; + flex-direction: column; + flex-wrap: wrap; +` export const flexColumnGrow = (rule1: TFlexRule = '', rule2: TFlexRule = ''): string => ` ${flexColumn(rule1, rule2)}; flex-grow: 1; diff --git a/utils/css/index.ts b/utils/css/index.ts index 1c2e7d7bc..632a02501 100755 --- a/utils/css/index.ts +++ b/utils/css/index.ts @@ -8,7 +8,7 @@ import type { TSpace } from '@/spec' import { mediaBreakPoints } from './metric' import { media, fitContentWidth, fitStickerWidth, fitPageWidth } from './media' -import { flex, flexGrow, flexWrap, flexColumn, flexColumnGrow } from './flex' +import { flex, flexGrow, flexWrap, flexColumn, flexColumnGrow, flexColumnWrap } from './flex' import { circle, size } from './shape' @@ -64,6 +64,7 @@ const css = { rowGrow: flexGrow, column: flexColumn, columnGrow: flexColumnGrow, + columnWrap: flexColumnWrap, mediaBreakPoints, media, fitContentWidth,