From 3ac14de6d12f1f2ad6ec2a78858ea6d31e6ead3b Mon Sep 17 00:00:00 2001 From: duanfei Date: Sun, 6 Jun 2021 18:10:37 +0800 Subject: [PATCH] style:rewrite style --- .editorconfig | 12 ++++++ .prettierrc | 5 +++ README-CN.md | 35 +++++++----------- README.md | 37 +++++++------------ gatsby-config.js | 2 +- src/components/Header/index.jsx | 2 +- src/components/Layout/style.module.scss | 3 +- .../LocationStat/LocationSummary.jsx | 4 +- src/components/LocationStat/index.jsx | 2 +- src/components/RunMap/RunMaker.jsx | 8 ++-- src/components/RunMap/RunMapButtons.jsx | 8 ++-- src/components/RunMap/index.jsx | 24 ++++++------ src/components/RunMap/style.module.scss | 22 +++++------ src/components/RunTable/RunRow.jsx | 6 ++- src/components/RunTable/index.jsx | 24 +++++------- src/components/SVGStat/style.module.scss | 1 - src/components/Stat/index.jsx | 10 ++++- src/components/Stat/style.module.scss | 3 ++ src/components/YearStat/index.jsx | 14 +++---- src/components/YearsStat/index.jsx | 9 ++--- src/pages/index.jsx | 2 +- src/styles/variables.scss | 6 ++- 22 files changed, 123 insertions(+), 116 deletions(-) create mode 100644 .editorconfig create mode 100644 .prettierrc create mode 100644 src/components/Stat/style.module.scss diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000000..4a7ea3036a2 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,12 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000000..0beac855690 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "semi": false, + "singleQuote": true, + "bracketSpacing": true +} diff --git a/README-CN.md b/README-CN.md index 6d4d8420171..928a1d68ad0 100644 --- a/README-CN.md +++ b/README-CN.md @@ -100,33 +100,24 @@ const MAPBOX_TOKEN = 'pk.eyJ1IjoieWlob25nMDYxOCIsImEiOiJja2J3M28xbG4wYzl0MzJxZm0 ## 一些个性化选项 -### 左上角的头像 - -修改 `src/utils/const.js` 里的 `export const AVATAR = - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTtc69JxHNcmN1ETpMUX4dozAgAN6iPjWalQ&usqp=CAU';` 换成你想要的图片的链接。 - -### 右上角默认的 Blog 和 About - -修改 `src/utils/const.js` 里的 `NAVS`，换成你想要的链接，如： - -```javascript -export const NAVS = [ - { text: 'Blog', link: 'https://yihong.run/running' }, - { text: 'About', link: 'https://github.com/yihong0618/running_page/blob/master/README-CN.md' }, -]; -``` - -你也可以自行添加多个链接，照葫芦画瓢即可。 - -### 页面标题与网站链接 - 在仓库目录下找到 `gatsby-config.js`，找到以下内容并修改成你自己想要的。 ```javascript siteMetadata: { - title: 'Running page', - siteUrl: 'https://yihong.run', + siteTitle: 'Running Page', #网站标题 + siteUrl: 'https://yihong.run', #网站域名 + logo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTtc69JxHNcmN1ETpMUX4dozAgAN6iPjWalQ&usqp=CAU', #左上角LOGO description: 'Personal site and blog', + navLinks: [ + { + name: 'Blog', #右上角导航名称 + url: 'https://yihong.run/running', #右上角导航链接 + }, + { + name: 'About', + url: 'https://github.com/yihong0618/running_page/blob/master/README-CN.md', + }, + ], }, ``` diff --git a/README.md b/README.md index 0a0a2bb0c1e..ea662751453 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@

-English | [简体中文](https://github.com/yihong0618/running_page/blob/master/README-CN.md)| [Wiki](https://wiki.mfydev.run/) +English | [简体中文](https://github.com/yihong0618/running_page/blob/master/README-CN.md) | [Wiki](https://wiki.mfydev.run/) ## [Runner's Page Show](https://github.com/yihong0618/running_page/issues/12) @@ -100,33 +100,24 @@ const MAPBOX_TOKEN = 'pk.eyJ1IjoieWlob25nMDYxOCIsImEiOiJja2J3M28xbG4wYzl0MzJxZm0 ## Custom your page -### avatar - -Modify `export const AVATAR = - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTtc69JxHNcmN1ETpMUX4dozAgAN6iPjWalQ&usqp=CAU';` Replace it with the link to the image you want. - -### NAVS - -Change `NAVS` in `src/utils/const.js` to the link you want, just like: - -```javascript -export const NAVS = [ - { text: 'Blog', link: 'https://yihong.run/running' }, - { text: 'About', link: 'https://github.com/yihong0618/running_page/blob/master/README-CN.md' }, -]; -``` - -You can also add multiple links, just like the above. - -### Title and site link - Find `gatsby-config.js` in the repository directory, find the following content, and change it to what you want. ```javascript siteMetadata: { - title: 'Running page', - siteUrl: 'https://yihong.run', + siteTitle: 'Running Page', #website title + siteUrl: 'https://yihong.run', #website url + logo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTtc69JxHNcmN1ETpMUX4dozAgAN6iPjWalQ&usqp=CAU', #logo img description: 'Personal site and blog', + navLinks: [ + { + name: 'Blog', #navigation name + url: 'https://yihong.run/running', #navigation url + }, + { + name: 'About', + url: 'https://github.com/yihong0618/running_page/blob/master/README-CN.md', + }, + ], }, ``` diff --git a/gatsby-config.js b/gatsby-config.js index b17c04df90c..a7254b0829c 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,7 +1,7 @@ module.exports = { pathPrefix: '/', // Change to `/running_page` when running on github pages siteMetadata: { - siteTitle: 'Running', + siteTitle: 'Running Page', siteUrl: 'https://yihong.run', logo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTtc69JxHNcmN1ETpMUX4dozAgAN6iPjWalQ&usqp=CAU', description: 'Personal site and blog', diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index 339076c4bb1..d62bad6dce4 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -2,7 +2,7 @@ import { Link } from 'gatsby'; import React from 'react'; import useSiteMetadata from 'src/hooks/useSiteMetadata'; -const Header = ({ siteTitle }) => { +const Header = () => { const { logo, siteUrl, navLinks } = useSiteMetadata(); return ( diff --git a/src/components/Layout/style.module.scss b/src/components/Layout/style.module.scss index d56c4d07806..b7a8760e013 100644 --- a/src/components/Layout/style.module.scss +++ b/src/components/Layout/style.module.scss @@ -13,6 +13,7 @@ text-decoration:none; } h1 { - font-size: 3.5rem; + font-size: 3rem; + font-weight: 700; } } diff --git a/src/components/LocationStat/LocationSummary.jsx b/src/components/LocationStat/LocationSummary.jsx index bda9de93134..90869b6d3bd 100644 --- a/src/components/LocationStat/LocationSummary.jsx +++ b/src/components/LocationStat/LocationSummary.jsx @@ -4,7 +4,9 @@ import useActivities from 'src/hooks/useActivities'; // only support China for now const LocationSummary = () => { - const { years, countries, provinces, cities } = useActivities(); + const { + years, countries, provinces, cities, + } = useActivities(); return (
diff --git a/src/components/LocationStat/index.jsx b/src/components/LocationStat/index.jsx index cd774eb3fd6..9e1a8a6ac48 100644 --- a/src/components/LocationStat/index.jsx +++ b/src/components/LocationStat/index.jsx @@ -8,7 +8,7 @@ import PeriodStat from './PeriodStat'; const LocationStat = ({ changeYear, changeCity, changeTitle }) => (
-

+

{CHINESE_LOCATION_INFO_MESSAGE_FIRST} .
diff --git a/src/components/RunMap/RunMaker.jsx b/src/components/RunMap/RunMaker.jsx index fc12ac67b44..957b6ce7a6b 100644 --- a/src/components/RunMap/RunMaker.jsx +++ b/src/components/RunMap/RunMaker.jsx @@ -1,10 +1,12 @@ +import EndSvg from 'assets/end.svg'; +import StartSvg from 'assets/start.svg'; import React from 'react'; import { Marker } from 'react-map-gl'; -import StartSvg from 'assets/start.svg'; -import EndSvg from 'assets/end.svg'; import styles from './style.module.scss'; -const RunMarker = ({ startLon, startLat, endLon, endLat }) => { +const RunMarker = ({ + startLon, startLat, endLon, endLat, +}) => { const size = 20; return (

diff --git a/src/components/RunMap/RunMapButtons.jsx b/src/components/RunMap/RunMapButtons.jsx index 402733d6821..fd517570377 100644 --- a/src/components/RunMap/RunMapButtons.jsx +++ b/src/components/RunMap/RunMapButtons.jsx @@ -1,6 +1,6 @@ -import React, { useState, useEffect } from 'react'; -import { MAIN_COLOR } from 'src/utils/const'; +import React, { useEffect, useState } from 'react'; import useActivities from 'src/hooks/useActivities'; +import { MAIN_COLOR } from 'src/utils/const'; import styles from './style.module.scss'; const RunMapButtons = ({ changeYear, thisYear, mapButtonYear }) => { @@ -23,10 +23,10 @@ const RunMapButtons = ({ changeYear, thisYear, mapButtonYear }) => { elements[index].style.color = 'white'; } if (elements[yearsButtons.indexOf(mapButtonYear)]) { - elements[yearsButtons.indexOf(mapButtonYear)].style.color = MAIN_COLOR + elements[yearsButtons.indexOf(mapButtonYear)].style.color = MAIN_COLOR; } setIndex(yearsButtons.indexOf(mapButtonYear)); - }) + }); return (
    diff --git a/src/components/RunMap/index.jsx b/src/components/RunMap/index.jsx index 25507726416..8b1ad9e68d0 100644 --- a/src/components/RunMap/index.jsx +++ b/src/components/RunMap/index.jsx @@ -1,16 +1,15 @@ -import React from 'react'; import MapboxLanguage from '@mapbox/mapbox-gl-language'; -import ReactMapGL, { Source, Layer } from 'react-map-gl'; +import React from 'react'; +import ReactMapGL, { Layer, Source } from 'react-map-gl'; +import useActivities from 'src/hooks/useActivities'; import { - MAPBOX_TOKEN, IS_CHINESE, - MAIN_COLOR, - PROVINCE_FILL_COLOR, + MAIN_COLOR, MAPBOX_TOKEN, + PROVINCE_FILL_COLOR } from 'src/utils/const'; -import {geoJsonForMap} from 'src/utils/utils' -import useActivities from 'src/hooks/useActivities'; -import RunMapButtons from './RunMapButtons'; +import { geoJsonForMap } from 'src/utils/utils'; import RunMarker from './RunMaker'; +import RunMapButtons from './RunMapButtons'; import styles from './style.module.scss'; const RunMap = ({ @@ -20,7 +19,7 @@ const RunMap = ({ changeYear, geoData, thisYear, - mapButtonYear + mapButtonYear, }) => { const { provinces } = useActivities(); const addControlHandler = (event) => { @@ -30,7 +29,7 @@ const RunMap = ({ map.addControl( new MapboxLanguage({ defaultLanguage: 'zh', - }) + }), ); map.setLayoutProperty('country-label-lg', 'text-field', [ 'get', @@ -47,9 +46,8 @@ const RunMap = ({ geoData = geoJsonForMap(); } - const isSingleRun = - geoData.features.length === 1 && - geoData.features[0].geometry.coordinates.length; + const isSingleRun = geoData.features.length === 1 + && geoData.features[0].geometry.coordinates.length; let startLon; let startLat; let endLon; diff --git a/src/components/RunMap/style.module.scss b/src/components/RunMap/style.module.scss index c891db4802d..f223a499c42 100644 --- a/src/components/RunMap/style.module.scss +++ b/src/components/RunMap/style.module.scss @@ -1,13 +1,14 @@ +@import '../../styles/variables.scss'; + .locationSVG { height: 100%; - width: 100%; + width: 100%; margin: 1rem 0 0; border: 0; padding: 0; } .buttons { - width: 90%; margin: 0 auto; } @@ -15,22 +16,21 @@ display: inline-block; position: relative; cursor: pointer; - width: 10%; - padding: 10px; - margin-top: 1px; - font-size: 10px; + width: 9%; + padding: 1.3rem; + margin-top: .1rem; + font-size: 1rem; text-align: center; - color: write; - font-family: sans-serif; - font-weight: bold; + color: white; + font-family: $global-font-family; } .runTitle { - height: 26px; + height: 29px; width: 710px; position: absolute; bottom: 0px; left: 120px; - font-family: sans-serif; + font-family: $global-font-family; cursor: pointer; } diff --git a/src/components/RunTable/RunRow.jsx b/src/components/RunTable/RunRow.jsx index 11e89e4bfda..435a0dec9c8 100644 --- a/src/components/RunTable/RunRow.jsx +++ b/src/components/RunTable/RunRow.jsx @@ -1,9 +1,11 @@ import React from 'react'; -import { formatPace, titleForRun } from 'src/utils/utils'; import { MAIN_COLOR } from 'src/utils/const'; +import { formatPace, titleForRun } from 'src/utils/utils'; import styles from './style.module.scss'; -const RunRow = ({ runs, run, locateActivity, runIndex, setRunIndex }) => { +const RunRow = ({ + runs, run, locateActivity, runIndex, setRunIndex, +}) => { const distance = (run.distance / 1000.0).toFixed(1); const pace = run.average_speed; diff --git a/src/components/RunTable/index.jsx b/src/components/RunTable/index.jsx index c202016ffc8..65b1a0a39b0 100644 --- a/src/components/RunTable/index.jsx +++ b/src/components/RunTable/index.jsx @@ -1,8 +1,8 @@ import React, { useState } from 'react'; +import { MAIN_COLOR } from 'src/utils/const'; +import { sortDateFunc, sortDateFuncReverse } from 'src/utils/utils'; import RunRow from './RunRow'; import styles from './style.module.scss'; -import { sortDateFunc, sortDateFuncReverse } from 'src/utils/utils'; -import { MAIN_COLOR } from 'src/utils/const'; const RunTable = ({ runs, @@ -13,18 +13,14 @@ const RunTable = ({ }) => { const [sortFuncInfo, setSortFuncInfo] = useState(''); // TODO refactor? - const sortKMFunc = (a, b) => - sortFuncInfo === 'KM' ? a.distance - b.distance : b.distance - a.distance; - const sortPaceFunc = (a, b) => - sortFuncInfo === 'Pace' - ? a.average_speed - b.average_speed - : b.average_speed - a.average_speed; - const sortBPMFunc = (a, b) => - sortFuncInfo === 'BPM' - ? a.average_heartrate - b.average_heartrate - : b.average_heartrate - a.average_heartrate; - const sortDateFuncClick = - sortFuncInfo === 'Date' ? sortDateFunc : sortDateFuncReverse; + const sortKMFunc = (a, b) => (sortFuncInfo === 'KM' ? a.distance - b.distance : b.distance - a.distance); + const sortPaceFunc = (a, b) => (sortFuncInfo === 'Pace' + ? a.average_speed - b.average_speed + : b.average_speed - a.average_speed); + const sortBPMFunc = (a, b) => (sortFuncInfo === 'BPM' + ? a.average_heartrate - b.average_heartrate + : b.average_heartrate - a.average_heartrate); + const sortDateFuncClick = sortFuncInfo === 'Date' ? sortDateFunc : sortDateFuncReverse; const sortFuncMap = new Map([ ['KM', sortKMFunc], ['Pace', sortPaceFunc], diff --git a/src/components/SVGStat/style.module.scss b/src/components/SVGStat/style.module.scss index dafb1f0bf6a..3347306b641 100644 --- a/src/components/SVGStat/style.module.scss +++ b/src/components/SVGStat/style.module.scss @@ -4,4 +4,3 @@ min-width: 700px; margin: 1rem 0 0; } - diff --git a/src/components/Stat/index.jsx b/src/components/Stat/index.jsx index 1b6d99d705e..1f9b92970d8 100644 --- a/src/components/Stat/index.jsx +++ b/src/components/Stat/index.jsx @@ -1,9 +1,15 @@ import React from 'react'; import { intComma } from 'src/utils/utils'; -const Stat = ({ value, description, className, citySize, onClick }) => ( +const divStyle = { + fontWeight: '700', +}; + +const Stat = ({ + value, description, className, citySize, onClick, +}) => (
    - {intComma(value)} + {intComma(value)} {description}
    ); diff --git a/src/components/Stat/style.module.scss b/src/components/Stat/style.module.scss new file mode 100644 index 00000000000..2e42bca79cb --- /dev/null +++ b/src/components/Stat/style.module.scss @@ -0,0 +1,3 @@ +.divStyle { + font-weight: '700'; +} diff --git a/src/components/YearStat/index.jsx b/src/components/YearStat/index.jsx index 85aca31c33f..a365fe9f707 100644 --- a/src/components/YearStat/index.jsx +++ b/src/components/YearStat/index.jsx @@ -1,8 +1,8 @@ import React from 'react'; -import useHover from 'src/hooks/useHover'; import Stat from 'src/components/Stat'; -import { formatPace } from 'src/utils/utils'; import useActivities from 'src/hooks/useActivities'; +import useHover from 'src/hooks/useHover'; +import { formatPace } from 'src/utils/utils'; import styles from './style.module.scss'; const YearStat = ({ year, onClick }) => { @@ -10,11 +10,9 @@ const YearStat = ({ year, onClick }) => { // for hover const [hovered, eventHandlers] = useHover(); // lazy Component - const YearSVG = React.lazy(() => - import(`assets/year_${year}.svg`).catch(() => ({ - default: () =>
    , - })) - ); + const YearSVG = React.lazy(() => import(`assets/year_${year}.svg`).catch(() => ({ + default: () =>
    , + }))); if (years.includes(year)) { runs = runs.filter((run) => run.start_date_local.slice(0, 4) === year); @@ -45,7 +43,7 @@ const YearStat = ({ year, onClick }) => { const avgPace = formatPace(pace / (runs.length - paceNullCount)); const hasHeartRate = !(heartRate === 0); const avgHeartRate = (heartRate / (runs.length - heartRateNullCount)).toFixed( - 0 + 0, ); return (
    { const { years } = useActivities(); @@ -15,7 +15,7 @@ const YearsStat = ({ year, onClick }) => { return (
    -

    +

    {INFO_MESSAGE(years.length, year)}

    @@ -24,9 +24,8 @@ const YearsStat = ({ year, onClick }) => { {yearsArrayUpdate.map((year) => ( ))} - {yearsArrayUpdate.hasOwnProperty('Total') ? - :
    - } + {yearsArrayUpdate.hasOwnProperty('Total') + ? :
    }
    ); }; diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 4b8ca397a7e..aef1042e9b5 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -81,7 +81,7 @@ export default () => { useEffect(() => { setViewport({ width: '100%', - height: 400, + height: 500, ...bounds, }); }, [geoData]); diff --git a/src/styles/variables.scss b/src/styles/variables.scss index ff15c4d6719..3f9db75d4da 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,8 +1,10 @@ -$global-font-family: "Helvetica Neue", "Helvetica", "Arial", - BlinkMacSystemFont, Segoe UI, Roboto, sans-serif; +$global-font-family: "Helvetica Neue", "Segoe UI", Arial, "Hiragino Sans GB", "Microsoft YaHei", Roboto,sans-serif; + + $breakpoint-mobile: 960px; $breakpoint-stack: 530px; $nike: rgb(224, 237, 94); $light: rgb(204, 204, 204); $dark: rgb(26, 26, 26); +$map-box-line-color:rgb(71, 184, 224)