Remove fancy collapsible code and replace it by plain HTML5 details-summary tags

README.md

@@ -89,4 +89,4 @@ run `meson build; cd build; ninja`. You might need to set `CXX` variable to poin
 
 * Maps of Voivodeships of Poland come from https://commons.wikimedia.org/wiki/File:Podlaskie_Voivodeship_location_map.svg, https://commons.wikimedia.org/wiki/File:Pomeranian_Voivodeship_location_map.svg, https://pl.wikipedia.org/wiki/Plik:Kuyavian-Pomeranian_Voivodeship_location_map.svg, https://pl.wikipedia.org/wiki/Plik:Warmian-Masurian_Voivodeship_location_map.svg, https://pl.wikipedia.org/wiki/Plik:Masovian_Voivodeship_location_map.svg, https://pl.wikipedia.org/wiki/Plik:Lesser_Poland_Voivodeship_location_map.svg, https://pl.wikipedia.org/wiki/Plik:Greater_Poland_Voivodeship_location_map.svg, https://pl.wikipedia.org/wiki/Plik:Opole_Voivodeship_location_map.svg, https://pl.wikipedia.org/wiki/Plik:Lower_Silesian_Voivodeship_location_map.svg, https://pl.wikipedia.org/wiki/Plik:Silesian_Voivodeship_location_map.svg, https://pl.wikipedia.org/wiki/Plik:Lublin_Voivodeship_location_map.svg, https://pl.wikipedia.org/wiki/Plik:Subcarpathian_Voivodeship_location_map.svg, https://pl.wikipedia.org/wiki/Plik:West_Pomeranian_Voivodeship_location_map.svg, https://pl.wikipedia.org/wiki/Plik:%C5%9Awi%C4%99tokrzyskie_Voivodeship_location_map.svg, https://pl.wikipedia.org/wiki/Plik:Lubusz_Voivodeship_location_map.svg, https://pl.wikipedia.org/wiki/Plik:%C5%81%C3%B3d%C5%BA_Voivodeship_location_map.svg and are licensed under CC-BY-SA.
 
-* CSS tricks used to render histograms are based on https://css-tricks.com/making-charts-with-css and collapsibles are based on https://alligator.io/css/collapsible.
+* CSS tricks used to render histograms are based on https://css-tricks.com/making-charts-with-css.

common.cpp

@@ -66,8 +66,7 @@ void show_histogram(const Caches& cc, std::string Cache::*ptr, const std::string
 				std::cout << "<div class=\"bar\" style=\"--percent: " << 100 * own.second / max << "%;\"><span class=\"text\">" << own.first << ": " << own.second << "</span></div>\n";
 			else if (i == HIST_MAX) {
 				std::cout << "</div>\n";
-				std::cout << "<div class=\"histogram_others\">";
+				std::cout << "<details class=\"histogram_others\">\n<summary>See more</summary>\n<p>\n";
-				std::cout << "  <input id=\"histo_others\" class=\"toggle\" type=\"checkbox\">\n  <label for=\"histo_others\" class=\"lbl-toggle\">See more</label>\n  <div class=\"collapsible-content\">\n    <div class=\"content-inner\">\n";
 				std::cout << own.first << " (" << own.second << ")";
 			}
 			if (i > HIST_MAX)
@@ -77,7 +76,7 @@ void show_histogram(const Caches& cc, std::string Cache::*ptr, const std::string
 		if (i < HIST_MAX)
 			std::cout << "</div>\n";
 		else
-			std::cout << "   </div>\n  </div>\n</div>\n";
+			std::cout << "</p></details>\n";
 	} else {
 		std::cout << caption << '\n';
 		for (auto own : pairs)

geo.css

@@ -25,7 +25,7 @@ h2 {
 	color: #48B;
 }
 
-div.basic_stats, div.histogram_others {
+div.basic_stats {
 	text-align: center;
 	padding-bottom: 20px;
 }
@@ -162,58 +162,27 @@ td.dt_zero {
 
 /* collapsible */
 
-.toggle {
+details > summary {
-	display: none;
-}
-
-.lbl-toggle {
-	display: inline;
-	font-weight: bold;
-	font-family: 'Lato', serif;
-	color: #48B;
 	cursor: pointer;
-	border-radius: 7px;
-	transition: all 0.25s ease-out;
-	padding-left: 1em;
 	margin-left: auto;
 	margin-right: auto;
+	text-align: center;
 }
 
-.lbl-toggle:hover {
+details {
-	color: #A02020;
-}
-
-.lbl-toggle::before {
-	content: ' ';
-	display: inline-block;
-	border-top: 5px solid transparent;
-	border-bottom: 5px solid transparent;
-	border-left: 5px solid currentColor;
-	vertical-align: middle;
-	margin-right: .7rem;
-	transform: translateY(-2px);
-	transition: transform .2s ease-out;
-}
-
-.toggle:checked+.lbl-toggle::before {
-	transform: rotate(90deg) translateX(-3px);
-}
-
-.collapsible-content {
-	font-size: 12px;
-	max-height: 0px;
-	overflow: hidden;
-/* 	transition: max-height .25s ease-in-out; */
-}
-
-.toggle:checked+.lbl-toggle+.collapsible-content {
-	max-height: 10000em;
 	width: 700px;
 	margin-left: auto;
 	margin-right: auto;
 }
 
-.collapsible-content .content-inner {
+details > p {
-	background: rgba(240, 245, 255, 1);
+	background: #f0f8ff;
-	padding: .5rem 1rem;
+	font-size: 12px;
+	padding: 10px;
+	margin: 0;
+}
+
+details.histogram_others > summary {
+	font-weight: bold;
+	color: #48B;
 }

geostat.cpp

@@ -339,11 +339,11 @@ int main(int argc, char** argv) {
 		std::cout << "Number of caching days: <span class=\"value\">" << dates.size() << "</span><br>\n";
 		std::cout << "Average caches per caching day: <span class=\"value\">" << std::setprecision(3) << (1.0 * cc.size()) / dates.size() << "</span><br>\n";
 		std::cout << "Number of caches that are now archived: <span class=\"value\">" << std::count_if(cc.begin(), cc.end(), [&](auto& a) { return a.status == archived; }) << "</span><br>\n";
-		std::cout << "Best caching day: <span class=\"value\">" << best_day->first << "</span>, found <span class=\"value\">" << best_day->second << "</span> caches\n";
+		std::cout << "<details class=\"days\"><summary>Best caching day: <span class=\"value\">" << best_day->first << "</span>, found <span class=\"value\">" << best_day->second << "</span> caches</summary>\n";
-		std::cout << "  <input id=\"caching-days\" class=\"toggle\" type=\"checkbox\">\n  <label for=\"caching-days\" class=\"lbl-toggle\">Details</label>\n  <div class=\"collapsible-content\">\n    <div class=\"content-inner\">\n";
+		std::cout << "  <p>\n";
 		for (auto& i : dates)
 			std::cout << i.first << ", found " << i.second << " caches<br>\n";
-		std::cout << "   </div>\n  </div>\n";
+		std::cout << "  </p>\n</details>\n";
 
 		std::tm streak;
 		int longest_str = find_streak(sorted_caches, streak);