Addressing yesterday's feedback - prevent overflow when opening Wikip…

…edia panel, port scrollbars from Marine atlas, move author panel, factored maxwell.css into imerss-scrolly.css proper
IMERSS · Nov 2, 2023 · e801369 · e801369
1 parent e50bcf8
commit e801369
Show file tree

Hide file tree

Showing 11 changed files with 364 additions and 235 deletions.
diff --git a/R-Markdown-AHSBR_Map_1.Rmd b/R-Markdown-AHSBR_Map_1.Rmd
@@ -1,7 +1,5 @@
 ---
 title: Átl’ḵa7tsem/Howe Sound Biosphere Vegetation Analysis
-author: Antranig Basman, Judith Holm, Ben Keen, Murray Journeay & Andrew Simon
-date: March 26th, 2023
 output: html_document
 knit: (function(inputFile, encoding) {
  rmarkdown::render(inputFile, encoding = encoding, output_dir = "docs") })
@@ -88,6 +86,11 @@ protected.area.plot
 
 Based on our current knowledge, `r round(nrow(protected.plants)/nrow(native.plants)*100)` percent of the native plant diversity known to Átl’ḵa7tsem/Howe Sound has been reported within protected areas. While this preliminary evaluation is limited due to biases in sampling effort and other deficiencies in the data, it represents a starting point for a more thorough assessment of progress being made toward goals of conserving our regional habitat diversity. Please help improve our understanding of the distribution of vascular plants and other biodiversity the region by reporting your observations to the [Atl'ka7tsem Howe Sound Biosphere Region iNaturalist project.](https://www.inaturalist.org/projects/atl-ka7tsem-howe-sound-biosphere-region)
 
+## Authors
+
+Antranig Basman, Judith Holm, Ben Keen, Murray Journeay & Andrew Simon
+
+March 26th, 2023
 
 ```{r setup, include=FALSE}
 knitr::opts_chunk$set(echo = TRUE)

diff --git a/docs/R-Markdown-AHSBR_Map_1-Reknitted.html b/docs/R-Markdown-AHSBR_Map_1-Reknitted.html
diff --git a/docs/R-Markdown-AHSBR_Map_1.html b/docs/R-Markdown-AHSBR_Map_1.html
diff --git a/docs/css/imerss-scrolly.css b/docs/css/imerss-scrolly.css
@@ -0,0 +1,122 @@
+body {
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+h2 {
+ margin-block-start: 0px;
+}
+
+.main-container {
+ padding-bottom: 80vh;
+}
+
+.mxcw-banner {
+ font-size: 36px;
+}
+
+.mxcw-container {
+ display: flex;
+}
+
+.mxcw-leftPane {
+ display: flex;
+ flex-direction: column;
+ width: 65%;
+ /* For God's sake I really mean it! */
+ min-width: 65%;
+}
+
+.mxcw-map {
+ height: 65%;
+}
+
+.mxcw-data {
+ height: 35%
+
+}
+
+.mxcw-content {
+ width: 35%;
+ font-size: 18px;
+ padding: 0 1rem 0 1rem;
+ height: calc(100vh - 100px);
+ overflow-y: scroll;
+}
+
+.mxcw-content h2:hover {
+ outline: 1px solid grey;
+ cursor: pointer;
+}
+
+.mxcw-mapPane {
+ opacity: 0;
+ visibility: hidden;
+ transition-property: opacity, visibility;
+ transition-duration: 400ms;
+}
+
+.mxcw-mapPane.mxcw-activeMapPane {
+ opacity: 1;
+ visibility: visible;
+}
+
+.mxcw-mapSubPane.mxcw-mapPane {
+ transition-duration: 0ms;
+}
+
+.mxcw-widgetPane {
+ display: none;
+ padding: 2em;
+}
+
+.mxcw-widgetPane.mxcw-activeWidgetPane {
+ display: block;
+}
+
+.mxcw-content .section {
+ padding: 8px;
+}
+
+.mxcw-activeSection {
+ background-color: #eee;
+ outline: 1px solid black;
+ transition-property: background-color, outline;
+ transition-duration: 400ms;
+}
+
+.mxcw-mapLabel {
+ z-index: 999 !important;
+}
+
+.mxcw-mapLabel > div {
+ transform: translateX(-50%) translateY(-50%);
+}
+
+body ::-webkit-scrollbar {
+ -webkit-appearance: none;
+ width: 12px;
+ background-color: #eee
+}
+
+body ::-webkit-scrollbar-thumb {
+ border-radius: 6px;
+ background-color: #C1C1C1;
+ -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background-color: #A8A8A8;
+}
+
+body .mx-header ::-webkit-scrollbar {
+ width: 8px;
+}
+
+body .mx-header ::-webkit-scrollbar-thumb {
+ border-radius: 4px;
+}
+
+/* Override Xetthecum definition */
+.fl-imerss-container {
+ margin: 0px;
+}
diff --git a/docs/css/imerss-viz-scrolly.css b/docs/css/imerss-viz-scrolly.css
@@ -1,5 +1,4 @@
 body {
- /* Override definition which shouldn't be in xetthecum-shared.css" */
  margin: 8px
 }
 .mxcw-widgetPane {
@@ -80,6 +79,11 @@ body {
  min-width: auto;
 }
 
+:root {
+ /* Definition taken from xetthecum-shared.css which is no longer included */
+ --imerss-eco-colour: #DEE0B0;
+}
+
 .fl-imerss-checklist-holder {
  background: var(--imerss-eco-colour);
 }
@@ -158,7 +162,6 @@ body {
  display: flex;
  flex-direction: column;
  width: 600px;
- margin-top: -8px; /* No idea why this is necessary */
 }
 
 .fl-imerss-map-and-taxa > * {
@@ -169,6 +172,35 @@ body {
  display: none;
 }
 
+.fl-imerss-photo {
+ min-width: 0px;
+ height: 300px;
+}
+
+.fl-taxonDisplay-row {
+ min-width: 0px;
+}
+
+.fl-imerss-map-and-taxa {
+ margin-right: 0px;
+}
+
+@media screen and ( max-height: 1024px ){
+ .fl-imerss-photo {
+ height: 200px;
+ }
+
+ .mxcw-map {
+ height: 45%;
+ min-height: 45%
+ }
+
+ .mxcw-data {
+ height: 55%;
+ }
+}
+
+
 /* Reach deep into the "general-module-panel" inside the iNat components and adjust its height */
 #inat-components > div > div:last-child {
  height: calc(100vh - 350px);
@@ -178,5 +210,5 @@ body {
 }
 
 #inat-components > div {
- padding-top: 40px;
+ padding-top: 0px;
 }
diff --git a/docs/css/maxwell.css b/docs/css/maxwell.css
@@ -1,93 +1,3 @@
-body {
- font-family: Arial, Helvetica, sans-serif;
-}
-
-h2 {
- margin-block-start: 0px;
-}
-
-.main-container {
- padding-bottom: 80vh;
-}
-
-.mxcw-banner {
- font-size: 36px;
-}
-
-.mxcw-container {
- display: flex;
-}
-
-.mxcw-leftPane {
- display: flex;
- flex-direction: column;
- width: 65%;
- /* For God's sake I really mean it! */
- min-width: 65%;
-}
-
-.mxcw-map {
- height: 65%;
-}
-
-.mxcw-data {
- height: 35%
-
-}
-
-.mxcw-content {
- width: 35%;
- font-size: 18px;
- padding: 0 1rem 0 1rem;
- height: calc(100vh - 100px);
- overflow-y: scroll;
-}
-
-.mxcw-content h2:hover {
- outline: 1px solid grey;
- cursor: pointer;
-}
-
-.mxcw-mapPane {
- opacity: 0;
- visibility: hidden;
- transition-property: opacity, visibility;
- transition-duration: 400ms;
-}
-
-.mxcw-mapPane.mxcw-activeMapPane {
- opacity: 1;
- visibility: visible;
-}
-
-.mxcw-mapSubPane.mxcw-mapPane {
- transition-duration: 0ms;
-}
-
-.mxcw-widgetPane {
- display: none;
- padding: 2em;
-}
-
-.mxcw-widgetPane.mxcw-activeWidgetPane {
- display: block;
-}
-
-.mxcw-content .section {
- padding: 4px;
-}
-
-.mxcw-activeSection {
- background-color: #eee;
- outline: 1px solid black;
- transition-property: background-color, outline;
- transition-duration: 400ms;
-}
-
-.mxcw-mapLabel {
- z-index: 999 !important;
-}
-
 .mxcw-fireLabel {
  font-size: 15px;
  font-weight: bold;
@@ -98,7 +8,3 @@ h2 {
  top: -19px;
  color: white;
 }
-
-.mxcw-mapLabel > div {
- transform: translateX(-50%) translateY(-50%);
-}