WIP - wallet page updates; adds wallet product modals, improves wallet-collection data;

_i18n/en.yml

@@ -20,6 +20,12 @@ pages:
     wallets-paper-subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
     wallets-security-header: Security
     wallets-security-subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+    modal-header-vendor-label-descriptor: Wallet for Dash
+    modal-download-action-button-label: Download
+    modal-security-label: Security
+    modal-source-code-label: Source Code
+    modal-website-label: Website
+
     modal-core-header: Download Dash Core
     modal-electrum-header: Download Dash Electrum
     modal-win-core-description: Brief Description&#58 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

_includes/modals/vendor-group-download-collection.html

@@ -0,0 +1,54 @@
+<!-- Modal -->
+{% for wallet in vendor-group.items %}
+<div id="{{wallet.os}}-{{wallet.vendor_id}}-{{wallet.type_id}}-{{wallet.product_id}}-modal"
+     class="modal fade wallet-modal-container" role="dialog" tabindex="-1">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close pull-right" data-dismiss="modal" aria-label="Close"><span
+                        aria-hidden="true">&times;</span></button>
+                <h1 class="modal-title">{{ wallet.product_label }} for Dash</h1>
+            </div>
+            <div class="modal-body">
+                <div class="row">
+                    <div class="col-md-7 col-md-push-5 col-xs-12 text-right">
+                        <img src="http://lorempixel.com/400/400/sports/{{wallet.product_label}}"/>
+                    </div>
+
+                    <div class="col-md-5 col-md-pull-7 col-xs-12">
+                        <div>
+                            <p class="bottom-space">{{wallet.description}}</p>
+
+                            <h5 class="bottom-space">
+                                <span>
+                                    {% t pages.wallets.modal-security-label %}: &nbsp;
+                                </span>
+                                <a href="{{wallet.product_security_url}}" target="_blank">{{wallet.product_security_label}}</a>
+                            </h5>
+
+
+                            <h5 class="bottom-space">
+                                <span>
+                                    {% t pages.wallets.modal-source-code-label %}: &nbsp;
+                                </span>
+                                <a href="{{wallet.product_source_url}}" target="_blank">{{wallet.product_source_label}}</a>
+                            </h5>
+
+                            <h5 class="bottom-space">
+                                <span>
+                                    {% t pages.wallets.modal-website-label %}: &nbsp;
+                                </span>
+                                <a href="{{wallet.product_website_url}}" target="_blank">{{wallet.product_website_label}}</a>
+                            </h5>
+                        </div>
+                        <div>
+                            <button type="button" class="btn btn-default" data-dismiss="modal" aria-label="Download {{wallet.product_label}}"><span
+                                    aria-hidden="true">Download {{wallet.product_label}}</span></button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endfor %}

_includes/wallet-tile-group-container.html

@@ -0,0 +1,7 @@
+<div id="{{wallet-group.name}}" class="tab-pane fade in out {% if forloop.first == true %}active{% endif %}">
+  <div class="row">
+    {% for wallet in wallet-group.items %}
+      {% include wallet-tile.html %}
+    {% endfor %}
+  </div>
+</div>

_includes/wallet-tile.html

@@ -1,28 +1,22 @@
-<div id="{{wallet-os.name}}" class="tab-pane fade in out {% if forloop.first == true %}active{% endif %}">
+<div class="col-xs-12 col-sm-6 col-md-3">
-  <div class="row">
+    <div class="wallet-tile" data-toggle="modal" data-target="#{{wallet.os}}-{{wallet.vendor_id}}-{{wallet.type_id}}-{{wallet.product_id}}-modal">
-    {% for wallet in wallet-os.items %}
-    <div class="col-xs-12 col-sm-6 col-md-3">
-      <div class="wallet-tile" data-toggle="modal" data-target="#winDashCore">
         <div class="thumbnail">
-          <div class="logo-container">
+            <div class="logo-container">
-            <img src="{{ wallet.logo_url }}"/>
+                <img src="{{ wallet.logo_url }}"/>
-          </div>
-          <div class="caption">
-            <h4>{{ wallet.name }}</h4>
-            <div class="fine-print">
-              {{ wallet.description }}
             </div>
-          </div>
+            <div class="caption">
-          <div class="wallet-links-container">
+                <h4>{{ wallet.name }}</h4>
-            {% for link in wallet.links %}
+                <div class="fine-print">
-            <div class="link">
+                    {{ wallet.description }}
-              <a href="{{link.url}}" target="_blank">{{ link.label}} </a>
+                </div>
+            </div>
+            <div class="wallet-links-container">
+                {% for link in wallet.links %}
+                <div class="link">
+                    <a href="{{link.url}}" target="_blank">{{ link.label}} </a>
+                </div>
+                {% endfor %}
             </div>
-            {% endfor %}
-          </div>
         </div>
-      </div>
     </div>
-    {% endfor %}
-  </div>
 </div>

src/js/wallets.js

@@ -2,13 +2,11 @@
  * Created by cwilliams on 1/9/17.
  */
 
-;(function($) {
+;(function ($) {
-  'use strict';
+	'use strict';
-
+	$(document).ready(function () {
-  $(document).ready(function() {
+		$('.wallet-tile a').click(function (event) {
-    $('.wallet-tile a').click(function(event){
+			event.stopImmediatePropagation();
-      event.stopImmediatePropagation();
+		});
-    })
+	});
-  });
-
 }(jQuery));

src/scss/_junk-drawer.scss

@@ -37,7 +37,7 @@ $wallet-tile-hover-background-base-color: lighten($color-blue-light,9);
 	cursor: pointer;
 	text-align: center;
 	margin: $wallet-tile-spacing auto;
-	border: 1px solid #ccc;
+	border: 1px solid $color-gray;
 	min-height: $wallet-tile-min-height;
 	max-width: $wallet-tile-max-width;
 	overflow: hidden;
@@ -130,6 +130,12 @@ $wallet-tile-hover-background-base-color: lighten($color-blue-light,9);
 	}
 }
 
+.wallet-modal-container {
+	& .modal-header {
+		border-bottom: none;
+	}
+}
+
 img.staff {
 	max-width: 100px;
 	float: left;

src/scss/_navs.scss

@@ -6,6 +6,10 @@
 // Base class
 // --------------------------------------------------
 
+$nav-tabs-link-hover-border-color: $color-blue;
+$nav-tabs-border-color: $color-gray;
+$nav-link-hover-bg:  lighten($color-blue-light,9);
+
 .nav2 {
   margin-bottom: 0;
   padding-left: 0; // Override default ul/ol
@@ -20,6 +24,13 @@
       position: relative;
       display: block;
       padding: $nav-link-padding;
+
+      -o-transition:.15s;
+      -ms-transition:.15s;
+      -moz-transition:.15s;
+      -webkit-transition:.15s;
+      transition:.15s;
+
       &:hover,
       &:focus {
         text-decoration: none;

wallets/index.html

@@ -3,31 +3,34 @@ layout: default
 title: pages.wallets.title
 description: pages.wallets.description
 ---
-
 {% include hero/wallets.html %}
 
 {% include modals/win-core.html %}
 
-{% assign desktop-os-collection = site.data.wallets-collection | where:"type","desktop" | group_by:"os" %}
+{% assign desktop-os-collection = site.data.wallets-collection | where:"type","desktop" | group_by:"os"    %}
 {% assign mobile-os-collection = site.data.wallets-collection | where:"type","mobile" | group_by:"os" %}
-{% assign hardware-wallets = site.data.wallets-collection | where:"type","hardware" %}
+{% assign product-collection = site.data.wallets-collection | group_by:"product_id" %}
-{% assign paper-wallets = site.data.wallets-collection | where:"type","paper" %}
+{% assign vendor-collection = site.data.wallets-collection |  group_by:"vendor_id" %}
-{% assign security-wallets = site.data.wallets-collection | where:"type","security" %}
+{% assign hardware-wallets = site.data.wallets-collection | sort: "product_label" | where:"type","hardware" %}
+{% assign paper-wallets = site.data.wallets-collection | sort: "product_label" | where:"type","paper" %}
+{% assign security-wallets = site.data.wallets-collection| sort: "product_label" | where:"type","security" %}
 
+{% for vendor-group in vendor-collection %}
+  {% include modals/vendor-group-download-collection.html %}
+{% endfor %}
 <div class="page page--wallets">
-
   <section class="section">
     <div class="section__content">
       <h3>{% t pages.wallets.wallets-desktop-header %}</h3>
       <p>{% t pages.wallets.wallets-desktop-subtitle %}</p>
-      <ul id="wallet-os-tabs" class="nav2 nav-pills bottom-space">
+      <ul id="wallet-os-tabs" class="nav2 nav-tabs">
-        {% for wallet-os in desktop-os-collection %}
+        {% for wallet-group in desktop-os-collection %}
-          <li {%if forloop.first == true %}class="active"{% endif %}><a data-toggle="pill" href="#{{wallet-os.name}}">
+          <li role="presentation" {%if forloop.first == true %}class="active"{% endif %}><a data-toggle="pill" href="#{{wallet-group.name}}">
-            {% case wallet-os.name %}
+            {% case wallet-group.name %}
               {% when 'win32' %}
-                Windows
+                Windows (32bit)
               {% when 'win64' %}
-                Windows
+                Windows (64bit)
               {% when 'osx' %}
                 OSX
               {% when 'linux' %}
@@ -41,8 +44,8 @@ description: pages.wallets.description
         {% endfor %}
       </ul>
       <div class="tab-content">
-      {% for wallet-os in desktop-os-collection %}
+      {% for wallet-group in desktop-os-collection %}
-        {% include wallet-tile.html %}
+        {% include wallet-tile-group-container.html %}
       {% endfor %}
       </div>
     </div>
@@ -52,10 +55,10 @@ description: pages.wallets.description
     <div class="section__content">
       <h3>{% t pages.wallets.wallets-mobile-header %}</h3>
       <p>{% t pages.wallets.wallets-mobile-subtitle %}</p>
-      <ul id="wallet-mobile-os-tabs" class="nav2 nav-pills bottom-space">
+      <ul id="wallet-mobile-os-tabs" class="nav2 nav-tabs ">
-        {% for wallet-os in mobile-os-collection %}
+        {% for wallet-group in mobile-os-collection %}
-        <li {%if forloop.first == true %}class="active"{% endif %}><a data-toggle="pill" href="#{{wallet-os.name}}">
+        <li {%if forloop.first == true %}class="active"{% endif %}><a data-toggle="pill" href="#{{wallet-group.name}}">
-          {% case wallet-os.name %}
+          {% case wallet-group.name %}
           {% when 'android' %}
           Android
           {% when 'ios' %}
@@ -66,37 +69,49 @@ description: pages.wallets.description
         </a></li>
         {% endfor %}
       </ul>
-      <div class="tab-content">
+      <div class="tab-content well">
-        {% for wallet-os in mobile-os-collection %}
+        {% for wallet-group in mobile-os-collection %}
-        {% include wallet-tile.html %}
+        {% include wallet-tile-group-container.html %}
         {% endfor %}
       </div>
     </div>
   </section>
 
-  <section class="section">
+  <section class="section clearfix">
     <div class="section__content">
       <h3>{% t pages.wallets.wallets-hardware-header %}</h3>
       <p>{% t pages.wallets.wallets-hardware-subtitle %}</p>
       <div class="row">
-        {% for wallet-os in hardware-wallets %}
+        {% for wallet in hardware-wallets %}
         {% include wallet-tile.html %}
         {% endfor %}
       </div>
     </div>
   </section>
-  <section class="section">
+
+  <section class="section clearfix">
     <div class="section__content">
       <h3>{% t pages.wallets.wallets-paper-header %}</h3>
       <p>{% t pages.wallets.wallets-paper-subtitle %}</p>
 
+      <div class="row">
+        {% for wallet in paper-wallets %}
+        {% include wallet-tile.html %}
+        {% endfor %}
+      </div>
     </div>
   </section>
 
-  <section class="section">
+  <section class="section clearfix">
     <div class="section__content">
       <h3>{% t pages.wallets.wallets-security-header %}</h3>
       <p>{% t pages.wallets.wallets-security-subtitle %}</p>
+      <div class="row">
+        {% for wallet in security-wallets %}
+        {% include wallet-tile.html %}
+        {% endfor %}
+      </div>
     </div>
   </section>
+
 </div>