Popup

package.json

@@ -80,6 +80,7 @@
         "react-burger-menu": "2.5.x",
         "react-datepicker": "1.6.x",
         "react-dom": "16.5.x",
+        "react-dropdown": "^1.6.4",
         "react-helmet": "5.2.x",
         "react-hot-loader": "4.3.x",
         "react-medium-image-zoom": "^3.1.2",

src/modules/common/components/Banner/index.jsx

@@ -6,10 +6,10 @@ class Banner extends React.Component {
     render() {
         return (
             <div styleName="banner">
-                <img src={require('@/assets/images/arina2.jpeg')} alt="ariana-img" styleName="main-img" />
+                <img src={this.props.img} alt="ariana-img" styleName="main-img" />
                 <div styleName="main-img-title">
-                    <div styleName="main-title">באנר פרסומי </div>
-                    <div styleName="sub-title"> הוא פשוט טקסט גולמי</div>
+                    <div styleName="main-title"> {this.props.title} </div>
+                    <div styleName="sub-title"> {this.props.subtitle}</div>
                 </div>
             </div>
         );

src/modules/common/components/Banner/style.scss

@@ -9,14 +9,20 @@ max-width: 100%;
     text-align: right;
     transform: translate(-10%, -100%);
     color:white;
+    margin-left: 20px;
+    margin-top: -45px;
 
 .main-title{
-    font-weight: bold;
+    font-weight: bolder;
+font-size: 15px;
+
 
 
 }
 .sub-title{
     font-size: 25px;
+    margin-top: 5px;
+
 
 }
 }

src/modules/common/components/EventDrop/index.jsx

@@ -1,16 +1,26 @@
 import React from 'react';
+import withModal from '@/modules/core/hoc/withModal';
+import PopUp from '../PopUp';
 import './style.scss';
 
+
+@withModal
+
 class EventDrop extends React.Component {
 
     render() {
+
+        const popUp = () => {
+            this.props.modal.show(() => <PopUp />);
+        };
+
         return (
             <div styleName="container">
                 <div styleName="side">
                     <div styleName="main-title"> רוצים לראות את    אן מארי בפריז  </div>
                     <div styleName="buttons">
-                    <button styleName="buttona">לא</button>
-                    <button styleName="buttonb">כן</button>
+                        <button styleName="buttona" onClick={this.props.changeState} >לא</button>
+                    <button styleName="buttonb" onClick={popUp}>כן</button>
                     </div>
                 </div>
                 <img src={require('@/assets/images/arina2.jpeg')} alt="ariana-img" styleName="img" />

src/modules/common/components/EventsList/style.scss

@@ -13,7 +13,7 @@
   align-content: space-between;
   margin:10px 5px 0px 5px;
   border: 0.5px #cccccc solid;
-border-radius: 3px; 
+border-radius: 3px;
 }
 
 .title {

src/modules/common/components/HotDestinations/index.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import './style.scss';
+import Rectangle from '../Rectangle';
 
 
 class HotDestinations extends React.Component {
@@ -8,9 +9,12 @@ class HotDestinations extends React.Component {
         return (
             <div>
             <div styleName="hotsection">
-              <img src={require('@/assets/icons/Asset 33.svg')} alt="icon" styleName="icon" />
-  <h1 styleName="title">יעדים חמים</h1>
-              </div>
+                <img src={require('@/assets/icons/Asset 33.svg')} alt="icon" styleName="icon" />
+                    <h1 styleName="title">יעדים חמים</h1>
+                </div>
+                <div styleName="list">
+                    <Rectangle changeState={this.props.changeStateHot} time="7.03.2019" location="אמסטרדם" />
+                </div>
 
             </div>
         );

src/modules/common/components/HotDestinations/style.scss

@@ -17,3 +17,7 @@ justify-content: flex-end;
   margin-left: 5px;
   margin-right: 5px;
 }
+
+.list{
+
+}

src/modules/common/components/HotDrop/index.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import './style.scss';
+import Rectangle from '../Rectangle';
+
+
+class HotDrop extends React.Component {
+
+    render() {
+
+
+        return (
+            <div styleName="container">
+                <Rectangle location="כרטיסים בלבד" time="החל מ 165$" />
+                <Rectangle location="חבילת בייסיק" time="החל מ $586" />
+            </div>
+
+        );
+    }
+
+}
+export default HotDrop;

src/modules/common/components/HotDrop/style.scss

@@ -0,0 +1,3 @@
+.container{
+
+}

src/modules/common/components/Input/index.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import './style.scss';
+
+export default class Input extends React.Component {
+    render() {
+        return (
+            <input styleName="input" type="text" placeholder={this.props.placeholder} />
+
+        );
+    }
+
+}

src/modules/common/components/Input/style.scss

@@ -0,0 +1,5 @@
+.input{
+  margin-top: 10px;
+  border-style: solid;
+border-width: 0.05px;
+}

src/modules/common/components/PopUp/index.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Dropdown from 'react-dropdown';
+import './style.scss';
+import Input from '../Input';
+
+
+class PopUp extends React.Component {
+
+
+    render() {
+
+const options = [
+  'התעניינות באירוע', 'מבצעים שווים'
+];
+      return (
+      <div styleName="container">
+      <form styleName="parent">
+          <Dropdown  options={options}    styleName="dropdown"   placeholder="נושא פניה" />
+      <Input placeholder="שם פרטי  *" />
+      <Input placeholder="מספר טלפון  *" />
+      <Input placeholder="כתובת מייל" />
+
+    <div styleName="note">  *שדות מילוי חובה</div>
+
+      <button styleName="button">שלח</button>
+      </form>
+     </div>
+        );
+
+}
+
+}
+export default PopUp;

src/modules/common/components/PopUp/style.scss

@@ -0,0 +1,60 @@
+.button{
+  background-color:  #01A5E2;
+}
+
+.dropdown{
+  padding-top: 3px;
+padding-bottom: 3px;
+padding-left: 90px;
+padding-right: 90px;
+border-style: solid;
+border-width: 0.05px;
+text-align: center;
+}
+
+.container{
+padding:5px 20px 5px 20px;
+}
+
+.parent{
+    display: flex;
+align-items:center;
+flex-direction: column;
+
+}
+
+input::placeholder{
+
+padding-left: 100px;
+
+}
+
+
+.button{
+  border-style: solid;
+  border-radius: 3px;
+  border-width: thin;
+  margin-top: 10px;
+  padding: 5px 18px 5px 18px;
+}
+
+.note{
+  margin-top: 5px;
+
+}
+
+.checkbox{
+  margin-left: 140px;
+}
+
+.parentcheck{
+  display: flex;
+  flex-direction: row;
+ justify-content: space-around;
+ width: 100%;
+ text-align: center;
+}
+
+.notebox{
+
+}

src/modules/common/components/Rectangle/index.jsx

@@ -11,4 +11,4 @@ export default class Rectangle extends React.Component {
 
         );
     }
-}
+  }

src/modules/common/components/Rectangle/style.scss

@@ -29,5 +29,3 @@
 .city {
     margin: 5px 5px;
 }
-
-

src/modules/core/components/App/index.jsx

@@ -4,7 +4,6 @@ import { hot } from 'react-hot-loader';
 import Navbar from '@/modules/common/components/Navbar';
 import Footer from '@/modules/common/components/Footer';
 import config from '@/config';
-
 import { ModalProvider } from '@/modules/core/context/modal';
 import AppModal from '@/modules/core/components/AppModal';
 

src/modules/core/pages/Artist/index.jsx

@@ -1,10 +1,10 @@
 import React, { PureComponent } from 'react';
 import Banner from '@/modules/common/components/Banner';
-import Slider from '@/modules/common/components/Slider';
 import EventsList from '@/modules/common/components/EventsList';
 import HotDestinations from '@/modules/common/components/HotDestinations';
-import Rectangle from '@/modules/common/components/Rectangle';
 import EventDrop from '@/modules/common/components/EventDrop';
+import HotDrop from '@/modules/common/components/HotDrop';
+import NavSlider from '@/modules/common/components/NavSlider';
 
 
 // import { withModal } from '@/modules/core/hoc/withModal';
@@ -14,6 +14,7 @@ export default class Artist extends PureComponent {
 
  state = {
      display: false,
+     drop: false,
  };
 
 
@@ -26,27 +27,34 @@ export default class Artist extends PureComponent {
 
    }
 
-   render() {
-       return (
+   changeStateHot= () => {
+       if (this.state.drop === false) {
+    this.setState({ drop: true });
+       } else {
+      this.setState({ drop: false });
+         }
+
+}
+    render() {
+      console.log(this.props.modal);
+        return (
            <div styleName="background">
-               <Banner />
-
-               <h1 styleName="title">אן מארי</h1>
-               <h3 styleName="subtitle">כולכם מוזמנים לקונצרטים</h3>
-               <h3 styleName="subtitle">באווירה קצת אחרת!</h3>
-               <Slider />
-               <p styleName="describtion">היא השתלטה על כל פלייליסט אפשרי עם השיר .. בשנה שעברה וכעת מוכיחה לנו שהיא הרבה יותר אישה עם להיט אחד</p>
-               <HotDestinations />
-               <Rectangle location="אמסטרדם" time="7.03.2019" />
-               <div style={{ }}>
-                   <h1 styleName="title">כל האירועים של אן מארי</h1>
-                   <EventsList changeState={this.changeState} />
-                   { this.state.display ? <EventDrop /> : null }
+               <Banner title="מבצעים חמים" subtitle="הוא פשוט טקסט גולמי של תעשיית וההקלדה" img={require('@/assets/images/1_Anne-Marie.jpg')} />
 
-               </div>
+            <div styleName="nav">
 
-           </div>
-       );
-   }
+             <NavSlider />
+                  <p styleName="describtion">היא השתלטה על כל פלייליסט אפשרי עם השיר .. בשנה שעברה וכעת מוכיחה לנו שהיא הרבה יותר אישה עם להיט אחד</p>
+                  </div>
+                  <HotDestinations changeStateHot={this.changeStateHot} />
+                {  this.state.drop ? < HotDrop changeState={this.changeState} /> : null }
+                <div styleName="eventlist">
+                <h1 styleName="title">כל האירועים של אן מארי</h1>
+                   <EventsList changeState={this.changeState} />
+                      {  this.state.display ? < EventDrop changeState={this.changeState} /> : null }
+                  </div>
+                </div>
 
-}
+        );
+    }
+  }

src/modules/core/pages/Artist/style.scss

@@ -3,8 +3,10 @@
     direction: rtl;
     text-align: center;
     margin: 20px 30px;
+
 }
 
+
 .subtitle{
     font-size: 15px;
     direction: rtl;
@@ -23,3 +25,12 @@
     margin-top: 15px;
 
 }
+
+.eventlist{
+  margin-top: 17px;
+  margin-bottom: 5px;
+}
+
+.nav{
+  margin-top: -20px;
+}

src/modules/core/pages/Events/index.jsx

@@ -12,9 +12,9 @@ export default class Events extends PureComponent {
     render() {
         return (
             <div styleName="events-page">
-                <Banner />
-                <Slider />
-                <Banner />
+                <Banner title="הופעות חמים" subtitle="הוא פשוט טקסט גולמי של תעשיית וההקלדה" img={require('@/assets/images/concert.jpg')}/>
+              <div styleName="slider">  <Slider /></div>
+                <Banner title="באנר פרסומי" subtitle="הוא פשוט טקסט גולמי של תעשיית וההקלדה" img={require('@/assets/images/barca-real.jpg')} />
                 <MiniEventCard />
                 <MiniEventCard />
                 <MiniEventCard />

src/modules/core/pages/Events/style.scss

@@ -7,4 +7,8 @@
     font-style: bold;
     margin-top:10%;
 }
-}
+}
+
+.slider{
+  margin-top: 35px;
+}