redesign menus

This commit is contained in:
Trent Palmer 2021-08-14 07:21:26 -07:00
parent 1cb1f0ec1f
commit df277e86ce
10 changed files with 192 additions and 72 deletions

View File

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

View File

@ -12,14 +12,21 @@
<h1 id="title"> <h1 id="title">
<a href="https://github.com/TrentSPalmer/hugo_themes_report" target="_blank">Hugo Themes Report</a> <a href="https://github.com/TrentSPalmer/hugo_themes_report" target="_blank">Hugo Themes Report</a>
</h1> </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 id="selection-menu">
</div> </div>
<div id="results"> <div id="results">
</div> </div>
<script> <script>
var themes = {{ themes }}; var themes = {{ themes }};
{% include 'js/selectionMenuCollapse.js' %}
{% include 'js/buildButton.js' %} {% include 'js/buildButton.js' %}
{% include 'js/buildTagAndFeatureSelectionInputs.js' %} {% include 'js/buildTagAndFeatureSelectionInputs.js' %}
{% include 'js/getAvailableTagsAndFeatures.js' %} {% include 'js/getAvailableTagsAndFeatures.js' %}
@ -27,6 +34,7 @@ var themes = {{ themes }};
{% include 'js/buildSelectionMenu.js' %} {% include 'js/buildSelectionMenu.js' %}
{% include 'js/buildThemeTableRow.js' %} {% include 'js/buildThemeTableRow.js' %}
{% include 'js/buildPage.js' %} {% include 'js/buildPage.js' %}
{% include 'js/selectionMenuCollapse.js' %}
</script> </script>
</body> </body>
</html> </html>

View File

@ -5,47 +5,39 @@ body {
margin: 0 auto 0 auto; margin: 0 auto 0 auto;
} }
#selection-menu {
display: none;
}
#title { #title {
text-align: center; 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; 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 { #resultsTable {
@ -74,5 +66,5 @@ body {
td, th { td, th {
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
text-align: center; text-align: left;
} }

View File

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

View File

@ -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() { function buildResults() {
let resultsDiv = document.getElementById("results"); let resultsDiv = document.getElementById("results");
resultsDiv.innerHTML = ""; resultsDiv.innerHTML = "";
@ -102,7 +119,13 @@ function buildResults() {
let sorted_themes = getSortedThemes(filtered_themes, sortedBy); let sorted_themes = getSortedThemes(filtered_themes, sortedBy);
sorted_themes.forEach((theme) => addThemeTableRow(theme)); sorted_themes.forEach((theme) => addThemeTableRow(theme));
buildSelectionMenu(sorted_themes, sortedBy, selectedTags, selectedFeatures); buildSelectionMenu(
sorted_themes,
sortedBy,
selectedTags,
selectedFeatures,
getDiplayState()
);
} }
buildResults(); buildResults();

View File

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

View File

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

View File

@ -1,7 +1,7 @@
function buildTagSelectionInput(tag, selected, tagSelectionRow) { function buildTagSelectionInput(tag, selected, tagSelectionRow) {
let tagSelectionInputButton = document.createElement("button"); 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.margin = ".5rem";
tagSelectionInputButton.style.display = "flex"; tagSelectionInputButton.style.display = "flex";
tagSelectionInputButton.style.alignItems = "center"; tagSelectionInputButton.style.alignItems = "center";
@ -34,8 +34,8 @@ function buildTagSelectionInput(tag, selected, tagSelectionRow) {
function buildFeatureSelectionInput(feature, selected, featureSelectionRow) { function buildFeatureSelectionInput(feature, selected, featureSelectionRow) {
let featureSelectionInputButton = document.createElement("button"); 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.margin = ".5rem";
featureSelectionInputButton.style.display = "flex"; featureSelectionInputButton.style.display = "flex";
featureSelectionInputButton.style.alignItems = "center"; featureSelectionInputButton.style.alignItems = "center";

View File

@ -4,16 +4,13 @@ function addThemeTableRow(theme) {
let themeTD = document.createElement("td"); let themeTD = document.createElement("td");
themeTD.innerHTML = 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); resultsTableRow.appendChild(themeTD);
let dateTD = document.createElement("td"); let dateTD = document.createElement("td");
dateTD.innerHTML = theme.date; dateTD.innerHTML = theme.date;
dateTD.style.textAlign = "center"; dateTD.style.minWidth = "5rem";
dateTD.style.minWidth = "8rem";
resultsTableRow.appendChild(dateTD); resultsTableRow.appendChild(dateTD);
let starsTD = document.createElement("td"); let starsTD = document.createElement("td");
@ -22,8 +19,35 @@ function addThemeTableRow(theme) {
let commitTD = document.createElement("td"); let commitTD = document.createElement("td");
commitTD.innerHTML = theme.commit; commitTD.innerHTML = theme.commit;
commitTD.style.minWidth = "7rem";
resultsTableRow.appendChild(commitTD); 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); resultsTable.appendChild(resultsTableRow);
} }

View File

@ -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 { } 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";
};