trent
/
hugo_themes_report
mirror of https://github.com/TrentSPalmer/hugo_themes_report.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
rank_hugo_themes.py
View File

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

12
templates/base.html
View File

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

58
templates/css/main.css
View File

@ -5,47 +5,39 @@ body {
margin: 0 auto 0 auto;
}
#selection-menu {
display: none;
}
#title {
text-align: center;
max-width: calc(100vw - 4rem);
}
.collapsible {
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;
#minus-button {
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
.collapsible:after {
content: '\02795';
font-size: .8rem;
color: white;
float: right;
margin-left: .4rem;
#selection-options-menu {
flex-wrap: wrap;
justify-content: space-around;
}
.active:after {
content: '\2796';
#selection-options-menu button{
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;
}

1
templates/js/buildButton.js
View File

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

25
templates/js/buildPage.js
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() {
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();

41
templates/js/buildSelectionMenu.js
View File

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

4
templates/js/buildSortByDiv.js
View File

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

8
templates/js/buildTagAndFeatureSelectionInputs.js
View File

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

38
templates/js/buildThemeTableRow.js
View File

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

76
templates/js/selectionMenuCollapse.js
View File

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