From 68aabeff9751da5e27c91e1bb205692100eca717 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Tue, 11 Feb 2020 01:41:19 +0900
Subject: [PATCH] responsive css for the townhall page

---
 src/css/Controls.styles.css                  |  2 +-
 src/css/markdown.css                         |  1 +
 src/css/styles.styles.css                    | 55 ++++++++++++++++++++
 src/pages/Townhall.js                        |  2 +-
 src/pages/TownhallSection/TownhallSection.js | 13 +++--
 src/pages/TownhallSection/index.js           |  1 -
 src/pages/TownhallSection/style.module.css   | 13 +++++
 src/pages/Upload.js                          |  2 +-
 8 files changed, 82 insertions(+), 7 deletions(-)
 delete mode 100644 src/pages/TownhallSection/index.js

diff --git a/src/css/Controls.styles.css b/src/css/Controls.styles.css
index 7e76562..0856fb6 100644
--- a/src/css/Controls.styles.css
+++ b/src/css/Controls.styles.css
@@ -129,4 +129,4 @@
     display: none;
     margin-bottom: 25px;
   }
-}
+}
\ No newline at end of file
diff --git a/src/css/markdown.css b/src/css/markdown.css
index c41c55c..6fb2c5b 100644
--- a/src/css/markdown.css
+++ b/src/css/markdown.css
@@ -10,6 +10,7 @@
     font-family: 'Roboto', sans-serif;
     font-size: 16px;
     line-height: 1.5em;
+    background-color: white;
 }
 
 .markdown h1 {
diff --git a/src/css/styles.styles.css b/src/css/styles.styles.css
index 62734b9..7ced82d 100644
--- a/src/css/styles.styles.css
+++ b/src/css/styles.styles.css
@@ -88,6 +88,61 @@ button {
   background: #fff;
 }
 
+@media only screen and (max-width: 820px) {
+
+	/* Force table to not be like tables anymore */
+	table, thead, tbody, th, td, tr { 
+		display: block; 
+  }
+
+  tbody {
+    margin-top: 20px;
+    padding-bottom: 70px;
+  }
+	
+	/* Hide table headers (but not display: none;, for accessibility) */
+	thead tr { 
+		position: absolute;
+		top: -9999px;
+		left: -9999px;
+	}
+	
+	tr { border: 1px solid #ccc; }
+	
+	td { 
+		/* Behave  like a "row" */
+		border: none;
+		border-bottom: 1px solid #eee; 
+		position: relative;
+		padding-left: 50%; 
+	}
+	
+	td:before { 
+		/* Now like a table header */
+		position: absolute;
+		/* Top/left values mimic padding */
+		left: 15px;
+		width: 45%; 
+		padding-right: 10px; 
+		white-space: nowrap;
+  }
+  
+  .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
+    padding: 16px 0 16px 100px;
+    overflow-wrap: break-word;
+}
+  
+	
+	/*
+	Label the data
+	*/
+	td:nth-of-type(1):before { content: "ID"; }
+	td:nth-of-type(2):before { content: "Title"; }
+	td:nth-of-type(3):before { content: "Date"; }
+  td:nth-of-type(4):before { content: "Slides"; }
+  td:nth-of-type(5):before { content: "Watch"; }
+}
+
 @media only screen and (max-width: 600px) {
   .app-wrapper-content {
     padding: 10px;
diff --git a/src/pages/Townhall.js b/src/pages/Townhall.js
index f1a6621..8515fea 100644
--- a/src/pages/Townhall.js
+++ b/src/pages/Townhall.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { TownhallSection } from "./TownhallSection";
+import TownhallSection from "./TownhallSection/TownhallSection";
 import 'antd/lib/button/style/index.css';
 import 'antd/lib/menu/style/index.css';
 import 'antd/lib/dropdown/style/index.css';
diff --git a/src/pages/TownhallSection/TownhallSection.js b/src/pages/TownhallSection/TownhallSection.js
index 7b9b11f..04acc40 100644
--- a/src/pages/TownhallSection/TownhallSection.js
+++ b/src/pages/TownhallSection/TownhallSection.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-
+import { connect } from 'react-redux'
 import styles from "./style.module.css";
 import { TownhallTable } from "../TownhallTable";
 import { TitleSearch } from "../TitleSearch";
@@ -105,10 +105,11 @@ class TownhallSection extends Component {
   };
 
   render() {
+    const { theme } = this.props;
     return (
       <section className={styles.container}>
         <header className={styles.header}>
-          <h1 className="townhall-title">Status Town Hall Meetings</h1>
+          <h1 className={`townhall-title ${theme}`}>Status Town Hall Meetings</h1>
           <TitleSearch onSearch={this.handleSearch} className="townhall-title-search" />
           </header>
           <TownhallTable townhallData={this.state.townhallData} />
@@ -117,4 +118,10 @@ class TownhallSection extends Component {
   }
 }
 
-export { TownhallSection };
+const mapStateToProps = state => ({
+  theme: state.settings.theme
+})
+
+export default connect(
+  mapStateToProps,
+)( TownhallSection )
diff --git a/src/pages/TownhallSection/index.js b/src/pages/TownhallSection/index.js
deleted file mode 100644
index c0453a5..0000000
--- a/src/pages/TownhallSection/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./TownhallSection";
diff --git a/src/pages/TownhallSection/style.module.css b/src/pages/TownhallSection/style.module.css
index 51e2fa2..db100a3 100644
--- a/src/pages/TownhallSection/style.module.css
+++ b/src/pages/TownhallSection/style.module.css
@@ -18,6 +18,19 @@
  margin: 20px;
 }
 
+.townhall-title.light {
+  color: #555;
+ }
+
+ .townhall-title.dark {
+  color: #999;
+ }
+
+ .townhall-title.black {
+  color: #999;
+ }
+
+
 .townhall-title-search {
   margin-bottom: 20px;
 }
diff --git a/src/pages/Upload.js b/src/pages/Upload.js
index 3f4728d..d7266f2 100644
--- a/src/pages/Upload.js
+++ b/src/pages/Upload.js
@@ -33,7 +33,7 @@ export const podcasts = [
     name: 'Everything Status',
     link: 'http://feeds.soundcloud.com/users/soundcloud:users:741837922/sounds.rss',
     img:
-      'https://lh3.googleusercontent.com/W5mQLucviakmoHAFldUZbtFkTHw91vbcQk0w8o3woHEm9c4lpaMqi4cmY6bl3HmTSTnCxL5dvwwbDQa0eVGHrT16dhjEQmoAvg1Mk1Gjy-i3QtJjFRk1o5RxaWQ0BDfVn3oTntFF=w2400'
+      '{img URL}'
   },
   ...
 \`\`\`