From a83757a24292f072aa330a416063b4a061211faa Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@photoprism.app>
Date: Wed, 23 Feb 2022 14:07:25 +0100
Subject: [PATCH] Auth: Improve page footer on small screens #98 #782 #1990

---
 frontend/src/css/auth.css         |  2 --
 frontend/src/pages/auth/login.vue | 20 +++++++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/src/css/auth.css b/frontend/src/css/auth.css
index 46822aaf7..ce335f685 100644
--- a/frontend/src/css/auth.css
+++ b/frontend/src/css/auth.css
@@ -20,7 +20,6 @@
     height: 100%;
 }
 
-
 #photoprism main .auth-login .auth-login-form .v-card
 {
     background: transparent !important;
@@ -39,7 +38,6 @@
 #photoprism main .auth-login footer {
     position: absolute;
     bottom: 16px;
-    text-align: left;
     left: 16px;
     right: 16px;
     padding: 0;
diff --git a/frontend/src/pages/auth/login.vue b/frontend/src/pages/auth/login.vue
index 682f25e0a..8438e11e7 100644
--- a/frontend/src/pages/auth/login.vue
+++ b/frontend/src/pages/auth/login.vue
@@ -1,6 +1,6 @@
 <template>
-  <v-container fluid fill-height class="auth-login wallpaper">
-    <v-layout align-center justify-center>
+  <v-container fluid fill-height class="auth-login wallpaper pa-0">
+    <v-layout align-center justify-center pa-3>
       <v-flex xs12 sm8 md4>
         <v-form ref="form" dense autocomplete="off" class="auth-login-form" accept-charset="UTF-8"
                 @submit.prevent="login">
@@ -54,13 +54,15 @@
       </v-flex>
     </v-layout>
     <footer>
-      <p class="auth-site float-left white--text body-2">
-        <strong class="white--text">{{ config.siteTitle }}</strong> – {{ config.siteCaption }}
-      </p>
-      <p v-if="config.imprint" class="auth-imprint float-right white--text body-2">
-        <a v-if="config.imprintUrl" :href="config.imprintUrl" target="_blank" class="text-link">{{ config.imprint }}</a>
-        <span v-else>{{ config.imprint }}</span>
-      </p>
+      <v-layout wrap align-top pa-0 ma-0>
+        <v-flex xs12 class="pa-0 body-2 text-selectable text-xs-center white--text" :class="[config.imprint ? 'text-sm-left sm6' : '']">
+          <strong>{{ config.siteTitle }}</strong> – {{ config.siteCaption }}
+        </v-flex>
+        <v-flex v-if="config.imprint" xs12 sm6 class="pa-0 body-2 text-xs-center text-sm-right white--text">
+          <a v-if="config.imprintUrl" :href="config.imprintUrl" target="_blank" class="text-link">{{ config.imprint }}</a>
+          <span v-else>{{ config.imprint }}</span>
+        </v-flex>
+      </v-layout>
     </footer>
   </v-container>
 </template>