Fakultas Ilmu Komputer UI

Commit d5edf82d authored by sirinbaisa's avatar sirinbaisa
Browse files

no message

parent bb4b8940
......@@ -244,7 +244,29 @@ card .formRegis{
margin-right: 10%;
}
.ui.segment.biodata-section{
background-color: #343838;
}
.ui.segment.biodata-section h2{
color: white;
}
.ui.segment.biodata-section h3{
color: white;
}
.ui.segment.biodata-section h5{
color: white;
}
.transkrip{
color: white;
}
.ui.segment.biodata-section b{
color: white;
}
.admin-bar{
margin: 0;
padding: 0 10px 0 0;
......
import React from 'react';
import { Segment, Image, Header, Icon, Checkbox, Container, Button, Form } from 'semantic-ui-react';
import { Segment, Image, Header, Icon, Checkbox, Container, Button, Form, Grid, Card } from 'semantic-ui-react';
import Server from './lib/Server';
import ModalAlert from './components/ModalAlert';
......@@ -78,7 +78,7 @@ export default class ProfilePage extends React.Component {
}
});
Server.submit(`/profiles/students/${this.state.id}/`, submitForm, 'PATCH').then(() => {
this.modalAlert.open('Profil berhasil diperbaharui', 'Silakan periksa kembali profil anda' );
this.modalAlert.open('Profil berhasil diperbaharui', 'Silakan periksa kembali profil anda');
}, error => error.then((r) => {
this.modalAlert.open('Pembaharuan profil gagal', r.error);
}));
......@@ -134,7 +134,7 @@ export default class ProfilePage extends React.Component {
<Form.Field>
<Checkbox
onChange={this.handleCheckbox}
checked={ this.state.show_transcript ? true : false }
checked={!!this.state.show_transcript}
label="Ijinkan perusahaan tempat saya mendaftar untuk melihat transkrip akademik saya"
name="show_transcript"
/>
......@@ -152,28 +152,96 @@ export default class ProfilePage extends React.Component {
const defaultPicture = 'http://semantic-ui.com/images/wireframe/square-image.png';
return (
<div className="profilePage">
<Segment className="biodata-section">
<Header as="h2" icon textAlign="center">
<Image src={this.state.photo ? this.state.photo : defaultPicture} size="small" shape="circular" />
</Header>
<Container textAlign="center" className="profile-biodata">
<div className="biodata">
<h3> { this.state.name } </h3>
<h5> { this.state.major }, { this.state.batch } </h5>
<h5> { this.state.email } </h5>
<h5> { this.state.phone_number } </h5>
<h5> { this.state.cityOfBirth}, { this.state.dateOfBirth } </h5>
</div>
<div className="button-profile">
<a href={this.state.resume ? this.state.resume : '#'} ><Button primary size="small">Resume</Button></a>
{ this.state.show_transcript &&
<Button primary size="small">Transkrip</Button>
<Segment className="biodata-section" >
<Grid>
<Grid.Column width={3}>
<Header as="h2" icon textAlign="center">
<Image src={this.state.photo ? this.state.photo : defaultPicture} size="small" shape="circular" />
</Header>
</Grid.Column>
<Grid.Column width={6}>
<Container textAlign="left" className="profile-biodata">
<div className="biodata">
<Segment.Group basic >
<Segment basic>
<Grid>
<Grid.Column width={2}>
<Icon color="teal" name="users" size="big"/>
</Grid.Column>
<Grid.Column width={11}>
<h2> { this.state.name } </h2>
</Grid.Column>
</Grid>
</Segment>
<Segment basic>
<Grid>
<Grid.Column width={2}>
<Icon color="teal" name="university" size="big"/>
</Grid.Column>
<Grid.Column width={13}>
<h3> { this.state.major }, { this.state.batch } </h3>
</Grid.Column>
</Grid>
</Segment>
<Segment basic>
<Grid>
<Grid.Column width={2}>
<Icon color="teal" name="mail" size="big"/>
</Grid.Column>
<Grid.Column width={13}>
<h3> { this.state.email } </h3>
</Grid.Column>
</Grid>
</Segment>
</Segment.Group>
</div>
</Container>
</Grid.Column >
<Grid.Column width={5}>
<Segment.Group>
<Segment basic>
<Grid>
<Grid.Column width={2}>
<Icon color="teal" name="phone" size="big"/>
</Grid.Column>
<Grid.Column width={13}>
<h3> { this.state.phone_number }</h3>
</Grid.Column>
</Grid>
</Segment>
<Segment basic>
<Grid>
<Grid.Column width={2}>
<Icon color="teal" name="gift" size="big" />
</Grid.Column>
<Grid.Column width={13}>
<h3> { this.state.cityOfBirth}, { this.state.dateOfBirth } </h3>
</Grid.Column>
</Grid>
</Segment>
</Segment.Group>
<div className="button-profile">
<a href={this.state.resume ? this.state.resume : '#'} ><Button primary size="small">Resume</Button></a>
{ this.state.show_transcript &&
<Button primary size="small">Transkrip</Button>
}
</div>
<div>
Bagikan Transkrip: <b>{ this.state.bagikanTranskrip }</b>
</div>
</Container>
</div>
<div>
<b> Bagikan Transkrip : { this.state.bagikanTranskrip }</b>
</div>
</Grid.Column>
</Grid>
</Segment >
{ this.updateForm(this.props.route.own) }
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment