Skip to content

Commit

Permalink
Post meeting changes (#69)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@tobiasmllr
tobiasmllr authored Mar 1, 2024
1 parent 041618d commit eb388fd
Show file tree
Hide file tree
Showing 13 changed files with 299 additions and 277 deletions.
8 changes: 4 additions & 4 deletions frontend/rctool/templates/rctool/components/navbar.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand Down
15 changes: 6 additions & 9 deletions frontend/rctool/templates/rctool/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;">
Expand All @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions frontend/rctool/templates/rctool/rctool/develop/develop_input_settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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;">
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion frontend/rctool/templates/rctool/rctool/develop/develop_table_measurents.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
148 changes: 68 additions & 80 deletions frontend/rctool/templates/rctool/rctool/develop/develop_table_rating.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit eb388fd

Please sign in to comment.