From e33b2b42c09a11834e548c12ae9bb6f3c51006b5 Mon Sep 17 00:00:00 2001
From: "Alexander A. Klimov" <alexander.klimov@netways.de>
Date: Wed, 22 Nov 2017 10:37:50 +0100
Subject: [PATCH] Use the framework's "Show more" spoilers

---
 library/Graphite/Web/Widget/Graphs.php |  8 ++---
 public/css/module.less                 | 49 --------------------------
 2 files changed, 4 insertions(+), 53 deletions(-)

diff --git a/library/Graphite/Web/Widget/Graphs.php b/library/Graphite/Web/Widget/Graphs.php
index 1514aa8..68c066d 100644
--- a/library/Graphite/Web/Widget/Graphs.php
+++ b/library/Graphite/Web/Widget/Graphs.php
@@ -193,12 +193,12 @@ abstract class Graphs extends AbstractWidget
                         $result[] = $div;
                     } elseif ($limit && $renderedGraphs === $limit) {
                         $result[] = sprintf(
-                            '<input type="checkbox" id="toggle-%1$s" class="collapsible-toggle">'
+                            '<input type="checkbox" id="toggle-%1$s" class="expandable-toggle">'
                             . '<label for="toggle-%1$s" class="link-button">'
-                            . '<span class="collapsible-show">%2$s</span>'
-                            . '<span class="collapsible-hide">%3$s</span>'
+                            . '<span class="expandable-expand-label">%2$s</span>'
+                            . '<span class="expandable-collapse-label">%3$s</span>'
                             . '</label>'
-                            . '<div class="collapsible">',
+                            . '<div class="expandable-content">',
                             $view->protectId($this->getMonitoredObjectIdentifier()),
                             $view->translate('Show More'),
                             $view->translate('Show Less')
diff --git a/public/css/module.less b/public/css/module.less
index c661a89..f42f6f3 100644
--- a/public/css/module.less
+++ b/public/css/module.less
@@ -10,55 +10,6 @@ div.images {
 
 }
 
-.collapsible {
-  clear: right;  // Because the label is floating right
-
-  height: 0;
-  opacity: 0;
-  visibility: hidden;
-
-  -webkit-transition: opacity 0.2s linear, visibility 0.2s;
-  -moz-transition: opacity 0.2s linear, visibility 0.2s;
-  -o-transition: opacity 0.2s linear, visibility 0.2s;
-  transition: opacity 0.2s linear, visibility 0.2s;
-}
-
-input[type="checkbox"].collapsible-toggle {
-  display: none;
-
-  & + label {
-    float: right;
-    margin-right: 1em;
-
-    cursor: pointer;
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-  }
-
-  &:checked ~ .collapsible {
-    height: auto;
-    opacity: 1;
-    visibility: visible;
-
-    -webkit-transition: opacity 0.2s linear;
-    -moz-transition: opacity 0.2s linear;
-    -o-transition: opacity 0.2s linear;
-    transition: opacity 0.2s linear;
-  }
-  & ~ label span.collapsible-hide {
-    display: none;
-  }
-
-  &:checked ~ label span.collapsible-show {
-    display: none;
-  }
-  &:checked ~ label span.collapsible-hide {
-    display: inline;
-  }
-}
-
 div.images.monitored-object-detail-view {
   display: block;