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

wip: restyling overlay controls

Browse Source
This commit is contained in:
Lachlan Kermode
2019-02-13 18:34:21 +00:00
parent 44598d602f
commit c297c63fff
2 changed files with 93 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/Overlay/Media.js
View File

@@ -46,12 +46,22 @@ class SourceOverlay extends React.Component {
<h3>{shortenedTitle}</h3>
</div>
</div>
<div className='mo-container' onClick={e => e.stopPropagation()}>
<div className='mo-media-container'>
<Content media={paths.map(selectTypeFromPath)} viewIdx={this.state.idx} />
</div>
</div>
<div className='mo-footer'>
<Controls paths={paths} viewIdx={this.state.idx} onShiftHandler={this.onShiftGallery} />
<div className='mo-meta-container'>
<div className='mo-box-title'>
{title ? <p><b>{title}</b></p> : null}
<div>{desc}</div>
</div>
{/* <div className='mo-box-title'> */}
{/* {title ? <p><b>{title}</b></p> : null} */}
{/* <div>{desc}</div> */}
{/* </div> */}
<div className='mo-box'>
<div>
@@ -69,13 +79,6 @@ class SourceOverlay extends React.Component {
</div>
</div>
</div>
<div className='mo-container' onClick={e => e.stopPropagation()}>
<div className='mo-media-container'>
<Content media={paths.map(selectTypeFromPath)} viewIdx={this.state.idx} />
<Controls paths={paths} viewIdx={this.state.idx} onShiftHandler={this.onShiftGallery} />
</div>
</div>
</div>
)

160
src/scss/overlay.scss
View File

@@ -109,14 +109,7 @@ $overlay-bg: rgba(239,239,239,0.9);
}
}
.mo-footer {
position: fixed;
min-height: 250px;
background-color: $offwhite;
width: 100%;
opacity: 0.9;
bottom: 0;
}
// .mo-header {
// min-height: 42px;
@@ -144,6 +137,14 @@ $overlay-bg: rgba(239,239,239,0.9);
// }
// }
.media-gallery-controls {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: -50%;
}
.mo-media-container {
flex: 1;
flex-direction: row;
@@ -155,88 +156,84 @@ $overlay-bg: rgba(239,239,239,0.9);
max-height: calc(#{$panel-height} - 100px);
font-family: "Lato", Helvetica, sans-serif;
// .media-player {
// width: 100%;
// max-width: $vimeo-width;
// }
.media-content {
display: flex;
flex-direction: column;
}
.media-gallery-controls {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: -50%;
}
// NB: topcushion seems to be necessary with certain overflows..
&.topcushion {
padding-top: 150px;
}
}
// .mo-meta-container {
// display: flex;
// flex-direction: column;
// justify-content: center;
// box-sizing: border-box;
// min-height: 100px;
// width: 100%;
// // padding: $padding;
//
// .mo-box-title {
// display: flex;
// flex-direction: row;
// justify-content: space-between;
// padding: 0 20px;
// }
// .mo-box {
// display: flex;
// flex-direction: row;
// justify-content: space-around;
// max-width: $panel-width;
// width: 100%;
// padding: $padding 0;
// border-top: 1px solid rgb(189,189,189);
// font-family: "Lato", Helvetica, sans-serif;
// font-size: $normal;
//
// h4 {
// margin: 0 0 5px 0;
// text-transform: uppercase;
// font-size: $xsmall;
// color: $darkwhite;
// font-weight: 100;
// }
//
// p {
// margin-top: 0;
// font-size: $large;
// }
//
// .material-icons {
// font-size: $normal;
// color: $darkwhite;
// margin-right: 5px;
// }
//
// a {
// font-size: $large;
// color: $darkgrey;
// border-bottom: 1px solid $red;
// &:hover { border-bottom: 1px solid $darkgrey; }
// }
// }
//
// .indent {
// margin-left: 2*$header-inset;
// }
// }
.mo-footer {
position: fixed;
height: 250px;
background-color: transparent;
width: 100%;
opacity: 0.9;
bottom: 0;
display: flex;
justify-content: center;
}
.mo-meta-container {
color: $overlay-bg;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
min-height: 100px;
.mo-box-title {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 20px;
}
.mo-box {
display: flex;
flex-direction: row;
justify-content: space-around;
width: $panel-width;
padding: $padding 0;
border-top: 1px solid rgb(189,189,189);
font-family: "Lato", Helvetica, sans-serif;
font-size: $normal;
h4 {
margin: 0 0 5px 0;
text-transform: uppercase;
font-size: $xsmall;
color: $darkwhite;
font-weight: 100;
}
p {
margin-top: 0;
font-size: $large;
}
.material-icons {
font-size: $normal;
color: $darkwhite;
margin-right: 5px;
}
a {
font-size: $large;
color: $yellow;
border-bottom: 1px solid $yellow;
}
}
.indent {
margin-left: 2*$header-inset;
}
}
.mo-controls {
color: white;
@@ -291,10 +288,11 @@ $overlay-bg: rgba(239,239,239,0.9);
line-height: 1.5em;
min-width: 100%;
color: $overlay-bg;
a {
color: $darkgrey;
border-bottom: 1px solid $red;
&:hover { border-bottom: 1px solid $darkgrey; color: $darkgrey; }
color: $yellow;
border-bottom: 1px solid $yellow;
}
.md-container {