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

Merge pull request #179 from forensic-architecture/fix/infopopup-responsiveness

Browse Source 
Fix infopopup responsiveness
This commit is contained in:
Zac Ioannidis
2020-10-29 12:23:54 +00:00
committed by GitHub
parent 7080c6d7af d1f4ade83d
commit 955e3631f9
3 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Layout.js
View File

@@ -262,10 +262,11 @@ class Dashboard extends React.Component {
const dateHeight = 80
const popupStyles = {
height: `calc(100vh - ${app.timeline.dimensions.height}px - ${dateHeight}px)`,
width: '60vw',
height: `fit-content`,
width: window.innerWidth > 768 ? '60vw' : `calc(100vw - var(--toolbar-width))`,
maxWidth: 600,
bottom: app.timeline.dimensions.height + dateHeight,
maxHeight: window.innerHeight > 768 ? `calc(100vh - ${app.timeline.dimensions.height}px - ${dateHeight}px)` : `100vh`,
top: 0,
overflowY: 'scroll'
}

5
src/scss/_variables.scss
View File

@@ -64,3 +64,8 @@ $vimeo-height: $panel-height / 2;
$banner-height: 100px;
$padding: 20px;
$header-inset: 10px;
// CSS variables (for React access)
:root {
--toolbar-width: 110px;
}

3
src/scss/infopopup.scss
View File

@@ -36,7 +36,8 @@
}
&.dark {
background: $black-transparent;
// background: $black-transparent;
background: rgba(0,0,0,0.8);
color: white;
}