Responsive UI (#89)

* Added missing binaries to the Docker environment

* Responsive navbar with mobile menu that can be toggled on and off

* Improved the Categories page on mobile devices and in light mode

* Improved the packages listing for mobile devices and light mode

* Improved search results

* make navbar sticky on desktop

.gitignore

@@ -20,3 +20,5 @@ assets/yarn-error.log
 assets/fonts
 result*
 cbits/*.cpp
+pgdata/
+.vscode/

Dockerfile

@@ -4,12 +4,13 @@ FROM gbogard/haskell-bullseye:8.10.7
 # generate a working directory
 WORKDIR /flora-server 
 
-# install dependencies (pg_config & yarn)
+# install dependencies (pg_config, postgresql-client, postrgresql-migrations & yarn)
 RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
 RUN curl -fsSL https://deb.nodesource.com/setup_17.x | bash -
 RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list 
 RUN apt update
-RUN apt install -y nodejs yarn libpq-dev mcpp wget zsh tmux
+RUN apt install -y nodejs yarn libpq-dev mcpp wget zsh tmux postgresql-client
+RUN cabal install postgresql-migration
 
 # install soufflé
 RUN wget --content-disposition https://github.com/souffle-lang/souffle/releases/download/2.2/x86_64-ubuntu-2004-souffle-2.2-Linux.deb

Makefile

@@ -64,9 +64,12 @@ style: ## Run the code formatters (stylish-haskell, cabal-fmt, nixfmt)
 nix-shell: ## Enter the Nix shell
 	@nix-shell
 
-docker-start: ## Start the container cluster
+docker-build: ## Build and start the container cluster
 	@docker-compose up -d --build
 
+docker-start: ## Start the container cluster
+	@docker-compose up -d
+
 docker-enter: ## Enter the docker environment
 	docker-compose exec flora-server "zsh"
 

README.md

@@ -87,7 +87,9 @@ A docker-based workflow is provided. The idea is to develop from within a contai
 and communicates with another container for the Postgres database.
 
 ```bash
-# It's gonna take around 13 minutes the first time you build
+# You need to build the container first. It's gonna take around 13 minutes the first time you build
+$ make docker-build
+# Start the container.
 $ make docker-start
 # Once the containers are running, you can enter the development environment and start hacking
 $ make docker-enter

assets/css/app.css

@@ -4,70 +4,46 @@
 
 @layer base {
   a {
-    @apply text-link dark:text-link-dark
+    @apply text-link dark:text-brand-purple-light;
   }
 }
 
-#darkmode-toggle:checked ~ label div.toggle-dot {
-  @apply translate-x-3;
+@layer components {
+  .larger-container {
+    @apply max-w-7xl mx-auto px-2;
+  }  
+
+  .form-input {
+    @apply my-1 rounded-md p-2 text-gray-900 placeholder-gray-600 border-1 border-gray-500;
+  }
+
+  .btn {
+    @apply rounded-md p-2 hover:bg-brand-purple-dark 
+  }
 }
 
 #navbar-search-package-name {
   padding-left: 20px;
 }
 
-.error-code{
+.error-code {
   --tw-bg-opacity: 1;
   color: hsl(270, 50%, 40%);
 }
 
-.error-page-button{
+.error-page-button {
   --tw-bg-opacity: 1;
   background-color: hsl(270, 50%, 40%);
 }
 
-#user-menu-container {
-  position: relative;
-}
-
-#user-menu-nav{
-  z-index: 1;
-  top: 100%;
-  width: max-content;
-  max-width: 14rem;
-}
-
-.user-menu-element {
-  padding: 10px 15px;
-}
-
-.user-menu-element a,
-.user-menu-element a:visited {
-  color: inherit;
-  display: block;
-}
-
-.user-menu-element a:hover,
-.user-menu-element a:active,
-.user-menu-element a:focus {
-  text-decoration: underline;
-}
-
-.user-menu-divider {
-  display: block;
-  height: 1px;
-  background-color: currentColor;
-  opacity: .4;
-}
-
 ul[class="bullets"] {
   li {
     list-style-type: disc;
     list-style-position: inside;
   }
 }
 
-div[class="bullets"]{
+div[class="bullets"] {
   ul {
     li {
       list-style-type: disc;
@@ -77,72 +53,37 @@ div[class="bullets"]{
 }
 
 .navbar-element {
-    color: hsl(0, 0%, 100%);
+  color: hsl(0, 0%, 100%);
 }
 
-.navbar-element:hover{
-    --tw-text-opacity: 1;
-    color: hsl(254.3,95%,76.7%);
+.navbar-element:hover {
+  --tw-text-opacity: 1;
+  color: hsl(254.3, 95%, 76.7%);
 }
 
 /* Dark mode-specific rules */
-.dark{
-  .navbar{
-    background-color: hsl(0.65, 0.14%, 0.24%);
-  }
-
-  .navbar-element:hover{
-    --tw-text-opacity: 1;
-    color: hsl(254.3,95%,76.7%);
-  }
+.dark {
 
-  .social-button:hover{
+  .social-button:hover {
     --tw-text-opacity: 1;
-    color: hsl(254.3,95%,76.7%);
+    color: hsl(254.3, 95%, 76.7%);
   }
 
-  .package-body{
-    a:hover{
-      --tw-text-opacity: 1;
-      color: hsl(254.3,95%,76.7%);
-    }
-  }
+}
 
-  .navbar-right{
-    .active{
-        --tw-border-opacity: 1;
-        border-bottom-color: hsl(270, 50%, 40%);
-        border-bottom-width: 2px;
-    }
-  }
+.divider {
+  padding-bottom: 1em;
+  margin-bottom: 0.66em;
+  border-bottom: 1px solid hsl(0, 0%, 80%);
+}
 
-  .categories{
-    a {
-      color: unset;
-    }
-  }
-  .packages-list{
-    a {
-      color: unset;
-    }
-  }
-  .packages-list-item{
-    a {
-      display: block;
-      padding-top: 1em;
-      padding-bottom: 1em;
-      padding-left: 0.75em;
-    }
-    a:hover{
-      background-color: hsl(234, 17%, 24%);
-      border-radius: 5px;
-    }
-  }
+.card {
+  @apply block bg-white dark:bg-background-darker rounded-lg shadow-lg py-4 px-8;
 }
 
 /* Large display rules */
 @media (min-width: 1024px) {
-  .container{
+  .container {
     width: auto;
     max-width: 1100px;
     padding-right: 15px;
@@ -151,21 +92,12 @@ div[class="bullets"]{
     margin-left: auto;
   }
 
-  .categories{
-    width: auto;
-    max-width: 1536px;
-    padding-right: 15px;
-    padding-left: 15px;
-    margin-right: auto;
-    margin-left: auto;
-  }
-
-  .category-card{
+  .card {
     --tw-shadow-color: rgb(102 51 153 / 0.25);
     --tw-shadow: var(--tw-shadow-colored);
   }
 
-  .about-page{
+  .about-page {
     width: auto;
     max-width: 1000px;
     padding-right: 15px;
@@ -174,56 +106,26 @@ div[class="bullets"]{
     margin-left: auto;
   }
 
-  body{
-    height: 100%;
-  }
-
-  html{
-    height: 100%;
-  }
-
-  .navbar{
+  .navbar {
     margin-bottom: 20rem;
     font-size: 1.5rem;
     line-height: 2rem;
     margin-bottom: 4rem;
   }
 
-  .headline{
+  .headline {
     margin-bottom: 5px;
   }
 
-  .divider{
-    padding-bottom: 1em;
-    margin-bottom: .66em;
-    border-bottom: 1px solid hsl(0, 0%, 80%);
-  }
 
-  .version{
+
+  .version {
     font-size: 1.3rem;
     line-height: 1.3rem;
     padding-left: 4px;
   }
 
-  .package-body-section{
-    font-weight: 700;
-    display: inline-block;
+  .dependency {
     white-space: nowrap;
   }
-
-  .dependency{
-    white-space: nowrap;
-  }
-
-  .package-left-column{
-    --tw-space-y-reverse: 0;
-    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-  }
-
-  .package-right-column{
-    --tw-space-y-reverse: 0;
-    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-  }
 }

assets/js/app.js

@@ -1,20 +1,3 @@
-import Alpine from 'alpinejs'
-window.Alpine = Alpine
-Alpine.start()
-
-const checkbox = document.querySelector("#darkmode-toggle");
-const html = document.querySelector("html");
-
-const toggleDarkMode = () => {
-  if (checkbox.checked) {
-    html.classList.add("dark");
-    localStorage.theme = "dark";
-    console.log("[+] Enabling and saving dark mode preference");
-  } else {
-    html.classList.remove("dark");
-    localStorage.theme = "light";
-    console.log("[+] Enabling and saving light mode preference");
-  }
-}
-
-checkbox.addEventListener("click", toggleDarkMode);
+import Alpine from "alpinejs";
+window.Alpine = Alpine;
+Alpine.start();

assets/package.json

@@ -6,6 +6,7 @@
     "alpinejs": "^3.9.6",
     "autoprefixer": "^10.4.0",
     "concurrently": "^6.4.0",
+    "cpx": "^1.5.0",
     "cssnano": "^5.0.10",
     "esbuild": "^0.13.13",
     "esbuild-copy-static-files": "^0.1.0",
@@ -16,11 +17,13 @@
     "tailwindcss": "^3.0.0"
   },
   "scripts": {
-    "watch": "concurrently \"yarn:watch-css\" \"yarn:watch-js\"",
-    "build": "concurrently \"yarn:build-css\" \"yarn:build-js\"",
+    "watch": "concurrently \"yarn:watch-css\" \"yarn:watch-js\" \"yarn:watch-static-files\"",
+    "build": "concurrently \"yarn:build-css\" \"yarn:build-js\" \"yarn:copy-static-files\"",
     "watch-js": "node esbuild.config.js",
     "build-js": "esbuild js/app.js --asset-names=[name]-[hash].js --bundle --minify --target=es2016 --outdir=../static/js/",
     "watch-css": "postcss css/app.css -o ../static/css/app.css -w",
-    "build-css": "NODE_BUILD=prod postcss css/app.css -o ../static/css/app.css"
+    "build-css": "NODE_BUILD=prod postcss css/app.css -o ../static/css/app.css",
+    "copy-static-files": "cpx **/*.{svg,png,jpg} ../static",
+    "watch-static-files": "cpx **/*.{svg,png,jpg} ../static -w"
   }
 }

assets/tailwind.config.js

@@ -12,14 +12,18 @@ module.exports = {
       colors: {
         "background": {
           "dark": "#25282a",
+          "darker": "#1D2021",
           "dark-focused": "#3a3d3f",
           "DEFAULT": "#f3f4f6",
         },
         "brand-purple": {
           "DEFAULT": "#4e315e",
+          "dark": "#352140",
+          "light": "#EFC3F5"
         },
         "navbar": {
-          "dark": "#1D2021"
+          "dark": "#1D2021",
+          "darker": "#16191a"
         },
         "link": {
           "dark": "#4dabf7",