NPM/site
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New style for magprog

Browse Source
This commit is contained in:
Alexander Nozik 2021-03-28 21:38:27 +03:00
parent a647f838a0
commit 53a5cad5cd
12 changed files with 848 additions and 576 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/magprog/capabilities/Capabilities.js Normal file
View File

@ -0,0 +1,29 @@
import React from 'react';
import {Link} from 'gatsby';
import CapabilityList from './CapabilityList';
const Capabilities = () =>
<section id="two" className="wrapper style3 fade-up">
<div className="inner">
<h2>What we do</h2>
<p>
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.
</p>
<div className="features">
<CapabilityList />
</div>
<ul className="actions">
<li>
<Link className="button" to="/generic">
Learn more
</Link>
</li>
</ul>
</div>
</section>
export default Capabilities;

10
src/components/magprog/capabilities/Capability.js Normal file
View File

@ -0,0 +1,10 @@
import React from 'react';
const Capability = ({ heading, description, iconClass }) =>
<section>
<span className={`icon major ${iconClass}`} />
<h3>{heading}</h3>
<p>{description}</p>
</section>
export default Capability;

48
src/components/magprog/capabilities/CapabilityList.js Normal file
View File

@ -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) => <Capability key={capability.heading} {...capability} />)}
</>
)
}
export default CapabilityList;

40
src/components/magprog/common/MagProgLayout.js Normal file
View File

@ -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 (
<>
<SEO lang={lang} title={intl.formatMessage({id: "title"})}/>
<Helmet>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<link rel="stylesheet" href={withPrefix("magprog/css/main.css")}/>
{/*<noscript>{*/}
{/* <link rel="stylesheet" href={withPrefix("magprog/css/noscript.css")}/>*/}
{/*</noscript>*/}
</Helmet>
<NpmNavbar/>
<div className="container-fluid">
<main>{children}</main>
</div>
{/*<NpmFooter/>*/}
</>
)
}
MagProgLayout.propTypes = {
children: PropTypes.node.isRequired,
}
export default injectIntl(MagProgLayout)

71
src/components/magprog/common/Scroll.js Normal file
View File

@ -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 (
<Element>
{typeof this.props.children === 'object' ? (
React.cloneElement(this.props.children, { onClick: this.handleClick })
) : (
<span onClick={this.handleClick}>{this.props.children}</span>
)}
</Element>
);
}
}
export default Scroll;

24
src/components/magprog/features/Feature.js Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
import {Link} from 'gatsby';
const Feature = ({href, image, heading, description, to}) =>
<section>
<a href={href} className="image" alt="image">
<img src={image} alt="" data-position="center center" />
</a>
<div className="content">
<div className="inner">
<h2>{heading}</h2>
<p>{description}</p>
<ul className="actions">
<li>
<Link className="button" to={to.href}>
{to.label}
</Link>
</li>
</ul>
</div>
</div>
</section>
export default Feature;

52
src/components/magprog/features/Features.js Normal file
View File

@ -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 (
<section id="one" className="wrapper style2 spotlights">
{features.map(feature => <Feature key={feature.heading} {...feature} />)}
</section>
);
}
export default Features;

45
src/pages/magprog/elements.js
View File

@ -1,9 +1,8 @@
import React from 'react';
import NpmLayout from "../../components/layout";
import MagProgLayout from "../../components/magprog/common/MagProgLayout";
const SecondPage = () => (
<NpmLayout>
<MagProgLayout>
<div id="wrapper">
<section id="main" className="wrapper">
@ -19,7 +18,7 @@ const SecondPage = () => (
This is <u>underlined</u> and this is code: <code>for (;;) </code>
. Finally, <a href="/">this is a link</a>.
</p>
<hr />
<hr/>
<p>
Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida
odio porttitor sem non mi integer non faucibus ornare mi ut ante
@ -27,11 +26,11 @@ const SecondPage = () => (
accumsan varius montes viverra nibh in adipiscing blandit tempus
accumsan.
</p>
<hr />
<hr/>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<hr />
<hr/>
<h3>Blockquote</h3>
<blockquote>
Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis
@ -224,7 +223,7 @@ const SecondPage = () => (
</tbody>
<tfoot>
<tr>
<td colSpan="2" />
<td colSpan="2"/>
<td>100.00</td>
</tr>
</tfoot>
@ -270,7 +269,7 @@ const SecondPage = () => (
</tbody>
<tfoot>
<tr>
<td colSpan="2" />
<td colSpan="2"/>
<td>100.00</td>
</tr>
</tfoot>
@ -427,7 +426,7 @@ const SecondPage = () => (
<label htmlFor="demo-priority-high">High</label>
</div>
<div className="col-6 col-12-small">
<input type="checkbox" id="demo-copy" name="demo-copy" />
<input type="checkbox" id="demo-copy" name="demo-copy"/>
<label htmlFor="demo-copy">Email me a copy</label>
</div>
<div className="col-6 col-12-small">
@ -457,7 +456,7 @@ const SecondPage = () => (
/>
</li>
<li>
<input type="reset" value="Reset" />
<input type="reset" value="Reset"/>
</li>
</ul>
</div>
@ -472,52 +471,52 @@ const SecondPage = () => (
<div className="row gtr-uniform">
<div className="col-12">
<span className="image fit">
<img src="images/pic04.jpg" alt="" />
<img src="images/pic04.jpg" alt=""/>
</span>
</div>
<div className="col-4">
<span className="image fit">
<img src="images/pic01.jpg" alt="" />
<img src="images/pic01.jpg" alt=""/>
</span>
</div>
<div className="col-4">
<span className="image fit">
<img src="images/pic02.jpg" alt="" />
<img src="images/pic02.jpg" alt=""/>
</span>
</div>
<div className="col-4">
<span className="image fit">
<img src="images/pic03.jpg" alt="" />
<img src="images/pic03.jpg" alt=""/>
</span>
</div>
<div className="col-4">
<span className="image fit">
<img src="images/pic03.jpg" alt="" />
<img src="images/pic03.jpg" alt=""/>
</span>
</div>
<div className="col-4">
<span className="image fit">
<img src="images/pic01.jpg" alt="" />
<img src="images/pic01.jpg" alt=""/>
</span>
</div>
<div className="col-4">
<span className="image fit">
<img src="images/pic02.jpg" alt="" />
<img src="images/pic02.jpg" alt=""/>
</span>
</div>
<div className="col-4">
<span className="image fit">
<img src="images/pic02.jpg" alt="" />
<img src="images/pic02.jpg" alt=""/>
</span>
</div>
<div className="col-4">
<span className="image fit">
<img src="images/pic03.jpg" alt="" />
<img src="images/pic03.jpg" alt=""/>
</span>
</div>
<div className="col-4">
<span className="image fit">
<img src="images/pic01.jpg" alt="" />
<img src="images/pic01.jpg" alt=""/>
</span>
</div>
</div>
@ -525,7 +524,7 @@ const SecondPage = () => (
<h3>Left &amp; Right</h3>
<p>
<span className="image left">
<img src="images/pic05.jpg" alt="" />
<img src="images/pic05.jpg" alt=""/>
</span>
Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis
sagittis eget. tempus euismod. Vestibulum ante ipsum primis in
@ -551,7 +550,7 @@ const SecondPage = () => (
</p>
<p>
<span className="image right">
<img src="images/pic06.jpg" alt="" />
<img src="images/pic06.jpg" alt=""/>
</span>
Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis
sagittis eget. tempus euismod. Vestibulum ante ipsum primis in
@ -579,7 +578,7 @@ const SecondPage = () => (
</div>
</section>
</div>
</NpmLayout>
</MagProgLayout>
);
export default SecondPage;

9
src/pages/magprog/generic.js
View File

@ -1,16 +1,15 @@
import React from 'react';
import NpmLayout from "../../components/layout";
import MagProgLayout from "../../components/magprog/common/MagProgLayout";
const SecondPage = () => (
<NpmLayout>
<MagProgLayout>
<div id="wrapper">
<section id="main" className="wrapper">
<div className="inner">
<h1 className="major">A Generic Page</h1>
<span className="image fit">
<img src="images/pic04.jpg" alt="" />
<img src="images/pic04.jpg" alt=""/>
</span>
<p>
Donec eget ex magna. Interdum et malesuada fames ac ante ipsum
@ -33,7 +32,7 @@ const SecondPage = () => (
</div>
</section>
</div>
</NpmLayout>
</MagProgLayout>
);
export default SecondPage;

2
src/pages/magprog/index.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import {injectIntl} from "react-intl";
import {graphql} from "gatsby";
import MagProgLayout from '../../components/magprog/common/layout';
import MagProgLayout from '../../components/magprog/common/MagProgLayout';
import Parser from "html-react-parser";
import Scrollspy from "react-scrollspy";
import MagProgSection from "../../components/magprog/common/MagProgSection";

2
src/styles/footer.css
View File

@ -6,7 +6,7 @@ footer {
padding: 2px;
text-align: center;
color: rgb(108, 117, 125);
font-family: Segoe UI;
font-family: Segoe UI, serif;
font-size: 20px;
text-decoration: none solid rgb(108, 117, 125);
}

12
src/styles/main.css
View File

@ -87,11 +87,11 @@ h2 a:visited {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
padding: 60px 40px 10px 40px;
margin-bottom: 0px;
margin-bottom: 0;
background-color: rgb(247, 247, 247);
border: 1.5px solid rgb(219, 219, 219);
border-bottom: 0;
border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0 0;
}
.aboutButton {
@ -152,13 +152,13 @@ h2.title {
span#date {
color: white;
font-size: 20px;
opacity: 0, 7;
opacity: 0.7;
background-color: rgb(209, 121, 121);
padding: 5px;
border: 1px solid #8f4f4f;
position: absolute;
top: 0px;
right: 0px;
top: 0;
right: 0;
}
p {
@ -195,7 +195,7 @@ ul {
}
p#button {
margin-bottom: 0px;
margin-bottom: 0;
}
p#lead {