Merge pull request #123 from eauchat/theming-reloaded-plus

Simplify tiles styling

portal/assets/css/ynh-style.css

@@ -331,13 +331,12 @@ textarea {
     -webkit-transform: skew(0deg, 45deg);
   }
 
-.listing-apps span {
+  .listing-apps span {
     display: block;
     margin: -1.2em 0 0 0.2em;
-}
-  .listing-apps .first-letter { margin: 0; }
-  .listing-apps .first-letter:before {
-    content: attr(data-first-letter);
+  }
+  .listing-apps .first-letter {
+    margin: 0;
     display: inline-block;
   }
   .listing-apps .name {

portal/assets/js/ynhpanel.js

@@ -324,7 +324,8 @@ function init_portal()
   });
 
   Array.each(document.getElementsByClassName("app-tile"), function(el) {
-        set_app_tile_style(el);
+        // Set first-letter data attribute.
+        el.querySelector('.first-letter').innerHTML = el.getAttribute("data-appname").substring(0, 2);
         // handle app links so they work both in plain info page and in the info iframe called from ynhpanel.js
         window.addEvent(el, 'click', function(event) {
             // if asked to open in new tab
@@ -342,17 +343,6 @@ function init_portal()
   });
 }
 
-var app_tile_colors = ['redbg','purpledarkbg','darkbluebg','orangebg','greenbg','darkbluebg','purpledarkbg','yellowbg','lightpinkbg','pinkbg','turquoisebg','yellowbg','lightbluebg','purpledarkbg', 'bluebg'];
-function set_app_tile_style(el)
-{
-    // Select a color value from the App label
-    randomColorNumber = parseInt(el.textContent, 36) % app_tile_colors.length;
-    // Add color class.
-    el.classList.add(app_tile_colors[randomColorNumber]);
-    // Set first-letter data attribute.
-    el.querySelector('.first-letter').setAttribute('data-first-letter', el.textContent.substring(0, 2));
-}
-
 function tweak_portal_when_in_iframe()
 {
     // Set class to body to show we're in overlay

portal/assets/themes/default/custom.js

@@ -0,0 +1,11 @@
+var app_tile_colors = ['redbg','purpledarkbg','darkbluebg','orangebg','greenbg','darkbluebg','purpledarkbg','yellowbg','lightpinkbg','pinkbg','turquoisebg','yellowbg','lightbluebg','purpledarkbg', 'bluebg'];
+
+function set_app_tile_style(el)
+{
+    // Select a color value from the App label
+    randomColorNumber = parseInt(el.textContent, 36) % app_tile_colors.length;
+    // Add color class.
+    el.classList.add(app_tile_colors[randomColorNumber]);
+}
+
+Array.each(document.getElementsByClassName("app-tile"), set_app_tile_style);

portal/assets/themes/vapor/custom.css

@@ -85,20 +85,7 @@ input.btn.classic-btn.large-btn:hover,
 }
 
 /* There are no colors, there is only vapor! */
-.bluebg,
-.purplebg,
-.orangebg,
-.redbg,
-.greenbg,
-.darkbluebg,
-.lightbluebg,
-.yellowbg,
-.lightpinkbg,
-.pinkbg,
-.turquoisebg,
-.lightyellow,
-.lightgreen,
-.purpledarkbg,
+.app-tile,
 .form-group input,
 .form-group label,
 a.btn:hover,
@@ -107,61 +94,9 @@ a.btn:hover,
     border: none;
 }
 
-.bluebg:hover:after,
-.bluebg:focus:after,
-.bluebg:hover:before,
-.bluebg:focus:before,
-.purplebg:hover:after,
-.purplebg:focus:after,
-.purplebg:hover:before,
-.purplebg:focus:before,
-.orangebg:hover:after,
-.orangebg:focus:after,
-.orangebg:hover:before,
-.orangebg:focus:before,
-.redbg:hover:after,
-.redbg:focus:after,
-.redbg:hover:before,
-.redbg:focus:before,
-.greenbg:hover:after,
-.greenbg:focus:after,
-.greenbg:hover:before,
-.greenbg:focus:before,
-.darkbluebg:hover:after,
-.darkbluebg:focus:after,
-.darkbluebg:hover:before,
-.darkbluebg:focus:before,
-.lightbluebg:hover:after,
-.lightbluebg:focus:after,
-.lightbluebg:hover:before,
-.lightbluebg:focus:before,
-.yellowbg:hover:after,
-.yellowbg:focus:after,
-.yellowbg:hover:before,
-.yellowbg:focus:before,
-.lightpinkbg:hover:after,
-.lightpinkbg:focus:after,
-.lightpinkbg:hover:before,
-.lightpinkbg:focus:before,
-.pinkbg:hover:after,
-.pinkbg:focus:after,
-.pinkbg:hover:before,
-.pinkbg:focus:before,
-.turquoisebg:hover:after,
-.turquoisebg:focus:after,
-.turquoisebg:hover:before,
-.turquoisebg:focus:before,
-.lightyellow:hover:after,
-.lightyellow:focus:after,
-.lightyellow:hover:before,
-.lightyellow:focus:before,
-.lightgreen:hover:after,
-.lightgreen:focus:after,
-.lightgreen:hover:before,
-.lightgreen:focus:before,
-.purpledarkbg:hover:after,
-.purpledarkbg:focus:after,
-.purpledarkbg:hover:before,
-.purpledarkbg:focus:before {
+.app-tile:hover:after,
+.app-tile:focus:after,
+.app-tile:hover:before,
+.app-tile:focus:before {
     background: rgba(200, 200, 200, 0.4) !important;
 }

portal/info.html

@@ -14,7 +14,12 @@
 <div id="apps" class="wrapper apps">
   <ul class="listing-apps">
   {{#app}}
-    <li><a class="app-tile" href="https://{{url}}"><span class="first-letter"></span><span class="name">{{name}}</span></a></li>
+    <li>
+      <a class="app-tile" href="https://{{url}}" data-appname="{{name}}">
+        <span class="first-letter"></span>
+        <span class="name">{{name}}</span>
+      </a>
+    </li>
   {{/app}}
   </ul>
 </div>