make ui more responsive

european-epc-competence-center · Dec 12, 2022 · 275acb7 · 275acb7
1 parent 8b27d7e
commit 275acb7
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 5 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -32,6 +32,6 @@
     <noscript>
       <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-      <div id="app" class="container h-100"></div>
+      <div id="app" class="container-md h-100 p-0"></div>
   </body>
 </html>
diff --git a/frontend/src/layouts/DefaultLayout.vue b/frontend/src/layouts/DefaultLayout.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="d-flex justify-content-center h-100 m-1">
+    <div class="d-flex justify-content-center h-100 m-md-1">
       <router-view />
-      <div class="versiontag text-light m-1">Version {{this.$store.state.version}}</div>
+      <div class="versiontag text-muted m-1">Version {{this.$store.state.version}}</div>
     </div>
 </template>
 <script>

diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss
@@ -11,6 +11,18 @@ body {
 
 html, body {margin: 0; height: 100%; overflow: hidden}
 
+#maincard {
+    min-width: 80%; 
+    height: 90vh;
+
+    @media (max-width: 768px) {
+        border-radius: 0;
+        height: 100%;
+        width: 100%;
+    }
+
+}
+
 .versiontag {
     position: absolute;
     bottom: 0;

diff --git a/frontend/src/views/Entry.vue b/frontend/src/views/Entry.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="card m-auto shadow" style="min-width: 80%">
+    <div id="maincard" class="card m-md-auto shadow">
         <div class="card-header text-center p-3 pb-1">
             <h3 class="mb-0 mx-5">Credential Selector</h3>
             <a href="https://github.com/european-epc-competence-center/vc-verifier"><i class="bi-github mx-3" role="img" aria-label="GitHub"></i></a>

diff --git a/frontend/src/views/Verify.vue b/frontend/src/views/Verify.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="card m-auto shadow" style="min-width: 80%; height: 90vh;">
+    <div id="maincard" class="card m-md-auto shadow">
         <div class="card-header text-center p-3 pb-1">
             <router-link to="/"><i id="backbutton" style="font-size: 2rem;" class="bi-arrow-left-square-fill mx-3 my-1" role="img" aria-label="API Docs"></i></router-link>
             <h3 class="mb-0 mx-5">Verifiable Credential Verifier</h3>