fix details styles

jcrjaci · Feb 3, 2017 · 431f908 · 431f908
1 parent 90b3ea7
commit 431f908
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/src/components/video_detail.js b/src/components/video_detail.js
@@ -4,18 +4,20 @@ export default class App extends Component {
 
   render() {
     if (!this.props.video) {
-      return  <div>Loading...</div>;
+      return <div>Loading...</div>;
     }
-    
+
     const videoId = this.props.video.id.videoId;
     const url = `https://www.youtube.com/embed/${videoId}`;
     return (
       <div>
         <div className="embed-responsive embed-responsive-16by9">
           <iframe className="embed-responsive-item" src={url} />
         </div>
-        <div className="text-left">{this.props.video.snippet.title}</div>
-        <div className="text-center">{this.props.video.snippet.description}</div>
+        <div className="video-detail">
+          <div className="text-left">{this.props.video.snippet.title}</div>
+          <div className="text-center">{this.props.video.snippet.description}</div>
+        </div>
       </div>
     );
   }

diff --git a/src/components/video_list_item.js b/src/components/video_list_item.js
@@ -2,13 +2,14 @@ import React, { Component } from 'react';
 export default class VideoListItem extends Component {
   render() {
     return (
-      <li className="video-list-item media" onClick={(video) => this.props.videoClick(this.props.video)}>
+      <li className="video-list-item video-detail media" onClick={(video) => this.props.videoClick(this.props.video)}>
+        <div className="media-left">
         <image className="d-flex mr-3" src={this.props.video.snippet.thumbnails.default.url} />
+        </div>
         <div className="media-body">
-          <h5 className="mt-0 mb-1">
+           <div className="media-heading">
             {this.props.video.snippet.title}
-          </h5>
-          {this.props.video.snippet.description}
+          </div>
         </div>
       </li>
     );

diff --git a/style/style.css b/style/style.css
@@ -14,6 +14,9 @@ html,body{
     width: 100%;
 
 }
+.video-list-item{
+    padding: 10px;
+}
 .video-list-item:hover{
     cursor: pointer;
     background: #ddd;
@@ -22,6 +25,11 @@ html,body{
 .video-list{
     height:10; 
     padding:0;
-    overflow: auto; 
+    overflow: auto;
 }
-
+.video-detail {
+  margin-top: 10px;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}