From eb388fd6bd4ae0f84330a61651558dda7abc8ea4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20M=C3=BCller?= <to.mueller@gmail.com>
Date: Fri, 1 Mar 2024 11:16:28 -0800
Subject: [PATCH] Post meeting changes (#69)

* dynamic col adjustments on develop page, min widths

* adjusted tour to use smart placement, even though unsure of the effect

* small layout adjustments to make phone sized screens work

* adjusted table widths for mobile screens

* min width for input after adding spinners (arrow) control back

* disallowed zoom and pan for logarithmic temporarily

* fixed pan disallow

* fixed wrong sig for H

* negative Q

* significant figures to 3
---
 .../templates/rctool/components/navbar.html   |   8 +-
 frontend/rctool/templates/rctool/home.html    |  15 +-
 .../develop/develop_input_settings.html       |  10 +-
 .../develop/develop_table_measurents.html     |   2 +-
 .../rctool/develop/develop_table_rating.html  | 148 +++++------
 .../rctool/rctool/develop/rctool_develop.html |  81 +++---
 .../rctool/develop/rctool_develop_js.html     |  39 ++-
 .../rctool/rctool/export/rctool_export.html   |   6 +-
 .../rctool/export/rctool_export_pdf.html      |   8 +-
 .../rctool/rctool/import/rctool_import.html   |  18 +-
 .../rctool/rctool/tour/rctool_tour_intro.html |   4 +-
 frontend/static/css/main.css                  | 235 +++++++++---------
 frontend/static/css/rctool_intro.css          |   2 +-
 13 files changed, 299 insertions(+), 277 deletions(-)

diff --git a/frontend/rctool/templates/rctool/components/navbar.html b/frontend/rctool/templates/rctool/components/navbar.html
index 41ee0a3..d0d0d49 100644
--- a/frontend/rctool/templates/rctool/components/navbar.html
+++ b/frontend/rctool/templates/rctool/components/navbar.html
@@ -1,7 +1,7 @@
 {% load static %}
 
-<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #003466">
-    <div class="header-title-div"></div>
+<nav class="navbar navbar-expand-sm navbar-dark" style="background-color: #003466">
+    <div class="header-title-div justify-items-start"></div>
       <a class="navbar-brand" href="{% url 'home' %}"><img src="{% static 'images/gov_logo.JPG' %}" class="logo-gov"></a>
       <a class="navbar-brand" href="{% url 'home' %}"><img src="{% static 'images/HydRALogo_text.png' %}" class="logo-hydra "></a>
     </div>
@@ -11,10 +11,10 @@
     <div class="collapse navbar-collapse" id="navbarNav">
       <ul class="navbar-nav ms-auto w-100 justify-content-end">
         <li class="nav-item">
-          <a class="nav-link" href="{% url 'home' %}"><small>home</small></a>
+          <a class="nav-link" href="{% url 'home' %}"><small>Home</small></a>
         </li>
         <li class="nav-item">
-            <a class="nav-link" href="{% url 'rctool_import' 0 %}"><small>develop</small></a>
+            <a class="nav-link" href="{% url 'rctool_import' 0 %}"><small>Develop</small></a>
         </li>
       </ul>
     </div>
diff --git a/frontend/rctool/templates/rctool/home.html b/frontend/rctool/templates/rctool/home.html
index 5bedbaa..c759085 100644
--- a/frontend/rctool/templates/rctool/home.html
+++ b/frontend/rctool/templates/rctool/home.html
@@ -3,9 +3,9 @@
 
  
 {% block content %}
-    <div class="container">
+    <div class="container-fluid">
         <div class="row justify-content-md-center" style="padding: 40px;">
-            <div class="col-12 col-sm-12 col-md-11 col-lg-8 col-xl-8">
+            <div class="col-lg-8 col-sm-12">
                 <div class="card">
 
                     <div class="card-body py-4" style="width: 80%; margin: auto;">
@@ -20,13 +20,10 @@
                                 and HydRA features, or jump straight into a session.
                             </p>
                         </div>
-                        <div class='import-button-container' style="display: flex; margin-bottom:15px;">
-                            <div style="flex:1; margin-right:10px;">
-                                <a class='btn btn-secondary btn-block custom-button' style="background-color: #758fa8 !important; border-color: #FFFFFF;" href="{% url 'rctool_tour_intro' 1 %}"><small>Guided Tour</small></a>
-                            </div>
-                            <div style='flex:1; margin-left:10px;'>
-                                <a class="btn btn-secondary btn-block custom-button" style="background-color: #6c747e !important; border-color: #FFFFFF;" href="{% url 'rctool_import' 0 %}"><small>Start Session</small></a>
-                            </div>
+                        <div class='import-button-container justify-between'>
+                            <a class='btn btn-secondary btn-block custom-button' style="background-color: #758fa8 !important; border-color: #FFFFFF;" href="{% url 'rctool_tour_intro' 1 %}"><small>Guided Tour</small></a>
+                            <div style="width: 50px;"></div>
+                            <a class="btn btn-secondary btn-block custom-button" style="background-color: #6c747e !important; border-color: #FFFFFF;" href="{% url 'rctool_import' 0 %}"><small>Start Session</small></a>
                         </div>
                     </div>
                 </div>
diff --git a/frontend/rctool/templates/rctool/rctool/develop/develop_input_settings.html b/frontend/rctool/templates/rctool/rctool/develop/develop_input_settings.html
index f1f9aef..f8f08d2 100644
--- a/frontend/rctool/templates/rctool/rctool/develop/develop_input_settings.html
+++ b/frontend/rctool/templates/rctool/rctool/develop/develop_input_settings.html
@@ -29,9 +29,9 @@
         </div>
         <div style="flex: 3;">
             <div style="display:flex; font-size:12.5px; color:#696969;">
-                Q = <p id="segment1-const">{{rc.parameters.0.const|floatformat:2}}</p>
+                Q = <p id="segment1-const">{{rc.parameters.0.const|floatformat:3}}</p>
                     ( H <p id="segment1-offset">{{offsets_val.0}}</p>)
-                <sup><p id="segment1-exp">{{rc.parameters.0.exp|floatformat:2}}</p></sup>
+                <sup><p id="segment1-exp">{{rc.parameters.0.exp|floatformat:3}}</p></sup>
             </div>
         </div>
     </div>
@@ -81,7 +81,7 @@
                 <small class="text-medium" data-toggle="tooltip" data-placement="top" title="Offset for segment 2. Typically set as the gauge height at zero flow.">offset:</small>
             </div>
             <div style="flex: 3;">
-                <input type="number" step="0.001" class="form-control form-control-sm" name="offset2" id="offset2" value="{{ offsets.1|floatformat:2 }}" onchange="setOffset(1, this.value, '{{ max_offset|floatformat:2 }}')" onkeydown="return event.key != 'Enter';" href="#" style="font-size:12px;" data-toggle="tooltip" data-placement="top" title="Offset for segment 2. Typically set as the approximate gauge height for the point of zero flow. This is usually found at the deepest part of the control." required>
+                <input type="number" step="0.001" class="form-control form-control-sm" name="offset2" id="offset2" value="{{ offsets.1|floatformat:3 }}" onchange="setOffset(1, this.value, '{{ max_offset|floatformat:3 }}')" onkeydown="return event.key != 'Enter';" href="#" style="font-size:12px;" data-toggle="tooltip" data-placement="top" title="Offset for segment 2. Typically set as the approximate gauge height for the point of zero flow. This is usually found at the deepest part of the control." required>
             </div>
         </div>
         <div style="display: flex; width: 100%; margin: 10px 0px 10px 0px;">
@@ -103,9 +103,9 @@
             </div>
             <div style = " flex: 3;">
                 <div style="display:flex; font-size:12.5px; color:#696969;">
-                    Q = <p id="segment2-const">{{rc.parameters.1.const|floatformat:2}}</p>
+                    Q = <p id="segment2-const">{{rc.parameters.1.const|floatformat:3}}</p>
                         ( H <p id="segment2-offset">{{offsets_val.1}}</p>)
-                    <sup><p id="segment2-exp">{{rc.parameters.1.exp|floatformat:2}}</p></sup>
+                    <sup><p id="segment2-exp">{{rc.parameters.1.exp|floatformat:3}}</p></sup>
                 </div>
             </div>
         </div>
diff --git a/frontend/rctool/templates/rctool/rctool/develop/develop_table_measurents.html b/frontend/rctool/templates/rctool/rctool/develop/develop_table_measurents.html
index ed02f9f..4cb8ea9 100644
--- a/frontend/rctool/templates/rctool/rctool/develop/develop_table_measurents.html
+++ b/frontend/rctool/templates/rctool/rctool/develop/develop_table_measurents.html
@@ -2,7 +2,7 @@
 {% load custom_tags %}
 
 <div id="field">
-  <div class="card-body px-4 py-2" style="display: flex;">
+  <div class="card-body" style="display: flex;">
       <div class="table-container">
           <table class="table" id="fieldtable">
               <thead>
diff --git a/frontend/rctool/templates/rctool/rctool/develop/develop_table_rating.html b/frontend/rctool/templates/rctool/rctool/develop/develop_table_rating.html
index 7a50687..eebdab3 100644
--- a/frontend/rctool/templates/rctool/rctool/develop/develop_table_rating.html
+++ b/frontend/rctool/templates/rctool/rctool/develop/develop_table_rating.html
@@ -1,86 +1,74 @@
 {% load static %}
 {% load custom_tags %}
 
-<div class="card-body px-4 pt-2 pb-0">
-    <table class="table" id="rating-table">
-        <tr class="table-header">
-            <th class="table-cell">segment</th>
-            <th class="table-cell">coefficient</th>
-            <th class="table-cell">exponent</th>
-            <th class="table-cell">offset</th>
-            <th class="table-cell">start point</th>
-            <th class="table-cell">end point</th>
-            <th class="table-cell">RMSE</th>
-            <th class="table-cell"><p id="comparison-header", style="color:#9ec1a3">compare</p></th>
-        </tr>
-        {% if rc.parameters %}
-            <tr class="table-row">
-                <td class="table-cell"><p id="table1-segment1-label">{{ rc.parameters.0.label }}</p></td>
-                <td class="table-cell"><p id="table1-segment1-const">{{ rc.parameters.0.const|floatformat:2 }}</p></td>
-                <td class="table-cell"><p id="table1-segment1-exp">{{ rc.parameters.0.exp|floatformat:2 }}</p></td>
-                <td class="table-cell"><p id="table1-segment1-offset">{{ rc.parameters.0.offset }}</p></td>
-                <td class="table-cell"><p id="table1-endpoint-Seg1H0">{{ rc.parameters.0.seg_bounds.0.0|floatformat:3 }}</p></td>
-                <td class="table-cell"><p id="table1-endpoint-Seg1H1">{{ rc.parameters.0.seg_bounds.1.0|floatformat:3 }}</p></td>
-                <td class="table-cell"><p id="table1-segment1-rmse">{{ rc.parameters.0.rmse|floatformat:2 }}</p></td>
-                <td class="table-cell"><p></p></td>
+<div class="card-body">
+        <div class="table-container">
+        <table class="table" id="rating-table">
+            <tr class="table-header">
+                <th class="table-cell">segment</th>
+                <th class="table-cell">coefficient</th>
+                <th class="table-cell">exponent</th>
+                <th class="table-cell">offset</th>
+                <th class="table-cell">start point</th>
+                <th class="table-cell">end point</th>
+                <th class="table-cell">RMSE</th>
+                <th class="table-cell"><p id="comparison-header", style="color:#9ec1a3">compare</p></th>
             </tr>
-        {% endif %}
-        {% if rc.parameters.1 %}
-            <tr class="table-row">
-                <td class="table-cell"><p id="table1-segment2-label">{{ rc.parameters.1.label }}</p></td>
-                <td class="table-cell"><p id="table1-segment2-const">{{ rc.parameters.1.const|floatformat:2 }}</p></td>
-                <td class="table-cell"><p id="table1-segment2-exp">{{ rc.parameters.1.exp|floatformat:2 }}</p></td>
-                <td class="table-cell"><p id="table1-segment2-offset"> {{ rc.parameters.1.offset }}</p></td>
-                <td class="table-cell"><p id="table1-endpoint-Seg2H0">{{ rc.parameters.1.seg_bounds.0.0|floatformat:3 }}</p></td>
-                <td class="table-cell"><p id="table1-endpoint-Seg2H1">{{ rc.parameters.1.seg_bounds.1.0|floatformat:3 }}</p></td>
-                <td class="table-cell"><p id="table1-segment2-rmse">{{ rc.parameters.1.rmse|floatformat:2 }}</p></td>
-                <td class="table-cell"><p></p></td>
+            {% if rc.parameters %}
+                <tr class="table-row">
+                    <td class="table-cell"><p id="table1-segment1-label">{{ rc.parameters.0.label }}</p></td>
+                    <td class="table-cell"><p id="table1-segment1-const">{{ rc.parameters.0.const|floatformat:3 }}</p></td>
+                    <td class="table-cell"><p id="table1-segment1-exp">{{ rc.parameters.0.exp|floatformat:3 }}</p></td>
+                    <td class="table-cell"><p id="table1-segment1-offset">{{ rc.parameters.0.offset }}</p></td>
+                    <td class="table-cell"><p id="table1-endpoint-Seg1H0">{{ rc.parameters.0.seg_bounds.0.0|floatformat:3 }}</p></td>
+                    <td class="table-cell"><p id="table1-endpoint-Seg1H1">{{ rc.parameters.0.seg_bounds.1.0|floatformat:3 }}</p></td>
+                    <td class="table-cell"><p id="table1-segment1-rmse">{{ rc.parameters.0.rmse|floatformat:3 }}</p></td>
+                    <td class="table-cell"><p></p></td>
+                </tr>
+            {% endif %}
+            {% if rc.parameters.1 %}
+                <tr class="table-row">
+                    <td class="table-cell"><p id="table1-segment2-label">{{ rc.parameters.1.label }}</p></td>
+                    <td class="table-cell"><p id="table1-segment2-const">{{ rc.parameters.1.const|floatformat:3 }}</p></td>
+                    <td class="table-cell"><p id="table1-segment2-exp">{{ rc.parameters.1.exp|floatformat:3 }}</p></td>
+                    <td class="table-cell"><p id="table1-segment2-offset"> {{ rc.parameters.1.offset }}</p></td>
+                    <td class="table-cell"><p id="table1-endpoint-Seg2H0">{{ rc.parameters.1.seg_bounds.0.0|floatformat:3 }}</p></td>
+                    <td class="table-cell"><p id="table1-endpoint-Seg2H1">{{ rc.parameters.1.seg_bounds.1.0|floatformat:3 }}</p></td>
+                    <td class="table-cell"><p id="table1-segment2-rmse">{{ rc.parameters.1.rmse|floatformat:3 }}</p></td>
+                    <td class="table-cell"><p></p></td>
+                </tr>
+            {% endif %}
+            <tr class="table-row" id="add-compare">
+                <td class="table-cell">
+                    <input type="text" class="form-control form-control-sm" name="compareLabel" id="compareLabel" style="font-size: 12px; min-width: 40px" placeholder="" onchange="" onkeydown="return event.key != 'Enter';">
+                </td>
+                <td class="table-cell">
+                    <input type="number" step="0.01" class="form-control form-control-sm" name="compareConst" id="compareConst" style="font-size: 12px; width: 40px" placeholder="" onchange="" onkeydown="return event.key != 'Enter';">
+                </td>
+                <td class="table-cell">
+                    <input type="number" step="0.01" class="form-control form-control-sm" name="compareExp" id="compareExp" style="font-size: 12px; width: 40px" placeholder="" onchange="" onkeydown="return event.key != 'Enter';">
+                </td>
+                <td class="table-cell">
+                    <input type="number" step="0.01" class="form-control form-control-sm" name="compareOffset" id="compareOffset" style="font-size: 12px; width: 40px" placeholder="" onchange="" onkeydown="return event.key != 'Enter';">
+                </td>
+                <td class="table-cell">
+                    <input type="number" step="0.01" class="form-control form-control-sm" name="compareStartBounds" id="compareStartBounds" style="font-size: 12px; width: 40px" placeholder="" onchange="" onkeydown="return event.key != 'Enter';">
+                </td>
+                <td class="table-cell">
+                    <input type="number" step="0.01" class="form-control form-control-sm" name="compareEndBounds" id="compareEndBounds" style="font-size: 12px; width: 40px" placeholder="" onchange="" onkeydown="return event.key != 'Enter';">
+                </td>
+                <td class="table-cell">
+                    <p id="compare-curve-rmse" style="width: 40px;"></p>
+                </td>
+                <td class="table-cell" style="display:block">
+                    <div id="add-curve">
+                        <button class="btn btn-success btn-sm" type="submit" href="#" onclick="addCompareCurve()" style="background-color: #9ec1a3 !important; border-color: #FFFFFF; width: 40px;" onkeydown="return event.key != 'Enter';"> + </button>
+                    </div>
+                    <div id="remove-curve" style="display:none">
+                        <button class="btn btn-success btn-sm" type="submit" href="#" onclick="removeCompareCurve()" style="background-color: #CC6677 !important; border-color: #FFFFFF; width: 40px;" onkeydown="return event.key != 'Enter';"> - </button>
+                    </div>
+                </td>
             </tr>
-        {% endif %}
-        <tr class="table-row" id="add-compare">
-            <td class="table-cell">
-                <div style="width: 40px;">
-                    <input type="text" class="form-control form-control-sm" name="compareLabel" id="compareLabel" style="font-size: 12px" placeholder="" onchange="" onkeydown="return event.key != 'Enter';">
-                </div>
-            </td>
-            <td class="table-cell">
-                <div style="width: 40px;">
-                    <input type="number" step="0.01" class="form-control form-control-sm" name="compareConst" id="compareConst" style="font-size: 12px" placeholder="" onchange="" onkeydown="return event.key != 'Enter';">
-                </div>
-            </td>
-            <td class="table-cell">
-                <div style="width: 40px;">
-                    <input type="number" step="0.01" class="form-control form-control-sm" name="compareExp" id="compareExp" style="font-size: 12px" placeholder="" onchange="" onkeydown="return event.key != 'Enter';">
-                </div>
-            </td>
-            <td class="table-cell">
-                <div style="width: 40px;">
-                    <input type="number" step="0.01" class="form-control form-control-sm" name="compareOffset" id="compareOffset" style="font-size: 12px" placeholder="" onchange="" onkeydown="return event.key != 'Enter';">
-                </div>
-            </td>
-            <td class="table-cell">
-                <div style="width: 40px;">
-                    <input type="number" step="0.01" class="form-control form-control-sm" name="compareStartBounds" id="compareStartBounds" style="font-size: 12px" placeholder="" onchange="" onkeydown="return event.key != 'Enter';">
-                </div>
-            </td>
-            <td class="table-cell">
-                <div style="width: 40px;">
-                    <input type="number" step="0.01" class="form-control form-control-sm" name="compareEndBounds" id="compareEndBounds" style="font-size: 12px" placeholder="" onchange="" onkeydown="return event.key != 'Enter';">
-                </div>
-            </td>
-            <td class="table-cell">
-                <div style="width: 40px;">
-                    <p id="compare-curve-rmse"></p>
-                </div>
-            </td>
-            <td class="table-cell" style="display:block">
-                <div id="add-curve">
-                    <button class="btn btn-success btn-sm" type="submit" href="#" onclick="addCompareCurve()" style="background-color: #9ec1a3 !important; border-color: #FFFFFF; width: 40px;" onkeydown="return event.key != 'Enter';"> + </button>
-                </div>
-                <div id="remove-curve" style="display:none">
-                    <button class="btn btn-success btn-sm" type="submit" href="#" onclick="removeCompareCurve()" style="background-color: #CC6677 !important; border-color: #FFFFFF; width: 40px;" onkeydown="return event.key != 'Enter';"> - </button>
-                </div>
-            </td>
-        </tr>
-    </table>
+        </table>
+    </div>
 </div>
\ No newline at end of file
diff --git a/frontend/rctool/templates/rctool/rctool/develop/rctool_develop.html b/frontend/rctool/templates/rctool/rctool/develop/rctool_develop.html
index b77940f..ac85361 100644
--- a/frontend/rctool/templates/rctool/rctool/develop/rctool_develop.html
+++ b/frontend/rctool/templates/rctool/rctool/develop/rctool_develop.html
@@ -8,7 +8,7 @@
 
 {% block content %}
 
-<div class="container-xl mt-1 mr-5 ml-5">
+<div class="container-fluid mt-2">
     <div class="tab-bar-container" style="display:flex;">
         <ul class="tab-bar-list" style="flex:1">
             <li class="tab-bar-item"><a href="{% url 'rctool_import' 0 %}">import</a></li>
@@ -74,7 +74,7 @@
         </div>
         
         <div class="row" style="padding: 5px 10px 0px 10px;">
-            <div class="col-3" style="padding: 5px;">
+            <div class="col-xl-4 col-lg-5 col-md-6 col-sm-12" style="padding: 5px; min-width: 420px">
                 <div class="card" id="input-settings-card">
                     <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:12.5px; padding-top:7px;">Input Settings</h6>
                     <div class="card-body px-4 py-2" style="display: flex; padding-bottom:15px;">
@@ -82,50 +82,49 @@ <h6 class="card-header text-center" style="background-color: #758fa8; color: #FF
                     </div>
                 </div>
             </div>
+            <div class="col-xl-5 col-lg-7 col-md-6 col-sm-12" style="padding: 5px;">
             {% if messages %}
-                <div class="col-6" style="padding: 5px;">
-                    <div class="card">
-                        <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:12.5px; padding-top:7px;">Error</h6>
-                        <div class="card-body p-2" style="display: flex;">
-                            {% for message in messages %}
-                            <div>
-                                <strong class="error-text">Error autofitting rating curve.</strong><br>
-                                <p>{{message|safe}}<p>
-                            </div>
-                            {% endfor %}
+                <div class="card">
+                    <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:12.5px; padding-top:7px;">Error</h6>
+                    <div class="card-body p-2" style="display: flex;">
+                        {% for message in messages %}
+                        <div>
+                            <strong class="error-text">Error autofitting rating curve.</strong><br>
+                            <p>{{message|safe}}<p>
                         </div>
+                        {% endfor %}
                     </div>
                 </div>
             {% else %}
-                <div class="col-6" style="padding: 5px;">
-                    <div class="card" id="rcchart-card">
-                        <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:12.5px; padding-top:7px;">Rating Curve</h6>
-                        <div class="card-body px-1 pt-1 pb-0">
-                            <div class="rc-chart-container">
-                                <canvas id="rcChart">
-                                </canvas>
+                <div class="card" id="rcchart-card">
+                    <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:12.5px; padding-top:7px">Rating Curve</h6>
+                    <div class="card-body px-1 pt-1 pb-0">
+                        <div class="rc-chart-container">
+                            <canvas id="rcChart">
+                            </canvas>
+                        </div>
+                        <div style="display:flex; justify-content:left;">
+                            <div id="chart-settings-link" style="display:none; margin:-15px 0px 10px 0px;">
+                                <i class="fa fa-cog" aria-hidden="true" style="color: #A9A9A9; margin-right:4px;"></i>
+                                <a class="chart-settings-text" href="#" onclick="toggleChartSettings()"> display settings</a>
                             </div>
-                            <div style="display:flex; justify-content:left;">
-                                <div id="chart-settings-link" style="display:none; margin:-15px 0px 10px 0px;">
-                                    <i class="fa fa-cog" aria-hidden="true" style="color: #A9A9A9; margin-right:4px;"></i>
-                                    <a class="chart-settings-text" href="#" onclick="toggleChartSettings()"> display settings</a>
-                                </div>
-                                <div id="chart-settings" style="display:flex; margin:-10px 0px -5px 0px;">
-                                    <div style="margin: 0px;">
-                                        <input type="checkbox" id="toggle_zoom" name="toggle_zoom" onchange="toggleZoom(this.checked)" style="margin: 0px 0px 0px 10px;">
-                                        <label for='toggle_zoom' style="margin: 0px 10px 0px 0px"><p class="text-small">reset zoom</p></label>
-                                        <input type="checkbox" id="toggle_axis_format" name="toggle_axis_format" checked="checked" onchange="toggleAxisFormat(this.checked)" style="margin:0px;">
-                                        <label for='toggle_axis_format' style="margin: 0px 10px 0px 0px"><p class="text-small">logarithmic axis</p></label>
-                                        <input type="checkbox" id="toggle_detailed_tooltip" name="toggle_detailed_tooltip" checked="checked" style="margin:0px;">
-                                        <label for='toggle_detailed_tooltip' style="margin: 0px 10px 0px 0px"><p class="text-small">hover info</p></label>
-                                    </div>
+                            <div id="chart-settings" style="display:flex; margin:-10px 0px -5px 0px;">
+                                <div style="margin: 0px;">
+                                    <input type="checkbox" id="toggle_zoom" name="toggle_zoom" onchange="toggleZoom(this.checked)" style="margin: 0px 0px 0px 10px;">
+                                    <label for='toggle_zoom' style="margin: 0px 10px 0px 0px"><p class="text-small">reset zoom</p></label>
+                                    <input type="checkbox" id="toggle_axis_format" name="toggle_axis_format" checked="checked" onchange="toggleAxisFormat(this.checked)" style="margin:0px;">
+                                    <label for='toggle_axis_format' style="margin: 0px 10px 0px 0px"><p class="text-small">logarithmic axis</p></label>
+                                    <input type="checkbox" id="toggle_detailed_tooltip" name="toggle_detailed_tooltip" checked="checked" style="margin:0px;">
+                                    <label for='toggle_detailed_tooltip' style="margin: 0px 10px 0px 0px"><p class="text-small">hover info</p></label>
                                 </div>
                             </div>
                         </div>
+                        <p class="text-small" style="text-align: right;">Scroll with mouse to zoom, hold shift to pan</p>
                     </div>
                 </div>
             {% endif %}
-            <div class="col-3" style="padding: 5px;">
+            </div>
+            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12" style="padding: 5px;">
                 {% if not messages %}
                     <div class="card" id="regression-residuals-card">
                         <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:12.5px; padding-top:7px;">Rating Error</h6>
@@ -140,16 +139,13 @@ <h6 class="card-header text-center" style="background-color: #758fa8; color: #FF
                     </div>
                 {% endif %}
             </div>
-        </div>
-    
-        <div class="row" style="padding: 0px 10px 10px 10px;">
-            <div class="col-6" style="padding: 5px;">
+            <div class="col-lg-6 col-sm-12" style="padding: 5px;">
                 <div class="card" id="summary-card">
                     <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:12.5px; padding-top:7px;">Measurements Summary</h6>
                     {% include 'rctool/rctool/develop/develop_table_measurents.html' %}
                 </div>
             </div>
-            <div class="col-6" style="padding: 5px;">
+            <div class="col-lg-6 col-sm-12" style="padding: 5px;">
                 <div class="card" id="summary-card">
                     <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:12.5px; padding-top:7px;">Rating Summary</h6>
                     {% include 'rctool/rctool/develop/develop_table_rating.html' %}
@@ -194,7 +190,10 @@ <h6 class="card-header text-center" style="background-color: #758fa8; color: #FF
 // Check if tour status has been previously set
 if (sessionStorage.getItem("tourStatus") == null) {
     // Check if user selected tour
-    var tourStatusID = {{ tour_request_status_id|safe }};
+    var tourStatusID = null;
+    {% if tour_request_status_id %}
+        tourStatusID = {{ tour_request_status_id|safe }};
+    {% endif %}
     if (tourStatusID == 1) {
         sessionStorage.setItem("tourStatus", true);
         } else {
@@ -208,6 +207,7 @@ <h6 class="card-header text-center" style="background-color: #758fa8; color: #FF
     backdrop: true,
     delay: 750,
     backdropPadding: 10,
+    smartPlacement: true,
     onEnd: function (tour) {
             sessionStorage.setItem("tourStatus", false);
             $('#tour_request_status_id').val("1")
@@ -222,6 +222,7 @@ <h6 class="card-header text-center" style="background-color: #758fa8; color: #FF
             element: "#regression-residuals-card",
             title: "Develop Walkthrough",
             content: "To review the rating model fit, the percent change between field measured discharge and the rating model predicted discharge is calculated. These values should be kept as low as possible with an even distribution of points scattered about the vertical axis at 0."
+
         },
         {
             element: "#summary-card",
diff --git a/frontend/rctool/templates/rctool/rctool/develop/rctool_develop_js.html b/frontend/rctool/templates/rctool/rctool/develop/rctool_develop_js.html
index b6f5e93..4ee9e98 100644
--- a/frontend/rctool/templates/rctool/rctool/develop/rctool_develop_js.html
+++ b/frontend/rctool/templates/rctool/rctool/develop/rctool_develop_js.html
@@ -787,9 +787,44 @@
 
             axisFormat = 'logBase';
 
+            console.log('disallowed zoom and pan!')
+            // TODO: allow zoom and pan for logarithmic scale
+            // disallow zoom and pan:
+            rcChart.options.plugins.zoom = {
+                zoom: {
+                    wheel: {
+                        enabled: false
+                    },
+                    pinch: {
+                        enabled: false
+                    },
+                    mode: 'xy'
+                },
+                pan: {
+                    enabled: false,
+                    modifierKey: 'shift',
+                }
+            };
         }
         else {
             axisFormat = 'linear';
+
+            // allow zoom and pan:
+            rcChart.options.plugins.zoom = {
+                zoom: {
+                    wheel: {
+                        enabled: true,
+                    },
+                    pinch: {
+                        enabled: true,
+                    },
+                    mode: 'xy'
+                },
+                pan: {
+                    enabled: true,
+                    modifierKey: 'shift',
+                }
+            };
         };
 
         rcChart.options.scales = {
@@ -1172,7 +1207,7 @@
                                                     if (residualData[seg].data[j][0] == fielddatacsv.stage[idx]){
                                                         q_model = residualData[seg].data[j][1]
                                                         h_model = Math.exp(1/rcParam[seg - 1].exp * Math.log(context.parsed.x / rcParam[seg - 1].const)) + rcParam[seg - 1].offset
-                                                        r_percent = residualData[seg].data[j][2]
+                                                        r_percent = -residualData[seg].data[j][2]
                                                         r_volumetric = r_percent/100 * context.parsed.x
                                                     }
                                                 }
@@ -1181,7 +1216,7 @@
                                             label.push(['Q:       ' + context.parsed.x.toFixed(2) + ' m³/s']);
                                             label.push(['date:    ' + fielddatacsv.datetime[idx]]);
                                             if (h_model !== null) {
-                                                label.push(['H shift: ' + (context.parsed.y - h_model).toFixed(2) + ' m'])
+                                                label.push(['H shift: ' + (h_model - context.parsed.y).toFixed(2) + ' m'])
                                             }
                                             //if (q_model !== null){
                                             //    label.push(['Q model: ' + q_model.toFixed(2) + ' m³/s']);
diff --git a/frontend/rctool/templates/rctool/rctool/export/rctool_export.html b/frontend/rctool/templates/rctool/rctool/export/rctool_export.html
index 62487d9..5017638 100644
--- a/frontend/rctool/templates/rctool/rctool/export/rctool_export.html
+++ b/frontend/rctool/templates/rctool/rctool/export/rctool_export.html
@@ -3,7 +3,7 @@
 
 
 {% block content %}
-<div class="container-xl mt-1 mr-5 ml-5">
+<div class="container-fluid mt-2">
     <div class="tab-bar-container" style="display:flex;">
         <ul class="tab-bar-list">
             <li class="tab-bar-item"><a href="{% url 'rctool_import' 0 %}">import</a></li>
@@ -14,10 +14,10 @@
 
     <div style="background-color: #FFFFFF; padding-left:10px; padding-right:10px;">
         <div class="row justify-content-md-center" style="padding: 20px;">
-            <div div class="col-12 col-sm-12 col-md-11 col-lg-8 col-xl-8">
+            <div class="col-lg-8 col-sm-12">
                 <div class="card">
                     <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:12.5px; padding-top:7px;">Export</h6>
-                    <div class="card-body pt-3 col-12 col-sm-12 col-md-11 col-lg-8 col-xl-8" style="margin: auto;">
+                    <div class="card-body pt-3" style="margin: auto;">
                         <div syle="flex: 1">
                             <form method="post" id="export-form" action="./output" target="_blank">
                                 <div class="form-group">
diff --git a/frontend/rctool/templates/rctool/rctool/export/rctool_export_pdf.html b/frontend/rctool/templates/rctool/rctool/export/rctool_export_pdf.html
index 370864f..9b46e60 100644
--- a/frontend/rctool/templates/rctool/rctool/export/rctool_export_pdf.html
+++ b/frontend/rctool/templates/rctool/rctool/export/rctool_export_pdf.html
@@ -109,17 +109,17 @@ <h6 class="pdf-section-heading-text">Model Parameters</h6>
             </tr>
             <tr class="table-row" style="height:25px;">
                 <td class="table-cell">{{ rc.parameters.0.label }}</td>
-                <td class="table-cell-large">Q = {{ rc.parameters.0.const|floatformat:2 }} ( H {{ offsets_val.0 }} )<sup>{{ rc.parameters.0.exp|floatformat:2 }}</sup></td>
+                <td class="table-cell-large">Q = {{ rc.parameters.0.const|floatformat:3 }} ( H {{ offsets_val.0 }} )<sup>{{ rc.parameters.0.exp|floatformat:3 }}</sup></td>
                 <td class="table-cell">{{ rc.parameters.0.seg_bounds.0.0|floatformat:3 }} , {{ rc.parameters.0.seg_bounds.1.0|floatformat:3}}</td>
-                <td class="table-cell">{{ rc.parameters.0.rmse|floatformat:2 }}</td>
+                <td class="table-cell">{{ rc.parameters.0.rmse|floatformat:3 }}</td>
                 </td>
             </tr>
             {% if rc.parameters.1 %}
             <tr class="table-row" style="height:25px;">
                 <td class="table-cell">{{ rc.parameters.1.label }}</td>
-                <td class="table-cell-large">Q = {{ rc.parameters.1.const|floatformat:2 }}( H {{ offsets_val.1 }})<sup>{{ rc.parameters.1.exp|floatformat:2 }}</sup></td>
+                <td class="table-cell-large">Q = {{ rc.parameters.1.const|floatformat:3 }}( H {{ offsets_val.1 }})<sup>{{ rc.parameters.1.exp|floatformat:3 }}</sup></td>
                 <td class="table-cell">{{ rc.parameters.1.seg_bounds.0.0|floatformat:3 }} , {{ rc.parameters.1.seg_bounds.1.0|floatformat:3 }}</td>
-                <td class="table-cell">{{ rc.parameters.1.rmse|floatformat:2 }}</td>
+                <td class="table-cell">{{ rc.parameters.1.rmse|floatformat:3 }}</td>
                 </td>
             </tr>
             {% endif %}
diff --git a/frontend/rctool/templates/rctool/rctool/import/rctool_import.html b/frontend/rctool/templates/rctool/rctool/import/rctool_import.html
index 71d04cc..ad91ee7 100644
--- a/frontend/rctool/templates/rctool/rctool/import/rctool_import.html
+++ b/frontend/rctool/templates/rctool/rctool/import/rctool_import.html
@@ -3,8 +3,8 @@
 
 
 {% block content %}
-<div class="container-xl mt-1 mr-5 ml-5">
-    <div class="tab-bar-container" style="display:flex;">
+<div class="container-fluid mt-2">
+    <div class="tab-bar-container">
         <ul class="tab-bar-list">
             <li class="tab-bar-item-current"><a href="{% url 'rctool_import' 0 %}">import</a></li>
             <li class="tab-bar-item" style="pointer-events: none;"><a href="#">develop</a></li>
@@ -14,11 +14,11 @@
 
     <div style="background-color: #FFFFFF; padding-left:10px; padding-right:10px;">
         <div class="row justify-content-md-center" style="padding: 20px;">
-            <div div class="col-12 col-lg-11 col-xl-11">
-                <div class="card">
-                    <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:12.5px; padding-top:7px;">Import Data</h6>
-                    <div class="card-body pt-3" style="display: flex;">
-                        <div class="card-body-left">
+            <div class="card">
+                <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:12.5px; padding-top:7px;">Import Data</h6>
+                <div class="card-body pt-3" style="display: flex;">
+                    <div class="row">
+                        <div class="card-body-left col-lg-5 col-md-12">
                             <form method="POST" id="import-data-form" enctype="multipart/form-data">
                                 <div class="form-group" style="margin-bottom:25px;">
                                     {% csrf_token %}
@@ -40,12 +40,12 @@ <h6 class="card-header text-center" style="background-color: #758fa8; color: #FF
                             </form>
                         </div>
 
-                        <div class="card-body-right">
+                        <div class="card-body-right col-lg-7 col-md-12">
                             {% if not table_data %}
                                 <p id="input-instructions" style="font-size:11.5px;">
                                     Please upload in csv format with the specific column names and format specified below.
                                 </p>
-                                <div id="example-data" style="display:block">
+                                <div id="example-data">
                                     <table class="table">
                                         <tr class="table-header">
                                             <th class="table-cell">datetime</th>
diff --git a/frontend/rctool/templates/rctool/rctool/tour/rctool_tour_intro.html b/frontend/rctool/templates/rctool/rctool/tour/rctool_tour_intro.html
index c93ed2d..8be589b 100644
--- a/frontend/rctool/templates/rctool/rctool/tour/rctool_tour_intro.html
+++ b/frontend/rctool/templates/rctool/rctool/tour/rctool_tour_intro.html
@@ -3,7 +3,7 @@
 
 
 {% block content %}
-<div class="container-xl mt-1 mr-5 ml-5">
+<div class="container-fluid mt-2">
     <div class="tab-bar-container" style="display:flex;">
         <ul class="tab-bar-list">
             <li class="tab-bar-item-current"><a href="{% url 'rctool_import' 0 %}">import</a></li>
@@ -14,7 +14,7 @@
 
     <div style="background-color: #FFFFFF; padding-left:10px; padding-right:10px;">
         <div class="row justify-content-md-center" style="padding: 20px;">
-            <div class="col-12 col-lg-10 col-xl-10">
+            <div class="col-lg-10 col-sm-12">
                 <div class="card">
                     <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:12.5px; padding-top:7px;">Rating Curve Development Overview</h6>
                     <div class="card-body pt-3" style="display: flex;">
diff --git a/frontend/static/css/main.css b/frontend/static/css/main.css
index 372b048..cc36160 100644
--- a/frontend/static/css/main.css
+++ b/frontend/static/css/main.css
@@ -1,9 +1,9 @@
 .main-container {
-    width: 90%;
+  width: 90%;
 }
 
 .main-container {
-    width: 90%;
+  width: 90%;
 }
 
 .logo-hydra-main {
@@ -12,15 +12,15 @@
 }
 
 .text-small {
-    font-size: 10.5px;
-    font-size: 10.5px;
-    color: #A9A9A9;
+  font-size: 10.5px;
+  font-size: 10.5px;
+  color: #A9A9A9;
 }
 
 .text-medium {
-    font-size: 11.5px;
-    font-size: 11.5px;
-    color: #A9A9A9;
+  font-size: 11.5px;
+  font-size: 11.5px;
+  color: #A9A9A9;
 }
 
 .text-description-intro {
@@ -29,27 +29,27 @@
 }
 
 .remove-seg-link {
-    background: none;
-    border: none;
-    padding: 0;
-    font-size: 10.5px;
-    color: #ad2e24;
-    cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 10.5px;
+  color: #ad2e24;
+  cursor: pointer;
 }
 
 .add-seg-link {
-    background: none;
-    border: none;
-    padding: 0;
-    font-size: 10.5px;
-    color: #80B7AB;
-    cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 10.5px;
+  color: #80B7AB;
+  cursor: pointer;
 }
 
 .autofit-settings-text {
-    font-size: 10.5px;
-    color: #A9A9A9;
-    text-decoration: none;
+  font-size: 10.5px;
+  color: #A9A9A9;
+  text-decoration: none;
 }
 
 .chart-settings-text {
@@ -59,15 +59,15 @@
 }
 
 a:hover {
-    color: grey;
-    text-decoration: none;
+  color: grey;
+  text-decoration: none;
 }
 
 ;
 
 a:active {
-    color: grey;
-    text-decoration: none;
+  color: grey;
+  text-decoration: none;
 }
 
 ;
@@ -76,91 +76,91 @@ a:active {
 /* Table Styling */
 
 .tab {
-    overflow: hidden;
-    border: 1px solid #ccc;
-    background-color: #f1f1f1;
-  }
-  
-  .tab a {
-    background-color: inherit;
-    float: left;
-    border: none;
-    outline: none;
-    cursor: pointer;
-    font-size: 13px;
-    padding: 9px 13.5px;
-    transition: 0.3s;
-  }
-  
-  .tab a:hover {
-    background-color: #ddd;
-  }
-  
-  .tab a.active {
-    background-color: #ccc;
-  }
-  
-  .tabcontent {
-    padding: 0px 6px;
-    border: 1px solid #ccc;
-    border-top: none;
-  }
-  
-  .tabcontent {
-    animation: fadeEffect 1s;
-    /* Fading effect takes 1 second */
-  }
-  
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  
-  .tab-bar-list {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    background-color: #F5F5F5;
-  }
-  
+  overflow: hidden;
+  border: 1px solid #ccc;
+  background-color: #f1f1f1;
+}
+
+.tab a {
+  background-color: inherit;
+  float: left;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 9px 13.5px;
+  transition: 0.3s;
+}
+
+.tab a:hover {
+  background-color: #ddd;
+}
+
+.tab a.active {
+  background-color: #ccc;
+}
+
+.tabcontent {
+  padding: 0px 6px;
+  border: 1px solid #ccc;
+  border-top: none;
+}
+
+.tabcontent {
+  animation: fadeEffect 1s;
+  /* Fading effect takes 1 second */
+}
+
+input::-webkit-outer-spin-button,
+input[type=number]::-webkit-inner-spin-button {
+  margin: 0;
+  opacity: 1;
+}
+
+.tab-bar-list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: #F5F5F5;
+}
+
 .tab-bar-item {
-    float: left;
-  }
-  
+  float: left;
+}
+
 .tab-bar-item a {
-    display: block;
-    text-align: center;
-    padding: 6px 13.5px;
-    color: #003466;
-    font-size: 11.5px;
-    text-decoration: none;
-  }
-  
+  display: block;
+  text-align: center;
+  padding: 6px 13.5px;
+  color: #003466;
+  font-size: 11.5px;
+  text-decoration: none;
+}
+
 .tab-bar-item a:hover {
-    background-color: 	#ededed;
-    border-radius: 8px 8px 0px 0px;
-  }
+  background-color: #ededed;
+  border-radius: 8px 8px 0px 0px;
+}
 
 .tab-bar-item-current {
-    float: left;
-  }
-  
-  .tab-bar-item-current a {
-    display: block;
-    text-align: center;
-    padding: 6px 13.5px;
-    color: grey;
-    font-size: 11.5px;
-    text-decoration: none;
-    border-radius: 8px 8px 0px 0px;
-    border-top: 1.5px solid #F0F0F0;
-    border-right: 1.5px solid #F0F0F0;
-    border-left: 1.5px solid #F0F0F0;
-    background-color: #FFFFFF;
-    box-shadow: 0 4px 2px -2px #FFFFFF;
-  }
+  float: left;
+}
+
+.tab-bar-item-current a {
+  display: block;
+  text-align: center;
+  padding: 6px 13.5px;
+  color: grey;
+  font-size: 11.5px;
+  text-decoration: none;
+  border-radius: 8px 8px 0px 0px;
+  border-top: 1.5px solid #F0F0F0;
+  border-right: 1.5px solid #F0F0F0;
+  border-left: 1.5px solid #F0F0F0;
+  background-color: #FFFFFF;
+  box-shadow: 0 4px 2px -2px #FFFFFF;
+}
 
 .tab-bar-filename-title {
   margin: 0;
@@ -177,13 +177,14 @@ a:active {
   background-color: #ededed;
   box-shadow: 0 4px 2px -2px #FFFFFF;
 }
-  
-  /* Go from zero to full opacity */
-  @keyframes fadeEffect {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
\ No newline at end of file
+
+/* Go from zero to full opacity */
+@keyframes fadeEffect {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/frontend/static/css/rctool_intro.css b/frontend/static/css/rctool_intro.css
index 6eb5d77..6fc1332 100644
--- a/frontend/static/css/rctool_intro.css
+++ b/frontend/static/css/rctool_intro.css
@@ -1,4 +1,4 @@
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 576px) {
 
     .card-body-left {
         flex: 1;