Merge pull request #116 from DDMAL/formatter

Implement Front End Code Formatting
DDMAL · Jul 17, 2024 · 7bcdeb3 · 7bcdeb3
2 parents 0c0e8e0 + 6cf1a22
commit 7bcdeb3
Show file tree

Hide file tree

Showing 30 changed files with 1,081 additions and 958 deletions.
diff --git a/.djlintrc b/.djlintrc
@@ -0,0 +1,20 @@
+{
+  "exclude": [
+    "migrations/*"
+  ],
+  "extension": [
+    "html"
+  ],
+  "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
@@ -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/.github/workflows/frontend_format.yml b/.github/workflows/frontend_format.yml
@@ -0,0 +1,13 @@
+name: frontend-format
+on: [push, pull_request]
+jobs:
+  format-test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Run Prettier
+        run: npx prettier --check "**/*.css" "**/*.js" --trailing-comma es5
+      - name: Install djlint
+        run: npm install -g djlint
+      - name: Run djlint
+        run: djlint . --check --extension html --exclude "migrations/*"
diff --git a/prettierrc.yml 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
@@ -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;
-}
+  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
@@ -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;
-}
+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;
+}