From 9306346ae1b67d8f0ce9d94d54fa682072aeadda Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Tue, 10 Oct 2017 12:07:32 -0700
Subject: [PATCH] updated show page to match columns of publish

---
 views/index.handlebars              |   2 +-
 views/partials/assetInfo.handlebars | 129 +++++++++++++++-------------
 2 files changed, 70 insertions(+), 61 deletions(-)

diff --git a/views/index.handlebars b/views/index.handlebars
index 279347c3..f053baec 100644
--- a/views/index.handlebars
+++ b/views/index.handlebars
@@ -31,7 +31,7 @@
                             <p>OR</p>
                             <form>
                                 <label class="input-file-label" for="siofu_input">CHOOSE FILE</label>
-                                
+
                             </form>
                         </div>
                     </div>
diff --git a/views/partials/assetInfo.handlebars b/views/partials/assetInfo.handlebars
index 49427736..47a418ee 100644
--- a/views/partials/assetInfo.handlebars
+++ b/views/partials/assetInfo.handlebars
@@ -1,33 +1,33 @@
 
 <div id="show-share-buttons">
-    <div class="row row--wide row--short">
+    <div class="row row--wide">
         <div class="column column--2 column--sml-10">
-            <h3>Share:</h3>
+            <span class="label">Share:</span>
         </div><div class="column column--8 column--sml-10">
-        <div class="row row--short">
-            <div class="column column--2">
-                <a target="_blank" href="https://twitter.com/intent/tweet?text=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">twitter</a>
-            </div>
-            <div class="column column--2">
-                <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fspee.ch%2F{{fileInfo.shortId}}%2F{{fileInfo.name}}.{{fileInfo.fileExt}}&amp;src=sdkpreparse">facebook</a>
-            </div>
-            <div class="column column--2">
-                <a target="_blank" href="https://www.tumblr.com/widgets/share/tool?posttype=photo&title=Spee.ch%20%7C%20Share&caption=Shared%20From%20https://spee.ch%20A%20Decentralized%20Image%20Hosting%20Service%20Running%20On%20The%20LBRY%20Protocol%20&content=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}&tags=lbry%2C%20spee.ch%2C%20lbry.io&canonicalUrl=https%3A%2F%2Fspee.ch%2F{{fileInfo.shortId}}%2F{{fileInfo.name}}.{{fileInfo.fileExt}}&shareSource=tumblr_share_button">tublr</a>
-            </div>
-            <div class="column column--2">
-                <a target="_blank" href="https://www.reddit.com/submit?url=http%3A%2F%2Fspee.ch%2F{{fileInfo.shortId}}%2F{{fileInfo.name}}.{{fileInfo.fileExt}}&title={{fileInfo.name}}(Decentralized%20Hosting%20Provided%20By%20Spee.ch%20Using%20the%20LBRY%20Protocol)">reddit</a>
+            <div class="row row--short row--wide">
+                <div class="column column--2">
+                    <a target="_blank" href="https://twitter.com/intent/tweet?text=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">twitter</a>
+                </div>
+                <div class="column column--2">
+                    <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fspee.ch%2F{{fileInfo.shortId}}%2F{{fileInfo.name}}.{{fileInfo.fileExt}}&amp;src=sdkpreparse">facebook</a>
+                </div>
+                <div class="column column--2">
+                    <a target="_blank" href="https://www.tumblr.com/widgets/share/tool?posttype=photo&title=Spee.ch%20%7C%20Share&caption=Shared%20From%20https://spee.ch%20A%20Decentralized%20Image%20Hosting%20Service%20Running%20On%20The%20LBRY%20Protocol%20&content=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}&tags=lbry%2C%20spee.ch%2C%20lbry.io&canonicalUrl=https%3A%2F%2Fspee.ch%2F{{fileInfo.shortId}}%2F{{fileInfo.name}}.{{fileInfo.fileExt}}&shareSource=tumblr_share_button">tublr</a>
+                </div>
+                <div class="column column--2">
+                    <a target="_blank" href="https://www.reddit.com/submit?url=http%3A%2F%2Fspee.ch%2F{{fileInfo.shortId}}%2F{{fileInfo.name}}.{{fileInfo.fileExt}}&title={{fileInfo.name}}(Decentralized%20Hosting%20Provided%20By%20Spee.ch%20Using%20the%20LBRY%20Protocol)">reddit</a>
+                </div>
             </div>
         </div>
     </div>
-    </div>
 </div>
 
-<div id="show-short-link">
-    <div class="row row--wide row--short">
+<div class="row row--wide">
+    <div id="show-short-link">
         <div class="column column--2 column--sml-10">
-            <h3>Link:</h3>
+            <span class="label">Link:</span>
         </div><div class="column column--8 column--sml-10">
-            <div class="row row--short">
+            <div class="row row--short row--wide">
                 <div class="column column--7">
                     <div class="input-error" id="input-error-copy-short-link" hidden="true"></div>
                     <input type="text" id="short-link" class="input-disabled input-text--full-width" readonly spellcheck="false" value="https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}" onclick="select()"/>
@@ -37,52 +37,61 @@
             </div>
         </div>
     </div>
-</div>
-
-<div id="show-embed-code">
-    <div class="row row--wide row--short">
+    <div id="show-embed-code">
         <div class="column column--2 column--sml-10">
-            <h3>Embed:</h3>
+            <span class="label">Embed:</span>
         </div><div class="column column--8 column--sml-10">
-        <div class="row row--short">
-            <div class="column column--7">
-                <div class="input-error" id="input-error-copy-embed-text" hidden="true"></div>
-                {{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
-                    <input type="text" id="embed-text" class="input-disabled input-text--full-width" readonly onclick="select()" spellcheck="false" value='&lt;video width="100%" controls poster="{{fileInfo.thumbnail}}" src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/>&lt;/video>'/>
-                {{else}}
-                    <input type="text" id="embed-text" class="input-disabled input-text--full-width" readonly onclick="select()" spellcheck="false" value='&lt;img src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/>'/>
-                {{/ifConditional}}
-            </div><div class="column column--1"></div><div class="column column--2">
-            <button class="button--primary" data-elementtocopy="embed-text" onclick="copyToClipboard(event)">copy</button>
-        </div>
+            <div class="row row--short row--wide">
+                <div class="column column--7">
+                    <div class="input-error" id="input-error-copy-embed-text" hidden="true"></div>
+                    {{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
+                        <input type="text" id="embed-text" class="input-disabled input-text--full-width" readonly onclick="select()" spellcheck="false" value='&lt;video width="100%" controls poster="{{fileInfo.thumbnail}}" src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/>&lt;/video>'/>
+                    {{else}}
+                        <input type="text" id="embed-text" class="input-disabled input-text--full-width" readonly onclick="select()" spellcheck="false" value='&lt;img src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/>'/>
+                    {{/ifConditional}}
+                </div><div class="column column--1"></div><div class="column column--2">
+                <button class="button--primary" data-elementtocopy="embed-text" onclick="copyToClipboard(event)">copy</button>
+            </div>
         </div>
     </div>
     </div>
 </div>
 
-<h3><a class="label" id="show-details-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[less]" data-closedlabel="[more]" data-slaveelementid="show-details">[more]</a></h3>
-<div id="show-details" hidden="true">
-    <table class="metadata-table" style="table-layout: fixed">
-        <tr class="metadata-row">
-            <td class="left-column">Name</td>
-            <td>{{fileInfo.name}}</td>
-        </tr>
-        <tr class="metadata-row">
-            <td class="left-column">Claim Id</td>
-            <td class="wrap-words">{{fileInfo.claimId}}</td>
-        </tr>
-        <tr class="metadata-row">
-            <td class="left-column">File Name</td>
-            <td>{{fileInfo.fileName}}</td>
-        </tr>
-        <tr>
-            <td class="left-column">File Type</td>
-            <td>{{#if fileInfo.fileType}}
-                    {{fileInfo.fileType}}
-                {{else}}
-                    unknown
-                {{/if}}
-            </td>
-        </tr>
-    </table>
+<div class="row row--wide">
+    <a class="label" id="show-details-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[less]" data-closedlabel="[more]" data-slaveelementid="show-details">[more]</a>
+</div>
+
+<div id="show-details" hidden="true">
+    <div id="show-claim-name">
+        <div class="column column--2 column--sml-10">
+            <span class="label">Name:</span>
+        </div><div class="column column--8 column--sml-10">
+        {{fileInfo.name}}
+        </div>
+    </div>
+    <div id="show-claim-id">
+        <div class="column column--2 column--sml-10">
+            <span class="label">Claim Id:</span>
+        </div><div class="column column--8 column--sml-10">
+        {{fileInfo.claimId}}
+        </div>
+    </div>
+    <div id="show-claim-id">
+        <div class="column column--2 column--sml-10">
+            <span class="label">File Name:</span>
+        </div><div class="column column--8 column--sml-10">
+        {{fileInfo.fileName}}
+        </div>
+    </div>
+    <div id="show-claim-id">
+        <div class="column column--2 column--sml-10">
+            <span class="label">File Type:</span>
+        </div><div class="column column--8 column--sml-10">
+        {{#if fileInfo.fileType}}
+            {{fileInfo.fileType}}
+        {{else}}
+            unknown
+        {{/if}}
+        </div>
+    </div>
 </div>