From fceb8e9e66ecfa78ed18956a06e39d140201bf64 Mon Sep 17 00:00:00 2001 From: Jessica Lawshe Date: Thu, 8 Nov 2018 09:54:55 -0600 Subject: [PATCH] Merge pull request #1096 from sharelatex/jel-plans-mobile-layout Plans page mobile layout GitOrigin-RevId: d650447bd7df4eda17471c2fa7fb2b376fcc0172 --- .../subscriptions/_plans_page_mixins.pug | 6 +- .../web/app/views/subscriptions/plans.pug | 18 +++--- .../web/public/stylesheets/app/plans.less | 59 ++++++++++++++++--- .../stylesheets/components/buttons.less | 3 + .../stylesheets/components/dropdowns.less | 2 +- .../stylesheets/core/_common-variables.less | 1 + .../web/public/stylesheets/core/mixins.less | 45 ++++++++++++++ 7 files changed, 116 insertions(+), 18 deletions(-) diff --git a/services/web/app/views/subscriptions/_plans_page_mixins.pug b/services/web/app/views/subscriptions/_plans_page_mixins.pug index 7c4d2eb158..5a86a22806 100644 --- a/services/web/app/views/subscriptions/_plans_page_mixins.pug +++ b/services/web/app/views/subscriptions/_plans_page_mixins.pug @@ -141,17 +141,17 @@ mixin currency_dropdown mixin plan_switch(location) ul.nav.nav-pills li(ng-class="{'active': ui.view == 'monthly'}") - a( + a.btn.btn-default-outline( href="#" ng-click="switchToMonthly($event,'" + location + "')" ) #{translate("monthly")} li(ng-class="{'active': ui.view == 'annual'}") - a( + a.btn.btn-default-outline( href="#" ng-click="switchToAnnual($event,'" + location + "')" ) #{translate("annual")} li(ng-class="{'active': ui.view == 'student'}") - a( + a.btn.btn-default-outline( href="#" ng-click="switchToStudent($event,'" + location + "')" ) #{translate("half_price_student")} diff --git a/services/web/app/views/subscriptions/plans.pug b/services/web/app/views/subscriptions/plans.pug index 9752c25919..6cf6b51a9d 100644 --- a/services/web/app/views/subscriptions/plans.pug +++ b/services/web/app/views/subscriptions/plans.pug @@ -3,13 +3,16 @@ extends ../layout include _plans_page_mixins include _plans_page_tables +block vars + - metadata = { viewport: true } + block scripts script(type='text/javascript'). window.recomendedCurrency = '#{recomendedCurrency}' window.abCurrencyFlag = '#{abCurrencyFlag}' block content - .content.content-alt + .content.content-alt.content-page .plans(ng-controller="PlansController") .container(ng-cloak) .row @@ -75,11 +78,12 @@ block content +card_student_monthly .row.row-spaced-large.text-centered - i.fa.fa-cc-mastercard.fa-2x   - i.fa.fa-cc-visa.fa-2x   - i.fa.fa-cc-amex.fa-2x   - i.fa.fa-cc-paypal.fa-2x   - div.text-centered #{translate('change_plans_any_time')}
#{translate('billed_after_x_days', {len:'{{trial_len}}'})} + .col-xs-12 + i.fa.fa-cc-mastercard.fa-2x   + i.fa.fa-cc-visa.fa-2x   + i.fa.fa-cc-amex.fa-2x   + i.fa.fa-cc-paypal.fa-2x   + div.text-centered #{translate('change_plans_any_time')}
#{translate('billed_after_x_days', {len:'{{trial_len}}'})} .row.row-spaced-large .col-md-8.col-md-offset-2 @@ -117,7 +121,7 @@ block content .row.row-spaced-large .col-md-12 .plans-header.plans-subheader.text-centered - h2 #{translate('still_have_questions')} + h2.header-with-btn #{translate('still_have_questions')} button.btn.btn-default.btn-header.text-capitalize( ng-controller="ContactGeneralModal" ng-click="openModal()" diff --git a/services/web/public/stylesheets/app/plans.less b/services/web/public/stylesheets/app/plans.less index 7a56afcef1..4fae853662 100644 --- a/services/web/public/stylesheets/app/plans.less +++ b/services/web/public/stylesheets/app/plans.less @@ -84,6 +84,9 @@ margin: 0 } } + .header-with-btn { + line-height: 1.6; + } .plans-header{ h1, h2, p { text-shadow: 0 -1px 1px white; @@ -101,11 +104,6 @@ .tagline { margin-bottom: 20px; } - .top-switch { - .currency-dropdown { - margin-right: -15px; - } - } ul.nav-pills { text-align: center; margin-bottom: @line-height-computed; @@ -161,14 +159,26 @@ /* Media Queries */ @media (max-width: @screen-sm-max) { .plans { - .card-highlighted { + .card-group { /*override style in cards.less */ - margin-top: @line-height-computed!important; + .card { + margin-left: 0; + margin-right: 0; + } + .card-highlighted { + margin-top: @line-height-computed!important; + } } .circle-img { float: left; margin: 0 15px; } + ul.nav-pills { + margin-bottom: @margin-xs; + li { + margin-bottom: @margin-sm; + } + } } } @media (min-width: @screen-md-min) { @@ -183,6 +193,11 @@ } } } + .top-switch { + .currency-dropdown { + margin-right: -15px; + } + } } } @@ -221,6 +236,7 @@ font-family: @headings-font-family; font-size: @font-size-h2; font-weight: @headings-font-weight; + hyphens: auto; line-height: @headings-line-height; padding: 18px; } @@ -344,4 +360,33 @@ .tooltip.in { min-width: 200px } + + /* Media Queries */ + @media (max-width: @screen-sm-max) { + font-size: @font-size-small; + hyphens: auto; + margin-top: @best-val-height*2; + th { + font-size: @font-size-base; + padding-left: @padding-xs; + padding-right: @padding-xs; + } + td:first-child { + padding-left: @padding-xs; + } + tr:last-child { + td { + padding: @padding-xs; + .btn { + word-break: normal; + } + } + } + .best-value { + line-height: 1; + } + .btn { + font-size: @font-size-small; + } + } } \ No newline at end of file diff --git a/services/web/public/stylesheets/components/buttons.less b/services/web/public/stylesheets/components/buttons.less index 07ddf58f5a..998c10e6e3 100755 --- a/services/web/public/stylesheets/components/buttons.less +++ b/services/web/public/stylesheets/components/buttons.less @@ -58,6 +58,9 @@ .btn-default { .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border); } +.btn-default-outline { + .button-outline-variant(@btn-default-bg); +} .btn-primary { .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border); } diff --git a/services/web/public/stylesheets/components/dropdowns.less b/services/web/public/stylesheets/components/dropdowns.less index 8744c1f35c..b8b4db6118 100755 --- a/services/web/public/stylesheets/components/dropdowns.less +++ b/services/web/public/stylesheets/components/dropdowns.less @@ -82,7 +82,7 @@ &:hover, &:focus { text-decoration: none; - color: @dropdown-link-hover-color; + color: @dropdown-link-hover-color!important; background-color: @dropdown-link-hover-bg; .subdued { color: @dropdown-link-hover-color; diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index e446c10df4..1acf8daceb 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -81,6 +81,7 @@ @padding-xs-vertical: 1px; @padding-xs-horizontal: 5px; +@padding-xs: 5px; @padding-sm: 10px; @padding-md: 20px; @padding-lg: 30px; diff --git a/services/web/public/stylesheets/core/mixins.less b/services/web/public/stylesheets/core/mixins.less index fa2bf76e40..bc704119d2 100755 --- a/services/web/public/stylesheets/core/mixins.less +++ b/services/web/public/stylesheets/core/mixins.less @@ -552,6 +552,51 @@ background-color: @color; } } +.button-outline-variant(@color) { + color: @color; + background-color: transparent; + border-color: @color; + + .alert & when (@is-overleaf = true) { + background-color: transparent; + } + + &:hover, + &:focus, + &:active, + &.active, + &.checked, + .open .dropdown-toggle& { + color: @color; + background-color: transparent; + border-color: darken(@color, 12%); + .alert & when (@is-overleaf = true) { + background-color: transparent; + } + } + &:active, + &.active, + .open .dropdown-toggle& { + background-image: none; + } + &.disabled, + &[disabled], + fieldset[disabled] & { + &, + &:hover, + &:focus, + &:active, + &.active { + background-color: transparent; + border-color: @color; + } + } + + .badge { + color: transparent; + background-color: @color; + } +} // Button sizes // -------------------------