From: laury Date: Fri, 15 Dec 2017 19:31:34 +0000 (-0500) Subject: Restyling account header for mobile/tablet view X-Git-Tag: v1.0.0^2~180 X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=f1ce9c6c8f0eafddbba81475b8b941d360f17479;p=WP-Plugins%2Fglm-member-db-registrations.git Restyling account header for mobile/tablet view --- diff --git a/css/front.css b/css/front.css index f951d78..4615d6a 100644 --- a/css/front.css +++ b/css/front.css @@ -113,13 +113,15 @@ .glm-reg-row-bold { font-weight: bold; } -.glm-reg-header-row.glm-cart-summary-event-name-row a { - color: white; -} .glm-reg-header-row.glm-cart-summary-event-name-row { background-color: #005779; padding: 5px; - height: 40px; + min-height: 40px; + height: auto; + float: left; +} +.glm-reg-header-row.glm-cart-summary-event-name-row a { + color: white; } .glm-reg-header-row .glm-cart-summary-event-name { display: inline; @@ -565,6 +567,11 @@ span.glm-error { } #accountHeader .glm-reg-header-btn{ font-size: 16px; + height: 60px; + padding: 20px 20px; + border-radius: 0; + margin: 0; + width: 50%; } #accountHeader { background: -webkit-linear-gradient(top, #f2f2f2 45%, #FFFFFF 100%); @@ -581,19 +588,45 @@ span.glm-error { #accountHeader .accountHeader-section { } #accountHeader #accountHeader-left { - padding-right: 0; + width: 33%; + padding: 0; float: left; text-align: left; - margin-top: 12px; +/* margin-top: 12px;*/ +} +#accountHeader #accountHeader-left .glm-reg-header-btn { + float: left; +} +#accountHeader #accountHeader-left .glm-reg-header-btn:first-child { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + border-right: 1px solid lightgrey; + padding: 10px 20px; } #accountHeader #accountHeader-center { text-align: center; - width: 255px; + width: 34%; + padding: 0; } #accountHeader #accountHeader-right { + padding: 0; + width: 33%; float: right; text-align: right; - margin-top: 12px; +/* margin-top: 12px;*/ +} +#accountHeader #accountHeader-right .glm-reg-header-btn:first-child { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + border-left: 1px solid lightgrey; + float: right; +} + +#accountHeader #accountHeader-right .glm-reg-header-btn:last-child { + padding: 10px 20px; +} +#accountHeader #accountHeader-right .glm-reg-header-btn { + float: right; } #accountHeader #glm-header-reg-widget { font-size: 14px; @@ -606,6 +639,56 @@ span.glm-error { min-height: 60px; width: 100%; } + +@media(max-width: 1024px) { + #accountHeader { + max-width: 300px; + } + #accountHeader .accountHeader-section { + margin-bottom: 0; + } + #accountHeader #accountHeader-left { + width: 100%; + } + #accountHeader #accountHeader-center { + width: 100%; + } + #accountHeader #accountHeader-right { + width: 100%; + } + #accountHeader #accountHeader-center #glm-header-reg-widget { + margin: 0; + } + #accountHeader #accountHeader-left .glm-reg-header-btn, + #accountHeader #accountHeader-right .glm-reg-header-btn { + width: 100%; + height: 50px; + padding: 12px; + border-radius: 0; + border: 0; + } + #accountHeader #accountHeader-left .glm-reg-header-btn:first-child { + border-right: 0; + border-bottom: 1px solid lightgrey; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + #accountHeader #accountHeader-right .glm-reg-header-btn:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-left: 0; + } + #accountHeader #accountHeader-right .glm-reg-header-btn:last-child { + border-left: 0; + border-top: 1px solid lightgrey; + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } +} #registrations-cart-link-title { font-size: 16px; border-bottom: 1px solid lightgrey; @@ -613,19 +696,13 @@ span.glm-error { width: 100%; } #registrations-cart-link-data { - padding: 0.625rem 1.25rem 0.6875rem 1.25rem; + padding: 5px; width: 100%; } .reg-class-time:not(:last-child){ border-bottom: 1px solid lightgrey; } @media(max-width: 1024px) { - #accountHeader .accountHeader-section { - margin-bottom: 10px; - } - #glm-header-reg-widget{ - margin-bottom: 15px; - } #glm-header-reg-widget a{ display: block; } @@ -659,10 +736,6 @@ span.glm-error { margin-left: 0; } } -#accountHeader .button { - border-radius: 3px; - margin-bottom: 0; -} #reg_bulletin { max-width: 1024px; margin: 10px auto; @@ -672,10 +745,6 @@ span.glm-error { margin-bottom: 10px; } @media(max-width: 640px){ - #accountHeader .button { - margin-bottom: 5px; - } - .glm-reg-image-container { text-align: left; } @@ -704,25 +773,6 @@ span.glm-error { .glm-reg-account-info,.glm-reg-billing-info { padding: 0; } - #accountHeader #accountHeader-center { - text-align: center; - float: none; - width: 255px; - margin: 0 auto; - } - #accountHeader #accountHeader-left { - float: none; - text-align: left; - max-width: 425px; - margin: 10px auto; - } - #accountHeader #accountHeader-right { - float: none; - text-align: center; - max-width: 425px; - margin: 10px auto; - clear: both; - } } @media(min-width: 1024px){ @@ -837,4 +887,36 @@ span.glm-error { } .glm-reg-checkout-field-data { padding: 0; -} \ No newline at end of file +} + +/* Progress Bar */ +/*#glm-reg-progress-bar { + width: 100%; + margin: 10px auto; + border-radius: 6px; + border: 2px solid lightgrey; + background-color: white; + height: 30px; + overflow: hidden; + +} +.glm-reg-progress-bar-section { + height: 30px; + float: left; + text-align: center; + color: #005779; +} +.glm-reg-progress-bar-section.one-third { + background-color: aqua; + content: "one third"; + width: 33.3%; +} +.glm-reg-progress-bar-section.two-thirds { + background-color: aquamarine; + content: "test"; + width: 33.4%; +} +.glm-reg-progress-bar-section.three-thirds { + background-color: yellowgreen; + width: 33.3%; +}*/ diff --git a/views/front/registrations/accountHeader.html b/views/front/registrations/accountHeader.html index d9a7238..96fc21d 100644 --- a/views/front/registrations/accountHeader.html +++ b/views/front/registrations/accountHeader.html @@ -1,17 +1,20 @@
-
+
{if $page != 'register'} - Register for Another Event + + Register for Another Event + {/if} {if $page != 'cart'} - Return to Cart + + Return to Cart + {/if} -  
-
+
- {if $haveCart} + {if $haveCart && $numb_registrants > 0 && $numb_events > 0}
-
+ diff --git a/views/front/registrations/cart.html b/views/front/registrations/cart.html index c07539c..9a7b2a9 100644 --- a/views/front/registrations/cart.html +++ b/views/front/registrations/cart.html @@ -9,18 +9,15 @@
{/if}--> {if true} -
- -
-
-
-
    -
  • Register
    • -
  • View Cart
    • -
  • Checkout
    • -
-
+
+
+
    +
  • Register
    • +
  • View Cart
    • +
  • Checkout
    • +
+
{/if} {if $cartPageText} diff --git a/views/front/registrations/cartSummary.html b/views/front/registrations/cartSummary.html index e61456f..d38874e 100644 --- a/views/front/registrations/cartSummary.html +++ b/views/front/registrations/cartSummary.html @@ -56,7 +56,7 @@ {/if}
- {if $registrant.registrantDiscounts == 0} + {if $registrant.registrantDiscounts > 0}
Registrant Discount