Skip to content

Commit

Permalink
feat: convert css to js stylejsx
Browse files Browse the repository at this point in the history
  • Loading branch information
@amrsalama
amrsalama committed Feb 7, 2020
1 parent 64b84fe commit 9c63313
Show file tree
Hide file tree
Showing 12 changed files with 388 additions and 359 deletions.
60 changes: 32 additions & 28 deletions src/Components/Board/Board.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,43 +3,47 @@ import PropTypes from 'prop-types';
import { blockSize } from '../common';
import { TraineeList } from '../TraineeList';
import Sheet from '../Sheet';
import './styles.css';
import styles from './styles';

class Board extends React.Component {
render() {
const { sheets, trainees } = this.props;

return (
<div className="board">
<div className="trainees-section">
<TraineeList trainees={trainees} />
</div>
<div className="sheets-section">
<div className="sheets">
{sheets.map(({ id, name, problems }, index) => (
<div className="sheet-collection" key={index}>
<Sheet id={id} name={name} problems={problems} />
</div>
))}
<>
<div className="board">
<div className="trainees-section">
<TraineeList trainees={trainees} />
</div>
<div className="trainee-problems-status">
{trainees.map(() => (
<div className="trainee-problems-row">
{sheets.map(({ problems }) =>
problems.map(({ id }) => (
<div
className="trainee-problems-cell ac"
style={{ width: blockSize, height: blockSize }}
>
AC
</div>
))
)}
</div>
))}
<div className="sheets-section">
<div className="sheets">
{sheets.map(({ id, name, problems }, index) => (
<div className="sheet-collection" key={index}>
<Sheet id={id} name={name} problems={problems} />
</div>
))}
</div>
<div className="trainee-problems-status">
{trainees.map((_, index) => (
<div key={index} className="trainee-problems-row">
{sheets.map(({ problems }) =>
problems.map(({ id }) => (
<div
key={id}
className="trainee-problems-cell ac"
style={{ width: blockSize, height: blockSize }}
>
AC
</div>
))
)}
</div>
))}
</div>
</div>
</div>
</div>
<style jsx={true}>{styles}</style>
</>
);
}
}
Expand Down
76 changes: 0 additions & 76 deletions src/Components/Board/styles.css
View file

This file was deleted.

80 changes: 80 additions & 0 deletions src/Components/Board/styles.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import css from 'styled-jsx/css';

export default css`
.board {
display: flex;
flex-direction: row;
overflow: auto;
}
/* trainees */
.board .trainees-section {
background-color: white;
position: sticky;
left: 0;
}
/* sheets */
.board .sheets-section .sheets {
display: flex;
flex-direction: row;
}
.board .sheets-section .sheets .sheet-collection {
border-top: 1px solid #535353;
border-right: 1px solid #535353;
border-bottom: 1px solid #535353;
box-sizing: border-box;
}
.board .sheets-section .sheets .sheet-collection:first-of-type {
border-left: 1px solid #535353;
}
.board .sheets-section .trainee-problems-status {
display: flex;
flex-direction: column;
}
.board .sheets-section .trainee-problems-status .trainee-problems-row {
display: flex;
flex-direction: row;
padding: 5px 0;
}
.board
.sheets-section
.trainee-problems-status
.trainee-problems-row:first-of-type {
padding-top: 10px;
}
.board
.sheets-section
.trainee-problems-status
.trainee-problems-row:last-of-type {
padding-bottom: 10px;
}
.board .sheets-section .trainee-problems-status .trainee-problems-cell {
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid;
border-right: 1px solid;
border-bottom: 1px solid;
box-sizing: border-box;
}
.board
.sheets-section
.trainee-problems-status
.trainee-problems-cell:first-of-type {
border-left: 1px solid;
}
.board .sheets-section .trainee-problems-status .trainee-problems-cell.ac {
background-color: lightgreen;
border-color: green;
}
`;
65 changes: 34 additions & 31 deletions src/Components/Sheet/Sheet.js
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,48 @@
import React from 'react';
import PropTypes from 'prop-types';
import { sheetNameHeight, blockSize, sheetProblemIdHeight } from '../common';
import './styles.css';
import styles from './styles';

class Sheet extends React.Component {
render() {
const { id, name, problems } = this.props;

return (
<div className="sheet">
<a
href={`https://codeforces.com/group/MWSDmqGsZm/contest/${id}`}
rel="noopener noreferrer"
target="_blank"
className="title"
style={{ height: sheetNameHeight }}
>
{name}
</a>
<div className="problems">
{problems.map((problem, index) => (
<a
key={index}
href={`https://codeforces.com/group/MWSDmqGsZm/contest/${id}/problem/${problem.id}`}
rel="noopener noreferrer"
target="_blank"
className="problem"
style={{ width: blockSize, height: sheetProblemIdHeight }}
>
<div className="id">{problem.id}</div>
<div className="status">(999/999)</div>
<div
className="details"
style={{ top: sheetProblemIdHeight - 5 }}
<>
<div className="sheet">
<a
href={`https://codeforces.com/group/MWSDmqGsZm/contest/${id}`}
rel="noopener noreferrer"
target="_blank"
className="title"
style={{ height: sheetNameHeight }}
>
{name}
</a>
<div className="problems">
{problems.map((problem, index) => (
<a
key={index}
href={`https://codeforces.com/group/MWSDmqGsZm/contest/${id}/problem/${problem.id}`}
rel="noopener noreferrer"
target="_blank"
className="problem"
style={{ width: blockSize, height: sheetProblemIdHeight }}
>
{problem.name}
</div>
</a>
))}
<div className="id">{problem.id}</div>
<div className="status">(999/999)</div>
<div
className="details"
style={{ top: sheetProblemIdHeight - 5 }}
>
{problem.name}
</div>
</a>
))}
</div>
</div>
</div>
<style jsx={true}>{styles}</style>
</>
);
}
}
Expand Down
49 changes: 0 additions & 49 deletions src/Components/Sheet/styles.css
View file

This file was deleted.

Loading

0 comments on commit 9c63313

Please sign in to comment.