[Scummvm-git-logs] scummvm-web master -> eb0db19a9f067c0792831f7acd5166ff0319ebff

[Mataniko]

This automated email contains information about 1 new commit which have been
pushed to the 'scummvm-web' repo located at https://github.com/scummvm/scummvm-web .

Summary:
eb0db19a9f CSS: Improve table display for Demos and Compatibility


Commit: eb0db19a9f067c0792831f7acd5166ff0319ebff
    https://github.com/scummvm/scummvm-web/commit/eb0db19a9f067c0792831f7acd5166ff0319ebff
Author: Mataniko (mataniko at gmail.com)
Date: 2020-11-26T22:09:05-05:00

Commit Message:
CSS: Improve table display for Demos and Compatibility

Changed paths:
    scss/pages/_chart.scss
    scss/pages/_compatibility.scss
    scss/theme/_themes.scss
    templates/pages/game_demos.tpl


diff --git a/scss/pages/_chart.scss b/scss/pages/_chart.scss
index d9387170..ee4c6ffe 100644
--- a/scss/pages/_chart.scss
+++ b/scss/pages/_chart.scss
@@ -1,3 +1,21 @@
+.chart-wrapper {
+
+  span {
+    border: 0;
+    border-spacing: 0;
+    padding: 5px;
+    width: 95%;
+    display: block;
+    @include themify($themes) {
+      background: themed("chart-caption-background");
+      color: themed("chart-caption-header");
+    }
+    font-weight: bold;
+    margin: 0 auto;
+    text-align: center;
+  }
+}
+
 .chart {
   border: 0;
   border-spacing: 0;
@@ -11,6 +29,7 @@
     }
     font-weight: bold;
     margin: 0 auto;
+    padding: 5px;
   }
   a {
     @include themify($themes) {
@@ -31,6 +50,7 @@
   }
   th,
   td {
+    padding: 5px;
     @include themify($themes) {
       border: 1px solid themed("chart-border");
     }
@@ -64,18 +84,19 @@
 .gameDemos {
   tr {
     padding: 0;
-    transition: opacity 0.2s ease-in-out, visibility 0.2s;
 
     &.collapse {
-      opacity: 0;
-      visibility: collapse;
+      display: none;
+    }
+    &.sub td a {
+      margin-left: 1em;
     }
   }
   th {
-    padding: 2px;
+    padding: 5px;
   }
   td {
-    padding: 0px 2px;
+    padding: 5px;
     img {
       &.downloadImage {
         vertical-align: middle;
diff --git a/scss/pages/_compatibility.scss b/scss/pages/_compatibility.scss
index 913edebf..9d1fd01f 100644
--- a/scss/pages/_compatibility.scss
+++ b/scss/pages/_compatibility.scss
@@ -1,6 +1,7 @@
 .colorKeyTable {
 	td {
 		text-align: center;
+		padding: 5px;
 	}
 }
 
diff --git a/scss/theme/_themes.scss b/scss/theme/_themes.scss
index 810c81fe..0fc5e457 100644
--- a/scss/theme/_themes.scss
+++ b/scss/theme/_themes.scss
@@ -68,6 +68,7 @@ $themes: (
         background: #6699cc,
         download-background: #398b4c,
         round-container-border: #43a25c,
+        chart-caption-background: #398b4c,
     ),
     retro: (
         menu-background: #6f43a4,
@@ -80,5 +81,6 @@ $themes: (
         round-container-header: $turbo,
         round-container-header-shadow: unset,
         wrapper-topper: linear-gradient(to bottom, rgb(115, 15, 107) 0%, rgb(163, 26, 156) 71%),
+        chart-caption-background: #6f43a4,
     ),
 );
diff --git a/templates/pages/game_demos.tpl b/templates/pages/game_demos.tpl
index 7a4a4082..90b85d27 100644
--- a/templates/pages/game_demos.tpl
+++ b/templates/pages/game_demos.tpl
@@ -23,32 +23,33 @@
 
 {capture "content"}
 {foreach $demos as $group}
-<table class="chart color4 gameDemos" id="{$group.href}">
-    <caption>{$group.name}</caption>
-    <thead>
-        <tr class="color4">
-            <th>{#gamesDemosH1#}</th>
-            <th class="gameTarget">{#gamesDemosH2#}</th>
-        </tr>
-    </thead>
-    <tbody>
-        {foreach $group.demos as $i => $demo}
-        {if $demo at first}
-        {$collapse = ''}
-        {elseif $group.demos[$i]->getId() == $group.demos[$i-1]->getId()}
-        {$collapse = 'collapse'}
-        {else}
-        {$collapse = ''}
-        {/if}
-        <tr class="{if $collapse}{$collapse}{else}{cycle values="color2, color0"}{/if}">
-            <td>
-                <a href="{$demo->getURL()|download}">{$demo->getName()}</a>
-            </td>
-            <td class="gameTarget">{$demo->getId()}</td>
-        </tr>
-        {/foreach}
-    </tbody>
-</table>
+<div class="chart-wrapper"><span>{$group.name}</span>
+    <table class="chart color4 gameDemos" id="{$group.href}">
+        <thead>
+            <tr class="color4">
+                <th>{#gamesDemosH1#}</th>
+                <th class="gameTarget">{#gamesDemosH2#}</th>
+            </tr>
+        </thead>
+        <tbody>
+            {foreach $group.demos as $i => $demo}
+            {if $demo at first}
+            {$collapse = ''}
+            {elseif $group.demos[$i]->getId() == $group.demos[$i-1]->getId()}
+            {$collapse = 'collapse'}
+            {else}
+            {$collapse = ''}
+            {/if}
+            <tr class="{if $collapse}{$collapse} sub{else}{cycle values="color2, color0"}{/if}">
+                <td>
+                    <a href="{$demo->getURL()|download}">{$demo->getName()}</a>
+                </td>
+                <td class="gameTarget">{$demo->getId()}</td>
+            </tr>
+            {/foreach}
+        </tbody>
+    </table>
+</div>
 {/foreach}
 {/capture}