aesthetics

main/app/static/css/custom.css

@@ -0,0 +1,30 @@
+/*
+
+ Copyright (c) 2019 Clementine Computing LLC.
+ 
+ This file is part of PopuFare.
+ 
+ PopuFare is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+ 
+ PopuFare is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+ 
+ You should have received a copy of the GNU Affero General Public License
+ along with PopuFare.  If not, see <https://www.gnu.org/licenses/>.
+
+*/
+
+
+.rowpop {
+  height: 5vh;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+}

main/app/templates/add_card_block.html

@@ -16,14 +16,14 @@
 
           <div class='col-6'>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-5'>Start MagStripe</div>
               <div class='col-7'>
                 <input type='text' class='form-control form-control-sm' placeholder=''>
               </div>
             </div>
 
-            <div class='row '>
+            <div class='row rowpop '>
               <div class='col-5'>Start RFID</div>
               <div class='col-3'>
                 <input type='text' class='form-control form-control-sm' placeholder=''>
@@ -33,7 +33,7 @@
               </div>
             </div>
 
-            <div class='row '>
+            <div class='row rowpop '>
               <div class='col-5'>Group</div>
               <div class='col-7'>
 
@@ -52,14 +52,14 @@
 
           <div class='col-6'>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-5'>End MagStripe</div>
               <div class='col-7'>
                 <input type='text' class='form-control form-control-sm' placeholder=''>
               </div>
             </div>
 
-            <div class='row '>
+            <div class='row rowpop '>
               <div class='col-5'>End RFID</div>
               <div class='col-3'>
                 <input type='text' class='form-control form-control-sm' placeholder=''>
@@ -104,7 +104,7 @@
 
 
             <!-- none -->
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-1'>
                 <input type='radio' aria-label='pass-none'>
               </div>
@@ -115,7 +115,7 @@
             </div>
 
             <!-- multi ride -->
-            <div class='row '>
+            <div class='row rowpop '>
               <div class='col-1'>
                 <input type='radio' aria-label='initial-pass-multi-ride'>
               </div>
@@ -169,7 +169,7 @@
             </div>
 
             <!-- multi day -->
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
 
               <div class='col-1'>
                 <input type='radio' aria-label='initial-pass-multi-day'>
@@ -223,7 +223,7 @@
 
             </div>
 
-            <div class='row '>
+            <div class='row rowpop '>
               <div class='col-1'>
                 <input type='radio' aria-label='initial-pass-other'>
               </div>

main/app/templates/base.html

@@ -12,6 +12,7 @@
 
   <link href="/static/css/bootstrap.min.css" rel="stylesheet">
   <link href="/static/css/simple-sidebar.css" rel="stylesheet">
+  <link href="/static/css/custom.css" rel="stylesheet">
 
 </head>
 

main/app/templates/manage_card.html

@@ -18,7 +18,7 @@
           <!-- half of the row is devoted to card specific operations -->
           <div class='col-6'>
 
-            <div class='row row-shade'>
+            <div class='row row-shade rowpop'>
               <div class='col-4'> CardId </div>
               <div class='col-6'>
                 <input type='text' class='form-control form-control-sm' placeholder=''>
@@ -29,7 +29,7 @@
               </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> Group </div>
               <div class='col-6'>
                 <div class='input-group input-group-sm mb-3'>
@@ -43,7 +43,7 @@
               <div class='col-2'> </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row row-shade rowpop'>
               <div class='col-4'> MagStripe </div>
               <div class='col-6'>
                 <input type='text' class='form-control form-control-sm' placeholder=''>
@@ -53,7 +53,7 @@
               </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> RFID </div>
               <div class='col-6'>
                 <input type='text' class='form-control form-control-sm' placeholder=''>
@@ -63,7 +63,7 @@
               </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row row-shade rowpop'>
               <div class='col-4'> Active Pass </div>
               <div class='col-6'> ...  </div>
               <div class='col-2'>
@@ -71,13 +71,13 @@
               </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> Comment </div>
               <div class='col-6'> ...  </div>
               <div class='col-2'>  </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row row-shade rowpop'>
               <div class='col-4'> Other ID </div>
               <div class='col-6'>
                 <input type='text' class='form-control form-control-sm' placeholder=''>
@@ -87,7 +87,7 @@
               </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> </div>
               <div class='col-6'> </div>
               <div class='col-2'>  </div>
@@ -100,53 +100,53 @@
           <!-- and the other half is devoted to user specific information (associated with the card) -->
           <div class='col-5'>
 
-            <div class='row row-shade'>
+            <div class='row row-shade rowpop'>
               <div class='col-5'> Username </div>
               <div class='col-7'> jdoey112 </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-5'> First Name </div>
               <div class='col-7'> J </div>
             </div>
 
 
-            <div class='row row-shade'>
+            <div class='row row-shade rowpop'>
               <div class='col-5'> Last Name </div>
               <div class='col-7'> Doey </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-5'> E-Mail </div>
               <div class='col-7'> jdoey112@example.com </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row row-shade rowpop'>
               <div class='col-5'> Phone </div>
               <div class='col-7'> (607) 555-1212</div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-5'> Address </div>
               <div class='col-7'> 15 Lane </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row row-shade rowpop'>
               <div class='col-5'> City </div>
               <div class='col-7'> Ithaca </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-5'> State </div>
               <div class='col-7'> NY </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row row-shade rowpop'>
               <div class='col-5'> ZIP </div>
               <div class='col-7'> 14850 </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-5'> Group </div>
               <div class='col-7'> General </div>
             </div>
@@ -173,7 +173,7 @@
 
         </div>
 
-        <div class='row row-shade'>
+        <div class='row row-shade rowpop'>
           <div class='col-2'> Multi-Ride </div>
           <div class='col-2'>
 
@@ -185,6 +185,7 @@
             </div>
 
           </div>
+
           <div class='col-2'>
 
             <div class='input-group input-group-sm mb-3'>
@@ -226,7 +227,7 @@
 
         </div>
 
-        <div class='row'>
+        <div class='row rowpop'>
           <div class='col-2'> Multi-Day </div>
           <div class='col-2'>
 
@@ -280,7 +281,7 @@
 
         </div>
 
-        <div class='row row-shade'>
+        <div class='row row-shade rowpop'>
           <div class='col-2'> Other </div>
           <div class='col-9'> 
 
@@ -300,7 +301,7 @@
 
         </div>
 
-        <div class='row'>
+        <div class='row rowpop'>
           <hr>
         </div>
 
@@ -308,7 +309,7 @@
 
 
         <!-- pre-existing pass management where they can be re-ordered and deleted -->
-        <div class='row row-shade'>
+        <div class='row row-shade rowpop'>
           <div class='col-3'>
             <button type='button' class='btn btn-secondary btn-sm'>check / uncheck all</button>
           </div>
@@ -316,7 +317,7 @@
           <div class='col-2'> <button type='button' class='btn btn-secondary btn-sm'>delete</button> </div>
         </div>
 
-        <div class='row row-shade' >
+        <div class='row row-shade rowpop' >
           <div class='col-1'> Type </div>
           <div class='col-1'> Original </div>
           <div class='col-1'> Remain </div>
@@ -326,7 +327,7 @@
           <div class='col-3'> Last Used </div>
         </div>
 
-        <div class='row' >
+        <div class='row rowpop' >
           <div class='col-1'> NRide </div>
           <div class='col-1'> 5 </div>
           <div class='col-1'> 3 </div>
@@ -336,7 +337,7 @@
           <div class='col-3'> 2020-01-25 13:10 </div>
         </div>
 
-        <div class='row' >
+        <div class='row rowpop' >
           <div class='col-1'> NDay </div>
           <div class='col-1'> 10 </div>
           <div class='col-1'> 2 </div>

main/app/templates/manage_user.html

@@ -3,7 +3,6 @@
 {% block content %}
 
   <h1 class="mt-4">Manage User</h1>
-  <p>... </p>
 
   <div class='container'>
 
@@ -20,99 +19,107 @@
           <!-- half of the row is devoted to card specific operations -->
           <div class='col-6'>
 
-            <div class='row row-shade'>
+            <div class='row row-shade rowpop'>
               <div class='col-4'> User Id </div>
-              <div class='col-6'> ...  </div>
-              <div class='col-2'> Lookup </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-2'> <button type='button' class='btn btn-secondary btn-sm'>Lookup</button> </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> User Name </div>
-              <div class='col-6'> ...  </div>
-              <div class='col-2'> Lookup </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-2'> <button type='button' class='btn btn-secondary btn-sm'>Lookup</button> </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> First Name </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> Last Name </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> E-Mail </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> Phone </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> Address </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> City </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> State </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> ZIP </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> Shipping Name </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> Shipping Address </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> Shipping City </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> Shipping State </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> Shipping ZIP </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> Group </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'>
+                <div class='input-group input-group-sm mb-3'>
+                  <select class='custom-select'>
+                    <option>Org A</option>
+                    <option>Org B</option>
+                    <option>Org C</option>
+                  </select>
+                </div>
+              </div>
               <div class='col-2'> </div>
             </div>
 
@@ -120,105 +127,113 @@
 
           <div class='col-6'>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> User Name </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row '>
+            <div class='row rowpop '>
               <div class='col-4'> First Name </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> Last Name </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row '>
+            <div class='row rowpop '>
               <div class='col-4'> E-Mail </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> Phone </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row '>
+            <div class='row rowpop '>
               <div class='col-4'> Address </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> City </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row '>
+            <div class='row rowpop '>
               <div class='col-4'> State </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> ZIP </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row '>
+            <div class='row rowpop '>
               <div class='col-4'> Shipping Name </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> Shipping Address </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row '>
+            <div class='row rowpop '>
               <div class='col-4'> Shipping City </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> Shipping State </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row '>
+            <div class='row rowpop '>
               <div class='col-4'> Shipping ZIP </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> Password </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row '>
+            <div class='row rowpop '>
               <div class='col-4'> Confirm Password </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> Group </div>
-              <div class='col-6'> ...  </div>
+              <div class='col-6'>
+                <div class='input-group input-group-sm mb-3'>
+                  <select class='custom-select'>
+                    <option>Org A</option>
+                    <option>Org B</option>
+                    <option>Org C</option>
+                  </select>
+                </div>
+              </div>
               <div class='col-2'> </div>
             </div>
 
@@ -235,21 +250,21 @@
         <div class='row'>
           <div class='col-8'>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-12'> <h3> Password Reset </h3> </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> New Password </div>
-              <div class='col-8'> ... </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> Confirm Password </div>
-              <div class='col-8'> ... </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
 
               <div class='col-4'>
                 <button type='button' class='btn btn-secondary btn-sm'>Reset Password</button>
@@ -271,32 +286,32 @@
         <div class='row'>
           <div class='col-8'>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-6'> <h3> Add Card to User </h3> </div>
               <div class='col-6'></div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> Mag Stripe </div>
-              <div class='col-8'> ... </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> RFID </div>
-              <div class='col-8'> ... </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> CardId </div>
-              <div class='col-8'> ... </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> Group </div>
-              <div class='col-8'> ... </div>
+              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'>
                 <button type='button' class='btn btn-secondary btn-sm'>Reset Password</button>
               </div>
@@ -316,19 +331,19 @@
         <div class='row'>
           <div class='col-10'>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-6'> <h3> User Owned Cards </h3> </div>
               <div class='col-6'></div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> Card Id </div>
               <div class='col-4'> Mag Stripe</div>
               <div class='col-2'> RF Site </div>
               <div class='col-2'> RFID </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> 1234 </div>
               <div class='col-4'> 12300000000000001 </div>
               <div class='col-2'> 35 </div>

main/app/templates/process_pending_card.html

@@ -18,22 +18,22 @@
           <!-- left column -->
           <div class='col-6'>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-12'><h3> Process Pending Card</h3></div>
             </div>
 
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> Queue Id </div>
               <div class='col-8'> ...  </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> MagStripe </div>
               <div class='col-8'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> RFID </div>
               <div class='col-3'>
                 <input type='text' class='form-control form-control-sm' placeholder=''>
@@ -45,92 +45,126 @@
 
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> User Name </div>
               <div class='col-8'> ...  </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> First Name </div>
               <div class='col-8'> ...  </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> Last Name </div>
               <div class='col-8'> ...  </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> E-Mail </div>
               <div class='col-8'> ...  </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> Phone </div>
               <div class='col-8'> ...  </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> Address </div>
               <div class='col-8'> ...  </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> City </div>
               <div class='col-8'> ...  </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> State </div>
               <div class='col-8'> ...  </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> ZIP </div>
               <div class='col-8'> ...  </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> Shipping Name </div>
               <div class='col-8'> ...  </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> Shipping Address </div>
               <div class='col-8'> ...  </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> Shipping City </div>
               <div class='col-8'> ...  </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> Shipping State </div>
               <div class='col-8'> ...  </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-4'> Shipping ZIP </div>
               <div class='col-8'> ...  </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-4'> Group </div>
-              <div class='col-8'> ...  </div>
+              <div class='col-8'>
+                <div class='input-group input-group-sm mb-3'>
+                  <select class='custom-select'>
+                    <option>Org A</option>
+                    <option>Org B</option>
+                    <option>Org C</option>
+                  </select>
+                </div>
+              </div>
             </div>
 
           </div>
 
+<!--
           <div class='col-1'></div>
+-->
 
           <!-- right column -->
-          <div class='col-5'>
+          <div class='col-6'>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-12'><h3> Passes on Card </h3></div>
             </div>
 
+            <div class='row rowpop row-shade'>
+              <div class='col-2'>Type</div>
+              <div class='col-1'>Rem.</div>
+              <div class='col-3'>Exp.</div>
+              <div class='col-3'>Issued</div>
+              <div class='col-3'>Last Used</div>
+            </div>
+
+            <div class='row rowpop'>
+              <div class='col-2'>NRide</div>
+              <div class='col-1'>2</div>
+              <div class='col-3'> - </div>
+              <div class='col-3'>2020-01-03</div>
+              <div class='col-3'>2020-02-05</div>
+            </div>
+
+            <div class='row rowpop row-shade'>
+              <div class='col-2'>NDay</div>
+              <div class='col-1'>2</div>
+              <div class='col-3'> - </div>
+              <div class='col-3'>2020-01-03</div>
+              <div class='col-3'> - </div>
+            </div>
+
           </div>
 
         <!-- two column row end -->
@@ -144,7 +178,7 @@
           <div class='col-12'> <h3> Pending Card Requests</h3> </div>
         </div>
 
-        <div class='row row-shade'>
+        <div class='row rowpop row-shade'>
           <div class='col-2'> </div>
           <div class='col-2'> Card Id </div>
           <div class='col-4'> Mag Stripe</div>
@@ -152,7 +186,7 @@
           <div class='col-2'> RFID </div>
         </div>
 
-        <div class='row'>
+        <div class='row rowpop'>
           <div class='col-2'>
             <button type='button' class='btn btn-secondary btn-sm'>Load</button>
           </div>
@@ -163,7 +197,7 @@
         </div>
 
 
-        <div class='row row-shade'>
+        <div class='row rowpop row-shade'>
           <div class='col-2'>
             <button type='button' class='btn btn-secondary btn-sm'>Load</button>
           </div>

main/app/templates/recycle_card.html

@@ -3,7 +3,6 @@
 {% block content %}
 
   <h1 class="mt-4">Recycle Card</h1>
-  <p>... </p>
 
   <div class='container'>
 
@@ -17,25 +16,35 @@
 
           <div class='col-10'>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-6'>MagStripe</div>
-              <div class='col-6'>.. </div>
+              <div class='col-6'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
             </div>
 
-            <div class='row '>
+            <div class='row rowpop '>
               <div class='col-6'>RFID</div>
-              <div class='col-2'>.. </div>
-              <div class='col-4'>.. </div>
+              <div class='col-2'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
+              <div class='col-4'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-6'>Source Group</div>
-              <div class='col-6'>.. </div>
+              <div class='col-6'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
             </div>
 
-            <div class='row'>
+            <div class='row rowpop'>
               <div class='col-6'>Destination Group</div>
-              <div class='col-6'>.. </div>
+              <div class='col-6'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
             </div>
 
           </div>
@@ -74,7 +83,7 @@
 
 
             <!-- none -->
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-1'>
                 <input type='radio' aria-label='pass-none'>
               </div>
@@ -85,7 +94,7 @@
             </div>
 
             <!-- multi ride -->
-            <div class='row '>
+            <div class='row rowpop '>
               <div class='col-1'>
                 <input type='radio' aria-label='initial-pass-multi-ride'>
               </div>
@@ -139,7 +148,7 @@
             </div>
 
             <!-- multi day -->
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
 
               <div class='col-1'>
                 <input type='radio' aria-label='initial-pass-multi-day'>
@@ -193,7 +202,7 @@
 
             </div>
 
-            <div class='row '>
+            <div class='row rowpop '>
               <div class='col-1'>
                 <input type='radio' aria-label='initial-pass-other'>
               </div>

main/app/templates/reissue_card.html

@@ -3,8 +3,6 @@
 {% block content %}
 
   <h1 class="mt-4">Re-Issue Card</h1>
-  <p>... </p>
-
 
   <div class='container'>
 
@@ -17,20 +15,28 @@
 
           <div class='col-5'>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-6'>Source MagStripe</div>
-              <div class='col-6'>.. </div>
+              <div class='col-6'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
             </div>
 
-            <div class='row '>
+            <div class='row rowpop '>
               <div class='col-6'>Source RFID</div>
-              <div class='col-2'>.. </div>
-              <div class='col-4'>.. </div>
+              <div class='col-2'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
+              <div class='col-4'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-6'>Source Group</div>
-              <div class='col-6'>.. </div>
+              <div class='col-6'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
             </div>
 
           </div>
@@ -39,20 +45,28 @@
 
           <div class='col-6'>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-6'>Destination MagStripe</div>
-              <div class='col-6'>.. </div>
+              <div class='col-6'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
             </div>
 
-            <div class='row '>
+            <div class='row rowpop '>
               <div class='col-6'>Destination RFID</div>
-              <div class='col-2'>.. </div>
-              <div class='col-4'>.. </div>
+              <div class='col-2'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
+              <div class='col-4'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
             </div>
 
-            <div class='row row-shade'>
+            <div class='row rowpop row-shade'>
               <div class='col-6'>Destination Group</div>
-              <div class='col-6'>.. </div>
+              <div class='col-6'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
             </div>
 
 

main/app/templates/search.html

@@ -14,7 +14,7 @@
         <br>
 
         <!-- -->
-        <div class='row'>
+        <div class='row rowpop row-shade'>
 
           <div class='col-2'>Search Cards</div>
           <div class='col-8'>
@@ -26,10 +26,8 @@
 
         </div>
 
-        <br>
-
         <!-- -->
-        <div class='row'>
+        <div class='row rowpop'>
 
           <div class='col-2'>Search Users</div>
           <div class='col-8'>
@@ -41,10 +39,8 @@
 
         </div>
 
-        <br>
-
         <!-- -->
-        <div class='row'>
+        <div class='row rowpop row-shade'>
 
           <div class='col-2'>Search Admins</div>
           <div class='col-8'>