Skip to content

Improve mobile rendering #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
acooks merged 5 commits into from
Aug 3, 2025
Merged

Improve mobile rendering #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a3e4c11
improve ui
acooks Aug 3, 2025
21855b3
ui: Restructure Top Talkers legend for improved readability
acooks Aug 3, 2025
8876299
feat(charts): make top talkers chart responsive
acooks Aug 3, 2025
fed5f47
refactor(css): remove unused legend styles
acooks Aug 3, 2025
19b1db5
refactor(css): remove more unused styles
acooks Aug 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 48 additions & 10 deletions html5-client/src/css/jittertrap.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,19 +49,10 @@
stroke-width: 1.5px;
}

.trapContainer {
border: none;
display: block;
}

/* Trap */
#traps_table tbody td {
vertical-align: middle;
}

.form-inline .input-group input[type="number"] {
width:5em;
}
.measurements td {
width: 9em;
text-align: right;
Expand All @@ -79,6 +70,53 @@
}

.legend-text {
font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
font-size: .8em;
}

#toptalkLegend {
padding-left: 75px; /* Align with chart */
}

@media (max-width: 768px) {
.measurements td,
.measurements th {
font-size: .8rem;
}
}

.btn-primary {
background-color: #4682B4;
border-color: #4682B4;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-color: #3a6d9a;
border-color: #3a6d9a;
}

.btn-secondary {
background-color: #6c757d;
border-color: #6c757d;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.open > .dropdown-toggle.btn-secondary {
background-color: #5a6268;
border-color: #545b62;
}

.nav-pills .nav-link.active {
background-color: #4682B4 !important;
}

.nav-pills .nav-link,
footer a {
color: #4682B4;
}
48 changes: 29 additions & 19 deletions html5-client/src/html/index.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>##PRODUCT-BRANDING##</title>

<!-- Bootstrap 4.6.2 -->
Expand All @@ -23,36 +24,37 @@
<div class="container pt-3">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-5">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle brand-name" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
##PRODUCT-BRANDING##
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#about">About</a>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#help">Help!</a>
</div>
</div>
</div>
<div class="col-5">
<div class="row align-items-center">
<div class="col">
<form id="devSelectForm" class="form-inline">
<div class="form-group">
<div class="form-group mb-0">
<label for="dev_select" class="mr-2">Interface</label>
<select id="dev_select" class="form-control"></select>
</div>
</form>
</div>
<div class="col-auto">
<img src="favicon.svg" alt="Jittertrap Logo" style="height: 40px;">
</div>
</div> <!-- row -->
</div> <!-- card-body -->
</div>


<ul class="nav nav-tabs nav-fill">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#chartsPanel"><i class="fas fa-chart-bar" aria-hidden="true"></i>&nbsp;Charts</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#impairmentsPanel"><i class="fas fa-hourglass-half" aria-hidden="true"></i>&nbsp;Impairments</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#trapsPanel"><i class="fas fa-exclamation-triangle" aria-hidden="true"></i>&nbsp;Traps & Measurements</a></li>
</ul>
<div class="d-md-none">
<ul class="nav nav-pills nav-fill">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#chartsPanel"><i class="fas fa-chart-bar" aria-hidden="true"></i>&nbsp;Charts</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#impairmentsPanel"><i class="fas fa-hourglass-half" aria-hidden="true"></i>&nbsp;Impairments</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#trapsPanel"><i class="fas fa-exclamation-triangle" aria-hidden="true"></i>&nbsp;Traps & Measurements</a></li>
</ul>
</div>
<div class="d-none d-md-block">
<ul class="nav nav-tabs nav-fill">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#chartsPanel"><i class="fas fa-chart-bar" aria-hidden="true"></i>&nbsp;Charts</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#impairmentsPanel"><i class="fas fa-hourglass-half" aria-hidden="true"></i>&nbsp;Impairments</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#trapsPanel"><i class="fas fa-exclamation-triangle" aria-hidden="true"></i>&nbsp;Traps & Measurements</a></li>
</ul>
</div>

<div class="tab-content">
##PANEL-CHARTPARAMS##
Expand All @@ -66,5 +68,13 @@
##MODAL-HELP##
<!-- end modals -->
</div>

<footer class="container pt-3 text-center">
<p>
<a href="#" data-toggle="modal" data-target="#about">About</a>
&middot;
<a href="#" data-toggle="modal" data-target="#help">Help</a>
</p>
</footer>
</body>
</html>
52 changes: 30 additions & 22 deletions html5-client/src/html/panel-chartparams.part.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,35 @@
<div class="card">
<div class="card-body">
<form id="chartsForm">
<div class="form-inline mb-3">
<div class="form-group mr-3">
<label for="chopts_chartPeriod" class="mr-2">Interval</label>
<div class="input-group">
<select id="chopts_chartPeriod" class="form-control">
<option value=5>5</option>
<option value=10>10</option>
<option value=20>20</option>
<option value=50>50</option>
<option value=100 selected>100</option>
<option value=200>200</option>
<option value=500>500</option>
<option value=1000>1000</option>
</select>
<div class="input-group-append">
<span class="input-group-text">ms</span>
<div class="row align-items-center mb-3">
<div class="col-md-auto mb-2 mb-md-0">
<div class="form-group mb-0">
<label for="chopts_chartPeriod" class="mr-2">Interval</label>
<div class="input-group">
<select id="chopts_chartPeriod" class="form-control">
<option value=5>5</option>
<option value=10>10</option>
<option value=20>20</option>
<option value=50>50</option>
<option value=100 selected>100</option>
<option value=200>200</option>
<option value=500>500</option>
<option value=1000>1000</option>
</select>
<div class="input-group-append">
<span class="input-group-text">ms</span>
</div>
</div>
</div>
</div>
<button id="chopts_stop_start" class="btn btn-secondary mr-3"> Pause/Run</button>

<div class="btn-group nav" role="tablist">
<a class="btn btn-secondary nav-link active" id="showTputPanel" data-toggle="tab" href="#tputPanel" role="tab">Throughput</a>
<a class="btn btn-secondary nav-link" id="showTopTalkPanel" data-toggle="tab" href="#toptalkPanel" role="tab">Top Talkers</a>
<div class="col-md-auto mb-2 mb-md-0">
<div class="btn-group nav" role="tablist">
<a class="btn btn-secondary nav-link active" id="showTputPanel" data-toggle="tab" href="#tputPanel" role="tab">Throughput</a>
<a class="btn btn-secondary nav-link" id="showTopTalkPanel" data-toggle="tab" href="#toptalkPanel" role="tab">Top Talkers</a>
</div>
</div>
<div class="col-md-auto">
<button id="chopts_stop_start" class="btn btn-secondary"> Pause/Run</button>
</div>
</div>

Expand Down Expand Up @@ -54,7 +59,10 @@
<input name="y-axis-is-log" type="radio" value="0">Linear
</label>
</div>
<div id="chartToptalk" style="height: 700px; width:100%;" class="my-3"></div>
<div id="chartToptalkWrapper" style="position: relative;">
<div id="chartToptalk" style="width:100%;" class="my-3"></div>
</div>
<div id="toptalkLegend"></div>
</div>
</div>
</form>
Expand Down
8 changes: 4 additions & 4 deletions html5-client/src/html/panel-impairments.part.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div class="card-body">
<form id="impairmentsForm">
<div class="form-row align-items-end">
<div class="form-group col-md-3">
<div class="form-group col-sm-6 col-md-3">
<label for="delay">Delay</label>
<div class="input-group">
<input id="delay" class="form-control" type="number" min="0" max="200" />
Expand All @@ -12,7 +12,7 @@
</div>
</div>
</div>
<div class="form-group col-md-3">
<div class="form-group col-sm-6 col-md-3">
<label for="jitter">Delay variation</label>
<div class="input-group">
<input id="jitter" class="form-control" type="number" min="0" max="100" />
Expand All @@ -21,7 +21,7 @@
</div>
</div>
</div>
<div class="form-group col-md-3">
<div class="form-group col-sm-6 col-md-3">
<label for="loss">Loss</label>
<div class="input-group">
<input id="loss" class="form-control" type="number" min="0" max="100" step="0.1" />
Expand All @@ -30,7 +30,7 @@
</div>
</div>
</div>
<div class="form-group col-md-3">
<div class="form-group col-sm-6 col-md-3">
<div class="btn-group">
<button id="set_netem_button" class="btn btn-primary">
<i class="fas fa-sync-alt" aria-hidden="true"></i>
Expand Down
Loading