mirror of
https://github.com/LaCasemate/fab-manager.git
synced 2025-03-15 12:29:16 +01:00
(ui) Update machines and spaces lists layout
This commit is contained in:
Vincent
Sylvain
parent
e5b199f8ed
commit
c194ac9b31
@ -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";
|
||||
|
||||
16
app/frontend/src/stylesheets/modules/spaces/spaces.scss
Normal file
16
app/frontend/src/stylesheets/modules/spaces/spaces.scss
Normal file
@ -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; }
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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:/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:/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>
|
||||
|
||||
@ -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:/font:'Font Awesome 5 Free'/icon" bs-holder class="img-responsive">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user