Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Workshops
Developer workshop
Commits
4f2cb586
Commit
4f2cb586
authored
Feb 28, 2020
by
Jon Moore
Browse files
Initial code for event record
parent
5d21477c
Pipeline
#24098
passed with stage
in 20 seconds
Changes
4
Pipelines
2
Hide whitespace changes
Inline
Side-by-side
src/app/core/routes/ContentTypeMappings.js
View file @
4f2cb586
...
...
@@ -21,4 +21,13 @@ export default [
loading
:
Loading
,
}),
},
{
contentTypeID
:
'
event
'
,
component
:
Loadable
({
loader
:
()
=>
{
return
import
(
'
~/pages/Records/EventRecord.page
'
);
},
loading
:
Loading
,
}),
},
];
src/app/features/events/components.styled/EventRecord.styled.js
0 → 100644
View file @
4f2cb586
import
styled
,
{
css
}
from
'
styled-components
'
;
import
validateProps
from
'
~/utils/validateProps
'
;
import
getIn
from
'
~/utils/getIn
'
;
const
EventRecordStyled
=
styled
.
div
`
${({
theme
})
=>
{
const
container
=
getIn
([
'
patterns
'
,
'
container
'
],
theme
);
const
gutter
=
getIn
([
'
layout
'
,
'
gutter
'
],
theme
);
const
mqXSmall
=
getIn
([
'
layout
'
,
'
mediaQueries
'
,
'
xsmall
'
],
theme
);
const
mqMedium
=
getIn
([
'
layout
'
,
'
mediaQueries
'
,
'
medium
'
],
theme
);
const
mqLarge
=
getIn
([
'
layout
'
,
'
mediaQueries
'
,
'
large
'
],
theme
);
const
mqXLarge
=
getIn
([
'
layout
'
,
'
mediaQueries
'
,
'
xlarge
'
],
theme
);
validateProps
(
'
ExampleRecord
'
,
{
container
,
gutter
,
mqXSmall
,
mqMedium
,
mqLarge
,
mqXLarge
,
});
return
css
`
.container {
${
container
}
}
.flexWrap {
margin: 0 -
${
gutter
}
;
@media only screen and (min-width:
${
mqLarge
}
) {
display: flex;
align-items: flex-start;
justify-content: space-between;
&.reverse {
flex-direction: row-reverse;
}
}
&:nth-child(1) {
.flexColMain {
padding-bottom: 0;
}
}
}
.flexColMain {
margin-top: 40px;
flex-basis:
${(
100
/
12
)
*
7
}
%;
padding-bottom: 70px;
@media only screen and (min-width:
${
mqLarge
}
) {
margin-top: 0;
}
@media only screen and (min-width:
${
mqXLarge
}
) {
flex-basis:
${(
100
/
12
)
*
8
}
%;
}
.keyInfo {
@media only screen and (min-width:
${
mqLarge
}
) {
display: none;
}
}
}
.flexColAside {
flex-basis:
${(
100
/
12
)
*
4
}
%;
@media only screen and (min-width:
${
mqXLarge
}
) {
flex-basis:
${(
100
/
12
)
*
3
}
%;
}
.keyInfo {
display: none;
@media only screen and (min-width:
${
mqLarge
}
) {
display: block;
}
}
}
.flexColPadding {
padding: 0
${
gutter
}
;
}
.share {
margin-top: 30px;
text-align: right;
&:after {
display: inline-block;
content: '';
background-image: url('/static/img/icons/share.svg');
width: 24px;
height: 24px;
margin-left: 8px;
vertical-align: middle;
}
}
.downloadWrap {
text-align: right;
}
.download {
background: #c3deaf;
border-radius: 24px;
text-align: center;
padding: 16px;
width: 100%;
display: inline-block;
margin-top: 20px;
border: none;
font-size: 16px;
line-height: 24px;
color: #333;
&.cancel {
background: #ccc;
color: #333;
}
span {
&:before {
display: inline-block;
vertical-align: middle;
margin: 0 8px;
content: '';
background-image: url('/static/img/icons/download.svg');
width: 16px;
height: 20px;
}
}
}
.subTitle {
font-weight: bold;
font-size: 20px;
line-height: 24px;
color: #333333;
margin: 64px 0 0 0;
}
.productLink {
border: 1px solid #a8bf97;
box-sizing: border-box;
border-radius: 24px;
padding: 16px;
text-align: center;
min-width: 340px;
display: inline-block;
margin-top: 8px;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.label {
margin-top: 24px;
}
.restrictions {
display: table;
margin-top: 40px;
div {
display: table-row;
margin-top: 24px;
span {
display: table-cell;
&:nth-child(2) {
padding-left: 20px;
text-align: right;
}
}
}
}
.notes {
margin-top: 40px;
border-top: 1px solid #a8bf97;
}
.notesTitle {
margin: 80px 0 0 0;
}
.notesContent {
margin-top: 40px;
> *:first-child {
margin-top: 0;
}
}
.accordionTitle {
position: relative;
padding-right: 32px;
display: block;
width: 100%;
padding: 12px 16px;
margin-top: 8px;
background: #f2f2f2;
border: none;
font-size: 16px;
line-height: 24px;
color: #333333;
text-align: left;
&:after {
content: '';
background-image: url('/static/img/icons/chevron_down.svg');
width: 10px;
height: 5px;
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
}
}
.accordionSection {
margin-top: 40px;
border-top: 1px solid #a8bf97;
}
.accordionControls {
padding-bottom: 40px;
@media only screen and (min-width:
${
mqMedium
}
) {
display: flex;
justify-content: space-between;
}
a {
margin-top: 24px;
display: block;
color: #2134dc;
}
}
.accordionToggle {
display: block;
margin-top: 24px;
border: none;
background: transparent;
color: #879b79;
text-decoration: underline;
&:after {
content: '';
display: inline-block;
margin-left: 8px;
background-image: url('/static/img/icons/chevron_down.svg');
width: 10px;
height: 5px;
}
}
.keyInfo {
padding: 24px 16px;
background: rgba(242, 242, 242, 0.6);
border-radius: 24px;
margin-top: 40px;
}
.keyInfoTitle {
font-weight: bold;
}
.keyInfoTable {
display: table;
margin-top: 24px;
width: 100%;
div {
display: table-row;
margin-top: 24px;
> span {
display: table-cell;
&:nth-child(2) {
text-align: right;
}
}
}
}
.relatedLinks {
text-align: right;
ul {
list-style: none;
}
li {
margin-top: 8px;
}
a {
text-decoration: none;
}
}
`
;
}}
;
`
;
export
default
EventRecordStyled
;
src/app/features/events/components/EventRecord.js
0 → 100644
View file @
4f2cb586
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
{
withRouter
}
from
'
react-router-dom
'
;
import
EventRecordStyled
from
'
../components.styled/EventRecord.styled
'
;
const
EventRecord
=
({
className
,
entry
})
=>
{
if
(
!
entry
)
return
null
;
const
{
entryTitle
}
=
entry
;
return
(
<
EventRecordStyled
className
=
{
className
}
>
<
div
className
=
"
container
"
>
<
div
className
=
"
flexWrap reverse
"
>
<
div
className
=
"
flexColMain
"
>
<
div
className
=
"
flexColPadding
"
>
<
h1
className
=
"
pageTitle
"
>
{
entryTitle
}
<
/h1
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/EventRecordStyled
>
);
};
EventRecord
.
propTypes
=
{
className
:
PropTypes
.
string
,
entry
:
PropTypes
.
object
,
};
export
default
withRouter
(
EventRecord
);
src/app/pages/Records/EventRecord.page.js
0 → 100644
View file @
4f2cb586
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
MainLayout
from
'
~/layouts/Main.layout
'
;
import
EventRecord
from
'
~/features/events/components/EventRecord
'
;
const
EventRecordPage
=
({
entry
})
=>
{
return
(
<
MainLayout
>
<
EventRecord
entry
=
{
entry
}
/
>
<
/MainLayout
>
);
};
EventRecordPage
.
propTypes
=
{
entry
:
PropTypes
.
object
,
};
export
default
EventRecordPage
;
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment