mirror of
https://github.com/LaCasemate/fab-manager.git
synced 2025-01-18 07:52:23 +01:00
Merge remote-tracking branch 'origin/wip-demo-update' into dev
This commit is contained in:
Sylvain
commit
849b41d4ed
@ -34,8 +34,8 @@ Application.Directives.directive('fileread', [() =>
|
||||
Application.Directives.directive('bsHolder', [() =>
|
||||
({
|
||||
link (scope, element, attrs) {
|
||||
Holder.addTheme('icon', { background: 'white', foreground: '#e9e9e9', size: 80, font: 'FontAwesome' })
|
||||
.addTheme('icon-xs', { background: 'white', foreground: '#e0e0e0', size: 20, font: 'FontAwesome' })
|
||||
Holder.addTheme('icon', { background: 'white', foreground: '#ebebeb', size: 60, font: 'FontAwesome' })
|
||||
.addTheme('icon-xs', { background: 'white', foreground: '#ebebeb', size: 20, font: 'FontAwesome' })
|
||||
.addTheme('icon-black-xs', { background: 'black', foreground: 'white', size: 20, font: 'FontAwesome' })
|
||||
.addTheme('avatar', { background: '#eeeeee', foreground: '#555555', size: 16, font: 'FontAwesome' })
|
||||
.run(element[0]);
|
||||
|
||||
@ -191,7 +191,9 @@
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
max-height: 400px;
|
||||
aspect-ratio: 16/9;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -245,6 +247,8 @@
|
||||
height: 250px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
|
||||
@include transition(opacity 0.5s ease);
|
||||
|
||||
@ -302,6 +306,7 @@
|
||||
|
||||
&.avatar-block {
|
||||
white-space: inherit;
|
||||
width: 100%;
|
||||
height: 76px;
|
||||
|
||||
.user-name {
|
||||
|
||||
@ -661,8 +661,121 @@ body.container {
|
||||
}
|
||||
|
||||
.home-events {
|
||||
.event-description {
|
||||
h4 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
column-gap: 1rem;
|
||||
i { margin-right: 1rem;}
|
||||
}
|
||||
}
|
||||
|
||||
.home-events-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
|
||||
gap: 30px;
|
||||
margin-bottom: 5rem;
|
||||
@media (max-width: 480px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.Event {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
& .Event-picture {opacity: 0.7;}
|
||||
}
|
||||
|
||||
&-picture {
|
||||
height: 250px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
transition: opacity 0.4s ease-out;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&-desc {
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
h3 {
|
||||
max-width: 75%;
|
||||
margin-top: 0;
|
||||
font-size: 2rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.3;
|
||||
text-transform: uppercase;
|
||||
color: #000 !important;
|
||||
}
|
||||
span {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, max-content);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 15px;
|
||||
margin-top: auto;
|
||||
padding: 15px 30px 30px;
|
||||
border-top: 1px solid #eee;
|
||||
&-item {
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
i {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: #cb1117;
|
||||
}
|
||||
h6 { margin: 0 0 0 15px;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.month-events-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 15px;
|
||||
margin-bottom: 2rem;
|
||||
@media (min-width: 768px) {
|
||||
grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
|
||||
}
|
||||
|
||||
.Event {
|
||||
display: flex;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
|
||||
&-desc {
|
||||
flex: 1;
|
||||
padding: 10px 15px 15px;
|
||||
}
|
||||
&-picture {
|
||||
width: 33%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -76,3 +76,5 @@
|
||||
@import "modules/subscriptions/renew-modal";
|
||||
|
||||
@import "app.responsive";
|
||||
|
||||
@import "overrides"
|
||||
|
||||
@ -53,26 +53,28 @@
|
||||
height: 250px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
transition: opacity 0.5s ease;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
color: #333333;
|
||||
background-color: #f5f5f5;
|
||||
border-color: #ddd;
|
||||
border-bottom: 1px solid transparent;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
position: relative;
|
||||
|
||||
&.no-picture::before {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
content: '\f03e';
|
||||
font-family: 'Font Awesome 5 Free' !important;
|
||||
font-weight: 900;
|
||||
font-size: 4em;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 84px;
|
||||
font-size: 80px;
|
||||
color: #ebebeb;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
26
app/frontend/src/stylesheets/overrides.scss
Normal file
26
app/frontend/src/stylesheets/overrides.scss
Normal file
@ -0,0 +1,26 @@
|
||||
.carousel {
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
&::before {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
content: '\f03e';
|
||||
font-family: 'Font Awesome 5 Free' !important;
|
||||
font-weight: 900;
|
||||
font-size: 80px;
|
||||
color: #ebebeb;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
|
||||
&-inner > .item {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@ -202,7 +202,7 @@
|
||||
<input name="_method" type="hidden" ng-value="methods.logo">
|
||||
<h3 class="m-l" translate>{{ 'app.admin.settings.logo_white_background' }}</h3>
|
||||
<div class="custom-logo" style="background-image: url({{customLogo}});">
|
||||
<img src="data:image/png;base64," data-src="holder.js/100%x100%/text:/font:'Font Awesome 5 Free'/icon-xs" bs-holder ng-show="!customLogo" class="img-responsive">
|
||||
<img src="data:image/png;base64," data-src="holder.js/100%x100%/text:/font:'Font Awesome 5 Free'/icon" bs-holder ng-show="!customLogo" class="img-responsive">
|
||||
<img base-sixty-four-image="customLogo" ng-show="customLogo && customLogo.base64">
|
||||
<img ng-src="{{customLogo.custom_asset_file_attributes.attachment_url}}" alt="{{customLogo.custom_asset_file_attributes.attachment}}" ng-show="customLogo && customLogo.custom_asset_file_attributes" />
|
||||
<div class="tools-box">
|
||||
@ -254,7 +254,7 @@
|
||||
<input name="_method" type="hidden" ng-value="methods.favicon">
|
||||
<h3 class="m-l" translate>{{ 'app.admin.settings.favicon' }}</h3>
|
||||
<div class="custom-favicon" style="background-image: url({{customFavicon}});">
|
||||
<img src="data:image/png;base64," data-src="holder.js/32x32/text:/font:'Font Awesome 5 Free'/icon-xs" bs-holder ng-show="!customFavicon" class="img-responsive">
|
||||
<img src="data:image/png;base64," data-src="holder.js/32x32/text:/font:'Font Awesome 5 Free'/icon" bs-holder ng-show="!customFavicon" class="img-responsive">
|
||||
<img base-sixty-four-image="customFavicon" ng-show="customFavicon && customFavicon.base64">
|
||||
<img ng-src="{{customFavicon.custom_asset_file_attributes.attachment_url}}" alt="{{customFavicon.custom_asset_file_attributes.attachment}}" ng-show="customFavicon && customFavicon.custom_asset_file_attributes" />
|
||||
<div class="tools-box">
|
||||
@ -316,7 +316,7 @@
|
||||
<input name="_method" type="hidden" ng-value="methods.profileImage">
|
||||
<h3 class="m-l" translate>{{ 'app.admin.settings.background_picture_of_the_profile_banner' }}</h3>
|
||||
<div class="custom-profile-image" style="background-image: url({{profileImage}});">
|
||||
<img src="data:image/png;base64," data-src="holder.js/100%x100%/text:/font:'Font Awesome 5 Free'/icon-xs" bs-holder ng-show="!profileImage" class="img-responsive">
|
||||
<img src="data:image/png;base64," data-src="holder.js/100%x100%/text:/font:'Font Awesome 5 Free'/icon" bs-holder ng-show="!profileImage" class="img-responsive">
|
||||
<img base-sixty-four-image="profileImage" ng-show="profileImage && profileImage.base64">
|
||||
<img ng-src="{{profileImage.custom_asset_file_attributes.attachment_url}}" alt="{{profileImage.custom_asset_file_attributes.attachment}}" ng-show="profileImage && profileImage.custom_asset_file_attributes" />
|
||||
<div class="tools-box">
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
settings="allSettings"
|
||||
label="app.admin.settings.prior_period_hours"
|
||||
classes="col-md-8"
|
||||
fa-icon="fa-clock-o"
|
||||
fa-icon="fas fa-clock"
|
||||
min="0"
|
||||
required="allSettings.booking_move_enable === 'true'">
|
||||
</number-setting>
|
||||
@ -76,7 +76,7 @@
|
||||
settings="allSettings"
|
||||
label="app.admin.settings.prior_period_hours"
|
||||
classes="col-md-8"
|
||||
fa-icon="fa-clock-o"
|
||||
fa-icon="fas fa-clock"
|
||||
min="0"
|
||||
required="allSettings.booking_cancel_enable === 'true'">
|
||||
</number-setting>
|
||||
@ -112,7 +112,7 @@
|
||||
settings="allSettings"
|
||||
label="app.admin.settings.duration_minutes"
|
||||
classes="col-md-4"
|
||||
fa-icon="fa-clock-o"
|
||||
fa-icon="fas fa-clock"
|
||||
min="1"
|
||||
required="true">
|
||||
</number-setting>
|
||||
@ -161,7 +161,7 @@
|
||||
settings="allSettings"
|
||||
label="app.admin.settings.prior_period_hours"
|
||||
classes="col-md-4"
|
||||
fa-icon="fa-clock-o"
|
||||
fa-icon="fas fa-clock"
|
||||
helper-text="app.admin.settings.default_value_is_24_hours"
|
||||
min="0">
|
||||
</number-setting>
|
||||
|
||||
@ -43,14 +43,10 @@
|
||||
<div ng-repeat="month in monthOrder">
|
||||
<h1>{{monthNames[month.split(',')[0] - 1]}}, {{month.split(',')[1]}}</h1>
|
||||
|
||||
<div class="row" ng-repeat="event in (eventsGroupByMonth[month].length/3 | array)">
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-md-4" ng-repeat="event in eventsGroupByMonth[month].slice(3*$index, 3*$index + 3)" ng-click="showEvent(event)">
|
||||
|
||||
|
||||
<a class="block bg-white img-full p-sm p-l-m box-h-m event b b-light-dark m-t-sm" ui-sref="app.public.events_show({id: event.id})">
|
||||
<div class="pull-left half-w m-t-n-sm">
|
||||
<h5 class="text-xs">{{event.category.name}}</h5>
|
||||
<div class="month-events-list" ng-repeat="event in (eventsGroupByMonth[month].length/3 | array)">
|
||||
<a class="Event" ng-repeat="event in eventsGroupByMonth[month].slice(3*$index, 3*$index + 3)" ui-sref="app.public.events_show({id: event.id})">
|
||||
<div class="Event-desc">
|
||||
<h5 class="text-xs m-t-n">{{event.category.name}}</h5>
|
||||
<h4 class="m-n text-sm clear l-n">{{event.title}}</h4>
|
||||
<h3 class="m-n" ng-show="onSingleDay(event)">{{event.start_date | amDateFormat:'L'}}</h3>
|
||||
<h3 class="m-n" ng-hide="onSingleDay(event)">{{event.start_date | amDateFormat:'L'}} <span class="text-sm font-thin" translate> {{ 'app.public.events_list.to_date' }} </span> {{event.end_date | amDateFormat:'L'}}</h3>
|
||||
@ -74,14 +70,10 @@
|
||||
</div>
|
||||
|
||||
<!-- Event Image -->
|
||||
<div class="pull-right crop-155">
|
||||
<img class="pull-right" ng-src="{{event.event_image_small}}" title="{{event.title}}" ng-if="event.event_image">
|
||||
<img class="pull-right img-responsive" src="data:image/png;base64," data-src="holder.js/100%x100%/text:/font:'Font Awesome 5 Free'/icon" bs-holder ng-if="!event.event_image">
|
||||
<div class="Event-picture" ng-if="event.event_image">
|
||||
<img ng-src="{{event.event_image_small}}" title="{{event.title}}">
|
||||
</div>
|
||||
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -83,7 +83,7 @@
|
||||
<dl class="text-sm">
|
||||
<dt><i class="fa fa-calendar" aria-hidden="true"></i> {{ 'app.public.events_show.dates' | translate }}</dt>
|
||||
<dd>{{ 'app.public.events_show.beginning' | translate }} <span class="text-u-l">{{event.start_date | amDateFormat:'L'}}</span><br>{{ 'app.public.events_show.ending' | translate }} <span class="text-u-l">{{event.end_date | amDateFormat:'L'}}</span></dd>
|
||||
<dt><i class="fa fa-clock-o"></i> {{ 'app.public.events_show.opening_hours' | translate }}</dt>
|
||||
<dt><i class="fas fa-clock"></i> {{ 'app.public.events_show.opening_hours' | translate }}</dt>
|
||||
<dd ng-if="event.all_day == 'true'"><span translate>{{ 'app.public.events_show.all_day' }}</span></dd>
|
||||
<dd ng-if="event.all_day == 'false'">{{ 'app.public.events_show.from_time' | translate }} <span class="text-u-l">{{event.start_date | amDateFormat:'LT'}}</span> {{ 'app.public.events_show.to_time' | translate }} <span class="text-u-l">{{event.end_date | amDateFormat:'LT'}}</span></dd>
|
||||
</dl>
|
||||
|
||||
@ -1,65 +1,53 @@
|
||||
<section class="home-events">
|
||||
<h4 class="text-sm m-t-sm">{{ 'app.public.home.fablab_s_next_events' | translate }} <a ui-sref="app.public.events_list" class="pull-right"><i class="fa fa-tags"></i> {{ 'app.public.home.every_events' | translate }}</a></h4>
|
||||
<h4 class="text-sm m-t-sm">
|
||||
{{ 'app.public.home.fablab_s_next_events' | translate }}
|
||||
<a ui-sref="app.public.events_list">
|
||||
<i class="fa fa-tags"></i>{{ 'app.public.home.every_events' | translate }}
|
||||
</a>
|
||||
</h4>
|
||||
|
||||
<div class="row" ng-repeat="event in (upcomingEvents.length/3 | array)">
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4" ng-repeat="event in upcomingEvents.slice(3*$index, 3*$index + 3)">
|
||||
|
||||
|
||||
<div class="widget panel panel-default" ui-sref="app.public.events_show({id: event.id})">
|
||||
<div class="panel-heading picture" style="background-image: url({{event.event_image_medium}});" >
|
||||
<div class="home-events-list" ng-repeat="event in (upcomingEvents.length/3 | array)">
|
||||
<div class="Event" ng-repeat="event in upcomingEvents.slice(3*$index, 3*$index + 3)" ui-sref="app.public.events_show({id: event.id})">
|
||||
<div class="Event-picture">
|
||||
<img src="data:image/png;base64," data-src="holder.js/100%x100%/text:/font:'Font Awesome 5 Free'/icon" bs-holder ng-if="!event.event_image" class="img-responsive">
|
||||
<img ng-if="event.event_image" src="{{event.event_image_medium}}">
|
||||
</div>
|
||||
<div class="panel-body" style="heigth:170px;">
|
||||
<div class="row">
|
||||
<div class="col-xs-9">
|
||||
<h1 class="m-b">{{event.title}}</h1>
|
||||
</div>
|
||||
<div class="col-xs-3">
|
||||
<span class="v-middle badge text-xs" ng-class="'bg-{{event.category.slug}}'">{{event.category.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="event-description" ng-bind-html="event.description | simpleText | humanize : 500 | breakFilter"></p>
|
||||
|
||||
<hr/>
|
||||
<div class="row">
|
||||
<div class="col-sm-6 row m-b-sm">
|
||||
<i class="fa fa-calendar red col-xs-3 padder-icon"></i>
|
||||
<h6 class="m-n col-xs-9 " ng-hide="isOneDayEvent(event)">{{ 'app.public.home.from_date_to_date' | translate:{START:(event.start_date | amDateFormat:'L'), END:(event.end_date | amDateFormat:'L')} }}</h6>
|
||||
<h6 class="m-n col-xs-9 " ng-show="isOneDayEvent(event)">{{ 'app.public.home.on_the_date' | translate:{DATE:(event.start_date | amDateFormat:'L')} }}</h6>
|
||||
<div class="Event-desc">
|
||||
<h3>{{event.title}}</h3>
|
||||
<span class="v-middle badge text-xs" ng-class="'bg-{{event.category.slug}}'">{{event.category.name}}</span>
|
||||
<p ng-bind-html="event.description | simpleText | humanize : 500 | breakFilter"></p>
|
||||
</div>
|
||||
<div class="col-sm-6 row m-b-sm">
|
||||
<i class="fa fa-clock-o red col-xs-3 padder-icon"></i>
|
||||
<h6 class="m-n col-xs-9">
|
||||
|
||||
<div class="Event-info">
|
||||
<div class="Event-info-item">
|
||||
<i class="fa fa-calendar"></i>
|
||||
<h6 class="" ng-hide="isOneDayEvent(event)">{{ 'app.public.home.from_date_to_date' | translate:{START:(event.start_date | amDateFormat:'L'), END:(event.end_date | amDateFormat:'L')} }}</h6>
|
||||
<h6 class="" ng-show="isOneDayEvent(event)">{{ 'app.public.home.on_the_date' | translate:{DATE:(event.start_date | amDateFormat:'L')} }}</h6>
|
||||
</div>
|
||||
<div class="Event-info-item">
|
||||
<i class="fas fa-clock"></i>
|
||||
<h6 class="">
|
||||
<span ng-if="event.all_day == 'true'" translate>{{ 'app.public.home.all_day' }}</span>
|
||||
<span ng-if="event.all_day == 'false'">{{ 'app.public.home.from_time_to_time' | translate:{START:(event.start_date | amDateFormat:'LT'), END:(event.end_date | amDateFormat:'LT')} }}</span>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 row m-b-sm">
|
||||
<i class="fa fa-user red col-xs-3 padder-icon"></i>
|
||||
<h6 class="m-n col-xs-9 ">
|
||||
<div class="Event-info-item">
|
||||
<i class="fa fa-user"></i>
|
||||
<h6 class="">
|
||||
<span ng-if="event.nb_free_places > 0">{{ 'app.public.home.still_available' | translate }} {{event.nb_free_places}}</span>
|
||||
<span ng-if="!event.nb_total_places" translate>{{ 'app.public.home.without_reservation' }}</span>
|
||||
<span ng-if="event.nb_total_places > 0 && event.nb_free_places <= 0" translate>{{ 'app.public.home.event_full' }}</span>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="col-sm-6 row m-b-sm">
|
||||
<i class="fa fa-bookmark red col-xs-3 padder-icon"></i>
|
||||
<h6 class="m-n col-xs-9">
|
||||
<div class="Event-info-item">
|
||||
<i class="fa fa-bookmark"></i>
|
||||
<h6 class="">
|
||||
<span ng-if="event.amount == 0" translate>{{ 'app.public.home.free_admission' }}</span>
|
||||
<span ng-if="event.amount > 0">{{ 'app.public.home.full_price' | translate }} {{event.amount | currency}}</span>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center clearfix ">
|
||||
<div class="btn btn-lg btn-warning bg-white b-2x rounded m-t-sm m-b-sm upper text-sm width-70" ui-sref="app.public.events_show({id: event.id})" ><span translate>{{ 'app.shared.buttons.consult' }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
</div>
|
||||
<div class="col-sm-6 no-padder">
|
||||
<div class="btn btn-default btn-block padder-v no-b red" ng-click="showTraining(training)">
|
||||
<i class="fa fa-eye"></i> {{ 'app.shared.buttons.consult' | translate }}
|
||||
<i class="fas fa-eye"></i> {{ 'app.shared.buttons.consult' | translate }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user