adding icons and button to the course cards list
authorAnthony Talarico <talarico@gaslightmedia.com>
Fri, 20 Apr 2018 14:10:14 +0000 (10:10 -0400)
committerAnthony Talarico <talarico@gaslightmedia.com>
Fri, 20 Apr 2018 14:10:14 +0000 (10:10 -0400)
adding new icons and view buttons to the course cards list

header.php
js/custom.js
style.css

index 35af285..9f0b743 100644 (file)
@@ -20,7 +20,9 @@
 
 <?php wp_head(); ?>
 </head>
-
+<script>
+    window.icon_url = '<?php echo get_template_directory_uri(); ?>';
+</script>
 <body <?php body_class(); ?>>
 <div id="modal-login">
     <?php echo do_shortcode('[glm-login-form]'); ?>
index 9af06fb..4e8ff02 100644 (file)
@@ -156,9 +156,14 @@ jQuery(document).ready(function($){
             $("#modal-login").toggleClass("show-login");
         })
     }
+    let icon_url = `${window.icon_url}/assets/course-icon.png`;
     let course_cards = $('.cmvl-courses-list-shortcode').find('tbody').children('tr');
     course_cards.each(function(){
         let link = $(this).find('a').attr('href');
+        $(this).append( $('<img>', {
+            "class": "view-course-icon",
+            "src": icon_url
+        }));
         if(link){
             $(this).attr("data-url", link);
             $(this).append( $('<a></a>',{
index f350371..1d21db2 100644 (file)
--- a/style.css
+++ b/style.css
@@ -2519,7 +2519,7 @@ div.cmvl-courses-list-shortcode table tbody tr{
    display:block;
    height:auto;
    margin: 10px;
-   padding: 10px 0px 50px 20px;
+   padding: 10px 0px 50px 50px;
    overflow:auto;
    float: left;
    /* border: 1px solid lightgray; */
@@ -2648,4 +2648,10 @@ body .cmvl-navbar-navigation span{
 .view-course-link:hover{
     background-color: #00AEEF;
     color: white;
+}
+.view-course-icon{
+    position:  absolute;
+    left: 5px;
+    top: 2px;
+    max-width: 30px;
 }
\ No newline at end of file