mirror
/
geostat
kopia lustrzana https://gitlab.com/tomaszg/geostat
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

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

sql-rework
Tomasz Golinski 2020-03-09 13:20:49 +01:00
rodzic 542dcb013d
commit fb78f3a9b6
4 zmienionych plików z 20 dodań i 52 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
README.md
Wyświetl plik

@ -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.

5
common.cpp
Wyświetl plik

@ -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 << " <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 << "<details class=\"histogram_others\">\n<summary>See more</summary>\n<p>\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)

59
geo.css
Wyświetl plik

@ -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 {
display: none;
}
.lbl-toggle {
display: inline;
font-weight: bold;
font-family: 'Lato', serif;
color: #48B;
details > summary {
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 {
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;
details {
width: 700px;
margin-left: auto;
margin-right: auto;
}
.collapsible-content .content-inner {
background: rgba(240, 245, 255, 1);
padding: .5rem 1rem;
details > p {
background: #f0f8ff;
font-size: 12px;
padding: 10px;
margin: 0;
}
details.histogram_others > summary {
font-weight: bold;
color: #48B;
}

6
geostat.cpp
Wyświetl plik

@ -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 << " <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 << "<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 << " <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);