ArduPlotter – Updated Responsive Web Design

Whilst ArduPlotter has always been responsive (utilising the Bootstrap framework), it hasn’t always used all of the available screen space. This was especially true for large screen devices (1200px+ wide).

I have updated it so that if your browsers is larger than 1200px, you will get graphs to the right of the map instead of below it. This allows a lot more of the information to be viewed simultaneously.

To achieve this I have added some media queries in the CSS to change the bootstrap ‘fixed’ width container into a fluid width container that will fill the entire width of the screen.

@media (min-width: 1200px) {
  .page-view-log .container {
    width: auto;
  }
}

However having two graphs side by side and a width of 1200px to about 1750px resulted in very squished graphs, so to fix that I made the graphs full width for small-largish screens (1200-1750px)

@media (min-width: 1200px) and (max-width: 1750px) {
   .data-graphs .col-md-6  {
     width: 100%;
   }
 }

I’ve also fix the position of the map on the left so if you scroll down it is always visible.

@media (min-width: 1200px) {
   #mapContent {
     position: fixed;
     width: 41%;
   }
 }

If the screen size is smaller than 1200px you will get the previous experience, with the fixed width column and graphs beneath the map.