adding view course button to the courses list

adding style and links to the courses list

diff --git a/js/custom.js b/js/custom.js
index ac32cc6..9af06fb 100644 (file)
--- a/js/custom.js
+++ b/js/custom.js
@@ -155,6 +155,20 @@ jQuery(document).ready(function($){
         $('.menu-login').on("click", function(){
             $("#modal-login").toggleClass("show-login");
         })
-
     }
+    let course_cards = $('.cmvl-courses-list-shortcode').find('tbody').children('tr');
+    course_cards.each(function(){
+        let link = $(this).find('a').attr('href');
+        if(link){
+            $(this).attr("data-url", link);
+            $(this).append( $('<a></a>',{
+                "class": "view-course-link",
+                "href": link,
+                "text": "View Course"
+            }));
+        }
+    })
+    course_cards.on("click", function(){
+        window.location = $(this).data('url');
+    })
 });
\ No newline at end of file

diff --git a/style.css b/style.css
index c121645..f350371 100644 (file)
--- a/style.css
+++ b/style.css
@@ -2508,7 +2508,9 @@ Responsive grid for pages
    text-indent: 999999999px;
 }
 
-
+div.cmvl-courses-list-shortcode table tbody tr{
+    position: relative;
+}
 div.cmvl-courses-list-shortcode table thead tr th{
    display: none;
 }
@@ -2526,7 +2528,7 @@ div.cmvl-courses-list-shortcode table tbody tr{
    box-shadow: 5px 5px 25px 0 rgba(46,61,73,.2);
 }
 div.cmvl-courses-list-shortcode table tbody tr td{
-   text-align: center;
+   /* text-align: center; */
 }
 div.cmvl-courses-list-shortcode table tbody tr:hover{
    cursor: pointer;
@@ -2622,4 +2624,28 @@ body #content .parallax-section:first-child,body #content .parallax-section:last
 #modal-login.show-login{
     top: 500px;
     position: fixed;
+}
+body .cmvl-navbar-navigation {
+    border: none;
+}
+body .cmvl-navbar-navigation span{
+    background: #0071BC;
+    display: inline;
+    padding: 4px;
+    color: white;
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
+}
+.view-course-link{
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+    padding: 5px;
+    border: 1px solid #00AEEF;
+    border-radius: 5px;
+    transition: background-color 400ms ease-in-out, color 400ms ease-in-out;
+}
+.view-course-link:hover{
+    background-color: #00AEEF;
+    color: white;
 }
\ No newline at end of file