Merge pull request #16 from silinternational/develop

received some feedback of login card not being big enough on phones.

Author: longrunningprocess

themes/material/common-head-elements.php

@@ -30,6 +30,6 @@
 $colors = htmlentities($this->configuration->getValue('theme.color-scheme', 'indigo-purple'));
 ?>
 <link rel="stylesheet" href="/module.php/material/material.<?= $colors ?>.1.2.1.min.css">
-<link rel="stylesheet" href="/module.php/material/styles.2.1.0.css">
+<link rel="stylesheet" href="/module.php/material/styles.2.2.0.css">
 
 <script async src="/module.php/material/material.1.2.1.min.js"></script>

themes/material/core/loginuserpass.php

@@ -46,7 +46,7 @@ function onRecaptchaLoad() {
             ?>
             <input type="hidden" name="csrf-token" value="<?= $csrfToken ?>" />
 
-            <div class="mdl-card mdl-shadow--8dp">
+            <div class="mdl-card mdl-shadow--8dp fill-phone-viewport">
                 <?php
                 $idpName = htmlentities($this->configuration->getValue('idp_name', '—'));
                 ?>

www/styles.2.1.0.css www/styles.2.2.0.csswww/styles.2.1.0.css renamed to www/styles.2.2.0.css

@@ -74,27 +74,50 @@ form p.error > i {
     min-width: calc(50% - 2em);
     max-width: calc(50% - 2em);
   }
+
+  .mdl-card.fill-phone-viewport {
+    height: 100vh;
+    width: 100vw;
+  }
 }
-/* phones, small tablets, landscape (3 cards / row) */
+/* phones, small tablets, landscape */
 @media only screen and (min-width : 600px) {
+  /*  (3 cards / row) */
   .mdl-card.row-aware {
     min-width: calc(33% - 2em);
     max-width: calc(33% - 2em);
   }
+
+  .mdl-card.fill-phone-viewport {
+    height: auto;
+    width: auto;
+  }
 }
-/* tablets, small desktops (4 cards / row) */
+/* tablets, small desktops */
 @media only screen and (min-width : 850px) {
+  /*  (4 cards / row) */
   .mdl-card.row-aware {
     min-width: calc(25% - 2em);
     max-width: calc(25% - 2em);
   }
+
+  .mdl-card.fill-phone-viewport {
+    height: auto;
+    width: auto;
+  }
 }
-/* desktops (5 cards / row) */
+/* desktops */
 @media only screen and (min-width : 1024px) {
+  /*  (5 cards / row) */
   .mdl-card.row-aware {
     min-width: calc(20% - 2em);
     max-width: calc(20% - 2em);
   }
+
+  .mdl-card.fill-phone-viewport {
+    height: auto;
+    width: auto;
+  }
 }
 
 .mdl-card.disabled {