routes: fixed appearance

src/components/dialogs/MapListMoreDialog.jsx

@@ -62,6 +62,22 @@ class Component extends React.Component<Props> {
 
     return (
       <div className="dialog-content">
+        { list.length === 0 && loading &&
+            <div className="dialog-maplist-loader">
+              <div className="dialog-maplist-icon spin">
+                <Icon icon="icon-sync-1" />
+              </div>
+            </div>
+        }
+        { ready && !loading && list.length === 0 &&
+            <div className="dialog-maplist-loader">
+              <div className="dialog-maplist-icon">
+                <Icon icon="icon-sad-1" />
+              </div>
+              ТУТ ПУСТО <br />
+              И ОДИНОКО
+            </div>
+        }
         <div className="dialog-tabs">
           {
             Object.keys(TABS).map(item => (
@@ -105,6 +121,7 @@ class Component extends React.Component<Props> {
 
           </div>
         </div>
+
         <Scroll className="dialog-shader">
           <div className="dialog-maplist">
             {
@@ -116,24 +133,9 @@ class Component extends React.Component<Props> {
                 />
               ))
             }
-            { list.length === 0 && loading &&
-                <div className="dialog-maplist-loader">
-                  <div className="dialog-maplist-icon spin">
-                    <Icon icon="icon-sync-1" />
-                  </div>
-                  Загрузка
-                </div>
-            }
-            { ready && !loading && list.length === 0 &&
-                <div className="dialog-maplist-loader">
-                  <div className="dialog-maplist-icon">
-                    <Icon icon="icon-block-1" />
-                  </div>
-                  НИЧЕГО НЕ НАЙДЕНО
-                </div>
-            }
           </div>
         </Scroll>
+
       </div>
     );
   }

src/sprites/icon.svg

@@ -358,8 +358,17 @@
                 <path stroke="none" fill="black"/>
                 <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z" fill="white" stroke="none" stroke-width="0" transform="translate(4 4)"/>
             </g>
+
+            <g id="icon-sad-1" stroke="none">
+                <path stroke="none" fill="black"/>
+                <g transform="translate(4 4)">
+                    <circle cx="15.5" cy="9.5" r="1.5" fill="white" stroke="none"/>
+                    <circle cx="8.5" cy="9.5" r="1.5" fill="white" stroke="none"/>
+                    <path d="M12 14c-2.33 0-4.32 1.45-5.12 3.5h1.67c.69-1.19 1.97-2 3.45-2s2.75.81 3.45 2h1.67c-.8-2.05-2.79-3.5-5.12-3.5zm-.01-12C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" fill="white" stroke="none" stroke-width="0"/>
+                </g>
+            </g>
         </svg>
     </defs>
 
-    <use xlink:href="#icon-sync-1" />
+    <use xlink:href="#icon-sad-1" />
 </svg>

src/styles/dialogs.less

@@ -125,7 +125,6 @@
 }
 
 .dialog-maplist-loader {
-  height: 60px;
   display: flex;
   margin-bottom: 10px;
   text-transform: uppercase;
@@ -133,20 +132,31 @@
   align-items: center;
   justify-content: center;
   user-select: none;
-  position: relative;
-  opacity: 0.5;
-  padding-left: 60px;
+  opacity: 0.1;
+
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  padding-top: 200px;
+  box-sizing: border-box;
+  font-weight: 600;
+  font-size: 20px;
+  text-align: center;
 
   .spin {
     animation: spin infinite reverse 2s linear;
   }
   .dialog-maplist-icon {
     position: absolute;
-    left: 0;
+    left: 50%;
+    top: 50%;
+    margin-left: -100px;
+    margin-top: -100px;
 
     svg {
-      width: 60px;
-      height: 60px;
+      width: 200px;
+      height: 200px;
       fill: white;
     }
   }

src/styles/main.less

@@ -148,3 +148,7 @@ input {
   font-size: 14px;
   font-weight: 200;
 }
+
+.relative {
+  position: relative;
+}

src/styles/slider.less

@@ -46,8 +46,8 @@
     left: 0;
     height: 4px;
     border-radius: @border-radius-base;
-    background: linear-gradient(270deg, @red_secondary, @blue_secondary) fixed 20px 0;
-    background-size: 320px 100px;
+    background: linear-gradient(270deg, @red_secondary, @blue_secondary);
+    // background-size: 320px 100px;
   }
 
   &-handle {