adjusted input-box to be more flexible to use, see #120

Author: tobihagemann

assets/css/custom.css

@@ -118,7 +118,7 @@
 }
 
 .input-box {
-  @apply rounded-sm border-gray-300 focus:ring-0 focus:border-secondary w-full;
+  @apply rounded-sm border-gray-300 focus:ring-0 focus:border-secondary;
 }
 
 .StripeElement {

layouts/android/single.html

@@ -32,7 +32,7 @@ <h3 id="keyrecovery" class="font-headline text-xl md:text-2xl leading-relaxed mb
     <form x-show="!data.success" x-ref="form" class="max-w-xl mx-auto">
       <p class="font-p mb-4">{{ i18n "android_keyrecovery_instruction" . }}</p>
       <div class="flex justify-center items-center rounded-sm bg-gray-300">
-        <input x-model="data.email" x-ref="email" @blur="$refs.email.classList.add('show-invalid')" type="email" class="grow rounded-l border-gray-300 focus:ring-0 focus:border-secondary" placeholder="{{ i18n "android_keyrecovery_email_placeholder" }}" required/>
+        <input x-model="data.email" x-ref="email" @blur="$refs.email.classList.add('show-invalid')" type="email" class="grow input-box rounded-r-none focus:border-secondary" placeholder="{{ i18n "android_keyrecovery_email_placeholder" }}" required/>
         <button :disabled="data.inProgress" @click.prevent="new KeyRecovery($refs.form, data).getUserHistory()" type="submit" class="shrink-0 flex items-center gap-1 btn btn-primary rounded-l-none px-4 plausible-event-name=android-keyrecovery-form">
           <i :class="{'fa-envelope': !data.inProgress, 'fa-spinner fa-spin': data.inProgress}" class="fas fa-fw" aria-hidden="true"></i> {{ i18n "android_keyrecovery_retrieve" }}
         </button>

layouts/donate/list.html

@@ -47,7 +47,7 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4">{{ i18n "dona
     <form x-show="!feedbackData.success" x-ref="form" class="max-w-xl mx-auto">
       <p class="font-p mb-4">{{ i18n "donate_customer_portal_instruction" . }}</p>
       <div class="flex justify-center items-center rounded-sm bg-gray-300">
-        <input x-model="submitData.email" x-ref="email" @blur="$refs.email.classList.add('show-invalid')" type="email" class="grow rounded-l border-gray-300 focus:ring-0 focus:border-secondary" placeholder="{{ i18n "donate_customer_portal_email_placeholder" }}" required/>
+        <input x-model="submitData.email" x-ref="email" @blur="$refs.email.classList.add('show-invalid')" type="email" class="grow input-box rounded-r-none focus:border-secondary" placeholder="{{ i18n "donate_customer_portal_email_placeholder" }}" required/>
         <button :disabled="feedbackData.inProgress" @click.prevent="customerPortal.request()" type="submit" class="shrink-0 flex items-center gap-1 btn btn-primary rounded-l-none px-4 plausible-event-name=donate-customer-portal-form">
           <i :class="{'fa-envelope': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fas fa-fw" aria-hidden="true"></i> {{ i18n "donate_customer_portal_retrieve" }}
         </button>

layouts/hub-billing/single.html

@@ -169,7 +169,7 @@ <h2 class="font-h2 mb-4 mt-12">
           <p class="font-p mb-4">
             {{ i18n "hub_billing_manage_license_key_instruction" . }}
           </p>
-          <textarea x-model="subscriptionData.token" class="input-box text-sm md:text-base leading-relaxed break-all" rows="6" readonly></textarea>
+          <textarea x-model="subscriptionData.token" class="input-box w-full text-sm md:text-base leading-relaxed break-all" rows="6" readonly></textarea>
           <button :disabled="subscriptionData.inProgress || !subscriptionData.token" class="btn btn-primary text-center w-full md:w-64 mt-4" @click.prevent="hubSubscription.transferTokenToHub()">
             {{ i18n "hub_billing_manage_license_key_transfer_action" . }}
           </button>
@@ -238,7 +238,7 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4" id="change-se
                           <p class="font-p mb-4">
                             {{ i18n "hub_billing_manage_change_quantity_description" . }}
                           </p>
-                          <input x-model="subscriptionData.quantity" x-ref="quantity" :min="subscriptionData.customBilling?.quantity_min || 1" :max="subscriptionData.customBilling?.quantity_max || 10000" :placeholder="`min. ${$el.min}`" @blur="$refs.quantity.classList.add('show-invalid')" type="number" step="1" class="input-box mb-2" required/>
+                          <input x-model="subscriptionData.quantity" x-ref="quantity" :min="subscriptionData.customBilling?.quantity_min || 1" :max="subscriptionData.customBilling?.quantity_max || 10000" :placeholder="`min. ${$el.min}`" @blur="$refs.quantity.classList.add('show-invalid')" type="number" step="1" class="input-box w-full mb-2" required/>
                           <p class="text-xs text-gray-600 mb-4">
                             {{ i18n "hub_billing_manage_change_quantity_amount_description" . }}
                           </p>
@@ -344,7 +344,7 @@ <h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide
                     <label class="label-uppercase mb-2">
                       {{ i18n "hub_billing_checkout_standard_hubid" . }}
                     </label>
-                    <input x-model="subscriptionData.hubId" type="text" class="input-box mb-2" readonly/>
+                    <input x-model="subscriptionData.hubId" type="text" class="input-box w-full mb-2" readonly/>
                     <p class="text-xs text-gray-600">
                       {{ i18n "hub_billing_checkout_standard_hubid_description" . }}
                     </p>
@@ -353,7 +353,7 @@ <h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide
                     <label class="label-uppercase mb-2">
                       {{ i18n "hub_billing_checkout_standard_quantity" . }}
                     </label>
-                    <input x-model="subscriptionData.quantity" x-ref="quantity" :min="subscriptionData.customBilling?.quantity_min || 1" :max="subscriptionData.customBilling?.quantity_max || 10000" :placeholder="`min. ${$el.min}`" @blur="$refs.quantity.classList.add('show-invalid')" type="number" step="1" class="input-box mb-2" required/>
+                    <input x-model="subscriptionData.quantity" x-ref="quantity" :min="subscriptionData.customBilling?.quantity_min || 1" :max="subscriptionData.customBilling?.quantity_max || 10000" :placeholder="`min. ${$el.min}`" @blur="$refs.quantity.classList.add('show-invalid')" type="number" step="1" class="input-box w-full mb-2" required/>
                     <p class="text-xs text-gray-600">
                       {{ i18n "hub_billing_checkout_standard_quantity_description" . }}
                     </p>
@@ -363,7 +363,7 @@ <h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide
                   <label class="label-uppercase mb-2">
                     {{ i18n "hub_billing_checkout_standard_email" . }}
                   </label>
-                  <input x-model="subscriptionData.email" x-ref="email" @blur="$refs.email.classList.add('show-invalid')" type="email" class="input-box" placeholder="{{ i18n "hub_billing_checkout_standard_email_placeholder" . }}" required/>
+                  <input x-model="subscriptionData.email" x-ref="email" @blur="$refs.email.classList.add('show-invalid')" type="email" class="input-box w-full" placeholder="{{ i18n "hub_billing_checkout_standard_email_placeholder" . }}" required/>
                 </div>
                 <div class="text-center mt-8">
                   <p class="font-p mb-4">

layouts/hub-demo/single.html

@@ -22,7 +22,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
               <label for="email" class="block text-sm font-medium text-gray-700">
                 {{ i18n "hub_demo_info_email" }}
               </label>
-              <input type="email" id="email" class="mt-1 block input-box" x-model="submitData.email" @blur="$el.classList.add('show-invalid')" required>
+              <input type="email" id="email" class="mt-1 block input-box w-full" x-model="submitData.email" @blur="$el.classList.add('show-invalid')" required>
               <p class="mt-2 text-sm text-gray-500">
                 {{ i18n "hub_demo_info_email_description" }}
               </p>

layouts/hub-managed/single.html

@@ -24,7 +24,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
               </label>
               <div class="mt-1 flex items-center rounded-sm bg-gray-300">
                 <div class="text-gray-700 px-3">https://</div>
-                <input type="text" id="subdomain" pattern="[a-z\d](?:[a-z\d-]{0,61}[a-z\d])?" class="block w-full rounded-none border-gray-300 focus:ring-0 focus:border-secondary" maxlength="63" x-model="submitData.subdomain" @blur="$el.classList.add('show-invalid')" required>
+                <input type="text" id="subdomain" pattern="[a-z\d](?:[a-z\d-]{0,61}[a-z\d])?" class="block input-box rounded-none w-full" maxlength="63" x-model="submitData.subdomain" @blur="$el.classList.add('show-invalid')" required>
                 <div class="text-gray-700 px-3">.cryptomator.cloud</div>
               </div>
               <p class="mt-2 text-sm text-gray-500">
@@ -36,7 +36,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
               <label for="email" class="block text-sm font-medium text-gray-700">
                 {{ i18n "hub_managed_info_email" }}
               </label>
-              <input type="email" id="email" class="mt-1 block input-box" x-model="submitData.email" @blur="$el.classList.add('show-invalid')" required>
+              <input type="email" id="email" class="mt-1 block input-box w-full" x-model="submitData.email" @blur="$el.classList.add('show-invalid')" required>
               <p class="mt-2 text-sm text-gray-500">
                 {{ i18n "hub_managed_info_email_description" }}
               </p>
@@ -46,7 +46,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
               <label for="quantity" class="block text-sm font-medium text-gray-700">
                 {{ i18n "hub_managed_info_quantity" }}
               </label>
-              <input type="number" id="quantity" min="1" max="10000" step="1" class="mt-1 block input-box" x-model="submitData.quantity" @blur="$el.classList.add('show-invalid')" required>
+              <input type="number" id="quantity" min="1" max="10000" step="1" class="mt-1 block input-box w-full" x-model="submitData.quantity" @blur="$el.classList.add('show-invalid')" required>
               <p class="mt-2 text-sm text-gray-500">
                 {{ i18n "hub_managed_info_quantity_description" }}
               </p>

layouts/hub-self-hosted/single.html

@@ -42,7 +42,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
           <label for="k8sNamespace" class="block text-sm font-medium text-gray-700">
             Namespace
           </label>
-          <input type="text" id="k8sNamespace" class="mt-1 block input-box" x-model="cfg.k8s.namespace">
+          <input type="text" id="k8sNamespace" class="mt-1 block input-box w-full" x-model="cfg.k8s.namespace">
           <p class="mt-2 text-sm text-gray-500">
             {{ i18n "hub_setup_deployment_kubernetes_namespace_description" . }}
           </p>
@@ -83,7 +83,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
           <label for="composePublicNetwork" class="block text-sm font-medium text-gray-700">
             Public Network
           </label>
-          <input type="text" id="composePublicNetwork" class="mt-1 block input-box" x-model="cfg.compose.publicNetwork">
+          <input type="text" id="composePublicNetwork" class="mt-1 block input-box w-full" x-model="cfg.compose.publicNetwork">
           <p class="mt-2 text-sm text-gray-500">
             {{ i18n "hub_setup_deployment_compose_traefik_public_network_description" . }}
           </p>
@@ -112,7 +112,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
         <div class="mt-5 md:mt-0 md:col-span-2 grid grid-cols-6 gap-6">
           <div class="col-span-6 lg:col-span-3">
             <label for="hubVersion" class="block text-sm font-medium text-gray-700">Version</label>
-            <select id="hubVersion" class="mt-1 block input-box" x-model="cfg.hub.version">
+            <select id="hubVersion" class="mt-1 block input-box w-full" x-model="cfg.hub.version">
               <option>stable</option>
               <option>beta</option>
             </select>
@@ -125,7 +125,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
             <label for="hubPublicUrl" class="block text-sm font-medium text-gray-700">
               {{ i18n "hub_setup_hub_public_url" . }}
             </label>
-            <input type="url" id="hubPublicUrl" class="mt-1 block input-box" x-model="cfg.hub.publicUrl" :readonly="deploymentType == 'compose-test'">
+            <input type="url" id="hubPublicUrl" class="mt-1 block input-box w-full" x-model="cfg.hub.publicUrl" :readonly="deploymentType == 'compose-test'">
             <p class="mt-2 text-sm text-gray-500">
               {{ i18n "hub_setup_hub_public_url_description" . }}
             </p>
@@ -135,7 +135,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
             <label for="hubAdminUser" class="block text-sm font-medium text-gray-700">
               {{ i18n "hub_setup_hub_admin_user" . }}
             </label>
-            <input type="text" id="hubAdminUser" class="mt-1 block input-box" x-model="cfg.hub.adminUser">
+            <input type="text" id="hubAdminUser" class="mt-1 block input-box w-full" x-model="cfg.hub.adminUser">
             <p class="mt-2 text-sm text-gray-500">
               {{ i18n "hub_setup_hub_admin_user_description" . }}
             </p>
@@ -145,7 +145,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
             <label for="hubAdminPw" class="block text-sm font-medium text-gray-700">
               {{ i18n "hub_setup_hub_admin_pw" . }}
             </label>
-            <input type="password" id="hubAdminPw" class="mt-1 block input-box" x-model="cfg.hub.adminPw">
+            <input type="password" id="hubAdminPw" class="mt-1 block input-box w-full" x-model="cfg.hub.adminPw">
             <p class="mt-2 text-sm text-gray-500">
               {{ i18n "hub_setup_hub_admin_pw_description" . }}
             </p>
@@ -184,7 +184,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
             <label for="keycloakPublicUrl" class="block text-sm font-medium text-gray-700">
               {{ i18n "hub_setup_keycloak_public_url" . }}
             </label>
-            <input type="url" id="keycloakPublicUrl" class="mt-1 block input-box" x-model="cfg.keycloak.publicUrl" :readonly="deploymentType == 'compose-test'">
+            <input type="url" id="keycloakPublicUrl" class="mt-1 block input-box w-full" x-model="cfg.keycloak.publicUrl" :readonly="deploymentType == 'compose-test'">
             <p class="mt-2 text-sm text-gray-500" x-show="cfg.keycloak.useExternal">
               {{ i18n "hub_setup_keycloak_public_url_external_description" . }}
             </p>
@@ -197,7 +197,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
             <label for="keycloakRealmId" class="block text-sm font-medium text-gray-700">
               {{ i18n "hub_setup_keycloak_realm_id" . }}
             </label>
-            <input type="text" id="keycloakRealmId" pattern="[A-Za-z0-9_-]+" class="mt-1 block input-box" x-model="cfg.keycloak.realmId">
+            <input type="text" id="keycloakRealmId" pattern="[A-Za-z0-9_-]+" class="mt-1 block input-box w-full" x-model="cfg.keycloak.realmId">
             <p class="mt-2 text-sm text-gray-500">
               {{ i18n "hub_setup_keycloak_realm_id_description" . }}
             </p>
@@ -207,7 +207,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
             <label for="keycloakAdminUser" class="block text-sm font-medium text-gray-700">
               {{ i18n "hub_setup_keycloak_admin_user" . }}
             </label>
-            <input type="text" id="keycloakAdminUser" class="mt-1 block input-box" x-model="cfg.keycloak.adminUser">
+            <input type="text" id="keycloakAdminUser" class="mt-1 block input-box w-full" x-model="cfg.keycloak.adminUser">
             <p class="mt-2 text-sm text-gray-500">
               {{ i18n "hub_setup_keycloak_admin_user_description" . }}
             </p>
@@ -217,7 +217,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
             <label for="keycloakAdminPw" class="block text-sm font-medium text-gray-700">
               {{ i18n "hub_setup_keycloak_admin_pw" . }}
             </label>
-            <input type="password" id="keycloakAdminPw" class="mt-1 block input-box" x-model="cfg.keycloak.adminPw">
+            <input type="password" id="keycloakAdminPw" class="mt-1 block input-box w-full" x-model="cfg.keycloak.adminPw">
             <p class="mt-2 text-sm text-gray-500">
               {{ i18n "hub_setup_keycloak_admin_pw_description" . }}
             </p>
@@ -240,7 +240,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
             <label for="dbAdminPw" class="block text-sm font-medium text-gray-700">
               {{ i18n "hub_setup_database_admin_pw" . }}
             </label>
-            <input type="password" id="dbAdminPw" class="mt-1 block input-box" x-model="cfg.db.adminPw">
+            <input type="password" id="dbAdminPw" class="mt-1 block input-box w-full" x-model="cfg.db.adminPw">
             <p class="mt-2 text-sm text-gray-500">
               {{ i18n "hub_setup_database_admin_pw_description" . }}
             </p>
@@ -250,7 +250,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
             <label for="dbHubPw" class="block text-sm font-medium text-gray-700">
               {{ i18n "hub_setup_database_hub_pw" . }}
             </label>
-            <input type="password" id="dbHubPw" class="mt-1 block input-box" x-model="cfg.db.hubPw">
+            <input type="password" id="dbHubPw" class="mt-1 block input-box w-full" x-model="cfg.db.hubPw">
             <p class="mt-2 text-sm text-gray-500">
               {{ i18n "hub_setup_database_hub_pw_description" . }}
             </p>
@@ -260,7 +260,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
             <label for="dbKeycloakPw" class="block text-sm font-medium text-gray-700">
               {{ i18n "hub_setup_database_keycloak_pw" . }}
             </label>
-            <input type="password" id="dbKeycloakPw" class="mt-1 block input-box" x-model="cfg.db.keycloakPw">
+            <input type="password" id="dbKeycloakPw" class="mt-1 block input-box w-full" x-model="cfg.db.keycloakPw">
             <p class="mt-2 text-sm text-gray-500">
               {{ i18n "hub_setup_database_keycloak_pw_description" . }}
             </p>
@@ -288,15 +288,15 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
         <div class="mt-5 md:mt-0 md:col-span-2 grid grid-cols-6 gap-6">
           <div class="col-span-6" x-show="deploymentType == 'kubernetes'">
             <label for="k8sOutput" class="block text-sm font-medium text-gray-700">k8s-hub.yml</label>
-            <textarea id="k8sOutput" rows="10" class="mt-1 block input-box" x-model="output.k8s" readonly></textarea>
+            <textarea id="k8sOutput" rows="10" class="mt-1 block input-box w-full" x-model="output.k8s" readonly></textarea>
           </div>
           <div class="col-span-6" x-show="deploymentType == 'compose-prod' || deploymentType == 'compose-test'">
             <label for="composeOutput" class="block text-sm font-medium text-gray-700">docker-compose.yml</label>
-            <textarea id="composeOutput" rows="10" class="mt-1 block input-box" x-model="output.compose" readonly></textarea>
+            <textarea id="composeOutput" rows="10" class="mt-1 block input-box w-full" x-model="output.compose" readonly></textarea>
           </div>
           <div class="col-span-6" x-show="cfg.keycloak.useExternal">
             <label for="realmOutput" class="block text-sm font-medium text-gray-700">realm.json</label>
-            <textarea id="realmOutput" rows="10" class="mt-1 block input-box" x-model="output.realm" readonly></textarea>
+            <textarea id="realmOutput" rows="10" class="mt-1 block input-box w-full" x-model="output.realm" readonly></textarea>
           </div>
           <div class="col-span-6" x-show="deploymentType == 'kubernetes' || deploymentType == 'compose-prod'">
             <p class="font-p mb-4">{{ i18n "hub_setup_output_hint" . | safeHTML }}</p>