gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add footer for guide pages

Browse Source
This commit is contained in:
Kamran Ahmed
2019-11-03 11:47:31 +04:00
parent 62f8e0961f
commit 4fa6747d6e
5 changed files with 117 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
.editorconfig Normal file
View File

@ -0,0 +1,23 @@
# EditorConfig for the node-soap library - head over to editorconfig.org to see if you editor supports this file.
# this is the topmost .editorconfig file
root = true
[*]
end_of_line = lf
insert_final_newline = true
[*.xml]
insert_final_newline = false
[*.js]
indent_style = space
indent_size = 2
[*.json]
indent_style = space
indent_size = 2
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

79
components/guide-footer/index.js
View File

@ -1,44 +1,51 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGithub, faFacebookSquare, faTwitterSquare, faTwitter, faHackerNewsSquare, faRedditSquare } from '@fortawesome/free-brands-svg-icons' import { faFacebookSquare, faGithub, faHackerNewsSquare, faRedditSquare, faTwitter, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
import { AuthorBio, AuthorImg, AuthorInfoWrap, AuthorMeta, ContributeIcon, FooterWrap, ShareIcons, ShareWrap, WrittenBy } from './style'; import { AuthorBio, AuthorImg, AuthorInfoWrap, AuthorMeta, ContributeIcon, FooterBg, FooterContainer, FooterWrap, ShareIcons, ShareWrap } from './style';
const GuideFooter = (props) => ( const GuideFooter = (props) => (
<FooterWrap> <FooterWrap>
<ShareWrap> <FooterBg className="border-top">
<ContributeIcon> <FooterContainer>
<a href="#"> <ShareWrap>
<span>Improve this Guide </span> <ContributeIcon>
<FontAwesomeIcon icon={ faGithub } /> <a href="#">
</a> <span className="d-none d-sm-none d-md-inline d-lg-inline d-xl-inline">Improve this Guide </span>
</ContributeIcon> <span className="d-inline d-sm-inline d-md-none d-lg-none d-xl-none">Contribute </span>
<ShareIcons> <FontAwesomeIcon icon={faGithub}/>
<span>Help spread the word</span> </a>
<a href="#"><FontAwesomeIcon icon={ faTwitterSquare } /></a> </ContributeIcon>
<a href="#"><FontAwesomeIcon icon={ faFacebookSquare } /></a> <ContributeIcon hasMargins>
<a href="#"><FontAwesomeIcon icon={ faRedditSquare } /></a> <a href="#">
<a href="#"><FontAwesomeIcon icon={ faHackerNewsSquare } /></a> <span className="d-none d-sm-none d-md-inline d-lg-inline d-xl-inline">Follow the author </span>
</ShareIcons> <span className="d-inline d-sm-inline d-md-none d-lg-none d-xl-none">Author </span>
</ShareWrap> <FontAwesomeIcon icon={faTwitter}/>
<AuthorInfoWrap className="border-top"> </a>
<AuthorImg src="/static/authors/kamranahmedse.jpeg" alt="" /> </ContributeIcon>
<AuthorMeta> <ShareIcons>
<WrittenBy>Written By</WrittenBy> <span className="d-none d-sm-none d-md-none d-lg-inline d-xl-inline">Help spread the word</span>
<h4><a href="#">Kamran Ahmed</a></h4> <span className="d-inline d-sm-inline d-md-inline d-lg-none d-xl-none">Share</span>
<AuthorBio>Lead engineer at Tajawal. Created roadmap.sh. Lover of web and opensource</AuthorBio> <a href="#"><FontAwesomeIcon icon={faTwitterSquare}/></a>
<p className="social-links"> <a href="#"><FontAwesomeIcon icon={faFacebookSquare}/></a>
<a href="#"> <a href="#"><FontAwesomeIcon icon={faRedditSquare}/></a>
<FontAwesomeIcon icon={ faTwitter } /> <a href="#"><FontAwesomeIcon icon={faHackerNewsSquare}/></a>
Follow on Twitter </ShareIcons>
</a> </ShareWrap>
<a href="#"> </FooterContainer>
<FontAwesomeIcon icon={ faGithub } /> </FooterBg>
Follow on GitHub
</a> <FooterBg className="border-top">
</p> <FooterContainer>
</AuthorMeta> <AuthorInfoWrap>
</AuthorInfoWrap> <AuthorImg src="/static/authors/kamranahmedse.jpeg" alt=""/>
<AuthorMeta>
<h4><a href="#">Kamran Ahmed</a></h4>
<AuthorBio>Lead engineer at Tajawal. Lover of all things web and opensource. Created roadmap.sh to help the confused ones.</AuthorBio>
</AuthorMeta>
</AuthorInfoWrap>
</FooterContainer>
</FooterBg>
</FooterWrap> </FooterWrap>
); );
export default GuideFooter; export default GuideFooter;

70
components/guide-footer/style.js
View File

@ -2,14 +2,23 @@ import styled from 'styled-components';
export const FooterWrap = styled.div` export const FooterWrap = styled.div`
display: block; display: block;
margin-top: 40px; margin-top: 50px;
`;
export const FooterContainer = styled.div`
max-width: 750px;
margin: 0 auto;
padding: 0 20px;
`;
export const FooterBg = styled.div`
`; `;
export const ShareWrap = styled.div` export const ShareWrap = styled.div`
display: flex; padding: 17px 0px;
justify-content: space-between;
margin-bottom: 15px;
align-items: center; align-items: center;
justify-content: center;
display: flex;
a { a {
display: flex; display: flex;
@ -18,8 +27,8 @@ export const ShareWrap = styled.div`
} }
svg { svg {
height: 22px; height: 18px;
color: #101010; color: #757575;
margin-left: 7px; margin-left: 7px;
} }
`; `;
@ -28,21 +37,38 @@ export const ContributeIcon = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: ${props => props.hasMargins ? '0 30px' : '0'};
span {
margin-right: 4px;
}
a {
color: #757575;
font-size: 14px;
}
`; `;
export const ShareIcons = styled.div` export const ShareIcons = styled.div`
display: flex; display: flex;
align-items: center;
color: #757575;
font-size: 14px;
span {
margin-right: 4px;
}
`; `;
export const AuthorInfoWrap = styled.div` export const AuthorInfoWrap = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
padding: 30px 0 70px; padding: 40px 0;
h4 { h4 {
position: relative; position: relative;
font-size: 22px; font-size: 22px;
margin: 8px 0; margin: 10px 0;
line-height: 17px; line-height: 17px;
a { a {
@ -55,13 +81,9 @@ export const AuthorInfoWrap = styled.div`
margin: 5px 0 0; margin: 5px 0 0;
a { a {
border: 1px solid #757575;
background: transparent; background: transparent;
color: #757575; color: #101010;
padding: 4px 10px;
margin-right: 10px; margin-right: 10px;
border-radius: 5px;
font-size: 10px;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; text-decoration: none;
display: inline-flex; display: inline-flex;
@ -73,9 +95,7 @@ export const AuthorInfoWrap = styled.div`
} }
svg { svg {
height: 16px; height: 18px;
margin-right: 8px;
fill: #757575;
} }
} }
} }
@ -87,9 +107,13 @@ export const AuthorInfoWrap = styled.div`
export const AuthorBio = styled.p` export const AuthorBio = styled.p`
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 24px;
color: #757575; color: #757575;
margin-bottom: 7px; margin-bottom: 0;
a {
font-weight: 500;
}
`; `;
export const AuthorImg = styled.img` export const AuthorImg = styled.img`
@ -100,16 +124,8 @@ export const AuthorImg = styled.img`
margin-right: 22px; margin-right: 22px;
`; `;
export const WrittenBy = styled.p`
font-size: 11px;
text-transform: uppercase;
color: #757575;
display: block;
margin-bottom: 0;
`;
export const AuthorMeta = styled.div` export const AuthorMeta = styled.div`
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
`; `;

6
layouts/default/global.scss
View File

@ -10,11 +10,11 @@ ul li, ol li {
} }
.border-top { .border-top {
border-top: 1px solid #eaeaea; border-top: 1px solid #eaeaea !important;
} }
.border-bottom { .border-bottom {
border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea !important;
} }
.bg-light { .bg-light {
@ -56,4 +56,4 @@ code:not([class]) {
padding: 0 5px; padding: 0 5px;
word-wrap: normal; word-wrap: normal;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125) box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125)
} }

10
pages/guides/[guide].js
View File

@ -10,12 +10,12 @@ import GuideFooter from '../../components/guide-footer';
const Guide = ({ guide }) => { const Guide = ({ guide }) => {
return ( return (
<GuideLayout> <GuideLayout>
<GuideHeader /> <GuideHeader/>
<GuideBody> <GuideBody>
<GuideContent /> <GuideContent/>
<ShareGuide /> <ShareGuide/>
<GuideFooter />
</GuideBody> </GuideBody>
<GuideFooter/>
</GuideLayout> </GuideLayout>
); );
}; };
@ -31,4 +31,4 @@ Guide.getInitialProps = serverOnlyProps(({ req }) => {
}; };
}); });
export default Guide; export default Guide;