From 73865eb2097dde827444144c38bd1d36f8ecc967 Mon Sep 17 00:00:00 2001 From: Max Karkowski Date: Fri, 17 Jul 2020 08:44:02 +0200 Subject: [PATCH] Rewrite styles to scss and use i respective components --- public/index.html | 38 ++--- src/components/App.tsx | 36 ++--- src/components/{ => Badge}/Badge.tsx | 20 +-- .../components/Badge/badge.scss | 0 src/components/{ => Branding}/Branding.tsx | 16 +- .../components/Branding/branding.scss | 4 +- src/components/{ => Fadeable}/Fadeable.tsx | 21 ++- .../components/Fadeable/fadeable.scss | 0 src/components/Flag.tsx | 20 --- src/components/Flag/Flag.tsx | 24 +++ .../flag.css => src/components/Flag/flag.scss | 0 src/components/Footer.tsx | 22 --- src/components/Footer/Footer.tsx | 21 +++ .../components/Footer/footer.scss | 0 src/components/FooterEnd.tsx | 25 --- src/components/FooterEnd/FooterEnd.tsx | 41 +++++ .../components/FooterEnd/footerend.scss | 0 src/components/Header.tsx | 76 --------- src/components/Header/Header.tsx | 67 ++++++++ src/components/HeadlineGroup.tsx | 11 -- .../HeadlineGroup/HeadlineGroup.tsx | 6 + .../HeadlineGroup/headline-group.scss | 0 src/components/HeroHeadline.tsx | 10 -- src/components/HeroHeadline/HeroHeadline.tsx | 10 ++ .../HeroHeadline/hero-headline.scss | 0 src/components/{ => Item}/Item.tsx | 24 +-- .../item.css => src/components/Item/item.scss | 0 src/components/ItemList.tsx | 34 ---- src/components/ItemList/ItemList.tsx | 32 ++++ .../components/ItemList/item-list.scss | 0 src/components/ItemRevision.tsx | 15 -- src/components/ItemRevision/ItemRevision.tsx | 17 ++ .../ItemRevision/item-revision.scss | 0 src/components/ItemRevisions.tsx | 18 --- .../ItemRevisions/ItemRevisions.tsx | 18 +++ .../ItemRevisions/item-revisions.scss | 0 src/components/{ => Link}/Link.tsx | 10 +- .../link.css => src/components/Link/link.scss | 0 src/components/LogoLink.tsx | 19 --- src/components/LogoLink/LogoLink.tsx | 16 ++ .../components/LogoLink/logo-link.scss | 0 src/components/PageHelp.tsx | 49 ------ src/components/PageHelp/PageHelp.tsx | 95 +++++++++++ src/components/PageIndex.tsx | 35 ---- src/components/PageIndex/PageIndex.tsx | 31 ++++ src/components/{ => PageItem}/PageItem.tsx | 142 +++++++---------- .../components/PageItem/item-page.scss | 25 +-- src/components/PageItemMobile.tsx | 75 --------- .../PageItemMobile/PageItemMobile.tsx | 74 +++++++++ src/components/PageOverview.tsx | 150 ------------------ src/components/PageOverview/PageOverview.tsx | 129 +++++++++++++++ .../{ => PageQuadrant}/PageQuadrant.tsx | 24 +-- .../{ => PageToolbox}/PageToolbox.tsx | 21 ++- src/components/QuadrantGrid.tsx | 23 --- src/components/QuadrantGrid/QuadrantGrid.tsx | 17 ++ .../QuadrantGrid/quadrant-grid.scss | 0 src/components/QuadrantSection.tsx | 76 --------- .../QuadrantSection/QuadrantSection.tsx | 71 +++++++++ .../QuadrantSection/quadrant-section.scss | 0 src/components/Router.tsx | 56 +++---- src/components/{ => Search}/Search.tsx | 52 +++--- .../components/Search/search.scss | 6 +- {public => src}/fonts/clanot-bold.otf | Bin {public => src}/fonts/clanot-medium.otf | Bin {public => src}/fonts/clanot-news.otf | Bin {public => src}/fonts/clanot-thin.otf | Bin {public => src}/icons/back.svg | 0 {public => src}/icons/close.svg | 0 {public => src}/icons/overview.svg | 0 {public => src}/icons/pie.svg | 0 {public => src}/icons/question.svg | 0 {public => src}/icons/search.svg | 0 src/{index.css => index.scss} | 16 ++ src/index.tsx | 4 +- styles/base.css => src/styles/base.scss | 12 +- .../styles/components/button.scss | 0 .../styles/components/content.scss | 0 .../styles/components/filter.scss | 0 .../styles/components/footnote.scss | 0 .../styles/components/headline.scss | 0 .../styles/components/hljs.scss | 0 .../styles/components/icon-link.scss | 4 +- src/styles/components/icon.scss | 33 ++++ .../styles/components/letter-index.scss | 0 .../styles/components/markdown.scss | 0 .../nav.css => src/styles/components/nav.scss | 0 .../styles/components/page.scss | 0 .../styles/components/publish-date.scss | 0 .../styles/components/ring-list.scss | 0 .../styles/components/social-icon.scss | 0 .../styles/components/split.scss | 0 src/styles/main.scss | 17 ++ styles/components/icon.css | 33 ---- styles/main.css | 2 - 94 files changed, 969 insertions(+), 974 deletions(-) rename src/components/{ => Badge}/Badge.tsx (59%) rename styles/components/badge.css => src/components/Badge/badge.scss (100%) rename src/components/{ => Branding}/Branding.tsx (56%) rename styles/components/branding.css => src/components/Branding/branding.scss (99%) rename src/components/{ => Fadeable}/Fadeable.tsx (58%) rename styles/components/fadeable.css => src/components/Fadeable/fadeable.scss (100%) delete mode 100644 src/components/Flag.tsx create mode 100644 src/components/Flag/Flag.tsx rename styles/components/flag.css => src/components/Flag/flag.scss (100%) delete mode 100644 src/components/Footer.tsx create mode 100644 src/components/Footer/Footer.tsx rename styles/components/footer.css => src/components/Footer/footer.scss (100%) delete mode 100644 src/components/FooterEnd.tsx create mode 100644 src/components/FooterEnd/FooterEnd.tsx rename styles/components/footerend.css => src/components/FooterEnd/footerend.scss (100%) delete mode 100644 src/components/Header.tsx create mode 100644 src/components/Header/Header.tsx delete mode 100644 src/components/HeadlineGroup.tsx create mode 100644 src/components/HeadlineGroup/HeadlineGroup.tsx rename styles/components/headline-group.css => src/components/HeadlineGroup/headline-group.scss (100%) delete mode 100644 src/components/HeroHeadline.tsx create mode 100644 src/components/HeroHeadline/HeroHeadline.tsx rename styles/components/hero-headline.css => src/components/HeroHeadline/hero-headline.scss (100%) rename src/components/{ => Item}/Item.tsx (55%) rename styles/components/item.css => src/components/Item/item.scss (100%) delete mode 100644 src/components/ItemList.tsx create mode 100644 src/components/ItemList/ItemList.tsx rename styles/components/item-list.css => src/components/ItemList/item-list.scss (100%) delete mode 100644 src/components/ItemRevision.tsx create mode 100644 src/components/ItemRevision/ItemRevision.tsx rename styles/components/item-revision.css => src/components/ItemRevision/item-revision.scss (100%) delete mode 100644 src/components/ItemRevisions.tsx create mode 100644 src/components/ItemRevisions/ItemRevisions.tsx rename styles/components/item-revisions.css => src/components/ItemRevisions/item-revisions.scss (100%) rename src/components/{ => Link}/Link.tsx (77%) rename styles/components/link.css => src/components/Link/link.scss (100%) delete mode 100644 src/components/LogoLink.tsx create mode 100644 src/components/LogoLink/LogoLink.tsx rename styles/components/logo-link.css => src/components/LogoLink/logo-link.scss (100%) delete mode 100644 src/components/PageHelp.tsx create mode 100644 src/components/PageHelp/PageHelp.tsx delete mode 100644 src/components/PageIndex.tsx create mode 100644 src/components/PageIndex/PageIndex.tsx rename src/components/{ => PageItem}/PageItem.tsx (62%) rename styles/components/item-page.css => src/components/PageItem/item-page.scss (66%) delete mode 100644 src/components/PageItemMobile.tsx create mode 100644 src/components/PageItemMobile/PageItemMobile.tsx delete mode 100644 src/components/PageOverview.tsx create mode 100644 src/components/PageOverview/PageOverview.tsx rename src/components/{ => PageQuadrant}/PageQuadrant.tsx (53%) rename src/components/{ => PageToolbox}/PageToolbox.tsx (61%) delete mode 100644 src/components/QuadrantGrid.tsx create mode 100644 src/components/QuadrantGrid/QuadrantGrid.tsx rename styles/components/quadrant-grid.css => src/components/QuadrantGrid/quadrant-grid.scss (100%) delete mode 100644 src/components/QuadrantSection.tsx create mode 100644 src/components/QuadrantSection/QuadrantSection.tsx rename styles/components/quadrant-section.css => src/components/QuadrantSection/quadrant-section.scss (100%) rename src/components/{ => Search}/Search.tsx (51%) rename styles/components/search.css => src/components/Search/search.scss (94%) rename {public => src}/fonts/clanot-bold.otf (100%) rename {public => src}/fonts/clanot-medium.otf (100%) rename {public => src}/fonts/clanot-news.otf (100%) rename {public => src}/fonts/clanot-thin.otf (100%) rename {public => src}/icons/back.svg (100%) rename {public => src}/icons/close.svg (100%) rename {public => src}/icons/overview.svg (100%) rename {public => src}/icons/pie.svg (100%) rename {public => src}/icons/question.svg (100%) rename {public => src}/icons/search.svg (100%) rename src/{index.css => index.scss} (61%) rename styles/base.css => src/styles/base.scss (80%) rename styles/components/button.css => src/styles/components/button.scss (100%) rename styles/components/content.css => src/styles/components/content.scss (100%) rename styles/components/filter.css => src/styles/components/filter.scss (100%) rename styles/components/footnote.css => src/styles/components/footnote.scss (100%) rename styles/components/headline.css => src/styles/components/headline.scss (100%) rename styles/components/hljs.css => src/styles/components/hljs.scss (100%) rename styles/components/icon-link.css => src/styles/components/icon-link.scss (94%) create mode 100644 src/styles/components/icon.scss rename styles/components/letter-index.css => src/styles/components/letter-index.scss (100%) rename styles/components/markdown.css => src/styles/components/markdown.scss (100%) rename styles/components/nav.css => src/styles/components/nav.scss (100%) rename styles/components/page.css => src/styles/components/page.scss (100%) rename styles/components/publish-date.css => src/styles/components/publish-date.scss (100%) rename styles/components/ring-list.css => src/styles/components/ring-list.scss (100%) rename styles/components/social-icon.css => src/styles/components/social-icon.scss (100%) rename styles/components/split.css => src/styles/components/split.scss (100%) create mode 100644 src/styles/main.scss delete mode 100644 styles/components/icon.css delete mode 100644 styles/main.css diff --git a/public/index.html b/public/index.html index 7758eff..c17ef27 100644 --- a/public/index.html +++ b/public/index.html @@ -1,19 +1,16 @@ + + + + + + - - - - - - + + - - - - - - - React App - + React App + - - -
- - - - \ No newline at end of file + + diff --git a/src/components/App.tsx b/src/components/App.tsx index 2e2e2f0..f5b4340 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1,42 +1,40 @@ import React, { useState } from 'react'; import classNames from 'classnames'; -import Header from './Header'; -import Footer from './Footer'; +import Header from './Header/Header'; +import Footer from './Footer/Footer'; import Router from './Router'; import { BrowserRouter, Switch, Route, Redirect, useParams } from 'react-router-dom'; -import radardata from '../rd.json' +import radardata from '../rd.json'; import { Item } from '../model'; const A = () => { - const {page} = useParams() - return -} + const { page } = useParams(); + return ; +}; export default function App() { - const [isFaded] = useState(false) + const [isFaded] = useState(false); return (
-
-
-
+
+
+
- diff --git a/src/components/Badge.tsx b/src/components/Badge/Badge.tsx similarity index 59% rename from src/components/Badge.tsx rename to src/components/Badge/Badge.tsx index 5d27cfe..68b3488 100644 --- a/src/components/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -1,24 +1,20 @@ import React, { MouseEventHandler } from 'react'; import classNames from 'classnames'; - +import './badge.scss'; type BadgeProps = { - onClick?: MouseEventHandler - big?: boolean - type: "big" | "all" | "adopt" | "trial" | "assess" | "hold" | "empty" -} + onClick?: MouseEventHandler; + big?: boolean; + type: 'big' | 'all' | 'adopt' | 'trial' | 'assess' | 'hold' | 'empty'; +}; export default function Badge({ onClick, big, type, children }: React.PropsWithChildren) { const Comp = typeof onClick ? 'a' : 'span'; return ( diff --git a/styles/components/badge.css b/src/components/Badge/badge.scss similarity index 100% rename from styles/components/badge.css rename to src/components/Badge/badge.scss diff --git a/src/components/Branding.tsx b/src/components/Branding/Branding.tsx similarity index 56% rename from src/components/Branding.tsx rename to src/components/Branding/Branding.tsx index 46e5277..0987e89 100644 --- a/src/components/Branding.tsx +++ b/src/components/Branding/Branding.tsx @@ -1,20 +1,16 @@ import React from 'react'; import classNames from 'classnames'; - +import './branding.scss'; type BrandingProps = { - logoContent: React.ReactNode - modifier?: "backlink" | "logo" | "content" | "footer" -} + logoContent: React.ReactNode; + modifier?: 'backlink' | 'logo' | 'content' | 'footer'; +}; export default function Branding({ logoContent, modifier, children }: React.PropsWithChildren) { return (
-
- {logoContent} -
-
- {children} -
+
{logoContent}
+
{children}
); } diff --git a/styles/components/branding.css b/src/components/Branding/branding.scss similarity index 99% rename from styles/components/branding.css rename to src/components/Branding/branding.scss index 0b5e8bc..d4a2a21 100644 --- a/styles/components/branding.css +++ b/src/components/Branding/branding.scss @@ -13,6 +13,7 @@ &__logo { flex: 0 0 200px; + & img { display: inline-block; } @@ -30,6 +31,7 @@ &--footer { display: block; text-align: center; + .branding__logo { margin: 0 0 15px; } @@ -39,4 +41,4 @@ @media (--until-xl) { margin: 15px 0 0; } -} +} \ No newline at end of file diff --git a/src/components/Fadeable.tsx b/src/components/Fadeable/Fadeable.tsx similarity index 58% rename from src/components/Fadeable.tsx rename to src/components/Fadeable/Fadeable.tsx index 00238e4..b81f045 100644 --- a/src/components/Fadeable.tsx +++ b/src/components/Fadeable/Fadeable.tsx @@ -1,17 +1,17 @@ import React, { useState, useEffect } from 'react'; import classNames from 'classnames'; - +import './fadeable.scss'; type FadeableProps = { - leaving: boolean - onLeave: () => void -} + leaving: boolean; + onLeave: () => void; +}; export default function Fadeable({ leaving, onLeave, children }: React.PropsWithChildren) { - const [faded, setFaded] = useState(leaving) + const [faded, setFaded] = useState(leaving); useEffect(() => { - setFaded(leaving) - }, [leaving]) + setFaded(leaving); + }, [leaving]); const handleTransitionEnd = () => { if (faded) { @@ -20,11 +20,8 @@ export default function Fadeable({ leaving, onLeave, children }: React.PropsWith }; return ( -
+
{children}
); -}; +} diff --git a/styles/components/fadeable.css b/src/components/Fadeable/fadeable.scss similarity index 100% rename from styles/components/fadeable.css rename to src/components/Fadeable/fadeable.scss diff --git a/src/components/Flag.tsx b/src/components/Flag.tsx deleted file mode 100644 index ef8f881..0000000 --- a/src/components/Flag.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; - -interface ItemFlag { - flag: "default" | "new" | "changed" -} - -export default function Flag({ item, short = false }: {item: ItemFlag, short?: boolean}) { - const ucFirst = (s: string) => s.charAt(0).toUpperCase() + s.slice(1); - - if (item.flag !== 'default') { - let name = item.flag.toUpperCase(); - let title = ucFirst(item.flag); - if (short === true) { - name = title[0] - } - return {name}; - } - - return null; -} diff --git a/src/components/Flag/Flag.tsx b/src/components/Flag/Flag.tsx new file mode 100644 index 0000000..2824c03 --- /dev/null +++ b/src/components/Flag/Flag.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import './flag.scss'; +interface ItemFlag { + flag: 'default' | 'new' | 'changed'; +} + +export default function Flag({ item, short = false }: { item: ItemFlag; short?: boolean }) { + const ucFirst = (s: string) => s.charAt(0).toUpperCase() + s.slice(1); + + if (item.flag !== 'default') { + let name = item.flag.toUpperCase(); + let title = ucFirst(item.flag); + if (short === true) { + name = title[0]; + } + return ( + + {name} + + ); + } + + return null; +} diff --git a/styles/components/flag.css b/src/components/Flag/flag.scss similarity index 100% rename from styles/components/flag.css rename to src/components/Flag/flag.scss diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx deleted file mode 100644 index 32a6954..0000000 --- a/src/components/Footer.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; -import Branding from './Branding'; -import FooterEnd from './FooterEnd'; -import { assetUrl, getItemPageNames, isMobileViewport } from '../config'; -import { Item } from '../model'; - -export default function Footer({ items, pageName }: {items: Item[], pageName: string}) { - return ( -
- } - > - - AOE is a leading global provider of services for digital transformation and digital business models. AOE relies exclusively on established Enterprise Open Source technologies. This leads to innovative solutions, digital products and portals in agile software projects, and helps build long-lasting, strategic partnerships with our customers. - - - -
- ); -} diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx new file mode 100644 index 0000000..fad7b5b --- /dev/null +++ b/src/components/Footer/Footer.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import classNames from 'classnames'; +import Branding from '../Branding/Branding'; +import FooterEnd from '../FooterEnd/FooterEnd'; +import { assetUrl, getItemPageNames, isMobileViewport } from '../../config'; +import { Item } from '../../model'; +import './footer.scss'; +export default function Footer({ items, pageName }: { items: Item[]; pageName: string }) { + return ( +
+ }> + + AOE is a leading global provider of services for digital transformation and digital business models. AOE relies exclusively on established Enterprise + Open Source technologies. This leads to innovative solutions, digital products and portals in agile software projects, and helps build long-lasting, + strategic partnerships with our customers. + + + +
+ ); +} diff --git a/styles/components/footer.css b/src/components/Footer/footer.scss similarity index 100% rename from styles/components/footer.css rename to src/components/Footer/footer.scss diff --git a/src/components/FooterEnd.tsx b/src/components/FooterEnd.tsx deleted file mode 100644 index e209294..0000000 --- a/src/components/FooterEnd.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; - -export default function FooterEnd({modifier}: {modifier?: "in-sidebar"}) { - return ( - - ); -} diff --git a/src/components/FooterEnd/FooterEnd.tsx b/src/components/FooterEnd/FooterEnd.tsx new file mode 100644 index 0000000..fcf2895 --- /dev/null +++ b/src/components/FooterEnd/FooterEnd.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import classNames from 'classnames'; +import './footerend.scss'; +export default function FooterEnd({ modifier }: { modifier?: 'in-sidebar' }) { + return ( +
+
+
+

Follow us:

+
+ +
+ +
+ ); +} diff --git a/styles/components/footerend.css b/src/components/FooterEnd/footerend.scss similarity index 100% rename from styles/components/footerend.css rename to src/components/FooterEnd/footerend.scss diff --git a/src/components/Header.tsx b/src/components/Header.tsx deleted file mode 100644 index 626837e..0000000 --- a/src/components/Header.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import React, { useState, useRef, MouseEventHandler } from 'react'; -import classNames from 'classnames'; -import Branding from './Branding'; -import Link from './Link'; -import LogoLink from './LogoLink'; -import Search from './Search'; -import { radarNameShort } from '../config'; -import { useHistory } from 'react-router-dom'; - -export default function Header({ pageName }: { pageName: string }) { - const [searchOpen, setSearchOpen] = useState(false) - const [search, setSearch] = useState('') - const history = useHistory() - const searchRef = useRef(null) - - const openSearch = () => { - setSearchOpen(true) - } - - const closeSearch = () => { - setSearchOpen(false) - } - - const handleSearchChange = setSearch - - const handleSearchSubmit = () => { - history.location.search = search - - setSearchOpen(false) - setSearch('') - } - - const handleOpenClick = (e: React.MouseEvent) => { - // e.preventDefault(); // todo used to be a link - openSearch(); - setTimeout(() => { - searchRef?.current?.focus(); - }, 0); - } - - const smallLogo = pageName !== 'index'; - - return ( - } - > -
-
- - How to Use {radarNameShort}? - -
-
- - Technologies Overview - -
-
- -
- -
-
-
- - ); -} diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx new file mode 100644 index 0000000..649cd77 --- /dev/null +++ b/src/components/Header/Header.tsx @@ -0,0 +1,67 @@ +import React, { useState, useRef, MouseEventHandler } from 'react'; +import classNames from 'classnames'; +import Branding from '../Branding/Branding'; +import Link from '../Link/Link'; +import LogoLink from '../LogoLink/LogoLink'; +import Search from '../Search/Search'; +import { radarNameShort } from '../../config'; +import { useHistory } from 'react-router-dom'; + +export default function Header({ pageName }: { pageName: string }) { + const [searchOpen, setSearchOpen] = useState(false); + const [search, setSearch] = useState(''); + const history = useHistory(); + const searchRef = useRef(null); + + const openSearch = () => { + setSearchOpen(true); + }; + + const closeSearch = () => { + setSearchOpen(false); + }; + + const handleSearchChange = setSearch; + + const handleSearchSubmit = () => { + history.location.search = search; + + setSearchOpen(false); + setSearch(''); + }; + + const handleOpenClick = (e: React.MouseEvent) => { + // e.preventDefault(); // todo used to be a link + openSearch(); + setTimeout(() => { + searchRef?.current?.focus(); + }, 0); + }; + + const smallLogo = pageName !== 'index'; + + return ( + }> +
+
+ + How to Use {radarNameShort}? + +
+
+ + Technologies Overview + +
+
+ +
+ +
+
+
+ + ); +} diff --git a/src/components/HeadlineGroup.tsx b/src/components/HeadlineGroup.tsx deleted file mode 100644 index 7c5fdb9..0000000 --- a/src/components/HeadlineGroup.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; - -export default function({ children, secondary = false }: React.PropsWithChildren<{secondary?: boolean}>) { - return ( -
- {children} -
- ); -} diff --git a/src/components/HeadlineGroup/HeadlineGroup.tsx b/src/components/HeadlineGroup/HeadlineGroup.tsx new file mode 100644 index 0000000..4e1ba3c --- /dev/null +++ b/src/components/HeadlineGroup/HeadlineGroup.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import classNames from 'classnames'; +import './headline-group.scss'; +export default function ({ children, secondary = false }: React.PropsWithChildren<{ secondary?: boolean }>) { + return
{children}
; +} diff --git a/styles/components/headline-group.css b/src/components/HeadlineGroup/headline-group.scss similarity index 100% rename from styles/components/headline-group.css rename to src/components/HeadlineGroup/headline-group.scss diff --git a/src/components/HeroHeadline.tsx b/src/components/HeroHeadline.tsx deleted file mode 100644 index 1fe024f..0000000 --- a/src/components/HeroHeadline.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; - -export default function({ children, alt }: React.PropsWithChildren<{alt?: string}>) { - return ( -
- {children} - {alt} -
- ); -} diff --git a/src/components/HeroHeadline/HeroHeadline.tsx b/src/components/HeroHeadline/HeroHeadline.tsx new file mode 100644 index 0000000..60c7bc9 --- /dev/null +++ b/src/components/HeroHeadline/HeroHeadline.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import './hero-headline.scss'; +export default function ({ children, alt }: React.PropsWithChildren<{ alt?: string }>) { + return ( +
+ {children} + {alt} +
+ ); +} diff --git a/styles/components/hero-headline.css b/src/components/HeroHeadline/hero-headline.scss similarity index 100% rename from styles/components/hero-headline.css rename to src/components/HeroHeadline/hero-headline.scss diff --git a/src/components/Item.tsx b/src/components/Item/Item.tsx similarity index 55% rename from src/components/Item.tsx rename to src/components/Item/Item.tsx index 53f8c37..dc47c0a 100644 --- a/src/components/Item.tsx +++ b/src/components/Item/Item.tsx @@ -1,17 +1,17 @@ import React from 'react'; import classNames from 'classnames'; -import Link from './Link'; -import Flag from './Flag'; -import { Item as mItem } from '../model'; - +import Link from '../Link/Link'; +import Flag from '../Flag/Flag'; +import { Item as mItem } from '../../model'; +import './item.scss'; type ItemProps = { - item: mItem - noLeadingBorder?: boolean - active?: boolean - style: React.CSSProperties -} + item: mItem; + noLeadingBorder?: boolean; + active?: boolean; + style: React.CSSProperties; +}; -export default function Item({ item, noLeadingBorder = false, active = false, style = {}}: ItemProps) { +export default function Item({ item, noLeadingBorder = false, active = false, style = {} }: ItemProps) { return ( -
+
{item.title}
- {item.info &&
{item.info}
} + {item.info &&
{item.info}
} ); } diff --git a/styles/components/item.css b/src/components/Item/item.scss similarity index 100% rename from styles/components/item.css rename to src/components/Item/item.scss diff --git a/src/components/ItemList.tsx b/src/components/ItemList.tsx deleted file mode 100644 index b03102c..0000000 --- a/src/components/ItemList.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import Item from './Item'; -import { Item as mItem } from '../model' - -type ItemListProps = { - items: mItem[] - activeItem?: mItem - noLeadingBorder?: boolean - headerStyle?: React.CSSProperties - itemStyle?: React.CSSProperties[] -} - -export default function ItemList({ children, items, activeItem, noLeadingBorder, headerStyle = {}, itemStyle = [] }: React.PropsWithChildren) { - return ( -
-
- {children} -
-
- { - items.map((item, i) => ( - - )) - } -
-
- ); -} diff --git a/src/components/ItemList/ItemList.tsx b/src/components/ItemList/ItemList.tsx new file mode 100644 index 0000000..4a77f28 --- /dev/null +++ b/src/components/ItemList/ItemList.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import Item from '../Item/Item'; +import { Item as mItem } from '../../model'; +import './item-list.scss'; +type ItemListProps = { + items: mItem[]; + activeItem?: mItem; + noLeadingBorder?: boolean; + headerStyle?: React.CSSProperties; + itemStyle?: React.CSSProperties[]; +}; + +export default function ItemList({ children, items, activeItem, noLeadingBorder, headerStyle = {}, itemStyle = [] }: React.PropsWithChildren) { + return ( +
+
+ {children} +
+
+ {items.map((item, i) => ( + + ))} +
+
+ ); +} diff --git a/styles/components/item-list.css b/src/components/ItemList/item-list.scss similarity index 100% rename from styles/components/item-list.css rename to src/components/ItemList/item-list.scss diff --git a/src/components/ItemRevision.tsx b/src/components/ItemRevision.tsx deleted file mode 100644 index 3485f0c..0000000 --- a/src/components/ItemRevision.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import Badge from './Badge'; -import { formatRelease } from '../date'; -import { Revision } from '../model'; - -export default function ItemRevision({ revision }: {revision: Revision}) { - return ( -
-
- {revision.ring} | {formatRelease(revision.release)} -
-
-
- ); -} diff --git a/src/components/ItemRevision/ItemRevision.tsx b/src/components/ItemRevision/ItemRevision.tsx new file mode 100644 index 0000000..8411103 --- /dev/null +++ b/src/components/ItemRevision/ItemRevision.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import Badge from '../Badge/Badge'; +import { formatRelease } from '../../date'; +import { Revision } from '../../model'; + +export default function ItemRevision({ revision }: { revision: Revision }) { + return ( +
+
+ + {revision.ring} | {formatRelease(revision.release)} + +
+
+
+ ); +} diff --git a/styles/components/item-revision.css b/src/components/ItemRevision/item-revision.scss similarity index 100% rename from styles/components/item-revision.css rename to src/components/ItemRevision/item-revision.scss diff --git a/src/components/ItemRevisions.tsx b/src/components/ItemRevisions.tsx deleted file mode 100644 index ad6ea08..0000000 --- a/src/components/ItemRevisions.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import HeadlineGroup from './HeadlineGroup'; -import ItemRevision from './ItemRevision'; -import { Revision } from '../model'; - -export default function ItemRevisions({ revisions }: {revisions: Revision[]}) { - return ( -
- -

Revisions:

- - - {revisions.map(revision => ( - - ))} -
- ); -} diff --git a/src/components/ItemRevisions/ItemRevisions.tsx b/src/components/ItemRevisions/ItemRevisions.tsx new file mode 100644 index 0000000..72202a3 --- /dev/null +++ b/src/components/ItemRevisions/ItemRevisions.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import HeadlineGroup from '../HeadlineGroup/HeadlineGroup'; +import ItemRevision from '../ItemRevision/ItemRevision'; +import { Revision } from '../../model'; +import './item-revisions.scss'; +export default function ItemRevisions({ revisions }: { revisions: Revision[] }) { + return ( +
+ +

Revisions:

+ + + {revisions.map((revision) => ( + + ))} +
+ ); +} diff --git a/styles/components/item-revisions.css b/src/components/ItemRevisions/item-revisions.scss similarity index 100% rename from styles/components/item-revisions.css rename to src/components/ItemRevisions/item-revisions.scss diff --git a/src/components/Link.tsx b/src/components/Link/Link.tsx similarity index 77% rename from src/components/Link.tsx rename to src/components/Link/Link.tsx index c9fb1cc..8a4eb11 100644 --- a/src/components/Link.tsx +++ b/src/components/Link/Link.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { Link as RLink } from 'react-router-dom'; - +import './link.scss'; type LinkProps = { - pageName: string - style?: React.CSSProperties - className?: string -} + pageName: string; + style?: React.CSSProperties; + className?: string; +}; function Link({ pageName, children, className, style = {} }: React.PropsWithChildren) { return ( diff --git a/styles/components/link.css b/src/components/Link/link.scss similarity index 100% rename from styles/components/link.css rename to src/components/Link/link.scss diff --git a/src/components/LogoLink.tsx b/src/components/LogoLink.tsx deleted file mode 100644 index ea98581..0000000 --- a/src/components/LogoLink.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; -import Link from './Link'; -import { assetUrl, radarNameShort } from '../config'; - -export default function LogoLink({ small = false }: { small?: boolean }) { - return ( - - - - {radarNameShort} - - {radarNameShort} - - - - ); -} - diff --git a/src/components/LogoLink/LogoLink.tsx b/src/components/LogoLink/LogoLink.tsx new file mode 100644 index 0000000..5223266 --- /dev/null +++ b/src/components/LogoLink/LogoLink.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import classNames from 'classnames'; +import Link from '../Link/Link'; +import { assetUrl, radarNameShort } from '../../config'; +import './logo-link.scss'; +export default function LogoLink({ small = false }: { small?: boolean }) { + return ( + + + + {radarNameShort} + {radarNameShort} + + + ); +} diff --git a/styles/components/logo-link.css b/src/components/LogoLink/logo-link.scss similarity index 100% rename from styles/components/logo-link.css rename to src/components/LogoLink/logo-link.scss diff --git a/src/components/PageHelp.tsx b/src/components/PageHelp.tsx deleted file mode 100644 index 1993355..0000000 --- a/src/components/PageHelp.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import HeroHeadline from './HeroHeadline'; -import Fadeable from './Fadeable'; -import SetTitle from './SetTitle'; -import { radarName } from '../config'; - -export default function PageHelp({ leaving, onLeave}: {leaving: boolean, onLeave: () => void}) { - return ( - - - How to use the {radarName} -
-

Introduction

-

Technology is moving fast and new technologies and innovations appear continuously.

-

It's essential for a development and technology company such as AOE to constantly improve and keep track with the latest useful innovations. - It is important to openly look for innovations and new technologies and to question established technologies and methods every now and then.

-

But, it is also important to wisely choose which technologies to use in our daily work and in the different projects we are carrying out. As we all know: There is no silver bullet.

-

What is the {radarName}

-

The Tech Radar is an overview of different technologies - from languages, frameworks, tools and patterns to platforms - that we consider "new or mentionable". - The radar therefore doesn't provide an overview of all established technologies - but it focuses on items that have recently gained in importance or changed. -

-

How it is created

The items in the technology radar are raised by the different teams and therefore a lot of the items are related to the work and challenges the teams face in the different projects. In fact, we don't include anything on the radar, which we haven't already tried ourselves at least once.

-

There have been a lot of valuable discussions in different expert groups about the classification and details of each of technologies and innovations. And the result of all this can be found in the latest technology radar.

-

How should it be used

-

The radar acts as an overview of technologies that we think everyone in the teams should currently know about.

-

Its goal is to act as a guide and inspiration for the daily work in the teams. Its purpose is also to provide helpful information and a bird's-eye perspective - so that decisions can be taken with a much deeper understanding of the subject matter. This results in more-informed and better-aligned decisions.

-

We also hope that developers outside of AOE find the informations in our technologie overview inspirational.

-

We group or categorize the items in 4 quadrants - (sometimes, when it's not 100% clear where a item belongs, we choose the best fit).

-

The quadrants are:

-
    -
  • Languages and Frameworks: We've placed development languages (such as Scala or Golang) here, as well as more low-level development frameworks (such as Play or Symfony), which are useful for implementing custom software of all kinds.
    • -
  • Tools: Here we put different software tools - from small helpers to bigger software projects
    • -
  • Methods and Patterns: Patterns are so important, and a lot of them are valid for a long time (compared to some tools or frameworks). So, this is the category where we put information on methods and patterns concerning development, continuous x, testing, organization, architecture, etc.
    • -
  • Platforms and Services (including AOE internal Services): Here we include infrastructure platforms and services. We also use this category to communicate news about AOE services that we want all AOE teams to be aware of.
    • -
-

Each of the items is classified in one of these rings:

-
    -
  • Adopt: We can clearly recommend this technology. We have used it for longer period of time in many teams and it has proven to be stable and useful.
    • -
  • Trial: We have used it with success and recommend to have a closer look at the technology in this ring. The goal of items here is to look at them more closely, with the goal to bring them to the adopt level.
    • -
  • Assess: We have tried it out and we find it promising. We recommend having a look at these items when you face a specific need for the technology in your project.
    • -
  • Hold: This category is a bit special. Unlike the others, we recommend to stop doing or using something. That does not mean that there are bad and it often might be ok to use them in existing projects. But we move things here if we think we shouldn't do them anymore - because we see better options or alternatives now.
    • -
-

Contributions and source code of the radar are on github: AOE Tech Radar on Github

- - -
- - ); -} diff --git a/src/components/PageHelp/PageHelp.tsx b/src/components/PageHelp/PageHelp.tsx new file mode 100644 index 0000000..051c0c0 --- /dev/null +++ b/src/components/PageHelp/PageHelp.tsx @@ -0,0 +1,95 @@ +import React from 'react'; +import HeroHeadline from '../HeroHeadline/HeroHeadline'; +import Fadeable from '../Fadeable/Fadeable'; +import SetTitle from '../SetTitle'; +import { radarName } from '../../config'; + +export default function PageHelp({ leaving, onLeave }: { leaving: boolean; onLeave: () => void }) { + return ( + + + How to use the {radarName} +
+

Introduction

+

Technology is moving fast and new technologies and innovations appear continuously.

+

+ It's essential for a development and technology company such as AOE to constantly improve and keep track with the latest useful innovations. It is + important to openly look for innovations and new technologies and to question established technologies and methods every now and then. +

+

+ But, it is also important to wisely choose which technologies to use in our daily work and in the different projects we are carrying out. As we all + know: There is no silver bullet. +

+

What is the {radarName}

+

+ The Tech Radar is an overview of different technologies - from languages, frameworks, tools and patterns to platforms - that we consider "new or + mentionable". The radar therefore doesn't provide an overview of all established technologies - but it focuses on items that have recently gained in + importance or changed. +

+

How it is created

+

+ The items in the technology radar are raised by the different teams and therefore a lot of the items are related to the work and challenges the teams + face in the different projects. In fact, we don't include anything on the radar, which we haven't already tried ourselves at least once. +

+

+ There have been a lot of valuable discussions in different expert groups about the classification and details of each of technologies and innovations. + And the result of all this can be found in the latest technology radar. +

+

How should it be used

+

The radar acts as an overview of technologies that we think everyone in the teams should currently know about.

+

+ Its goal is to act as a guide and inspiration for the daily work in the teams. Its purpose is also to provide helpful information and a bird's-eye + perspective - so that decisions can be taken with a much deeper understanding of the subject matter. This results in more-informed and better-aligned + decisions. +

+

We also hope that developers outside of AOE find the informations in our technologie overview inspirational.

+

We group or categorize the items in 4 quadrants - (sometimes, when it's not 100% clear where a item belongs, we choose the best fit).

+

The quadrants are:

+
    +
  • + Languages and Frameworks: We've placed development languages (such as Scala or Golang) here, as well as more low-level development + frameworks (such as Play or Symfony), which are useful for implementing custom software of all kinds.{' '} +
    • +
  • + Tools: Here we put different software tools - from small helpers to bigger software projects +
    • +
  • + Methods and Patterns: Patterns are so important, and a lot of them are valid for a long time (compared to some tools or + frameworks). So, this is the category where we put information on methods and patterns concerning development, continuous x, testing, organization, + architecture, etc. +
    • +
  • + Platforms and Services (including AOE internal Services): Here we include infrastructure platforms and services. We also use this + category to communicate news about AOE services that we want all AOE teams to be aware of. +
    • +
+

Each of the items is classified in one of these rings:

+
    +
  • + Adopt: We can clearly recommend this technology. We have used it for longer period of time in many teams and it has proven to be + stable and useful. +
    • +
  • + Trial: We have used it with success and recommend to have a closer look at the technology in this ring. The goal of items here is + to look at them more closely, with the goal to bring them to the adopt level. +
    • +
  • + Assess: We have tried it out and we find it promising. We recommend having a look at these items when you face a specific need for + the technology in your project. +
    • +
  • + Hold: This category is a bit special. Unlike the others, we recommend to stop doing or using something. That does not mean that + there are bad and it often might be ok to use them in existing projects. But we move things here if we think we shouldn't do them anymore - because + we see better options or alternatives now. +
    • +
+

+ Contributions and source code of the radar are on github:{' '} + + AOE Tech Radar on Github + +

+
+ + ); +} diff --git a/src/components/PageIndex.tsx b/src/components/PageIndex.tsx deleted file mode 100644 index 5c2bcb5..0000000 --- a/src/components/PageIndex.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import { formatRelease } from '../date'; -import { featuredOnly, Item } from '../model'; -import HeroHeadline from './HeroHeadline'; -import QuadrantGrid from './QuadrantGrid'; -import Fadeable from './Fadeable'; -import SetTitle from './SetTitle'; -import { radarName, radarNameShort } from '../config'; -import { MomentInput } from 'moment'; - -type PageIndexProps = { - leaving: boolean - onLeave: () => void - items: Item[] - releases: MomentInput[] -} - -export default function PageIndex({ leaving, onLeave, items, releases }: PageIndexProps) { - const newestRelease = releases.slice(-1)[0]; - const numberOfReleases = releases.length; - return ( - - -
- - {radarName} - -
- -
- Published {formatRelease(newestRelease)} -
- - ); -} diff --git a/src/components/PageIndex/PageIndex.tsx b/src/components/PageIndex/PageIndex.tsx new file mode 100644 index 0000000..7b313e5 --- /dev/null +++ b/src/components/PageIndex/PageIndex.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { formatRelease } from '../../date'; +import { featuredOnly, Item } from '../../model'; +import HeroHeadline from '../HeroHeadline/HeroHeadline'; +import QuadrantGrid from '../QuadrantGrid/QuadrantGrid'; +import Fadeable from '../Fadeable/Fadeable'; +import SetTitle from '../SetTitle'; +import { radarName, radarNameShort } from '../../config'; +import { MomentInput } from 'moment'; + +type PageIndexProps = { + leaving: boolean; + onLeave: () => void; + items: Item[]; + releases: MomentInput[]; +}; + +export default function PageIndex({ leaving, onLeave, items, releases }: PageIndexProps) { + const newestRelease = releases.slice(-1)[0]; + const numberOfReleases = releases.length; + return ( + + +
+ {radarName} +
+ +
Published {formatRelease(newestRelease)}
+ + ); +} diff --git a/src/components/PageItem.tsx b/src/components/PageItem/PageItem.tsx similarity index 62% rename from src/components/PageItem.tsx rename to src/components/PageItem/PageItem.tsx index 20f82e8..83da719 100644 --- a/src/components/PageItem.tsx +++ b/src/components/PageItem/PageItem.tsx @@ -1,20 +1,18 @@ import React, { useEffect, useState } from 'react'; -import Badge from './Badge'; -import ItemList from './ItemList'; -import Link from './Link'; -import FooterEnd from './FooterEnd'; -import SetTitle from './SetTitle'; -import ItemRevisions from './ItemRevisions'; -import { createAnimation, createAnimationRunner } from '../animation'; - -import { translate } from '../config'; -import { groupByQuadrants, Item } from '../model'; +import Badge from '../Badge/Badge'; +import ItemList from '../ItemList/ItemList'; +import Link from '../Link/Link'; +import FooterEnd from '../FooterEnd/FooterEnd'; +import SetTitle from '../SetTitle'; +import ItemRevisions from '../ItemRevisions/ItemRevisions'; +import { createAnimation, createAnimationRunner } from '../../animation'; +import './item-page.scss'; +import { translate } from '../../config'; +import { groupByQuadrants, Item } from '../../model'; const getItem = (pageName: string, items: Item[]) => { const [quadrantName, itemName] = pageName.split('/'); - const item = items.filter( - item => item.quadrant === quadrantName && item.name === itemName, - )[0]; + const item = items.filter((item) => item.quadrant === quadrantName && item.name === itemName)[0]; return item; }; @@ -25,11 +23,11 @@ const getItemsInRing = (pageName: string, items: Item[]) => { }; type PageItemProps = { - pageName: string - items: Item[] - leaving: boolean - onLeave: () => void -} + pageName: string; + items: Item[]; + leaving: boolean; + onLeave: () => void; +}; export default function PageItem({ pageName, items, leaving, onLeave }: PageItemProps) { const itemsInRing = getItemsInRing(pageName, items); @@ -44,7 +42,7 @@ export default function PageItem({ pageName, items, leaving, onLeave }: PageItem transition: 'transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98)', transform: 'translateX(0)', }, - 0, + 0 ), navHeader: createAnimation( { @@ -56,7 +54,7 @@ export default function PageItem({ pageName, items, leaving, onLeave }: PageItem transform: 'translateX(0px)', opacity: '1', }, - 300, + 300 ), text: createAnimation( { @@ -68,7 +66,7 @@ export default function PageItem({ pageName, items, leaving, onLeave }: PageItem transform: 'translateY(0px)', opacity: '1', }, - 600, + 600 ), items: itemsInRing.map((item, i) => createAnimation( @@ -81,8 +79,8 @@ export default function PageItem({ pageName, items, leaving, onLeave }: PageItem transform: 'translateX(0px)', opacity: '1', }, - 400 + 100 * i, - ), + 400 + 100 * i + ) ), footer: createAnimation( { @@ -95,16 +93,12 @@ export default function PageItem({ pageName, items, leaving, onLeave }: PageItem transform: 'translateX(0px)', opacity: '1', }, - 600 + itemsInRing.length * 100, + 600 + itemsInRing.length * 100 ), }; const animationsOut = { - background: createAnimation( - animationsIn.background.stateB, - animationsIn.background.stateA, - 300 + itemsInRing.length * 50, - ), + background: createAnimation(animationsIn.background.stateB, animationsIn.background.stateA, 300 + itemsInRing.length * 50), navHeader: createAnimation( animationsIn.navHeader.stateB, { @@ -112,7 +106,7 @@ export default function PageItem({ pageName, items, leaving, onLeave }: PageItem transform: 'translateX(40px)', opacity: '0', }, - 0, + 0 ), text: createAnimation( animationsIn.text.stateB, @@ -121,7 +115,7 @@ export default function PageItem({ pageName, items, leaving, onLeave }: PageItem transition: 'opacity 150ms ease-out, transform 300ms ease-out', opacity: '0', }, - 0, + 0 ), items: itemsInRing.map((item, i) => createAnimation( @@ -131,8 +125,8 @@ export default function PageItem({ pageName, items, leaving, onLeave }: PageItem transform: 'translateX(40px)', opacity: '0', }, - 100 + 50 * i, - ), + 100 + 50 * i + ) ), footer: createAnimation( animationsIn.text.stateB, @@ -141,23 +135,23 @@ export default function PageItem({ pageName, items, leaving, onLeave }: PageItem transform: 'translateX(40px)', opacity: '0', }, - 200 + itemsInRing.length * 50, + 200 + itemsInRing.length * 50 ), }; const [animations, setAnimations] = useState(); - useEffect(()=>{ + useEffect(() => { if (leaving) { // entering from an other page // setAnimations(createAnimationRunner(animationsIn).getState()) } else { // Hard refresh - setAnimations(null) + setAnimations(null); } - }, [leaving]) + }, [leaving]); - const [stateLeaving, setStateLeaving] = useState(leaving) + const [stateLeaving, setStateLeaving] = useState(leaving); let [animationRunner, setAnimationRunner] = useState(); @@ -198,73 +192,49 @@ export default function PageItem({ pageName, items, leaving, onLeave }: PageItem return (
-
-
-
-
-

{translate(item.quadrant)}

+
+
+
+
+

{translate(item.quadrant)}

- -
-
+ +
+
{item.ring}
-
- - Quadrant - Overview - +
+ + + Quadrant Overview +
-
- +
+
-
-
-
-
-
-

- {item.title} -

+
+
+
+
+
+

{item.title}

-
+
{item.ring}
-
- {item.revisions.length > 1 && ( - - )} +
+ {item.revisions.length > 1 && }
diff --git a/styles/components/item-page.css b/src/components/PageItem/item-page.scss similarity index 66% rename from styles/components/item-page.css rename to src/components/PageItem/item-page.scss index 3e2d408..5098267 100644 --- a/styles/components/item-page.css +++ b/src/components/PageItem/item-page.scss @@ -22,19 +22,26 @@ &__nav { background: var(--color-gray-dark); - flex: 0 0 calc((100vw - 1200px) / 2 + 400px); - &__inner { - box-sizing: border-box; - float: right; - width: 410px; - padding: 0 40px 0 10px; - } + flex-grow: 0; + flex-shrink: 0; + flex-basis: calc(((100vw - 1200px) / 2) + 400px); + } + + &__nav__inner { + box-sizing: border-box; + float: right; + width: 410px; + padding: 0 40px 0 10px; } &__content { transform: translate3d(0, 0, 0); - flex: 0 0 calc((100vw - 1200px) / 2 + 800px); + //flex: 0 0 calc((100vw - 1200px) / 2 + 800px); + flex-grow: 0; + flex-shrink: 0; + flex-basis: calc((100vw - 1200px) / 2 + 800px); background: var(--color-white); + &__inner { box-sizing: border-box; width: 810px; @@ -52,4 +59,4 @@ &__aside { padding: 20px 0 } -} +} \ No newline at end of file diff --git a/src/components/PageItemMobile.tsx b/src/components/PageItemMobile.tsx deleted file mode 100644 index e2c1164..0000000 --- a/src/components/PageItemMobile.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import React from 'react'; -import Badge from './Badge'; -import ItemList from './ItemList'; -import Link from './Link'; -import Fadeable from './Fadeable'; -import SetTitle from './SetTitle'; -import ItemRevisions from './ItemRevisions'; - -import { translate } from '../config'; -import { groupByQuadrants, Item } from '../model'; - -type PageItemMobileProps = { - pageName: string - items: Item[] - leaving: boolean - onLeave: () => void -} - -export default function PageItemMobile({ pageName, items, leaving, onLeave }: PageItemMobileProps) { - const getItem = (pageName: string, items: Item[]) => { - const [quadrantName, itemName] = pageName.split('/'); - const item = items.filter(item => item.quadrant === quadrantName && item.name === itemName)[0]; - return item; - } - - const getItemsInRing = (pageName: string, items: Item[]) => { - const item = getItem(pageName, items); - const itemsInRing = groupByQuadrants(items)[item.quadrant][item.ring]; - return itemsInRing; - }; - - const item = getItem(pageName, items); - const itemsInRing = getItemsInRing(pageName, items); - return ( - - -
-
-
-
-
-
-

{translate(item.quadrant)}

-

{item.title}

-
-
- {item.ring} -
-
-
-
- {item.revisions.length > 1 && } -
-
-
- - - ); -} diff --git a/src/components/PageItemMobile/PageItemMobile.tsx b/src/components/PageItemMobile/PageItemMobile.tsx new file mode 100644 index 0000000..0878412 --- /dev/null +++ b/src/components/PageItemMobile/PageItemMobile.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import Badge from '../Badge/Badge'; +import ItemList from '../ItemList/ItemList'; +import Link from '../Link/Link'; +import Fadeable from '../Fadeable/Fadeable'; +import SetTitle from '../SetTitle'; +import ItemRevisions from '../ItemRevisions/ItemRevisions'; + +import { translate } from '../../config'; +import { groupByQuadrants, Item } from '../../model'; + +type PageItemMobileProps = { + pageName: string; + items: Item[]; + leaving: boolean; + onLeave: () => void; +}; + +export default function PageItemMobile({ pageName, items, leaving, onLeave }: PageItemMobileProps) { + const getItem = (pageName: string, items: Item[]) => { + const [quadrantName, itemName] = pageName.split('/'); + const item = items.filter((item) => item.quadrant === quadrantName && item.name === itemName)[0]; + return item; + }; + + const getItemsInRing = (pageName: string, items: Item[]) => { + const item = getItem(pageName, items); + const itemsInRing = groupByQuadrants(items)[item.quadrant][item.ring]; + return itemsInRing; + }; + + const item = getItem(pageName, items); + const itemsInRing = getItemsInRing(pageName, items); + return ( + + +
+
+
+
+
+
+

{translate(item.quadrant)}

+

{item.title}

+
+
+ + {item.ring} + +
+
+
+
+ {item.revisions.length > 1 && } +
+
+
+ + + ); +} diff --git a/src/components/PageOverview.tsx b/src/components/PageOverview.tsx deleted file mode 100644 index c0dfa3d..0000000 --- a/src/components/PageOverview.tsx +++ /dev/null @@ -1,150 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import HeadlineGroup from './HeadlineGroup'; -import HeroHeadline from './HeroHeadline'; -import Badge from './Badge'; -import Link from './Link'; -import Search from './Search'; -import Fadeable from './Fadeable'; -import SetTitle from './SetTitle'; -import Flag from './Flag'; -import { groupByFirstLetter, Item } from '../model'; -import { translate, ring } from '../config'; - -const containsSearchTerm = (text = '', term = '') => { - // TODO search refinement - return ( - text - .trim() - .toLocaleLowerCase() - .indexOf(term.trim().toLocaleLowerCase()) !== -1 - ); -}; - -type PageOverviewProps = { - rings: ring[] - search: string - items: Item[] - leaving: boolean - onLeave: () => void -} - -export default function PageOverview({ rings, search: searchProp, items, leaving, onLeave }: PageOverviewProps) { - const [ring, setRing] = useState("all") - const [search, setSearch] = useState(searchProp) - - useEffect(() => { - if (rings.length > 0) { - setRing(rings[0]) - } - setSearch(searchProp) - }, [rings, searchProp]) - - const handleRingClick = (ring: ring) => () => { - setRing(ring) - }; - - const isRingActive = (ringName: string) => ring === ringName - - const itemMatchesRing = (item: Item) => ring === 'all' || item.ring === ring - - const itemMatchesSearch = (item: Item) => { - return ( - search.trim() === '' || - containsSearchTerm(item.title, search) || - containsSearchTerm(item.body, search) || - containsSearchTerm(item.info, search) - ); - }; - - const isItemVisible = (item: Item) => itemMatchesRing(item) && itemMatchesSearch(item) - - const getFilteredAndGroupedItems = () => { - const groups = groupByFirstLetter(items); - const groupsFiltered = groups.map(group => ({ - ...group, - items: group.items.filter(isItemVisible), - })); - const nonEmptyGroups = groupsFiltered.filter( - group => group.items.length > 0, - ); - return nonEmptyGroups; - } - - const handleSearchTermChange = setSearch - - const groups = getFilteredAndGroupedItems(); - - return ( - - - - Technologies Overview - -
-
-
- -
-
-
- {rings.map(ringName => ( -
- - {ringName} - -
- ))} -
-
-
-
- -
- {groups.map(({ letter, items }) => ( -
-
{letter}
-
-
-
- {items.map(item => ( - -
-
-
- {item.title} - -
-
-
-
-
- {translate(item.quadrant)} -
-
- {item.ring} -
-
-
-
- - ))} -
-
-
-
- ))} -
- - ); -} diff --git a/src/components/PageOverview/PageOverview.tsx b/src/components/PageOverview/PageOverview.tsx new file mode 100644 index 0000000..e8280f4 --- /dev/null +++ b/src/components/PageOverview/PageOverview.tsx @@ -0,0 +1,129 @@ +import React, { useState, useEffect } from 'react'; +import HeadlineGroup from '../HeadlineGroup/HeadlineGroup'; +import HeroHeadline from '../HeroHeadline/HeroHeadline'; +import Badge from '../Badge/Badge'; +import Link from '../Link/Link'; +import Search from '../Search/Search'; +import Fadeable from '../Fadeable/Fadeable'; +import SetTitle from '../SetTitle'; +import Flag from '../Flag/Flag'; +import { groupByFirstLetter, Item } from '../../model'; +import { translate, ring } from '../../config'; + +const containsSearchTerm = (text = '', term = '') => { + // TODO search refinement + return text.trim().toLocaleLowerCase().indexOf(term.trim().toLocaleLowerCase()) !== -1; +}; + +type PageOverviewProps = { + rings: ring[]; + search: string; + items: Item[]; + leaving: boolean; + onLeave: () => void; +}; + +export default function PageOverview({ rings, search: searchProp, items, leaving, onLeave }: PageOverviewProps) { + const [ring, setRing] = useState('all'); + const [search, setSearch] = useState(searchProp); + + useEffect(() => { + if (rings.length > 0) { + setRing(rings[0]); + } + setSearch(searchProp); + }, [rings, searchProp]); + + const handleRingClick = (ring: ring) => () => { + setRing(ring); + }; + + const isRingActive = (ringName: string) => ring === ringName; + + const itemMatchesRing = (item: Item) => ring === 'all' || item.ring === ring; + + const itemMatchesSearch = (item: Item) => { + return search.trim() === '' || containsSearchTerm(item.title, search) || containsSearchTerm(item.body, search) || containsSearchTerm(item.info, search); + }; + + const isItemVisible = (item: Item) => itemMatchesRing(item) && itemMatchesSearch(item); + + const getFilteredAndGroupedItems = () => { + const groups = groupByFirstLetter(items); + const groupsFiltered = groups.map((group) => ({ + ...group, + items: group.items.filter(isItemVisible), + })); + const nonEmptyGroups = groupsFiltered.filter((group) => group.items.length > 0); + return nonEmptyGroups; + }; + + const handleSearchTermChange = setSearch; + + const groups = getFilteredAndGroupedItems(); + + return ( + + + + Technologies Overview + +
+
+
+ +
+
+
+ {rings.map((ringName) => ( +
+ + {ringName} + +
+ ))} +
+
+
+
+ +
+ {groups.map(({ letter, items }) => ( +
+
{letter}
+
+
+
+ {items.map((item) => ( + +
+
+
+ {item.title} + +
+
+
+
+
{translate(item.quadrant)}
+
+ {item.ring} +
+
+
+
+ + ))} +
+
+
+
+ ))} +
+ + ); +} diff --git a/src/components/PageQuadrant.tsx b/src/components/PageQuadrant/PageQuadrant.tsx similarity index 53% rename from src/components/PageQuadrant.tsx rename to src/components/PageQuadrant/PageQuadrant.tsx index e32ccc3..bb3e8ea 100644 --- a/src/components/PageQuadrant.tsx +++ b/src/components/PageQuadrant/PageQuadrant.tsx @@ -1,19 +1,19 @@ import React from 'react'; -import HeroHeadline from './HeroHeadline'; -import HeadlineGroup from './HeadlineGroup'; -import QuadrantSection from './QuadrantSection'; -import Fadeable from './Fadeable'; -import SetTitle from './SetTitle'; +import HeroHeadline from '../HeroHeadline/HeroHeadline'; +import HeadlineGroup from '../HeadlineGroup/HeadlineGroup'; +import QuadrantSection from '../QuadrantSection/QuadrantSection'; +import Fadeable from '../Fadeable/Fadeable'; +import SetTitle from '../SetTitle'; -import { translate } from '../config'; -import {featuredOnly, groupByQuadrants, Item} from '../model'; +import { translate } from '../../config'; +import { featuredOnly, groupByQuadrants, Item } from '../../model'; type PageQuadrantProps = { - leaving: boolean - onLeave: () => void - pageName: string - items: Item[] -} + leaving: boolean; + onLeave: () => void; + pageName: string; + items: Item[]; +}; export default function PageQuadrant({ leaving, onLeave, pageName, items }: PageQuadrantProps) { const groups = groupByQuadrants(featuredOnly(items)); diff --git a/src/components/PageToolbox.tsx b/src/components/PageToolbox/PageToolbox.tsx similarity index 61% rename from src/components/PageToolbox.tsx rename to src/components/PageToolbox/PageToolbox.tsx index 32b7d28..906f11a 100644 --- a/src/components/PageToolbox.tsx +++ b/src/components/PageToolbox/PageToolbox.tsx @@ -1,34 +1,31 @@ import React from 'react'; -import HeroHeadline from './HeroHeadline'; -import Fadeable from './Fadeable'; -import SetTitle from './SetTitle'; +import HeroHeadline from '../HeroHeadline/HeroHeadline'; +import Fadeable from '../Fadeable/Fadeable'; +import SetTitle from '../SetTitle'; -export default function PageToolbox({ leaving, onLeave }: {leaving: boolean, onLeave: () => void}) { +export default function PageToolbox({ leaving, onLeave }: { leaving: boolean; onLeave: () => void }) { return ( - + Small AOE Toolbox -
+

Useful Tools

  • Fiddler - free web debugging proxy ( http://www.telerik.com/fiddler )
  • SoapUI - Webservice Test Tool (https://www.soapui.org/ )
  • Postman - API Test Tool ( https://www.getpostman.com/ )
    • -
  • Modelio - Simple free UML Modelling tool ( https://www.modelio.org/ )
    • +
  • Modelio - Simple free UML Modelling tool ( https://www.modelio.org/ )
- +

Useful Tools (commercial)

  • Paw Rest Client
-

Estabilshed Technologies

-

- Not mentionable but adopted for a while now: -

+

Not mentionable but adopted for a while now:

  • Jenkins
  • Redis
    • diff --git a/src/components/QuadrantGrid.tsx b/src/components/QuadrantGrid.tsx deleted file mode 100644 index ab4fc80..0000000 --- a/src/components/QuadrantGrid.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { groupByQuadrants, Item, Group } from '../model'; -import { quadrants } from '../config'; -import QuadrantSection from './QuadrantSection'; - -const renderQuadrant = (quadrantName: string, groups: Group) => { - return ( -
    - -
    - ); -} - -export default function QuadrantGrid({ items }: { items: Item[] }) { - const groups = groupByQuadrants(items); - return ( -
    - { - quadrants.map((quadrantName) => renderQuadrant(quadrantName, groups)) - } -
    - ); -} diff --git a/src/components/QuadrantGrid/QuadrantGrid.tsx b/src/components/QuadrantGrid/QuadrantGrid.tsx new file mode 100644 index 0000000..fbdd5e2 --- /dev/null +++ b/src/components/QuadrantGrid/QuadrantGrid.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { groupByQuadrants, Item, Group } from '../../model'; +import { quadrants } from '../../config'; +import QuadrantSection from '../QuadrantSection/QuadrantSection'; +import './quadrant-grid.scss'; +const renderQuadrant = (quadrantName: string, groups: Group) => { + return ( +
    + +
    + ); +}; + +export default function QuadrantGrid({ items }: { items: Item[] }) { + const groups = groupByQuadrants(items); + return
    {quadrants.map((quadrantName) => renderQuadrant(quadrantName, groups))}
    ; +} diff --git a/styles/components/quadrant-grid.css b/src/components/QuadrantGrid/quadrant-grid.scss similarity index 100% rename from styles/components/quadrant-grid.css rename to src/components/QuadrantGrid/quadrant-grid.scss diff --git a/src/components/QuadrantSection.tsx b/src/components/QuadrantSection.tsx deleted file mode 100644 index b5b8b85..0000000 --- a/src/components/QuadrantSection.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import { translate, rings, ring } from '../config'; -import Badge from './Badge'; -import Link from './Link'; -import ItemList from './ItemList'; -import Flag from './Flag'; -import { Item, Group } from '../model'; - -const renderList = (ringName: ring, quadrantName: string, groups: Group, big: boolean) => { - const itemsInRing = groups[quadrantName][ringName]; - - if (big) { - return ( - - - {ringName} - - - ); - } - - return ( -
    -
    - {ringName} -
    - {itemsInRing.map(item => ( - - - {item.title} - - - - ))} -
    - ); -}; - -const renderRing = (ringName: ring, quadrantName: string, groups: Group, big: boolean) => { - if ( - !groups[quadrantName] || - !groups[quadrantName][ringName] || - groups[quadrantName][ringName].length === 0 - ) { - return null; - } - return ( -
    - {renderList(ringName, quadrantName, groups, big)} -
    - ); -}; - -export default function QuadrantSection({ quadrantName, groups, big = false }: { quadrantName: string, groups: Group, big?: boolean }) { - return ( -
    -
    -
    -
    -

    {translate(quadrantName)}

    -
    - {!big && ( -
    - - Zoom In - -
    - )} -
    -
    -
    - {rings.map(ringName => renderRing(ringName, quadrantName, groups, big))} -
    -
    - ); -} diff --git a/src/components/QuadrantSection/QuadrantSection.tsx b/src/components/QuadrantSection/QuadrantSection.tsx new file mode 100644 index 0000000..93d1ac6 --- /dev/null +++ b/src/components/QuadrantSection/QuadrantSection.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import { translate, rings, ring } from '../../config'; +import Badge from '../Badge/Badge'; +import Link from '../Link/Link'; +import ItemList from '../ItemList/ItemList'; +import Flag from '../Flag/Flag'; +import { Item, Group } from '../../model'; +import './quadrant-section.scss'; +const renderList = (ringName: ring, quadrantName: string, groups: Group, big: boolean) => { + const itemsInRing = groups[quadrantName][ringName]; + + if (big) { + return ( + + + {ringName} + + + ); + } + + return ( +
    +
    + {ringName} +
    + {itemsInRing.map((item) => ( + + + {item.title} + + + + ))} +
    + ); +}; + +const renderRing = (ringName: ring, quadrantName: string, groups: Group, big: boolean) => { + if (!groups[quadrantName] || !groups[quadrantName][ringName] || groups[quadrantName][ringName].length === 0) { + return null; + } + return ( +
    + {renderList(ringName, quadrantName, groups, big)} +
    + ); +}; + +export default function QuadrantSection({ quadrantName, groups, big = false }: { quadrantName: string; groups: Group; big?: boolean }) { + return ( +
    +
    +
    +
    +

    {translate(quadrantName)}

    +
    + {!big && ( +
    + + + Zoom In + +
    + )} +
    +
    +
    {rings.map((ringName) => renderRing(ringName, quadrantName, groups, big))}
    +
    + ); +} diff --git a/styles/components/quadrant-section.css b/src/components/QuadrantSection/quadrant-section.scss similarity index 100% rename from styles/components/quadrant-section.css rename to src/components/QuadrantSection/quadrant-section.scss diff --git a/src/components/Router.tsx b/src/components/Router.tsx index 96db148..c2b79fb 100644 --- a/src/components/Router.tsx +++ b/src/components/Router.tsx @@ -1,14 +1,14 @@ import React, { useState, useEffect } from 'react'; -import PageIndex from './PageIndex'; -import PageOverview from './PageOverview'; -import PageHelp from './PageHelp'; -import PageQuadrant from './PageQuadrant'; -import PageItem from './PageItem'; -import PageItemMobile from './PageItemMobile'; +import PageIndex from './PageIndex/PageIndex'; +import PageOverview from './PageOverview/PageOverview'; +import PageHelp from './PageHelp/PageHelp'; +import PageQuadrant from './PageQuadrant/PageQuadrant'; +import PageItem from './PageItem/PageItem'; +import PageItemMobile from './PageItemMobile/PageItemMobile'; import { quadrants, getItemPageNames, isMobileViewport } from '../config'; import { Item } from '../model'; -export default function Router({ pageName, items, releases }: {pageName: string, items: Item[], releases: string[]}) { +export default function Router({ pageName, items, releases }: { pageName: string; items: Item[]; releases: string[] }) { enum page { index, overview, @@ -35,26 +35,26 @@ export default function Router({ pageName, items, releases }: {pageName: string, if (getItemPageNames(items).includes(pageName)) { return isMobileViewport() ? page.itemMobile : page.item; } - + return page.notFound; - } + }; const [statePageName, setStatePageName] = useState(pageName); const [leaving, setLeaving] = useState(false); - const [nextPageName, setNextPageName] = useState(""); + const [nextPageName, setNextPageName] = useState(''); useEffect(() => { const leaving = getPageByName(items, pageName) !== getPageByName(items, statePageName); if (leaving) { - setLeaving(true) + setLeaving(true); } - setNextPageName(pageName) - }, [pageName, items, statePageName]) + setNextPageName(pageName); + }, [pageName, items, statePageName]); const handlePageLeave = () => { - setLeaving(true) + setLeaving(true); setStatePageName(nextPageName); - setNextPageName("") + setNextPageName(''); window.setTimeout(() => { window.requestAnimationFrame(() => { @@ -65,18 +65,18 @@ export default function Router({ pageName, items, releases }: {pageName: string, switch (getPageByName(items, pageName)) { case page.index: - return - case page.overview: - return - case page.help: - return - case page.quadrant: - return - case page.itemMobile: - return - case page.item: - return - default: - return
    + return ; + case page.overview: + return ; + case page.help: + return ; + case page.quadrant: + return ; + case page.itemMobile: + return ; + case page.item: + return ; + default: + return
    ; } } diff --git a/src/components/Search.tsx b/src/components/Search/Search.tsx similarity index 51% rename from src/components/Search.tsx rename to src/components/Search/Search.tsx index a12cd02..a82cec2 100644 --- a/src/components/Search.tsx +++ b/src/components/Search/Search.tsx @@ -1,19 +1,19 @@ import React, { FormEvent } from 'react'; import classNames from 'classnames'; - +import './search.scss'; type SearchProps = { - onClose?: () => void - onSubmit?: () => void - value: string - onChange: (value: string) => void - open?: boolean -} + onClose?: () => void; + onSubmit?: () => void; + value: string; + onChange: (value: string) => void; + open?: boolean; +}; export default React.forwardRef((props: SearchProps, ref) => { - return Search(props, ref) -}) + return Search(props, ref); +}); -function Search({ value, onChange, onClose, open = false, onSubmit = () => { }}: SearchProps, ref: any) { +function Search({ value, onChange, onClose, open = false, onSubmit = () => {} }: SearchProps, ref: any) { const closable = onClose !== undefined; const handleSubmit = (e: FormEvent) => { @@ -26,31 +26,31 @@ function Search({ value, onChange, onClose, open = false, onSubmit = () => { }}: if (onClose != null) { onClose(); } - } + }; return (
    { onChange(e.target.value); }} - className="search__field" - placeholder="What are you looking for?" + type='text' + onChange={(e) => { + onChange(e.target.value); + }} + className='search__field' + placeholder='What are you looking for?' ref={ref} /> - + - { - closable && ( - - ) - } + {closable && ( + + + + )}
    ); } diff --git a/styles/components/search.css b/src/components/Search/search.scss similarity index 94% rename from styles/components/search.css rename to src/components/Search/search.scss index 7cf13f6..b7dbc86 100644 --- a/styles/components/search.css +++ b/src/components/Search/search.scss @@ -3,13 +3,15 @@ width: 600px; height: 50px; position: relative; + left: 20px; margin: 0; padding: 0; &__field { height: 100%; width: 100%; - padding: 10px 120px 10px 20px; + //padding: 10px 120px 10px 20px; + padding-left: 20px; background: #3A444A; display: block; border: none; @@ -69,4 +71,4 @@ } } } -} +} \ No newline at end of file diff --git a/public/fonts/clanot-bold.otf b/src/fonts/clanot-bold.otf similarity index 100% rename from public/fonts/clanot-bold.otf rename to src/fonts/clanot-bold.otf diff --git a/public/fonts/clanot-medium.otf b/src/fonts/clanot-medium.otf similarity index 100% rename from public/fonts/clanot-medium.otf rename to src/fonts/clanot-medium.otf diff --git a/public/fonts/clanot-news.otf b/src/fonts/clanot-news.otf similarity index 100% rename from public/fonts/clanot-news.otf rename to src/fonts/clanot-news.otf diff --git a/public/fonts/clanot-thin.otf b/src/fonts/clanot-thin.otf similarity index 100% rename from public/fonts/clanot-thin.otf rename to src/fonts/clanot-thin.otf diff --git a/public/icons/back.svg b/src/icons/back.svg similarity index 100% rename from public/icons/back.svg rename to src/icons/back.svg diff --git a/public/icons/close.svg b/src/icons/close.svg similarity index 100% rename from public/icons/close.svg rename to src/icons/close.svg diff --git a/public/icons/overview.svg b/src/icons/overview.svg similarity index 100% rename from public/icons/overview.svg rename to src/icons/overview.svg diff --git a/public/icons/pie.svg b/src/icons/pie.svg similarity index 100% rename from public/icons/pie.svg rename to src/icons/pie.svg diff --git a/public/icons/question.svg b/src/icons/question.svg similarity index 100% rename from public/icons/question.svg rename to src/icons/question.svg diff --git a/public/icons/search.svg b/src/icons/search.svg similarity index 100% rename from public/icons/search.svg rename to src/icons/search.svg diff --git a/src/index.css b/src/index.scss similarity index 61% rename from src/index.css rename to src/index.scss index ec2585e..ebb70b9 100644 --- a/src/index.css +++ b/src/index.scss @@ -7,7 +7,23 @@ body { -moz-osx-font-smoothing: grayscale; } + code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + +@font-face { + font-family: 'DIN'; + src: url('./fonts/clanot-news.otf'); + font-weight: normal; +} + +@font-face { + font-family: 'DIN'; + src: url('./fonts/clanot-thin.otf'); + font-weight: 300; +} + + +@import './styles/main.scss' \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 4fbcbe1..9bfa303 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,11 +1,11 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App'; +import './index.scss'; ReactDOM.render( - - , + , document.getElementById('root') ); diff --git a/styles/base.css b/src/styles/base.scss similarity index 80% rename from styles/base.css rename to src/styles/base.scss index dc2de78..a99b354 100644 --- a/styles/base.css +++ b/src/styles/base.scss @@ -19,17 +19,7 @@ @custom-media --until-lg (max-width: 61.875em); @custom-media --until-xl (max-width: 75em); -@font-face { - font-family: 'DIN'; - src: url('../fonts/clanot-news.otf'); - font-weight: normal; -} -@font-face { - font-family: 'DIN'; - src: url('../fonts/clanot-thin.otf'); - font-weight: 300; -} body { background: var(--color-gray-dark); @@ -49,4 +39,4 @@ body { #root { min-height: 100vh; overflow: hidden; -} +} \ No newline at end of file diff --git a/styles/components/button.css b/src/styles/components/button.scss similarity index 100% rename from styles/components/button.css rename to src/styles/components/button.scss diff --git a/styles/components/content.css b/src/styles/components/content.scss similarity index 100% rename from styles/components/content.css rename to src/styles/components/content.scss diff --git a/styles/components/filter.css b/src/styles/components/filter.scss similarity index 100% rename from styles/components/filter.css rename to src/styles/components/filter.scss diff --git a/styles/components/footnote.css b/src/styles/components/footnote.scss similarity index 100% rename from styles/components/footnote.css rename to src/styles/components/footnote.scss diff --git a/styles/components/headline.css b/src/styles/components/headline.scss similarity index 100% rename from styles/components/headline.css rename to src/styles/components/headline.scss diff --git a/styles/components/hljs.css b/src/styles/components/hljs.scss similarity index 100% rename from styles/components/hljs.css rename to src/styles/components/hljs.scss diff --git a/styles/components/icon-link.css b/src/styles/components/icon-link.scss similarity index 94% rename from styles/components/icon-link.css rename to src/styles/components/icon-link.scss index 54bbfd3..fe126e8 100644 --- a/styles/components/icon-link.css +++ b/src/styles/components/icon-link.scss @@ -5,6 +5,8 @@ height: 25px; font-size: 14px; line-height: 25px; + border: 0; + background: none; color: var(--color-gray-normal); &--primary { @@ -31,4 +33,4 @@ border-bottom: 2px solid var(--color-gray-normal); } } -} +} \ No newline at end of file diff --git a/src/styles/components/icon.scss b/src/styles/components/icon.scss new file mode 100644 index 0000000..f5695e1 --- /dev/null +++ b/src/styles/components/icon.scss @@ -0,0 +1,33 @@ +.icon { + display: inline-block; + width: 22px; + height: 22px; + background-size: 22px 22px; + background-repeat: no-repeat; + background-position: 0 0; + vertical-align: middle; + + &--pie { + background-image: url('../../icons/pie.svg'); + } + + &--question { + background-image: url('../../icons/question.svg'); + } + + &--overview { + background-image: url('../../icons/overview.svg'); + } + + &--search { + background-image: url('../../icons/search.svg'); + } + + &--back { + background-image: url('../../icons/back.svg'); + } + + &--close { + background-image: url('../../icons/close.svg'); + } +} \ No newline at end of file diff --git a/styles/components/letter-index.css b/src/styles/components/letter-index.scss similarity index 100% rename from styles/components/letter-index.css rename to src/styles/components/letter-index.scss diff --git a/styles/components/markdown.css b/src/styles/components/markdown.scss similarity index 100% rename from styles/components/markdown.css rename to src/styles/components/markdown.scss diff --git a/styles/components/nav.css b/src/styles/components/nav.scss similarity index 100% rename from styles/components/nav.css rename to src/styles/components/nav.scss diff --git a/styles/components/page.css b/src/styles/components/page.scss similarity index 100% rename from styles/components/page.css rename to src/styles/components/page.scss diff --git a/styles/components/publish-date.css b/src/styles/components/publish-date.scss similarity index 100% rename from styles/components/publish-date.css rename to src/styles/components/publish-date.scss diff --git a/styles/components/ring-list.css b/src/styles/components/ring-list.scss similarity index 100% rename from styles/components/ring-list.css rename to src/styles/components/ring-list.scss diff --git a/styles/components/social-icon.css b/src/styles/components/social-icon.scss similarity index 100% rename from styles/components/social-icon.css rename to src/styles/components/social-icon.scss diff --git a/styles/components/split.css b/src/styles/components/split.scss similarity index 100% rename from styles/components/split.css rename to src/styles/components/split.scss diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 0000000..fc6fb8f --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,17 @@ +@import "./base"; +@import "./components/button"; +@import "./components/content"; +@import "./components/filter"; +@import "./components/footnote"; +@import "./components/headline"; +@import "./components/hljs"; +@import "./components/icon"; +@import "./components/icon-link"; +@import "./components/letter-index"; +@import "./components/markdown"; +@import "./components/nav"; +@import "./components/page"; +@import "./components/publish-date"; +@import "./components/ring-list"; +@import "./components/social-icon"; +@import "./components/split"; \ No newline at end of file diff --git a/styles/components/icon.css b/styles/components/icon.css deleted file mode 100644 index 9b74bcd..0000000 --- a/styles/components/icon.css +++ /dev/null @@ -1,33 +0,0 @@ -.icon { - display: inline-block; - width: 22px; - height: 22px; - background-size: 22px 22px; - background-repeat: no-repeat; - background-position: 0 0; - vertical-align: middle; - - &--pie { - background-image: url('../icons/pie.svg'); - } - - &--question { - background-image: url('../icons/question.svg'); - } - - &--overview { - background-image: url('../icons/overview.svg'); - } - - &--search { - background-image: url('../icons/search.svg'); - } - - &--back { - background-image: url('../icons/back.svg'); - } - - &--close { - background-image: url('../icons/close.svg'); - } -} diff --git a/styles/main.css b/styles/main.css deleted file mode 100644 index af4511e..0000000 --- a/styles/main.css +++ /dev/null @@ -1,2 +0,0 @@ -@import "./base.css"; -@import "./components/*.css";