Merge pull request #348 from duidae/jason/revert_style_refinement_PR

Jason/revert style refinement pr
twreporter · Jan 4, 2023 · 6cb662e · 6cb662e · vercel · Jan 4, 2023
2 parents 104876e + 94f13a2
commit 6cb662e
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 64 deletions.
diff --git a/packages/react-article-components/src/components/article-page.js b/packages/react-article-components/src/components/article-page.js
@@ -30,7 +30,7 @@ const _ = {
 
 const shiftLeftCss = css`
   position: relative;
-  /* 20px is border-(right|left) width of article page */
+  /* 20px is border-(right|left) width of articlePage */
   width: calc(100% + 20px);
   left: -10px;
 `
@@ -111,8 +111,8 @@ const DesktopAsideBlock = styled.div`
 
 const MetadataAndToolsBlock = styled.div`
   ${mq.mobileOnly`
-    padding-top: 33px;
-    padding-bottom: 33px;
+    padding-top: 40px;
+    padding-bottom: 60px;
   `}
 
   ${mq.tabletOnly`
@@ -192,7 +192,7 @@ const BackgroundBlock = styled(BorderBox)`
     }
   }
 
-  /* border-(right|left) of article page */
+  /* boreder-(right|left) of articlePage */
   padding-left: 10px;
   padding-right: 10px;
 `

diff --git a/packages/react-article-components/src/components/aside/metadata.js b/packages/react-article-components/src/components/aside/metadata.js
@@ -201,8 +201,7 @@ const MetadataContainer = styled.div`
   letter-spacing: 0.4px;
 
   ${mq.mobileOnly`
-    padding-left: 24px;
-    padding-right: 24px;
+    width: calc(300/355*100%);
     margin: 0 auto;
   `}
 

diff --git a/packages/react-article-components/src/components/body/index.js b/packages/react-article-components/src/components/body/index.js
@@ -84,8 +84,7 @@ const largeWidthCSS = css`
 
 const normalWidthCSS = css`
   ${mq.mobileOnly`
-    padding-left: 34px;
-    padding-right: 34px;
+    width: calc(300/375*100%);
   `}
   ${mq.tabletOnly`
     width: 453px;

diff --git a/packages/react-article-components/src/components/leading/normal.js b/packages/react-article-components/src/components/leading/normal.js
@@ -28,8 +28,7 @@ const TextBlock = styled.div`
   margin: 0 auto;
 
   ${mq.mobileOnly`
-    padding-left: 24px;
-    padding-right: 24px;
+    width: calc(327/375*100%);
   `}
 
   ${mq.tabletOnly`
@@ -50,7 +49,6 @@ const Title = styled.h1`
 
   ${mq.mobileOnly`
     font-size: 34px;
-    margin-bottom: 38px;
   `}
 
   ${mq.tabletAndAbove`
@@ -111,16 +109,8 @@ const FigCaption = styled.figcaption`
 
 const BackgroundBlock = styled.div`
   ${props => getBackgroundBlockStyles(props.theme.name)}
-  ${mq.hdOnly`
-    padding-top: 100px;
-  `}
-  ${mq.desktopOnly`
-    padding-top: 48px;
-  `}
+  padding-top: 30px;
   ${mq.tabletOnly`
-    padding-top: 32px;
-  `}
-  ${mq.mobileOnly`
     padding-top: 30px;
   `}
 `

diff --git a/packages/react-components/src/bookmark-list/bookmarks.js b/packages/react-components/src/bookmark-list/bookmarks.js
@@ -37,10 +37,10 @@ const PageContainer = styled.div`
 const Column = styled.div`
   margin: 0 auto;
   width: 97%;
-  max-width: 922px;
+  max-width: 834px;
   ${mq.tabletOnly`
     width: 100%;
-    max-width: 698px;
+    max-width: 707px;
   `}
   ${mq.mobileOnly`
     width: 100%;
@@ -49,12 +49,8 @@ const Column = styled.div`
 
 const StatusBar = styled.div`
   ${mq.mobileOnly`
-    padding-left: 24px;
-    padding-right: 24px;
-    padding-bottom: 24px;
-  `}
-  ${mq.tabletOnly`
-    padding-bottom: 32px;
+    padding-left: 1em;
+    padding-right: 1em;
   `}
   padding-bottom: 64px;
   width: stretch;

diff --git a/packages/react-components/src/listing-page/components/list-item.js b/packages/react-components/src/listing-page/components/list-item.js
@@ -29,7 +29,7 @@ const Container = styled.div`
     width: ${mockup.tablet.cardWidth}px;
   `}
   ${mq.mobileOnly`
-    width: 100%;
+    width: ${(mockup.mobile.cardWidth / mockup.mobile.maxWidth) * 100}%;
   `}
 
   a {

diff --git a/packages/react-components/src/listing-page/components/list.js b/packages/react-components/src/listing-page/components/list.js
@@ -5,12 +5,12 @@ import styled from 'styled-components'
 import entityPaths from '@twreporter/core/lib/constants/entity-path'
 import mq from '@twreporter/core/lib/utils/media-query'
 import { date2yyyymmdd } from '@twreporter/core/lib/utils/date'
+import { fontWeight } from '@twreporter/core/lib/constants/font'
 // constants
 import mockup from '../constants/mockup-spec'
+import color from '../constants/color'
 // components
 import ListItem from './list-item'
-import PageContent from './page-content'
-import { TitleBar } from '../../title-bar'
 import FetchingWrapper from '../../is-fetching-wrapper'
 // lodash
 import forEach from 'lodash/forEach'
@@ -23,9 +23,26 @@ const _ = {
   map,
 }
 
+const Container = styled.div`
+  margin: 45px auto 0 auto;
+`
+
+const Header = styled.div`
+  font-size: 36px;
+  font-weight: ${fontWeight.bold};
+  color: ${color.darkDarkGray};
+  margin: 0 auto 45px auto;
+  text-align: center;
+
+  ${mq.mobileOnly`
+    width: ${(mockup.mobile.cardWidth / mockup.mobile.maxWidth) * 100}%;
+    text-align: left;
+  `}
+`
+
 const FlexItems = styled.div`
   width: ${mockup.hd.maxWidth}px;
-  margin: 64px auto 0;
+  margin: 0 auto;
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
@@ -41,12 +58,10 @@ const FlexItems = styled.div`
 
   ${mq.tabletOnly`
     width: ${mockup.tablet.maxWidth}px;
-    margin-top: 32px;
   `}
 
   ${mq.mobileOnly`
     width: 100%;
-    margin-top: 24px;
     > div:nth-child(odd) {
       margin-right: 0;
     }
@@ -107,16 +122,14 @@ class List extends PureComponent {
       )
     })
     const headerTitle = catName || (tagName ? `#${tagName}` : '')
-    const headerJSX = headerTitle ? (
-      <TitleBar title={headerTitle ?? ''} />
-    ) : null
+    const headerJSX = headerTitle ? <Header>{headerTitle}</Header> : null
     return (
-      <PageContent>
+      <Container>
         {headerJSX}
         <Items isFetching={isFetching} showSpinner={showSpinner}>
           {listJSX}
         </Items>
-      </PageContent>
+      </Container>
     )
   }
 }

diff --git a/packages/react-components/src/listing-page/components/topics/index.js b/packages/react-components/src/listing-page/components/topics/index.js
@@ -6,14 +6,13 @@ import FetchingWrapper from '../../../is-fetching-wrapper'
 import PostsContainer from './posts'
 import PostItem from './post-item'
 import TopicItem from './topic-item'
-import PageContent from '../page-content'
-import { TopSectionContent, ListSectionContent } from './section'
+import PageContent from './page-content'
+import { TopSectionContent, ListSectionContent, SectionTitle } from './section'
 // constants
 import { TEXT } from '../../constants/topics'
 import color from '../../constants/color'
 // @twreporter
 import { fontWeight } from '@twreporter/core/lib/constants/font'
-import { TitleBar } from '@twreporter/react-components/lib/title-bar'
 // lodash
 import get from 'lodash/get'
 import map from 'lodash/map'
@@ -98,11 +97,9 @@ class Topics extends Component {
       topTopicName = _.get(topics, [0, 'topic_name'], '')
       topicUrl = _.get(topics, [0, 'linkTo'], '')
       topSectionJSX = [
-        <TitleBar
-          key="top-title"
-          title="深度專題"
-          subtitle={TEXT.SECTION_TITLE_FEATURED}
-        />,
+        <SectionTitle key="top-title">
+          {TEXT.SECTION_TITLE_FEATURED}
+        </SectionTitle>,
         <TopSectionContent
           key="top-section"
           topicName={topTopicName}
@@ -126,7 +123,7 @@ class Topics extends Component {
       <PageContent>
         {topSectionJSX}
         {isFetching && isFirstPage ? null : (
-          <TitleBar subtitle={TEXT.SECTION_TITLE_OTHERS} />
+          <SectionTitle>{TEXT.SECTION_TITLE_OTHERS}</SectionTitle>
         )}
         <WrappedListSectionContent
           isFetching={isFetching}

diff --git a/...c/listing-page/components/page-content.js → ...ng-page/components/topics/page-content.js b/...c/listing-page/components/page-content.js → ...ng-page/components/topics/page-content.js
@@ -1,13 +1,13 @@
 import styled from 'styled-components'
-import { resetLinkStyle } from '../constants/predefined-css'
+import { resetLinkStyle } from '../../constants/predefined-css'
 import mq from '@twreporter/core/lib/utils/media-query'
 
 const styles = {
   contentWidth: {
     min: 300, // px
-    mobile: 100, // %
-    tablet: 698, // px
-    desktop: 922, // px
+    mobile: 95, // %
+    tablet: 700, // px
+    desktop: 870, // px
   },
   titlePadding: 0,
   titleMargin: {

diff --git a/packages/react-components/src/listing-page/components/topics/section.js b/packages/react-components/src/listing-page/components/topics/section.js
@@ -16,14 +16,13 @@ const styles = {
   goToTopicMargin: [20, 'auto', 0, 'auto'],
   goToTopicPadding: [14, 0, 14, 0],
   sectionMargin: {
-    mobile: [24, 0, 36, 0],
-    tablet: [32, 0, 64, 0],
-    desktop: [64, 0, 64, 0],
+    mobile: [0, 0, 35, 0],
+    tablet: [0, 0, 42, 0],
+    desktop: [0, 0, 60, 0],
   },
   titleMargin: {
     mobile: [0, 0, 24, 0],
-    tablet: [0, 0, 32, 0],
-    desktop: [0, 0, 64, 0],
+    tablet: [0, 0, 42, 0],
   },
   titlePadding: [16, 0, 16, 0],
 }
@@ -34,11 +33,22 @@ const StyledLink = styled(Link)`
   margin: ${arrayToCssShorthand(styles.goToTopicMargin)};
 `
 
-const SectionContent = styled.div`
+const SectionTitle = styled.div`
   width: 100%;
-  ${mq.mobileOnly`
-    margin: ${arrayToCssShorthand(styles.sectionMargin.mobile)};
+  border-bottom: 2px solid ${color.gray};
+  padding: ${arrayToCssShorthand(styles.titlePadding)};
+  color: ${color.darkGray};
+  font-size: 18px;
+  font-weight: ${fontWeight.bold};
+  line-height: 1;
+  margin: ${arrayToCssShorthand(styles.titleMargin.mobile)};
+  ${mq.tabletAndAbove`
+    margin: ${arrayToCssShorthand(styles.titleMargin.tablet)};
   `}
+`
+const SectionContent = styled.div`
+  width: 100%;
+  margin: ${arrayToCssShorthand(styles.sectionMargin.mobile)};
   ${mq.tabletOnly`
     margin: ${arrayToCssShorthand(styles.sectionMargin.tablet)};
   `}
@@ -104,4 +114,4 @@ ListSectionContent.propTypes = {
   children: PropTypes.node.isRequired,
 }
 
-export { TopSectionContent, ListSectionContent }
+export { TopSectionContent, ListSectionContent, SectionTitle }
diff --git a/packages/react-components/src/listing-page/constants/mockup-spec.js b/packages/react-components/src/listing-page/constants/mockup-spec.js
@@ -4,7 +4,7 @@ const marginBetweenItems = 20
 export default {
   marginBetweenItems,
   mobile: {
-    maxWidth: 325 * 2 + marginBetweenItems,
+    maxWidth: 375,
     cardWidth: 325,
     tagsWidth: 240,
     imgHeight: 205,

diff --git a/packages/react-components/src/title-bar/components/bar.js b/packages/react-components/src/title-bar/components/bar.js
@@ -23,8 +23,8 @@ const BarContainer = styled.div`
 
 const TitleBar = ({ title = '', subtitle = '' }) => (
   <BarContainer>
-    {title ? <H1 text={title} /> : null}
-    {subtitle ? <P1 text={subtitle} weight="bold" /> : null}
+    <H1 text={title} />
+    <P1 text={subtitle} weight="bold" />
     <Divider direction="horizontal" />
   </BarContainer>
 )