From 0601f2bb481758ed8e0e68f96a976063d9b229db Mon Sep 17 00:00:00 2001 From: Marc Abonce Seguin Date: Mon, 3 Aug 2020 00:15:54 -0700 Subject: add toggle to resize infobox --- .../themes/oscar/less/logicodev/infobox.less | 39 ++++++++++++++++++++ .../static/themes/oscar/less/pointhi/infobox.less | 42 +++++++++++++++++++++- 2 files changed, 80 insertions(+), 1 deletion(-) (limited to 'searx/static/themes/oscar/less') diff --git a/searx/static/themes/oscar/less/logicodev/infobox.less b/searx/static/themes/oscar/less/logicodev/infobox.less index 08a1d326e..e3582dffc 100644 --- a/searx/static/themes/oscar/less/logicodev/infobox.less +++ b/searx/static/themes/oscar/less/logicodev/infobox.less @@ -45,4 +45,43 @@ .infobox_part:last-child { margin-bottom: 0; } + + .infobox_toggle { + width: 100%; + text-align: center; + margin-bottom: 0px; + } + + // Shrink infobox size when toggle is off + .infobox_checkbox ~ .infobox_body { + max-height: 300px; + overflow: hidden; + } + .infobox_checkbox:checked ~ .infobox_body { + max-height: none; + } + + // Show toggle button as down when infobox is shrunk + .infobox_checkbox ~ .infobox_toggle .infobox_label_down { + display: block; + } + .infobox_checkbox ~ .infobox_toggle .infobox_label_up { + display: none; + } + + // Show toggle button as up when infobox is expanded + .infobox_checkbox:checked ~ .infobox_toggle .infobox_label_up { + display: block; + } + .infobox_checkbox:checked ~ .infobox_toggle .infobox_label_down { + display: none; + } + + // Hide main image when toggle is off + .infobox_checkbox ~ .infobox_body img.infobox_part { + display: none; + } + .infobox_checkbox:checked ~ .infobox_body img.infobox_part { + display: block; + } } diff --git a/searx/static/themes/oscar/less/pointhi/infobox.less b/searx/static/themes/oscar/less/pointhi/infobox.less index 226941706..e6a55e944 100644 --- a/searx/static/themes/oscar/less/pointhi/infobox.less +++ b/searx/static/themes/oscar/less/pointhi/infobox.less @@ -1,5 +1,6 @@ .infobox { - img{ + + img { max-height: 250px; } @@ -19,4 +20,43 @@ text-overflow: ellipsis; display: block; } + + .infobox_toggle { + width: 100%; + text-align: center; + margin-bottom: 0px; + } + + // Shrink infobox size when toggle is off + .infobox_checkbox ~ .infobox_body { + max-height: 300px; + overflow: hidden; + } + .infobox_checkbox:checked ~ .infobox_body { + max-height: none; + } + + // Show toggle button as down when infobox is shrunk + .infobox_checkbox ~ .infobox_toggle .infobox_label_down { + display: block; + } + .infobox_checkbox ~ .infobox_toggle .infobox_label_up { + display: none; + } + + // Show toggle button as up when infobox is expanded + .infobox_checkbox:checked ~ .infobox_toggle .infobox_label_up { + display: block; + } + .infobox_checkbox:checked ~ .infobox_toggle .infobox_label_down { + display: none; + } + + // Hide main image when toggle is off + .infobox_checkbox ~ .infobox_body img.infobox_part { + display: none; + } + .infobox_checkbox:checked ~ .infobox_body img.infobox_part { + display: block; + } } -- cgit v1.2.3-54-g00ecf