Adjusted member listing output for small screens.
authorChuck Scott <cscott@gaslightmedia.com>
Tue, 19 May 2015 16:42:32 +0000 (12:42 -0400)
committerChuck Scott <cscott@gaslightmedia.com>
Tue, 19 May 2015 16:42:32 +0000 (12:42 -0400)
simple-wp-membership/view.php

index e0c7020..72d948a 100644 (file)
@@ -5,10 +5,10 @@
                                        margin-top: .5em;
                                }
                                .initial {
-                                       margin-left: .2em;
-                                       padding-left: .2em;
-                                       padding-right: .2em;
-                                       margin-left: .2em;
+                                       margin-left: .15em;
+                                       padding-left: .1em;
+                                       padding-right: .1em;
+                                       margin-left: .15em;
                                }
                                .initialSelected {
                                        border: 1px solid black;
                                        font-weight: bold;
                                        text-align: right;
                                }
+                               .fieldPromptLeft {
+                                       font-weight: bold;
+                                       text-align: left;
+                               }
                                .fieldValue {
                                        text-align: left;
+                                       padding-left: 1em;
                                }
                        </style>
 
                                <div class="row">
                                        <div class="small-12 columns memberName"><h3>'.$m['first_name'].' '.$m['last_name'].'</h3></div>
                                </div>
-                               <div class="row">
                        '.($m['email'] != '' ? '
+                               <div class="row">
                                        <!-- Email Address -->
-                                       <div class="small-3 columns fieldPrompt">Email address:</div><div class="small-9 columns fieldValue">'.$m['email'].'</div>
+                                       <div class="small-3 columns fieldPrompt show-for-medium-up">Email address:</div>
+                                       <div class="small-12 columns fieldPromptLeft show-for-small-only">Email address:</div>
+                                       <div class="small-9 columns end fieldValue">'.$m['email'].'</div>
                                </div>
-                               <div class="row">
                        ' : '').'
                        '.($m['phone'] != '' ? '
+                               <div class="row">
                                        <!-- Cell Phone -->
-                                       <div class="small-3 columns fieldPrompt">Phone:</div><div class="small-9 columns fieldValue">'.$m['phone'].'</div>
+                                       <div class="small-3 columns fieldPrompt show-for-medium-up">Phone:</div>
+                                       <div class="small-12 columns fieldPromptLeft show-for-small-only">Phone:</div>
+                                       <div class="small-9 columns end fieldValue">'.$m['phone'].'</div>
                                </div>
                        ' : '').'
                        '.($m['data']['Spouse name']->value != '' ? '
                                <div class="minorBreak"> </div>
                                <div class="row">
                                        <!-- Spouse Name -->
-                                       <div class="small-3 columns fieldPrompt">Spouse:</div><div class="small-9 columns end fieldValue">'.$m['data']['Spouse name']->value.'</div>
+                                       <div class="small-3 columns fieldPrompt show-for-medium-up">Spouse:</div>
+                                       <div class="small-12 columns fieldPromptLeft show-for-small-only">Spouse:</div>
+                                       <div class="small-9 columns end fieldValue">'.$m['data']['Spouse name']->value.'</div>
                                </div>
                            '.($m['data']['Spouse email']->value != '' ? '
                                <div class="row">
                                        <!-- Spouse Email -->
-                                       <div class="small-3 columns fieldPrompt">Email:</div><div class="small-9 columns fieldValue">'.$m['data']['Spouse email']->value.'</div>
+                                       <div class="small-3 columns fieldPrompt show-for-medium-up">Email:</div>
+                                       <div class="small-12 columns fieldPromptLeft show-for-small-only">Email:</div>
+                                       <div class="small-9 columns end fieldValue">'.$m['data']['Spouse email']->value.'</div>
                                </div>
                            ' : '').'
                            '.($m['data']['Spouse cell phone']->value != '' ? '
                                <div class="row">
                                        <!-- Spouse Cell Phone -->
-                                       <div class="small-3 columns fieldPrompt">Cell phone:</div><div class="small-9 columns end fieldValue">'.$m['data']['Spouse cell phone']->value.'</div>
+                                       <div class="small-3 columns fieldPrompt show-for-medium-up">Cell phone:</div>
+                                       <div class="small-12 columns fieldPromptLeft show-for-small-only">Cell phone:</div>
+                                       <div class="small-9 columns end fieldValue">'.$m['data']['Spouse cell phone']->value.'</div>
                                </div>
                            ' : '').'
                        ' : '').'
                            '.($m['data']['Summer mailing address (P.O Box)']->value != '' ? '
                                <div class="row">
                                        <!-- Summer Mailing Address -->
-                                       <div class="small-3 columns fieldPrompt">&nbsp;</div><div class="small-9 columns end fieldValue">'.$m['data']['Summer mailing address (P.O Box)']->value.'</div>
+                                       <div class="small-3 columns fieldPrompt show-for-medium-up">&nbsp;</div>
+                                       <div class="small-9 columns end fieldValue">'.$m['data']['Summer mailing address (P.O Box)']->value.'</div>
                                </div>
                            ' : '').'
                            '.($m['data']['Summer City']->value != '' ? '
                                <div class="row">
-                                       <div class="small-3 columns">&nbsp;</div>
+                                       <div class="small-3 columns show-for-medium-up">&nbsp;</div>
                                        <!-- Summer City, State, ZIP -->
                                        <div class="small-9 columns end fieldValue">
                                                '.$m['data']['Summer City']->value.($m['data']['Summer State']->value != '' ? ', '.$m['data']['Summer State']->value : '').'
                            '.($m['data']['Summer Home 1']->value != '' ? '
                                <div class="row">
                                        <!-- Summer Home 1 -->
-                                       <div class="small-3 columns fieldPrompt">Address 1:</div><div class="small-9 columns end fieldValue">'.$m['data']['Summer Home 1']->value.'</div>
+                                       <div class="small-3 columns fieldPrompt show-for-medium-up">Address 1:</div>
+                                       <div class="small-12 columns fieldPromptLeft show-for-small-only">Address 1:</div>
+                                       <div class="small-9 columns end fieldValue">'.$m['data']['Summer Home 1']->value.'</div>
                                </div>
                              '.($m['data']['Summer Phone 1']->value != '' ? '
                                <div class="row">
-                                       <div class="small-3 columns fieldPrompt">Phone:</div>
+                                       <div class="small-3 columns fieldPrompt show-for-medium-up">Phone:</div>
+                                       <div class="small-12 columns fieldPromptLeft show-for-small-only">Phone:</div>
                                        <!-- Summer Phone 1 -->
                                        <div class="small-9 columns end fieldValue">'.$m['data']['Summer Phone 1']->value.'</div>
                                </div>
                            '.($m['data']['Summer Home 2']->value != '' ? '
                                <div class="row">
                                        <!-- Summer Home 2 -->
-                                       <div class="small-3 columns fieldPrompt">Address 2:</div><div class="small-9 columns end fieldValue">'.$m['data']['Summer Home 2']->value.'</div>
+                                       <div class="small-3 columns fieldPrompt show-for-medium-up">Address 2:</div>
+                                       <div class="small-12 columns fieldPromptLeft show-for-small-only">Address 2:</div>
+                                       <div class="small-9 columns end fieldValue">'.$m['data']['Summer Home 2']->value.'</div>
                                </div>
                              '.($m['data']['Summer Phone 2']->value != '' ? '
                                <div class="row">
-                                       <div class="small-3 columns fieldPrompt">Phone:</div>
+                                       <div class="small-3 columns fieldPrompt show-for-medium-up">Phone:</div>
+                                       <div class="small-12 columns fieldPromptLeft show-for-small-only">Phone:</div>
                                        <!-- Summer Phone 2 -->
                                        <div class="small-9 columns end fieldValue">'.$m['data']['Summer Phone 2']->value.'</div>
                                </div>
                            '.($m['data']['Summer Home 3']->value != '' ? '
                                <div class="row">
                                        <!-- Summer Home 3 -->
-                                       <div class="small-3 columns fieldPrompt">Address 3:</div><div class="small-9 columns end fieldValue">'.$m['data']['Summer Home 3']->value.'</div>
+                                       <div class="small-3 columns fieldPrompt show-for-medium-up">Address 3:</div>
+                                       <div class="small-12 columns fieldPromptLeft show-for-small-only">Address 3:</div>
+                                       <div class="small-9 columns end fieldValue">'.$m['data']['Summer Home 3']->value.'</div>
                                </div>
                              '.($m['data']['Summer Phone 3']->value != '' ? '
                                <div class="row">
-                                       <div class="small-3 columns fieldPrompt">Phone:</div>
+                                       <div class="small-3 columns fieldPrompt show-for-medium-up">Phone:</div>
+                                       <div class="small-12 columns fieldPromptLeft show-for-small-only">Phone:</div>
                                        <!-- Summer Phone 3 -->
                                        <div class="small-9 columns end fieldValue">'.$m['data']['Summer Phone 3']->value.'</div>
                                </div>
                                <div class="minorBreak"> </div>
                                <div class="row"><div class="small-12 columns sectionTitle">Home contact information</div></div>
                                <div class="row">
-                                       <div class="small-3 columns fieldPrompt">Address:</div>
+                                       <div class="small-3 columns fieldPrompt show-for-medium-up">Address:</div>
+                                       <div class="small-12 columns fieldPromptLeft show-for-small-only">Address:</div>
                                        <!-- Home Address -->
                                        <div class="small-9 columns end fieldValue">
                                                '.$m['data']['Home Address']->value.'
                                </div>
                            '.($m['data']['Home City']->value != '' ? '
                                <div class="row">
-                                       <div class="small-3 columns">&nbsp;</div>
+                                       <div class="small-3 columns show-for-medium-up">&nbsp;</div>
                                        <!-- Home City, State, ZIP -->
                                        <div class="small-9 columns end fieldValue">
                                                '.$m['data']['Home City']->value.($m['data']['Home State']->value != '' ? ', '.$m['data']['Home State']->value : '').'
                            ' : '').'
                            '.($m['data']['Home Phone']->value != '' ? '
                                <div class="row">
-                                       <div class="small-3 columns fieldPrompt">Phone:</div>
+                                       <div class="small-3 columns fieldPrompt show-for-medium-up">Phone:</div>
+                                       <div class="small-12 columns fieldPromptLeft show-for-small-only">Phone:</div>
                                        <!-- Home Phone -->
                                        <div class="small-9 columns end fieldValue">
                                                '.$m['data']['Home Phone']->value.'
                        '.($m['data']['Winter mailing address']->value != '' ? '
                                <div class="row"><div class="small-12 columns sectionTitle">Winter contact information</div></div>
                                <div class="row">
-                                       <div class="small-3 columns fieldPrompt">Winter address:</div>
+                                       <div class="small-3 columns fieldPrompt show-for-medium-up">Winter address:</div>
+                                       <div class="small-3 columns fieldPromptLeft show-for-small-only">Winter address:</div>
                                        <!-- Winter Mailing Address -->
                                        <div class="small-9 columns end fieldValue">
                                                '.$m['data']['Winter mailing address']->value.'
                                </div>
                            '.($m['data']['Winter City']->value != '' ? '
                                <div class="row">
-                                       <div class="small-3 columns">&nbsp;</div>
+                                       <div class="small-3 columns show-for-medium-up">&nbsp;</div>
                                        <!-- Winter City, State, ZIP -->
                                        <div class="small-9 columns end fieldValue">
                                                '.$m['data']['Winter City']->value.($m['data']['Winter State']->value != '' ? ', '.$m['data']['Winter State']->value : '').'
                            ' : '').'
                            '.($m['data']['Winter phone']->value != '' ? '
                                <div class="row">
-                                       <div class="small-3 columns fieldPrompt">Phone:</div>
+                                       <div class="small-3 columns fieldPrompt show-for-mediaum-up">Phone:</div>
+                                       <div class="small-12 columns fieldPromptLeft show-for-small-only">Phone:</div>
                                        <!-- Winter Phone -->
                                        <div class="small-9 columns end fieldValue">
                                                '.$m['data']['Winter phone']->value.'