nxgreport 0.8.0 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2248123c4fd3dd1b0f9f8b51be96a58d7ce3d936037bbd536fc6fb46f84d248a
-  data.tar.gz: 0e59c0545599b7d868a890cbca5f88f69bab7fa2bbf4f78870b2272fc64a91e7
+  metadata.gz: a070244e38842f494942ea189deba31e45360a50857946d17c11749ab10db465
+  data.tar.gz: f903e4695cffc3a15069340f563e2ed7930d1531139ff7a4b6219786e8452649
 SHA512:
-  metadata.gz: f7cae8d3cd35d9015a2ec8ec04ab928d87217efb6cc0df27a2c13671bd8155470b761cf547f46103be22cf243cebd3fe75a895b786ed709c38abe2da1e14c89c
-  data.tar.gz: 55206eb129ccb97ce771fcd7b67a90948e3bad1ba1117baab58ce3cfea7d8e7b18931f651231aafdb4f384e06d934fa5ec64dc362464fad76b9d951ea213a43d
+  metadata.gz: d65497235406123d769ac72f0f61b1a16ca565926911d34819ddcd8d5ea730f2363d969212e372613a9457d97a1649ed8711fc15c75ee0c619a1d34d804adec8
+  data.tar.gz: 8eb082850d2be42ef630e83e23a68e1058182ab26ee84f8738b17d8f8964b5e45de460ee05d905fe8e15bbde41f577348055457f5da00f416b2cf542064cdc17

data/lib/nxgcore.rb

@@ -1,5 +1,6 @@
 require 'fileutils'
-
+require 'pry'
+require 'json'
 require 'nxgcss.rb'
 
 class NxgCore
@@ -18,19 +19,11 @@ class NxgCore
             @data_provider[:report_path] = location.empty? ? "./NxgReport.html" : location
             folder_check()
             @data_provider[:title] = title
-            @data_provider[:title_color] = "background: linear-gradient(to bottom right, #ff644e, #cb3018);"
+            @data_provider[:title_color] = ""
             @data_provider[:open_on_completion] = false
-            @data_provider[:features] = Hash.new()
+            @data_provider[:features] = Array.new()
             @start_time = Time.now.to_f
         end
-
-        def set_title_color(hex_color: "")
-          if hex_color.strip().empty?() || hex_color.strip()[0] != "#"
-            log("set_title_color method is called with empty color. please check the code.")
-            return
-          end
-          @data_provider[:title_color] = "background-color: #{hex_color.strip().downcase()};"
-        end
     
         def open_upon_execution(value: true)
           return if !value
@@ -75,7 +68,7 @@ class NxgCore
           @data_provider[:execution_date] = date
         end
     
-        def log_test(feature_name: "", test_status: "")
+        def log_test(feature_name: "", test_name:"", test_status: "", comments: "")
           if feature_name.nil?() || feature_name.strip.empty?()
             log("Feature name cannot be empty.")
             return
@@ -85,18 +78,31 @@ class NxgCore
             log("Test status cannot be empty.")
             return
           end
-          
-          test_pass = test_status.downcase.include?('pass')
-          name = feature_name.strip()
-  
-          if !@data_provider[:features].key?(name)
-            @data_provider[:features][name]=[0,0,0]
+
+          if test_name.nil?() || test_name.strip.empty?()
+            log("Test name cannot be empty.")
+            return
           end
 
-          @data_provider[:features][name][0]+=1
-          @data_provider[:total]+=1
-          @data_provider[:features][name][(test_pass) ? 1 : 2]+=1
-          @data_provider[(test_pass) ? :pass : :fail]+=1
+          f_name = feature_name.strip
+          t_name = test_name.strip
+          t_pass = test_status.strip.downcase.include?('pass') ? true : false
+          t_comments = comments.strip
+
+          if !feature_exists?(f_name)
+            new_feature = {
+              "name" => f_name,
+              "total" => 0,
+              "pass" => 0,
+              "fail" => 0,
+              "tests" => Array.new()
+            }
+            @data_provider[:features].push(new_feature)
+          end
+
+          update_feature(f_name, t_name, t_pass, t_comments)
+          @data_provider[:total] += 1
+          @data_provider[t_pass ? :pass : :fail] += 1
         end
     
         def build(execution_time: 0)
@@ -108,6 +114,29 @@ class NxgCore
         end
     
         # Private methods
+
+        def update_feature(f_name, t_name, t_pass, t_comments)
+          @data_provider[:features].each do |feature|
+            if feature["name"].eql?(f_name)
+              feature["total"]+=1
+              feature[t_pass ? "pass" : "fail"]+=1
+              feature["tests"].push({
+                "name" => t_name,
+                "testPass" => t_pass,
+                "comments" => t_comments
+              })
+              return
+            end
+          end
+        end
+
+        def feature_exists?(feature_name)
+          @data_provider[:features].each do |feature|
+            return true if feature["name"].eql?(feature_name)
+          end
+          return false
+        end
+
         def log(message)
           puts("🤖- #{message}")
         end
@@ -163,8 +192,20 @@ class NxgCore
         end
 
         def body()
-          "<body class=\"dark\" id=\"app\" onload=\"onStart()\">
-            <div class=\"body-wrapper\">
+          "<body id=\"app\" onload=\"onRefresh()\">
+            <div id=\"sidebar\" onclick=\"closeDetails()\">
+              <div id=\"sidebar-div\">
+                <div id=\"sidebar-title-wrap\">
+                  <h1 id=\"sidebar-title\">Title</h1>
+                  &nbsp;&nbsp;
+                  <i class=\"material-icons\" id=\"sidebar-status\">check_circle</i>
+                </div>
+              </div>
+            </div>
+          <div id=\"sidebar-overlay\" onclick=\"closeDetails()\">
+            <div id=\"sidebar-overlay-grid\"></div>
+          </div>
+            <div id=\"body-wrap\">
               #{header()}
               #{config()}
               #{features()}
@@ -174,30 +215,26 @@ class NxgCore
         end
 
         def header()
-          "<div class=\"header\">
-            <h1>#{@data_provider[:title]}</h1>
-            <div class=\"button-wrapper\">
-              <button id=\"theme-switch\" onclick=\"handleThemeSwitch()\">
-                <i class=\"material-icons\" id=\"theme-switch-icon\">brightness_2</i>
+          "<div id=\"header\">
+            <h1 id=\"app-title\">#{@data_provider[:title]}</h1>
+            <div id=\"theme-wrap\">
+              <button id=\"theme-switch\" onclick=\"switchTheme()\">
+                <i class=\"material-icons\" id=\"theme-icon\">brightness_2</i>
               </button>
             </div>
           </div>"
         end
 
         def features()
-          "<div class=\"mc\"></div>"
+          "<div class=\"features-grid\"></div>"
       end
 
       def features_js_array()
-        js_array = ''
-        @data_provider[:features].each do |name, metrics|
-          js_array += "{ name: \"#{name}\", total: #{metrics[0]}, pass: #{metrics[1]}, fail: #{metrics[2]} },"
-        end
-        return js_array
+        return @data_provider[:features].to_s.gsub("=>", ":")
       end
 
         def footer()
-          "<div class=\"footer\">
+          "<div id=\"footer\">
             <p>
               Developed by
               <span>
@@ -214,91 +251,173 @@ class NxgCore
 
         def javascript()
           "<script>
-            var theme = \"dark\";
-            var displayAllTests = true;
-            
-            var features = [
-                #{features_js_array()}
-            ]
-        
-            function onStart() {
-              displayAll();
-            }
-        
-            function handleThemeSwitch() {
-              if (theme === \"dark\") {
-                theme = \"light\";
-                document.getElementById(\"app\").classList.remove(\"dark\");
-                document.getElementById(\"theme-switch-icon\").innerHTML = \"wb_sunny\";
-                document.getElementById(\"theme-switch-icon\");
-                return;
-              }
-              if (theme === \"light\") {
-                theme = \"dark\";
-                document.getElementById(\"app\").classList.add(\"dark\");
-                document.getElementById(\"theme-switch-icon\").innerHTML = \"brightness_2\";
-              }
-            }
-        
-            function handleFilter() {
-              displayAllTests = !displayAllTests;
-              if (displayAllTests) {
-                displayAll();
-              } else {
-                displayFailuresOnly();
-              }
-            }
-        
-            function displayAll() {
-              $(\"#filter h5\").text(\"All\");
-              $(\".banner-in-the-middle\").removeClass(\"banner-in-the-middle\").addClass(\"mc\");
-              $(\".mc\").empty();
-              features.forEach((item) => {
-                $(\".mc\").append(
-                  `<div class=\"module dark ${
-                    item.fail > 0 ? \"danger\" : \"\"
-                  }\"><div class=\"funcname\"><h4>${
-                    item.name
-                  }</h4></div><div class=\"total\"><h6>Total</h6><h4>${
-                    item.total
-                  }</h4></div><div class=\"pass\"><h6>Passed</h6><h4>${
-                    item.pass
-                  }</h4></div><div class=\"fail\"><h6>Failed</h6><h4>${
-                    item.fail
-                  }</h4></div></div>`
+          var darkTheme = false;
+          var displayFailuresOnly = false;
+      
+          const allFeatures = #{features_js_array};
+      
+          var dataSource = [];
+      
+          const STATUS = {
+            pass: \"check_circle\",
+            fail: \"cancel\",
+          };
+      
+          function onRefresh() {
+            switchTheme();
+            dataSource = allFeatures;
+            setFilter();
+          }
+      
+          function updateView() {
+            $(\".banner\").removeClass(\"banner\").addClass(\"features-grid\");
+            $(\".features-grid\").empty();
+      
+            if (dataSource.length === 0) {
+              console.log(\"inside\");
+              $(\".features-grid\")
+                .removeClass(\"features-grid\")
+                .addClass(\"banner\")
+                .append(
+                  `<i class=\"banner-text green-font material-icons\">done_all</i><h1>No Failures</>`
                 );
+              return;
+            }
+      
+            dataSource.forEach((feature, index) => {
+              $(\".features-grid\").append(
+                `<div class=\"module dark ${
+                  feature.fail > 0 ? \"red-bg\" : \"\"
+                }\" onclick=\"showDetails(${index})\"><div class=\"funcname\"><h4>${
+                  feature.name
+                }</h4></div><div class=\"total\"><h6>Total</h6><h4>${
+                  feature.total
+                }</h4></div><div class=\"pass green-font\"><h6>Passed</h6><h4>${
+                  feature.pass
+                }</h4></div><div class=\"fail red-font\"><h6>Failed</h6><h4>${
+                  feature.fail
+                }</h4></div></div>`
+              );
+            });
+          }
+      
+          function setFilter() {
+            if (displayFailuresOnly) {
+              $(\"#filter h5\").text(\"Failed\");
+              dataSource = allFeatures.filter((feature) => {
+                return feature.fail > 0;
               });
+            } else {
+              $(\"#filter h5\").text(\"All\");
+              dataSource = allFeatures;
             }
-
-            function displayFailuresOnly() {
-              $(\"#filter h5\").text(\"Failures\");
-              $(\".banner-in-the-middle\").removeClass(\"banner-in-the-middle\").addClass(\"mc\");
-              $(\".mc\").empty();
-              failureCount = 0;
-              features.forEach((item) => {
-                if (item.fail > 0) {
-                  failureCount++;
-                  $(\".mc\").append(
-                    `<div class=\"module dark danger\"><div class=\"funcname\"><h4>${item.name}</h4></div><div class=\"total\"><h6>Total</h6><h4>${item.total}</h4></div><div class=\"pass\"><h6>Passed</h6><h4>${item.pass}</h4></div><div class=\"fail\"><h6>Failed</h6><h4>${item.fail}</h4></div></div>`
-                  );
+            updateView();
+            displayFailuresOnly = !displayFailuresOnly;
+          }
+      
+          function filterAllFailed() {
+            allFailedTests = [];
+      
+            failedFeatures = allFeatures.filter((feature) => {
+              return feature.fail > 0;
+            });
+      
+            for (index = 0; index < failedFeatures.length; index++) {
+              failedFeatures[index].tests.filter((test) => {
+                if (!test.testPass) {
+                  allFailedTests.push(test);
                 }
               });
-              if (failureCount === 0) {
-              $(\".mc\")
-                .removeClass(\"mc\")
-                .addClass(\"banner-in-the-middle\")
-                .append(
-                  `<i class=\"banner-text material-icons\">done_all</i><h1>No Failures</>`
-                );
+            }
+      
+            $(\"#sidebar-overlay\").css(\"visibility\", \"visible\");
+            $(\"#sidebar-overlay\").css(\"margin-left\", \"40%\");
+            $(\"#sidebar\").css(\"width\", \"40%\");
+            $(\"#sidebar-title\").css(\"visibility\", \"visible\");
+            $(\"#sidebar-status\").css(\"visibility\", \"visible\");
+            /* Update Test Information */
+      
+            $(\"#sidebar-title\").text(\"Failed Tests\");
+            $(\"#sidebar-status\").text(STATUS.fail);
+            $(\"#sidebar-overlay-grid\").empty();
+            allFailedTests.forEach((test) => {
+              $(\"#sidebar-overlay-grid\").append(
+                `<div id=\"sidebar-overlay-test-info\" onclick=\"()=>{}\"><i class=\"${
+                  test.testPass ? \"green-font\" : \"red-font\"
+                } material-icons\" style=\"font-size: 1em\">${
+                  STATUS.fail
+                }</i>&nbsp;&nbsp;<h4 id=\"test-title\">${test.name}</h4>${
+                  test.comments !== \"\"
+                    ? `<p id=\"error-message\">${test.comments}</p>`
+                    : \"\"
+                }</div>`
+              );
+            });
+          }
+      
+          function switchTheme() {
+            $(document.documentElement).attr(\"theme\", !darkTheme ? \"light\" : \"dark\");
+            $(\"#theme-icon\").text(!darkTheme ? \"wb_sunny\" : \"brightness_2\");
+            darkTheme = !darkTheme;
+          }
+      
+          function closeDetails() {
+            $(\"#sidebar-title\").css(\"visibility\", \"hidden\");
+            $(\"#sidebar-status\").css(\"visibility\", \"hidden\");
+            $(\"#sidebar-overlay\").css(\"visibility\", \"hidden\");
+            $(\"#sidebar-overlay\").css(\"margin-left\", \"0\");
+            $(\"#sidebar\").css(\"width\", \"0\");
+          }
+      
+          window
+            .matchMedia(\"(prefers-color-scheme: dark)\")
+            .addEventListener(\"change\", (e) => {
+              darkTheme = e.matches;
+              switchTheme();
+            });
+      
+          function showDetails(featureID) {
+            feature = dataSource[featureID];
+      
+            $(\"#sidebar-overlay\").css(\"visibility\", \"visible\");
+            $(\"#sidebar-overlay\").css(\"margin-left\", \"40%\");
+            $(\"#sidebar\").css(\"width\", \"40%\");
+            $(\"#sidebar-title\").css(\"visibility\", \"visible\");
+            $(\"#sidebar-status\").css(\"visibility\", \"visible\");
+            /* Update Test Information */
+      
+            $(\"#sidebar-title\").text(feature.name);
+            $(\"#sidebar-overlay-grid\").empty();
+            feature.tests.forEach((test) => {
+              $(\"#sidebar-overlay-grid\").append(
+                `<div id=\"sidebar-overlay-test-info\" onclick=\"()=>{}\"><i class=\"${
+                  test.testPass ? \"green-font\" : \"red-font\"
+                } material-icons\" style=\"font-size: 1em\">${
+                  test.testPass ? STATUS.pass : STATUS.fail
+                }</i>&nbsp;&nbsp;<h4 id=\"test-title\">${test.name}</h4>${
+                  test.comments !== \"\"
+                    ? `<p id=\"error-message\">${test.comments}</p>`
+                    : \"\"
+                }</div>`
+              );
+            });
+      
+            for (index = 0; index < feature.tests.length; index++) {
+              if (!feature.tests[index].testPass) {
+                $(\"#sidebar-status\").text(STATUS.fail);
+                return;
               }
             }
+            $(\"#sidebar-status\").text(STATUS.pass);
+          }
+      
           </script>"
         end
     
         def config()
           return if @data_provider.length == 0
 
-          return "<div class=\"configuration-container\">
+          return "<div class=\"params-container\">
                   #{release_name()}
                   #{execution_date()}
                   #{device()}
@@ -320,23 +439,23 @@ class NxgCore
         end
 
         def filter()
-          "<div class=\"configuration-wrapper\" onclick=\"handleFilter()\" id=\"filter\" title=\"Filter tests\">
-            <i class=\"configuration-icon material-icons\">filter_list</i>
-            <h5 id=\"configuration-text\">Failed</h5>
+          "<div class=\"param-wrap\" onclick=\"setFilter()\" id=\"filter\" title=\"Filter tests\">
+            <i class=\"pi material-icons\">filter_list</i>
+            <h5 id=\"pt\">Failed</h5>
           </div>"
         end
 
         def passed_tests()
-          "<div class=\"configuration-wrapper\" title=\"Passed tests\">
-            <i class=\"configuration-icon pass-total material-icons\">check_circle</i>
-            <h5 id=\"configuration-text\">#{@data_provider[:pass] == 0 ? "None" : @data_provider[:pass]}</h5>
+          "<div class=\"param-wrap\" title=\"Passed tests\">
+            <i class=\"pi green-font material-icons\">check_circle</i>
+            <h5 id=\"pt\">#{@data_provider[:pass] == 0 ? "None" : @data_provider[:pass]}</h5>
           </div>"
         end
 
         def failed_tests()
-          "<div class=\"configuration-wrapper\" title=\"Failed tests\">
-            <i class=\"configuration-icon fail-total material-icons\">cancel</i>
-            <h5 id=\"configuration-text\">#{@data_provider[:fail] == 0 ? "None" : @data_provider[:fail]}</h5>
+          "<div class=\"param-wrap\" title=\"Failed tests\" #{@data_provider[:fail] > 0 ? "onclick=\"filterAllFailed()\" style=\"cursor: pointer\"" : ""}>
+            <i class=\"pi red-font material-icons\">cancel</i>
+            <h5 id=\"pt\">#{@data_provider[:fail] == 0 ? "None" : @data_provider[:fail]}</h5>
           </div>"
         end
 
@@ -383,9 +502,9 @@ class NxgCore
         end
 
         def config_item(toot_tip, name, icon)
-          "<div class=\"configuration-wrapper\" title=\"#{toot_tip}\">
-            <i class=\"configuration-icon material-icons\">#{icon}</i>
-            <h5 id=\"configuration-text\">#{name}</h5>
+          "<div class=\"param-wrap\" title=\"#{toot_tip}\">
+            <i class=\"pi material-icons\">#{icon}</i>
+            <h5 id=\"pt\">#{name}</h5>
           </div>"
         end
 

data/lib/nxgcss.rb

@@ -7,329 +7,265 @@ module NxgCss
 
     def css(data_provider)
         "<style>
-            :root {
-                --dark-bg: rgb(41, 40, 40);
-                --dark-primary: #050505;
-                --dark-secondary: #050505a9;
-                --dark-font: rgb(201, 201, 201);
-                --dark-blue: rgb(0, 225, 255);
-                --dark-green: rgba(115, 255, 0, 0.89);
-                --dark-red: rgb(255, 0, 0);
-                --dark-shadow: rgba(0, 0, 0, 0.5);
-        
-                --light-bg: rgb(226, 226, 226);
-                --light-primary: #fff;
-                --light-secondary: rgba(255, 255, 255, 0.445);
-                --light-font: rgb(44, 44, 44);
-                --light-blue: rgb(1, 67, 165);
-                --light-green: rgb(14, 138, 2);
-                --light-red: rgb(255, 0, 0);
-                --light-shadow: rgba(245, 245, 245, 0.5);
-        
-                --font: \"Open Sans\", sans-serif;
-                --danger-bg: rgba(255, 0, 0, 0.185);
-                --color-switch-animation: all 500ms ease;
-            }
-
-            body {
-                font-family: var(--font);
-                margin: auto;
-                transition: var(--color-switch-animation);
-            }
-
-            .body-wrapper {
-                display: grid;
-                grid-template-rows: auto auto 1fr;
-                height: 100vh;
-                width: 100vw;
-            }
-
-            .header {
-                display: grid;
-                grid-template-columns: 8fr 1fr;
-                text-align: center;
-                #{data_provider[:title_color]}
-            }
-
-            .configuration-container {
-                display: flex;
-                flex-wrap: wrap;
-                justify-content: space-between;
-                text-align: center;
-                padding: 1.5em 2em 1em 2em;
-            }
-
-            .configuration-wrapper {
-                display: flex;
-                place-items: center;
-            }
-
-            .configuration-icon {
-                font-size: 1.5em;
-                padding-right: 0.5em;
-            }
-
-            #configuration-text {
-                font-size: 0.85em;
-            }
-
-            #filter {
-                cursor: pointer;
-                border-radius: 1em;
-                width: 6em;
-                padding: 0.2em 0.8em;
-                background-color: var(--light-secondary);
-                -webkit-box-shadow: -1px 0px 5px 0px var(--light-shadow);
-                -moz-box-shadow: -1px 0px 5px 0px var(--light-shadow);
-                box-shadow: -1px 0px 5px 0px var(--light-shadow);
-            }
-
-            .mc {
-                display: grid;
-                grid-template-columns: 1fr 1fr 1fr;
-                grid-auto-rows: 70px;
-                grid-gap: 0.5em;
-                padding: 0.5em 2em;
-            }
-
-            .banner-in-the-middle {
-                text-align: center;
-                margin: auto;
-            }
-
-            .banner-text {
-                color: green;
-                font-size: 5em;
-            }
-
-            .banner-in-the-middle > h1 {
-                color: var(--light-font);
-            }
-
-            .footer {
-                margin-bottom: 0.5em;
-                padding: 3em 3em 1em 3em;
-                text-align: center;
-                font-size: 0.7rem;
-                font-weight: 600;
-            }
-
-            a {
-                cursor: pointer;
-                font-weight: 600;
-            }
-
-            .module {
-                display: grid;
-                place-items: center;
-                grid-template-columns: 3fr 1fr 1fr 1fr;
-                border-radius: 0.7rem;
-                padding: 10px 10px;
-                -webkit-box-shadow: -1px 0px 5px 0px var(--light-shadow);
-                -moz-box-shadow: -1px 0px 5px 0px var(--light-shadow);
-                box-shadow: -1px 0px 5px 0px var(--light-shadow);
-            }
-
-            .button-body-wrapper {
-                place-items: center;
-            }
-
-            #theme-switch {
-                width: 5em;
-                height: 5em;
-                background-color: Transparent;
-                background-repeat: no-repeat;
-                border: none;
-                cursor: pointer;
-                overflow: hidden;
-                outline: none;
-                margin: 0;
-                margin-right: 1em;
-                position: relative;
-                top: 50%;
-                -ms-transform: translateY(-50%);
-                transform: translateY(-50%);
-            }
-
-            h2,
-            h3,
-            h4,
-            h5,
-            h6 {
-                text-align: center;
-                margin: auto;
-            }
-
-            .total,
-            .pass,
-            .fail {
-                display: grid;
-                width: 100%;
-                height: 100%;
-                place-items: center;
-            }
-
-            body.dark {
-                background-color: var(--dark-bg);
-                color: var(--dark-font);
-            }
-
-            body.dark > .body-wrapper > .footer {
-                color: var(--dark-font);
-            }
-
-            body.dark > .body-wrapper > .mc > .module {
-                background-color: var(--dark-primary);
-                color: var(--dark-font);
-                -webkit-box-shadow: -1px 0px 5px 0px var(--dark-shadow);
-                -moz-box-shadow: -1px 0px 5px 0px var(--dark-shadow);
-                box-shadow: -1px 0px 5px 0px var(--dark-shadow);
-            }
-
-            body.dark > .body-wrapper > .mc > .module > .total {
-                color: var(--dark-blue);
-            }
-
-            body.dark > .body-wrapper > .mc > .module > .pass {
-                color: var(--dark-green);
-            }
-
-            body.dark > .body-wrapper > .mc > .module > .fail {
-                color: var(--dark-red);
-            }
-
-            body.dark > .body-wrapper > .configuration-container > .configuration-wrapper > .pass-total {
-                color: var(--dark-green);
-            }
-
-            body.dark > .body-wrapper > .configuration-container > .configuration-wrapper > .fail-total {
-                color: var(--dark-red);
-            }
-
-            body.dark > .body-wrapper > .mc > .module.danger {
-                background-color: rgba(255, 0, 0, 0.185);
-            }
-
-            body.dark > .body-wrapper > .banner-in-the-middle > h1 {
-                color: var(--dark-font);
-            }
-
-            body.dark > .body-wrapper > .header {
-                color: var(--dark-primary);
-            }
-
-            body.dark > .body-wrapper > .configuration-container > .configuration-wrapper {
-                color: var(--dark-font);
-            }
-
-            body.dark > .body-wrapper > .configuration-container > #filter {
-                background-color: var(--dark-secondary);
-                -webkit-box-shadow: -1px 0px 5px 0px var(--dark-shadow);
-                -moz-box-shadow: -1px 0px 5px 0px var(--dark-shadow);
-                box-shadow: -1px 0px 5px 0px var(--dark-shadow);
-            }
-
-            body.dark > .body-wrapper > .footer > p > span > a {
-                color: var(--dark-font);
-            }
-
-            body.dark > .body-wrapper > .header > div > button > #theme-switch-icon {
-                color: var(--dark-primary);
-            }
-
-            body {
-                background-color: var(--light-bg);
-                color: var(--dark-font);
-            }
-
-            body > .body-wrapper > .footer {
-                color: var(--light-font);
-            }
-
-            body > .body-wrapper > .mc > .module {
-                background-color: var(--light-primary);
-                color: var(--light-font);
-            }
-
-            body > .body-wrapper > .mc > .module > .total {
-                color: var(--light-blue);
-            }
-
-            body > .body-wrapper > .mc > .module > .pass {
-                color: var(--light-green);
-            }
-
-            body > .body-wrapper > .mc > .module > .fail {
-                color: var(--light-red);
-            }
-
-            body > .body-wrapper > .configuration-container > .configuration-wrapper > .pass-total {
-                color: var(--light-green);
-            }
-
-            body > .body-wrapper > .configuration-container > .configuration-wrapper > .fail-total {
-                color: var(--light-red);
-            }
-
-            body > .body-wrapper > .mc > .module.danger {
-                background-color: var(--danger-bg);
-            }
-
-            body > .body-wrapper > .header {
-                color: var(--light-primary);
-            }
-
-            body > .body-wrapper > .configuration-container > .configuration-wrapper {
-                color: var(--light-font);
-            }
-
-            body > .body-wrapper > .footer > p > span > a {
-                color: var(--light-font);
-            }
-
-            body > .body-wrapper > .header > div > button > #theme-switch-icon {
-                color: var(--light-primary);
-            }
-
-            @media only screen and (max-width: 600px) {
-                h1 {
-                    font-size: 24px;
-                }
-
-                .mc {
-                    grid-template-columns: 1fr;
-                    padding: 0.5em 0.5em;
-                    padding-top: 1em;
-                }
-
-                .configuration-container {
-                    padding: 0.5em 0em;
-                }
-
-                .configuration-wrapper {
-                    padding: 0.5em 1em;
-                }
-
-                .configuration-icon {
-                    font-size: 1em;
-                }
-
-                #configuration-text {
-                    font-size: 0.6em;
-                }
-
-                #filter {
-                    width: 4em;
-                    padding: 0.4em 0.4em;
-                    margin: 0.3em 0.7em 0.3em 0.7em;
-                }
-            }
-
-            @media (min-width: 600px) and (max-width: 992px) {
-                .mc {
-                    grid-template-columns: 1fr 1fr;
-                }
-            }
-        </style>"
+        :root {
+          --font: \"Open Sans\", sans-serif;
+          --primary-gradient: linear-gradient(to bottom right, #ff644e, #cb3018);
+          --background-color: #f4f4f4;
+          --primary-color: #fff;
+          --secondary-color: #fff;
+          --primary-font-color: #424242;
+          --green: rgb(31, 172, 31);
+          --red: rgb(214, 7, 7);
+          --blue: rgb(0, 89, 255);
+          --red-bg: rgba(255, 0, 0, 0.233);
+        }
+  
+        [theme=\"dark\"] {
+          --background-color: #252525;
+          --primary-color: #2e2e2e;
+          --secondary-color: rgba(255, 255, 255, 0.842);
+          --primary-font-color: #f9fafccb;
+          --green: rgb(6, 207, 6);
+          --red: rgb(228, 1, 1);
+          --blue: rgb(91, 226, 250);
+          --red-bg: rgba(201, 53, 53, 0.479);
+        }
+  
+        * {
+          font-family: var(--font);
+          color: var(--primary-font-color);
+          transition: color 0.5s ease;
+          transition: background-color 0.5s ease;
+        }
+  
+        #app {
+          background-color: var(--background-color);
+          margin: auto;
+        }
+  
+        #header {
+          display: grid;
+          grid-template-columns: 8fr 1fr;
+          text-align: center;
+          background: var(--primary-gradient);
+        }
+  
+        #app-title,
+        #theme-icon {
+          color: var(--background-color);
+        }
+  
+        #sidebar {
+          width: 0;
+          height: 100%;
+          position: fixed;
+          z-index: 2;
+          top: 0;
+          left: 0;
+          overflow-x: hidden;
+          transition: 1s ease;
+          display: flex;
+          place-items: center;
+          background: var(--primary-gradient);
+        }
+  
+        #sidebar-div {
+          margin: auto;
+        }
+  
+        #sidebar-overlay-test-info {
+          font-size: 16px;
+          margin: 0.5em 0;
+        }
+  
+        #sidebar-overlay {
+          width: 60%;
+          height: 100%;
+          z-index: 1;
+          position: fixed;
+          top: 0;
+          left: 0;
+          visibility: hidden;
+          display: flex;
+          transition: margin-left 1s ease;
+          overflow-y: auto;
+          background-color: var(--background-color);
+        }
+  
+        #sidebar-overlay-grid {
+          display: grid;
+          grid-template-rows: auto;
+          padding: 1em;
+          margin: 0 1em;
+          width: 100%;
+          height: fit-content;
+        }
+  
+        #sidebar-title-wrap,
+        #sidebar-overlay-test-info {
+          display: flex;
+          place-items: center;
+          flex-wrap: wrap;
+        }
+  
+        #sidebar-title,
+        #sidebar-status {
+          color: var(--secondary-color);
+        }
+  
+        #test-title {
+          margin: 0;
+        }
+  
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          text-align: center;
+          margin: auto;
+        }
+  
+        #error-message {
+          flex-basis: 100%;
+          margin: 1em 1.5em 0 1.5em;
+          display: table-cell;
+          vertical-align: middle;
+          background-color: var(--primary-color);
+          padding: 1em;
+          border-radius: 1em;
+          font-size: 0.8em;
+        }
+  
+        #body-wrap {
+          display: grid;
+          grid-template-rows: auto auto 1fr;
+          height: 100vh;
+          width: 100vw;
+        }
+  
+        #theme-switch {
+          width: 5em;
+          height: 5em;
+          background-color: Transparent;
+          background-repeat: no-repeat;
+          border: none;
+          cursor: pointer;
+          overflow: hidden;
+          outline: none;
+          margin: 0;
+          margin-right: 1em;
+          position: relative;
+          top: 50%;
+          -ms-transform: translateY(-50%);
+          transform: translateY(-50%);
+        }
+  
+        .params-container {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          text-align: center;
+          padding: 1em 2em;
+        }
+  
+        .param-wrap {
+          display: flex;
+          place-items: center;
+        }
+  
+        .pi {
+          font-size: 1.5em;
+          padding-right: 0.5em;
+        }
+  
+        #pt {
+          font-size: 0.9em;
+        }
+  
+        #filter {
+          cursor: pointer;
+          border-radius: 1em;
+          width: 5em;
+          padding: 0.2em 1em;
+          background-color: var(--primary-color);
+        }
+  
+        .features-grid {
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr;
+          grid-auto-rows: 70px;
+          grid-gap: 0.5em;
+          padding: 0.5em 2em;
+        }
+  
+        .module {
+          display: grid;
+          place-items: center;
+          grid-template-columns: 3fr 1fr 1fr 1fr;
+          border-radius: 0.7rem;
+          padding: 10px 10px;
+          background-color: var(--primary-color);
+          cursor: pointer;
+        }
+  
+        .total,
+        .pass,
+        .fail {
+          display: grid;
+          width: 100%;
+          height: 100%;
+          place-items: center;
+        }
+  
+        .total > * {
+          color: var(--blue);
+        }
+  
+        .banner {
+          margin: auto;
+          text-align: center;
+        }
+  
+        .banner-text {
+          font-size: 5em;
+        }
+  
+        #footer {
+          font-size: 0.7rem;
+          text-align: center;
+          margin-bottom: 0.5em;
+          padding: 3em 3em 1em 3em;
+        }
+  
+        @media (min-width: 600px) and (max-width: 1400px) {
+          .pi {
+            font-size: 1em;
+            padding-right: 0.5em;
+          }
+  
+          #pt {
+            font-size: 0.7em;
+          }
+  
+          .funcname {
+            font-size: 0.9em;
+          }
+        }
+  
+        .green-font,
+        .pass > * {
+          color: var(--green);
+        }
+  
+        .red-font,
+        .fail > * {
+          color: var(--red);
+        }
+  
+        .red-bg {
+          background-color: var(--red-bg);
+        }
+      </style>"
     end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: nxgreport
 version: !ruby/object:Gem::Version
-  version: 0.8.0
+  version: 0.10.0
 platform: ruby
 authors:
 - Balabharathi Jayaraman
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-09-19 00:00:00.000000000 Z
+date: 2020-09-25 00:00:00.000000000 Z
 dependencies: []
 description: Generate a beautiful static test report.
 email: balabharathi.jayaraman@gmail.com