Pi-Hole/web
1
0
Fork 0
mirror of https://github.com/pi-hole/web.git synced 2025-12-24 20:55:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #520 from Th3M3/form-group_responsive_style

Browse Source 
Form group responsive style
This commit is contained in:
Mcat12
2017-06-19 14:37:57 -04:00
committed by GitHub
parent 399f2ad029 53068e0fef
commit 0dcf45d271
2 changed files with 29 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
scripts/pi-hole/js/list.js
View File

@@ -208,11 +208,19 @@ $(function(){
});
});
$(document).ready(function () {
if (screen.width < 576) {
$(".input-group-btn").css("display", "initial");
// Wrap form-group's buttons to next line when viewed on a small screen
$(window).on("resize",function() {
if ($(window).width() < 991) {
$(".form-group.input-group").removeClass("input-group").addClass("input-group-block");
$(".form-group.input-group-block > input").css("margin-bottom", "5px");
$(".form-group.input-group-block > .input-group-btn").removeClass("input-group-btn").addClass("btn-block text-center");
}
else {
$(".input-group-btn").css("display", "table-cell");
$(".form-group.input-group-block").removeClass("input-group-block").addClass( "input-group" );
$(".form-group.input-group > input").css("margin-bottom","");
$(".form-group.input-group > .btn-block.text-center").removeClass("btn-block text-center").addClass("input-group-btn");
}
});
$(document).ready(function() {
$(window).trigger("resize");
});

17
scripts/pi-hole/js/queryads.js
View File

@@ -122,3 +122,20 @@ $("#btnSearchExact").on("click", function() {
exact = "exact";
eventsource();
});
// Wrap form-group's buttons to next line when viewed on a small screen
$(window).on("resize",function() {
if ($(window).width() < 991) {
$(".form-group.input-group").removeClass("input-group").addClass("input-group-block");
$(".form-group.input-group-block > input").css("margin-bottom", "5px");
$(".form-group.input-group-block > .input-group-btn").removeClass("input-group-btn").addClass("btn-block text-center");
}
else {
$(".form-group.input-group-block").removeClass("input-group-block").addClass( "input-group" );
$(".form-group.input-group > input").css("margin-bottom","");
$(".form-group.input-group > .btn-block.text-center").removeClass("btn-block text-center").addClass("input-group-btn");
}
});
$(document).ready(function() {
$(window).trigger("resize");
});