zotan/ip6.biz
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add info tooltip to subnet generator on /tools

Browse source
This commit is contained in:
Laura Hausmann 2021-05-02 23:56:51 +02:00
parent 6efef7b368
commit 1b390fe2db
Signed by: zotan
GPG key ID: 5EC1D38FFC321311
3 changed files with 45 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
src/css/tools.css
View file

@ -9,22 +9,22 @@
} }
body { body {
padding-top: 40px; padding-top: 40px;
padding-bottom: 20px; padding-bottom: 20px;
} }
* { * {
font-family: "Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-family: "Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
} }
.address { .address {
color: #f3ff4f; color: #f3ff4f;
} }
.tools table { .tools table {
table-layout: fixed; table-layout: fixed;
font-size: 1em; font-size: 1em;
margin-bottom: 0; margin-bottom: 0;
} }
.tools table td { .tools table td {
@ -33,25 +33,30 @@ body {
} }
.tools table .addr { .tools table .addr {
width: 100%; width: 100%;
} }
.tools table tr > * { .tools table tr > * {
border-top: none !important; border-top: none !important;
}
.tools span.hoverinfo {
font-size: 1.15em;
cursor: pointer;
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.tools .row > div { .tools .row > div {
padding: 0; padding: 0;
} }
.tools .panel { .tools .panel {
margin: 0; margin: 0;
border: none; border: none;
} }
body { body {
padding-top: 25px; padding-top: 25px;
} }
} }
.address_in { .address_in {
@ -97,9 +102,20 @@ body {
} }
.ptr { .ptr {
font-size: 76%; font-size: 76%;
} }
#subnet_out { #subnet_out {
white-space: pre-wrap; white-space: pre-wrap;
}
}
.tools .glyphicon-question-sign {
color: #ffffff;
cursor: default;
opacity: 0.25;
}
.tools .glyphicon-question-sign:hover {
opacity: 0.75;
}

6
src/js/tools.js
View file

@ -24,6 +24,12 @@ subnetInput.oninput = subnetChanged;
$(document).ready(function() { $(document).ready(function() {
randomChanged(); randomChanged();
$("span.glyphicon-question-sign").each(function(k, el) {
$(el).attr("data-title", $(el).closest("tr").find("th").text()).popover({
placement: "auto right",
container: "body",
});
});
}); });
function expandChanged(e){ function expandChanged(e){

1
src/tools.html
View file

@ -92,6 +92,7 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<span class="glyphicon glyphicon-question-sign pull-right hoverinfo" data-toggle="popover" data-trigger="hover" data-content="Example usage: To generate a random /64 subnet out of fd00::/8, use fd00::/8/64 as input"></span>
<h3 class="panel-title">Random Subnet</h3> <h3 class="panel-title">Random Subnet</h3>
</div> </div>
<div class="panel-body"> <div class="panel-body">