(ui) Update machines and spaces lists layout

app/frontend/src/stylesheets/application.scss

@@ -118,6 +118,7 @@
 @import "modules/settings/user-validation-setting";
 @import "modules/socials/fab-socials";
 @import "modules/spaces/space-form";
+@import "modules/spaces/spaces";
 @import "modules/store/_utilities";
 @import "modules/store/order-actions.scss";
 @import "modules/store/order-item";

app/frontend/src/stylesheets/modules/spaces/spaces.scss

@@ -0,0 +1,16 @@
+.spaces {
+  max-width: 1600px;
+  margin: 0 auto;
+  padding-bottom: 6rem;
+  display: grid;
+  gap: 2.4rem;
+
+  &-grid {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    gap: 3.2rem;
+
+    .panel { margin-bottom: 0; }
+  }
+}

app/frontend/src/stylesheets/modules/trainings/trainings.scss

@@ -10,6 +10,15 @@
     padding-bottom: 1.6rem;
   }
 
+  &-grid {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    gap: 3.2rem;
+
+    .panel { margin-bottom: 0; }
+  }
+
   &-content {
     display: flex;
     flex-direction: column;

app/frontend/templates/spaces/index.html

@@ -28,55 +28,53 @@
          ui-tour-scroll-parent-id="content-main"
          post-render="setupSpacesTour">
 
-  <div class="row">
-    <div class="col-md-3 form-group">
-      <div class="input-group m-l-lg m-b">
-        <span class="input-group-addon"><i class="fa fa-filter"></i></span>
-        <select ng-model="spaceFiltering" class="form-control">
-          <option ng-repeat="status in filterDisabled" value="{{status}}" translate>{{ 'app.public.spaces_list.status_'+status }}</option>
-        </select>
+  <div class="spaces">
+    <div class="row">
+      <div class="col-md-3 form-group">
+        <div class="input-group m-l-lg m-b">
+          <span class="input-group-addon"><i class="fa fa-filter"></i></span>
+          <select ng-model="spaceFiltering" class="form-control">
+            <option ng-repeat="status in filterDisabled" value="{{status}}" translate>{{ 'app.public.spaces_list.status_'+status }}</option>
+          </select>
+        </div>
+      </div>
+      <div class="col-md-3 col-md-offset-6 m-t-n row-centered" ng-if="isAuthorized(['admin', 'manager'])">
+        <a role="button" ui-sref="app.admin.calendar" class="btn btn-lg btn-default rounded m-t-sm text-sm">
+          <i class="fa fa-calendar-check-o m-r" aria-hidden="true"></i><span translate>{{ 'app.public.spaces_list.new_availability' }}</span>
+        </a>
       </div>
     </div>
-    <div class="col-md-3 col-md-offset-6 m-t-n row-centered" ng-if="isAuthorized(['admin', 'manager'])">
-      <a role="button" ui-sref="app.admin.calendar" class="btn btn-lg btn-default rounded m-t-sm text-sm">
-        <i class="fa fa-calendar-check-o m-r" aria-hidden="true"></i><span translate>{{ 'app.public.spaces_list.new_availability' }}</span>
-      </a>
-    </div>
-  </div>
 
-
-
-  <div class="col-xs-12 col-sm-6 col-md-4 reservable-card" ng-class="{'disabled-reservable' : space.disabled && spaceFiltering === 'all'}" ng-repeat="space in spaces | filterDisabled:spaceFiltering">
-    <div class="widget panel panel-default">
-      <div class="panel-heading picture" ng-if="!space.space_image_attributes" ng-click="showSpace(space)">
-        <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:'Font Awesome 5 Free'/icon" bs-holder class="img-responsive">
-      </div>
-      <div class="panel-heading picture" style="background-image:url({{space.space_image_attributes.attachment_url}})" ng-if="space.space_image_attributes" ng-click="showSpace(space)">
-      </div>
-      <div class="panel-body">
-        <h1 class="text-center m-b">{{space.name}}</h1>
-      </div>
-      <div class="panel-footer no-padder">
-
-        <div class="text-center clearfix">
-          <div class="col-sm-6 b-r no-padder">
-            <div class="btn btn-default btn-block no-b padder-v red reserve-button" ng-click="reserveSpace(space, $event)" ng-hide="space.disabled">
-              <i class="fa fa-bookmark m-r-xs"></i>
-              <span class="hidden-sm" translate>{{ 'app.public.spaces_list.book' }}</span>
-            </div>
+    <div class="spaces-grid">
+      <div ng-class="{'disabled-reservable' : space.disabled && spaceFiltering === 'all'}" ng-repeat="space in spaces | filterDisabled:spaceFiltering">
+        <div class="widget panel panel-default">
+          <div class="panel-heading picture" ng-if="!space.space_image_attributes" ng-click="showSpace(space)">
+            <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:'Font Awesome 5 Free'/icon" bs-holder class="img-responsive">
           </div>
-          <div class="no-padder" ng-class="{'col-sm-6': !space.disabled}">
-            <div class="btn btn-default btn-block padder-v no-b red show-button" ng-click="showSpace(space)">
-              <i class="fa fa-eye m-r-xs"></i>
-              <span class="hidden-sm" translate>{{ 'app.shared.buttons.consult' }}</span>
+          <div class="panel-heading picture" style="background-image:url({{space.space_image_attributes.attachment_url}})" ng-if="space.space_image_attributes" ng-click="showSpace(space)">
+          </div>
+          <div class="panel-body">
+            <h1 class="text-center m-b">{{space.name}}</h1>
+          </div>
+          <div class="panel-footer no-padder">
+            <div class="text-center clearfix">
+              <div class="col-sm-6 b-r no-padder">
+                <div class="btn btn-default btn-block no-b padder-v red reserve-button" ng-click="reserveSpace(space, $event)" ng-hide="space.disabled">
+                  <i class="fa fa-bookmark m-r-xs"></i>
+                  <span class="hidden-sm" translate>{{ 'app.public.spaces_list.book' }}</span>
+                </div>
+              </div>
+              <div class="no-padder" ng-class="{'col-sm-6': !space.disabled}">
+                <div class="btn btn-default btn-block padder-v no-b red show-button" ng-click="showSpace(space)">
+                  <i class="fa fa-eye m-r-xs"></i>
+                  <span class="hidden-sm" translate>{{ 'app.shared.buttons.consult' }}</span>
+                </div>
+              </div>
             </div>
           </div>
         </div>
-
       </div>
     </div>
   </div>
 
-
-
 </section>

app/frontend/templates/trainings/index.html

@@ -18,8 +18,9 @@
 <section class="m-lg">
   <div class="trainings">
     <training-editorial-block on-error="onError"></training-editorial-block>
-    <div class="row" ng-repeat="training in (trainings.length/3 | array)">
-      <div class="col-xs-12 col-sm-6 col-md-4" ng-repeat="training in trainings.slice(3*$index, 3*$index + 3)">
+
+    <div class="trainings-grid">
+      <div ng-repeat="training in trainings">
         <div class="widget panel panel-default">
           <div class="panel-heading picture" ng-if="!training.training_image_attributes" ng-click="showTraining(training)">
             <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:'Font Awesome 5 Free'/icon" bs-holder class="img-responsive">