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-29 16:04:51 +03:00
parent d032352c93
commit 1b738f88c9
14 changed files with 214 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/magprog/common/MagProgLayout.js
View File

@ -6,15 +6,11 @@ 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 (
<>
<body>
<SEO lang={lang} title={intl.formatMessage({id: "title"})}/>
<Helmet>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
@ -22,13 +18,28 @@ const MagProgLayout = ({children}) => {
{/*<noscript>{*/}
{/* <link rel="stylesheet" href={withPrefix("magprog/css/noscript.css")}/>*/}
{/*</noscript>*/}
<script src={withPrefix("magprog/js/jquery.min.js")} defer={true}/>
<script src={withPrefix("magprog/js/jquery.scrollex.min.js")} defer={true}/>
<script src={withPrefix("magprog/js/jquery.scrolly.min.js")} defer={true}/>
<script src={withPrefix("magprog/js/browser.min.js")} defer={true}/>
<script src={withPrefix("magprog/js/breakpoints.min.js")} defer={true}/>
<script src={withPrefix("magprog/js/util.js")} defer={true}/>
<script src={withPrefix("magprog/js/main.js")} defer={true}/>
</Helmet>
<NpmNavbar/>
<div className="container-fluid">
<main>{children}</main>
</div>
{/*<NpmFooter/>*/}
</>
{/* <footer id="footer" className="wrapper style1-alt">
<div className="inner">
<ul className="menu">
<li>&copy; MIPT-NPM 2021.</li>
<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</footer>*/}
</body>
)
}

10
src/content/ru/magprog/mentors/template.md Normal file
View File

@ -0,0 +1,10 @@
---
content_type: magprog_mentor
title: Полиграф Шариков
id: template
order: 0
photo: Template.jpg
publish: false
language: ru
---
Выдающийся ученый

BIN
src/images/magprog/mentors/Dolgonosov.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 MiB

BIN
src/images/magprog/mentors/Gertsenberger.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 KiB

BIN
src/images/magprog/mentors/Kalashev.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
src/images/magprog/mentors/Klimai.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
src/images/magprog/mentors/Nozik.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 555 KiB

BIN
src/images/magprog/mentors/Template.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 KiB

BIN
src/images/magprog/mentors/Usmanov.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

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

@ -1,22 +1,108 @@
import React from 'react';
import {injectIntl} from "react-intl";
import {graphql} from "gatsby";
import {graphql, withPrefix} from "gatsby";
import MagProgLayout from '../../components/magprog/common/MagProgLayout';
import Parser from "html-react-parser";
import Scrollspy from "react-scrollspy";
import Scroll from "../../components/magprog/common/Scroll";
function mentors(edges) {
return (
<>
{edges.map((edge) => {
return <section>
<a className="image">
<img src={withPrefix(`images/magprog/mentors/${edge.node.frontmatter.photo}`)}
alt={edge.node.frontmatter.title} data-position="25% 25%"/>
</a>
<div className="content">
<div className="inner">
<h2>{edge.node.frontmatter.title}</h2>
<p>
{Parser(edge.node.html)}
</p>
{/*
<ul className="actions">
<li><a href="generic.html" className="button">Learn more</a></li>
</ul>
*/}
</div>
</div>
</section>
})}
</>
)
}
function team(edges) {
return (
<>
{edges.map((edge) => {
const name = edge.node.frontmatter.title;
const photo = edge.node.frontmatter.photo;
return (
<section>
<a className="image">
<img src={withPrefix(`images/members/${edge.node.frontmatter.photo}`)}
alt={edge.node.frontmatter.title} data-position="center center"/>
</a>
<div className="content">
<div className="inner">
<h2>{name}</h2>
<p>
{Parser(edge.node.html)}
</p>
{/*
<ul className="actions">
<li><a href="generic.html" className="button">Learn more</a></li>
</ul>
*/}
</div>
</div>
</section>
)
})}
</>
)
}
const MagProgPage = (props) => {
let sections = [props.data.what, props.data.why, props.data.partners, props.data.program, props.data.enroll, props.data.contacts].map(node => {
let body = <>
<div className="inner">
<h2>{node.frontmatter.section_title}</h2>
{Parser(node.html)}
</div>
</>
return {
id: node.frontmatter.magprog_section,
title: node.frontmatter.section_title,
body: Parser(node.html)
body: body,
style: "wrapper style1 fullscreen fade-up"
}
})
sections.splice(3, 0,
{
id: "mentors",
title: "Научные руководители",
body: mentors(props.data.mentors.edges),
style: "wrapper style2 spotlights"
}
)
sections.splice(6, 0,
{
id: "team",
title: "Команда",
body: team(props.data.team.edges),
style: "wrapper style2 spotlights"
}
)
return (
<MagProgLayout>
<section id="sidebar">
@ -40,12 +126,8 @@ const MagProgPage = (props) => {
</section>
<div id="wrapper">
{sections.map(section => {
return <section id={section.id}
className="wrapper style1 fullscreen fade-up">
<div className="inner">
<h2>{section.title}</h2>
return <section id={section.id} className={section.style}>
{section.body}
</div>
</section>
})}
@ -84,7 +166,19 @@ export const query = graphql`
}
}
# Научные руководители
mentors: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "magprog_mentor"}, published: {ne: false}, language: {eq: "ru"}}},
sort: {fields: frontmatter___order, order: ASC}) {
edges{
node {
html
frontmatter {
title
photo
language
}
}
}
}
program: markdownRemark(frontmatter: {content_type: {eq: "magprog"}, magprog_section: {eq: "program"} published: {ne: false}, language: {eq: "ru"}}){
html
@ -103,12 +197,17 @@ export const query = graphql`
}
}
team: markdownRemark(frontmatter: {content_type: {eq: "magprog"}, magprog_section: {eq: "team"} published: {ne: false}, language: {eq: "ru"}}){
team: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "magprog_team"}, published: {ne: false}, language: {eq: "ru"}}},
sort: {fields: frontmatter___order, order: ASC}) {
edges{
node {
html
frontmatter {
magprog_section
section_title
title
photo
language
}
}
}
}
@ -119,19 +218,5 @@ export const query = graphql`
section_title
}
}
#
# team: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "magprog_team"}, published: {ne: false}, language: {eq: "ru"}}},
# sort: {fields: frontmatter___order, order: ASC}) {
# edges{
# node {
# html
# frontmatter {
# title
# photo
# language
# }
# }
# }
# }
}
`

60
src/pages/partners.js
View File

@ -14,19 +14,24 @@ const PartnersPage = () => {
<Layout>
<div className="media" style={{marginTop: `30px`}}>
<div className="media-body">
<h1><a aria-label="MIPT general physics"
href="https://mipt.ru/education/chair/physics/"><FormattedMessage
id="partners.mipt.title_fund"/></a></h1>
<h1 className="partner">
<a aria-label="MIPT general physics" href="https://mipt.ru/education/chair/physics/">
<FormattedMessage id="partners.mipt.title_fund"/>
</a>
</h1>
<p><FormattedMessage id="partners.mipt.description_fund"/></p>
<hr/>
<h1><a aria-label="MIPT HEP"
href="https://mipt.ru/science/labs/high_energy_physics_lab.php"><FormattedMessage
id="partners.mipt.title_energy"/></a></h1>
<h1 className="partner">
<a aria-label="MIPT HEP" href="https://mipt.ru/science/labs/high_energy_physics_lab.php">
<FormattedMessage id="partners.mipt.title_energy"/>
</a>
</h1>
<p><FormattedMessage id="partners.mipt.description_energy"/></p>
</div>
<div className="media-right media-middle">
<a href="https://mipt.ru/education/chair/physics/"><img className="media-object" src={mipt_logo}
alt="mipt logo" width="400px"/></a>
<a href="https://mipt.ru/education/chair/physics/">
<img className="media-object" src={mipt_logo} alt="mipt logo" width="400px"/>
</a>
</div>
</div>
@ -34,13 +39,15 @@ const PartnersPage = () => {
<div className="media">
<div className="media-body">
<h1><a id="partner" href="https://www.jetbrains.com/">JetBrains</a></h1>
<h1><a className="partner" href="https://www.jetbrains.com/">JetBrains</a></h1>
<p><FormattedMessage id="partners.jb.description"/></p>
</div>
<div className="media-right media-middle">
<a href="https://www.jetbrains.com/"><img className="media-object" src={jetbrains_logo}
<a href="https://www.jetbrains.com/">
<img className="media-object" src={jetbrains_logo}
alt="inr logo" width="150px"
style={{marginLeft: `10px`}}/></a>
style={{marginLeft: `10px`}}/>
</a>
</div>
</div>
@ -48,13 +55,16 @@ const PartnersPage = () => {
<div className="media">
<div className="media-body">
<h1><a id="partner" href="https://research.jetbrains.org/ru/groups/npm">JetBrains Research</a></h1>
<h1><a className="partner" href="https://research.jetbrains.org/ru/groups/npm">JetBrains
Research</a></h1>
<p><FormattedMessage id="partners.jbr.description"/></p>
</div>
<div className="media-right media-middle">
<a href="https://research.jetbrains.org/ru/groups/npm"><img className="media-object" src={jbr}
<a href="https://research.jetbrains.org/ru/groups/npm">
<img className="media-object" src={jbr}
alt="inr logo" width="250px"
style={{marginLeft: `10px`}}/></a>
style={{marginLeft: `10px`}}/>
</a>
</div>
</div>
@ -62,7 +72,11 @@ const PartnersPage = () => {
<div className="media">
<div className="media-body">
<h2 className="media-heading"><FormattedMessage id="partners.ras.title_exp"/></h2>
<h1 className="partner">
<a>
<FormattedMessage id="partners.ras.title_exp"/>
</a>
</h1>
<p><FormattedMessage id="partners.ras.description_exp"/></p>
</div>
</div>
@ -71,12 +85,16 @@ const PartnersPage = () => {
<div className="media">
<div className="media-left media-middle">
<a href="http://www.inr.ru"><img className="media-object" src={inr_linac} alt="inr logo"
width="100px"/></a>
<a href="http://www.inr.ru">
<img className="media-object" src={inr_linac} alt="inr logo" width="100px"/>
</a>
</div>
<div className="media-body" style={{marginLeft: `25px`}}>
<h1><a aria-label="INR" href="http://www.inr.ru/"><FormattedMessage
id="partners.ras.title_beam"/></a></h1>
<h1 className="partner">
<a aria-label="INR" href="http://www.inr.ru/">
<FormattedMessage id="partners.ras.title_beam"/>
</a>
</h1>
<p><FormattedMessage id="partners.ras.description_beam"/></p>
</div>
</div>
@ -85,7 +103,7 @@ const PartnersPage = () => {
<div className="media">
<div className="media-body">
<h1><a aria-label="INR education" href="http://www.inr.ru/"><FormattedMessage
<h1 className="partner"><a aria-label="INR education" href="http://www.inr.ru/"><FormattedMessage
id="partners.ras.title_education"/></a></h1>
<p><FormattedMessage id="partners.ras.description_education"/></p>
</div>
@ -109,7 +127,7 @@ const PartnersPage = () => {
<div className="media" style={{marginBottom: `30px`}}>
<div className="media-body">
<h1><a aria-label="SRI RAS" href="http://www.iki.rssi.ru/"><FormattedMessage
<h1 className="partner"><a aria-label="SRI RAS" href="http://www.iki.rssi.ru/"><FormattedMessage
id="partners.ras.title_iki"/></a></h1>
<p><FormattedMessage id="partners.ras.description_iki"/></p>
</div>

7
src/styles/main.css
View File

@ -2,7 +2,7 @@ main {
margin-top: 75px;
}
a#partner {
a .partner {
font-size: 1.8rem;
}
@ -59,7 +59,7 @@ div.container main p a:visited {
text-decoration: none;
}
li a {
/*li a {
color: rgb(0, 86, 179)
}
@ -83,6 +83,9 @@ h2 a:visited {
color: rgb(0, 86, 179)
}
*/
.jumbotron {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;

24
static/magprog/css/images/intro.svg Normal file
View File

@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000px" height="500px" viewBox="0 0 1000 500" zoomAndPan="disable" preserveAspectRatio="none">
<style type="text/css"><![CDATA[
line
{
stroke: rgba(255,255,255,0.05);
stroke-width: 1px;
}
]]></style>
<line x1="1100" y1="500" x2="-1000" y2="250" />
<line x1="1100" y1="500" x2="-1000" y2="-100" />
<line x1="1100" y1="500" x2="-1000" y2="-500" />
<line x1="1100" y1="500" x2="-250" y2="-500" />
<line x1="1100" y1="500" x2="300" y2="-500" />
<line x1="1100" y1="500" x2="750" y2="-500" />
<line x1="1750" y1="0" x2="750" y2="500" />
<line x1="1500" y1="0" x2="500" y2="500" />
<line x1="1150" y1="0" x2="150" y2="500" />
<line x1="700" y1="0" x2="-300" y2="500" />
<line x1="150" y1="0" x2="-850" y2="500" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 839 B

4
static/magprog/css/main.css
View File

@ -3876,7 +3876,7 @@ body.is-preload #sidebar nav ul li {
#intro {
background-attachment: fixed;
background-image: url("images/intro.svg");
background-image: url("./images/intro.svg");
background-position: top right;
background-repeat: no-repeat;
background-size: 100% 100%;
@ -3911,5 +3911,5 @@ body.is-preload #sidebar nav ul li {
}
.footer {
z-index: 1000;
z-index: -100;
}