Commit 59a23826 authored by gitexa's avatar gitexa

Resolved merge conflicts.

parents dab461ff 7bffba16
......@@ -2,8 +2,9 @@ import React from 'react';
import { graphql, createFragmentContainer } from 'react-relay';
import Page from 'components/Page/Page';
import Neighbour from 'components/Nudges/Neighbour/Neighbour'
import RankingScreen from 'components/Nudges/RankingScreen/RankingScreen';
import { withAuth } from 'modules/auth/utils';
import { Button, Segment, Header, Label, Statistic, Form } from 'semantic-ui-react';
import { Button, Segment, Header, Label, Statistic, Form, Icon, Popup } from 'semantic-ui-react';
import { Link } from 'found';
import styles from './HomeView.scss';
import classNames from 'classnames';
......@@ -40,10 +41,20 @@ class HomeView extends React.Component {
<div className={styles.currentTime}>
<Segment floated='right'>
<Icon name='clock' size='large' />
16:11
</Segment>
</div>
<Popup position='top-left'
trigger={
<Icon name='winner' size='huge' />
}
content={<RankingScreen/>}
/>
<div className={styles.timeContainer}>
<Segment circular className={styles.timeSegment}>
<Statistic className={styles.timeLabel}>
......@@ -84,8 +95,8 @@ class HomeView extends React.Component {
Bestätigen
</Button>
</Form>
</Segment>
</section>
</Page>
);
......
......@@ -13,6 +13,15 @@
clear: both;
}
.ranking{
display: flex;
flex-direction: column;
flex: 1;
width: 20px;
justify-content: center;
}
.form {
width: 500px;
}
......
import React from 'react';
//import { graphql, createFragmentContainer } from 'react-relay';
import { Table } from 'semantic-ui-react';
import styles from './RankingScreen.scss';
const rankingEntries = [
{id: "1", name: "Peter", score: "54", rank: "#1"},
{id: "2", name: "Felix", score: "37", rank: "#2"},
{id: "3", name: "Daniel", score: "26", rank: "#3"},
{id: "4", name: "Paul", score: "13", rank: "#4"},
{id: "5", name: "David", score: "7", rank: "#5"},
];
class RankingScreen extends React.Component {
render() {
return (
<div className={styles.root}>
<h2 className={styles.heading}>#369 Clique</h2>
<Table singleLine className={styles.books}>
<Table.Header>
<Table.Row>
<Table.HeaderCell className={styles.name}>Name</Table.HeaderCell>
<Table.HeaderCell className={styles.score}>Score</Table.HeaderCell>
<Table.HeaderCell className={styles.rank}>Rang</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{rankingEntries.map(e =>
<Table.Row key={e.id} >
{e.name == "Paul" &&
<Table.Cell className={styles.user}>{e.name}</Table.Cell>
}
{e.name != "Paul" &&
<Table.Cell >{e.name}</Table.Cell>
}
{e.name == "Paul" &&
<Table.Cell className={styles.user}>{e.score}</Table.Cell>
}
{e.name != "Paul" &&
<Table.Cell >{e.score}</Table.Cell>
}
{e.name == "Paul" &&
<Table.Cell className={styles.user}>{e.rank}</Table.Cell>
}
{e.name != "Paul" &&
<Table.Cell >{e.rank}</Table.Cell>
}
</Table.Row>
)}
</Table.Body>
</Table>
</div>
);
}
}
export default RankingScreen
@import "./global.scss";
.root {
.heading{
text-align: center;
color: rgba(0, 0, 0, 0.4);
}
.table{
width: 100%;
table-layout: fixed;
}
.name{
width: 40%;
}
.score{
width: 40%;
}
.rank{
width: 20%;
text-align: right!important;
}
.user{
color: rgba(0, 158, 224, 1);
}
}
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