Auto-format css/js/html and add eslint

.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+    extends: "eslint:recommended",
+    env: {
+        browser: true,
+        node: true,
+    },
+    parserOptions: { ecmaVersion: 9 },
+    globals: {
+        $: "readonly",
+    },
+};

.pre-commit-config.yaml

@@ -25,3 +25,19 @@ repos:
       args: [ --fix ]
     # Run the formatter.
     - id: ruff-format
+
+-   repo: https://github.com/pre-commit/mirrors-eslint
+    rev: v8.56.0
+    hooks:
+    - id: eslint
+
+-   repo: https://github.com/pre-commit/mirrors-prettier
+    rev: v3.1.0
+    hooks:
+    - id: prettier
+      types_or: [css, javascript]
+
+-   repo: https://github.com/rtts/djhtml
+    rev: 3.0.6
+    hooks:
+    - id: djhtml

.prettierrc

@@ -0,0 +1,4 @@
+{
+    "printWidth": 100,
+    "tabWidth": 4
+}

docs/conf.py

@@ -12,7 +12,6 @@
 # serve to show the default.
 
 import os
-import shlex
 import sys
 
 

rosetta/static/admin/rosetta/css/rosetta.css

@@ -1,47 +1,147 @@
-
-#user-tools p span { margin-left:2em; }
-table{width:100%;}
-td.translation label {font-size: 95%;}
-td.translation textarea, td.original { font-size:110%;}
-td.translation,td.original {width:30%;}
-td.original .plural-container { position:relative}
-td .context,td.original .message {display:block;}
-td .context { margin-top: 1rem; color: #999; }
-td.translation textarea{ width:98.5%; min-height:25px; margin:2px 0; }
-.rtl td.translation textarea { direction: rtl;}
-.plural span {display:block; margin:2px 0; position:absolute}
-td.location code,td.location a { font-size:95%; display:block;}
-td.location code.hide { display:none;}
-.submit-row {margin-bottom:0;}
-li.nobubble,li.nobubble:hover { background-image:none;}
-.object-tools li.active, .object-tools li.active a { color:yellow;}
-p.paginator input { float:right;}
-p.paginator span.space { margin: 0 0.5em;}
-.paginator {text-align:left; border:none; background:transparent; }
-.paginator strong { margin-left:1em;}
-th.r,td.r {text-align:right;}
-th.c,td.c {text-align: center;}
-td.original code {font-size:90%; padding: 0 1px; }
-tr.row2 td.original code {background-color:#FFB2A5; padding: 0 0.3em;}
-tr.row1 td.original code {background-color:#FFB2A5;}
-.alert { font-weight:bold;padding:4px 5px 4px 25px; margin-left:1em; color: red; background:transparent url(data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20fill%3D%22%23efb80b%22%20d%3D%22M1024%201375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13%200-22.5%209.5t-9.5%2023.5v190q0%2014%209.5%2023.5t22.5%209.5h192q13%200%2022.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11%200-24%2011-10%207-10%2021l17%20457q0%2010%2010%2016.5t24%206.5h185q14%200%2023.5-6.5t10.5-16.5zm-14-934l768%201408q35%2063-2%20126-17%2029-46.5%2046t-63.5%2017h-1536q-34%200-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31%2047-49t65-18%2065%2018%2047%2049z%22%2F%3E%0A%3C%2Fsvg%3E%0A) 5px .3em no-repeat; }
-p.errornote { margin-top:0.4em;}
-#footer { clear:both; color:#999; font-size:9px; margin:0 6px; text-align:left;}
-#changelist table tbody td:first-child, #changelist table thead th:first-child  {text-align: left;}
-td.hint {color: #777;}
-div.module {margin-bottom: 20px;}
-.checkall {cursor:pointer}
-#toolbar { height:20px}
-#toolbar #translate-all { float:right}
-#toolbar form { float:left; }
-#changelist table thead th { padding: 2px 5px; }
+#user-tools p span {
+    margin-left: 2em;
+}
+table {
+    width: 100%;
+}
+td.translation label {
+    font-size: 95%;
+}
+td.translation textarea,
+td.original {
+    font-size: 110%;
+}
+td.translation,
+td.original {
+    width: 30%;
+}
+td.original .plural-container {
+    position: relative;
+}
+td .context,
+td.original .message {
+    display: block;
+}
+td .context {
+    margin-top: 1rem;
+    color: #999;
+}
+td.translation textarea {
+    width: 98.5%;
+    min-height: 25px;
+    margin: 2px 0;
+}
+.rtl td.translation textarea {
+    direction: rtl;
+}
+.plural span {
+    display: block;
+    margin: 2px 0;
+    position: absolute;
+}
+td.location code,
+td.location a {
+    font-size: 95%;
+    display: block;
+}
+td.location code.hide {
+    display: none;
+}
+.submit-row {
+    margin-bottom: 0;
+}
+li.nobubble,
+li.nobubble:hover {
+    background-image: none;
+}
+.object-tools li.active,
+.object-tools li.active a {
+    color: yellow;
+}
+p.paginator input {
+    float: right;
+}
+p.paginator span.space {
+    margin: 0 0.5em;
+}
+.paginator {
+    text-align: left;
+    border: none;
+    background: transparent;
+}
+.paginator strong {
+    margin-left: 1em;
+}
+th.r,
+td.r {
+    text-align: right;
+}
+th.c,
+td.c {
+    text-align: center;
+}
+td.original code {
+    font-size: 90%;
+    padding: 0 1px;
+}
+tr.row2 td.original code {
+    background-color: #ffb2a5;
+    padding: 0 0.3em;
+}
+tr.row1 td.original code {
+    background-color: #ffb2a5;
+}
+.alert {
+    font-weight: bold;
+    padding: 4px 5px 4px 25px;
+    margin-left: 1em;
+    color: red;
+    background: transparent
+        url(data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20fill%3D%22%23efb80b%22%20d%3D%22M1024%201375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13%200-22.5%209.5t-9.5%2023.5v190q0%2014%209.5%2023.5t22.5%209.5h192q13%200%2022.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11%200-24%2011-10%207-10%2021l17%20457q0%2010%2010%2016.5t24%206.5h185q14%200%2023.5-6.5t10.5-16.5zm-14-934l768%201408q35%2063-2%20126-17%2029-46.5%2046t-63.5%2017h-1536q-34%200-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31%2047-49t65-18%2065%2018%2047%2049z%22%2F%3E%0A%3C%2Fsvg%3E%0A)
+        5px 0.3em no-repeat;
+}
+p.errornote {
+    margin-top: 0.4em;
+}
+#footer {
+    clear: both;
+    color: #999;
+    font-size: 9px;
+    margin: 0 6px;
+    text-align: left;
+}
+#changelist table tbody td:first-child,
+#changelist table thead th:first-child {
+    text-align: left;
+}
+td.hint {
+    color: #777;
+}
+div.module {
+    margin-bottom: 20px;
+}
+.checkall {
+    cursor: pointer;
+}
+#toolbar {
+    height: 20px;
+}
+#toolbar #translate-all {
+    float: right;
+}
+#toolbar form {
+    float: left;
+}
+#changelist table thead th {
+    padding: 2px 5px;
+}
 
 #changelist {
-  display: block !important;
+    display: block !important;
 }
 
 .info-tip::after {
-    content: '?';
+    content: "?";
     color: white;
     background-color: #bbb;
     margin-left: 5px;