Skip to content

Instantly share code, notes, and snippets.

@malihassan20

malihassan20/wrapper.js Secret

Last active Jan 18, 2018
Embed
What would you like to do?
nextJs-tour-diary-app\components\wrapper.js
import React from 'react';
import NextHead from 'next/head';
import reactDraftWysiwygCss from 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
const defaultDescription = '';
const defaultOGURL = '';
const defaultOGImage = '';
const Wrapper = props => (
<div style={{ minHeight: '100%', position: 'relative' }}>
<NextHead>
<meta charSet="UTF-8" />
<title>{props.title || 'CosmicJS Tour Diary App'}</title>
<meta name="description" content="Created by Ali Hassan" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" sizes="192x192" href="/static/favicon.png" />
<link rel="apple-touch-icon" href="/static/favicon.png" />
<link rel="mask-icon" href="/static/favicon.png" color="#49B882" />
<link rel="icon" href="/static/favicon.png" />
<meta property="og:url" content={props.url || defaultOGURL} />
<meta property="og:title" content={props.title || ''} />
<meta property="og:description" content={props.description || defaultDescription} />
<meta name="twitter:site" content={props.url || defaultOGURL} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content={props.ogImage || defaultOGImage} />
<meta property="og:image" content={props.ogImage || defaultOGImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
</NextHead>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/antd/3.1.0/antd.min.css" />
<style jsx global>
{reactDraftWysiwygCss}
</style>
<style jsx global>
{`
html {
height: 100%;
}
body {
height: 100%;
background: #f9f9f9 !important;
position: relative;
padding-bottom: 6rem;
min-height: 100%;
}
.ant-layout,
.layout {
background: #f9f9f9 !important;
padding: 0px 50px;
}
.ant-card-meta-description {
display: block;
display: -webkit-box;
height: 60px;
margin: 0 auto;
line-height: 1.4;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
a {
color: #333333 !important;
}
.anticon-delete:hover {
color: red !important;
}
.anticon-form:hover {
color: #1890ff !important;
}
.footer {
text-align: center;
font-size: 16px;
background: #1890ff;
color: #ffffff;
position: absolute;
width: 100%;
height: 35px;
bottom: 0;
padding-top: 5px;
padding-bottom: 5px;
}
.main-row-stl {
margin-bottom: 40px;
padding-top: 50px;
}
.rdw-editor-main {
min-height: 100px;
height: 100%;
overflow: auto;
box-sizing: border-box;
border: 1px solid #f1f1f1 !important;
padding: 5px !important;
border-radius: 2px !important;
}
.adding-content-header {
text-align: center;
font-size: 30px;
color: white;
padding-top: 15%;
}
.anticon-delete:hover,
.anticon-edit:hover,
.anticon-form:hover {
cursor: pointer;
}
.icon-pad {
padding-right: 20px;
}
.ant-spin-container {
overflow: visible !important;
}
.ant-spin-lg .ant-spin-dot {
width: 80px !important;
height: 80px !important;
}
.ant-spin-lg .ant-spin-dot i {
width: 30px !important;
height: 30px !important;
}
.ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
position: fixed !important;
top: 40% !important;
}
.ant-spin-blur {
opacity: 0.2 !important;
}
.ant-spin-blur:after {
content: none !important;
}
img {
object-fit: contain;
}
.timeline-img {
width: 300px;
object-fit: cover !important;
height: 230px;
}
.timeline ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: -20px auto;
padding-top: 50px;
background: #1890ff;
}
.timeline ul li::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: inherit;
}
.timeline ul li div {
position: relative;
bottom: 0;
}
.timeline ul li div::before {
content: '';
position: absolute;
bottom: 7px;
width: 0;
height: 0;
border-style: solid;
}
.timeline ul li:nth-child(even) div {
left: 45px;
}
.timeline ul li:nth-child(even) div::before {
left: -15px;
border-width: 8px 16px 8px 0;
border-color: transparent #1890ff transparent transparent;
}
.timeline ul li:nth-child(odd) div {
left: -340px;
}
.timeline ul li:nth-child(odd) div::before {
right: -15px;
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent #1890ff;
}
@media screen and (max-width: 900px) {
.timeline ul li div {
width: 250px;
}
.timeline ul li:nth-child(odd) div {
left: -335px;
}
}
@media screen and (max-width: 600px) {
.timeline ul li {
margin-left: 20px;
}
.timeline ul li div {
width: calc(100vw - 91px);
}
.timeline ul li:nth-child(odd) div {
left: 45px;
}
.timeline ul li:nth-child(odd) div::before {
left: -15px;
border-width: 8px 16px 8px 0;
border-color: transparent #1890ff transparent transparent;
}
}
.content-body-adj {
min-height: 100vh;
padding-bottom: 60px;
}
.tour-font {
font-size: 16px;
}
.anticon-form.icon-pad-white:hover {
color: #ffffff !important;
}
`}
</style>
{props.children}
<footer className="footer">
Proudly Powered by{' '}
<a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">
Cosmic JS
</a>
</footer>
</div>
);
export default Wrapper;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment