FIX: Improve DebugView’s display of non-header information.

DebugView had not ability just to output a regular paragraph that didn’t have a blue background. This refactors the CSS classes a bit to amend this.
2017-02-02 13:01:46 +13:00 · 2017-02-02 13:01:46 +13:00 · f63b741e46
parent dcd06dfc64
commit f63b741e46
4 changed files with 78 additions and 54 deletions
--- a/client/dist/styles/debug.css
+++ b/client/dist/styles/debug.css
@ -8,18 +8,12 @@ body{

 .info{
  padding:18px;
-  background-color:#003050;
  position:relative;
-  line-height:24px;
-  background-image:-webkit-gradient(linear,left top,left bottom,from(#002137),color-stop(10%,#003050),color-stop(90%,#003050),color-stop(90%,#002137));
-  background-image:-webkit-linear-gradient(#002137,#003050 10%,#003050 90%,#002137);
-  background-image:linear-gradient(#002137,#003050 10%,#003050 90%,#002137);
  z-index:9999;
 }

 .info,.info h1{
  margin:0 0 6px;
-  color:#fff;
 }

 .info h1{
@ -31,35 +25,51 @@ body{
 }

 .info h3{
-  color:#7da4be;
+  color:#003050;
  font-size:16px;
  line-height:18px;
-  font-weight:400;
 }

 .info p{
  margin:0;
  font-size:14px;
-  color:#fff;
 }

 .info a{
-  color:#fff;
  font-weight:700;
  text-decoration:none;
+  color:#7da4be;
 }

 .info a:active,.info a:hover{
-  color:#fff;
  text-decoration:underline;
+  color:#7da4be;
+}
+
+.info li{
+  font-size:14px;
+  margin:6px 0;
 }

 .header{
-  margin:0;
-  border-bottom:6px solid #ccdef3;
-  height:23px;
-  background-color:#666673;
-  padding:4px 0 2px 6px;
+  background-color:#003050;
+  background-image:-webkit-gradient(linear,left top,left bottom,from(#002137),color-stop(10%,#003050),color-stop(90%,#003050),color-stop(90%,#002137));
+  background-image:-webkit-linear-gradient(#002137,#003050 10%,#003050 90%,#002137);
+  background-image:linear-gradient(#002137,#003050 10%,#003050 90%,#002137);
+  color:#fff;
+}
+
+.header h1{
+  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmdJREFUeNpiYCASxJ17p8BAAmAh0sD5QAyiFYk1mJGAoQFQQwWgQoKLjIQ+kG0w0EABqIEByOKLjYWZ/////48Yg5lwuPI+uqF/f/88TqyhKGEMdWU/ECegK/r358/Va8tnx5AceVBD9wOxAbqCX18+zbm+am7HpaktD9AcEQCNUBDYAAz7CxhhDFTYAKTqkSX+//37+N3tq4Xboh33ALmfYcEAVJsA9ZkAmhtABifCLIAZ/B5Z4Z9vX1ddXjK15srMzkdAA38iudQB6jNcAJRiFEEpBxbGAsiRtNxWLh3I/ITkSpC3QUGRTyBoYfGUiJFBmJiY/wIN/IAl2S1AdgAoQr88fdjHysMjwyks3ohkBCioEsFBEXv2zUdGRiY+JEmQIQ+hLoQZdgBo2BMmFpaYnx/e9a1yVu0AhT0QM0cefjSPhYs7DEm/IAs0TFewcvOmodmKnuSevLp0uouVi3sDMEJ3AX31GZ60uLjV0DLSJ7DB9/dsalHxDrcGukYbV+B9enJ/xu5Un2tA5i1YhCKVIwbIqQkUN+Ccd7Ip7+nlRZP9QakB3UCQwrc3LoVsDrY4BdTwF8nQAiB1HogdkNX//v5tOUpZwQgMZCDFZ906S51fQVUGmjk+7Un3vwRKRkgGYi1HYMkUmKJSQMGEUQgBLWBGyur/gIp+I6VjA2g6Rs8cDNAIbYalKIzkBvIuKDnjCGqMHAdKdi8vnCgE+uwESoQykAYc0MuRlfaKVdCg+o232MRT6AugRyjQ0BKgga/RDSUJgCI39vTrRxGHHszWzahQBfLZGagFgIaJAzE/NAXhBQABBgBJL0aZBy/F5wAAAABJRU5ErkJggg==) no-repeat right 3px;
+}
+
+.header h3{
+  color:#7da4be;
+  font-weight:400;
+}
+
+.header a,.header a:active,.header a:hover,.header p{
+  color:#fff;
 }

 .build,.options,.trace{
@ -69,11 +79,6 @@ body{
  z-index:9999;
 }

-.build li,.options li,.trace li{
-  font-size:14px;
-  margin:6px 0;
-}
-
 a{
  color:#666;
 }
@ -149,4 +154,4 @@ fieldset{
  background:#ffe9e9;
  border:1px solid #c80700;
  border-radius:4px;
-}
+}
--- a/client/src/styles/debug.scss
+++ b/client/src/styles/debug.scss
@ -6,15 +6,13 @@ body {
  font-family: Helvetica, Arial, sans-serif;
 }

+/**
+ * Use class="info" for a regular backgroun
+ */
 .info {
  margin: 0 0 6px 0;
  padding: 18px;
-  background-color: #003050;
  position: relative;
-  line-height: 24px;
-  color: #fff;
-
-  background-image: linear-gradient(darken(#003050, 5%), #003050 10%, #003050 90%, darken(#003050, 5%));

  // try to get the info above the template with z-index
  z-index: 9999;
@ -22,7 +20,6 @@ body {
  h1 {
    margin: 0 0 6px 0;
    padding: 0 32px 0 0;
-    color: #fff;
    font-size: 24px;
    text-shadow: 0 1px darken(#003050, 5%);
    line-height: 30px;
@ -31,41 +28,66 @@ body {
  }

  h3 {
-    color: #7da4be;
+    color: #003050;
    font-size: 16px;
    line-height: 18px;
-    font-weight: normal;
  }

  p {
    margin: 0;
    font-size: 14px;
+  }
+
+  a {
+    font-weight: bold;
+    text-decoration: none;
+    color: #7da4be;
+
+    &:hover,
+    &:active {
+      text-decoration: underline;
+      color: #7da4be;
+    }
+  }
+
+  li {
+    font-size: 14px;
+    margin: 6px 0;
+  }
+}
+
+/**
+ * Use class="info header" to get the dark background
+ */
+.header {
+  background-color: #003050;
+  background-image: linear-gradient(darken(#003050, 5%), #003050 10%, #003050 90%, darken(#003050, 5%));
+
+  color: #fff;
+
+  h1 {
+    background: url("../images/logo_small.png") no-repeat right 3px;
+  }
+
+  h3 {
+    color: #7da4be;
+    font-weight: normal;
+  }
+
+  p {
    color: #fff;
  }

  a {
    color: #fff;
-    font-weight: bold;
-    text-decoration: none;

    &:hover,
    &:active {
      color: #fff;
-      text-decoration: underline;
    }
  }
 }

-
-
-.header {
-  margin: 0;
-  border-bottom: 6px solid #ccdef3;
-  height: 23px;
-  background-color: #666673;
-  padding: 4px 0 2px 6px;
-}
-
 .trace,
 .build,
 .options {
@ -76,10 +98,6 @@ body {
  position: relative;
  z-index: 9999;

-  li {
-    font-size: 14px;
-    margin: 6px 0;
-  }
 }

 a {
--- a/src/Dev/DebugView.php
+++ b/src/Dev/DebugView.php
@ -237,7 +237,7 @@ class DebugView extends Object
     */
    public function renderInfo($title, $subtitle, $description = false)
    {
-        $output = '<div class="info">';
+        $output = '<div class="info header">';
        $output .= "<h1>" . Convert::raw2xml($title) . "</h1>";
        if ($subtitle) {
            $output .= "<h3>" . Convert::raw2xml($subtitle) . "</h3>";
@ -280,7 +280,7 @@ class DebugView extends Object
        } else {
            $errstr = Convert::raw2xml($errstr);
        }
-        $output = '<div class="info ' . $errorType['class'] . '">';
+        $output = '<div class="header info ' . $errorType['class'] . '">';
        $output .= "<h1>[" . $errorType['title'] . '] ' . $errstr . "</h1>";
        $output .= "<h3>$httpRequestEnt</h3>";
        $output .= "<p>Line <strong>$errline</strong> in <strong>$errfile</strong></p>";
@ -298,7 +298,7 @@ class DebugView extends Object
     */
    public function renderSourceFragment($lines, $errline)
    {
-        $output = '<div class="trace"><h3>Source</h3>';
+        $output = '<div class="info"><h3>Source</h3>';
        $output .= '<pre>';
        foreach ($lines as $offset => $line) {
            $line = htmlentities($line, ENT_COMPAT, 'UTF-8');
@ -308,7 +308,7 @@ class DebugView extends Object
                $output .= "<span>$offset</span> $line";
            }
        }
-        $output .= '</pre>';
+        $output .= '</pre></div>';

        return $output;
    }
@ -321,7 +321,8 @@ class DebugView extends Object
     */
    public function renderTrace($trace)
    {
-        $output = '<h3>Trace</h3>';
+        $output = '<div class="info">';
+        $output .= '<h3>Trace</h3>';
        $output .= Backtrace::get_rendered_backtrace($trace);
        $output .= '</div>';

@ -336,7 +337,7 @@ class DebugView extends Object
     */
    public function renderParagraph($text)
    {
-        return '<p class="info">' . $text . '</p>';
+        return '<div class="info"><p>' . $text . '</p></div>';
    }

    /**
--- a/src/Dev/Install/client/dist/styles/install.css
+++ b/src/Dev/Install/client/dist/styles/install.css
@ -588,4 +588,4 @@ body #Footer p{
  font-size:18px;
  padding:0 2px 2px 0;
  font-weight:700;
-}
+}