updated /popular page

public/assets/css/_componentStyle.css

@@ -1,164 +0,0 @@
-
-/* top bar */
-#logo, #title {
-	float: left;
-}
-
-#logo {
-
-}
-
-#title {
-
-}
-
-/* publish */
-
-
-
-
-/* show routes */
-.show-asset {
-	width: 100%;
-	margin-bottom: 1em;
-	margin-top: 1em;
-}
-
-.show-asset-lite {
-	margin: 0px;
-}
-
-.panel.links {
-	font-size: small;
-}
-
-input.link {
-	width: 80%;
-}
-
-button.copy-button {
-	padding: 4px;
-	float: right;
-}
-
-.share-option {
-	margin-bottom: 1em;
-}
-
-.metadata-table {
-	font-size: small;
-	border-collapse: collapse;
-	margin-bottom: 1em;
-}
-
-.metadata-row {
-	border-bottom: 1px solid lightgrey;
-	margin: 2px;
-}
-
-.left-column {
-	width: 30%;
-	font-weight: bold;
-	vertical-align: top;
-}
-
-/* trending claims */
-.grid-item { 
-	width: 23%; 
-	margin: 0px 1% 20px 1%;
-}
-
-/* learn more */
-.learn-more {
-	text-align: center;
-	border-top: 1px solid lightgrey;
-}
-
-/* examples */
-.example {
-	clear: both;
-	width: 100%;
-	margin-bottom: 15px;
-	overflow: auto;
-}
-
-.example-image, .example-code {
-	float: left;
-	margin: 2%;
-}
-
-.example-image {
-	width: 21%;
-}
-
-.example-code {
-	float: right;
-	padding: 4%;
-	width: 62%;
-	background-color: lightgrey;
-	font-family: monospace;
-	color: #666;
-	word-wrap: break-word;
-}
-
-/*  contribute */
-#github-logo {
-	float: right;
-	height: 1em;
-}
-
-/*  content lists */
-.content-list-card {
-	margin-top: 2px;
-	padding-top: 2px;
-	border-top: 1px lightgrey solid;
-	overflow: auto;
-	position: relative;
-}
-
-.content-list-card-link {
-	position:absolute;
-	width:100%;
-	height:100%;
-	top:0;
-	left: 0;
-	z-index: 1;
-}
-
-.content-list-asset {
-	width: 20%;
-	float: left;
-	margin: 5px 30px 5px 0px;
-}
-
-.content-list-title {
-	color: black;
-	font-weight: bold;
-}
-
-.content-list-details {
-	word-wrap: break-word;
-}
-
-.content-list-details > ul {
-	position: relative;
-	z-index: 2;
-	list-style: none;
-	list-style-type: none;
-}
-
-.content-list-card:hover {
-	background-color: #F5F0EF;
-}
-
-/* statistics */
-.totals-row {
-	border-top: 1px solid grey;
-	border-bottom: 1px solid grey;
-	font-weight: bold; 
-}
-.stats-table-url {
-	word-wrap: break-word;
-}
-
-

public/assets/css/general.css

@@ -43,6 +43,11 @@ h2 {
 	font-size: x-large;
 }
 
+.h2--secondary {
+	font-weight: normal;
+	color: lightgrey;
+}
+
 h3 {
 	font-size: large;
 	font-weight: normal;

public/assets/css/publish.css

@@ -5,11 +5,15 @@
 }
 
 #publish-dropzone {
-	border: 2px dashed dodgerblue;
+	border: 2px dashed lightgrey;
     height: calc(100% - 2px);
 	position: relative;
 }
 
+#publish-dropzone:hover {
+	border: 2px dashed dodgerblue;
+}
+
 #publish-dropzone-instructions {
 	position: absolute;
 	top: 40%;
@@ -32,3 +36,17 @@
 .copy-input {
 
 }
+
+/* item lists */
+
+.content-list-item {
+
+}
+
+.content-list-item-asset {
+	width: 90%;
+}
+
+.content-list-item-link {
+
+}

views/channel.handlebars

@@ -1,6 +1,6 @@
 {{> topBar}}
 <div class="row row--full-height">
-    <h3>{{this.channelName}}<span class="h3--secondary">:{{this.longChannelId}}</span></h3>
+    <h2>{{this.channelName}}<span class="h2--secondary">:{{this.longChannelId}}</span></h2>
     <p>Below is all the free content in this channel.</p>
     {{#each this.claims}}
       {{> contentListItem}}

views/partials/contentListItem.handlebars

@@ -1,15 +1,14 @@
-<div class='content-list-card'>
+<div class='row row--wide'>
-    <a href="{{this.showUrlLong}}"><span class='content-list-card-link'></span></a>
+    <div class="column column--3 align-content-top">
-    {{#ifConditional this.contentType '===' 'video/mp4'}}
+        <a href="{{this.showUrlLong}}"><span class='content-list-card-link'></span></a>
-         <img class="content-list-asset" src="{{this.thumbnail}}"/>
+        {{#ifConditional this.contentType '===' 'video/mp4'}}
-    {{else}}
+            <img class="content-list-item-asset" src="{{this.thumbnail}}"/>
-        <img  class="content-list-asset" src="{{this.directUrlLong}}" />
+        {{else}}
-    {{/ifConditional}}
+            <img  class="content-list-item-asset" src="{{this.directUrlLong}}" />
-    <div class="content-list-details">
+        {{/ifConditional}}
-        <ul>
+    </div><div class="column column--7 align-content-top">
-            <li class="content-list-title">{{this.title}}</li>
+        <p>{{this.title}}</p>
-            <li><a href="{{this.directUrlShort}}">spee.ch{{this.directUrlShort}}</a></li>
+        <a href="{{this.directUrlShort}}">spee.ch{{this.directUrlShort}}</a>
-        </ul>
     </div>
 </div>
 

views/partials/topBar.handlebars

@@ -5,7 +5,6 @@
             <a class="nav-bar-link" href="/">Upload</a>
             <a class="nav-bar-link" href="/popular">Popular</a>
             <a class="nav-bar-link" href="/about">About</a>
-            <a class="nav-bar-link" href="https://github.com/lbryio/spee.ch" target="_blank">Source</a>
             {{#if user}}
                 <select type="text" class="select select--no-arrow nav-bar-link" onchange="toggleLogin(event)">
                     <option value="{{user.channelName}}:{{user.channelClaimId}}">@{{user.userName}}</option>

views/popular.handlebars

@@ -1,7 +1,5 @@
 {{> topBar}}
 <div class="row">
-    <h3>Popular</h3>
-    <p>Below are the 25 most popular items on spee.ch</p>
     {{#each trendingAssets}}
         {{> contentListItem}}
     {{/each}}