bellingcat/ukraine-timemap
1
0
Fork 0
mirror of https://github.com/bellingcat/ukraine-timemap.git synced 2026-06-13 05:48:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

wip: narrative info to the right

Browse Source
This commit is contained in:
Lachlan Kermode
2019-01-08 15:21:58 +00:00
parent 0d8a66ad2f
commit 002447e707
3 changed files with 46 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/presentational/NarrativeCard.js
View File

@@ -42,15 +42,21 @@ function NarrativeCard ({ narrative, methods }) {
return (
<div className='narrative-info'>
{renderClose()}
<h3>{narrative.label}</h3>
<p>{narrative.description}</p>
<h6>
<i className='material-icons left'>location_on</i>
{current + 1}/{steps.length}. {step.location}
</h6>
{_renderActions(current, steps)}
</div>
<div className='narrative-info-header'>
<div className='count-container'>
<div className='count'>
{current + 1}/{steps.length}
</div>
</div>
<div>
<h3>{narrative.label}</h3>
</div>
</div>
{/* <i className='material-icons left'>location_on</i> */}
{/* {_renderActions(current, steps)} */}
<p className='narrative-info-desc'>{narrative.description}</p>
</div>
)
} else {
return null

4
src/scss/cardstack.scss
View File

@@ -17,8 +17,8 @@ $timeline-height: 170px;
color: white;
&.narrative-mode {
right: auto;
left: 10px;
right: 10px;
left: auto;
top: $narrative-info-max-height + 12px;
height: calc(100% - #{$narrative-info-max-height} - #{$timeline-height} - 12px);
}

32
src/scss/narrativecard.scss
View File

@@ -6,20 +6,46 @@ NARRATIVE INFO
.narrative-info {
position: fixed;
top: 10px;
left: 10px;
left: auto;
right: 10px;
// height: auto;
height: 170px;
width: $narrative-info-width;
box-sizing: border-box;
padding: 15px;
max-height: calc(100% - 250px);
overflow: auto;
box-shadow: 0 19px 38px rgba($black, 0.3), 0 15px 12px rgba($black, 0.22);
background: $black;
border: 1px solid $midgrey;
color: $offwhite;
font-family: 'Merriweather', 'Georgia', serif;
.narrative-info-header {
display: flex;
justify-content: space-between;
align-items: stretch;
border-bottom: 1px solid $darkwhite;
padding: 0 15px;
.count-container {
display: flex;
justify-content: center;
align-items: center;
border-right: 1px solid $darkwhite;
}
.count {
position: relative;
padding-right: 15px;
}
}
.narrative-info-desc {
overflow: auto;
}
p {
padding: 0 15px;
}
h3, h6 {
text-align: center;
}