Merge pull request #7939 from opf/fix/31744/overview-page--mobile

[31744] Fix: mobile grid

app/assets/stylesheets/content/_grid_mobile.sass

@@ -0,0 +1,11 @@
+@include breakpoint(680px down)
+  .grid--container
+    grid-template-columns: auto !important
+    grid-template-rows: auto !important
+    grid-gap: 15px
+    padding: 15px 2px
+
+  .grid--area
+    &.-widgeted
+      grid-column: 1/2 !important
+      grid-row: unset !important

app/assets/stylesheets/content/_index.sass

@@ -71,6 +71,7 @@
 @import content/contextual
 @import content/tooltip
 @import content/grid
+@import content/grid_mobile
 @import content/resizer
 @import content/version
 @import content/project_status

app/assets/stylesheets/content/menus/_menu_blocks.sass

@@ -22,3 +22,8 @@
     align-self: end
     &:before
       padding-left: 10px
+
+@include breakpoint(680px down)
+  .menu-blocks--container
+    grid-template: unset
+    grid-gap: 15px

app/assets/stylesheets/layout/_base.sass

@@ -59,7 +59,6 @@
 
   &.nosidebar
     margin-left: 0
-    padding: 20px 40px
 
   &.nomenus
     margin:     0

frontend/src/app/modules/grids/grid/grid.component.html

@@ -24,7 +24,7 @@
       <span *ngIf="drag.isDraggable"
             class="grid--area-drag-handle
                    icon
-                   icon-drag-handle"
+                   icon-drag-handle hidden-for-mobile"
             cdkDragHandle></span>
 
       <ndc-dynamic [ndcDynamicComponent]="widgetComponent(area)"
@@ -47,7 +47,7 @@
 
   <!-- One grid area per cell (row x columns) -->
   <div *ngFor="let area of layout.gridAreas; trackBy: identifyGridArea;"
-       class="grid--area"
+       class="grid--area hidden-for-mobile"
        [ngClass] = "{'-drop-target': drag.currentlyDragging,
                      '-drop-only': drag.isDropOnlyArea(area),
                      '-resize-target': resize.isTarget(area),
@@ -62,15 +62,14 @@
        (mouseover)="layout.setMousedOverArea(area)"
        [cdkDropListData]="area"
        [cdkDropListConnectedTo]="layout.gridAreaIds">
-    <div class="grid--widget-add hidden-for-mobile"
+    <div class="grid--widget-add"
-         *ngIf="layout.schema"
          [title]="add.addText"
          (click)="add.widget(area)">
     </div>
   </div>
 
   <div *ngFor="let gap of layout.gridGaps; trackBy: identifyGridArea;"
-       class="grid--area -gap"
+       class="grid--area -gap hidden-for-mobile"
        [ngClass] = "{'-addable': add.isAddable(gap),
                      '-help-mode': layout.inHelpMode,
                      '-row': gap.isRow,
@@ -81,8 +80,7 @@
        [style.grid-column-end]="gap.gridEndColumn"
        [id]="gap.guid"
        (mouseover)="layout.setMousedOverArea(gap)">
-    <div class="grid--widget-add -gap hidden-for-mobile"
+    <div class="grid--widget-add -gap"
-         *ngIf="layout.schema"
          [title]="add.addText"
          (click)="add.widget(gap)">
     </div>

frontend/src/app/modules/grids/grid/page/grid-page.component.sass

@@ -9,3 +9,8 @@
 
 .toolbar-items
   padding-right: 20px
+
+@media only screen and (max-width: 679px)
+  .title-container
+    margin-left: 0
+    margin-bottom: 0