adding overlay with badge when a course is completed

diff --git a/assets/css/glm-dev.css b/assets/css/glm-dev.css
index 64d9329..c4e5fd8 100644 (file)
--- a/assets/css/glm-dev.css
+++ b/assets/css/glm-dev.css
@@ -1,3 +1,3 @@
-body .cmvl-navbar{max-width:600px;margin:20px auto}body .cmvl-search{max-width:550px;margin:0 auto}body.page-template-page-php #main-slider{display:none}body #page header#masthead .menu-lessons{display:none}body #page header#masthead .menu-login{display:none}@media (min-width: 1000px){body #page header#masthead .menu-login{display:block}}body #page header#masthead .menu-mobile-login{display:none}@media (max-width: 1000px){body #page header#masthead .menu-mobile-login{display:block}}body #page header#masthead .menu-logout{display:none}body #page #content .mid-content .interior-page-content{width:100%}body.logged-in #page header#masthead .menu-login{display:none}body.logged-in #page header#masthead .menu-mobile-login{display:none}body.logged-in #page header#masthead .menu-lessons{display:block}body.logged-in #page header#masthead .menu-logout{display:block}@media (min-width: 1000px){.interior-featured{position:relative;top:90px}}@media (min-width: 768px) and (max-width: 1000px){.interior-featured{position:relative;top:60px}}body .glm-badge-alert#quiz-badge,body .glm-badge-alert#lesson-badge{display:none;width:300px;position:absolute;top:25px;right:10px;z-index:99999}body .glm-badge-alert#quiz-badge:hover,body .glm-badge-alert#lesson-badge:hover{cursor:pointer}body .glm-badge-alert#quiz-badge img,body .glm-badge-alert#lesson-badge img{max-width:75px}body .glm-badge-alert#quiz-badge span,body .glm-badge-alert#lesson-badge span{font-size:18px;position:absolute;top:50%;transform:translateY(-50%);color:white;left:90px}@keyframes shake{10%,90%{transform:translate3d(-2px, 0, 0)}20%,80%{transform:translate3d(3px, 0, 0)}30%,50%,70%{transform:translate3d(-5px, 0, 0)}40%,60%{transform:translate3d(5px, 0, 0)}}body .glm-badge-alert#course-badge{display:none;width:300px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:99999}body .glm-badge-alert#course-badge:hover{cursor:pointer}body .glm-badge-alert#course-badge img{max-width:75px}body .glm-badge-alert#course-badge span{font-size:18px;position:absolute;top:50%;transform:translateY(-50%);color:white}.shake{animation:shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both}
+body .cmvl-navbar{max-width:600px;margin:20px auto}body .cmvl-search{max-width:550px;margin:0 auto}body.page-template-page-php #main-slider{display:none}body #page header#masthead .menu-lessons{display:none}body #page header#masthead .menu-login{display:none}@media (min-width: 1000px){body #page header#masthead .menu-login{display:block}}body #page header#masthead .menu-mobile-login{display:none}@media (max-width: 1000px){body #page header#masthead .menu-mobile-login{display:block}}body #page header#masthead .menu-logout{display:none}body #page #content .mid-content .interior-page-content{width:100%}body.logged-in #page header#masthead .menu-login{display:none}body.logged-in #page header#masthead .menu-mobile-login{display:none}body.logged-in #page header#masthead .menu-lessons{display:block}body.logged-in #page header#masthead .menu-logout{display:block}@media (min-width: 1000px){.interior-featured{position:relative;top:90px}}@media (min-width: 768px) and (max-width: 1000px){.interior-featured{position:relative;top:60px}}body .glm-badge-alert#quiz-badge,body .glm-badge-alert#lesson-badge{display:none;width:300px;position:absolute;top:25px;right:10px;z-index:99999;position:relative;background:#3D3D3D}body .glm-badge-alert#quiz-badge:hover,body .glm-badge-alert#lesson-badge:hover{cursor:pointer}body .glm-badge-alert#quiz-badge img,body .glm-badge-alert#lesson-badge img{max-width:75px}body .glm-badge-alert#quiz-badge span,body .glm-badge-alert#lesson-badge span{font-size:18px;position:absolute;top:50%;transform:translateY(-50%);color:white;left:90px}@keyframes shake{10%,90%{transform:translate3d(-2px, 0, 0)}20%,80%{transform:translate3d(3px, 0, 0)}30%,50%,70%{transform:translate3d(-5px, 0, 0)}40%,60%{transform:translate3d(5px, 0, 0)}}body #glm-badge-overlay{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,0.7);display:none;z-index:99999}body #glm-badge-overlay .glm-badge-alert#course-badge{border-radius:8px;position:relative;background:#3D3D3D;min-width:300px;width:35%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:99999}body #glm-badge-overlay .glm-badge-alert#course-badge:hover{cursor:pointer}body #glm-badge-overlay .glm-badge-alert#course-badge img{max-width:75px;border-top-left-radius:8px;border-bottom-left-radius:8px}body #glm-badge-overlay .glm-badge-alert#course-badge .course-badge-text{position:absolute;top:50%;left:55%;float:right;text-align:center;width:calc(100% - 75px);transform:translate(-50%, -50%);line-height:1}body #glm-badge-overlay .glm-badge-alert#course-badge .course-badge-text div{font-size:18px;color:white}body #glm-badge-overlay .glm-badge-alert#course-badge .course-badge-text span{font-size:18px;color:white}body #glm-badge-overlay .glm-badge-alert#course-badge #glm-course-passed{border-radius:8px}.shake{animation:shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both}
 
 /*# sourceMappingURL=glm-dev.css.map */

diff --git a/assets/css/glm-dev.css.map b/assets/css/glm-dev.css.map
index 1a7fcb1..31309c5 100644 (file)
--- a/assets/css/glm-dev.css.map
+++ b/assets/css/glm-dev.css.map
@@ -1 +1 @@
-{"version":3,"file":"glm-dev.css","sources":["glm-dev.scss","_video-lessons.scss","_body.scss","_badge.scss"],"sourcesContent":["@import 'video-lessons';\n@import 'body';\n@import 'badge';\n","body{\n    .cmvl-navbar{\n        max-width: 600px;\n        margin: 20px auto;\n    }\n    .cmvl-search{\n        max-width: 550px;\n        margin: 0 auto;\n    }\n}","body{\n    /* STANDARD STYLES */\n    &.page-template-page-php{\n        #main-slider{\n            display: none;\n        }\n    }\n    \n    #page{\n        header#masthead{\n            .menu-lessons{\n                display: none;\n            }\n            .menu-login{\n                display: none;\n            }\n            @media (min-width: 1000px){\n                .menu-login{\n                    display: block;\n                }\n            }\n            .menu-mobile-login{\n                display: none;\n            }\n            @media (max-width: 1000px){\n                .menu-mobile-login{\n                    display: block;\n                }\n            }\n            .menu-logout{\n                display: none;\n            }\n        }\n        #content{\n            .mid-content{\n                .interior-page-content{\n                    width: 100%;\n                }  \n            }\n        }\n    }\n    /* LOGGED IN SPECIFIC STYLES */\n    &.logged-in{\n        #page{\n            header#masthead{\n                .menu-login{\n                    display: none;\n                }\n                .menu-mobile-login{\n                    display: none;\n                }\n                .menu-lessons{\n                    display: block;\n                }\n                .menu-logout{\n                    display: block;\n                }\n                \n            }\n        }\n    }\n}\n.interior-featured{\n    @media (min-width: 1000px){\n        position: relative;\n        top: 90px;\n    }\n    @media (min-width: 768px) and (max-width: 1000px){\n        position: relative;\n        top: 60px;\n    }\n}","body{\r\n    .glm-badge-alert#quiz-badge,.glm-badge-alert#lesson-badge {\r\n        &:hover{\r\n            cursor: pointer;\r\n        }\r\n        display: none;\r\n        width: 300px;\r\n        position: absolute;\r\n        top: 25px;\r\n        right: 10px;\r\n        z-index: 99999;\r\n        img{\r\n            max-width: 75px;\r\n        }\r\n        span{\r\n            font-size: 18px;\r\n            position: absolute;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            color:white;\r\n            left: 90px;\r\n        }\r\n\r\n        \r\n        @keyframes shake {\r\n            10%, 90% {\r\n              transform: translate3d(-2px, 0, 0);\r\n            }\r\n          \r\n            20%, 80% {\r\n              transform: translate3d(3px, 0, 0);\r\n            }\r\n          \r\n            30%, 50%, 70% {\r\n              transform: translate3d(-5px, 0, 0);\r\n            }\r\n          \r\n            40%, 60% {\r\n              transform: translate3d(5px, 0, 0);\r\n            }\r\n          }\r\n    }\r\n\r\n    .glm-badge-alert#course-badge{\r\n        &:hover{\r\n            cursor: pointer;\r\n        }\r\n        display: none;\r\n        width: 300px;\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        z-index: 99999;\r\n        img{\r\n            max-width: 75px;\r\n        }\r\n        span{\r\n            font-size: 18px;\r\n            position: absolute;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            color:white;\r\n        }\r\n          \r\n    }\r\n}\r\n.shake{\r\n    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;\r\n}"],"mappings":"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","names":[]}
\ No newline at end of file
+{"version":3,"file":"glm-dev.css","sources":["glm-dev.scss","_video-lessons.scss","_body.scss","_badge.scss"],"sourcesContent":["@import 'video-lessons';\n@import 'body';\n@import 'badge';\n","body{\n    .cmvl-navbar{\n        max-width: 600px;\n        margin: 20px auto;\n    }\n    .cmvl-search{\n        max-width: 550px;\n        margin: 0 auto;\n    }\n}","body{\n    /* STANDARD STYLES */\n    &.page-template-page-php{\n        #main-slider{\n            display: none;\n        }\n    }\n    \n    #page{\n        header#masthead{\n            .menu-lessons{\n                display: none;\n            }\n            .menu-login{\n                display: none;\n            }\n            @media (min-width: 1000px){\n                .menu-login{\n                    display: block;\n                }\n            }\n            .menu-mobile-login{\n                display: none;\n            }\n            @media (max-width: 1000px){\n                .menu-mobile-login{\n                    display: block;\n                }\n            }\n            .menu-logout{\n                display: none;\n            }\n        }\n        #content{\n            .mid-content{\n                .interior-page-content{\n                    width: 100%;\n                }  \n            }\n        }\n    }\n    /* LOGGED IN SPECIFIC STYLES */\n    &.logged-in{\n        #page{\n            header#masthead{\n                .menu-login{\n                    display: none;\n                }\n                .menu-mobile-login{\n                    display: none;\n                }\n                .menu-lessons{\n                    display: block;\n                }\n                .menu-logout{\n                    display: block;\n                }\n                \n            }\n        }\n    }\n}\n.interior-featured{\n    @media (min-width: 1000px){\n        position: relative;\n        top: 90px;\n    }\n    @media (min-width: 768px) and (max-width: 1000px){\n        position: relative;\n        top: 60px;\n    }\n}","body{\r\n    .glm-badge-alert#quiz-badge,.glm-badge-alert#lesson-badge {\r\n        &:hover{\r\n            cursor: pointer;\r\n        }\r\n        display: none;\r\n        width: 300px;\r\n        position: absolute;\r\n        top: 25px;\r\n        right: 10px;\r\n        z-index: 99999;\r\n        position: relative;\r\n        background: #3D3D3D;\r\n        img{\r\n            max-width: 75px;\r\n        }\r\n        span{\r\n            font-size: 18px;\r\n            position: absolute;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            color:white;\r\n            left: 90px;\r\n        }\r\n\r\n        \r\n        @keyframes shake {\r\n            10%, 90% {\r\n              transform: translate3d(-2px, 0, 0);\r\n            }\r\n          \r\n            20%, 80% {\r\n              transform: translate3d(3px, 0, 0);\r\n            }\r\n          \r\n            30%, 50%, 70% {\r\n              transform: translate3d(-5px, 0, 0);\r\n            }\r\n          \r\n            40%, 60% {\r\n              transform: translate3d(5px, 0, 0);\r\n            }\r\n          }\r\n    }\r\n    #glm-badge-overlay{\r\n        position: fixed;\r\n        left: 0;\r\n        top: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: rgba(255,255,255, .7);\r\n        display: none;\r\n        z-index: 99999;\r\n        .glm-badge-alert#course-badge{\r\n            &:hover{\r\n                cursor: pointer;\r\n            }\r\n            border-radius: 8px;\r\n            position: relative;\r\n            background: #3D3D3D;\r\n            // display: none;\r\n            min-width: 300px;\r\n            width: 35%;\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n            z-index: 99999;\r\n            img{\r\n                max-width: 75px;\r\n                border-top-left-radius: 8px;\r\n                border-bottom-left-radius: 8px;\r\n            }\r\n            .course-badge-text{\r\n                position: absolute;\r\n                top: 50%;\r\n                left: 55%;\r\n                float: right;\r\n                text-align: center;\r\n                width: calc(100% - 75px);\r\n                transform: translate(-50%, -50%);\r\n                line-height: 1;\r\n                div{\r\n                    font-size: 18px;\r\n                    color: white;\r\n                }\r\n                span{\r\n                    font-size: 18px;\r\n                    \r\n                    color:white;\r\n                }\r\n            }\r\n            \r\n            #glm-course-passed{\r\n                border-radius: 8px;\r\n            }\r\n        }\r\n    }\r\n}\r\n.shake{\r\n    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;\r\n}"],"mappings":"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","names":[]}
\ No newline at end of file

diff --git a/assets/js/glm-dev.js b/assets/js/glm-dev.js
index 94eb4e8..020bd16 100644 (file)
--- a/assets/js/glm-dev.js
+++ b/assets/js/glm-dev.js
@@ -1 +1 @@
-jQuery(function(n){n(".glm-badge-alert").on("click",function(){n(this).fadeOut("slow")})});
\ No newline at end of file
+jQuery(function(t){t(".glm-badge-alert").on("click",function(){t(this).fadeOut("slow"),"glm-badge-overlay"===t(this).parent().attr("id")&&t(this).parent().fadeOut("slow")})});
\ No newline at end of file

diff --git a/footer.php b/footer.php
index f3b95f2..79c378b 100644 (file)
--- a/footer.php
+++ b/footer.php
@@ -61,26 +61,32 @@
 
 <?php wp_footer(); ?>
     <div class="glm-badge-alert" id="quiz-badge">
-               <div style="position: relative;background: #3D3D3D;" id="glm-quiz-passed">
+               <div id="glm-quiz-passed">
                        <img style="float: left;" src="<?php echo get_template_directory_uri(); ?>/assets/badge.png" alt="" />
                        <span> You've passed the quiz </span>
                        <div style="clear: both;"> </div>
                </div>
     </div>
     <div class="glm-badge-alert" id="lesson-badge">
-               <div style="position: relative;background: #3D3D3D;" id="glm-quiz-passed">
+               <div id="glm-quiz-passed">
                        <img style="float: left;" src="<?php echo get_template_directory_uri(); ?>/assets/badge.png" alt="" />
                        <span> You've completed the lesson! </span>
                        <div style="clear: both;"> </div>
                </div>
-       </div>
-       <div class="glm-badge-alert" id="course-badge">
-               <div style="position: relative;background: #3D3D3D;" id="glm-course-passed">
-                       <img style="float: left;" src="<?php echo get_template_directory_uri(); ?>/assets/badge.png" alt="" />
-                       <span> You've completed the course! </span>
+    </div>
+    <div id="glm-badge-overlay">
+        <div class="glm-badge-alert" id="course-badge">
+                   <div id="glm-course-passed">
+                <img style="float: left;" src="<?php echo get_template_directory_uri(); ?>/assets/badge.png" alt="" />
+                <div class="course-badge-text">
+                    <div>Congratulations!</div>
+                    <span> You've completed the course! </span>
+                </div>
                        <div style="clear: both;"> </div>
                </div>
-       </div>
+           </div>
+    </div>
+       
        <script>
                (function(open) {
                        const $ = jQuery;

diff --git a/glm-dev/js/glm-dev.js b/glm-dev/js/glm-dev.js
index 2372d07..f62d342 100644 (file)
--- a/glm-dev/js/glm-dev.js
+++ b/glm-dev/js/glm-dev.js
@@ -1,5 +1,9 @@
 jQuery(function($){ 
     $(".glm-badge-alert").on("click", function(){
+
         $(this).fadeOut("slow");
+        if($(this).parent().attr("id") === "glm-badge-overlay"){
+            $(this).parent().fadeOut('slow');
+        }
     });
 });
\ No newline at end of file

diff --git a/glm-dev/scss/_badge.scss b/glm-dev/scss/_badge.scss
index eefd9c6..78d855c 100644 (file)
--- a/glm-dev/scss/_badge.scss
+++ b/glm-dev/scss/_badge.scss
@@ -9,6 +9,8 @@ body{
         top: 25px;
         right: 10px;
         z-index: 99999;
+        position: relative;
+        background: #3D3D3D;
         img{
             max-width: 75px;
         }
@@ -40,29 +42,59 @@ body{
             }
           }
     }
-
-    .glm-badge-alert#course-badge{
-        &:hover{
-            cursor: pointer;
-        }
+    #glm-badge-overlay{
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(255,255,255, .7);
         display: none;
-        width: 300px;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
         z-index: 99999;
-        img{
-            max-width: 75px;
-        }
-        span{
-            font-size: 18px;
+        .glm-badge-alert#course-badge{
+            &:hover{
+                cursor: pointer;
+            }
+            border-radius: 8px;
+            position: relative;
+            background: #3D3D3D;
+            // display: none;
+            min-width: 300px;
+            width: 35%;
             position: absolute;
             top: 50%;
-            transform: translateY(-50%);
-            color:white;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 99999;
+            img{
+                max-width: 75px;
+                border-top-left-radius: 8px;
+                border-bottom-left-radius: 8px;
+            }
+            .course-badge-text{
+                position: absolute;
+                top: 50%;
+                left: 55%;
+                float: right;
+                text-align: center;
+                width: calc(100% - 75px);
+                transform: translate(-50%, -50%);
+                line-height: 1;
+                div{
+                    font-size: 18px;
+                    color: white;
+                }
+                span{
+                    font-size: 18px;
+                    
+                    color:white;
+                }
+            }
+            
+            #glm-course-passed{
+                border-radius: 8px;
+            }
         }
-          
     }
 }
 .shake{

diff --git a/style.css b/style.css
index 8447c1e..623840e 100644 (file)
--- a/style.css
+++ b/style.css
@@ -1,5 +1,5 @@
 /*
-Theme Name: Hospitality Mentality
+Theme Name: Sault Ste. Marie 360
 Theme URI: https://accesspressthemes.com/wordpress-themes/accesspress-parallax/
 Author: AccessPress Themes
 Author URI: https://accesspressthemes.com/