Switch to Tailwind for CSS

Refactor modals Update dependencies
dnknth · Aug 11, 2023 · d463a6e · d463a6e
1 parent 62818b6
commit d463a6e
Show file tree

Hide file tree

Showing 36 changed files with 3,988 additions and 2,228 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 .mypy_cache
 .venv*
+.activate
 __pycache__
 
 .DS_Store
@@ -17,7 +18,8 @@ pnpm-debug.log*
 
 # Editor directories and files
 .idea
-.vscode
+# https://github.com/tailwindlabs/tailwindcss/discussions/5258
+# .vscode 
 *.suo
 *.ntvs*
 *.njsproj

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "css.customData": [".vscode/tailwind.json"]
+}
diff --git a/.vscode/tailwind.json b/.vscode/tailwind.json
@@ -0,0 +1,55 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}
diff --git a/README.md b/README.md
@@ -104,4 +104,5 @@ Additionally, arbitrary attributes can be searched with an LDAP filter specifica
 
 The Python backend uses [Quart](https://pgjones.gitlab.io/quart/index.html) which is an asynchronous [Flask](http://flask.pocoo.org/). Kudos for the authors of these elegant frameworks!
 
-The UI uses [Vue.js](https://vuejs.org) with the excellent [Bootstrap Vue](https://bootstrap-vue.js.org) components. Thanks to the authors for making frontend work much more enjoyable.
+The UI is built with [Vue.js](https://vuejs.org) and UI elements based on [Vue Tailwind](https://vuetailwind.com/).
+Thanks to the authors for making frontend work much more enjoyable.
diff --git a/index.html b/index.html
@@ -9,16 +9,15 @@
     <meta name="googlebot" content="noindex, nofollow">
 
     <meta name="theme-color" content="aliceblue" />
-
     <link rel="icon" href="/favicon.ico">
+    <script type="module" src="/src/main.js"></script>
 
     <title>Directory</title>
   </head>
-  <body>
+  <body class="bg-back text-front">
+    <div id="app"></div>
     <noscript>
       <strong>We're sorry but JavaScript is required. Please enable it to continue.</strong>
     </noscript>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/jsconfig.json b/jsconfig.json
@@ -1,5 +1,8 @@
 {
     "include": [
       "./src/**/*"
-    ]
+    ],
+    "vueCompilerOptions": {
+      "target": 2.7
+    }
 }