From 0714b060388816b210ce025248b93b131eca46bd Mon Sep 17 00:00:00 2001
From: luccioman <luccioman@users.noreply.github.com>
Date: Tue, 13 Dec 2016 15:33:18 +0100
Subject: [PATCH] Fixed resource switch button overlapping at various screen
 sizes.

Fixes second part of mantis 708
(http://mantis.tokeek.de/view.php?id=708)

The bootstrap-switch component has some sizing issues with long labels,
which are not likely to be solved soon due to a lack of resources on
that project (see issue
https://github.com/nostalgiaz/bootstrap-switch/issues/419 )

This fix works by applying the following ideas :
 - labels are long, so font-size and padding are reduced on small screen
sizes using a media query
 - use relative percent width values on the component wrappers to
prevent overlapping on the neighbour content
 - disable animation because it relies on absolute pixels width values
---
 htroot/env/base.css           | 53 +++++++++++++++++++++++++++++++++++
 htroot/yacysearchtrailer.html |  2 ++
 2 files changed, 55 insertions(+)

diff --git a/htroot/env/base.css b/htroot/env/base.css
index c7a7a70f0..070f7d0f8 100644
--- a/htroot/env/base.css
+++ b/htroot/env/base.css
@@ -1054,3 +1054,56 @@ div#tagcloud {
   border: 1px dashed black;
   z-index: 100;
  }
+ 
+/******* yacysearchtrailer.html ********** 
+ Styling for the resource switch button, to avoid overlapping at various screen sizes */ 
+ 
+/* When screen size is too small, reduce font-size and padding as done in the bootstrap-switch-mini class */
+@media (max-width: 1449px) {
+#resource-switch-form .bootstrap-switch-handle-on,
+#resource-switch-form .bootstrap-switch-handle-off,
+#resource-switch-form .bootstrap-switch-label {
+  	padding: 1px 1px !important;
+  	font-size: 12px !important;
+  	line-height: 1.5 !important;
+  }
+}
+
+/* When screen size is large enough, us the same values as the bootstrap-switch-large class, 
+  except padding wich is reduced to handle the quite long text */
+@media (min-width: 1450px) {
+#resource-switch-form .bootstrap-switch-handle-on,
+#resource-switch-form .bootstrap-switch-handle-off,
+#resource-switch-form .bootstrap-switch-label {
+  padding: 6px 1px !important;
+  font-size: 18px !important;
+  line-height: 1.3333333 !important;
+  }
+}
+
+/* override bootstrap-switch wrapper to use 100% of the parent available size */
+#resource-switch-form,
+.bootstrap-switch-large {
+	width: 100% !important;
+}
+
+/* override bootstrap-switch-container to use 155% of the parent available size 
+  (only 100% is displayed, hiding the switched off part) */
+#resource-switch-form .bootstrap-switch-container {
+	width: 155% !important;
+}
+
+/* override bootstrap-switch-container to use a percent margin value 
+  (when resource switch is "Privacy" position) */
+#resource-switch-form div[class~="bootstrap-switch-container"][style*="margin-left: -"] {
+	margin-left: -52% !important;
+}
+
+/* override bootstrap-switch elements to use percent widths */
+#resource-switch-form .bootstrap-switch-handle-on,
+#resource-switch-form .bootstrap-switch-handle-off,
+#resource-switch-form .bootstrap-switch-label {
+	width: 33.333% !important;
+}
+
+/******* yacysearchtrailer.html end ***********/
\ No newline at end of file
diff --git a/htroot/yacysearchtrailer.html b/htroot/yacysearchtrailer.html
index 6fae522aa..44f8dd92b 100644
--- a/htroot/yacysearchtrailer.html
+++ b/htroot/yacysearchtrailer.html
@@ -19,6 +19,7 @@
   data-on-text="<span>&nbsp;&nbsp;&nbsp;Peer-to-Peer&nbsp;&nbsp;&nbsp;&nbsp;</span>"
   data-off-text="<span>&nbsp;&nbsp;&nbsp;&nbsp;Stealth&nbsp;Mode&nbsp;&nbsp;&nbsp;</span>"
   data-on-color="warning" data-off-color="success"
+  data-animate="false"
   type="checkbox" name="resource-switch" value="local" data-size="large"
   onchange="document.getElementById('resource').value='local';document.searchform.submit();">
 </form>
@@ -34,6 +35,7 @@
   data-on-text="<span>&nbsp;&nbsp;&nbsp;Peer-to-Peer&nbsp;&nbsp;&nbsp;&nbsp;</span>"
   data-off-text="<span>&nbsp;&nbsp;&nbsp;&nbsp;Stealth&nbsp;Mode&nbsp;&nbsp;&nbsp;</span>"
   data-on-color="warning" data-off-color="success"
+  data-animate="false"
   type="checkbox" name="resource-switch" value="global" data-size="large"
   onchange="document.getElementById('resource').value='global';document.searchform.submit();">
 </form>