31 chore cleanup after rebase

README.md

@@ -209,3 +209,8 @@ Logos and text provided with courtesy of kits.
 - https://github.com/gerardo-navarro
 - https://github.com/nwittstruck
 - Lightbulb stock image by LED Supermarket at Pexels: https://www.pexels.com/de-de/foto/die-gluhbirne-577514/
+
+
+## Additonal licence
+
+The mindwendel [logo](https://thenounproject.com/icon/735650/) in this repo – created by [mikicon](https://thenounproject.com/mikicon) – is licenced under [CC BY 3.0 Unported](https://creativecommons.org/licenses/by/3.0/).

README_KITS.md

@@ -0,0 +1,21 @@
+# kits version of mindwendel
+
+This project includes a few CI changes to the mindwendel software.
+
+## Installation
+
+Use docker-compose
+```sh
+docker-compose -f docker-compose-kits.yml up
+```
+
+or to make sure updates will be included:
+
+```sh
+docker-compose -f docker-compose-kits.yml --force-recreate up
+```
+
+Important: Make sure to exchange passwords with proper ones!
+
+
+See main README for project specifics.

assets/js/app.js

@@ -1,7 +1,3 @@
-// This file will be generated by dart_sass - this is the compiled css file:
-// We include this here, so esbuild can handle e.g. copying fonts to the /priv/static/assets directory
-import "../scss/app.css";
-
 import { Modal } from "bootstrap"
 
 // webpack automatically bundles all modules in your
@@ -21,6 +17,7 @@ import {LiveSocket} from "phoenix_live_view"
 import QRCodeStyling from "qr-code-styling";
 import ClipboardJS from "clipboard"
 import {buildQrCodeOptions} from "./qrCodeUtils.js"
+import "./column_setup.js"
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 

assets/js/column_setup.js

@@ -0,0 +1,16 @@
+// configure link list - on iOS, the navigation bar is dynamic. when it's expanded,
+// the link list would be below the fold or very close to the edge.
+// to handle this, we adjust the size of the column to the inner height of the window
+const leftColumn = document.getElementById("left-column");
+
+function setLeftColumnHeight() {
+  leftColumn?.setAttribute(
+    "style",
+    `height: ${window.innerHeight} px !important`
+  );
+}
+// change the left column size whenever the window is resized
+window.addEventListener("resize", setLeftColumnHeight);
+
+// call initially:
+setLeftColumnHeight();

assets/package.json

@@ -14,4 +14,4 @@
     "qr-code-styling": "^1.6.0-rc.1"
   },
   "name": "assets"
-}
+}

assets/scss/_bootstrap_custom.scss

@@ -1,5 +1,10 @@
-// Required
-@import "../node_modules/bootstrap/scss/bootstrap";
+@import "kits/colors";
+@import "kits/fonts";
+@import "kits/button";
+@import "kits/gradient";
+@import "kits/form";
+@import "kits/list";
+@import "kits/utilities";
 
 .card-body-mindwendel-idea {
   @extend .card-body;
@@ -11,3 +16,6 @@
   padding: 0.5rem 0.5rem;
   background-color: inherit;
 }
+
+// Required
+@import "../node_modules/bootstrap/scss/bootstrap";

assets/scss/app.scss

@@ -2,7 +2,7 @@
 @import "../node_modules/nprogress/nprogress";
 @import "_bootstrap_custom.scss";
 
-$bootstrap-icons-font-dir: "../node_modules/bootstrap-icons/font/fonts/";
+$bootstrap-icons-font-dir: "/fonts/bootstrap-icons/";
 
 @import "../node_modules/bootstrap-icons/font/bootstrap-icons";
 @import "live/idea_live/_index_component.scss";
@@ -12,7 +12,7 @@ $bootstrap-icons-font-dir: "../node_modules/bootstrap-icons/font/fonts/";
 }
 
 .nav-mindwendel-logo {
-  height: 25px;
+  height: 35px;
 }
 
 // Taken from the examples shown:
@@ -63,4 +63,4 @@ a .bi {
 /* Alerts and form errors */
 .alert:empty {
   display: none;
-}
+}

assets/scss/kits.scss

@@ -0,0 +1,29 @@
+/* Import files: */
+@import "./kits/theme.scss";
+
+.alert {
+  padding: 15px;
+  margin-bottom: 20px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.alert p {
+  margin-bottom: 0;
+}
+
+.alert:empty {
+  display: none;
+}
+
+.bg-light {
+  background-color: var(--bs-gray-200) !important;
+}
+
+#mindmaps a {
+  color: var(--bs-gray-700);
+}
+
+#mindmaps a:hover {
+  color: var(--bs-primary-rgb) !important;
+}

assets/scss/kits/button.scss

@@ -0,0 +1,8 @@
+.btn-group > :not(.btn-check:first-child) + .btn,
+.btn-group > .btn-group:not(:first-child) {
+  margin-left: 0px !important;
+}
+
+.btn-secondary {
+  color: white !important;
+}

assets/scss/kits/colors.scss

@@ -0,0 +1,13 @@
+$primary: #00456f;
+$secondary: #00a3d3;
+$success: #50c878;
+$danger: #bb3535;
+$warning: #ffaa00;
+$info: #55ffff;
+
+// This scss var determines which text-color is used for which background.
+// Usually, acceptable values are `3`, `4.5` and `7`, see node_modules/bootstrap/scss/_variables.scss .
+// However, we need to adjust this variable for this kits theme
+// because we want to have a light text color when a background with secondary color.
+// This is a project-specific customization / requirement.
+$min-contrast-ratio: 2.9;

assets/scss/kits/fonts.scss

@@ -0,0 +1,22 @@
+@font-face {
+  font-family: FiraSans;
+  src: url("../fonts/FiraSans-Regular.otf") format("opentype");
+}
+
+@font-face {
+  font-family: FiraSans;
+  font-weight: light;
+  src: url("../fonts/FiraSans-Light.otf") format("opentype");
+}
+
+@font-face {
+  font-family: FiraSans;
+  font-weight: bold;
+  src: url("../fonts/FiraSans-Bold.otf") format("opentype");
+}
+
+// Set bootstrap font:
+$font-family-base: FiraSans;
+
+// Font Size - H6
+$h6-font-size: 12px;

assets/scss/kits/form.scss

@@ -0,0 +1 @@
+$input-btn-border-width: 1px;

assets/scss/kits/gradient.scss

@@ -0,0 +1 @@
+$gradient: linear-gradient(180deg, rgba(0, 69, 111, 1) 0%, rgba(0, 163, 211, 1) 100%);

assets/scss/kits/list.scss

@@ -0,0 +1,13 @@
+.list-group-item {
+  padding: 0px;
+  border-style: none !important;
+}
+
+.list-group {
+  border-radius: 0px !important;
+}
+
+.list-unstyled {
+  border-left: 3px solid #00a3d3;
+  padding-left: 7px;
+}

assets/scss/kits/theme.scss

@@ -0,0 +1,125 @@
+// Import customisations first, afterwards import bootstrap::after
+
+@import "colors";
+@import "fonts";
+@import "button";
+@import "gradient";
+@import "form";
+@import "list";
+@import "utilities";
+
+// Required
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+
+// disable dark mode:
+$enable-dark-mode: false;
+
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar"; // Requires nav
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal"; // Requires transitions
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/offcanvas"; // Requires transitions
+@import "bootstrap/scss/placeholders";
+@import "bootstrap/scss/helpers";
+@import "bootstrap/scss/utilities/api";
+
+//
+// Custom styles not related to bootstrap:
+//
+@include media-breakpoint-down(lg) {
+  // starting with LG size we only want one column:
+  .float-end {
+    width: 100% !important;
+    height: auto !important;
+    margin-bottom: 100px;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  #call-to-action-block {
+    margin-top: -90px;
+  }
+
+  #content {
+    margin-top: 0rem !important;
+  }
+}
+
+#content {
+  margin-top: 3rem;
+}
+
+#static-footer .row {
+  margin: 1rem;
+}
+
+@media screen and (max-height: 812px) {
+  #content {
+    margin-top: 1rem;
+  }
+
+  #static-footer .row {
+    margin: 0.5rem;
+  }
+
+  .form-text.text-muted {
+    font-size: 0.75em;
+  }
+}
+
+@media screen and (max-height: 568px) {
+  #content {
+    margin-top: 0rem;
+  }
+
+  #static-footer .row {
+    margin: 0.5rem;
+  }
+
+  .form-text.text-muted {
+    font-size: 0.65em;
+  }
+}
+
+@media screen and (max-width: 374px) {
+  // for very small display widhts we need to reduce the font size for the footer:
+  #static-footer {
+    font-size: 14px;
+  }
+}
+
+// we don't want the footer logo to grow too big, otherwise the footer becomes too high:
+#static-footer-logo {
+  max-width: 80px !important;
+  min-width: 40px;
+}

assets/scss/kits/utilities.scss

@@ -0,0 +1,17 @@
+// this adds an additional 90% percent width:
+$utilities: (
+  "width": (
+    property: width,
+    responsive: true,
+    class: w,
+    values: (
+      25: 25%,
+      50: 50%,
+      65: 65%,
+      75: 75%,
+      90: 90%,
+      100: 100%,
+      auto: auto,
+    ),
+  ),
+);

config/config.exs

@@ -39,16 +39,31 @@ config :phoenix, :json_library, Jason
 config :esbuild,
   version: "0.19.11",
   default: [
-    args:
-      ~w(js/app.js --bundle --target=es2016 --outdir=../priv/static/assets --external:/images/* --loader:.woff=file --loader:.woff2=file),
+    args: ~w(
+      js/app.js
+      --bundle
+      --target=es2016
+      --outdir=../priv/static/assets
+      --external:/images/*
+      --external:*.png
+      --external:*.ico
+      --external:*.svg
+      --external:*.webmanifest
+      --loader:.woff=file
+      --loader:.woff2=file
+    ),
     cd: Path.expand("../assets", __DIR__),
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]
 
 config :dart_sass,
   version: "1.69.7",
   default: [
-    args: ~w(scss/app.scss scss/app.css),
+    args: ~w(
+      scss/app.scss:../priv/static/assets/app.css
+      scss/kits.scss:../priv/static/assets/kits.css
+      --load-path=node_modules
+    ),
     cd: Path.expand("../assets", __DIR__)
   ]