Wyszukiwanie wydarzeń
This commit is contained in:
AgataKow
parent
6ef1b86df0
commit
2849080423
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 914 KiB |
BIN
highneed_react/public/images/img-1.png
Normal file
BIN
highneed_react/public/images/img-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 419 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 136 KiB |
BIN
highneed_react/public/images/img-2.png
Normal file
BIN
highneed_react/public/images/img-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 223 KiB |
@ -1,46 +1,141 @@
|
||||
.events
|
||||
{
|
||||
width: 100%;
|
||||
.events {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.events__container
|
||||
{
|
||||
.filter {
|
||||
background-color: #64BE7B;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0% 1%;
|
||||
}
|
||||
|
||||
.filter-icon {
|
||||
padding-right: 2%;
|
||||
}
|
||||
|
||||
.calendar-line {
|
||||
background-color: white;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0% 1%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.filter-checkboxes {
|
||||
background-color: #F0FAF3;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0% 2%;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.toggle-text{
|
||||
padding-left:10px;
|
||||
padding-right:10px;
|
||||
padding-bottom:10px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
p3{
|
||||
font-weight:bold;
|
||||
margin: 10px 1%;
|
||||
}
|
||||
|
||||
|
||||
.menu-icon-01 {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.menu-icon-02 {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.icon-01, .icon-02 {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.menu-icon-02 .icon-02 {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.menu-icon-01 .icon-01 {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
.filterbar {
|
||||
background-color: white;
|
||||
padding: 0% 5%;
|
||||
}
|
||||
|
||||
.filterbar.disable {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-categories {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap:wrap;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
.category-checkbox {
|
||||
width:50%;
|
||||
margin: 2% 0%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.checkbox-text {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
|
||||
.events__container {
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.events__items
|
||||
{
|
||||
display: block;
|
||||
|
||||
}
|
||||
|
||||
.events__item__img
|
||||
{
|
||||
|
||||
.events__items {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.events__item__img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.events__item__info
|
||||
{
|
||||
.events__item__info {
|
||||
padding: 20px 30px 30px;
|
||||
width: 80%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.events__item__img__link
|
||||
{
|
||||
}
|
||||
|
||||
.events__item__img__link {
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #64BE7B; /* Green */
|
||||
background-color: #64BE7B;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 6px 16px;
|
||||
@ -51,4 +146,47 @@ a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button:hover {background-color: #347945}
|
||||
.button:hover {
|
||||
background-color: #347945
|
||||
}
|
||||
|
||||
|
||||
.g {
|
||||
color: #347945;
|
||||
}
|
||||
|
||||
.bl {
|
||||
color: dodgerblue;
|
||||
}
|
||||
|
||||
.r {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.p {
|
||||
color: hotpink;
|
||||
}
|
||||
|
||||
.bl {
|
||||
color: dodgerblue;
|
||||
}
|
||||
|
||||
.y {
|
||||
color: #F6BB43;
|
||||
}
|
||||
|
||||
.v {
|
||||
color: #967BDC;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.filter-categories{
|
||||
flex-direction:column;
|
||||
align-content:center;
|
||||
}
|
||||
|
||||
.category-checkbox{
|
||||
align-items:center;
|
||||
}
|
||||
}
|
||||
@ -1,34 +1,216 @@
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import './Events.css';
|
||||
import './ToggleSwitch.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>
|
||||
);
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
const closeMobileMenu = () => setClick(false);
|
||||
|
||||
|
||||
return (
|
||||
<div className='events'>
|
||||
|
||||
<div className='calendar-line'>
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.6201 5.99006C19.1301 5.50006 18.3401 5.50006 17.8501 5.99006L9.54006 14.3001C9.15006 14.6901 9.15006 15.3201 9.54006 15.7101L17.8501 24.0201C18.3401 24.5101 19.1301 24.5101 19.6201 24.0201C20.1101 23.5301 20.1101 22.7401 19.6201 22.2501L12.3801 15.0001L19.6301 7.75006C20.1101 7.27006 20.1101 6.47006 19.6201 5.99006Z" fill="black" fill-opacity="0.8" />
|
||||
</svg>
|
||||
|
||||
<p>Pon. 14.06</p>
|
||||
<p>Wt. 15.06</p>
|
||||
<p>Śr. 16.06</p>
|
||||
<p>Czw. 17.06</p>
|
||||
<p>Pt. 18.06</p>
|
||||
<p>Sob. 19.06</p>
|
||||
<p>Ndz. 20.06</p>
|
||||
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.3799 5.99006C10.8699 5.50006 11.6599 5.50006 12.1499 5.99006L20.4599 14.3001C20.8499 14.6901 20.8499 15.3201 20.4599 15.7101L12.1499 24.0201C11.6599 24.5101 10.8699 24.5101 10.3799 24.0201C9.88994 23.5301 9.88994 22.7401 10.3799 22.2501L17.6199 15.0001L10.3699 7.75006C9.88994 7.27006 9.88994 6.47006 10.3799 5.99006Z" fill="black" fill-opacity="0.8" />
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
<div className='line'></div>
|
||||
|
||||
<div className='filter-checkboxes'>
|
||||
|
||||
<div className='toggle-text'>
|
||||
<p3>Lokalizacja</p3>
|
||||
<label className="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider g round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div className='toggle-text'>
|
||||
<p3>Wiek</p3>
|
||||
<label className="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round bl"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div className='toggle-text'>
|
||||
<p3>Kategoria</p3>
|
||||
<label className="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round r"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div className='toggle-text'>
|
||||
<p3>Rodzaj</p3>
|
||||
<label className="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round p"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div className='toggle-text'>
|
||||
<p3>Ocena</p3>
|
||||
<label className="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round y"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div className='toggle-text'>
|
||||
<p3>Cena</p3>
|
||||
<label className="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round v"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className='line'></div>
|
||||
|
||||
<nav className='filter-nav'>
|
||||
<div className='filter'>
|
||||
|
||||
<div className='filter-icon ' onClick={handleClick}>
|
||||
<div className={click ? 'menu-icon-01' : 'menu-icon-02'}>
|
||||
|
||||
<svg className='icon-01' width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.11456 7.6875C2.60415 8.19792 2.60415 9.02083 3.11456 9.53125L11.7708 18.1875C12.1771 18.5937 12.8333 18.5937 13.2396 18.1875L21.8958 9.53125C22.4062 9.02083 22.4062 8.19792 21.8958 7.6875C21.3854 7.17708 20.5625 7.17708 20.0521 7.6875L12.5 15.2292L4.9479 7.67708C4.4479 7.17708 3.61456 7.17708 3.11456 7.6875Z" fill="#323232" />
|
||||
</svg>
|
||||
<svg className='icon-02' width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21.8854 17.3125C22.3958 16.8021 22.3958 15.9792 21.8854 15.4688L13.2291 6.8125C12.8229 6.40625 12.1666 6.40625 11.7604 6.8125L3.10413 15.4687C2.59371 15.9792 2.59371 16.8021 3.10413 17.3125C3.61454 17.8229 4.43746 17.8229 4.94788 17.3125L12.5 9.77083L20.052 17.3229C20.552 17.8229 21.3854 17.8229 21.8854 17.3125Z" fill="black" />
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Filtruj</h2>
|
||||
</div>
|
||||
<div className='line'></div>
|
||||
</nav>
|
||||
|
||||
<nav className={click ? 'filterbar' : 'filterbar disable'}>
|
||||
<div className='filter-categories'>
|
||||
|
||||
<div className='category-checkbox g'>
|
||||
<h2>Lokalizacja</h2>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Nowe miasto</p3>
|
||||
</div>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Stare miasto</p3>
|
||||
</div>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Jeżyce</p3>
|
||||
</div>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Grunwald</p3>
|
||||
</div>
|
||||
</div>
|
||||
<div className='category-checkbox bl'>
|
||||
<h2>Wiek</h2>
|
||||
<div className='checkbox-text'>
|
||||
<input type='text' />
|
||||
<p3>-</p3>
|
||||
<input type='text' />
|
||||
</div>
|
||||
</div>
|
||||
<div className='category-checkbox r'>
|
||||
<h2>Kategorie</h2>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Sport</p3>
|
||||
</div>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Zabawa</p3>
|
||||
</div>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Edukacja</p3>
|
||||
</div>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Muzyka</p3>
|
||||
</div>
|
||||
</div>
|
||||
<div className='category-checkbox v'>
|
||||
<h2>Cena</h2>
|
||||
<div className='checkbox-text'>
|
||||
<input type='text' />
|
||||
<p3>-</p3>
|
||||
<input type='text' />
|
||||
</div>
|
||||
</div>
|
||||
<div className='category-checkbox p'>
|
||||
<h2>Rodzaj</h2>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Online</p3>
|
||||
</div>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Na miejscu</p3>
|
||||
</div>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Jednodniowe</p3>
|
||||
</div>
|
||||
<div className='checkbox-text'>
|
||||
<input type='checkbox' />
|
||||
<p3>Kilkudniowe</p3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='category-checkbox y'>
|
||||
<h2>Ocena</h2>
|
||||
<div className='checkbox-text'>
|
||||
<input type='text' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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ólne 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ólne zabawy na placu zabaw'
|
||||
category='Zabawa'
|
||||
age='5-7 lat'
|
||||
address='Hetmańska 48, Poznań'
|
||||
path='/'
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Events;
|
||||
|
||||
74
highneed_react/src/components/ToggleSwitch.css
Normal file
74
highneed_react/src/components/ToggleSwitch.css
Normal file
@ -0,0 +1,74 @@
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-width: 70px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #BDBDBD;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
top: -3px;
|
||||
background-color: #5F6368;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(40px);
|
||||
-ms-transform: translateX(50px);
|
||||
transform: translateX(50px);
|
||||
}
|
||||
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
input:checked + .slider.g {
|
||||
background-color: #64BE7B;
|
||||
}
|
||||
input:checked + .slider.bl {
|
||||
background-color: dodgerblue;
|
||||
}
|
||||
input:checked + .slider.r {
|
||||
background-color: red;
|
||||
}
|
||||
input:checked + .slider.p {
|
||||
background-color: hotpink;
|
||||
}
|
||||
input:checked + .slider.bl {
|
||||
background-color: dodgerblue;
|
||||
}
|
||||
input:checked + .slider.y {
|
||||
background-color: #F6BB43;
|
||||
}
|
||||
input:checked + .slider.v {
|
||||
background-color: #967BDC;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user