redesign menus

rank_hugo_themes.py

@@ -427,7 +427,6 @@ def parse_themes_toml_for_each_hugo_themes():
             else:
                 if theme.desc is not None: theme.desc = None
             if 'name' in theme_toml:
-                print(len(theme_toml['name']), theme_toml['name'])
                 if theme.cname != theme_toml['name']:
                     theme.cname = theme_toml['name']
             else:

templates/base.html

@@ -12,14 +12,21 @@
     <h1 id="title">
       <a href="https://github.com/TrentSPalmer/hugo_themes_report" target="_blank">Hugo Themes Report</a>
     </h1>
-    <button type="button" id="selection-button" class="collapsible">Select Tags/Features</button>
+    <button type="button" id="plus-button">&plus;</button>
+    <button type="button" id="minus-button">&minus;</button>
+    <div id="selection-options-menu" style="display: none">
+      <button type="button" id="button-for-showing-sort-option">SortBy</button>
+      <button type="button" id="button-for-showing-columns">Show Columns</button>
+      <button type="button" id="button-for-filter-by-tags">Filter By Tags</button>
+      <button type="button" id="button-for-filter-by-features">Filter By Features</button>
+      <button type="button" id="button-for-filter-by-tags-and-features">Filter By Tags &amp; Features</button>
+    </div>
     <div id="selection-menu">
     </div>
     <div id="results">
     </div>
     <script>
 var themes = {{ themes }};
-{% include 'js/selectionMenuCollapse.js' %}
 {% include 'js/buildButton.js' %}
 {% include 'js/buildTagAndFeatureSelectionInputs.js' %}
 {% include 'js/getAvailableTagsAndFeatures.js' %}
@@ -27,6 +34,7 @@ var themes = {{ themes }};
 {% include 'js/buildSelectionMenu.js' %}
 {% include 'js/buildThemeTableRow.js' %}
 {% include 'js/buildPage.js' %}
+{% include 'js/selectionMenuCollapse.js' %}
     </script>
   </body>
 </html>

templates/css/main.css

@@ -5,47 +5,39 @@ body {
   margin: 0 auto 0 auto;
 }
 
-#selection-menu {
-  display: none;
-}
-
 #title {
   text-align: center;
+  max-width: calc(100vw - 4rem);
 }
 
-.collapsible {
+#minus-button {
-  background-color: #eee;
-  color: #444;
-  cursor: pointer;
-  padding: 1.1rem;
-  width: 100%;
-  border: none;
-  text-align: left;
-  outline: none;
-  font-size: 1.1rem;
-}
-
-.active, .collapsible:hover {
-  background-color: #ccc;
-}
-
-.content {
-  padding: 0 1.1rem;
   display: none;
-  overflow: hidden;
-  background-color: #f1f1f1;
 }
 
-.collapsible:after {
+#selection-options-menu {
-  content: '\02795';
+  flex-wrap: wrap;
-  font-size: .8rem;
+  justify-content: space-around;
-  color: white;
-  float: right;
-  margin-left: .4rem;
 }
 
-.active:after {
+#selection-options-menu button{
-  content: '\2796';
+  height: 2rem;
+  margin-bottom: 1rem;
+  margin-left: .5rem;
+  margin-right: .5rem;
+}
+
+#plus-button, #minus-button {
+  height: 3rem;
+  width: 3rem;
+  background-color: #ccc;
+  color: #444;
+  font-size: 2rem;
+  font-weight: bolder;
+  border: none;
+  border-radius: .2rem;
+  position: fixed;
+  top: 1rem;
+  right: calc(max(0px, calc(calc(100vw - 1200px) / 2)) + .5rem);
 }
 
 #resultsTable {
@@ -74,5 +66,5 @@ body {
 td, th {
   padding-left: 1rem;
   padding-right: 1rem;
-  text-align: center;
+  text-align: left;
 }

templates/js/buildButton.js

@@ -11,6 +11,7 @@ function buildRadioButton(
   result.style.display = "flex";
   result.style.alignItems = "center";
   result.style.height = "2rem";
+  result.style.margin = ".5rem";
 
   let inputAttsA = `id=${inputID} type="radio" name=${inputName} value=${inputValue}`;
   let inputAttsB = `onclick="buildResults()" style="margin:0 1rem 0 0"`;

templates/js/buildPage.js

@@ -67,6 +67,23 @@ function getFilteredThemes(selectedTags, selectedFeatures) {
   }
 }
 
+function getDState(x) {
+  let e = document.getElementById(x);
+  return e !== null ? e.style.display : "none";
+}
+
+function getDiplayState() {
+  let dState = {};
+  [
+    "sortByRow",
+    "tagSelectionHeadingRow",
+    "tagSelectionRow",
+    "featureSelectionHeadingRow",
+    "featureSelectionRow",
+  ].forEach((x) => (dState[x] = getDState(x)));
+  return dState;
+}
+
 function buildResults() {
   let resultsDiv = document.getElementById("results");
   resultsDiv.innerHTML = "";
@@ -102,7 +119,13 @@ function buildResults() {
   let sorted_themes = getSortedThemes(filtered_themes, sortedBy);
   sorted_themes.forEach((theme) => addThemeTableRow(theme));
 
-  buildSelectionMenu(sorted_themes, sortedBy, selectedTags, selectedFeatures);
+  buildSelectionMenu(
+    sorted_themes,
+    sortedBy,
+    selectedTags,
+    selectedFeatures,
+    getDiplayState()
+  );
 }
 
 buildResults();

templates/js/buildSelectionMenu.js

@@ -1,8 +1,8 @@
-function buildTagSelectionHeadingRow(selectionMenuDiv, tagSortBy) {
+function buildTagSelectionHeadingRow(selectionMenuDiv, tagSortBy, dState) {
   let tagSelectionHeadingRow = document.createElement("div");
   tagSelectionHeadingRow.id = "tagSelectionHeadingRow";
   tagSelectionHeadingRow.style.maxWidth = "100%";
-  tagSelectionHeadingRow.style.display = "flex";
+  tagSelectionHeadingRow.style.display = dState.tagSelectionHeadingRow;
   tagSelectionHeadingRow.style.justifyContent = "space-around";
   tagSelectionHeadingRow.style.alignItems = "center";
 
@@ -49,11 +49,15 @@ function buildTagSelectionHeadingRow(selectionMenuDiv, tagSortBy) {
   };
 }
 
-function buildFeatureSelectionHeadingRow(selectionMenuDiv, featureSortBy) {
+function buildFeatureSelectionHeadingRow(
+  selectionMenuDiv,
+  featureSortBy,
+  dState
+) {
   let featureSelectionHeadingRow = document.createElement("div");
   featureSelectionHeadingRow.id = "featureSelectionHeadingRow";
   featureSelectionHeadingRow.style.maxWidth = "100%";
-  featureSelectionHeadingRow.style.display = "flex";
+  featureSelectionHeadingRow.style.display = dState.featureSelectionHeadingRow;
   featureSelectionHeadingRow.style.justifyContent = "space-around";
   featureSelectionHeadingRow.style.alignItems = "center";
 
@@ -102,12 +106,13 @@ function buildFeatureSelectionHeadingRow(selectionMenuDiv, featureSortBy) {
   };
 }
 
-function buildTagSelectionDiv(selectedTags, availableTags, tagSortBy) {
+function buildTagSelectionDiv(selectedTags, availableTags, tagSortBy, dState) {
   let selectionMenuDiv = document.getElementById("selection-menu");
-  buildTagSelectionHeadingRow(selectionMenuDiv, tagSortBy);
+  buildTagSelectionHeadingRow(selectionMenuDiv, tagSortBy, dState);
 
   let tagSelectionRow = document.createElement("div");
-  tagSelectionRow.style.display = "flex";
+  tagSelectionRow.id = "tagSelectionRow";
+  tagSelectionRow.style.display = dState.tagSelectionRow;
   tagSelectionRow.style.flexWrap = "wrap";
   tagSelectionRow.style.justifyContent = "space-around";
 
@@ -129,13 +134,15 @@ function buildTagSelectionDiv(selectedTags, availableTags, tagSortBy) {
 function buildFeatureSelectionDiv(
   selectedFeatures,
   availableFeatures,
-  featureSortBy
+  featureSortBy,
+  dState
 ) {
   let selectionMenuDiv = document.getElementById("selection-menu");
-  buildFeatureSelectionHeadingRow(selectionMenuDiv, featureSortBy);
+  buildFeatureSelectionHeadingRow(selectionMenuDiv, featureSortBy, dState);
 
   let featureSelectionRow = document.createElement("div");
-  featureSelectionRow.style.display = "flex";
+  featureSelectionRow.id = "featureSelectionRow";
+  featureSelectionRow.style.display = dState.featureSelectionRow;
   featureSelectionRow.style.flexWrap = "wrap";
   featureSelectionRow.style.justifyContent = "space-around";
 
@@ -158,13 +165,19 @@ function buildSelectionMenu(
   sorted_themes,
   sortedBy,
   selectedTags,
-  selectedFeatures
+  selectedFeatures,
+  dState
 ) {
   let tagSortBy = getTagSortBy();
   let featureSortBy = getFeatureSortBy();
   let availableTags = getAvailableTags(sorted_themes, tagSortBy);
   let availableFeatures = getAvailableFeatures(sorted_themes, featureSortBy);
-  buildSortByDiv(sortedBy);
+  buildSortByDiv(sortedBy, dState.sortByRow);
-  buildTagSelectionDiv(selectedTags, availableTags, tagSortBy);
+  buildTagSelectionDiv(selectedTags, availableTags, tagSortBy, dState);
-  buildFeatureSelectionDiv(selectedFeatures, availableFeatures, featureSortBy);
+  buildFeatureSelectionDiv(
+    selectedFeatures,
+    availableFeatures,
+    featureSortBy,
+    dState
+  );
 }

templates/js/buildSortByDiv.js

@@ -1,4 +1,4 @@
-function buildSortByDiv(sortedBy) {
+function buildSortByDiv(sortedBy, sortByRowDisplay) {
   let menuDiv = document.getElementById("selection-menu");
   menuDiv.innerHTML = "";
   menuDiv.style.maxWidth = "100%";
@@ -7,7 +7,7 @@ function buildSortByDiv(sortedBy) {
   sortByRow.id = "sortByRow";
   sortByRow.style.width = "500px";
   sortByRow.style.maxWidth = "100%";
-  sortByRow.style.display = "flex";
+  sortByRow.style.display = sortByRowDisplay;
   sortByRow.style.justifyContent = "space-around";
   sortByRow.style.margin = "1rem auto 1rem auto";
 

templates/js/buildTagAndFeatureSelectionInputs.js

@@ -1,7 +1,7 @@
 function buildTagSelectionInput(tag, selected, tagSelectionRow) {
   let tagSelectionInputButton = document.createElement("button");
-  tagSelectionInputButton.style.width = "15rem";
+  tagSelectionInputButton.style.width = "12rem";
-  tagSelectionInputButton.style.maxWidth = "50%";
+  tagSelectionInputButton.style.maxWidth = "calc(50% - 2rem)";
   tagSelectionInputButton.style.margin = ".5rem";
   tagSelectionInputButton.style.display = "flex";
   tagSelectionInputButton.style.alignItems = "center";
@@ -34,8 +34,8 @@ function buildTagSelectionInput(tag, selected, tagSelectionRow) {
 
 function buildFeatureSelectionInput(feature, selected, featureSelectionRow) {
   let featureSelectionInputButton = document.createElement("button");
-  featureSelectionInputButton.style.width = "30rem";
+  featureSelectionInputButton.style.width = "15rem";
-  featureSelectionInputButton.style.maxWidth = "50%";
+  featureSelectionInputButton.style.maxWidth = "calc(50% - 2rem)";
   featureSelectionInputButton.style.margin = ".5rem";
   featureSelectionInputButton.style.display = "flex";
   featureSelectionInputButton.style.alignItems = "center";

templates/js/buildThemeTableRow.js

@@ -4,16 +4,13 @@ function addThemeTableRow(theme) {
 
   let themeTD = document.createElement("td");
   themeTD.innerHTML =
-    '<a href="' + theme.url + '" target="_blank">' + theme.short_name + "</a>";
+    '<a href="' + theme.url + '" target="_blank">' + theme.cname + "</a>";
-  themeTD.style.whiteSpace = "nowrap";
+  themeTD.style.minWidth = `${theme.cname.length / 6}rem`;
-  themeTD.style.overFlow = "hidden";
-  themeTD.style.width = "20%";
   resultsTableRow.appendChild(themeTD);
 
   let dateTD = document.createElement("td");
   dateTD.innerHTML = theme.date;
-  dateTD.style.textAlign = "center";
+  dateTD.style.minWidth = "5rem";
-  dateTD.style.minWidth = "8rem";
   resultsTableRow.appendChild(dateTD);
 
   let starsTD = document.createElement("td");
@@ -22,8 +19,35 @@ function addThemeTableRow(theme) {
 
   let commitTD = document.createElement("td");
   commitTD.innerHTML = theme.commit;
-  commitTD.style.minWidth = "7rem";
   resultsTableRow.appendChild(commitTD);
 
+  let minVerTD = document.createElement("td");
+  minVerTD.innerHTML = theme.min_ver;
+  resultsTableRow.appendChild(minVerTD);
+
+  let licenseTD = document.createElement("td");
+  licenseTD.innerHTML = theme.license;
+  licenseTD.style.minWidth = `${theme.license.length / 7}rem`;
+  resultsTableRow.appendChild(licenseTD);
+
+  let descTD = document.createElement("td");
+  descTD.innerHTML = theme.desc;
+  descTD.style.minWidth = `${theme.desc.length / 7}rem`;
+  resultsTableRow.appendChild(descTD);
+
+  let tagsTD = document.createElement("td");
+  let tL = theme.tags.length - 1;
+  tL += theme.tags.map((x) => x.length).reduce((a, b) => a + b, 0);
+  tagsTD.innerHTML = theme.tags;
+  tagsTD.style.minWidth = `${tL / 7}rem`;
+  resultsTableRow.appendChild(tagsTD);
+
+  let featuresTD = document.createElement("td");
+  let fL = theme.features.length - 1;
+  fL += theme.features.map((x) => x.length).reduce((a, b) => a + b, 0);
+  featuresTD.innerHTML = theme.features;
+  featuresTD.style.minWidth = `${fL / 7}rem`;
+  resultsTableRow.appendChild(featuresTD);
+
   resultsTable.appendChild(resultsTableRow);
 }

templates/js/selectionMenuCollapse.js

@@ -1,11 +1,71 @@
-var menuButton = document.getElementById("selection-button");
+let closeableMenus = [
+  "sortByRow",
+  "tagSelectionHeadingRow",
+  "tagSelectionRow",
+  "featureSelectionHeadingRow",
+  "featureSelectionRow",
+];
 
-menuButton.addEventListener("click", function () {
+let areAnyCloseAbleMenusOpen = () =>
-  menuButton.classList.toggle("active");
+  closeableMenus.some(
-  var selectionMenu = document.getElementById("selection-menu");
+    (x) => document.getElementById(x).style.display !== "none"
-  if (selectionMenu.style.display === "block") {
+  );
-    selectionMenu.style.display = "none";
+
+function closeMenus() {
+  closeableMenus.forEach(
+    (x) => (document.getElementById(x).style.display = "none")
+  );
+}
+
+function closeOptionMenu() {
+  document.getElementById("selection-options-menu").style.display = "none";
+}
+
+document.getElementById("plus-button").onclick = function () {
+  this.style.display = "none";
+  document.getElementById("minus-button").style.display = "inline-block";
+  document.getElementById("selection-options-menu").style.display = "flex";
+  closeMenus();
+  window.scrollTo(0, 0);
+};
+
+document.getElementById("minus-button").onclick = function () {
+  if (areAnyCloseAbleMenusOpen()) {
+    closeMenus();
   } else {
-    selectionMenu.style.display = "block";
+    document.getElementById("selection-options-menu").style.display = "none";
+    this.style.display = "none";
+    document.getElementById("plus-button").style.display = "inline-block";
   }
-});
+  window.scrollTo(0, 0);
+};
+
+document.getElementById("button-for-showing-sort-option").onclick =
+  function () {
+    closeMenus();
+    document.getElementById("sortByRow").style.display = "flex";
+  };
+
+document.getElementById("button-for-showing-columns").onclick = function () {};
+
+document.getElementById("button-for-filter-by-tags").onclick = function () {
+  closeMenus();
+  document.getElementById("tagSelectionHeadingRow").style.display = "flex";
+  document.getElementById("tagSelectionRow").style.display = "flex";
+};
+
+document.getElementById("button-for-filter-by-features").onclick = function () {
+  closeMenus();
+  document.getElementById("featureSelectionHeadingRow").style.display = "flex";
+  document.getElementById("featureSelectionRow").style.display = "flex";
+};
+
+document.getElementById("button-for-filter-by-tags-and-features").onclick =
+  function () {
+    closeMenus();
+    document.getElementById("tagSelectionHeadingRow").style.display = "flex";
+    document.getElementById("tagSelectionRow").style.display = "flex";
+    document.getElementById("featureSelectionHeadingRow").style.display =
+      "flex";
+    document.getElementById("featureSelectionRow").style.display = "flex";
+  };