poprawka lewe menu i zrobienie karty wydarzenia
This commit is contained in:
devid2971
parent
cec1787cf0
commit
b74f464fb1
BIN
highneed_react/public/images/img-1.jpg
Normal file
BIN
highneed_react/public/images/img-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 914 KiB |
BIN
highneed_react/public/images/img-2.jpg
Normal file
BIN
highneed_react/public/images/img-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
@ -1,3 +1,9 @@
|
||||
body
|
||||
{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
|
||||
@ -2,6 +2,8 @@ import React from 'react';
|
||||
import './App.css';
|
||||
import NavBar from './components/NavBar';
|
||||
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
|
||||
import SearchEvent from './components/Pages/SearchEvent';
|
||||
import Home from './components/Pages/Home';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@ -9,7 +11,8 @@ function App() {
|
||||
<Router>
|
||||
<NavBar />
|
||||
<Switch>
|
||||
<Route path='/' exact />
|
||||
<Route path='/' exact component={Home}/>
|
||||
<Route path='/search-event' component={SearchEvent}/>
|
||||
</Switch>
|
||||
</Router>
|
||||
</>
|
||||
|
||||
36
highneed_react/src/components/EventItem.js
Normal file
36
highneed_react/src/components/EventItem.js
Normal file
@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
|
||||
function EventItem(props) {
|
||||
return (
|
||||
<>
|
||||
<li className='events__item'>
|
||||
<Link className='events__item__img__link' to={props.path}>
|
||||
<img
|
||||
className='events__item__img'
|
||||
alt='Event Image'
|
||||
width='200px'
|
||||
height='200px'
|
||||
src={props.src}
|
||||
/>
|
||||
</Link>
|
||||
<div className='events__item__info'>
|
||||
<h5 className='events__item__data'>{props.data}</h5>
|
||||
<Link className='events__item__link' to={props.path}>
|
||||
<h4 className='events__item__title'>{props.title}</h4>
|
||||
</Link>
|
||||
<h5 className='events__item__category'>{props.category}</h5>
|
||||
<h5 className='events__item__age'>{props.age}</h5>
|
||||
<h5 className='events__item__address'>{props.address}</h5>
|
||||
<Link className='events__item__link' to={props.path}>
|
||||
<button className='button button-details'>Szczegóły</button> </Link>
|
||||
<Link className='events__item__link' to={props.path}>
|
||||
<button className='button button-add'>Dodaj do listy</button> </Link>
|
||||
</div>
|
||||
</li>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default EventItem;
|
||||
157
highneed_react/src/components/Events.css
Normal file
157
highneed_react/src/components/Events.css
Normal file
@ -0,0 +1,157 @@
|
||||
.events
|
||||
{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.events__container
|
||||
{
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.events__items
|
||||
{
|
||||
display: block;
|
||||
|
||||
}
|
||||
|
||||
.events__item__img
|
||||
{
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.events__item__info
|
||||
{
|
||||
padding: 20px 30px 30px;
|
||||
width: 80%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.events__item__img__link
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
color: black;
|
||||
}
|
||||
|
||||
.button
|
||||
{
|
||||
background-color: #64BE7B; /* Green */
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 4px 2px;
|
||||
border-radius: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button:hover {background-color: #347945}
|
||||
|
||||
/*.events {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.events__container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
max-width: 2120px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.events__wrapper {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: 50px 0 45px;
|
||||
}
|
||||
|
||||
.events__items {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.events__item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin: 0 1rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.events__item__link {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17);
|
||||
-webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
|
||||
filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.events__item__pic-wrap {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
padding-top: 27%; wysokość karty
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fade-img {
|
||||
animation-name: fade-img;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
.events__item__pic-wrap::after {
|
||||
content: attr(data-category);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin-left: 10px;
|
||||
padding: 6px 8px;
|
||||
max-width: calc((100%) - 60px);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background-color: #1f98f4;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.events__item__img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 90%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: cover;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
.events__item__img:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.events__item__info {
|
||||
padding: 20px 30px 30px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.events__item__text {
|
||||
color: #252e48;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
*/
|
||||
34
highneed_react/src/components/Events.js
Normal file
34
highneed_react/src/components/Events.js
Normal file
@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
import './Events.css';
|
||||
import EventItem from './EventItem';
|
||||
|
||||
function Events() {
|
||||
return (
|
||||
<div className='events'>
|
||||
<div className='events__container'>
|
||||
<ul className='events__items'>
|
||||
<EventItem
|
||||
src='images/img-1.jpg'
|
||||
data='29.07.2020 Piątek, 18:00 - 20:00'
|
||||
title='Współne zabawy na placu zabaw'
|
||||
category='Zabawa'
|
||||
age = '5-7 lat'
|
||||
address = 'Hetmańska 48, Poznań'
|
||||
path='/'
|
||||
/>
|
||||
<EventItem
|
||||
src='images/img-2.jpg'
|
||||
data='29.07.2020 Piątek, 18:00 - 20:00'
|
||||
title='Współne zabawy na placu zabaw'
|
||||
category='Zabawa'
|
||||
age = '5-7 lat'
|
||||
address = 'Hetmańska 48, Poznań'
|
||||
path='/'
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Events;
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
.navbar
|
||||
{
|
||||
background-color: #64BE7B;
|
||||
@ -12,9 +13,11 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
|
||||
.line
|
||||
{
|
||||
height: 5px;
|
||||
@ -67,9 +70,80 @@ li
|
||||
|
||||
}
|
||||
|
||||
.menu-icon-list
|
||||
{
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.menu-icon-cross
|
||||
{
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
|
||||
.icon-list, .icon-cross
|
||||
{
|
||||
position: absolute;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.sidebar.disable
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-icon-cross .icon-cross
|
||||
{
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon-list .icon-list
|
||||
{
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-links
|
||||
{
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
ul
|
||||
{
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.sidebar
|
||||
{
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
border-right: black 1px solid;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.sidebar-icon
|
||||
{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar-text
|
||||
{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left:10px ;
|
||||
}
|
||||
|
||||
@ -15,15 +15,21 @@ function NavBar() {
|
||||
<div className='navbar-container'>
|
||||
|
||||
<div className='menu-icon icon-container' onClick={handleClick}>
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<div className={click ? 'menu-icon-list' : 'menu-icon-cross'}>
|
||||
<svg className='icon-list' width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<line x1="4.28572" y1="7.92847" x2="25.7143" y2="7.92847" stroke="white" stroke-width="3"/>
|
||||
<line x1="4.28572" y1="21.6428" x2="25.7143" y2="21.6428" stroke="white" stroke-width="3"/>
|
||||
<line x1="4.28572" y1="14.7856" x2="25.7143" y2="14.7856" stroke="white" stroke-width="3"/>
|
||||
</svg>
|
||||
<svg className='icon-cross' width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.3 5.70997C17.91 5.31997 17.28 5.31997 16.89 5.70997L12 10.59L7.10997 5.69997C6.71997 5.30997 6.08997 5.30997 5.69997 5.69997C5.30997 6.08997 5.30997 6.71997 5.69997 7.10997L10.59 12L5.69997 16.89C5.30997 17.28 5.30997 17.91 5.69997 18.3C6.08997 18.69 6.71997 18.69 7.10997 18.3L12 13.41L16.89 18.3C17.28 18.69 17.91 18.69 18.3 18.3C18.69 17.91 18.69 17.28 18.3 16.89L13.41 12L18.3 7.10997C18.68 6.72997 18.68 6.08997 18.3 5.70997V5.70997Z" fill="white"/>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div classname='logo ' onClick={closeMobileMenu}>
|
||||
<h1>HighNeed.pl</h1><h2>Poznań</h2>
|
||||
<div classname='logo '>
|
||||
<Link to='/' onClick={closeMobileMenu}><h1>HighNeed.pl</h1><h2>Poznań</h2></Link>
|
||||
</div>
|
||||
<div className='icons'>
|
||||
<div className='home-icon icon-container'>
|
||||
@ -43,7 +49,7 @@ function NavBar() {
|
||||
</div>
|
||||
<div class='line'></div>
|
||||
</nav>
|
||||
<nav className={click ? 'sidebar disable' : 'sidebar'}>
|
||||
<nav className={click ? 'sidebar' : 'sidebar disable'}>
|
||||
<ul>
|
||||
<li>
|
||||
<div className='sidebar-icon'>
|
||||
@ -52,7 +58,9 @@ function NavBar() {
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.25 20.5604V14.3104C6.25 12.5844 7.44924 11.1854 8.92857 11.1854H16.0714C17.5508 11.1854 18.75 12.5844 18.75 14.3104V20.5604H6.25ZM16.0714 13.2687C16.5646 13.2687 16.9643 13.735 16.9643 14.3104V18.6207H8.03571V14.3104C8.03571 13.735 8.43546 13.2687 8.92857 13.2687H16.0714Z" fill="black"/>
|
||||
</svg>
|
||||
</div>
|
||||
Zaloguj się
|
||||
<div className='sidebar-text'>
|
||||
<Link className='nav-links' to='/search-event' onClick={closeMobileMenu} >Zaloguj się</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className='sidebar-icon'>
|
||||
@ -60,7 +68,9 @@ function NavBar() {
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9325 15.7562C18.969 13.1408 18.785 9.35694 16.3807 6.95262C13.7772 4.34913 9.55612 4.34913 6.95262 6.95262C4.34913 9.55612 4.34913 13.7772 6.95262 16.3807C9.35694 18.785 13.1408 18.969 15.7562 16.9325C15.7675 16.9453 15.7793 16.9578 15.7915 16.97L19.327 20.5055C19.6524 20.8309 20.1801 20.8309 20.5055 20.5055C20.8309 20.1801 20.8309 19.6524 20.5055 19.327L16.97 15.7915C16.9578 15.7793 16.9453 15.7675 16.9325 15.7562ZM15.2022 8.13113C17.1548 10.0838 17.1548 13.2496 15.2022 15.2022C13.2496 17.1548 10.0838 17.1548 8.13113 15.2022C6.17851 13.2496 6.17851 10.0838 8.13113 8.13113C10.0838 6.17851 13.2496 6.17851 15.2022 8.13113Z" fill="black"/>
|
||||
</svg>
|
||||
</div>
|
||||
Wyszukaj wydarzenia
|
||||
<div className='sidebar-text'>
|
||||
<Link className='nav-links' to='/search-event' onClick={closeMobileMenu} >Wyszukaj wydarzenie</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className='sidebar-icon'>
|
||||
@ -69,7 +79,9 @@ function NavBar() {
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
Kalendarz
|
||||
<div className='sidebar-text'>
|
||||
<Link className='nav-links' to='/search-event' onClick={closeMobileMenu} >Kalendarz</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className='sidebar-icon'>
|
||||
@ -77,9 +89,10 @@ function NavBar() {
|
||||
<path d="M25 12.5C25 5.59589 19.4041 0 12.5 0C5.59589 0 0 5.59589 0 12.5C0 18.7397 4.56849 23.911 10.5479 24.8493V16.1164H7.37671V12.5H10.5479V9.74658C10.5479 6.61644 12.411 4.88356 15.2671 4.88356C16.637 4.88356 18.0685 5.13014 18.0685 5.13014V8.20548H16.4931C14.9384 8.20548 14.4589 9.17123 14.4589 10.1575V12.5H17.9247L17.3699 16.1164H14.4589V24.8493C20.4315 23.911 25 18.7397 25 12.5Z" fill="#1877F2"/>
|
||||
<path d="M17.3631 16.1164L17.9178 12.5H14.4521V10.1575C14.4521 9.17119 14.9384 8.20543 16.4863 8.20543H18.0617V5.13009C18.0617 5.13009 16.6302 4.88351 15.2603 4.88351C12.4041 4.88351 10.5411 6.61639 10.5411 9.74653V12.5H7.3699V16.1164H10.5411V24.8493C11.1781 24.952 11.8288 25 12.4932 25C13.1576 25 13.8083 24.9452 14.4452 24.8493V16.1164H17.3631Z" fill="white"/>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
Facebook fanpage
|
||||
<div className='sidebar-text'>
|
||||
<Link className='nav-links' to='/search-event' onClick={closeMobileMenu} >Facebook fanpage</Link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
13
highneed_react/src/components/Pages/Home.js
Normal file
13
highneed_react/src/components/Pages/Home.js
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import '../../App.css';
|
||||
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
<>
|
||||
Strona głowna
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
13
highneed_react/src/components/Pages/SearchEvent.js
Normal file
13
highneed_react/src/components/Pages/SearchEvent.js
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import '../../App.css';
|
||||
import Events from '../Events';
|
||||
|
||||
function SearchEvent() {
|
||||
return (
|
||||
<>
|
||||
<Events/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchEvent;
|
||||
Loading…
Reference in New Issue
Block a user