react-component's People
react-component's Issues
Fix colors
Colors in photoshop could be picked by color picker, but this is not the reason in some cases.
E.g. we have a folder trenner/passive where the opacity of the folder is set to 7%, but each layer of border has #ffffff color. So listItems's border color should be rgba($c-white, .07)
.
The same situation is with text color. There is a folder labels with 60% of opacity.
Always use semicolon at the end of each expression
import React from 'react';
Use .map loop for the list
Please use this structure for the List and ListItem components:
<List>
{list.map((item, key) => (
<ListItem textLabel={item.label} icon={item.icon}/>
)}
</List>
So you shoud prepare js object, store it somewhere:
export default [
{
label: "Wassermesstechnik",
icon: "/path/to/icon/"
}
]
and load it separately.
ListItems are not stretching when Dashboard height is bigger than defined
If I set height: 800px, the're is a gap in the bottom of the List. Please find the way to fix it.
Use scss not sass
This is because we already have a system where everything is already configured.
I understend your love to pythonic syntax (btw, so do I), but not for this project.
File and folder structure
- All the js files with JSX code should have .jsx extention.
- All the functional components should be in one CDashboard.jsx file, but main file where the class of the components exists should be
Dashboard.jsx
notMainDashBoard.js
.
Please make the following file/folder structure:
src/scripts/components/
Dashboard/
Dashboard.jsx // here is main Dashboard code
c/
CDashboard.jsx // here are all functional components
dashboard.scss // sass classes for functional components
Hover improvement
svg styles
There are svg styles defined multiple times. Please clear unused code.
Destructurize props in a function
Like this:
export const ListItem = ({icon, textLabel}) => {
return (
<div className={styles.listItem}>
<Icon svgIcon={icon}/>
<h3>{textLabel}</h3>
</div>
);
}
Dimentions / 2
Sorry, forgot to mention that psd is prepared for retina display, so all the dimentions should be divided by 2.
Don't use require
const styles = require('./dashboard.sass')
should be
import styles from './dashboard.sass';
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.