alpha

kre1z0 · Jul 9, 2018 · 86c12df · 86c12df
1 parent ba39111
commit 86c12df
Show file tree

Hide file tree

Showing 12 changed files with 108 additions and 20 deletions.
diff --git a/src/assets/base/leaflet.scss b/src/assets/base/leaflet.scss
@@ -434,17 +434,17 @@
   /* popup */
 
   .leaflet-popup {
+    border-top: 4px solid #ffdd2d;
     position: absolute;
     text-align: center;
-    margin-bottom: 40px;
+    margin-bottom: 24px;
   }
   .leaflet-popup-content-wrapper {
     padding: 1px;
     text-align: left;
-    border-radius: 12px;
   }
   .leaflet-popup-content {
-    margin: 13px 19px;
+    //margin: 13px 19px;
     line-height: 1.4;
   }
   .leaflet-popup-content p {

diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
@@ -1,17 +1,19 @@
 import React from "react";
 import PropTypes from "prop-types";
+import cn from "classnames";
 
 import styles from "./Button.scss";
 
 export const Button = props => {
-  const { children } = props;
+  const { children, className } = props;
   return (
-    <button className={styles.button} {...props}>
+    <button className={cn(styles.button, className)} {...props}>
       {children}
     </button>
   );
 };
 
 Button.propTypes = {
+  className: PropTypes.string,
   children: PropTypes.any,
 };
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -1,10 +1,23 @@
 .button {
+  display: inline-block;
+  cursor: pointer;
   color: #333333;
   font-size: 17px;
   line-height: 1.41;
   border-radius: 4px;
   background-color: #ffdd2d;
   border: none;
   outline: none;
-  padding: 10px 20px;
+  padding: 7px 24px;
+  transition: all .4s ease;
+  &:hover {
+    background-color: #ffce1c;
+  }
+  &:active {
+    background-color: #ffc711;
+  }
+  &[disabled] {
+    pointer-events: none;
+    background-color: rgba(255, 221, 45, 0.56);
+  }
 }
diff --git a/src/components/FilteringControlBlock/FilteringControlBlock.js b/src/components/FilteringControlBlock/FilteringControlBlock.js
@@ -61,6 +61,7 @@ export const FilteringControlBlock = ({
     <div ref={disableLeafletEventPropagation} className={styles.filteringControlBlock}>
       <h2>Коммерческая недвижимость</h2>
       <AutoComplete
+        className={styles.cityAutoComplete}
         placeholder="Выберите город"
         value={selectedCity && selectedCity.name}
         onChange={onCityChange}
@@ -81,7 +82,9 @@ export const FilteringControlBlock = ({
           }
         />
       ))}
-      <Button onClick={onFilterSubmit}>Кнопка</Button>
+      <div className={styles.submitBtnContainer}>
+        <Button onClick={onFilterSubmit}>Применить</Button>
+      </div>
     </div>
   );
 };

diff --git a/src/components/FilteringControlBlock/FilteringControlBlock.scss b/src/components/FilteringControlBlock/FilteringControlBlock.scss
@@ -8,4 +8,17 @@
   width: 294px;
   background-color: rgba(255, 255, 255, 0.4);
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
+  h2 {
+    font-size: 16px;
+    margin: 0 0 10px 0;
+  }
+}
+
+.cityAutoComplete {
+  width: 209px;
+}
+
+.submitBtnContainer {
+  margin-top: 20px;
+  text-align: center;
 }
diff --git a/src/components/Legend/Legend.scss b/src/components/Legend/Legend.scss
@@ -7,7 +7,7 @@
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  bottom: 30px;
+  bottom: 10px;
   background-color: rgba(255, 255, 255, 0.4);
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
 }

diff --git a/src/components/Popup/Popup.js b/src/components/Popup/Popup.js
@@ -6,15 +6,20 @@ import { GetFieldByProperty } from "../../components/PopupFieldElements/GetField
 
 import styles from "./Popup.scss";
 
-export const Popup = ({ fields, name }) => {
+export const Popup = ({ fields, name, description }) => {
   return (
-    <LeafletPopup maxWidth={444} maxHeight={444}>
-      <div>
-        <h1>{name}</h1>
-        {fields &&
-          fields.map((field, index) => (
-            <GetFieldByProperty key={`${index}-${field.name}`} {...field} />
-          ))}
+    <LeafletPopup className={styles.popup} maxWidth={400}>
+      <div className={styles.popupContainer}>
+        <div className={styles.popupHeader}>
+          <div className={styles.name}>{name}</div>
+          <div className={styles.description}>{description}</div>
+        </div>
+        <div className={styles.fieldsContainer}>
+          {fields &&
+            fields.map((field, index) => (
+              <GetFieldByProperty key={`${index}-${field.name}`} {...field} />
+            ))}
+        </div>
       </div>
     </LeafletPopup>
   );

diff --git a/src/components/Popup/Popup.scss b/src/components/Popup/Popup.scss
@@ -0,0 +1,29 @@
+.popup {
+  width: 400px;
+}
+
+.popupContainer {
+  width: 100%;
+}
+
+.popupHeader {
+  padding: 0 10px;
+}
+
+.name {
+  font-weight: bold;
+  font-size: 16px;
+  margin: 5px 0;
+}
+
+.description {
+  font-size: 13px;
+  color: rgba(0, 0, 0, 0.68);
+}
+
+.fieldsContainer {
+  padding: 10px;
+  margin: 10px 0;
+  border-top: 1px solid #DEDEDE;
+  border-bottom: 1px solid #DEDEDE;
+}
diff --git a/src/components/PopupFieldElements/FieldElement.js b/src/components/PopupFieldElements/FieldElement.js
@@ -18,14 +18,14 @@ const getFormattedValue = (value, name) => {
 
 const FieldRow = ({ children }) => <div className={styles.fieldRow}>{children}</div>;
 
-const FieldName = ({ name }) => <div>{name}</div>;
+const FieldName = ({ name }) => <div className={styles.name}>{name}</div>;
 
 const Icon = ({ ico, tooltip }) => {
   return <img src={ico} title={tooltip} alt={tooltip} />;
 };
 
 const FieldValue = ({ value, element, icons }) => (
-  <div>
+  <div className={styles.value}>
     {element ? element : getFormattedValue(replaceNbsps(value))}
     {icons && (
       <div>
@@ -52,7 +52,14 @@ export const LinkFieldElement = ({ name, value, url, icons }) => {
   return (
     <FieldRow>
       <FieldName name={name} />
-      <FieldValue icons={icons} element={<a href={url}>{value}</a>} />
+      <FieldValue
+        icons={icons}
+        element={
+          <a href={url} target="_blank" rel="noopener noreferrer">
+            {value}
+          </a>
+        }
+      />
     </FieldRow>
   );
 };

diff --git a/src/components/PopupFieldElements/FieldElement.scss b/src/components/PopupFieldElements/FieldElement.scss
@@ -1,3 +1,18 @@
 .fieldRow {
   display: flex;
+  font-size: 13px;
+  margin-bottom: 5px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.name {
+  width: 184px;
+  padding-right: 10px;
+  font-weight: bold;
+}
+
+.value {
+  flex: 1;
 }
diff --git a/src/containers/Map/Map.js b/src/containers/Map/Map.js
@@ -20,7 +20,7 @@ export class Map extends Component {
   constructor() {
     super();
     // Debounce
-    this.getFeatures = debounce(this.getFeatures, 400);
+    this.getFeatures = debounce(this.getFeatures, 300);
   }
   state = {
     center: [55.753215, 37.622504],

diff --git a/src/containers/Map/Map.scss b/src/containers/Map/Map.scss
@@ -3,4 +3,5 @@
   width: 100%;
   min-width: 100%;
   min-height: 100%;
+  color: #333333;
 }