diff --git a/build/logo192.png b/build/logo192.png index 54767de..8eae122 100644 Binary files a/build/logo192.png and b/build/logo192.png differ diff --git a/build/logo512.png b/build/logo512.png index 54767de..9504d57 100644 Binary files a/build/logo512.png and b/build/logo512.png differ diff --git a/public/logo192.png b/public/logo192.png index 54767de..8eae122 100644 Binary files a/public/logo192.png and b/public/logo192.png differ diff --git a/public/logo512.png b/public/logo512.png index 54767de..9504d57 100644 Binary files a/public/logo512.png and b/public/logo512.png differ diff --git a/src/ts/components/CardWithBanner/index.tsx b/src/ts/components/CardWithBanner/index.tsx new file mode 100644 index 0000000..ef387e0 --- /dev/null +++ b/src/ts/components/CardWithBanner/index.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import themeSettings from 'ts/store/ThemeSettings'; + +import style from 'ts/components/CardWithIcon/index.module.scss'; + +interface ICardWithBannerProps { + long?: boolean; +} + +function CardWithBanner({ + long = false, +}: ICardWithBannerProps): React.ReactElement | null { + const config = themeSettings.getBanner(); + if (!config) return null; + + const { link, banner } = config; + const className = long + ? style.card_with_icon_long + : style.card_with_icon; + + return ( + + ); +} + +export default CardWithBanner; diff --git a/src/ts/components/CardWithIcon/index.module.scss b/src/ts/components/CardWithIcon/index.module.scss index 0f4d306..e319f95 100644 --- a/src/ts/components/CardWithIcon/index.module.scss +++ b/src/ts/components/CardWithIcon/index.module.scss @@ -7,12 +7,19 @@ min-height: 270px; margin: 0 24px 24px 0; padding: 16px; + vertical-align: top; + text-decoration: none; box-sizing: border-box; + border-radius: 8px; border: 1px solid var(--color-border); background-color: #FFFFFF; + background-repeat: repeat; + background-size: auto 100%; + background-position: center center; + &_icon { display: block; width: auto; @@ -59,7 +66,7 @@ .card_with_icon_long { width: 100%; - margin: 0 0 16px 0; + margin: 0 0 24px 0; } .card_with_icon:nth-child(2n+2) { diff --git a/src/ts/components/LineChart/index.tsx b/src/ts/components/LineChart/index.tsx index e12e5dd..ff88ca7 100644 --- a/src/ts/components/LineChart/index.tsx +++ b/src/ts/components/LineChart/index.tsx @@ -21,7 +21,10 @@ function LineChart({ details, className, }: ILineChartProps): React.ReactElement | null { - if (!value || value === 0) return null; + if (!value) return null; + if (options.suffix === 'stop') { + console.log('xxx'); + } const width = Math.round((value ?? 100) * (100 / options.max)); @@ -29,7 +32,7 @@ function LineChart({ return (
+ ); +} + +export default Banner; diff --git a/src/ts/components/Recommendations/index.tsx b/src/ts/components/Recommendations/index.tsx index 78dd9fd..8e54a24 100644 --- a/src/ts/components/Recommendations/index.tsx +++ b/src/ts/components/Recommendations/index.tsx @@ -4,6 +4,7 @@ import Title from 'ts/components/Title'; import localization from 'ts/helpers/Localization'; import Card from './components/Card'; +import Banner from './components/Banner'; import CardForPrint from './components/CardForPrint'; import recommendationStore from './store/index'; import style from './styles/index.module.scss'; @@ -35,6 +36,9 @@ function Recommendations({ ))); if (!cards.length) return null; + if (mode !== 'print') { + cards.push(); + } const title = localization.get('recommendations.title'); const className = mode === 'print' diff --git a/src/ts/components/Recommendations/styles/card.module.scss b/src/ts/components/Recommendations/styles/card.module.scss index 58325de..82c3407 100644 --- a/src/ts/components/Recommendations/styles/card.module.scss +++ b/src/ts/components/Recommendations/styles/card.module.scss @@ -13,6 +13,7 @@ vertical-align: top; box-sizing: border-box; white-space: normal; + text-decoration: none; page-break-inside: avoid; break-inside: avoid; @@ -103,5 +104,14 @@ background-color: var(--color-temp-bg); border-left-color: var(--color-temp-border); + + &_banner { + border-left-width: 1px; + border-left-color: var(--color-border); + + background-repeat: no-repeat; + background-size: 180% auto; + background-position: center center; + } } diff --git a/src/ts/components/SplashScreen/index.tsx b/src/ts/components/SplashScreen/index.tsx index 1a40527..28260a3 100644 --- a/src/ts/components/SplashScreen/index.tsx +++ b/src/ts/components/SplashScreen/index.tsx @@ -18,7 +18,7 @@ function SplashScreen(): React.ReactElement | null { return (
- +
diff --git a/src/ts/pages/PageWrapper/components/sidebar/Logo.tsx b/src/ts/pages/PageWrapper/components/sidebar/Logo.tsx index 1d765fe..708e6c5 100644 --- a/src/ts/pages/PageWrapper/components/sidebar/Logo.tsx +++ b/src/ts/pages/PageWrapper/components/sidebar/Logo.tsx @@ -5,26 +5,44 @@ import themeSettings from 'ts/store/ThemeSettings'; import style from '../../styles/logo.module.scss'; -function Logo() { +interface ILogoProps { + center?: boolean; +} + +function Logo({ center }: ILogoProps) { const { - icon, link, title, isOpenInNewTab, + isDefault, + icon, + link, + title, + isOpenInNewTab, } = themeSettings.getLogo(); return ( -
+
); } +Logo.defaultProps = { + center: false, +}; + export default Logo; diff --git a/src/ts/pages/PageWrapper/styles/logo.module.scss b/src/ts/pages/PageWrapper/styles/logo.module.scss index 079fadc..ad9fb74 100644 --- a/src/ts/pages/PageWrapper/styles/logo.module.scss +++ b/src/ts/pages/PageWrapper/styles/logo.module.scss @@ -2,36 +2,32 @@ .logo { display: block; - padding: 0 24px 0 0; - margin: 0 0 27px 0; + padding: 0 var(--space-xxl) 0 0; + margin: 0 0 var(--space-m) 0; text-align: center; text-decoration: none; box-sizing: border-box; border: none; + &_center { + padding: 0; + } + &_link { display: inline-block; text-decoration: none; } &_icon { - height: 20px; margin: 0 auto; text-decoration: none; } -} -.logo_title { - font-weight: bold; - font-size: 18px; - display: inline-block; - margin: 0 0 0 46px; - line-height: 32px; - vertical-align: middle; - text-align: center; - letter-spacing: 7px; - color: #DCE3F6; + &_default { + height: var(--space-xxl); + margin-bottom: var(--space-m); + } } @media (max-width: 1000px) { @@ -39,8 +35,4 @@ padding: 0; text-align: center; } - - .logo_title { - display: none; - } } diff --git a/src/ts/pages/PageWrapper/styles/switch.module.scss b/src/ts/pages/PageWrapper/styles/switch.module.scss index c2796fb..d463c55 100644 --- a/src/ts/pages/PageWrapper/styles/switch.module.scss +++ b/src/ts/pages/PageWrapper/styles/switch.module.scss @@ -4,7 +4,7 @@ display: block; width: calc(100% - 24px); padding: 4px; - margin: 0 0 40px 0; + margin: 0 0 28px 0; text-align: center; white-space: nowrap; box-sizing: border-box; diff --git a/src/ts/pages/Person/components/Speed.tsx b/src/ts/pages/Person/components/Speed.tsx index 8b53c8c..fcabcb6 100644 --- a/src/ts/pages/Person/components/Speed.tsx +++ b/src/ts/pages/Person/components/Speed.tsx @@ -4,6 +4,7 @@ import { observer } from 'mobx-react-lite'; import { getShortNumber } from 'ts/helpers/formatter'; import CardWithIcon from 'ts/components/CardWithIcon'; +import CardWithBanner from 'ts/components/CardWithBanner'; import NothingFound from 'ts/components/NothingFound'; import IsStaff from 'ts/components/NothingFound/components/IsStaff'; import PageWrapper from 'ts/components/Page/wrapper'; @@ -56,6 +57,7 @@ const Speed = observer(({ user }: IPersonCommonProps): React.ReactElement => { title="page.person.speed.line.title" description="page.person.speed.line.description" /> +
)} diff --git a/src/ts/pages/Person/components/Total.tsx b/src/ts/pages/Person/components/Total.tsx index 4f278a6..1dca88a 100644 --- a/src/ts/pages/Person/components/Total.tsx +++ b/src/ts/pages/Person/components/Total.tsx @@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'; import getAchievementByAuthor from 'ts/helpers/achievement/byAuthor'; import ACHIEVEMENT_TYPE from 'ts/helpers/achievement/constants/type'; +import CardWithBanner from 'ts/components/CardWithBanner'; import CardWithIcon from 'ts/components/CardWithIcon'; import Achievements from 'ts/components/Achievement'; import Description from 'ts/components/Description'; @@ -69,6 +70,7 @@ const Total = observer(({ user }: IPersonCommonProps): React.ReactElement => { title="page.team.total.commits.title" description="page.team.total.commits.description" /> + {false && } {false && <Character user={statistic} />} diff --git a/src/ts/pages/Team/components/PR/All.tsx b/src/ts/pages/Team/components/PR/All.tsx index a490285..c52671e 100644 --- a/src/ts/pages/Team/components/PR/All.tsx +++ b/src/ts/pages/Team/components/PR/All.tsx @@ -36,6 +36,7 @@ function AllPR({ order: dataGripStore.dataGrip.author.list, }); + console.log(commitsChart); return ( <DataView rowsForExcel={rowsForExcel} diff --git a/src/ts/pages/Team/components/Release.tsx b/src/ts/pages/Team/components/Release.tsx index c61d082..819b1f7 100644 --- a/src/ts/pages/Team/components/Release.tsx +++ b/src/ts/pages/Team/components/Release.tsx @@ -51,8 +51,7 @@ function ReleaseView({ response, updateSort, rowsForExcel, mode }: IReleaseViewP formatter={(row: any) => { const content = row.pr.map((commit: any) => ( dataGripStore?.dataGrip?.pr?.pr?.[commit.prId] - )); - console.log(dataGripStore?.dataGrip?.pr?.pr?.['2810']); + )).filter((item: any) => item?.firstCommit); return ( <AllPR // @ts-ignore response={{ content }} diff --git a/src/ts/store/ThemeSettings.ts b/src/ts/store/ThemeSettings.ts index 2110b7f..05049e4 100644 --- a/src/ts/store/ThemeSettings.ts +++ b/src/ts/store/ThemeSettings.ts @@ -1,5 +1,40 @@ import { makeObservable, observable, action } from 'mobx'; +const LOGO = { + isDefault: true, + icon: './assets/logo.svg', + isOpenInNewTab: false, +}; + +const EXTERNAL_LOGO = { + vk_frontend_du2: { + icon: './social/vk/frontend_du2.png', + banner: './social/vk/frontend_du2.jpg', + link: 'https://vk.com/frontend_du2', + title: 'Сообщество о веб-разработке и программировании', + }, + vk_take_off_staff: { + icon: './social/vk/take_off_staff.png', + banner: './social/vk/take_off_staff.jpg', + link: 'https://vk.com/takeoff_staff', + }, + vk_awesomejs: { + icon: './social/vk/awesomejs.png', + banner: './social/vk/awesomejs.jpg', + link: 'https://vk.com/awesomejs', + }, + vk_frontend_dev: { + icon: './social/vk/frontend_dev.png', + banner: './social/vk/frontend_dev.jpg', + link: 'https://vk.com/frontend_dev', + }, + vk_front_work: { + icon: './social/vk/front_work.png', + banner: './social/vk/front_work.jpg', + link: 'https://frontends.work/?ref=assayo', + }, +}; + class ThemeSettings { urlParameters: any = {}; @@ -15,12 +50,19 @@ class ThemeSettings { } getLogo() { - return { - icon: './assets/logo.svg', - link: '', - title: '', - isOpenInNewTab: false, - }; + let config = EXTERNAL_LOGO[this.urlParameters?.ref || '']; + if (!config) return LOGO; + + config.isOpenInNewTab = true; + return config; + } + + getBanner() { + let config = EXTERNAL_LOGO[this.urlParameters?.ref || '']; + if (!config) return null; + + config.isOpenInNewTab = true; + return config; } }