Updating wallet layouts to allow page generation

_includes/layout/base/wallets-list.html

@@ -1,17 +1,19 @@
 {% comment %}
 This file is licensed under the MIT License (MIT) available on
 http://opensource.org/licenses/MIT.
-{% if wallet.compat contains page.platform and wallet.compat contains page.os %}
-{% endif %}
 {% endcomment %}
 
 <div class="wallets" id="wallets" onclick="walletListener(event);" ontouchstart="walletListener(event);">
 {% for wallet in site.wallets %}
+  {% assign platform = page.platform['name'] %}
+  {% assign os = page.os['name'] %}
+  {% if wallet.compat contains platform and wallet.compat contains os %}
     <div>
-      <a href="/en/wallets/{{ wallet.id }}/#!platform={{ page.platform }}&os={{ page.os }}">
+      <a href="/en/wallets/{{ platform }}/{{ os }}/{{ wallet.id }}/">
         <img src="/img/wallet/{{ wallet.id }}.png" alt="{{ wallet.title }}" />
         {{ wallet.titleshort }}
       </a>
     </div>
+  {% endif %}
 {% endfor %}
 </div>

_includes/layout/base/wallets-menu.html

@@ -7,22 +7,36 @@ http://opensource.org/licenses/MIT.
 {% assign platformsByPlatform = site.platforms | group_by: "platform" %}
   <ul>
   {% for platform in platformsByPlatform %}
-    {% assign platform_class = "wallet-" | append: platform.name %}
+
-    {% if page.id contains platform.name %}
+    {% comment %}
-      {% assign platform_class = platform_class | append: " active" %}
+      ! WORKAROUND START
+      Working around an issue with getting proper platform name from the list
+      of platforms. After original group_by, the "name" key becomes a stringified
+      hash. So we need to make these "hackish" transformations to make it working
+      properly.
+    {% endcomment %}
+    {% capture platformName %}{{ platform.name | split: "=>" | last | split: '"' }}{% endcapture %}
+    {% assign platformName = platformName | trim | replace: '}' '' | replace: ' ' '' %}
+    {% comment %}
+      ! WORKAROUND END
+    {% endcomment %}
+
+    {% assign platformClass = "wallet-" | append: platformName %}
+    {% if page.id contains platformName %}
+      {% assign platformClass = platformClass | append: " active" %}
     {% endif %}
-    <li class="{{ platform_class }}">
+    <li class="{{ platformClass }}">
-      <a href="#">{% translate walletcat{{platform.name}} choose-your-wallet %}</a>
+      <a href="#">{% translate walletcat{{platformName}} choose-your-wallet %}</a>
       {% if platform.items.size > 1 %}
         <ul>
         {% for item in platform.items %}
-          {% assign os_class = "wallet-" | append: item.os %}
+          {% assign osClass = "wallet-" | append: item.os.name %}
-          {% if page.id == item.id %}
+          {% if page.id contains item.id %}
-            {% assign os_class = os_class | append: " active" %}
+            {% assign osClass = osClass | append: " active" %}
           {% endif %}
-          <li class="{{ os_class }}">
+          <li class="{{ osClass }}">
-            <a href="/en/wallets/{{ platform.name }}/{{ item.os }}">
+            <a href="/en/wallets/{{ platformName }}/{{ item.os.name }}">
-              {% translate platform{{item.os}} choose-your-wallet %}
+              {% translate platform{{item.os.name}} choose-your-wallet %}
             </a>
           </li>
         {% endfor %}

_layouts/wallet-container.html

@@ -8,32 +8,37 @@ layout: wallet-platform-container
 <div class="wallet">
 
   <div class="wallet-logo-container">
-    <img class="wallet-logo" src="/img/wallet/{{ page.id }}.png" alt="{{ page.title }}" />
+    <img class="wallet-logo" src="/img/wallet/{{ page.wallet.id }}.png" alt="{{ page.wallet.title }}" />
     <h1>
-      {{ page.title }}
+      {{ page.wallet.title }}
     </h1>
   </div>
 
   <p class="wallet-description">
-  {% translate wallet{{page.id}} choose-your-wallet %}
+  {% translate wallet{{page.wallet.id}} choose-your-wallet %}
   </p>
 
   <div class="wallet-platforms">
     <div class="wallet-platforms-menu">
-      {% for platform in page.platform %}
+      {% for platform in page.wallet.platform %}
         {% for os in platform.os %}
-        <button class="wallet-os-btn" id="{{ os.name }}-btn" onclick="walletDistributionListener('{{ os.name }}', '{{ platform.name }}');">
+        {% assign btnClass = "wallet-os-btn" %}
+        {% if page.id contains os.name %}
+          {% assign btnClass = btnClass | append: " active" %}
+        {% endif %}
+        <a class="{{ btnClass }}"
+           href="/{{ page.lang }}/wallets/{{platform.name}}/{{os.name}}/{{page.wallet.id}}/">
           <img src="/img/os/{{ os.name }}.png"
                alt="{% translate platform{{os.name}} choose-your-wallet %}"
                title="{% translate platform{{os.name}} choose-your-wallet %}" />
           <span>{% translate platform{{os.name}} choose-your-wallet %}</span>
-        </button>
+        </a>
         {% endfor %}
       {% endfor %}
     </div>
+    {% assign platform = page.platform %}
+    {% assign os = page.os %}
     <div class="wallet-os-list">
-    {% for platform in page.platform %}
-      {% for os in platform.os %}
       <div class="wallet-os-container" id="{{ os.name }}">
         <div class="wallet-os-overview">
           <div class="wallet-os-name">
@@ -84,16 +89,7 @@ layout: wallet-platform-container
           <img src="/img/screenshots/{{ os.screenshot }}" alt="screenshot">
         </div>
       </div>
-      {% endfor %}
-    {% endfor %}
     </div>
   </div>
 
-  <!--
-  <div>
-
-    </div>
-  </div>
-
-  -->
 </div>

_sass/_wallets.scss

@@ -271,7 +271,7 @@ $scores:
             text-align: center;
             margin-bottom: 20px;
 
-            button {
+            .wallet-os-btn {
                 background-color: transparent;
                 font-weight: bold;
                 border: 1px solid #255f96;