From de19c30e2cf928d3443be7c197acc5d0f333768c Mon Sep 17 00:00:00 2001 From: Yinan Zhou Date: Tue, 16 Jul 2024 12:26:05 -0400 Subject: [PATCH 1/2] style: add formatter for front end code - Set up djlint for html, prettier for js and css - Reformat front end code Refs: #113 --- .djlintrc | 16 + .editorconfig | 19 ++ prettierrc.yml | 12 + .../static/instruments/css/index.css | 115 ++++--- .../static/instruments/css/pagination.css | 82 ++--- .../static/instruments/js/DisplaySettings.js | 68 ++-- .../static/instruments/js/PaginationTools.js | 154 ++++----- .../instruments/includes/listView.html | 52 ++- .../instruments/includes/masonryView.html | 36 +-- .../includes/paginationOptions.html | 40 +-- .../instruments/includes/stdView.html | 41 +-- .../templates/instruments/index.html | 296 +++++++++--------- .../VIM/apps/main/static/main/css/about.css | 14 +- .../VIM/apps/main/static/main/css/index.css | 41 ++- .../VIM/apps/main/static/main/css/login.css | 116 +++---- .../VIM/apps/main/templates/main/about.html | 132 ++++---- .../VIM/apps/main/templates/main/index.html | 94 +++--- .../registration/change_password.html | 71 +++-- .../main/templates/registration/login.html | 92 +++--- .../main/templates/registration/register.html | 71 +++-- .../registration/reset_password.html | 69 ++-- .../registration/reset_password_complete.html | 25 +- .../registration/reset_password_confirm.html | 38 ++- .../registration/reset_password_email.html | 4 +- .../registration/reset_password_sent.html | 29 +- web-app/django/VIM/static/css/app.css | 87 ++--- .../django/VIM/static/js/GoogleTranslate.js | 14 +- web-app/django/VIM/templates/404.html | 21 +- web-app/django/VIM/templates/base.html | 173 +++++----- 29 files changed, 1064 insertions(+), 958 deletions(-) create mode 100644 .djlintrc create mode 100644 .editorconfig create mode 100644 prettierrc.yml diff --git a/.djlintrc b/.djlintrc new file mode 100644 index 0000000..f6ac0dc --- /dev/null +++ b/.djlintrc @@ -0,0 +1,16 @@ +{ + "exclude": ["migrations/*"], + "extension": ["html", "css", "js"], + "indent": 2, + "blank_line_after_tag": "load,extends,include,endblock", + "ignore": "H006,H016,H021,H025,H030,H031", + "close_void_tags": true, + "format_css": true, + "css": { + "indent_size": 2 + }, + "format_js": true, + "js": { + "indent_size": 2 + } +} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..187d4cc --- /dev/null +++ b/.editorconfig @@ -0,0 +1,19 @@ +# editorconfig.org +root = true + +[*] +charset = utf-8 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true +indent_style = space +indent_size = 2 + +# TypeScript and JavaScript files +[*.{ts,tsx,js,jsx}] +indent_size = 2 +quote_type = single + +[*.css] +indent_size = 2 +quote_type = single diff --git a/prettierrc.yml b/prettierrc.yml new file mode 100644 index 0000000..2206ae1 --- /dev/null +++ b/prettierrc.yml @@ -0,0 +1,12 @@ +# .prettierrc or .prettierrc.yaml +trailingComma: "es5" +tabWidth: 2 +semi: true +singleQuote: true +overrides: + - files: "*.css" + options: + singleQuote: true + - files: "*.js" + options: + trailingComma: "es5" diff --git a/web-app/django/VIM/apps/instruments/static/instruments/css/index.css b/web-app/django/VIM/apps/instruments/static/instruments/css/index.css index 954acba..95c42cd 100644 --- a/web-app/django/VIM/apps/instruments/static/instruments/css/index.css +++ b/web-app/django/VIM/apps/instruments/static/instruments/css/index.css @@ -1,138 +1,137 @@ - -@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"); +@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css'); h4 { - color: #435334; - font-size: 20px; - font-weight: 700; - margin-bottom: 0; + color: #435334; + font-size: 20px; + font-weight: 700; + margin-bottom: 0; } h5 { - color: #435334; + color: #435334; } hr { - color: #435334 !important; - margin-top: 0; + color: #435334 !important; + margin-top: 0; } /* sidebar */ .sidebar-container { - background-color: white; - border: 3px solid #9EB384; - border-radius: 30px; - height: auto !important; + background-color: white; + border: 3px solid #9eb384; + border-radius: 30px; + height: auto !important; } .info-block { - background-color: #FAF1E4; - border: 1.5px solid #CEDEBD; - border-radius: 10px; - height: auto !important; + background-color: #faf1e4; + border: 1.5px solid #cedebd; + border-radius: 10px; + height: auto !important; } .list-group-item { - border: none !important; - background-color: transparent !important; - color: #435334; + border: none !important; + background-color: transparent !important; + color: #435334; } .list-group-item:hover { - color: #9EB384; + color: #9eb384; } .selected { - color: #435334; - font-weight: bold; + color: #435334; + font-weight: bold; } -.toggle-more{ - color: #0b0f07; +.toggle-more { + color: #0b0f07; } .toggle-more:hover { - cursor: pointer; - color: #9EB384; + cursor: pointer; + color: #9eb384; } /* body */ .body-container { - background-color: white; - border: 3px solid #9EB384; - border-radius: 30px; + background-color: white; + border: 3px solid #9eb384; + border-radius: 30px; } .display-btn { - font-weight: bold; - color: #9EB384; - width: 30px; - border: none; + font-weight: bold; + color: #9eb384; + width: 30px; + border: none; } .masonry-btn { - font-size: 20px; + font-size: 20px; } .std-btn { - font-size: 23px; + font-size: 23px; } .highlighted-btn { - color: #435334; + color: #435334; } .card { - background-color: #FAF1E4; + background-color: #faf1e4; } .card-title { - color: #435334; + color: #435334; } .pagination-container { - color: #435334; + color: #435334; } .page-link { - color: #435334; + color: #435334; } .page-link:hover { - color: #9EB384; + color: #9eb384; } /* list view */ .list-item-container { - min-height: 200px; - max-height: 300px; - overflow: hidden; + min-height: 200px; + max-height: 300px; + overflow: hidden; } .card-title h5:hover { - color: #9EB384; + color: #9eb384; } .more-info { - color: #435334; + color: #435334; } .more-info:hover { - border: 1px solid #435334; + border: 1px solid #435334; } /* standard view */ .square-box { - position: relative; - padding-top: 100%; - overflow: hidden; + position: relative; + padding-top: 100%; + overflow: hidden; } .square-box img { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; -} \ No newline at end of file + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; +} diff --git a/web-app/django/VIM/apps/instruments/static/instruments/css/pagination.css b/web-app/django/VIM/apps/instruments/static/instruments/css/pagination.css index bbe426a..9706d91 100644 --- a/web-app/django/VIM/apps/instruments/static/instruments/css/pagination.css +++ b/web-app/django/VIM/apps/instruments/static/instruments/css/pagination.css @@ -1,41 +1,41 @@ -input[type="number"] { - border: 1px solid #9EB384; - border-radius: 4px; - padding: 5px; - width: 50px; - color: #435334; - margin: 0 0.3rem; -} - -input[type="number"]:hover { - border: 1px solid #435334; - color: #435334; -} - -input[type="number"]:focus { - border: 1px solid #435334; - box-shadow: 0 0 5px #9EB384; - outline: none; -} - -.btn-check:checked + .btn { - color: #435334; - border: none; - padding: 0.1rem 0.2rem; -} - -.btn-check:not(:checked) + .btn { - color: #9EB384; - border: none; - padding: 0.1rem 0.2rem; -} - -.view-per-page -.text-start, .text-end { - color: #435334; - margin: 0 0.3rem; -} - -.col-form-label { - color: #435334; -} \ No newline at end of file +input[type='number'] { + border: 1px solid #9eb384; + border-radius: 4px; + padding: 5px; + width: 50px; + color: #435334; + margin: 0 0.3rem; +} + +input[type='number']:hover { + border: 1px solid #435334; + color: #435334; +} + +input[type='number']:focus { + border: 1px solid #435334; + box-shadow: 0 0 5px #9eb384; + outline: none; +} + +.btn-check:checked + .btn { + color: #435334; + border: none; + padding: 0.1rem 0.2rem; +} + +.btn-check:not(:checked) + .btn { + color: #9eb384; + border: none; + padding: 0.1rem 0.2rem; +} + +.view-per-page .text-start, +.text-end { + color: #435334; + margin: 0 0.3rem; +} + +.col-form-label { + color: #435334; +} diff --git a/web-app/django/VIM/apps/instruments/static/instruments/js/DisplaySettings.js b/web-app/django/VIM/apps/instruments/static/instruments/js/DisplaySettings.js index 36bb26c..0e68e00 100644 --- a/web-app/django/VIM/apps/instruments/static/instruments/js/DisplaySettings.js +++ b/web-app/django/VIM/apps/instruments/static/instruments/js/DisplaySettings.js @@ -1,34 +1,34 @@ -const masonryBtn = document.getElementById("masonry-btn"); -const stdBtn = document.getElementById("std-btn"); +const masonryBtn = document.getElementById('masonry-btn'); +const stdBtn = document.getElementById('std-btn'); -const masonryView = document.getElementById("masonry-view"); -const stdView = document.getElementById("std-view"); +const masonryView = document.getElementById('masonry-view'); +const stdView = document.getElementById('std-view'); updateDisplayMode(); function setDisplayMode(displayMode) { - localStorage.setItem("displayMode", displayMode); + localStorage.setItem('displayMode', displayMode); } function getDisplayMode() { - return localStorage.getItem("displayMode"); + return localStorage.getItem('displayMode'); } function updateDisplayMode() { - const currentDisplayMode = getDisplayMode() || "masonry"; + const currentDisplayMode = getDisplayMode() || 'masonry'; switch (currentDisplayMode) { - case "masonry": + case 'masonry': setMasonryView(); - masonryView.style.display = ""; - stdView.style.display = "none"; - masonryBtn.classList.toggle("highlighted-btn"); - stdBtn.classList.remove("highlighted-btn"); + masonryView.style.display = ''; + stdView.style.display = 'none'; + masonryBtn.classList.toggle('highlighted-btn'); + stdBtn.classList.remove('highlighted-btn'); break; - case "standard": - masonryView.style.display = "none"; - stdView.style.display = ""; - stdBtn.classList.toggle("highlighted-btn"); - masonryBtn.classList.remove("highlighted-btn"); + case 'standard': + masonryView.style.display = 'none'; + stdView.style.display = ''; + stdBtn.classList.toggle('highlighted-btn'); + masonryBtn.classList.remove('highlighted-btn'); break; default: break; @@ -36,23 +36,23 @@ function updateDisplayMode() { } // Switch to the next mode -masonryBtn.addEventListener("click", () => { - if (getDisplayMode() !== "masonry") { - setDisplayMode("masonry"); +masonryBtn.addEventListener('click', () => { + if (getDisplayMode() !== 'masonry') { + setDisplayMode('masonry'); updateDisplayMode(); } }); -stdBtn.addEventListener("click", () => { - if (getDisplayMode() !== "standard") { - setDisplayMode("standard"); +stdBtn.addEventListener('click', () => { + if (getDisplayMode() !== 'standard') { + setDisplayMode('standard'); updateDisplayMode(); } }); function setMasonryView() { // Initialize Masonry - var masonryGrid = document.getElementById("masonry-view"); + var masonryGrid = document.getElementById('masonry-view'); var masonry = new Masonry(masonryGrid, { percentPosition: true, }); @@ -61,34 +61,34 @@ function setMasonryView() { var imgLoad = imagesLoaded(masonryGrid); // When all images are loaded, relayout Masonry - imgLoad.on("always", function () { + imgLoad.on('always', function () { masonry.layout(); }); } // HBS facet settings -const items = document.querySelectorAll(".list-group-item"); +const items = document.querySelectorAll('.list-group-item'); updateHbsFacet(); function updateHbsFacet() { const url = new URL(window.location.href); - const selectedHbsFacet = url.searchParams.get("hbs_facet") || ""; - localStorage.setItem("selectedHbsFacet", selectedHbsFacet); + const selectedHbsFacet = url.searchParams.get('hbs_facet') || ''; + localStorage.setItem('selectedHbsFacet', selectedHbsFacet); items.forEach((item) => { - current_item = item.getAttribute("current-value"); + current_item = item.getAttribute('current-value'); if (current_item === selectedHbsFacet) { - item.classList.add("selected"); + item.classList.add('selected'); } else { - item.classList.remove("selected"); + item.classList.remove('selected'); } }); } items.forEach((item) => { - item.addEventListener("click", function () { - current_item = item.getAttribute("current-value"); - localStorage.setItem("selectedHbsFacet", current_item); + item.addEventListener('click', function () { + current_item = item.getAttribute('current-value'); + localStorage.setItem('selectedHbsFacet', current_item); updateHbsFacet(); }); }); diff --git a/web-app/django/VIM/apps/instruments/static/instruments/js/PaginationTools.js b/web-app/django/VIM/apps/instruments/static/instruments/js/PaginationTools.js index d31ed15..a47d8b3 100644 --- a/web-app/django/VIM/apps/instruments/static/instruments/js/PaginationTools.js +++ b/web-app/django/VIM/apps/instruments/static/instruments/js/PaginationTools.js @@ -1,77 +1,77 @@ -const instrumentNumElement = document.getElementById('instrumentNum'); -const instrumentNum = instrumentNumElement.getAttribute('data-instrument-num'); -const pageNumInput = document.getElementById("page-num"); -const pageBtns = document.querySelectorAll(".page-link"); -const optionRadios = document.querySelectorAll(".option-radio"); - -updatePaginationSetting(); - -function updatePaginationSetting() { - const url = new URL(window.location.href); - const page = url.searchParams.get("page") || 1; - const paginateBy = url.searchParams.get("paginate_by") || 20; - setPage(page); - setPaginateBy(paginateBy); - pageNumInput.max = Math.ceil(instrumentNum / paginateBy); -} - -function setPaginateBy(paginateBy) { - localStorage.setItem("paginate_by", paginateBy); -} - -function setPage(pageNum) { - localStorage.setItem("page", pageNum); -} - -function getPaginateBy() { - return localStorage.getItem("paginate_by"); -} - -function getPage() { - return localStorage.getItem("page"); -} - -optionRadios.forEach(function(radio) { - if (radio.id == getPaginateBy()) { - radio.checked = true; - } -}); - -optionRadios.forEach(function(radio) { - radio.addEventListener("change", function() { - if (radio.checked) { - const selectedOptionInt = parseInt(radio.id); - setPaginateBy(selectedOptionInt); - maxPageNum = Math.ceil(instrumentNum / getPaginateBy()); - validPageNum = Math.min(Math.max(getPage(), 1), maxPageNum); - if (validPageNum !== getPage()) { - setPage(validPageNum); - } - refreshPage(); - } - }); -}); - -pageNumInput.addEventListener("keydown", function(event) { - if (event.key === "Enter") { - maxPageNum = Math.ceil(instrumentNum / getPaginateBy()); - validPageNum = Math.min(Math.max(pageNumInput.value, 1), maxPageNum); - pageNumInput.value = validPageNum; - pageNumInput.max = maxPageNum; - setPage(validPageNum); - refreshPage(); - } -}); - -pageBtns.forEach((btn) => { - btn.addEventListener("click", () => { - btn.href = btn.href + "&paginate_by=" + getPaginateBy(); - }); -}); - -function refreshPage() { - const url = new URL(window.location.href); - url.searchParams.set("page", getPage()); - url.searchParams.set("paginate_by", getPaginateBy()); - window.location.href = url.href; -} \ No newline at end of file +const instrumentNumElement = document.getElementById('instrumentNum'); +const instrumentNum = instrumentNumElement.getAttribute('data-instrument-num'); +const pageNumInput = document.getElementById('page-num'); +const pageBtns = document.querySelectorAll('.page-link'); +const optionRadios = document.querySelectorAll('.option-radio'); + +updatePaginationSetting(); + +function updatePaginationSetting() { + const url = new URL(window.location.href); + const page = url.searchParams.get('page') || 1; + const paginateBy = url.searchParams.get('paginate_by') || 20; + setPage(page); + setPaginateBy(paginateBy); + pageNumInput.max = Math.ceil(instrumentNum / paginateBy); +} + +function setPaginateBy(paginateBy) { + localStorage.setItem('paginate_by', paginateBy); +} + +function setPage(pageNum) { + localStorage.setItem('page', pageNum); +} + +function getPaginateBy() { + return localStorage.getItem('paginate_by'); +} + +function getPage() { + return localStorage.getItem('page'); +} + +optionRadios.forEach(function (radio) { + if (radio.id == getPaginateBy()) { + radio.checked = true; + } +}); + +optionRadios.forEach(function (radio) { + radio.addEventListener('change', function () { + if (radio.checked) { + const selectedOptionInt = parseInt(radio.id); + setPaginateBy(selectedOptionInt); + maxPageNum = Math.ceil(instrumentNum / getPaginateBy()); + validPageNum = Math.min(Math.max(getPage(), 1), maxPageNum); + if (validPageNum !== getPage()) { + setPage(validPageNum); + } + refreshPage(); + } + }); +}); + +pageNumInput.addEventListener('keydown', function (event) { + if (event.key === 'Enter') { + maxPageNum = Math.ceil(instrumentNum / getPaginateBy()); + validPageNum = Math.min(Math.max(pageNumInput.value, 1), maxPageNum); + pageNumInput.value = validPageNum; + pageNumInput.max = maxPageNum; + setPage(validPageNum); + refreshPage(); + } +}); + +pageBtns.forEach((btn) => { + btn.addEventListener('click', () => { + btn.href = btn.href + '&paginate_by=' + getPaginateBy(); + }); +}); + +function refreshPage() { + const url = new URL(window.location.href); + url.searchParams.set('page', getPage()); + url.searchParams.set('paginate_by', getPaginateBy()); + window.location.href = url.href; +} diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/includes/listView.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/listView.html index c111634..66d3e7a 100644 --- a/web-app/django/VIM/apps/instruments/templates/instruments/includes/listView.html +++ b/web-app/django/VIM/apps/instruments/templates/instruments/includes/listView.html @@ -2,34 +2,30 @@