Style multimedia component

Author: amoshydra

views/components/Multimedia/CourseWrapper.jsx

@@ -2,17 +2,18 @@
 
 import React, { PropTypes } from 'react';
 import Multimedia from './Multimedia';
+import styles from './coursewrapper.css';
 
 const CourseWrapper = ({ course, mediaList }) => (
-  <div>
-    <h3>{course.CourseCode} {course.CourseName}</h3>
-    <ul>
+  <div className={styles.wrapper}>
+    <div className={styles.title}>
+      <span className={styles.code}>{course.CourseCode}</span> <span className={styles.name}>{course.CourseName}</span>
+    </div>
+    <div className={styles.contents}>
       { mediaList.map((dataItem) =>
-        <li key={dataItem.ID}>
-          <Multimedia dataItem={dataItem} />
-        </li>
+        <Multimedia key={dataItem.ID} dataItem={dataItem} />
       )}
-    </ul>
+    </div>
   </div>
 );
 

views/components/Multimedia/Multimedia.jsx

@@ -1,9 +1,10 @@
 'use babel';
 
 import React, { PropTypes } from 'react';
+import styles from './multimedia.css';
 
 const Multimedia = ({ dataItem }) => (
-  <div>
+  <div className={styles.media}>
     <a href={`https://ivle.nus.edu.sg/v1/bank/media/viewmedia.aspx?MediaItemID=${dataItem.ID}&ChannelID=${dataItem.ChannelID}`}>{dataItem.FileTitle}</a>
   </div>
 );

views/components/Multimedia/coursewrapper.css

@@ -0,0 +1,18 @@
+.wrapper {
+  margin-bottom: 50px;
+}
+
+.wrapper .title {
+  opacity: 0.6;
+  font-weight: 600;
+  margin: 6px;
+  margin-bottom: 4px;
+} .wrapper .title .code {
+} .wrapper .title .name {
+  font-size: 0.8em;
+  opacity: 0.5;
+}
+
+.wrapper .contents {
+
+}

views/components/Multimedia/multimedia.css

@@ -0,0 +1,14 @@
+.media {
+  display: inline-block;
+  margin: 7px;
+  padding: 10px;
+  background-color: rgb(245, 245, 245);
+  box-shadow: 0.2px 0.5px 5px 0 rgba(0,0,0,0.3);
+  font-size: 0.9em;
+}
+
+.media a {
+  text-decoration:none;
+  color: black;
+  opacity: 0.8;
+}