Show more of terms on larger screen without chopping to 1x1, add scro…

…ll indicator.
dannon · Sep 6, 2023 · 0666270 · 0666270
1 parent 94f8a5c
commit 0666270
Showing 1 changed file with 25 additions and 2 deletions.
diff --git a/client/src/components/Login/RegisterForm.vue b/client/src/components/Login/RegisterForm.vue
@@ -93,8 +93,9 @@
                     </b-card>
                 </b-form>
             </div>
-            <div v-if="termsUrl" class="col">
-                <b-embed type="iframe" :src="termsUrl" aspect="1by1" />
+            <div v-if="termsUrl" class="col position-relative embed-container">
+                <iframe title="terms-of-use" :src="termsUrl" frameborder="0" class="terms-iframe"></iframe>
+                <b-subtitle v-localize class="scroll-hint">↓ Scroll to review ↓</b-subtitle>
             </div>
         </div>
     </div>
@@ -204,3 +205,25 @@ export default {
     },
 };
 </script>
+<style scoped>
+.embed-container {
+    position: relative;
+}
+
+.scroll-hint {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(255, 255, 255, 0.9);
+    padding: 2px 5px;
+    border-radius: 4px;
+}
+
+.terms-iframe {
+    width: 100%;
+    height: 90vh;
+    border: none;
+    overflow-y: auto;
+}
+</style>