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,10 +4,8 @@ on:
   push:
     branches:
       - main
-    tags:
-      - "docker-build-*"
 
-jobs:        
+jobs:
   build-and-push:
     runs-on: ubuntu-latest
 

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 */
-}
-
-tui-error {
-  text-align: center;
-}
-
-p{
-  text-align: center;
-}
-
-.header {
-  text-align: center;
-  margin-bottom: 28px;
-  max-width: 300px;
-  max-height: 300px;
-}
-
-::ng-deep button.custom-button {
-  background-color: #222222 !important;
-  /* Pas kleur aan */
-  color: white !important;
-  /* Tekstkleur aanpassen */
-  width: 300px;
-}
-
-.container {
-  max-width: 100%;
   width: 100%;
-  height: 100%;
+  max-width: 100%;
-  --s: 200px; /* control the size */
+}
-  --c1: #1d1d1d;
+
-  --c2: #4e4f51;
+/* Het formulier zelf */
-  --c3: #3c3c3c;
+form[tuiForm] {
-
+  background: white;
-  background: repeating-conic-gradient(
+  border-radius: 24px;
-      from 30deg,
+  padding: 2rem;
-      #0000 0 120deg,
+  max-width: 32rem; /* 512px */
-      var(--c3) 0 180deg
+  width: 100%;
-  ) calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577),
+  box-sizing: border-box;
-  repeating-conic-gradient(
+  text-align: center;
-      from 30deg,
+  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
-      var(--c1) 0 60deg,
+}
-      var(--c2) 0 120deg,
+
-      var(--c3) 0 180deg
+/* Logo */
-  );
+.header {
-  background-size: var(--s) calc(var(--s) * 0.577);
+  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 {
+    width: 150px;
+    margin-bottom: 1.25rem;
+  }
+
+  button.custom-button {
+    font-size: 0.95rem;
+  }
+
+  .container {
+    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;
+  //margin: 0 auto;
-  padding: 20px;
 }
 
 .heading {
@@ -16,3 +15,6 @@
   overflow-y: scroll;
   max-height: 70vh;
 }
+
+html, body{
+}