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

fix source scrolling, layout and arrows

Browse Source
This commit is contained in:
Lachlan Kermode
2019-01-30 18:06:43 +00:00
parent d29a6f3bf3
commit 3efdf48c52
4 changed files with 69 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/scss/main.scss
View File

@@ -7,7 +7,7 @@
@import 'header';
@import 'cardstack';
@import 'narrativecard';
@import 'mediaoverlay';
@import 'sourceoverlay';
@import 'map';
@import 'timeline';
@import 'tag-filters';

67
src/scss/mediaoverlay.scss → src/scss/sourceoverlay.scss
View File

@@ -1,5 +1,5 @@
$panel-width: 1000px;
$panel-height: 700px;
$panel-height: 1000px;
$vimeo-width: $panel-width - 100;
$vimeo-height: $panel-height / 2;
@@ -22,20 +22,18 @@ $header-inset: 10px;
.mo-container {
background-color: rgba(239, 239, 239, 0.9);
// max-width: $panel-width;
// min-width: $panel-width;
// max-height: $panel-height;
// min-height: $panel-height;
display: flex;
flex-direction: column;
align-items: center;
height: 80vh;
height: $panel-height;
width: $panel-width;
max-width: 90vw;
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
.back, .next {
width: 30px;
max-width: 30px;
max-height: 30px;
height: 30px;
background: $darkgrey;
color: $offwhite;
@@ -84,15 +82,13 @@ $header-inset: 10px;
.mo-media-container {
flex: 1;
/*display: flex;
flex-direction: row;
justify-content: center;
align-items: center;*/
display: inline-block;
overflow-x: hidden;
overflow: hidden;
box-sizing: border-box;
width: 100%;
max-height: 60vh;
max-height: calc(#{$panel-height} - 100px);
padding: 20px;
font-family: "Lato", Helvetica, sans-serif;
@@ -109,7 +105,7 @@ $header-inset: 10px;
.media-gallery-controls {
height: 100%;
display: flex;
justify-content: center;
justify-content: space-between;
align-items: center;
margin-top: -50%;
}
@@ -127,7 +123,7 @@ $header-inset: 10px;
box-sizing: border-box;
min-height: 100px;
width: 100%;
padding: $padding;
// padding: $padding;
.mo-box-title {
display: flex;
@@ -184,20 +180,6 @@ $header-inset: 10px;
background-color: black;
}
.media-player {
min-width: $vimeo-width;
max-width: $vimeo-width;
min-height: $vimeo-height;
max-height: $vimeo-height;
border: none;
iframe, video {
width: $vimeo-width;
height: $vimeo-height - 50;
border: none;
}
}
.media-controls {
padding: 0 50px;
}
@@ -230,22 +212,22 @@ $header-inset: 10px;
display: flex;
flex-direction: row;
height: 100%;
transition: transform 0.6s ease 0s;
width: 100%;
// min-width: $panel-width - 30px;
// min-height: $panel-height;
margin: 0;
transition: transform 0.2s ease;
}
.source-text-container {
padding: 20px;
display: flex;
justify-content: center;
background: $lightwhite;
// background: $lightwhite;
box-sizing: border-box;
padding: 0 calc(50% - 400px);
overflow-y: scroll;
font-family: 'Merriweather', Georgia, serif;
line-height: 1.5em;
min-width: 100%;
a {
color: $darkgrey;
@@ -262,37 +244,36 @@ $header-inset: 10px;
.source-image-container, .media-player {
display: flex;
justify-content: center;
width: calc(100% - 20px);
height: 100%;
min-width: calc(100% - 20px);
margin: 0 10px;
background: $lightwhite;
border-radius: 2px;
// height: 100%;
// min-width: calc(100% - 20px);
padding: 20px;
}
.media-player {
box-sizing: border-box;
width: 100%;
min-width: 100%;
max-width: 100%;
height: 100%;
min-height: 100%;
max-height: 100%;
padding: 20px 10%;
align-self: center;
align-self: center;
}
.source-image, .source-video {
max-width: calc(100% - 20px);
max-height: calc(100% - 20px);
// max-width: calc(100% - 20px);
// max-height: calc(100% - 20px);
padding: 0px;
font-family: 'Lato', Helvetica, sans-serif;
}
.source-image-loader {
width: 400px;
height: 400px;
}
.video-react .video-react-progress-control {
align-self: center;
}
.video-react .video-react-control {
min-height: 100%;
}
}