wip

.github/workflows/deploy-docker-to-ont.yml

@@ -110,7 +110,7 @@ jobs:
           -H 'Content-Type: application/json' \
           -d '{
                 "channel_id": "wgcfotx7x3bipcwchzn45tuxxr",
-                "message": "@veenm ✅ *Build is geslaagd!* Versie '"$VERSION"'-SNAPSHOT staat klaar op ontwikkel."
+                "message": "✅ *Build is geslaagd!* Versie '"$VERSION"'-SNAPSHOT staat klaar op ontwikkel."
               }' \
           https://mattermost.melvanveen.nl/api/v4/posts
 

.github/workflows/deploy-docker.yml

@@ -4,8 +4,6 @@ on:
   push:
     branches:
       - main
-    tags:
-      - "docker-build-*"
 
 jobs:
   build-and-push:

src/app/pages/login/login.component.scss

@@ -1,53 +1,109 @@
+/* Algemene layout */
+.container {
+  max-width: 100%;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: repeating-conic-gradient(
+      from 30deg,
+      #0000 0 120deg,
+      #3c3c3c 0 180deg
+  ) calc(0.5 * 200px) calc(0.5 * 200px * 0.577),
+  repeating-conic-gradient(
+      from 30deg,
+      #1d1d1d 0 60deg,
+      #4e4f51 0 120deg,
+      #3c3c3c 0 180deg
+  );
+  background-size: 200px calc(200px * 0.577);
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+/* Centraal form container */
 .center-container {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100vh;
-  /* Adjust as needed */
+  width: 100%;
+  max-width: 100%;
 }
 
-tui-error {
+/* Het formulier zelf */
+form[tuiForm] {
+  background: white;
+  border-radius: 24px;
+  padding: 2rem;
+  max-width: 32rem; /* 512px */
+  width: 100%;
+  box-sizing: border-box;
   text-align: center;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
 }
 
+/* Logo */
+.header {
+  display: block;
+  margin: 0 auto 1.75rem auto;
+  max-width: 100%;
+  width: 200px;
+  height: auto;
+}
+
+/* Invoervelden */
+tui-textfield {
+  display: block;
+  margin-bottom: 1rem;
+  text-align: left;
+}
+
+/* Foutmelding */
+tui-error {
+  display: block;
+  margin-top: 0.5rem;
+  color: #ff3b30;
+  font-size: 0.9rem;
+}
+
+/* Inlogknop */
+button.custom-button {
+  background-color: #222222 !important;
+  color: white !important;
+  width: 100%;
+  padding: 0.75rem;
+  font-size: 1rem;
+  border-radius: 12px;
+  margin-top: 1rem;
+}
+
+/* Versie info */
 p {
   text-align: center;
+  font-size: 0.9rem;
+  color: #333;
+  margin-top: 1.25rem;
+}
+
+/* Responsiveness */
+@media (max-width: 600px) {
+  form[tuiForm] {
+    padding: 1.5rem 1rem;
+    max-width: 100%;
   }
 
   .header {
-  text-align: center;
-  margin-bottom: 28px;
-  max-width: 300px;
-  max-height: 300px;
+    width: 150px;
+    margin-bottom: 1.25rem;
   }
 
-::ng-deep button.custom-button {
-  background-color: #222222 !important;
-  /* Pas kleur aan */
-  color: white !important;
-  /* Tekstkleur aanpassen */
-  width: 300px;
+  button.custom-button {
+    font-size: 0.95rem;
   }
 
   .container {
-  max-width: 100%;
-  width: 100%;
-  height: 100%;
-  --s: 200px; /* control the size */
-  --c1: #1d1d1d;
-  --c2: #4e4f51;
-  --c3: #3c3c3c;
-
-  background: repeating-conic-gradient(
-      from 30deg,
-      #0000 0 120deg,
-      var(--c3) 0 180deg
-  ) calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577),
-  repeating-conic-gradient(
-      from 30deg,
-      var(--c1) 0 60deg,
-      var(--c2) 0 120deg,
-      var(--c3) 0 180deg
-  );
-  background-size: var(--s) calc(var(--s) * 0.577);
+    background-size: 150px calc(150px * 0.577);
+    opacity: 0.9; /* minder druk op mobiel */
+  }
 }

src/styles.scss

@@ -1,8 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 .container {
   max-width: 70vw;
-  margin: 0 auto;
-  padding: 20px;
+  //margin: 0 auto;
 }
 
 .heading {
@@ -16,3 +15,6 @@
   overflow-y: scroll;
   max-height: 70vh;
 }
+
+html, body{
+}