diff options
| -rw-r--r-- | util/gh-pages/index.html | 40 | ||||
| -rw-r--r-- | util/gh-pages/script.js | 6 |
2 files changed, 37 insertions, 9 deletions
diff --git a/util/gh-pages/index.html b/util/gh-pages/index.html index 8de36fc4005..0c0f28e4fbd 100644 --- a/util/gh-pages/index.html +++ b/util/gh-pages/index.html @@ -57,20 +57,17 @@ Otherwise, have a great day =^.^= background-color: var(--theme-hover); } - div.panel div.panel-body button.dropdown-toggle { + div.panel div.panel-body button { background: var(--searchbar-bg); color: var(--searchbar-fg); border-color: var(--theme-popup-border); } - div.panel div.panel-body button.dropdown-toggle:hover { + div.panel div.panel-body button:hover { box-shadow: 0 0 3px var(--searchbar-shadow-color); } - div.panel div.panel-body .open button.dropdown-toggle { - background: var(--searchbar-bg); - color: var(--searchbar-fg); - border-color: var(--theme-popup-border); + div.panel div.panel-body button.open { filter: brightness(90%); } @@ -96,7 +93,6 @@ Otherwise, have a great day =^.^= @media (min-width: 992px) { .search-control { margin-top: 0; - float: right; } } @@ -361,6 +357,24 @@ Otherwise, have a great day =^.^= opacity: 30%; } + .expansion-group { + margin-top: 15px; + padding: 0px 8px; + display: flex; + flex-wrap: nowrap; + } + + @media (min-width: 992px) { + .expansion-group { + margin-top: 0; + padding: 0px 15px; + } + } + + .expansion-control { + width: 50%; + } + :not(pre) > code { color: var(--inline-code-color); background-color: var(--inline-code-bg); @@ -405,7 +419,7 @@ Otherwise, have a great day =^.^= <div class="panel panel-default" ng-show="data"> <div class="panel-body row"> - <div id="upper-filters" class="col-12 col-md-6"> + <div id="upper-filters" class="col-12 col-md-5"> <div class="btn-group" filter-dropdown> <button type="button" class="btn btn-default dropdown-toggle"> Lint levels <span class="badge">{{selectedValuesCount(levels)}}</span> <span class="caret"></span> @@ -524,7 +538,7 @@ Otherwise, have a great day =^.^= </ul> </div> </div> - <div class="col-12 col-md-6 search-control"> + <div class="col-12 col-md-5 search-control"> <div class="input-group"> <label class="input-group-addon" id="filter-label" for="search-input">Filter:</label> <input type="text" class="form-control filter-input" placeholder="Keywords or search string" id="search-input" @@ -537,6 +551,14 @@ Otherwise, have a great day =^.^= </span> </div> </div> + <div class="col-12 col-md-2 btn-group expansion-group"> + <button title="Collapse All" class="btn btn-default expansion-control" type="button" ng-click="toggleExpansion(data, false)"> + <span class="glyphicon glyphicon-collapse-up"></span> + </button> + <button title="Expand All" class="btn btn-default expansion-control" type="button" ng-click="toggleExpansion(data, true)"> + <span class="glyphicon glyphicon-collapse-down"></span> + </button> + </div> </div> </div> <!-- The order of the filters should be from most likely to remove a lint to least likely to improve performance. --> diff --git a/util/gh-pages/script.js b/util/gh-pages/script.js index 921bb0376f6..661f80a6d34 100644 --- a/util/gh-pages/script.js +++ b/util/gh-pages/script.js @@ -469,6 +469,12 @@ $location.path(lint.id); }; + $scope.toggleExpansion = function(lints, isExpanded) { + lints.forEach(lint => { + $scope.open[lint.id] = isExpanded; + }); + } + $scope.copyToClipboard = function (lint) { const clipboard = document.getElementById("clipboard-" + lint.id); if (clipboard) { |