Update the grid styles for the login and registration page

use glm-grid.

diff --git a/css/front.css b/css/front.css
index 059a96f..8759c24 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -182,8 +182,9 @@ label.reg-time {
 div.glm-reg-login {
     background-color: white;
     border: solid 1px black;
-    padding: 2rem;
-    width: 30rem;
+    padding: 1rem;
+    margin: 1rem;
+    /* width: 30rem; */
 }
 div.glm-reg-login h4 {
     color: black;
@@ -198,7 +199,7 @@ div.glm-reg-forgot {
     background-color: white;
     border: solid 1px black;
     padding: 2rem;
-    width: 30rem;
+    /* width: 30rem; */
 }
 div.glm-reg-forgot h4 {
     color: black;

diff --git a/views/front/registrations/login.html b/views/front/registrations/login.html
index 9732584..588cd11 100644 (file)
--- a/views/front/registrations/login.html
+++ b/views/front/registrations/login.html
@@ -2,14 +2,45 @@
 <form action="{$regUrl}?page=login" method="post">
     <input type="hidden" name="option" value="submit">
     <input type="hidden" name="page" value="login">
-    <div class="glm-reg-login">
-        <h4>Login</h4>
-        {if $message}
-            <span style="color: red;">{$message}</span>
-        {/if}
-        <input class="login" placeholder="Email Address" type="email" name="username" value="">
-        <input class="password" placeholder="Password" type="password" name="password" value="">
-        <input type="submit" class="accountLogin" value="Login">
-        <a class="forgotLogin" href="{$regUrl}?page=forgot">Forgot Password</a>
+
+    <div class="glm-row">
+        <div class="glm-columns glm-small-12 glm-medium-8">
+            <div class="glm-reg-login">
+
+                <h4>Login</h4>
+                <div class="glm-row">
+                    <div class="glm-columns glm-large--12">
+                        {if $message}<span style="color: red;">{$message}</span>{/if}
+                    </div>
+                </div>
+                <div class="glm-row">
+                    <div class="glm-columns glm-small-12">
+                        <label style="color:red;">Email Address</label>
+                    </div>
+                    <div class="glm-columns glm-small-12">
+                        <input class="login" type="email" name="username" value="">
+                    </div>
+                </div>
+                <div class="glm-row">
+                    <div class="glm-columns glm-small-12">
+                        <label style="color:red;">Password</label>
+                    </div>
+                    <div class="glm-columns glm-small-12">
+                        <input class="password" placeholder="Password" type="password" name="password" value="">
+                    </div>
+                </div>
+                <div class="glm-row">
+                    <div class="glm-columns glm-large--12">
+                        <input type="submit" class="accountLogin" value="Login">
+                    </div>
+                </div>
+                <div class="glm-row">
+                    <div class="glm-columns glm-large--12">
+                        <a class="forgotLogin" href="{$regUrl}?page=forgot">Forgot Password</a>
+                    </div>
+                </div>
+
+        </8div>
+        </div>
     </div>
 </form>

diff --git a/views/front/registrations/register.html b/views/front/registrations/register.html
index 91455c4..0e783bb 100644 (file)
--- a/views/front/registrations/register.html
+++ b/views/front/registrations/register.html
@@ -2,55 +2,56 @@
 <form action="{$regUrl}?page=register" method="post">
     <input type="hidden" name="option" value="submit">
     <input type="hidden" name="page" value="register">
-    <div class="glm-reg-register">
 
-        <div class="glm-row">
-            <div class="glm-columns glm-small-12 glm-large-12">
+    <div class="glm-row">
+        <div class="glm-columns glm-small-12 glm-medium-8">
+            <div class="glm-reg-register">
+
                 <h3>Register New Account</h3>
                 <div class="glm-row">
-                    <div class="glm-columns glm-large-6 glm-small-12"><label style="color:red;">Email Address</label>
+                    <div class="glm-columns glm-small-12"><label style="color:red;">Email Address</label>
                         {if $emailError} <span class="glm-error">{$emailError}</span> {/if}
                     </div>
-                    <div class="glm-columns glm-large-6 glm-small-12"><input name="email" value="" required>
+                    <div class="glm-columns glm-small-12"><input name="email" value="" required>
                     </div>
                 </div>
                 <div class="glm-row">
-                    <div class="glm-columns glm-large-6 glm-small-12"><label style="color:red;">Password</label>
+                    <div class="glm-columns glm-small-12"><label style="color:red;">Password</label>
                         {if $passwordError} <span class="glm-error">{$passwordError}</span> {/if}
                     </div>
-                    <div class="glm-columns glm-large-6 glm-small-12"><input name="password" value="" required></div>
+                    <div class="glm-columns glm-small-12"><input name="password" value="" required></div>
                 </div>
                 <div class="glm-row">
-                    <div class="glm-columns glm-large-6 glm-small-12"><label style="color:red;">First Name</label></div>
-                    <div class="glm-columns glm-large-6 glm-small-12"><input name="fname" value="{$reg.fname}" required></div>
+                    <div class="glm-columns glm-small-12"><label style="color:red;">First Name</label></div>
+                    <div class="glm-columns glm-small-12"><input name="fname" value="{$reg.fname}" required></div>
                 </div>
                 <div class="glm-row">
-                    <div class="glm-columns glm-large-6 glm-small-12"><label style="color:red;">Last Name</label></div>
-                    <div class="glm-columns glm-large-6 glm-small-12"><input name="lname" value="{$reg.lname}" required></div>
+                    <div class="glm-columns glm-small-12"><label style="color:red;">Last Name</label></div>
+                    <div class="glm-columns glm-small-12"><input name="lname" value="{$reg.lname}" required></div>
                 </div>
                 <div class="glm-row">
-                    <div class="glm-columns glm-large-6 glm-small-12"><label style="color:red;">Address 1</label></div>
-                    <div class="glm-columns glm-large-6 glm-small-12"><input name="addr1" value="{$reg.addr1}" required></div>
+                    <div class="glm-columns glm-small-12"><label style="color:red;">Address 1</label></div>
+                    <div class="glm-columns glm-small-12"><input name="addr1" value="{$reg.addr1}" required></div>
                 </div>
                 <div class="glm-row">
-                    <div class="glm-columns glm-large-6 glm-small-12"><label>Address 2</label></div>
-                    <div class="glm-columns glm-large-6 glm-small-12"><input name="addr2" value="{$reg.addr2}"></div>
+                    <div class="glm-columns glm-small-12"><label>Address 2</label></div>
+                    <div class="glm-columns glm-small-12"><input name="addr2" value="{$reg.addr2}"></div>
                 </div>
                 <div class="glm-row">
-                    <div class="glm-columns glm-large-6 glm-small-12"><label style="color:red;">City</label></div>
-                    <div class="glm-columns glm-large-6 glm-small-12"><input name="city" value="{$reg.city}" required></div>
+                    <div class="glm-columns glm-small-12"><label style="color:red;">City</label></div>
+                    <div class="glm-columns glm-small-12"><input name="city" value="{$reg.city}" required></div>
                 </div>
                 <div class="glm-row">
-                    <div class="glm-columns glm-large-6 glm-small-12"><label style="color:red;">State</label></div>
-                    <div class="glm-columns glm-large-6 glm-small-12"><input name="state" value="{$reg.state}" required></div>
+                    <div class="glm-columns glm-small-12"><label style="color:red;">State</label></div>
+                    <div class="glm-columns glm-small-12"><input name="state" value="{$reg.state}" required></div>
                 </div>
                 <div class="glm-row">
-                    <div class="glm-columns glm-large-6 glm-small-12"><label style="color:red;">Zip/Postal Code</label></div>
-                    <div class="glm-columns glm-large-6 glm-small-12"><input name="zip" value="{$reg.zip}" required></div>
+                    <div class="glm-columns glm-small-12"><label style="color:red;">Zip/Postal Code</label></div>
+                    <div class="glm-columns glm-small-12"><input name="zip" value="{$reg.zip}" required></div>
                 </div>
                 <div class="glm-row">
-                    <div class="glm-columns glm-large-6 glm-small-12"><label>Country</label></div>
-                    <div class="glm-columns glm-large-6 glm-small-12"><input name="country" value="{$reg.country}"></div>
+                    <div class="glm-columns glm-small-12"><label>Country</label></div>
+                    <div class="glm-columns glm-small-12"><input name="country" value="{$reg.country}"></div>
                 </div>
                 <div class="glm-row">
                     <div class="glm-columns glm-small-12"><input type="submit" id="accountRegister" value="Register"></div>