responsive css for the townhall page
This commit is contained in:
parent
06a10e88e0
commit
68aabeff97
|
@ -10,6 +10,7 @@
|
|||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.5em;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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 )
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
export * from "./TownhallSection";
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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}'
|
||||
},
|
||||
...
|
||||
\`\`\`
|
||||
|
|
Loading…
Reference in New Issue