topbar
This commit is contained in:
wrzesinski-hubert
parent
54cbd80f8b
commit
28b6869ad5
5
package-lock.json
generated
5
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -42,5 +42,6 @@
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
},
|
||||
"optionalDependencies": {}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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
50
src/components/TopBar/index.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
@ -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
16
src/components/Transfer/index.scss
Normal 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
62
src/components/Transfer/index.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user