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

Style media gallery controls

Browse Source
This commit is contained in:
Franc Camps-Febrer
2019-01-17 11:08:43 -05:00
parent c2c78f6b98
commit daba374958
3 changed files with 37 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Md.jsx
View File

@@ -25,7 +25,7 @@ class Md extends React.Component {
render() {
if (this.state.md && !this.state.error) {
return (
<div dangerouslySetInnerHTML={{ __html: this.state.md }} />
<div className="md-container" dangerouslySetInnerHTML={{ __html: this.state.md }} />
)
} else if (this.state.error) {
return this.props.unloader || <div>Error: couldn't load source</div>

15
src/components/SourceOverlay.jsx
View File

@@ -139,11 +139,16 @@ class SourceOverlay extends React.Component {
}
_renderControls() {
if (this.props.source.paths.length > 1) {
return (
<div className="media-gallery-controls">
<div className="back" onClick={() => this.onShiftGallery(-1)}><svg><path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z"></path></svg></div>
<div className="next" onClick={() => this.onShiftGallery(1)}><svg><path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z"></path></svg></div>
</div>
);
}
return (
<React.Fragment>
<div className="back" onClick={() => this.onShiftGallery(-1)}><svg><path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z"></path></svg></div>
<div className="next" onClick={() => this.onShiftGallery(1)}><svg><path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z"></path></svg></div>
</React.Fragment>
<div className="media-gallery-controls"></div>
);
}
@@ -165,8 +170,8 @@ class SourceOverlay extends React.Component {
<div className="mo-header-text">{this.props.source.title}</div>
</div>
<div className="mo-media-container">
{(media.length > 1) ? this._renderControls() : ''}
{this._renderContent(media)}
{this._renderControls()}
</div>
<div className="mo-meta-container">
<div className="mo-box-title">