Skip to content

Commit

Permalink
Merge pull request #307 from zacharybussey/mobile_adjustments
Browse files Browse the repository at this point in the history 
Various adjustments to smaller screen layouts.
  • Loading branch information
@thorrak
thorrak authored Oct 7, 2018
2 parents 0c23413 + c94daf4 commit 4924c65
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 67 deletions.
5 changes: 5 additions & 0 deletions app/static/css/dashboard_revised.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,4 +182,9 @@
border-radius: 0;
margin: 0 auto;

}

.control-btn {
display: table;
margin: 15px auto;
}
136 changes: 70 additions & 66 deletions app/templates/device_dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
<!-- Start Dashboard Panels -->
<div class="row">

<div class="col-md-3 col-xs-6">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="dashpanel dashpanel-top bg-petermann">
<div class="dash-icon dash-icon-lg"><i class="fa fa-beer fa-fw"></i></div>
<div class="dashpanel-title">Beer Temp</div>
Expand All @@ -93,7 +93,7 @@
</div>
</div>

<div class="col-md-3 col-xs-6">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="dashpanel dashpanel-top bg-amethyst" id="fridgeTempPanel">
<div class="dash-icon dash-icon-lg"><i class="fa fa-thermometer-full fa-fw"></i></div>
<div class="dashpanel-title">Fridge Temp</div>
Expand All @@ -120,7 +120,7 @@

</div>

<div class="col-md-3 col-xs-6">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="dashpanel dashpanel-top bg-concrete">
<div class="dash-icon dash-icon-lg"><i class="fa fa-bolt fa-fw"></i></div>
<div class="dashpanel-title">Control Mode</div>
Expand Down Expand Up @@ -148,7 +148,7 @@
</div>
</div>

<div class="col-md-3 col-xs-6">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="dashpanel dashpanel-top bg-wet-asphalt">
<div class="dash-icon dash-icon-lg"><i class="fa fa-clock-o fa-fw"></i></div>
<div class="dashpanel-title">Log Interval</div>
Expand Down Expand Up @@ -183,66 +183,70 @@
</div>
</div>
<div class="panel-body">
<div class="chart-legend-row row" id="beerTempRow">
<div class="legend-label pull-left" style="padding-left: 10px;" id="beerTempLabel">
<i class="fa fa-line-chart" style="color: {{ config.GRAPH_BEER_TEMP_COLOR }}" id="beer_temp_legend" onClick="toggle_graph_visibility(this)"></i>
Beer Temp
</div>
<div class="legend-value pull-right" style="padding-right: 15px;" id="beerTempValue"></div>
</div>

<div class="chart-legend-row row" id="beerSetRow">
<div class="legend-label pull-left" style="padding-left: 10px;" id="beerSetLabel">
<i class="fa fa-line-chart" style="color: {{ config.GRAPH_BEER_SET_COLOR }}" id="beer_set_legend" onClick="toggle_graph_visibility(this)"></i>
Beer Setting
</div>
<div class="legend-value pull-right" style="padding-right: 15px;" id="beerSetValue"></div>
</div>

<div class="chart-legend-row row" id="fridgeTempRow">
<div class="legend-label pull-left" style="padding-left: 10px;" id="fridgeTempLabel">
<i class="fa fa-line-chart" style="color: {{ config.GRAPH_FRIDGE_TEMP_COLOR }}" id="fridge_temp_legend" onClick="toggle_graph_visibility(this)"></i>
Fridge Temp
</div>
<div class="legend-value pull-right" style="padding-right: 15px;" id="fridgeTempValue"></div>
</div>

<div class="chart-legend-row row" id="fridgeSetRow">
<div class="legend-label pull-left" style="padding-left: 10px;" id="fridgeSetLabel">
<i class="fa fa-line-chart" style="color: {{ config.GRAPH_FRIDGE_SET_COLOR }}" id="fridge_set_legend" onClick="toggle_graph_visibility(this)"></i>
Fridge Setting
</div>
<div class="legend-value pull-right" style="padding-right: 15px;" id="fridgeSetValue"></div>
</div>

<div class="chart-legend-row row" id="roomTempRow">
<div class="legend-label pull-left" style="padding-left: 10px;" id="roomTempLabel">
<i class="fa fa-line-chart" style="color: {{ config.GRAPH_ROOM_TEMP_COLOR }}" id="room_temp_legend" onClick="toggle_graph_visibility(this)"></i>
Room Temp
</div>
<div class="legend-value pull-right" style="padding-right: 15px;" id="roomTempValue"></div>
</div>

{# This is part of the specific gravity sensor support #}
{% if beer.gravity_enabled %}
<div class="chart-legend-row row" id="gravityRow">
<div class="legend-label pull-left" style="padding-left: 10px;" id="gravityLabel">
<i class="fa fa-line-chart" style="color: {{ config.GRAPH_FRIDGE_SET_COLOR }}" id="gravity_legend" onClick="toggle_graph_visibility(this)"></i>
Gravity
</div>
<div class="legend-value pull-right" style="padding-right: 15px;" id="gravityValue"></div>
</div>

<div class="chart-legend-row row" id="gravityTempRow">
<div class="legend-label pull-left" style="padding-left: 10px;" id="gravityTempLabel">
<i class="fa fa-line-chart" style="color: {{ config.GRAPH_ROOM_TEMP_COLOR }}" id="gravity_temp_legend" onClick="toggle_graph_visibility(this)"></i>
Grav Sensor Temp
</div>
<div class="legend-value pull-right" style="padding-right: 15px;" id="gravityTempValue"></div>
</div>
{% endif %}
<table class="table table-striped">
<tbody>
<tr id="beerTempRow">
<td id="beerTempLabel">
<i class="fa fa-line-chart" style="color: {{ config.GRAPH_BEER_TEMP_COLOR }}" id="beer_temp_legend" onClick="toggle_graph_visibility(this)"></i>
Beer Temp
</td>
<td id="beerTempValue"></td>
</tr>

<tr id="beerSetRow">
<td id="beerSetLabel">
<i class="fa fa-line-chart" style="color: {{ config.GRAPH_BEER_SET_COLOR }}" id="beer_set_legend" onClick="toggle_graph_visibility(this)"></i>
Beer Setting
</td>
<td id="beerSetValue"></td>
</tr>

<tr id="fridgeTempRow">
<td id="fridgeTempLabel">
<i class="fa fa-line-chart" style="color: {{ config.GRAPH_FRIDGE_TEMP_COLOR }}" id="fridge_temp_legend" onClick="toggle_graph_visibility(this)"></i>
Fridge Temp
</td>
<td id="fridgeTempValue"></td>
</tr>

<tr id="fridgeSetRow">
<td id="fridgeSetLabel">
<i class="fa fa-line-chart" style="color: {{ config.GRAPH_FRIDGE_SET_COLOR }}" id="fridge_set_legend" onClick="toggle_graph_visibility(this)"></i>
Fridge Setting
</td>
<td id="fridgeSetValue"></td>
</tr>

<tr id="roomTempRow">
<td id="roomTempLabel">
<i class="fa fa-line-chart" style="color: {{ config.GRAPH_ROOM_TEMP_COLOR }}" id="room_temp_legend" onClick="toggle_graph_visibility(this)"></i>
Room Temp
</td>
<td id="roomTempValue"></td>
</tr>

{# This is part of the specific gravity sensor support #}
{% if beer.gravity_enabled %}
<tr id="gravityRow">
<td id="gravityLabel">
<i class="fa fa-line-chart" style="color: {{ config.GRAPH_FRIDGE_SET_COLOR }}" id="gravity_legend" onClick="toggle_graph_visibility(this)"></i>
Gravity
</td>
<td id="gravityValue"></td>
</tr>

<tr id="gravityTempRow">
<td id="gravityTempLabel">
<i class="fa fa-line-chart" style="color: {{ config.GRAPH_ROOM_TEMP_COLOR }}" id="gravity_temp_legend" onClick="toggle_graph_visibility(this)"></i>
Grav Sensor Temp
</td>
<td id="gravityTempValue"></td>
</tr>
{% endif %}

</tbody>
</table>
</div>
<div class="panel-footer"></div>

</div>
</div>
Expand All @@ -253,14 +257,14 @@
<!-- Begin Controls -->
<div class="row" >
<div class="col-md-4">
<button type="button" class="btn btn-lg btn-danger center" data-toggle="modal" data-target="#tempControl{{ active_device.id }}">Control Temperature</button>
<button type="button" class="btn btn-lg btn-danger control-btn" data-toggle="modal" data-target="#tempControl{{ active_device.id }}">Control Temperature</button>
</div>

<div class="col-md-4">
<button type="button" class="btn btn-lg btn-info center" data-toggle="modal" data-target="#beerModal">Control Logging</button>
<button type="button" class="btn btn-lg btn-info control-btn" data-toggle="modal" data-target="#beerModal">Control Logging</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-lg btn-success center" data-toggle="modal" data-target="#beerLogModal">Load Prior Log</button>
<button type="button" class="btn btn-lg btn-success control-btn" data-toggle="modal" data-target="#beerLogModal">Load Prior Log</button>
</div>


Expand Down
2 changes: 1 addition & 1 deletion app/templates/sitewide/flat_ui_template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<title>{% block title %}Fermentrack Web Interface{% endblock %}</title>
<meta name="description" content=""/>

<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{% static "vendor/bootstrap/css/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "vendor/flat-ui/css/flat-ui.min.css" %}" rel="stylesheet">
<link href="{% static "vendor/font-awesome/css/font-awesome.min.css" %}" rel="stylesheet">
Expand Down

0 comments on commit 4924c65

Please sign in to comment.