dialogs: head

backend/routes/auth/check.js

@@ -9,7 +9,7 @@ module.exports = async (req, res) => {
       path: 'routes',
       select: '_id title distance owner updated_at',
       options: {
-        limit: 20,
+        limit: 200,
         sort: { updated_at: -1 },
       }
     });

src/components/dialogs/MapListDialog.jsx

@@ -13,21 +13,29 @@ type Props = {
 };
 
 const Component = ({ routes, editing, routes_sorted }: Props) => (
-  <Scroll
+  <div className="dialog-content">
-    className="dialog-content"
+    <div className="dialog-head">
-  >
+      <div className="dialog-head-title">
-    <div className="dialog-maplist">
+        Ваши маршруты
-      {
+      </div>
-          routes_sorted.map(id => (
+      <div className="small gray">
-            <RouteRow
+        ({routes_sorted.length} шт.)
-              editing={editing}
+      </div>
-              {...routes[id]}
-              key={id}
-            />
-          ))
-        }
     </div>
-  </Scroll>
+    <Scroll className="dialog-shader">
+      <div className="dialog-maplist">
+        {
+            routes_sorted.map(id => (
+              <RouteRow
+                editing={editing}
+                {...routes[id]}
+                key={id}
+              />
+            ))
+          }
+      </div>
+    </Scroll>
+  </div>
 );
 
 const mapStateToProps = ({ user: { editing, user: { routes } } }) => ({

src/styles/dialogs.less

@@ -32,6 +32,11 @@
   border-radius: @panel_radius;
   box-shadow: @dialog_shadow;
 
+  display: flex;
+  flex-direction: column;
+}
+
+.dialog-shader {
   &::before, &::after {
     content: ' ';
     height: 40px;
@@ -104,3 +109,15 @@
     white-space: nowrap;
   }
 }
+
+.dialog-head {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 10px;
+  border-radius: @panel_radius @panel_radius 0 0;
+  color: white;
+}
+
+.dialog-head-title {
+  font-size: 20px;
+  text-transform: uppercase;
+}