redesign menus

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);
-  buildTagSelectionDiv(selectedTags, availableTags, tagSortBy);
-  buildFeatureSelectionDiv(selectedFeatures, availableFeatures, featureSortBy);
+  buildSortByDiv(sortedBy, dState.sortByRow);
+  buildTagSelectionDiv(selectedTags, availableTags, tagSortBy, dState);
+  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.maxWidth = "50%";
+  tagSelectionInputButton.style.width = "12rem";
+  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.maxWidth = "50%";
+  featureSelectionInputButton.style.width = "15rem";
+  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>";
-  themeTD.style.whiteSpace = "nowrap";
-  themeTD.style.overFlow = "hidden";
-  themeTD.style.width = "20%";
+    '<a href="' + theme.url + '" target="_blank">' + theme.cname + "</a>";
+  themeTD.style.minWidth = `${theme.cname.length / 6}rem`;
   resultsTableRow.appendChild(themeTD);
 
   let dateTD = document.createElement("td");
   dateTD.innerHTML = theme.date;
-  dateTD.style.textAlign = "center";
-  dateTD.style.minWidth = "8rem";
+  dateTD.style.minWidth = "5rem";
   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 () {
-  menuButton.classList.toggle("active");
-  var selectionMenu = document.getElementById("selection-menu");
-  if (selectionMenu.style.display === "block") {
-    selectionMenu.style.display = "none";
+let areAnyCloseAbleMenusOpen = () =>
+  closeableMenus.some(
+    (x) => document.getElementById(x).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";
+  };