Skip to content

Commit c3694e6

Browse files
lichin-linlichin-lin
committed
add(main page): internbox style
2 parents 0a4ad08 + e82fa36 commit c3694e6

5 files changed

Lines changed: 218 additions & 43 deletions

File tree

‎src/js/components/common/Navbar.styl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
position: fixed
3939
top: 0
4040
z-index: 100
41-
box-shadow: 0px 1px 5px #50514F
41+
box-shadow: 0px 1px 10px #aaa
4242
.navbar
4343
a
4444
span

‎src/js/components/pages/dashboard/Base.jsx‎

Lines changed: 126 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,18 @@ import _ from 'lodash'
66
// import { browserHistory } from 'react-router'
77

88
import Box from 'grommet/components/Box'
9-
import Search from 'grommet/components/Search'
9+
// import Search from 'grommet/components/Search'
1010
import Header from 'grommet/components/Header'
1111
import Tiles from 'grommet/components/Tiles'
1212
import Heading from 'grommet/components/Heading'
13+
import { Modal } from 'antd'
1314

1415
import Loading from 'react-loading'
1516
import InfiniteScroll from 'react-infinite-scroller'
1617

18+
const catagoryList = ['網路服務', '科技', '電商', '顧問', '廣告公關', '金融', '媒體', '設計',
19+
'文創', '醫療/生物', '教育', '旅遊', '農業', 'NPO/NGO', '傳產', '電信', '批發零售',
20+
'食品', '學校', '研究機構', '遊戲', '運輸', '政府', '其他']
1721
@Radium
1822
export default CSSModules(class extends Component {
1923
constructor (props) {
@@ -24,6 +28,11 @@ export default CSSModules(class extends Component {
2428
this.getMoreIntern = this.getMoreIntern.bind(this)
2529
this.startFilter = this.startFilter.bind(this)
2630
this.handleKeyPress = this.handleKeyPress.bind(this)
31+
this.startCatagoryFilter = this.startCatagoryFilter.bind(this)
32+
this.showCatagoryModal = this.showCatagoryModal.bind(this)
33+
this.showSearchModal = this.showSearchModal.bind(this)
34+
this.handleOk = this.handleOk.bind(this)
35+
this.handleCancel = this.handleCancel.bind(this)
2736
this.state = {
2837
copyInternList: {},
2938
renderInternList: {},
@@ -33,10 +42,36 @@ export default CSSModules(class extends Component {
3342
WindowContentIndex: 1,
3443
isWindowClose: true,
3544
isLoading: true,
36-
isListEnd: false
45+
isListEnd: false,
46+
catagoryVisible: false,
47+
SearchVisible: false,
48+
targetCatagory: ''
3749
}
3850
}
51+
showCatagoryModal () {
52+
this.setState({
53+
catagoryVisible: true
54+
})
55+
}
56+
showSearchModal () {
57+
this.setState({
58+
SearchVisible: true
59+
})
60+
}
61+
handleOk (e) {
62+
this.setState({
63+
catagoryVisible: false,
64+
SearchVisible: false
65+
})
66+
}
67+
handleCancel (e) {
68+
this.setState({
69+
catagoryVisible: false,
70+
SearchVisible: false
71+
})
72+
}
3973
changeFilterInput (event) {
74+
console.log(event.target)
4075
this.setState({filterInput: event.target.value})
4176
}
4277
handleKeyPress (event) {
@@ -48,8 +83,9 @@ export default CSSModules(class extends Component {
4883
this.setState({renderInternList: {}})
4984
this.setState({currentIndex: 0})
5085
this.setState({isListEnd: false})
86+
this.setState({SearchVisible: false})
5187
let rowData = _.reverse(_.values(this.props.Intern.list))
52-
// console.log('row', rowData)
88+
console.log('row', this.state.filterInput)
5389
let filterData = {}
5490
_.map(rowData, (el, id) => {
5591
let flag = false
@@ -70,6 +106,34 @@ export default CSSModules(class extends Component {
70106
// console.log('set url: ', this.props.router.push('/?search=' + this.state.filterInput))
71107
}
72108
}
109+
startCatagoryFilter (input) {
110+
this.setState({catagoryVisible: false})
111+
this.setState({renderInternList: {}})
112+
this.setState({currentIndex: 0})
113+
this.setState({isListEnd: false})
114+
this.setState({targetCatagory: input})
115+
let rowData = _.reverse(_.values(this.props.Intern.list))
116+
// console.log('row', rowData)
117+
let filterData = {}
118+
_.map(rowData, (el, id) => {
119+
let flag = false
120+
if (el['Catagory'] !== undefined && el['Catagory'].toString().toLowerCase().indexOf(input.toLowerCase()) !== -1) {
121+
flag = true
122+
}
123+
if (flag) {
124+
filterData[id] = el
125+
}
126+
})
127+
this.setState({
128+
copyInternList: {
129+
...filterData
130+
}
131+
})
132+
if (input !== undefined && input !== '') {
133+
this.props.router.push('/?catagory=' + input)
134+
// console.log('set url: ', this.props.router.push('/?search=' + this.state.filterInput))
135+
}
136+
}
73137
toggleWindowOpen (id) {
74138
console.log('toggle: ', id)
75139
this.props.getMessage(id)
@@ -79,7 +143,6 @@ export default CSSModules(class extends Component {
79143
})
80144
}
81145
toggleWindowClose () {
82-
console.log('toggle close')
83146
this.setState({isWindowClose: !this.state.isWindowClose})
84147
}
85148
getMoreIntern () {
@@ -131,14 +194,17 @@ export default CSSModules(class extends Component {
131194
})
132195
})
133196
.then(() => {
134-
let queryInput = this.props.location.query.search
135-
if (queryInput !== undefined) {
197+
let queryInput = this.props.location.query
198+
if (queryInput.search !== undefined) {
136199
console.log('get query: ', queryInput)
137200
this.setState({
138-
filterInput: queryInput
201+
filterInput: queryInput.search
139202
}, () => {
140203
this.startFilter()
141204
})
205+
} else if (queryInput.catagory !== undefined) {
206+
console.log('get query: ', queryInput)
207+
this.startCatagoryFilter(queryInput.catagory)
142208
}
143209
})
144210
.then(() => {
@@ -168,6 +234,51 @@ export default CSSModules(class extends Component {
168234
margin: '0',
169235
width: '100%'
170236
}}>
237+
238+
<Modal title="類別搜尋 catagory" visible={this.state.catagoryVisible}
239+
onOk={this.handleOk} onCancel={this.handleCancel}
240+
footer={[]}>
241+
<div className="loginContain">
242+
</div>
243+
<div style={{
244+
margin: '20px 0 0',
245+
display: 'flex',
246+
justifyContent: 'flex-end'
247+
}}>
248+
<ul className="catagoryList">
249+
{
250+
catagoryList.map((el, id) =>
251+
<li className={this.state.targetCatagory === el ? 'active' : null}
252+
key={id}
253+
onClick={() => { this.startCatagoryFilter(el) }}>
254+
{el}
255+
</li>
256+
)
257+
}
258+
</ul>
259+
</div>
260+
</Modal>
261+
<Modal title="關鍵字搜尋 text Search" visible={this.state.SearchVisible}
262+
onOk={this.handleOk} onCancel={this.handleCancel}
263+
footer={[]}>
264+
<div className="loginContain">
265+
</div>
266+
<div style={{
267+
margin: '20px 0 0',
268+
display: 'flex',
269+
justifyContent: 'flex-end'
270+
}}>
271+
<input
272+
type="text"
273+
value={this.state.filterInput}
274+
onChange={this.changeFilterInput}
275+
onKeyPress={this.handleKeyPress}
276+
/>
277+
<div className="searchBtn"
278+
onClick={this.startFilter}>搜尋
279+
</div>
280+
</div>
281+
</Modal>
171282
<div
172283
style={{
173284
position: 'absolute',
@@ -208,35 +319,25 @@ export default CSSModules(class extends Component {
208319
</a>
209320
</div>
210321
</Box>
322+
<div className="resultCounter">目前有 {_.size(this.state.copyInternList)} 筆搜尋</div>
211323
<Box flex={true}
212324
justify='center'
213325
direction='row'
214326
responsive={false}
215327
style={{
216-
margin: '30px 0 0 0',
328+
margin: '0',
217329
padding: '0 15px',
218330
position: 'relative',
219331
width: '100%',
220332
maxWidth: '1024px'
221333
}}>
222-
<Search inline={true}
223-
fill={true}
224-
size='small'
225-
value={this.state.filterInput}
226-
iconAlign='start'
227-
placeHolder='輸入公司名稱'
228-
onDOMChange={this.changeFilterInput}
229-
onKeyPress={this.handleKeyPress}
230-
responsive={false}
231-
dropAlign={{'right': 'right'}}
232-
style={{
233-
border: '2px solid #50514F',
234-
margin: '0 auto'
235-
}} />
236-
<div className="searchBtn"
237-
onClick={this.startFilter}>搜尋</div>
334+
<div className="searchBtn"
335+
onClick={this.showSearchModal}>關鍵字搜尋
336+
</div>
337+
<div className="searchBtn"
338+
onClick={this.showCatagoryModal}>類別搜尋
339+
</div>
238340
</Box>
239-
240341
</Header>
241342
<InfiniteScroll
242343
pageStart={0}

‎src/js/components/pages/dashboard/Base.styl‎

Lines changed: 48 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
$brand_blue_light = lighten(#58A0FC, 5%)
2+
$brand_blue = darken(#58A0FC, 5%)
3+
14
.submitNewPost--contain
25
display: flex
36
justify-content: center
@@ -15,12 +18,15 @@
1518
margin: 0 !important
1619
padding: 10px !important
1720
border-radius: 5px !important
18-
border-color: #0AF !important
19-
background: #0AF !important
21+
border-color: $brand_blue !important
22+
background: $brand_blue !important
2023

2124
.searchBtn
2225
min-width: 80px
23-
background: #0AF !important
26+
// background: $brand_blue_light !important
27+
background: transparent !important
28+
border: 2px solid $brand_blue_light
29+
color: $brand_blue_light !important
2430
border-radius: 5px
2531
margin-left: 5px
2632
color: white
@@ -41,3 +47,42 @@
4147
:-moz-placeholder { /* Firefox 18- */
4248
color: black !important;
4349
}
50+
51+
.catagoryList
52+
margin: 0
53+
padding: 10px 15px
54+
width: 100%
55+
display: flex
56+
flex-direction: row
57+
flex-wrap: wrap
58+
height: 35vh
59+
min-height: 100px
60+
overflow-y: scroll
61+
align-items: center
62+
li
63+
margin: 5px 5px
64+
padding: 3px 20px
65+
width: auto
66+
cursor: pointer
67+
font-size: 1.25em
68+
text-align: center
69+
border-radius: 20px
70+
font-weight: bold
71+
border: 1px solid $brand_blue_light
72+
&.active
73+
color: white
74+
background: $brand_blue_light
75+
76+
.resultCounter
77+
margin: 20px 0
78+
font-size: 1.5em
79+
.ant-modal-content
80+
input
81+
width: 100%
82+
border: 1px solid #50514F
83+
border-radius: 5px
84+
padding: 3px 5px
85+
font-size: 1.5em
86+
outline none
87+
&focus
88+
outline: none

‎src/js/components/pages/dashboard/InternBox.jsx‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -82,11 +82,14 @@ export default CSSModules(class Inner extends Component {
8282
render () {
8383
return (
8484
<div className="internBoxWrapper">
85+
<div className="innerBoxWrapperContent">
8586
<Animate enter={{'animation': 'fade', 'duration': 700, 'delay': 0}}
8687
keep={false}
8788
style={{
88-
marginBottom: '40px'
89+
marginBottom: '20px'
8990
}}>
91+
<Link to={`${base}/post/${this.state.id}`}
92+
target="_blank">
9093
<Tile className="InternBox" size='medium'>
9194
<Card heading={this.state.information['Name'] !== undefined ? this.state.information['Name'] : null}
9295
description={
@@ -110,22 +113,22 @@ export default CSSModules(class Inner extends Component {
110113
}
111114
headingStrong={false}
112115
link= {
113-
<Link to={`${base}/post/${this.state.id}`}
114-
target="_blank"
115-
>
116-
<Anchor
117-
// onClick={this.props.onClose}
118-
id={this.state.id.toString()}
119-
label='查看心得全文'
120-
style={{
121-
marginTop: '10px'
122-
}} />
123-
</Link>
116+
<Anchor
117+
// onClick={this.props.onClose}
118+
className="internBoxLink"
119+
id={this.state.id.toString()}
120+
label='查看心得全文'
121+
style={{
122+
marginTop: '10px',
123+
fontWeight: 'bold',
124+
color: '#0AF !important'
125+
}} />
124126
}
125127
style={{
126128
width: '100%'
127129
}}/>
128130
</Tile>
131+
</Link>
129132
<div className='actionButton'>
130133
<FavoriteIcon
131134
onClick={this.toggleFavorite}
@@ -143,7 +146,8 @@ export default CSSModules(class Inner extends Component {
143146
}}/>
144147
<span>{this.state.messageCount}</span>
145148
</div>
146-
</Animate>
149+
</Animate>
150+
</div>
147151
</div>
148152
)
149153
}

0 commit comments

Comments
 (0)