Style changes for accountHeader, and registration detail info titles

diff --git a/css/front.css b/css/front.css
index 304970c..5f67e6b 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -222,6 +222,9 @@
 .glm-reg-level-info{
     padding: 0 2px;
     font-size: 14px;
+    white-space: normal;
+    line-height: 1.2;
+    margin-bottom: 10px;
 }
 
 .glm-reg-level-title {
@@ -266,6 +269,12 @@
     /* position: absolute; */
     bottom: .3rem;
     right: .5rem;
+    white-space: normal;
+}
+@media(max-width: 640px) {
+    .glm-reg-submit {
+        padding: 0;
+    }
 }
 .glm-reg-level-registrant-name {
 }
@@ -312,6 +321,7 @@ label.registrant-label {
 
 .reg-class-detail {
     /* display: none; */
+    padding: 5px 10px;
 }
 .toggle-class-open {
     font-size: 1.5rem;
@@ -489,6 +499,24 @@ span.glm-error {
 #regApp {
     
 }
+#regApp .glm-reg-class-container {
+    border: 1px solid lightgrey;
+    border-radius: 5px;
+}
+
+#regApp .glm-reg-class-container.collapsed .reg-class-detail {
+}
+#regApp .glm-reg-class-container .reg-class-detail {
+}
+#regApp .glm-reg-class-container .glm-reg-event-details {
+    background-color: #007095;
+    color: white;
+    cursor: pointer;
+    padding: 10px;
+}
+#regApp .glm-reg-class-container .glm-reg-event-details:hover {
+    background-color: #008CBA;
+}
 
 #accountHeader {
     background: -webkit-linear-gradient(top, #f2f2f2 45%, #FFFFFF 100%);
@@ -496,10 +524,57 @@ span.glm-error {
     background: -ms-linear-gradient(top, #f2f2f2 45%, #FFFFFF 100%);
     border: 1px solid lightgrey;
     border-radius: 4px;
-    height: 60px;
+    height: auto;
+    min-height: 60px;
     margin: 0 auto;
     max-width: 1024px;
-    padding: 10px 20px;   
+    padding: 0;
+}
+#accountHeader .accountHeader-section {
+}
+#accountHeader #accountHeader-left {
+    float: left;
+    text-align: left;
+    margin-top: 12px;
+}
+#accountHeader #accountHeader-center {
+    text-align: center;
+}
+#accountHeader #accountHeader-right {
+    float: right;
+    text-align: right;
+    margin-top: 12px;
+}
+#accountHeader #glm-header-reg-widget {
+    font-size: 14px;
+    padding: 0;
+    border-color: lightgrey;
+    border-width: 0 1px;
+    border-style: solid;
+    border-radius: 2px;
+    background: white;
+    min-height: 60px;
+    width: 100%;
+}
+#registrations-cart-link-title {
+    border-bottom: 1px solid lightgrey;
+    padding: 0 1.25rem 0 1.25rem;
+    width: 100%;
+}
+#registrations-cart-link-data {
+    padding: 0.625rem 1.25rem 0.6875rem 1.25rem;
+    width: 100%;
+}
+@media(max-width: 1024px) {
+    #accountHeader .accountHeader-section {
+        margin-bottom: 10px;
+    }
+    #accountHeader #glm-header-reg-widget {
+        margin-top: 0;
+        min-height: 0;
+        border-top: 1px;
+        border-bottom: 1px;
+    }
 }
 #accountHeader .button {
     border-radius: 3px;
@@ -508,4 +583,20 @@ span.glm-error {
 #reg_bulletin {
     max-width: 1024px;
     margin: 10px auto;
+}
+@media(max-width: 640px){
+    #accountHeader .button {
+        margin-bottom: 5px;
+    }
+    #glm-header-reg-widget {
+        width: 100%;
+        margin-bottom: 5px;
+    }
+    #glm-header-reg-widget #registrations-cart-link-widget {
+        width: 100% !important;
+    }
+    #regApp #glm-reg-event-name {
+        width: auto;
+        white-space: normal;
+    }
 }
\ No newline at end of file

diff --git a/views/front/registrations/accountHeader.html b/views/front/registrations/accountHeader.html
index 33ed6fe..f1a0876 100644 (file)
--- a/views/front/registrations/accountHeader.html
+++ b/views/front/registrations/accountHeader.html
@@ -1,28 +1,35 @@
-<div id="accountHeader">
-    <div class="glm-right">
+<div id="accountHeader" class="row">
+    
+    <div id="accountHeader-left" class="accountHeader-section small-12 medium-10 medium-centered large-4 large-uncentered columns">
+        {if $page != 'register'}
+            <a href="{$regUrl}" class="button tiny">Register for Another Event</a>
+        {/if}
+        {if $page != 'cart'}
+            <a href="{$regUrl}?page=cart" class="button tiny">Return to Cart</a>
+        {/if}
+        &nbsp;
+    </div>
+    <div id="accountHeader-center" class="accountHeader-section small-12 medium-10 medium-centered large-4 large-uncentered columns">
         <div id="glm-header-reg-widget">
             {if $haveCart}
                 <a href="{$cartUrl}">
-                    <div id="registrations-cart-link-widget" style="width: 80px;  padding: 5px; background-color: #ffffff; border: 1px black solid; position: relative">
-                        <div style="font-size: .5em; line-height: 1.1em;  left: 14px; top: 63px; z-index: 2; font-style: italic;">CART</div>
-                        <div style="font-size: .5em; line-height: 1.1em;  left: 22px; top: 44px; z-index: 2;">
-                            {$numb_events} Event{if $numb_events == 0 || $numb_events > 1}s{/if}<br>
-                            {$numb_registrants} Registrant{if $numb_registrants == 0 || $numb_registrants > 1}s{/if}
-                        </div>
+                    <div id="registrations-cart-link-widget">
+                        <div id="registrations-cart-link-title">CART</div>
+                        <div id="registrations-cart-link-data">{$numb_registrants} Registrant{if $numb_registrants == 0 || $numb_registrants > 1}s{/if} for {$numb_events} Event{if $numb_events == 0 || $numb_events > 1}s{/if}</div>
                     </div>
                 </a>
             {else}
-                <div id="registrations-cart-link-widget" style="width: 80px; padding: 5px; background-color: #f0f0f0; border: 1px black solid; position: relative">
-                    <div style="font-size: .5em; line-height: 1.1em;  left: 14px; top: 65px; z-index: 2; font-style: italic;">CART</div>
-                    <div style="font-size: .5em; line-height: 1.1em;  left: 25px; top: 42px; z-index: 2;">
-                         Cart<br>Empty
+                <div id="registrations-cart-link-widget">
+                    <div id="registrations-cart-link-title">CART</div>
+                    <div id="registrations-cart-link-data">
+                         Empty
                     </div>
                 </div>
             {/if}
             {if $haveOtherRequests}
                 <a id='glm-cart-select-action' href="" onClick="return false;">
-                    <div id="registrations-cart-link-widget-requests" style="width: 80px; height: 1em; padding: 1px; background-color: #ffffff; border: 1px black solid; position: relative">
-                        <div style="font-size: .55em; line-height: 1.1em; left:3px; top: 3px; z-index: 2;">
+                    <div id="registrations-cart-link-widget-requests">
+                        <div>
                         Select other Carts
                         </div>
                     </div>
@@ -56,6 +63,8 @@
                 </div>
             {/if}
         </div>
+    </div>
+    <div id="accountHeader-right" class="accountHeader-section small-12 medium-10 medium-centered large-4 large-uncentered columns">
     {if $loggedIn}
         Logged in as {$loggedIn.fname} {$loggedIn.lname}
         <a class="button tiny" href="{$regUrl}?page=login&option=logout">Logout</a>
@@ -64,13 +73,6 @@
         <a id="register" class="button tiny" href="{$regUrl}?page=register">Create an Account</a>
     {/if}
     </div>
-    {if $page != 'register'}
-        <a href="{$regUrl}" class="button tiny">Register for Another Event</a>
-    {/if}
-    {if $page != 'cart'}
-        <a href="{$regUrl}?page=cart" class="button tiny">Return to Cart</a>
-    {/if}
-    &nbsp;
 
 </div>
 <script type="text/javascript">

diff --git a/views/front/registrations/registration.html b/views/front/registrations/registration.html
index e98b477..cd9931e 100644 (file)
--- a/views/front/registrations/registration.html
+++ b/views/front/registrations/registration.html
@@ -397,5 +397,12 @@ jQuery(function($){
         window.open(url, '_blank');
         return false;
     });
+    var reg_class_detail = "#regApp .glm-reg-event-details";
+    
+    $(reg_class_detail).click(function() {
+        $(this).parent().children(".reg-class-detail").slideToggle("fast", "swing",  function() {});
+        $(this).parent().children(".reg-class-detail").toggleClass("collapsed");
+        
+    });
 });
 </script>