Merge pull request #49 from offspot/new-ui

New Dashboard UI

dashboard/.gitignore

@@ -1,4 +1,6 @@
-assets/fira
 assets/fontawesome
-assets/pure-min.css
-assets/grids-responsive-min.css
+/assets/dashboard.css
+/*.yaml
+/download
+/download.html
+/index.html

dashboard/Dockerfile

@@ -3,39 +3,23 @@ LABEL org.opencontainers.image.source https://github.com/offspot/container-image
 
 RUN \
     apk add --no-cache curl dumb-init yaml python3 lighttpd \
-    # Fira font
-    && mkdir -p /var/www/assets/fira \
-    && curl -L -O https://github.com/mozilla/Fira/archive/refs/tags/4.202.zip \
-        && unzip -j -o 4.202.zip \
-            Fira-4.202/eot/FiraSans-Bold.eot \
-            Fira-4.202/eot/FiraSans-Regular.eot \
-            Fira-4.202/ttf/FiraSans-Bold.ttf \
-            Fira-4.202/ttf/FiraSans-Regular.ttf \
-            Fira-4.202/woff/FiraSans-Bold.woff \
-            Fira-4.202/woff/FiraSans-Regular.woff \
-            -d /var/www/assets/fira \
-            && rm -f 4.202.zip \
     # FontAwesome font
-    && curl -L -O https://use.fontawesome.com/releases/v6.2.0/fontawesome-free-6.2.0-web.zip \
-        && unzip -o fontawesome-free-6.2.0-web.zip \
-            fontawesome-free-6.2.0-web/css/* \
-            fontawesome-free-6.2.0-web/webfonts/* \
+    && curl -L -O https://use.fontawesome.com/releases/v6.5.1/fontawesome-free-6.5.1-web.zip \
+        && unzip -o fontawesome-free-6.5.1-web.zip \
+            fontawesome-free-6.5.1-web/css/* \
+            fontawesome-free-6.5.1-web/webfonts/* \
             -d /var/www/assets/ \
-        && mv /var/www/assets/fontawesome-free-6.2.0-web /var/www/assets/fontawesome \
-        && rm -f fontawesome-free-6.2.0-web.zip \
-    # Pure CSS
-    && curl \
-        -L -o /var/www/assets/pure-min.css \
-        https://cdn.jsdelivr.net/npm/[email protected]/build/pure-min.css \
-    && curl \
-        -L -o /var/www/assets/grids-responsive-min.css \
-        https://cdn.jsdelivr.net/npm/[email protected]/build/grids-responsive-min.css \
+        && mv /var/www/assets/fontawesome-free-6.5.1-web /var/www/assets/fontawesome \
+        && rm -f fontawesome-free-6.5.1-web.zip \
     # python dependencies
     && python3 -m venv /usr/local/bin/gen-home_env \
     && /usr/local/bin/gen-home_env/bin/pip3 install --no-cache-dir -U pip \
     && /usr/local/bin/gen-home_env/bin/pip3 install \
         --no-cache-dir \
-        Jinja2==3.1.2 PyYAML==6.0.1 humanfriendly==10.0 libzim==3.4.0 \
+        Jinja2==3.1.2 PyYAML==6.0.1 humanfriendly==10.0 iso639-lang==2.2.3 libzim==3.4.0 \
+    # install tailwind CSS cli
+    && curl -L -o /usr/local/bin/tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/download/v3.4.3/tailwindcss-linux-arm64 \
+    && chmod +x /usr/local/bin/tailwindcss \
     && apk del curl
 
 ENV FQDN "generic.hotspot"
@@ -62,16 +46,25 @@ ENV KIWIX_DOWNLOAD_LINK_TPL "//zim-download.{fqdn}/{zim_filename}"
 # it's OK on prod but comment it during dev if you need packages
 RUN apk del apk-tools ca-certificates-bundle
 
-COPY gen-home.py refresh-zims.py /src/
+COPY gen-home.py refresh-zims.py tailwind.config.js /src/
 COPY templates /src/templates
 COPY assets /var/www/assets
 COPY fallback.html /var/www/fallback.html
 COPY home.yaml /src/
 COPY lighttpd.conf /etc/lighttpd/
 COPY entrypoint.sh /usr/local/bin/
 
-# store python bytecode in image
-RUN /usr/local/bin/gen-home_env/bin/python3 -m compileall /src/gen-home.py /src/refresh-zims.py && mv /src/__pycache__/*.pyc /usr/local/bin/gen-home_env/lib/
+WORKDIR /src
+
+RUN \
+    # gen final CSS
+    tailwindcss -i /var/www/assets/dashboard-tailwind-src.css -o /var/www/assets/dashboard.css \
+    && rm -f /var/www/assets/dashboard-tailwind-src.css \
+    && rm -f /usr/local/bin/tailwindcss \
+    # store python bytecode in image
+    && /usr/local/bin/gen-home_env/bin/python3 -m compileall /src/gen-home.py /src/refresh-zims.py && mv /src/__pycache__/*.pyc /usr/local/bin/gen-home_env/lib/
+
+WORKDIR /var/www
 
 HEALTHCHECK --interval=10s --timeout=2s CMD ["/bin/ls", "/tmp/.ready"]
 ENTRYPOINT ["/usr/bin/dumb-init", "--", "/usr/local/bin/entrypoint.sh"]

dashboard/assets/dashboard-tailwind-src.css

@@ -0,0 +1,152 @@
+/* Tailwind source file in dashboard-tailwind-src.css
+
+To be compiled using `npx tailwindcss`
+eg: npx tailwindcss -i ./assets/dashboard-tailwind-src.css -o ./assets/dashboard.css
+*/
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --rounded-btn: 0.5rem;
+}
+
+/*START: daisyui select (adapted; need to reimpl in tw) */
+select {
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+    padding-right: 0px;
+    padding-left: 0px;
+
+  text-transform: none;
+}
+
+.select {
+  display: inline-flex;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  height: 3rem;
+  min-height: 3rem;
+  padding-left: 1rem;
+  padding-right: 2.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  line-height: 2;
+  border-radius: var(--rounded-btn, 0.5rem);
+  border-width: 1px;
+  border-color: transparent;
+  --tw-bg-opacity: 1;
+  background-color: oklch(1 0 0);
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
+  background-size: 4px 4px, 4px 4px;
+  background-repeat: no-repeat;
+}
+
+[dir="rtl"] .select {
+  background-position:
+    calc(0% + 12px) calc(1px + 50%),
+    calc(0% + 16px) calc(1px + 50%);
+}
+
+
+.max-w-xs {
+  max-width: 20rem;
+}
+.select-sm {
+  height: 2rem;
+  min-height: 2rem;
+  padding-left: 0.75rem;
+  padding-right: 2rem;
+  font-size: 0.875rem;
+  line-height: 2rem;
+}
+.select-bordered {
+  border-color: var(oklch(var(--bc)/0.2));
+}
+
+/*END: daisyui select */
+
+@layer components {
+  .kiwix-home-btn {
+    @apply hover:bg-kwordergrey-600 hover:text-white bg-kwordergrey-500 text-kwwhite;
+  }
+  .kiwix-home-btn-active {
+    @apply border-white text-kwordergrey-500 bg-white drop-shadow-md hover:text-kwordergrey-500 hover:bg-white hover:cursor-default;
+  }
+
+  .kiwix-download-btn {
+    @apply hover:bg-kworange-800 hover:text-white bg-kworange-500 text-kwwhite;
+  }
+  .kiwix-download-btn-active {
+    @apply border-white text-kworange-100 bg-white drop-shadow-md hover:text-kworange-100 hover:bg-white hover:cursor-default;
+  }
+
+  .kiwix-order-dir-btn {
+    @apply mr-1 last:mr-0 cursor-pointer p-0 text-[0.9em] leading-[1.1em] h-[1.7em] w-[1.7em] rounded-md drop-shadow-none;
+  }
+
+  .kiwix-sort-btn {
+    @apply mr-0 last:mr-0 cursor-pointer box-border px-[2em] py-0 text-[0.9em] leading-[1.1em] h-[2em] rounded-2xl min-w-[3em] md:min-w-[6em]  relative z-40 pr-[1.8em] drop-shadow-none;
+  }
+  .kiwix-sort-btn-active {
+    @apply z-50 pr-[2em] hover:cursor-default;
+  }
+
+  .kiwix-download-filter-label {
+    @apply text-white;
+  }
+
+  .kiwix-reader-platform-btn {
+    @apply cursor-pointer border-white border bg-kwordergrey-500 md:bg-kwordergrey-500 md:bg-kwreaderbggrey text-white text-sm rounded-xl px-3 py-1 sm:me-1 lg:me-3 last:me-0 hover:bg-kwordergrey-600 md:hover:bg-kwreaderhover hover:text-white hover:border-white;
+  }
+
+  .kiwix-reader-platform-btn-active {
+    @apply text-kwreaderbggrey bg-white drop-shadow-md hover:text-kwreaderbggrey hover:bg-white hover:border-white hover:cursor-default;
+  }
+
+  .kiwix-home-innerglow {
+    box-shadow: inset 0 0 1em #a6b2bd;
+  }
+
+  .kiwix-download-innerglow {
+    box-shadow: inset 0 0 1em #c60;
+  }
+
+  .content-max-w {
+    @apply sm:max-w-screen-sm md:max-w-screen-md lg:max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl;
+  }
+
+  .content-w {
+    @apply sm:w-[640px] md:w-[768px] lg:w-[1024px] xl:w-[1280px] 2xl:w-[1536px] w-[90%] mx-auto;
+  }
+
+  .mini-height-card-90 {
+    height: calc((90vw /8.79) * 4.69);
+  }
+  .mini-height-card-60 {
+    height: calc((60vw /8.79) * 4.69);
+  }
+  .inherit {
+    position: inherit;
+  }
+  .hide-after-2:nth-child(3), .hide-after-2:nth-child(4) {
+    @apply hidden;
+  }
+}
+
+body {
+    font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
+}