From 53a5cad5cd497586a7de11c55bb31fb22f4d756d Mon Sep 17 00:00:00 2001 From: Alexander Nozik Date: Sun, 28 Mar 2021 21:38:27 +0300 Subject: [PATCH] New style for magprog --- .../magprog/capabilities/Capabilities.js | 29 + .../magprog/capabilities/Capability.js | 10 + .../magprog/capabilities/CapabilityList.js | 48 + .../magprog/common/MagProgLayout.js | 40 + src/components/magprog/common/Scroll.js | 71 ++ src/components/magprog/features/Feature.js | 24 + src/components/magprog/features/Features.js | 52 + src/pages/magprog/elements.js | 1075 ++++++++--------- src/pages/magprog/generic.js | 59 +- src/pages/magprog/index.js | 2 +- src/styles/footer.css | 2 +- src/styles/main.css | 12 +- 12 files changed, 848 insertions(+), 576 deletions(-) create mode 100644 src/components/magprog/capabilities/Capabilities.js create mode 100644 src/components/magprog/capabilities/Capability.js create mode 100644 src/components/magprog/capabilities/CapabilityList.js create mode 100644 src/components/magprog/common/MagProgLayout.js create mode 100644 src/components/magprog/common/Scroll.js create mode 100644 src/components/magprog/features/Feature.js create mode 100644 src/components/magprog/features/Features.js diff --git a/src/components/magprog/capabilities/Capabilities.js b/src/components/magprog/capabilities/Capabilities.js new file mode 100644 index 0000000..9a338f8 --- /dev/null +++ b/src/components/magprog/capabilities/Capabilities.js @@ -0,0 +1,29 @@ +import React from 'react'; +import {Link} from 'gatsby'; + +import CapabilityList from './CapabilityList'; + +const Capabilities = () => +
+
+

What we do

+

+ Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam + turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus, + lacus eget hendrerit bibendum, urna est aliquam sem, sit amet + imperdiet est velit quis lorem. +

+
+ +
+
    +
  • + + Learn more + +
    • +
+
+
+ +export default Capabilities; diff --git a/src/components/magprog/capabilities/Capability.js b/src/components/magprog/capabilities/Capability.js new file mode 100644 index 0000000..f668b2b --- /dev/null +++ b/src/components/magprog/capabilities/Capability.js @@ -0,0 +1,10 @@ +import React from 'react'; + +const Capability = ({ heading, description, iconClass }) => +
+ +

{heading}

+

{description}

+
+ +export default Capability; diff --git a/src/components/magprog/capabilities/CapabilityList.js b/src/components/magprog/capabilities/CapabilityList.js new file mode 100644 index 0000000..9ea3a6f --- /dev/null +++ b/src/components/magprog/capabilities/CapabilityList.js @@ -0,0 +1,48 @@ +import React from 'react'; + +import Capability from './Capability'; + +const CapabilityList = () => { + const CAPABILITIES = [ + { + heading: 'Lorem ipsum amet', + description: 'Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.', + iconClass: 'fa-code', + }, + { + heading: 'Morem ipsum amet', + description: 'Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.', + iconClass: 'fa-lock', + }, + { + heading: 'Dorem ipsum amet', + description: 'Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.', + iconClass: 'fa-cog', + }, + { + heading: 'Forem ipsum amet', + description: 'Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.', + iconClass: 'fa-desktop', + }, + { + heading: 'Corem ipsum amet', + description: 'Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.', + iconClass: 'fa-chain', + }, + { + heading: 'Norem ipsum amet', + description: 'Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.', + iconClass: 'fa-diamond', + }, + ] + + const [capabilities] = React.useState(CAPABILITIES); + + return ( + <> + {capabilities.map((capability) => )} + + ) +} + +export default CapabilityList; diff --git a/src/components/magprog/common/MagProgLayout.js b/src/components/magprog/common/MagProgLayout.js new file mode 100644 index 0000000..d92e2fc --- /dev/null +++ b/src/components/magprog/common/MagProgLayout.js @@ -0,0 +1,40 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Helmet from 'react-helmet'; +import {injectIntl, useIntl} from "react-intl"; +import SEO from "../../seo"; +import NpmNavbar from "../../navBar"; +import {withPrefix} from "gatsby"; + +import "../../../styles/layout.css" +import "../../../styles/main.css" +import "katex/dist/katex.min.css" + +const MagProgLayout = ({children}) => { + const intl = useIntl(); + const lang = intl.locale; + return ( + <> + + + + + {/**/} + + +
+
{children}
+
+ {/**/} + + ) +} + +MagProgLayout.propTypes = { + children: PropTypes.node.isRequired, +} + +export default injectIntl(MagProgLayout) + diff --git a/src/components/magprog/common/Scroll.js b/src/components/magprog/common/Scroll.js new file mode 100644 index 0000000..5bd2f72 --- /dev/null +++ b/src/components/magprog/common/Scroll.js @@ -0,0 +1,71 @@ +import smoothscroll from 'smoothscroll-polyfill'; +import React from 'react'; +import PropTypes from 'prop-types'; + +const Element = props => { + return props.children; +}; + +class Scroll extends React.Component { + static propTypes = { + type: PropTypes.string, + element: PropTypes.string, + offset: PropTypes.number, + timeout: PropTypes.number, + children: PropTypes.node.isRequired, + }; + constructor() { + super(); + this.handleClick = this.handleClick.bind(this); + } + componentDidMount() { + smoothscroll.polyfill(); + } + handleClick(e) { + e.preventDefault(); + let elem = 0; + let scroll = true; + const { type, element, offset, timeout } = this.props; + if (type && element) { + switch (type) { + case 'class': + elem = document.getElementsByClassName(element)[0]; + scroll = !!elem; + break; + case 'id': + elem = document.getElementById(element); + scroll = !!elem; + break; + default: + } + } + scroll + ? this.scrollTo(elem, offset, timeout) + : console.log(`Element not found: ${element}`); // eslint-disable-line + } + scrollTo(element, offSet = 0, timeout = null) { + const elemPos = element + ? element.getBoundingClientRect().top + window.pageYOffset + : 0; + if (timeout) { + setTimeout(() => { + window.scroll({ top: elemPos + offSet, left: 0, behavior: 'smooth' }); + }, timeout); + } else { + window.scroll({ top: elemPos + offSet, left: 0, behavior: 'smooth' }); + } + } + render() { + return ( + + {typeof this.props.children === 'object' ? ( + React.cloneElement(this.props.children, { onClick: this.handleClick }) + ) : ( + {this.props.children} + )} + + ); + } +} + +export default Scroll; diff --git a/src/components/magprog/features/Feature.js b/src/components/magprog/features/Feature.js new file mode 100644 index 0000000..20783fc --- /dev/null +++ b/src/components/magprog/features/Feature.js @@ -0,0 +1,24 @@ +import React from 'react'; +import {Link} from 'gatsby'; + +const Feature = ({href, image, heading, description, to}) => +
+ + + +
+
+

{heading}

+

{description}

+
    +
  • + + {to.label} + +
    • +
+
+
+
+ +export default Feature; diff --git a/src/components/magprog/features/Features.js b/src/components/magprog/features/Features.js new file mode 100644 index 0000000..d55be9d --- /dev/null +++ b/src/components/magprog/features/Features.js @@ -0,0 +1,52 @@ +import React from 'react'; + +import pic1 from '../../../../../../temp/gatsby-starter-hyperspace/src/images/pic01.jpg'; +import pic2 from '../../../../../../temp/gatsby-starter-hyperspace/src/images/pic02.jpg'; +import pic3 from '../../../../../../temp/gatsby-starter-hyperspace/src/images/pic03.jpg'; + +import Feature from './Feature'; + +const Features = () => { + const FEATURES = [ + { + href: '/#', + image: pic1, + heading: 'Sed ipsum dolor', + description: 'Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus.', + to: { + href: '/generic', + label: 'Learn more', + }, + }, + { + href: '/#', + image: pic2, + heading: 'Feugiat consequat', + description: 'Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus.', + to: { + href: '/generic', + label: 'Learn more', + }, + }, + { + href: '/#', + image: pic3, + heading: 'Ultricies aliquam', + description: 'Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus.', + to: { + href: '/generic', + label: 'Learn more', + }, + }, + ]; + + const [features] = React.useState(FEATURES); + + return ( +
+ {features.map(feature => )} +
+ ); +} + +export default Features; diff --git a/src/pages/magprog/elements.js b/src/pages/magprog/elements.js index edc8bd6..fbfb68d 100644 --- a/src/pages/magprog/elements.js +++ b/src/pages/magprog/elements.js @@ -1,585 +1,584 @@ import React from 'react'; -import NpmLayout from "../../components/layout"; - +import MagProgLayout from "../../components/magprog/common/MagProgLayout"; const SecondPage = () => ( - + -
-
-
-

Elements

+
+
+
+

Elements

-
-

Text

-

- This is bold and this is strong. This is{' '} - italic and this is emphasized. This is{' '} - superscript text and this is subscript text. - This is underlined and this is code: for (;;) - . Finally, this is a link. -

-
-

- Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida - odio porttitor sem non mi integer non faucibus ornare mi ut ante - amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem - accumsan varius montes viverra nibh in adipiscing blandit tempus - accumsan. -

-
-

Heading Level 2

-

Heading Level 3

-

Heading Level 4

-
-

Blockquote

-
- Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis - sagittis eget tempus euismod. Vestibulum ante ipsum primis in - faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat - ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in - faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis. -
-

Preformatted

- 
+                    

+                        
Text

+                        

+                            This is bold and this is strong. This is{' '}
+                            italic and this is emphasized. This is{' '}
+                            superscript text and this is subscript text.
+                            This is underlined and this is code: for (;;) 
+                            . Finally, this is a link.
+                        

+                        

+                        

+                            Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida
+                            odio porttitor sem non mi integer non faucibus ornare mi ut ante
+                            amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem
+                            accumsan varius montes viverra nibh in adipiscing blandit tempus
+                            accumsan.
+                        

+                        

+                        
Heading Level 2

+                        
Heading Level 3

+                        
Heading Level 4

+                        

+                        
Blockquote

+                        

+                            Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis
+                            sagittis eget tempus euismod. Vestibulum ante ipsum primis in
+                            faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat
+                            ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in
+                            faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.
+                        

+                        
Preformatted

+                        
               
                 i = 0; while (!deck.isInOrder()) print 'Iteration ' + i;
                 deck.shuffle(); i++; print 'It took ' + i + ' iterations to sort
                 the deck.';
               
             

-          

+
-
-

Lists

-
-
-

Unordered

-
    -
  • Dolor pulvinar etiam.
    • -
  • Sagittis adipiscing.
    • -
  • Felis enim feugiat.
    • -
-

Alternate

-
    -
  • Dolor pulvinar etiam.
    • -
  • Sagittis adipiscing.
    • -
  • Felis enim feugiat.
    • -
-
-
-

Ordered

-
    -
  1. Dolor pulvinar etiam.
    2. -
  2. Etiam vel felis viverra.
    3. -
  3. Felis enim feugiat.
    4. -
  4. Dolor pulvinar etiam.
    5. -
  5. Etiam vel felis lorem.
    6. -
  6. Felis enim et feugiat.
    7. -
-

Icons

- -
-
-

Actions

- -
+
+

Lists

+
+
+

Unordered

+
    +
  • Dolor pulvinar etiam.
    • +
  • Sagittis adipiscing.
    • +
  • Felis enim feugiat.
    • +
+

Alternate

+
    +
  • Dolor pulvinar etiam.
    • +
  • Sagittis adipiscing.
    • +
  • Felis enim feugiat.
    • +
+
+
+

Ordered

+
    +
  1. Dolor pulvinar etiam.
    2. +
  2. Etiam vel felis viverra.
    3. +
  3. Felis enim feugiat.
    4. +
  4. Dolor pulvinar etiam.
    5. +
  5. Etiam vel felis lorem.
    6. +
  6. Felis enim et feugiat.
    7. +
+

Icons

+ +
+
+

Actions

+ +
-
-

Table

-

Default

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescriptionPrice
Item OneAnte turpis integer aliquet porttitor.29.99
Item TwoVis ac commodo adipiscing arcu aliquet.19.99
Item Three Morbi faucibus arcu accumsan lorem.29.99
Item FourVitae integer tempus condimentum.19.99
Item FiveAnte turpis integer aliquet porttitor.29.99
- 100.00
-
+
+

Table

+

Default

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionPrice
Item OneAnte turpis integer aliquet porttitor.29.99
Item TwoVis ac commodo adipiscing arcu aliquet.19.99
Item Three Morbi faucibus arcu accumsan lorem.29.99
Item FourVitae integer tempus condimentum.19.99
Item FiveAnte turpis integer aliquet porttitor.29.99
+ 100.00
+
-

Alternate

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescriptionPrice
Item OneAnte turpis integer aliquet porttitor.29.99
Item TwoVis ac commodo adipiscing arcu aliquet.19.99
Item Three Morbi faucibus arcu accumsan lorem.29.99
Item FourVitae integer tempus condimentum.19.99
Item FiveAnte turpis integer aliquet porttitor.29.99
- 100.00
-
-
+

Alternate

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionPrice
Item OneAnte turpis integer aliquet porttitor.29.99
Item TwoVis ac commodo adipiscing arcu aliquet.19.99
Item Three Morbi faucibus arcu accumsan lorem.29.99
Item FourVitae integer tempus condimentum.19.99
Item FiveAnte turpis integer aliquet porttitor.29.99
+ 100.00
+
+
-
-

Buttons

- - - - - -
    -
  • - Disabled -
    • -
  • - Disabled -
    • -
-
+
+

Buttons

+ + + + + +
    +
  • + Disabled +
    • +
  • + Disabled +
    • +
+
-
-

Form

-
-
-
- -
-
- -
-
- -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
+
+

Form

+ +
+
+ +
+
+ +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+