bubble/devthread.ru
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/devthread.ru.git synced 2026-10-11 02:09:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

flexboxgrid to npm

Browse Source
This commit is contained in:
Sergey Yarkov 2020-07-08 22:01:07 +03:00
parent 02ab8a9df3
commit c924a61605
17 changed files with 130 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
package-lock.json generated
View File

@ -8219,6 +8219,14 @@
"resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz",
"integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA=="
},
"flexboxgrid2": {
"version": "7.2.1",
"resolved": "https://registry.npmjs.org/flexboxgrid2/-/flexboxgrid2-7.2.1.tgz",
"integrity": "sha512-O2bO5ZcBXnFy7cYmyt/CKb6CuwzNuUPxWJt8WOiaot8SetE9zyUahXGTSpKDm3+CTYQ5YeEMPeunMdjcxKJz4w==",
"requires": {
"normalize.css": "^7.0.0"
}
},
"flush-write-stream": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
@ -14378,6 +14386,11 @@
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
"integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg=="
},
"normalize.css": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-7.0.0.tgz",
"integrity": "sha1-q/sd2CRwZ04DIrU86xqvQSk45L8="
},
"npm-conf": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz",
@ -16701,6 +16714,15 @@
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
},
"react-flexbox-grid": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/react-flexbox-grid/-/react-flexbox-grid-2.1.2.tgz",
"integrity": "sha512-lj1oVnIJ7TY3W6tPjFUxlUYd1DLFxEg8RiX3HAYVvreE3O9HU9n2390CFoPQ+qk1E+5MXa2t/mLMafFLAa8+7Q==",
"requires": {
"flexboxgrid2": "^7.2.0",
"prop-types": "^15.5.8"
}
},
"react-frame-component": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/react-frame-component/-/react-frame-component-4.1.2.tgz",

1
package.json
View File

@ -38,6 +38,7 @@
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-flexbox-grid": "^2.1.2",
"react-github-btn": "^1.2.0",
"react-helmet": "^6.1.0"
},

2
src/components/Article/Article.scss
View File

@ -112,7 +112,7 @@
}
}
@media (min-width: 768px) and (max-width: 1023px) {
@media (min-width: 768px) and (max-width: 991px) {
.article {
article {
& .article-image {

13
src/components/Description/Description.js
View File

@ -1,4 +1,5 @@
import React from 'react';
import { Grid, Row, Col } from 'react-flexbox-grid'
import './Description.scss'
import HelloIcon from '../../images/hello-icon.svg'
@ -6,9 +7,9 @@ import HelloIcon from '../../images/hello-icon.svg'
const Description = () => {
return (
<section className="description">
<div className="container-fluid">
<div className="row">
<div className="col-sm-8 col-sm-offset-2">
<Grid fluid>
<Row>
<Col md={8} mdOffset={2}>
<div className="desctiption-content">
<div className="description-content__heading">
<span>devthread.ru</span><br />
@ -21,9 +22,9 @@ const Description = () => {
<HelloIcon />
</div>
</div>
</div>
</div>
</div>
</Col>
</Row>
</Grid>
</section>
)
}

2
src/components/Offers/Offers.scss
View File

@ -91,7 +91,7 @@
}
}
@media (max-width: 1023px) {
@media (max-width: 991px) {
.offers {
display: none;
}

1
src/components/SEO/SEO.js
View File

@ -38,7 +38,6 @@ const SEO = ({ title, description, image, type }) => {
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
{/* <link rel="manifest" href="/site.webmanifest" /> */}
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#191919" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="theme-color" content="#ffffff" />

5
src/pages/404.js
View File

@ -1,4 +1,5 @@
import React from 'react';
import { Grid } from 'react-flexbox-grid'
import { Link } from 'gatsby'
import Layout from '../components/Layout/Layout'
@ -6,13 +7,13 @@ const NotFound = () => {
return (
<Layout>
<main>
<div className="container-fluid">
<Grid fluid>
<div className="error">
<span>#404</span>
<h1>страница не найдена</h1>
<Link to='/'>вернуться на главную</Link>
</div>
</div>
</Grid>
</main>
</Layout>
)

17
src/pages/about.js
View File

@ -1,4 +1,5 @@
import React from 'react';
import { Grid, Row, Col } from 'react-flexbox-grid'
import useSiteMetadataQuery from '../hooks/useSiteMetadataQuery'
import SEO from '../components/SEO/SEO'
import Layout from '../components/Layout/Layout'
@ -11,16 +12,16 @@ const AboutPage = () => {
<Layout>
<SEO title='О сайте' description='Этот сайт придуман для того, чтобы помочь вам разобраться с вашей проблемой и решить её. Сайт содержит в себе статьи и руководства.' />
<main>
<div className="container-fluid">
<div className="row">
<div className="col-md-9 col-xs-12">
<Grid fluid>
<Row>
<Col lg={9} xs={12}>
<About title={title} pageTitle={menuLinks.filter(page => page.link === '/about')[0].name} social={social} />
</div>
<div className="col-md-3 col-xs-12">
</Col>
<Col lg={3} xs={12}>
<Offers />
</div>
</div>
</div>
</Col>
</Row>
</Grid>
</main>
</Layout>
)

25
src/pages/articles.js
View File

@ -1,4 +1,5 @@
import React from "react"
import { Grid, Row, Col } from 'react-flexbox-grid'
import { graphql } from 'gatsby'
import useCategoriesQuery from '../hooks/useCategoriesQuery'
import SEO from '../components/SEO/SEO'
@ -16,9 +17,9 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
<Layout>
<SEO title='Статьи' />
<main>
<div className="container-fluid">
<div className="row">
<div className="col-md-9 col-xs-12">
<Grid fluid>
<Row>
<Col lg={9} xs={12}>
<div className="articles">
<div className="articles-heading">
<h1>Статьи</h1>
@ -28,18 +29,18 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
</Categories>
<Search articlesLength={edges.edges.length} />
</div>
</div>
</div>
<div className="row">
<div className="col-md-9 col-xs-12">
</Col>
</Row>
<Row>
<Col lg={9} xs={12}>
<Articles data={edges} />
<Newsletter />
</div>
<div className="col-md-3 col-xs-12">
</Col >
<Col lg={3} xs={12}>
<Offers />
</div>
</div>
</div>
</Col >
</Row>
</Grid>
</main>
</Layout>
)

29
src/pages/books.js
View File

@ -1,4 +1,5 @@
import React from "react"
import { Grid, Row, Col } from 'react-flexbox-grid'
import { graphql } from 'gatsby'
import SEO from '../components/SEO/SEO'
import Layout from '../components/Layout/Layout'
@ -13,13 +14,13 @@ const BooksPage = ({ data: { allMarkdownRemark: edges } }) => {
<Layout>
<SEO title='Ресурсы' />
<main>
<div className="container-fluid">
<div className="row">
<div className="col-md-9 col-xs-12">
<Grid fluid>
<Row>
<Col lg={9} xs={12}>
<div className="books">
<div className="books-heading">
<BooksIcon />
<h1>Что почитать</h1>
<BooksIcon />
<h1>Что почитать</h1>
</div>
<div className="books-description">
<p>
@ -27,18 +28,18 @@ const BooksPage = ({ data: { allMarkdownRemark: edges } }) => {
</p>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-md-9 col-xs-12">
</Col>
</Row>
<Row>
<Col lg={9} xs={12}>
<Books data={edges} />
<Newsletter />
</div>
<div className="col-md-3 col-xs-12">
</Col>
<Col lg={3} xs={12}>
<Offers />
</div>
</div>
</div>
</Col>
</Row>
</Grid>
</main>
</Layout>
)

13
src/pages/contacts.js
View File

@ -1,4 +1,5 @@
import React from 'react';
import { Grid, Row, Col } from 'react-flexbox-grid'
import SEO from '../components/SEO/SEO'
import Layout from '../components/Layout/Layout'
import Contacts from '../components/Contacts/Contacts'
@ -8,13 +9,13 @@ const ContactsPage = () => {
<Layout>
<SEO title='📝 Контакты' description='Для того чтобы задать вопрос, сообщить об ошибках или просто поздороваться, вы можете воспользоваться формой обратной связи или использовать контактные данные.' />
<main>
<div className="container-fluid">
<div className="row">
<div className="col-md-10 col-md-offset-1">
<Grid fluid>
<Row>
<Col lg={10} lgOffset={1}>
<Contacts />
</div>
</div>
</div>
</Col>
</Row>
</Grid>
</main>
</Layout>
)

26
src/pages/index.js
View File

@ -9,33 +9,35 @@ import Newsletter from '../components/Newsletter/Newsletter'
import ArrowNext from '../images/arrow-next.svg'
import { Grid, Row, Col } from 'react-flexbox-grid'
const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
return (
<Layout>
<SEO />
<Description />
<main>
<div className="container-fluid">
<div className="row">
<div className="col-xs-12">
<Grid fluid>
<Row>
<Col xs={12}>
<div className="articles">
<div className="articles-heading">
<h3>Последние статьи</h3>
<Link to='/articles'>смотреть все <ArrowNext /></Link>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-md-9 col-xs-12">
</Col>
</Row>
<Row>
<Col lg={9} xs={12}>
<Articles data={edges} />
<Newsletter />
</div>
<div className="col-md-3 col-xs-12">
</Col>
<Col lg={3} xs={12}>
<Offers />
</div>
</div>
</div>
</Col>
</Row>
</Grid>
</main>
</Layout>
)

1
src/styles/flexboxgrid.min.css vendored
View File

File diff suppressed because one or more lines are too long

5
src/styles/global.scss
View File

@ -1,12 +1,11 @@
@import './flexboxgrid.min';
@import './variables.scss';
@import './fonts.scss';
.container-fluid {
max-width: 1200px;
margin: 0 auto;
padding-right: 15px;
padding-left: 15px;
padding-right: 15px !important;
padding-left: 15px !important;
}
.btn-primary {

17
src/templates/articleTemplate.js
View File

@ -1,4 +1,5 @@
import React from 'react'
import { Grid, Row, Col } from 'react-flexbox-grid'
import Layout from '../components/Layout/Layout'
import Article from '../components/Article/Article'
import Offers from '../components/Offers/Offers'
@ -13,18 +14,18 @@ const articleTemplate = ({ data }) => {
return (
<Layout>
<main>
<div className="container-fluid">
<div className="row">
<div className="col-md-9 col-xs-12">
<Grid fluid>
<Row>
<Col lg={9} xs={12}>
<Article data={frontmatter} html={html} />
<Newsletter />
<MoreArticles />
</div>
<div className="col-md-3 col-xs-12">
</Col>
<Col lg={3} xs={12}>
<Offers />
</div>
</div>
</div>
</Col>
</Row>
</Grid>
</main>
</Layout>
)

25
src/templates/categoryTemplate.js
View File

@ -1,4 +1,5 @@
import React from "react"
import { Grid, Row, Col } from 'react-flexbox-grid'
import { graphql } from 'gatsby'
import useCategoriesQuery from '../hooks/useCategoriesQuery'
import SEO from '../components/SEO/SEO'
@ -16,9 +17,9 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title
<Layout>
<SEO title={title} />
<main>
<div className="container-fluid">
<div className="row">
<div className="col-md-9 col-xs-12">
<Grid fluid>
<Row>
<Col lg={9} xs={12}>
<div className="articles">
<div className="articles-heading">
<h1>Статьи</h1>
@ -31,18 +32,18 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title
<p>Показано {edges.edges.length} из категории "{title}"</p>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-md-9 col-xs-12">
</Col>
</Row>
<Row>
<Col lg={9} xs={12}>
<Articles data={edges} />
<Newsletter />
</div>
<div className="col-md-3 col-xs-12">
</Col>
<Col lg={3} xs={12}>
<Offers />
</div>
</div>
</div>
</Col>
</Row>
</Grid>
</main>
</Layout>
)

25
src/templates/tagTemplate.js
View File

@ -1,4 +1,5 @@
import React from "react"
import { Grid, Row, Col } from 'react-flexbox-grid'
import { graphql } from 'gatsby'
import useCategoriesQuery from '../hooks/useCategoriesQuery'
import SEO from '../components/SEO/SEO'
@ -16,9 +17,9 @@ const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } })
<Layout>
<SEO title={title} />
<main>
<div className="container-fluid">
<div className="row">
<div className="col-md-9 col-xs-12">
<Grid fluid>
<Row>
<Col lg={9} xs={12}>
<div className="articles">
<div className="articles-heading">
<h1>Статьи</h1>
@ -31,18 +32,18 @@ const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } })
<p>Показано {edges.edges.length} по тегу "{title}"</p>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-md-9 col-xs-12">
</Col>
</Row>
<Row>
<Col lg={9} xs={12}>
<Articles data={edges} />
<Newsletter />
</div>
<div className="col-md-3 col-xs-12">
</Col>
<Col lg={3} xs={12}>
<Offers />
</div>
</div>
</div>
</Col>
</Row>
</Grid>
</main>
</Layout>
)