lichin-lin · kjohn01 · Mar 24, 2017 · Apr 12, 2017 · Apr 12, 2017 · Apr 13, 2017
diff --git a/README.md b/README.md
@@ -18,3 +18,45 @@ Inspired by https://github.com/allenwhale/react-redux-boilerplate
 ---
  - npm install
  - npm run build
+
+### Contribution
+---
+ - For latest release please checkout master branch
+ - For contributing developpemnt please checkout dev branch 
+
+# Important
+ - After cloning or forking the repo, go to ```src/js/utils``` and change the ```confing.js.sample``` file into ```config.js``` to prevent critical building error.
+
+### Issue tracking
+---
+ - Strongly suggested using zenhub
+ 	https://www.zenhub.com/
+ - Feel free to open new issue or take on existing issues in the backlog.
+ - New issues will be sorted into backlog or ice box(to be done later).
+ - Beginners may want to solve the issues with "newbies" tags, which is easier and will help you understand the framework.
+
+### Newbie guidelines
+---
+ - Install zenhub
+ - Go to "Board" and pick a newbies issue
+ - Fork repo
+ - Pull from dev branch
+ - Fix the config problem mentioned above
+ - Make your changes(solve the issue)
+ - Send pull request
+
+### Note
+ ---
+  - Our work flow is based on git flow but less complicated, more like git flow + github flow.
+  - That is to say, even the PRs are accepted, they won't be released immediately. Your changes will be merged into dev not master, waiting for the next version upgrade to be released.
+  - Good to know:
+  	- git flow
+  		https://datasift.github.io/gitflow/IntroducingGitFlow.html
+  	- github flow
+  		https://guides.github.com/introduction/flow/
+
+### Contact
+ ---
+ - fb group: https://www.facebook.com/groups/internlens
+ - email: [email protected]
+ - website: https://internlens.com/
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "react-loading": "0.0.9",
     "react-rater": "^0.3.5",
     "react-redux": "^5.0.3",
+    "react-redux-firebase": "^1.4.0-rc.1",
     "react-router": "^3.0.0",
     "react-router-bootstrap": "^0.23.1",
     "react-router-redux": "^4.0.6",
@@ -78,7 +79,7 @@
     "html-webpack-plugin": "^2.24.0",
     "http-proxy-middleware": "^0.17.2",
     "node-sass": "^3.10.1",
-    "react-redux": "^5.0.2",
+    "react-redux": "^5.0.4",
     "react-transform-catch-errors": "^1.0.2",
     "redbox-react": "^1.3.2",
     "redux": "^3.6.0",

diff --git a/src/index.ejs b/src/index.ejs
@@ -30,6 +30,8 @@
         <link rel="apple-touch-icon" href="./img/favicon-128x128.png">
         <link rel="icon" href="favicon.ico" type="image/x-icon" />
         <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
+        <script src="https://use.typekit.net/kxi8dqi.js"></script>
+        <script>try{Typekit.load({ async: true });}catch(e){}</script>
         <script src='https://www.google.com/recaptcha/api.js'></script>
     </head>
 

diff --git a/src/js/components/App.jsx b/src/js/components/App.jsx
@@ -14,7 +14,8 @@ export default CSSModules(class extends Component {
             <StyleRoot>
                 <App style={{
                     maxWidth: '100%',
-                    background: 'white'
+                    background: 'white',
+                    maxHeight: 'none'
                 }}>
                     <Box justify='start'
                       align='center'
@@ -26,7 +27,10 @@ export default CSSModules(class extends Component {
                       full={true}
                       colorIndex='light-2'
                       style={{
-                          background: 'white'
+                          background: 'white',
+                          maxHeight: 'none',
+                          height: 'auto',
+                          overflow: 'none'
                       }}>
                     <Containers.common.Navbar {...this.props}/>
                       <Box direction='row'
@@ -40,11 +44,15 @@ export default CSSModules(class extends Component {
                         full='horizontal'
                         colorIndex='light-1'
                         style={{
-                            marginTop: '150px',
-                            background: 'white'
+                            marginTop: '100px',
+                            background: 'white',
+                            Height: 'auto',
+                            minHeight: 'auto',
+                            maxHeight: 'none',
+                            overflow: 'none'
                         }}>
                         {this.props.children}
-                      </Box>
+                    </Box>
                       <Box direction='row'
                         justify='start'
                         align='center'

diff --git a/src/js/components/pages/dashboard/Base.jsx b/src/js/components/pages/dashboard/Base.jsx
@@ -33,6 +33,7 @@ export default CSSModules(class extends Component {
         this.showSearchModal = this.showSearchModal.bind(this)
         this.handleOk = this.handleOk.bind(this)
         this.handleCancel = this.handleCancel.bind(this)
+        this.toggleFilter = this.toggleFilter.bind(this)
         this.state = {
             copyInternList: {},
             renderInternList: {},
@@ -45,7 +46,9 @@ export default CSSModules(class extends Component {
             isListEnd: false,
             catagoryVisible: false,
             SearchVisible: false,
-            targetCatagory: ''
+            targetCatagory: '',
+            filterBtnSelect: 'keyWordSearch',  // should be : 'keyWordSearch' or 'catagory'
+            ifMobile: false
         }
     }
     showCatagoryModal () {
@@ -70,6 +73,31 @@ export default CSSModules(class extends Component {
             SearchVisible: false
         })
     }
+    toggleFilter (action) {
+        if (this.state.ifMobile) {
+            switch (action) {
+                case 'keyWordSearch':
+                    console.log('!!!')
+                    this.setState({
+                        filterBtnSelect: '',
+                        SearchVisible: true
+                    })
+                    break
+                case 'catagory':
+                    this.setState({
+                        filterBtnSelect: '',
+                        catagoryVisible: true
+                    })
+                    break
+            }
+        } else {
+            this.setState({
+                filterBtnSelect: action,
+                SearchVisible: false,
+                catagoryVisible: false
+            })
+        }
+    }
     changeFilterInput (event) {
         console.log(event.target)
         this.setState({filterInput: event.target.value})
@@ -84,6 +112,8 @@ export default CSSModules(class extends Component {
         this.setState({currentIndex: 0})
         this.setState({isListEnd: false})
         this.setState({SearchVisible: false})
+        this.setState({targetCatagory: ''})
+        this.setState({filterBtnSelect: 'keyWordSearch'})
         let rowData = _.reverse(_.values(this.props.Intern.list))
         console.log('row', this.state.filterInput)
         let filterData = {}
@@ -146,6 +176,7 @@ export default CSSModules(class extends Component {
         this.setState({isWindowClose: !this.state.isWindowClose})
     }
     getMoreIntern () {
+        console.log('trigger load')
         if (this.state.isListEnd === true) {
             return
         }
@@ -179,6 +210,13 @@ export default CSSModules(class extends Component {
         .then(() => {
             return this.props.getInternList(0, 500)
         })
+        .then(() => {
+            if (window.innerWidth) {
+                if (window.innerWidth <= 768) {
+                    this.setState({ifMobile: true})
+                }
+            }
+        })
         .then(() => {
             return this.props.getAllFavorite()
         })
@@ -213,6 +251,62 @@ export default CSSModules(class extends Component {
         })
     }
     render () {
+        var filterTab = ''
+        var keyWordClass = 'searchBtn '
+        var catagoryClass = 'searchBtn '
+
+        switch (this.state.filterBtnSelect) {
+            case 'keyWordSearch':
+                if (!this.state.ifMobile) {
+                    keyWordClass += 'searchBtn-select'
+                }
+                filterTab = (
+                    <div title="關鍵字搜尋 text Search">
+                            <div className="loginContain"></div>
+                            <div style={{
+                                margin: '20px 0 0',
+                                display: 'flex',
+                                justifyContent: 'flex-end'
+                            }}>
+                                <input
+                                    type="text"
+                                    value={this.state.filterInput}
+                                    onChange={this.changeFilterInput}
+                                    onKeyPress={this.handleKeyPress}
+                                />
+                                <div className="searchBtn"
+                                    onClick={this.startFilter}>搜尋
+                                </div>
+                            </div>
+                        </div>)
+                break
+            case 'catagory':
+                if (!this.state.ifMobile) {
+                    catagoryClass += 'searchBtn-select'
+                }
+                filterTab = (
+                    <div title="類別搜尋 catagory">
+                            <div className="loginContain"></div>
+                            <div style={{
+                                margin: '20px 0 0',
+                                display: 'flex',
+                                justifyContent: 'flex-end'
+                            }}>
+                                <ul className="catagoryList">
+                                    {
+                                        catagoryList.map((el, id) =>
+                                            <li className={this.state.targetCatagory === el ? 'active' : null}
+                                                key={id}
+                                                onClick={() => { this.startCatagoryFilter(el) }}>
+                                                {el}
+                                            </li>
+                                        )
+                                    }
+                                </ul>
+                            </div>
+                          </div>)
+                break
+        }
         return (
             <div style={{
                 width: '100%',
@@ -234,7 +328,6 @@ export default CSSModules(class extends Component {
                         margin: '0',
                         width: '100%'
                     }}>
-
                     <Modal title="類別搜尋 catagory" visible={this.state.catagoryVisible}
                       onOk={this.handleOk} onCancel={this.handleCancel}
                       footer={[]}>
@@ -260,7 +353,11 @@ export default CSSModules(class extends Component {
                     </Modal>
                     <Modal title="關鍵字搜尋 text Search" visible={this.state.SearchVisible}
                       onOk={this.handleOk} onCancel={this.handleCancel}
-                      footer={[]}>
+                      footer={
+                          <div className="searchBtn searchBtn-select"
+                              onClick={this.startFilter}>搜尋
+                          </div>
+                      }>
                         <div className="loginContain">
                         </div>
                         <div style={{
@@ -273,10 +370,10 @@ export default CSSModules(class extends Component {
                             value={this.state.filterInput}
                             onChange={this.changeFilterInput}
                             onKeyPress={this.handleKeyPress}
+                            style ={{
+                                margin: '0 0 20px 0'
+                            }}
                         />
-                          <div className="searchBtn"
-                              onClick={this.startFilter}>搜尋
-                          </div>
                         </div>
                     </Modal>
                     <div
@@ -286,7 +383,7 @@ export default CSSModules(class extends Component {
                             height: '100%',
                             top: '0',
                             left: '0',
-                            opacity: '0.35',
+                            opacity: '0.2',
                             backgroundImage: 'url("http://i.imgur.com/LnL7Cgr.png")',
                             backgroundSize: 'cover',
                             backgroundPosition: 'center'
@@ -306,10 +403,14 @@ export default CSSModules(class extends Component {
                       tag='h4'
                       margin='none'
                       style={{
+                          fontSize: '24px',
+                          fontWeight: 'initial',
+                          letterSpacing: '0.2em',
+                          lineHeight: 'normal',
                           marginBottom: '10px',
                           zIndex: '1'
                       }}>
-                      全台灣最透明的實習經驗分享平台。
+                      最透明的實習經驗分享平台
                     </Heading>
                       <div className="submitNewPost--contain">
                           <a className="submitNewPost" target='_blank' href='https://goo.gl/forms/T4qXfrm2rhFC64cB2'>
@@ -319,7 +420,7 @@ export default CSSModules(class extends Component {
                           </a>
                         </div>
                     </Box>
-                    <div className="resultCounter">目前有 {_.size(this.state.copyInternList)} 筆搜尋</div>
+                    <div className="resultCounter">{this.state.targetCatagory ? <b>{this.state.targetCatagory}類別</b> : null }有 {_.size(this.state.copyInternList)} 筆搜尋</div>
                     <Box flex={true}
                       justify='center'
                       direction='row'
@@ -331,13 +432,26 @@ export default CSSModules(class extends Component {
                           width: '100%',
                           maxWidth: '1024px'
                       }}>
-                        <div className="searchBtn"
-                            onClick={this.showSearchModal}>關鍵字搜尋
+                        <div className= {keyWordClass}
+                            onClick={this.toggleFilter.bind(this, 'keyWordSearch')}>關鍵字搜尋
                         </div>
-                        <div className="searchBtn"
-                            onClick={this.showCatagoryModal}>類別搜尋
+                        <div className= {catagoryClass}
+                            onClick={this.toggleFilter.bind(this, 'catagory')}>類別搜尋
                         </div>
                     </Box>
+                    <Box flex={true}
+                      justify='center'
+                      direction='row'
+                      responsive={false}
+                      style={{
+                          margin: '0',
+                          padding: '0 15px',
+                          position: 'relative',
+                          width: '100%',
+                          maxWidth: '1024px'
+                      }}>
+                            {filterTab}
+                        </Box>
                 </Header>
                 <InfiniteScroll
                     pageStart={0}
@@ -356,7 +470,8 @@ export default CSSModules(class extends Component {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'center',
-                            margin: '10vh 0'
+                            margin: '10vh 0',
+                            fontSize: '1.5em'
                         }}>搜尋無相關結果，試著換換關鍵字吧</div>
                         : _.map(this.state.renderInternList, (intern, id) =>
                             intern === undefined