Merge pull request #13 from philipp-kempgen/main

dev

Dockerfile

@@ -11,8 +11,10 @@ RUN apt-get update \
     npm \
     yarn \
     build-essential \
-    git \
     postgresql-client \
+    # for convenience:
+    git \
+    less \
   && rm -rf /var/lib/apt/lists/*
 
 # Hex, Phoenix
@@ -23,20 +25,60 @@ RUN mix local.rebar --force
 RUN mkdir -p /application
 WORKDIR /application
 
-COPY "./assets"   "./assets"
-COPY "./config"   "./config"
-COPY "./lib"      "./lib"
 COPY "./mix.exs"  "./mix.exs"
 COPY "./mix.lock" "./mix.lock"
+
+RUN mix deps.clean --all
+
+# install dependencies
+RUN mix deps.get
+
+# copy compile-time config files before we compile dependencies
+# to ensure any relevant config change will trigger the dependencies
+# to be re-compiled.
+COPY "./config"   "./config"
+COPY [ \
+  "./config/config.exs", \
+  "./config/dev.exs", \
+  "./config/test.exs", \
+  "./config/prod.exs", \
+  # ->
+  "./config/" \
+]
+
+# compile deps
+RUN mix deps.compile
+
+# compile
+RUN mix compile
+
+# download TailwindCSS and ESBuild, if missing
+RUN mix assets.setup
+
+COPY "./assets"   "./assets"
+
+# compile assets
+RUN mix assets.deploy
+
+COPY "./lib"      "./lib"
 COPY "./priv"     "./priv"
 COPY "./test"     "./test"
+
 COPY "./.formatter.exs"  "./.formatter.exs"
 COPY "./.credo.exs"      "./.credo.exs"
 
-RUN mix deps.clean --all
-RUN mix deps.get
 RUN mix compile
 
+# changes to config/runtime.exs don't require recompiling the code
+COPY "./config/runtime.exs"   "./config/runtime.exs"
+
+RUN mkdir -p "$HOME/.config/git" \
+  && ( \
+    echo '' ;\
+    echo '# ignore ".DS_Store" files from Mac OS X:' ;\
+    echo '.DS_Store' ;\
+  ) > "$HOME/.config/git/ignore"
+
 #RUN cd assets && npm install
 
 ARG DATABASE_HOST="db"

assets/css/app.css

@@ -9,10 +9,28 @@ body {
 	margin-right: auto;
 }
 
-input:invalid {
+input:invalid:not(:placeholder-shown) {
 	background-color: hsl( 12, 100%, 95% );
 }
 
+input:not([placeholder])[type="text"],
+input:not([placeholder])[type="email"],
+input:not([placeholder])[type="number"],
+input:not([placeholder])[type="password"],
+input:not([placeholder])[type="date"],
+input:not([placeholder])[type="datetime"],
+input:not([placeholder])[type="datetime-local"],
+input:not([placeholder])[type="file"],
+input:not([placeholder])[type="month"],
+input:not([placeholder])[type="search"],
+input:not([placeholder])[type="tel"],
+input:not([placeholder])[type="time"],
+input:not([placeholder])[type="url"],
+input:not([placeholder])[type="week"] {
+	border: 5px dashed #f30 !important;
+	outline: 5px dashed #f96 !important;
+}
+
 input:disabled, select:disabled, textarea:disabled, button:disabled {
 	opacity: 0.5;
 }
@@ -21,6 +39,35 @@ p, *.wordwrap {
 	@apply break-words hyphens-auto;
 }
 
+input[type="text"],
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="file"],
+input[type="month"],
+input[type="search"],
+input[type="tel"],
+input[type="time"],
+input[type="url"],
+input[type="week"] {
+	@apply shadow-inner;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+	@apply drop-shadow-md;
+}
+
+input[type="button"],
+input[type="submit"]
+input[type="reset"],
+button,
+select {
+	@apply drop-shadow-lg;
+}
 
 
 

assets/tailwind.config.js

@@ -18,7 +18,10 @@ module.exports = {
       },
       colors: {
         brand: "#FD4F00",
-      }
+      },
+      boxShadow: {
+        'inner': 'inset 0 1px 2px rgba( 0, 0, 0, .39 ), 0 -1px 1px #fff, 0 1px 0 #fff',
+      },
     },
   },
   plugins: [

bin/mix-credo-strict

@@ -2,5 +2,5 @@
 
 set -e
 
-exec docker-compose exec -ti web mix credo --strict
+exec docker-compose exec web mix credo --strict
 

bin/mix-format-check

@@ -0,0 +1,6 @@
+#!/bin/bash
+
+set -e
+
+exec docker-compose exec web mix format --check-formatted
+

docker-compose.yml

@@ -27,10 +27,12 @@ services:
       - "./mix.exs:/application/mix.exs:ro"
       - "./mix.lock:/application/mix.lock:ro"
       - "./priv:/application/priv:ro"
-      - "./priv/static/assets:/application/priv/static/assets:rw"
+      - "./priv/static/assets:/application/priv/static/assets:rw"  # note: read-write!
       - "./test:/application/test:ro"
       - "./.formatter.exs:/application/.formatter.exs:ro"
       - "./.credo.exs:/application/.credo.exs:ro"
+      - "./.git:/application/.git:ro"  # just so we can compare changes made by "mix format", as an experiment
+      - "./.gitignore:/application/.gitignore:ro"  # just so we can compare changes made by "mix format", as an experiment
     depends_on:
       db:
         condition: service_started

lib/animina_web/components/animina_components.ex

@@ -1,6 +1,6 @@
 defmodule AniminaWeb.AniminaComponents do
   @moduledoc """
-  Provides animina UI components.
+  Provides Animina UI components.
   """
   use Phoenix.Component
 
@@ -20,21 +20,34 @@ defmodule AniminaWeb.AniminaComponents do
       </p>
     </.notification_box>
   """
-  attr :points, :integer, default: 0, doc: "number of points the user has"
-  attr :avatar_url, :string, default: nil, doc: "URL of the user's avatar"
-  attr :title, :string, default: nil, doc: "title of the notification"
-  attr :message, :string, default: nil, doc: "message of the notification"
+  attr :points       , :integer, default: 0  , doc: "number of points the user has"
+  attr :avatar_url   , :string , default: nil, doc: "URL of the user's avatar"
+  attr :avatar_url_b , :string , default: nil, doc: "URL of the user's avatar"
+  attr :title        , :string , default: nil, doc: "title of the notification"
+  attr :message      , :string , default: nil, doc: "message of the notification"
   slot :inner_block
 
   def notification_box(assigns) do
     ~H"""
-    <div class="border border-purple-400 rounded-lg bg-blue-100 px-4 py-3.5 flex items-start gap-4">
-      <div
-        :if={@avatar_url}
-        class="w-11 h-11 shrink-0 rounded-full border border-white overflow-hidden"
-      >
-        <img class="w-full h-full object-cover" alt="image" src={@avatar_url} />
-      </div>
+    <div class="border border-purple-400 rounded-lg bg-blue-100 px-4 py-3.5 flex items-start gap-4 drop-shadow">
+      <%= if @avatar_url_b do %>
+        <div class="relative w-[4.7rem]">
+          <.notification_box_avatar avatar_url={ @avatar_url   }
+            classes={[
+              "absolute", "top-0", "left-0",
+              "opacity-50", "brightness-95", "border-neutral-100",
+            ]}
+          />
+          <.notification_box_avatar avatar_url={ @avatar_url_b }
+            classes={[
+              "absolute", "top-0", "left-[1.875rem]",
+              "outline", "outline-[0.6px]", "outline-white", "outline-offset-0",
+            ]}
+          />
+        </div>
+      <% else %>
+        <.notification_box_avatar avatar_url={ @avatar_url } />
+      <% end %>
       <div>
         <.notification_title :if={@title}>
           <%= @title %>
@@ -47,7 +60,35 @@ defmodule AniminaWeb.AniminaComponents do
     </div>
     """
   end
-
+
+  # -------------------------------------------------------------
+  @doc """
+  Avatar in a notification message box.
+  """
+  attr :avatar_url   , :string , default: nil, doc: "URL of the user's avatar"
+  attr :classes      , :list   , default: [], doc: "classes"
+
+  def notification_box_avatar(assigns) do
+    ~H"""
+    <div
+      class={[
+        "w-11 h-11 shrink-0 rounded-full border border-white overflow-hidden drop-shadow-md text-center align-middle",
+        @classes,
+      ]}
+      phx-no-format
+    >
+        <%= if @avatar_url do %>
+          <img class="w-full h-full object-cover drop-shadow" alt=" " src={ @avatar_url } />
+        <% else %>
+          <div
+            class="w-11 text-center align-middle text-4xl cursor-default select-none"
+            aria-hidden="true"
+          >?</div>
+        <% end %>
+    </div>
+    """
+  end
+
   # -------------------------------------------------------------
   @doc """
   Title within the notification box.
@@ -96,8 +137,8 @@ defmodule AniminaWeb.AniminaComponents do
 
     <.status_bar title="Dating-Präferenzen" percent={15} />
   """
-  attr :title, :string, default: nil, doc: "title of the status bar"
-  attr :percent, :integer, default: 0, doc: "percent"
+  attr :title   , :string , default: nil, doc: "title of the status bar"
+  attr :percent , :integer, default: 0  , doc: "percent"
 
   def status_bar(assigns) do
     ~H"""

lib/animina_web/components/layouts/root.html.heex

@@ -4,8 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
-    <.live_title suffix=" · Phoenix Framework">
-      <%= assigns[:page_title] || "Animina" %>
+    <.live_title prefix="Animina · ">
+      <%= assigns[:page_title] || "" %>
     </.live_title>
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>