appgenerator: rework css using tailwind + misc cleanup, wording (#2259)

* appgenerator: rework css using tailwind + misc cleanup, wording * appgenerator: tweak gettext + update translations (at least fr) * appgenerator: bump version idk
YunoHost · Apr 30, 2024 · 8266390 · 8266390
1 parent 70d851d
commit 8266390
Show file tree

Hide file tree

Showing 13 changed files with 1,432 additions and 832 deletions.
diff --git a/tools/app_generator/app.py b/tools/app_generator/app.py
diff --git a/tools/app_generator/requirements.txt b/tools/app_generator/requirements.txt
@@ -4,7 +4,6 @@ click==8.1.7
 dominate==2.8.0
 Flask==3.0.0
 flask_babel~=4.0.0
-Flask-Bootstrap==3.3.7.1
 Flask-Cors==4.0.0
 Flask-Misaka==1.0.0
 Flask-WTF==1.2.1

diff --git a/tools/app_generator/static/fetch_assets b/tools/app_generator/static/fetch_assets
@@ -0,0 +1,6 @@
+# Download standalone tailwind to compile what we need
+wget https://github.com/tailwindlabs/tailwindcss/releases/download/v3.3.3/tailwindcss-linux-x64
+chmod +x tailwindcss-linux-x64 
+./tailwindcss-linux-x64 --input tailwind-local.css --output tailwind.css --minify
+
+
diff --git a/tools/app_generator/static/stylesheet.css b/tools/app_generator/static/stylesheet.css
diff --git a/tools/app_generator/static/tailwind-local.css b/tools/app_generator/static/tailwind-local.css
@@ -0,0 +1,105 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+
+    body {
+        @apply text-gray-800;
+    }
+
+    h1 {
+        @apply text-2xl font-bold;
+    }
+
+    h2 {
+        @apply text-xl font-bold;
+    }
+
+    h3 {
+        @apply text-lg font-bold;
+    }
+
+    .hide {
+        display: none;
+    }
+
+    .btn {
+        @apply text-sm font-medium rounded-md px-4 py-2 transition bg-gray-200 m-1;
+    }
+    .btn-sm {
+        @apply text-xs font-medium rounded-md px-2 py-2 transition;
+    }
+    .btn-success {
+        @apply text-white bg-green-500 hover:bg-green-700;
+    }
+    .btn-primary {
+        @apply text-white bg-blue-500 hover:bg-blue-700;
+    }
+    .btn-link {
+        @apply bg-gray-400 hover:bg-gray-200;
+    }
+    .panel {
+        @apply block rounded-lg border border-gray-400 mb-2;
+    }
+    .panel-heading {
+        @apply text-white bg-blue-500 hover:bg-blue-700 p-2 font-bold;
+    }
+    .panel-body {
+        @apply p-2;
+    }
+
+    .alert-info {
+        @apply text-blue-900 border-blue-900 bg-blue-200 rounded-lg p-4;
+    }
+
+    .active, .collapse-button:hover {
+        background-color: #318ddc;
+    }
+
+    .collapse-title:after {
+        content: '\002B';
+        color: white;
+        font-weight: bold;
+        float: right;
+        margin-left: 5px;
+    }
+
+    .expanded .collapse-title::after  {
+        content: "\2212";
+    }
+
+    .collapsed {
+        padding: 0px 15px 0px 15px;
+    }
+
+    .collapsible {
+        max-height: 0px;
+        overflow: hidden;
+        transition: max-height 0.2s ease-out;
+    }
+
+    label {
+        @apply font-bold;
+    }
+
+    input {
+        @apply rounded-lg;
+    }
+
+    .form-group, .checkbox {
+        @apply px-2 py-4;
+    }
+
+    .form-control {
+        @apply block w-full rounded-md border-gray-300;
+    }
+
+    .help-block {
+        @apply text-gray-500 text-sm;
+    }
+
+    .tip {
+        @apply italic p-2;
+    }
+}
diff --git a/tools/app_generator/static/tailwind.config.js b/tools/app_generator/static/tailwind.config.js
@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['../templates/*.html'],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+  ],
+  safelist: [
+    'safelisted',
+    {
+      pattern: /^(text-[a-z]+-600|border-[a-z]+-400)$/,
+    },
+  ]
+}
+
diff --git a/tools/app_generator/static/yunohost-package.png b/tools/app_generator/static/yunohost-package.png
diff --git a/tools/app_generator/templates/base.html b/tools/app_generator/templates/base.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>{{ gettext("YunoHost app generator") }}</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{{ url_for('static', filename='fork-awesome.min.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='tailwind.css') }}">
+  </head>
+  <body>
+      <main class="my-2 mx-auto max-w-screen-md">
+        {% block main -%}
+        {%- endblock main %}
+      </main>
+  </body>
+</html>