y0rune
/
frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

topbar

This commit is contained in:
wrzesinski-hubert 2020-06-01 16:26:58 +02:00
parent 54cbd80f8b
commit 28b6869ad5
8 changed files with 163 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -3133,6 +3133,11 @@
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
},
"bootstrap": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
"integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

3
package.json
View File

@ -42,5 +42,6 @@
"last 1 firefox version",
"last 1 safari version"
]
}
},
"optionalDependencies": {}
}

6
src/App.tsx
View File

@ -1,11 +1,13 @@
import React from "react";
import TopBar from "./components/TopBar/index"
import TopBar from "./components/TopBar/"
import Transfer from "./components/Transfer/"
import "./App.scss";
function App() {
return (
<div className="App">
<TopBar></TopBar>
<TopBar/>
<Transfer/>
</div>
);
}

105
src/components/TopBar/index.css
View File

@ -1,105 +0,0 @@
.bar {
background-color: #ffdc61;
height: 80px;
padding: 5px;
font-family: comic sans MS;
font-size: 24px;
font-weight: bold;
position: relative;
}
.logo {
width: 80px;
height: 80px;
float: left;
}
.rest {
margin-top: 20px;
overflow: hidden;
}
.tekst {
width: 200px;
float: left;
}
.iconSearch {
width: 35px;
float: left;
}
.inputdiv {
width: 70%;
float: left;
transition: width 1s;
}
.input {
width: 96%;
float: left;
transition: width 1s;
}
@media only screen and (max-width: 1400px) {
.inputdiv {
width: 50%;
float: left;
}
.input {
width: 76%;
float: left;
}
}
@media only screen and (max-width: 870px) {
.tekst {
display: none;
}
.iconClose{
display: none;
}
.iconUser {
width: 37px !important;
float: right;
}
.transfer {
margin-left: 10px !important;
width: 37px !important;
float: right;
}
.UK {
margin-left: 10px !important;
width: 35px !important;
float: right;
}
}
.search {
overflow: hidden;
}
.iconClose {
width: 35px;
float: left;
}
.iconUser {
width: 47px;
float: right;
}
.transfer {
margin-left: 25px;
width: 47px;
float: right;
}
.UK {
margin-left: 25px;
width: 45px;
float: right;
}

50
src/components/TopBar/index.scss Normal file
View File

@ -0,0 +1,50 @@
.top-bar {
background-color: #ffdc61;
height: 80px;
padding: 5px;
font-family: comic sans MS;
font-size: 24px;
font-weight: bold;
display: flex;
justify-content: space-between;
&__logo {
display: flex;
align-items: center;
flex-grow: 0.5;
justify-content: flex-start;
}
&__logo-image {
width: 80px;
height: 80px;
}
&__input-div {
width: 70%;
display: flex;
align-items: center;
flex-grow: 3;
}
&__input-field {
width: 96%;
}
&__icon-box {
display: flex;
align-items: center;
justify-content: space-around;
flex-grow: 1.5;
}
&__icon {
width: 50px;
}
}
@media only screen and (max-width: 870px) {
.top-bar__tekst {
display: none;
}
}

52
src/components/TopBar/index.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import "./index.css";
import "./index.scss";
import Input from "@material-ui/core/Input";
import SearchIcon from "@material-ui/icons/Search";
import CloseIcon from "@material-ui/icons/Close";
@ -7,43 +7,39 @@ import CloseIcon from "@material-ui/icons/Close";
export default class TopBar extends React.Component {
render() {
return (
<div className="bar">
<img
className="logo"
alt="logo"
src="https://plannaplan.pl/img/logo.svg"
/>
<div className="rest">
<div className="tekst"> plan na plan </div>
<div className="inputdiv">
<div className="iconSearch">
<SearchIcon fontSize="large"></SearchIcon>
</div>
<div className="search">
<Input
placeholder="Wyszukaj..."
inputProps={{ "aria-label": "description" }}
className="input"
/>
<div className="iconClose">
<CloseIcon fontSize="large"></CloseIcon>
</div>
</div>
</div>
<div className="top-bar">
<div className="top-bar__logo">
<img
className="transfer"
className="top-bar__logo-image"
alt="logo"
src="https://plannaplan.pl/img/logo.svg"
/>
<div className="top-bar__tekst"> plan na plan </div>
</div>
<div className="top-bar__input-div">
<SearchIcon fontSize="large"></SearchIcon>
<Input
placeholder="Wyszukaj..."
inputProps={{ "aria-label": "description" }}
className="top-bar__input-field"
/>
<CloseIcon fontSize="large"></CloseIcon>
</div>
<div className="top-bar__icon-box">
<img
className="top-bar__icon"
alt="logo"
src="https://plannaplan.pl/img/transfer.png"
/>
<img
className="UK"
className="top-bar__icon"
alt="logo"
src="https://plannaplan.pl/img/UK.png"
/>
<img
className="iconUser"
className="top-bar__icon"
alt="logo"
src="https://plannaplan.pl/img/user.svg"
src="https://plannaplan.pl/img/user.png"
/>
</div>
</div>

16
src/components/Transfer/index.scss Normal file
View File

@ -0,0 +1,16 @@
.wrapper{
display: flex;
justify-content: center;
text-align: center;
align-items: center;
height: 80vh;
}
.transfer{
display: flex;
width: 80%;
height: 70%;
background-color: purple;
align-items: center;
justify-content: center;
}

62
src/components/Transfer/index.tsx Normal file
View File

@ -0,0 +1,62 @@
import React from "react";
import Modal from "@material-ui/core/Modal";
import "./index.scss";
interface TransferProps {
names?: string;
}
interface TransferState {
isOpen: boolean;
}
export default class Transfer extends React.Component<
TransferProps,
TransferState
> {
constructor(props: TransferProps) {
super(props);
this.handleOpen = this.handleOpen.bind(this);
this.handleClose = this.handleClose.bind(this);
this.state = {
isOpen: false,
};
}
handleOpen(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
this.setState({
isOpen: true,
});
}
handleClose(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
this.setState({
isOpen: false,
});
}
render() {
return (
<div>
<button type="button" onClick={this.handleOpen}>
Open Modal
</button>
<Modal
className="wrapper"
open={this.state.isOpen}
onClose={this.handleClose}
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
>
<div className="transfer">
<button type="button" onClick={this.handleClose}>
Close Modal
</button>
</div>
</Modal>
</div>
);
}
}