Merge pull request #389 from CAIDA/ioda_ui#305a

Responsive udpates
CAIDA · Aug 20, 2021 · bf0bafc · bf0bafc
2 parents 0d60253 + 8ecd4fd
commit bf0bafc
Show file tree

Hide file tree

Showing 12 changed files with 93 additions and 36 deletions.
diff --git a/assets/css/ioda/sass/abstracts/_mixins.scss b/assets/css/ioda/sass/abstracts/_mixins.scss
@@ -369,6 +369,20 @@ $breakpoint Argument Choices:
   }
 }
 
+@mixin preloadedImage() {
+  width: 100%;
+  position: relative;
+  height: inherit;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & div {
+    position: relative!important;
+    background-size: contain!important;
+  }
+}
+
 @mixin mobileTooltip() {
   @include respond(tab-port) {
     top: 4rem;

diff --git a/assets/css/ioda/sass/components/controlPanel/_controlPanel.scss b/assets/css/ioda/sass/components/controlPanel/_controlPanel.scss
@@ -113,8 +113,13 @@
         height: 3.25rem;
       }
 
-      & img {
-        height: 2rem;
+      &-img {
+        @include preloadedImage();
+
+        & div {
+          width: 2.5rem!important;
+          height: 2.5rem!important;
+        }
       }
     }
 

diff --git a/assets/css/ioda/sass/layout/_header.scss b/assets/css/ioda/sass/layout/_header.scss
@@ -27,6 +27,7 @@
   &__logo {
     display: flex;
     align-items: center;
+    justify-content: flex-start;
     position: relative;
     z-index: 10;
     overflow: hidden;

diff --git a/assets/css/ioda/sass/pages/_dashboard.scss b/assets/css/ioda/sass/pages/_dashboard.scss
@@ -3,7 +3,7 @@
   margin: 1.5rem $gutter-vertical 0;
 
   @include respond(phone-440) {
-    margin: 3rem 0.5rem 0;
+    margin: 3rem 1rem 0;
   }
 
   .title {

diff --git a/assets/css/ioda/sass/pages/_entity.scss b/assets/css/ioda/sass/pages/_entity.scss
@@ -3,7 +3,7 @@
   margin: 1.5rem $gutter-vertical 0;
 
   @include respond(phone-440) {
-    margin: 1.5rem 0.5rem 0;
+    margin: 1.5rem 1rem 0;
   }
 
   .col-1-of-3 {

diff --git a/assets/css/ioda/sass/pages/_home.scss b/assets/css/ioda/sass/pages/_home.scss
@@ -221,18 +221,11 @@ button[class*="searchButton"] {
           align-items: center;
 
           &-container {
-            width: 100%;
-            position: relative;
-            height: inherit;
-            display: flex;
-            justify-content: center;
-            align-items: center;
+            @include preloadedImage();
 
             & div {
-              position: relative!important;
               width: 35rem!important;
               height: 14rem!important;
-              background-size: contain!important;
             }
           }
 

diff --git a/assets/css/style.comp.css b/assets/css/style.comp.css
@@ -325,9 +325,19 @@ body {
     @media only screen and (max-width: 40em) {
       .control-panel .range__calendar {
         height: 3.25rem; } }
-    .control-panel .range__calendar img {
-      height: 2rem;
-      width: 100%; }
+    .control-panel .range__calendar-img {
+      width: 100%;
+      position: relative;
+      height: inherit;
+      display: flex;
+      justify-content: center;
+      align-items: center; }
+      .control-panel .range__calendar-img div {
+        position: relative !important;
+        background-size: contain !important; }
+      .control-panel .range__calendar-img div {
+        width: 2.5rem !important;
+        height: 2.5rem !important; }
   .control-panel .range__input {
     cursor: pointer;
     background-color: #fff;
@@ -2481,14 +2491,14 @@ body {
   .header__logo {
     display: flex;
     align-items: center;
+    justify-content: flex-start;
     position: relative;
     z-index: 10;
     overflow: hidden; }
     .header__logo a {
       display: block; }
       .header__logo a img {
-        height: 3.5rem;
-        width: 100%; }
+        height: 3.5rem; }
   .header__menu {
     display: flex;
     align-items: center; }
@@ -2971,9 +2981,10 @@ button[class*="searchButton"] {
             align-items: center; }
             .home .examples .row .thumbnail__img-container div {
               position: relative !important;
-              width: 35rem !important;
-              height: 14rem !important;
               background-size: contain !important; }
+            .home .examples .row .thumbnail__img-container div {
+              width: 35rem !important;
+              height: 14rem !important; }
           .home .examples .row .thumbnail__img img {
             height: auto;
             max-width: 35rem;
@@ -3216,7 +3227,7 @@ button[class*="searchButton"] {
   margin: 1.5rem 1.5rem 0; }
   @media only screen and (max-width: 27.5em) {
     .dashboard {
-      margin: 3rem 0.5rem 0; } }
+      margin: 3rem 1rem 0; } }
   .dashboard .title {
     margin-bottom: 0; }
   .dashboard .col-1-of-3 {
@@ -3386,7 +3397,7 @@ button[class*="searchButton"] {
   margin: 1.5rem 1.5rem 0; }
   @media only screen and (max-width: 27.5em) {
     .entity {
-      margin: 1.5rem 0.5rem 0; } }
+      margin: 1.5rem 1rem 0; } }
   .entity .col-1-of-3 {
     position: relative; }
   @media only screen and (max-width: 64em) {

diff --git a/assets/css/style.css b/assets/css/style.css
diff --git a/assets/css/style.prefix.css b/assets/css/style.prefix.css
diff --git a/assets/js/Ioda/components/controlPanel/ControlPanel.js b/assets/js/Ioda/components/controlPanel/ControlPanel.js
@@ -28,6 +28,7 @@ import {
     getTimeStringFromDate,
     getUTCTimeStringFromDate, secondaryColor, secondaryColorDark, secondaryColorLight
 } from "../../utils";
+import PreloadImage from "react-preload-image";
 
 class ControlPanel extends Component {
     constructor(props) {
@@ -499,7 +500,7 @@ class ControlPanel extends Component {
                         <div className="range">
                             <button className="range__input" onClick={() => this.handleRangeDisplay()}>
                                 <div className="range__calendar">
-                                    <img src={iconCalendar} alt={T.translate("controlPanel.calendarIconAltText")} width="20" height="20"/>
+                                    <PreloadImage className="range__calendar-img" src={iconCalendar} />
                                 </div>
                                 <input className="range__input-field" onChange={(e) => this.handleRangeInputKeyChange(e)}
                                        value={`${this.state.readableTimeRangeInputSelection.startDate} — ${this.state.readableTimeRangeInputSelection.endDate}`}

diff --git a/assets/js/Ioda/components/timeStamp/TimeStamp.js b/assets/js/Ioda/components/timeStamp/TimeStamp.js
@@ -9,7 +9,27 @@ class TimeStamp extends Component {
         this.state = {
             fade: false,
             messageTop: 0,
-            messageLeft: 0
+            messageLeft: 0,
+            screenBelow1024: false
+        }
+    }
+
+    componentDidMount() {
+        window.addEventListener("resize", this.resize.bind(this));
+        this.resize();
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener("resize", this.resize.bind(this));
+    }
+
+    resize() {
+        let screenBelow1024 = (window.innerWidth <= 1024);
+        console.log(screenBelow1024);
+        if (screenBelow1024 !== this.state.screenBelow1024) {
+            this.setState({
+                screenBelow1024: screenBelow1024
+            });
         }
     }
 
@@ -21,7 +41,7 @@ class TimeStamp extends Component {
         this.setState({
             fade: true,
             messageTop: event.target.offsetTop - 15,
-            messageLeft: event.clientX + 15
+            messageLeft: this.state.screenBelow1024 ? event.clientX - 105 : event.clientX + 15
         });
     }
 

diff --git a/assets/js/Ioda/pages/dashboard/DashboardTab.js b/assets/js/Ioda/pages/dashboard/DashboardTab.js
@@ -15,6 +15,7 @@ import Table from "../../components/table/Table";
 import HorizonTSChart from "horizon-timeseries-chart";
 import * as d3 from "d3-shape";
 import TopoMap from "../../components/map/Map";
+import PreloadImage from "react-preload-image";
 
 
 class DashboardTab extends Component {
@@ -107,7 +108,7 @@ class DashboardTab extends Component {
                                                                  src={this.props.tabCurrentView === 'timeSeries' ? iconGlobe : iconChart}
                                                                  alt={this.props.tabCurrentView === 'timeSeries' ? viewChangeIconAltTextMap : viewChangeIconAltTextHts}
                                                                  title={this.props.tabCurrentView === 'timeSeries' ? viewChangeIconAltTextMap : viewChangeIconAltTextHts}
-                                                                 height="26" width="26"
+                                                                 height="20" width="20"
                                                             />
                                                         }
                                                     </button>