adding read more buttons to the event descriptions based on char count

hiding the rest of the descr if over a certain char count, adding styled
button for read more

diff --git a/css/front.css b/css/front.css
index 75be001..38199d3 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -11,6 +11,31 @@
     overflow: hidden;
     text-align: center;
 }
+.glm-reg-event-descr{
+    height: 46px;
+    overflow: hidden;
+    margin-bottom: 10px;
+}
+.glm-reg-event-descr-container{
+    margin-bottom: 15px;
+}
+.glm-reg-read-more{
+    border: 2px solid #55b776;
+    border-radius: 4px;
+    /* margin-left: .9735rem; */
+    width: 120px;
+    background-color: white;
+    color: #55b776;
+    -webkit-transition: background-color .5s;
+    -moz-transition: background-color .5s;
+    transition: background-color .5s;
+}
+.glm-reg-read-more:hover{
+    cursor: pointer;
+    background-color: #55b776;
+    color: white;
+
+}
 .glm-reg-map {
     width: 100%;
     margin: 0;
@@ -158,7 +183,7 @@
     word-wrap: break-word;
 }
 .glm-reg-event-profile-details:not(.glm-reg-contact-details){
-    margin-bottom: 15px;
+    /* margin-bottom: 15px; */
 }
 #glm-reg-map-container{
     height: 0px;

diff --git a/views/front/registrations/registration.html b/views/front/registrations/registration.html
index e73a9d6..4c23429 100644 (file)
--- a/views/front/registrations/registration.html
+++ b/views/front/registrations/registration.html
@@ -76,26 +76,6 @@
                 </div>
                 <div class="small-12 columns">
                     <div class="row">
-                         <!-- EVENT DESCRIPTION -->
-                        {if $regEvent.eventDescr}
-                            <div class="small-12 columns glm-reg-event-profile-details">
-                                <h4> Event Description </h4>
-                                {$regEvent.eventDescr}
-                            </div>
-                        {/if}
-                        {if $regEvent.descr}
-                            <div class="small-12 columns glm-reg-event-profile-details">
-                                <h4> Registration Details </h4>
-                                {$regEvent.descr}
-                            </div>
-                        {/if}
-                        {if $regEvent.terms}
-                            <div class="small-12 columns glm-reg-event-profile-details">
-                                <h4> Terms &amp; Condtions </h4>
-                                {$regEvent.terms}
-                            </div>
-                        {/if}
-
                         {literal}
                         <div class="small-12 columns glm-reg-event-profile-details">
                             <% if ( this.getClassCount() == 0 ) { %>
@@ -118,6 +98,47 @@
             </div>
         </div>
         <div class="columns small-12 glm-reg-classes"></div>
+        {/literal}
+        <div class="row">
+             <!-- EVENT DESCRIPTION -->
+             {if $regEvent.eventDescr}
+                <div class="small-12 columns glm-reg-event-profile-details glm-reg-event-descr-container">
+                    <h4> Event Description </h4>
+                    <div id="glm-reg-event-descr" class="glm-reg-event-descr">
+                        {$regEvent.eventDescr}
+                    </div> 
+                    {if $regEvent.eventDescr|count_characters:true > 280}
+                        <div data-descr="glm-reg-event-descr" class="glm-reg-read-more small-12 columns">Read More</div>
+                    {/if}
+                </div>
+                
+            {/if}
+            {if $regEvent.descr}
+                <div class="small-12 columns glm-reg-event-profile-details glm-reg-event-descr-container">
+                    <h4> Registration Details </h4>
+                    <div id="glm-reg-descr" class="glm-reg-event-descr">
+                        {$regEvent.descr}
+                    </div>   
+                    {if $regEvent.descr|count_characters:true > 280}
+                        <div data-descr="glm-reg-descr" class="glm-reg-read-more small-12 columns">Read More</div>
+                    {/if}
+                </div>
+                
+            {/if}
+            {if $regEvent.terms}
+                <div class="small-12 columns glm-reg-event-profile-details glm-reg-event-descr-container">
+                    <h4> Terms &amp; Condtions </h4>
+                    <div id="glm-reg-event-terms" class="glm-reg-event-descr">
+                        {$regEvent.terms}
+                    </div> 
+                    {if $regEvent.terms|count_characters:true > 280}
+                        <div data-descr="glm-reg-event-terms" class="glm-reg-read-more small-12 columns">Read More </div>
+                    {/if}
+                </div>
+                
+            {/if}
+        </div>
+        {literal}
         <div class="columns small-12">
             <div class="glm-reg-submit">
                 <div class="glm-reg-warning">You have not yet submitted your registration! <img src="{/literal}{$assetUrl}{literal}/fingerRightRed.svg" style="height: 2em;">
@@ -497,7 +518,26 @@ jQuery(function($){
     $(reg_class_detail).click(function() {
         $(this).parent().children(".reg-class-detail").slideToggle("fast", "swing",  function() {});
         $(this).parent().children(".reg-class-detail").toggleClass("collapsed");
-
+    });
+    $('.glm-reg-read-more').on("click", function(){
+        var id = $(this).data('descr');
+        var descr = $('body').find( $('#' + id) );
+        var descr_length = descr.text().length;
+        console.log(descr_length);
+        if( descr.height() < 47 && descr_length > 150 ){
+            $(descr).animate({
+                height: '100%',
+            }, function(){
+                $(descr).css("overflow", "visible");
+            })
+        } else {
+            $(descr).animate({
+                height: '46px',
+            }, function(){
+                $(descr).css("overflow", "hidden");
+            })
+        }
+        
     });
 });
 </script>