v0.1 #1

Merged
niklas merged 17 commits from develop into master 2020-04-22 14:53:02 +00:00
9 changed files with 50 additions and 26 deletions
Showing only changes of commit 543d8b1501 - Show all commits

BIN
src/assets/bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

View File

@ -13,23 +13,19 @@ class App extends React.Component {
return <div> return <div>
<div className="center-wrapper"> <div className="center-wrapper">
<Quick> <Quick>
<QuickCategory name="Cat 1"> <QuickCategory name="Productivity">
<QuickItem name="Hello World" /> <QuickItem name="Nextcloud" url="#"/>
<QuickItem name="Hello World" /> <QuickItem name="Git" url="#"/>
<QuickItem name="Hello World" /> <QuickItem name="GitHub" url="https://github.com/"/>
<QuickItem name="Hello World" />
</QuickCategory> </QuickCategory>
<QuickCategory name="Cat 2">
<QuickItem name="Hello World" /> <QuickCategory name="Personal">
<QuickItem name="Hello World" /> <QuickItem name="Youtube" url="https://youtube.com/"/>
<QuickItem name="Hello World" /> <QuickItem name="Reddit" url="https://reddit.com/"/>
<QuickItem name="Hello World" />
</QuickCategory> </QuickCategory>
<QuickCategory name="Cat 3">
<QuickItem name="Hello World" /> <QuickCategory name="Other">
<QuickItem name="Hello World" /> <QuickItem name="Bitwarden" url="#"/>
<QuickItem name="Hello World" />
<QuickItem name="Hello World" />
</QuickCategory> </QuickCategory>
</Quick> </Quick>
</div> </div>

View File

@ -1,5 +1,4 @@
import * as React from "react"; import * as React from "react";
import * as PropTypes from "prop-types";
import "../style/quick.scss"; import "../style/quick.scss";
@ -15,7 +14,6 @@ class Quick extends React.Component<Props> {
render(): JSX.Element { render(): JSX.Element {
return <div className="quick-component"> return <div className="quick-component">
<p>Quick list</p>
<div className="container"> <div className="container">
{this.props.children} {this.props.children}
</div> </div>

View File

@ -1,5 +1,4 @@
import * as React from "react"; import * as React from "react";
import * as PropTypes from "prop-types";
import "../style/quickCategory.scss"; import "../style/quickCategory.scss";
@ -16,8 +15,12 @@ class QuickCategory extends React.Component<Props> {
render(): JSX.Element { render(): JSX.Element {
return <div className="quickCategory-component"> return <div className="quickCategory-component">
<div className="title">
{this.props.name} {this.props.name}
</div>
<div className="children">
{this.props.children} {this.props.children}
</div>
</div>; </div>;
} }

View File

@ -1,10 +1,10 @@
import * as React from "react"; import * as React from "react";
import * as PropTypes from "prop-types";
import "../style/quickItem.scss"; import "../style/quickItem.scss";
interface Props { interface Props {
name: string; name: string;
url: string;
} }
class QuickItem extends React.Component<Props> { class QuickItem extends React.Component<Props> {
@ -13,8 +13,12 @@ class QuickItem extends React.Component<Props> {
super(props); super(props);
} }
onClick() {
window.location.href = this.props.url;
}
render(): JSX.Element { render(): JSX.Element {
return <div className="quickItem-component"> return <div className="quickItem-component" onClick={() => this.onClick()}>
{this.props.name} {this.props.name}
</div>; </div>;
} }

View File

@ -1,7 +1,13 @@
body { body {
background-color: darkgray; background-image: url("./../assets/bg.png");
background-size: cover;
user-select: none;
color: white;
font-family: 'Raleway', sans-serif;
} }
.center-wrapper{ .center-wrapper{
margin-top: 30%; margin-top: 25%;
} }

View File

@ -1,5 +1,4 @@
.quick-component { .quick-component {
border: 3px solid green;
width: 70%; width: 70%;
margin: auto; margin: auto;

View File

@ -1,3 +1,12 @@
.quickCategory-component{ .quickCategory-component{
.title{
line-height: 3em;
font-weight: bold;
text-decoration: underline;
}
.children{
line-height: 2em;
}
} }

View File

@ -0,0 +1,9 @@
.quickItem-component{
color: rgba(#ffffff, 0.7);
cursor: pointer;
&:hover {
color: rgba(#ffffff, 1);
}
}