Merge pull request #1096 from sharelatex/jel-plans-mobile-layout

Plans page mobile layout

GitOrigin-RevId: d650447bd7df4eda17471c2fa7fb2b376fcc0172

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")}

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')}<br/> #{translate('billed_after_x_days', {len:'{{trial_len}}'})}
+					.col-xs-12
+						i.fa.fa-cc-mastercard.fa-2x &nbsp;
+						i.fa.fa-cc-visa.fa-2x &nbsp;
+						i.fa.fa-cc-amex.fa-2x &nbsp;
+						i.fa.fa-cc-paypal.fa-2x &nbsp;
+						div.text-centered #{translate('change_plans_any_time')}<br/> #{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()"

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;
+		}
+	}
 }

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);
 }

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;

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;

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
 // -------------------------