Add style

akiicat · Apr 27, 2017 · 34e8d55 · 34e8d55
1 parent 0ac643a
commit 34e8d55
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 36 deletions.
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
@@ -49,15 +49,43 @@ class YoutubeRetriever extends React.Component {
   }
 
   renderStreams(streams, selector) {
-    return streams.filter((stream) => {
+    let titles = ["", "container"]
+    if (selector != 'audio only') { titles.push("video resolution") }
+    if (selector != 'video only') { titles.push("audio encoding") }
+
+    streams = streams.filter((stream) => {
       return stream.comment == selector
-    }).map((stream) => {
-      return React.createElement('li', {},
+    })
+
+    selector = (selector == "default") ? 'VIDEO + AUDIO' : selector.toUpperCase();
+
+    return React.createElement('div', {},
+      React.createElement('h2', { className: 'text-center' }, selector),
+      React.createElement('table', {},
+        React.createElement('thead', {}, this.renderStreamsHead(titles)),
+        React.createElement('tbody', {}, this.renderStreamsBody(streams))
+      )
+    )
+  }
+
+  renderStreamsHead(titles) {
+    return React.createElement('tr', {},
+      titles.map((title) => {
+        return React.createElement('th', {}, title)
+      })
+    )
+  }
+
+  renderStreamsBody(streams) {
+    return streams.map((stream) => {
+      return React.createElement('tr', {},
         // url, itag, container, video_resolution, video_profile, video_bitrate, video_encoding, audio_bitrate, audio_encoding, comment
-        React.createElement('a', { href: stream.url, target: '_blank' }, 'Download'),
-        React.createElement('span', {}, stream.container),
-        React.createElement('span', {}, stream.video_resolution),
-        React.createElement('span', {}, stream.audio_encoding)
+        React.createElement('td', {},
+          React.createElement('a', { href: stream.url, target: '_blank' }, 'Download')
+        ),
+        React.createElement('td', {}, stream.container),
+        React.createElement('td', {}, stream.video_resolution || stream.audio_encoding),
+        React.createElement('td', {}, (stream.video_resolution) ? stream.audio_encoding : null)
       )
     })
   }
@@ -74,16 +102,12 @@ class YoutubeRetriever extends React.Component {
       React.createElement('hr', {}, null),
       React.createElement('div', { id: 'response-content' },
         React.createElement('div', { className: 'text-center' },
-          React.createElement('div', {}, this.state.title ),
-          React.createElement('div', {}, this.state.author ),
-          React.createElement('div', {}, this.state.length )
+          React.createElement('div', { className: 'title' }, this.state.title ),
+          React.createElement('div', { className: 'title' }, this.state.author ),
+          React.createElement('div', { className: 'title' }, this.state.length )
         ),
         React.createElement('div', { className: 'container' }, this.state.streams),
-        React.createElement('hr', {}, null),
-        React.createElement('div', { className: 'text-center' }, 'video only'),
         React.createElement('div', { className: 'container' }, this.state.video_only),
-        React.createElement('hr', {}, null),
-        React.createElement('div', { className: 'text-center' }, 'music only'),
         React.createElement('div', { className: 'container' }, this.state.audio_only)
       )
     );

diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
@@ -5,13 +5,6 @@
   font-family: helvetica;
 }
 
-/*
-  #1cb09d;
-  #006570;
-  #a5f96e;
-  #007f6a;
-*/
-
 @font-face {
   font-family: '8-bit-pusab';
   src: url('/fonts/8-bit-pusab/8-bit-pusab.ttf');
@@ -25,41 +18,64 @@ hr {
   border: 2px solid #1cb09d;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  font-family: '8-bit-pusab';
+}
+
+h1, h2, h3, h4, h5, h6, div, p, table, a {
+  color: #cefe74;
+}
+
+a {
+  font-weight: bold;
+  text-decoration: none;
+}
+
+body {
+  background-color: #006570;
+}
+
+header {
+  padding: 20px 0;
+  background-color: #007f6a;
+}
+
+input, button {
+  height: 32px;
+  border: 1px solid #cefe74;
+  border-radius: 5px;
+  font-size: 16px;
+}
+
 .container {
   position: relative;
   margin: 20px auto;
   left: 0; right: 0;
 }
 
-.font-8-bit {
-  font-family: '8-bit-pusab';
-}
-
 .text-center {
   text-align: center;
   margin: 20px auto;
 }
 
-#youtube-retriever {
-  width: 100%;
+.title {
+  font-family: helvetica;
 }
 
-#response-content {
+#response-content table, #response-content a {
+  text-align: right;
+  color: white;
 }
 
 #url-input input {
   width: 350px;
-  font-size: 16px;
+  padding-left: 4px;
 }
 
 #url-input button {
-  width: 100px;
-  height: 22px;
-  font-size: 16px;
-  background-color: white;
-  margin: 10px;
-  border: 1px solid #aaa;
-  border-radius: 3px;
+  width: 100px; margin: 10px;
+  background-color: #006570;
+  color: #cefe74;
 }
 
 #response-content {
@@ -73,6 +89,7 @@ hr {
     max-width: 500px;
   }
 }
+
 @media screen and (min-width: 768px) {
   .container {
     width: 500px;