diff --git a/docs/css/custom.css b/docs/css/custom.css index a004e6f..db10252 100644 --- a/docs/css/custom.css +++ b/docs/css/custom.css @@ -1085,10 +1085,12 @@ /* ── Auth pages (login / signup) ───────────────────────────────────────── */ .auth-page__services { - margin-top: 25px; - margin-bottom: -25px; + margin-top: 0; + margin-bottom: 0.75rem; font-size: 0.78rem; line-height: 1.45; + color: var(--foreground-color); + display: block; } .services-group__title { @@ -1114,12 +1116,12 @@ background: var(--background-color); } -/* Message banner — fixed height always reserved so the form never shifts */ +/* Message banner — always in flow; min-height reserves space so the form never shifts */ .auth-message { border-radius: 4px; font-size: 0.82rem; - line-height: 1.3; - height: 1.8rem; + line-height: 1.4; + min-height: 1.8rem; margin-bottom: 0.75rem; box-sizing: border-box; border: 1px solid transparent; @@ -1127,10 +1129,7 @@ opacity: 0; pointer-events: none; transition: opacity 0.15s ease; - overflow: hidden; - display: flex; - align-items: center; - padding: 0 0.7rem; + padding: 0.25rem 0.7rem; } .auth-message.is-visible { @@ -1138,6 +1137,12 @@ pointer-events: auto; } +.auth-message--info { + background: transparent; + border-color: transparent; + color: var(--foreground-color); +} + .auth-message--error { background: rgba(255, 61, 61, 0.1); border: 1px solid rgba(255, 61, 61, 0.4); diff --git a/docs/signup/index.html b/docs/signup/index.html index e3e8908..abe5b37 100644 --- a/docs/signup/index.html +++ b/docs/signup/index.html @@ -5,7 +5,7 @@ Sign Up
-

Sign Up

(By signing up, you will get access to the following services: Email, XMPP)

+

Sign Up

Signing up is giving you access to the following services: Email, XMPP
(3-32 characters; letters, numbers, _ and - only)
@@ -24,4 +24,4 @@ -

\ No newline at end of file +

\ No newline at end of file diff --git a/layouts/signup/single.html b/layouts/signup/single.html index 076486f..6037a0c 100644 --- a/layouts/signup/single.html +++ b/layouts/signup/single.html @@ -2,17 +2,23 @@

{{ .Title }}

- {{ with site.GetPage "/services" }} {{ $registrationServices := slice }} {{ range - .Pages.ByWeight }} {{ if index .Params "registration-needed" }} {{ $registrationServices = - $registrationServices | append . }} {{ end }} {{ end }} {{ with $registrationServices }} -

- (By signing up, you will get access to the following services: {{ range $index, $service - := . }}{{ if $index }}, {{ end }}{{ $service.LinkTitle }}{{ end }}) -

- {{ end }} {{ end }} + {{- with site.GetPage "/services" -}} {{- $registrationServices := slice -}} {{- range + .Pages.ByWeight -}} {{- if index .Params "registration-needed" -}} {{- $registrationServices + = $registrationServices | append . -}} {{- end -}} {{- end -}} {{- with + $registrationServices -}} {{- $serviceLinks := slice -}} {{- range . -}} {{- $serviceLinks = + $serviceLinks | append (printf `%s` .RelPermalink .LinkTitle) -}} {{- end + -}} +
+ Signing up is giving you access to the following services: {{ delimit $serviceLinks ", " + | safeHTML }} +
+ {{- end -}} {{- if not $registrationServices -}}
+ {{- end -}} {{- end -}} @@ -228,12 +234,21 @@ var pwdInput = document.getElementById('signup-password'); var eyeBtn = signupForm.querySelector('.auth-form__eye'); + // Snapshot the server-rendered services notice so we can restore it after errors + var _servicesHTML = msgBox.innerHTML; + var _servicesClass = msgBox.className; + + // Pin the box height to whatever the services text renders at, so switching + // to a one-line error message never shrinks the box and causes layout shift. + msgBox.style.minHeight = msgBox.offsetHeight + 'px'; + function showMsg(text, type) { msgBox.textContent = text; msgBox.className = 'auth-message auth-message--' + type + ' is-visible'; } function hideMsg() { - msgBox.className = 'auth-message'; + msgBox.innerHTML = _servicesHTML; + msgBox.className = _servicesClass; } function setLoading(btn, on) { diff --git a/static/css/custom.css b/static/css/custom.css index a004e6f..db10252 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -1085,10 +1085,12 @@ /* ── Auth pages (login / signup) ───────────────────────────────────────── */ .auth-page__services { - margin-top: 25px; - margin-bottom: -25px; + margin-top: 0; + margin-bottom: 0.75rem; font-size: 0.78rem; line-height: 1.45; + color: var(--foreground-color); + display: block; } .services-group__title { @@ -1114,12 +1116,12 @@ background: var(--background-color); } -/* Message banner — fixed height always reserved so the form never shifts */ +/* Message banner — always in flow; min-height reserves space so the form never shifts */ .auth-message { border-radius: 4px; font-size: 0.82rem; - line-height: 1.3; - height: 1.8rem; + line-height: 1.4; + min-height: 1.8rem; margin-bottom: 0.75rem; box-sizing: border-box; border: 1px solid transparent; @@ -1127,10 +1129,7 @@ opacity: 0; pointer-events: none; transition: opacity 0.15s ease; - overflow: hidden; - display: flex; - align-items: center; - padding: 0 0.7rem; + padding: 0.25rem 0.7rem; } .auth-message.is-visible { @@ -1138,6 +1137,12 @@ pointer-events: auto; } +.auth-message--info { + background: transparent; + border-color: transparent; + color: var(--foreground-color); +} + .auth-message--error { background: rgba(255, 61, 61, 0.1); border: 1px solid rgba(255, 61, 61, 0.4);