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,9 +13,16 @@ 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>
+      <div className="small gray">
+        ({routes_sorted.length} шт.)
+      </div>
+    </div>
+    <Scroll className="dialog-shader">
       <div className="dialog-maplist">
         {
             routes_sorted.map(id => (
@@ -28,6 +35,7 @@ const Component = ({ routes, editing, routes_sorted }: Props) => (
           }
       </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;
+}