mirror of
https://github.com/LaCasemate/fab-manager.git
synced 2024-12-01 12:24:28 +01:00
Improved style of public plans page
This commit is contained in:
Sylvain
parent
ef32532cf5
commit
39a7e23881
@ -7,12 +7,14 @@
|
||||
- More explanations in the setup script
|
||||
- Send pre-compressed assets to the browsers instead of the regular ones
|
||||
- Links created using "medium editor" opens in new tabs
|
||||
- Improved style of public plans page
|
||||
- Fix a bug: subscriptions tab is selected by default in statistics, even if the module is disabled
|
||||
- Fix a bug: select all plans for slot restriction (through the dedicated button) also selects the disabled plans
|
||||
- Fix a bug: recurring availabilities are not restricted to subscribers
|
||||
- Fix a security issue: updated elliptic to 6.5.4 to fix [CVE-2020-28498](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2020-28498)
|
||||
- [TODO DEPLOY] `\curl -sSL https://raw.githubusercontent.com/sleede/fab-manager/master/scripts/nginx-packs-directive.sh | bash`
|
||||
- [TODO DEPLOY] `rails db:seed`
|
||||
- [TODO DEPLOY] `rails fablab:maintenance:rebuild_stylesheet`
|
||||
|
||||
## v4.7.5 2021 March 08
|
||||
- Fix a bug: unable to compile the assets during the upgrade, if the env file has some whitespaces around the equal sign
|
||||
|
||||
@ -267,125 +267,31 @@
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-panel {
|
||||
border: 1px solid $border-color;
|
||||
height: 391px;
|
||||
|
||||
&:first-child {
|
||||
border-right: none;
|
||||
|
||||
@include border-radius(3px 0 0 3px);
|
||||
.list-of-plans {
|
||||
.group-title {
|
||||
width: 83.33%;
|
||||
border-bottom: 1px solid;
|
||||
padding-bottom: 2em;
|
||||
margin: auto auto 1em;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include border-radius(0 3px 3px 0);
|
||||
}
|
||||
|
||||
.plan-card {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 10px 0;
|
||||
font-size: rem-calc(16);
|
||||
text-transform: uppercase;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 15px 0;
|
||||
background-color: $bg-gray;
|
||||
|
||||
.wrap, .wrap-monthly {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
display: inline-block;
|
||||
background: white;
|
||||
|
||||
@include border-radius(50%, 50%, 50%, 50%);
|
||||
|
||||
border: 3px solid;
|
||||
|
||||
.price {
|
||||
width: 114px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
@include border-radius(50%, 50%, 50%, 50%);
|
||||
}
|
||||
.plans-per-group {
|
||||
& {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.wrap-monthly {
|
||||
& > .price {
|
||||
& > .amount {
|
||||
padding-top: 4px;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
& > .period {
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.price {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
height: 114px;
|
||||
background-color: black;
|
||||
|
||||
.amount {
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
font-weight: bold;
|
||||
font-size: rem-calc(17);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.period {
|
||||
position: relative;
|
||||
top: -6px;
|
||||
font-size: rem-calc(14);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
|
||||
.plan-description {
|
||||
max-height: 5.2em;
|
||||
overflow: hidden;
|
||||
& > * {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
margin: 20px 0;
|
||||
|
||||
.subscribe-button {
|
||||
@extend .btn;
|
||||
@extend .rounded;
|
||||
|
||||
outline: 0;
|
||||
font-weight: 600;
|
||||
font-size: rem-calc(16);
|
||||
background-color: white;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
@media screen and (max-width: 992px) {
|
||||
& > * {
|
||||
width: 100%;
|
||||
}
|
||||
button.subscribe-button:focus, button.subscribe-button:hover {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
.info-link {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,5 +32,6 @@
|
||||
@import "modules/payment-schedules-list";
|
||||
@import "modules/stripe-confirm";
|
||||
@import "modules/payment-schedule-dashboard";
|
||||
@import "modules/plan-card";
|
||||
|
||||
@import "app.responsive";
|
||||
|
||||
102
app/frontend/src/stylesheets/modules/plan-card.scss
Normal file
102
app/frontend/src/stylesheets/modules/plan-card.scss
Normal file
@ -0,0 +1,102 @@
|
||||
.plan-card {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.title {
|
||||
margin: 10px 0;
|
||||
font-size: 1.6rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.content {
|
||||
& {
|
||||
padding: 15px 0;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.wrap, .wrap-monthly {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
display: inline-block;
|
||||
background: white;
|
||||
|
||||
@include border-radius(50%, 50%, 50%, 50%);
|
||||
|
||||
border: 3px solid;
|
||||
|
||||
.price {
|
||||
width: 114px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
@include border-radius(50%, 50%, 50%, 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.wrap-monthly {
|
||||
& > .price {
|
||||
& > .amount {
|
||||
padding-top: 4px;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
& > .period {
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.price {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
height: 114px;
|
||||
background-color: black;
|
||||
|
||||
.amount {
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
font-weight: bold;
|
||||
font-size: rem-calc(17);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.period {
|
||||
position: relative;
|
||||
top: -6px;
|
||||
font-size: rem-calc(14);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
.plan-description {
|
||||
|
||||
& p:nth-child(2n+3), p:nth-child(2n+4) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.cta-button {
|
||||
margin: 20px 0;
|
||||
|
||||
.subscribe-button {
|
||||
@extend .btn;
|
||||
@extend .rounded;
|
||||
outline: 0;
|
||||
font-weight: 600;
|
||||
font-size: rem-calc(16);
|
||||
background-color: white;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
button.subscribe-button:focus, button.subscribe-button:hover {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
.info-link {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,33 +1,25 @@
|
||||
<div class="row m-t m-b padder" ng-repeat="plansGroup in plansClassifiedByGroup" ng-if="ctrl.member.group_id == plansGroup.id || !ctrl.member" ng-show="plansAreShown">
|
||||
<div class="row m-t m-b padder list-of-plans" ng-repeat="plansGroup in plansClassifiedByGroup" ng-if="ctrl.member.group_id == plansGroup.id || !ctrl.member" ng-show="plansAreShown">
|
||||
<div class="col-md-12 text-center">
|
||||
<h2 class="text-u-c">{{ plansGroup.name }}</h2>
|
||||
<h2 class="text-u-c group-title">{{ plansGroup.name }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="row row-centered padder">
|
||||
<div class="col-xs-12 col-md-12 col-lg-10 col-centered no-gutter">
|
||||
|
||||
<div class="plans-per-group">
|
||||
|
||||
<div ng-repeat="(key, plan) in plansGroup.plans.filter(filterDisabledPlans) | orderBy:'interval'"
|
||||
ng-class-even="'row'">
|
||||
<div class="pricing-panel col-xs-12 col-md-6 col-lg-6 text-center"
|
||||
ng-class="{'col-md-12 col-lg-12':(plansGroup.plans.filter(filterDisabledPlans).length % 2 == 1 && key == plansGroup.plans.filter(filterDisabledPlans).length-1)}">
|
||||
<!-- ng-class directive center the last item if the list length is odd -->
|
||||
|
||||
<plan-card plan="plan"
|
||||
user-id="ctrl.member.id"
|
||||
subscribed-plan-id="ctrl.member.subscribed_plan.id"
|
||||
operator="currentUser"
|
||||
on-select-plan="selectPlan"
|
||||
is-selected="isSelected(plan)">
|
||||
</plan-card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="m-t-lg btn btn-small btn-default pull-right" href="#" ng-click="doNotSubscribePlan($event)">{{ 'app.shared.plan_subscribe.do_not_subscribe' | translate }} <i class="fa fa-long-arrow-right"></i></a>
|
||||
<plan-card ng-repeat="(key, plan) in plansGroup.plans.filter(filterDisabledPlans) | orderBy:'-ui_weight'"
|
||||
plan="plan"
|
||||
user-id="ctrl.member.id"
|
||||
subscribed-plan-id="ctrl.member.subscribed_plan.id"
|
||||
operator="currentUser"
|
||||
on-select-plan="selectPlan"
|
||||
is-selected="isSelected(plan)">
|
||||
</plan-card>
|
||||
|
||||
</div>
|
||||
|
||||
<a class="m-t-lg btn btn-small btn-default pull-right" href="#" ng-click="doNotSubscribePlan($event)">{{ 'app.shared.plan_subscribe.do_not_subscribe' | translate }} <i class="fa fa-long-arrow-right"></i></a>
|
||||
|
||||
<div class="row row-centered m-t-lg">
|
||||
<div class="col-xs-12 col-md-12 col-lg-10 col-centered no-gutter">
|
||||
<uib-alert type="warning m">
|
||||
|
||||
@ -14,31 +14,26 @@
|
||||
</section>
|
||||
|
||||
|
||||
<div class="row no-gutter">
|
||||
<div class="row no-gutter list-of-plans">
|
||||
<div class="col-sm-12 col-md-9 b-r">
|
||||
|
||||
<div class="row m-t m-b padder" ng-repeat="plansGroup in plansClassifiedByGroup | groupFilter:ctrl.member">
|
||||
|
||||
<div ng-show="plansGroup.actives > 0">
|
||||
<div class="col-md-12 text-center">
|
||||
<h2 class="text-u-c">{{plansGroup.name}}</h2>
|
||||
<h2 class="text-u-c group-title">{{plansGroup.name}}</h2>
|
||||
</div>
|
||||
<div class="row row-centered padder">
|
||||
<div class="col-xs-12 col-md-12 col-lg-10 col-centered no-gutter">
|
||||
<div class="plans-per-group">
|
||||
|
||||
<!-- ng-class directive center the last item if the list length is odd -->
|
||||
<div class="pricing-panel col-xs-12 col-md-6 col-lg-6 text-center"
|
||||
ng-class="{'col-md-12 col-lg-12 b-r':(plansGroup.plans.filter(filterDisabledPlans).length % 2 == 1 && key == plansGroup.plans.filter(filterDisabledPlans).length-1)}"
|
||||
ng-repeat="(key, plan) in plansGroup.plans.filter(filterDisabledPlans) | orderBy: '-ui_weight'">
|
||||
|
||||
<plan-card plan="plan"
|
||||
<plan-card ng-repeat="(key, plan) in plansGroup.plans.filter(filterDisabledPlans) | orderBy: '-ui_weight'"
|
||||
plan="plan"
|
||||
user-id="ctrl.member.id"
|
||||
subscribed-plan-id="ctrl.member.subscribed_plan.id"
|
||||
operator="currentUser"
|
||||
on-select-plan="selectPlan"
|
||||
is-selected="isSelected(plan)">
|
||||
is-selected="isSelected(plan)"
|
||||
</plan-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -88,7 +88,7 @@ a {
|
||||
.app-generator a,
|
||||
.home-events h4 a,
|
||||
a.reinit-filters,
|
||||
.pricing-panel a,
|
||||
.plan-card a,
|
||||
.calendar-url a,
|
||||
.article a,
|
||||
a.project-author,
|
||||
@ -103,7 +103,7 @@ a.collected-infos {
|
||||
.app-generator a:hover,
|
||||
.home-events h4 a:hover,
|
||||
a.reinit-filters:hover,
|
||||
.pricing-panel a:hover,
|
||||
.plan-card a:hover,
|
||||
.calendar-url a:hover,
|
||||
.article a:hover,
|
||||
a.project-author:hover,
|
||||
@ -254,19 +254,19 @@ h5:after {
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
.pricing-panel .plan-card .content .wrap,
|
||||
.pricing-panel .plan-card .content .wrap-monthly {
|
||||
border-color: $secondary;
|
||||
.plan-card .content .wrap,
|
||||
.plan-card .content .wrap-monthly {
|
||||
border-color: $secondary !important;
|
||||
}
|
||||
|
||||
.pricing-panel .plan-card .content .price {
|
||||
background-color: $primary;
|
||||
color: $primary-text-color;
|
||||
.plan-card .content .price {
|
||||
background-color: $primary !important;
|
||||
color: $primary-text-color !important;
|
||||
}
|
||||
|
||||
.pricing-panel .card-footer .cta-button .btn:hover,
|
||||
.pricing-panel .card-footer .cta-button .custom-invoice .modal-body .elements li:hover,
|
||||
.custom-invoice .modal-body .elements .pricing-panel .card-footer .cta-button li:hover {
|
||||
.plan-card .card-footer .cta-button .btn:hover,
|
||||
.plan-card .card-footer .cta-button .custom-invoice .modal-body .elements li:hover,
|
||||
.custom-invoice .modal-body .elements .plan-card .card-footer .cta-button li:hover {
|
||||
background-color: $secondary !important;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
@ -306,7 +306,7 @@ section#cookies-modal div.cookies-consent .cookies-actions button.accept {
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
.pricing-panel {
|
||||
.plan-card {
|
||||
.card-footer {
|
||||
.cta-button {
|
||||
button.subscribe-button {
|
||||
|
||||
6
test/fixtures/stylesheets.yml
vendored
6
test/fixtures/stylesheets.yml
vendored
@ -31,8 +31,8 @@ stylesheet_1:
|
||||
.btn-warning:hover, .editable-buttons button[type=submit].btn-primary:hover, .btn-warning:focus, .editable-buttons button[type=submit].btn-primary:focus, .btn-warning.focus, .editable-buttons button.focus[type=submit].btn-primary, .btn-warning:active, .editable-buttons button[type=submit].btn-primary:active, .btn-warning.active, .editable-buttons button.active[type=submit].btn-primary, .open > .btn-warning.dropdown-toggle, .editable-buttons .open > button.dropdown-toggle[type=submit].btn-primary { background-color: #998500 !important; border-color: #998500 !important; }
|
||||
.btn-warning-full { border-color: #ffdd00; background-color: #ffdd00; }
|
||||
.heading .heading-btn a:hover { background-color: #ffdd00; }
|
||||
.pricing-panel .content .wrap { border-color: #ffdd00; }
|
||||
.pricing-panel .cta-button .btn:hover, .pricing-panel .cta-button .custom-invoice .modal-body .elements li:hover, .custom-invoice .modal-body .elements .pricing-panel .cta-button li:hover { background-color: #ffdd00 !important; }
|
||||
.plan-card .content .wrap { border-color: #ffdd00; }
|
||||
.plan-card .cta-button .btn:hover, .plan-card .cta-button .custom-invoice .modal-body .elements li:hover, .custom-invoice .modal-body .elements .plan-card .cta-button li:hover { background-color: #ffdd00 !important; }
|
||||
a.label:hover, .form-control.form-control-ui-select .select2-choices a.select2-search-choice:hover, a.label:focus, .form-control.form-control-ui-select .select2-choices a.select2-search-choice:focus { color: #cb1117; }
|
||||
.about-picture { background: linear-gradient( rgba(255,255,255,0.12), rgba(255,255,255,0.13) ), linear-gradient( rgba(203, 17, 23, 0.78), rgba(203, 17, 23, 0.82) ), url('/about-fablab.jpg') no-repeat; }
|
||||
.social-icons > div:hover { background-color: #ffdd00; }
|
||||
@ -46,4 +46,4 @@ stylesheet_1:
|
||||
stylesheet_2:
|
||||
id: 2
|
||||
contents: ".home-page { }"
|
||||
name: home_page
|
||||
name: home_page
|
||||
|
||||
Loading…
Reference in New Issue
Block a user