agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-11-15 06:33:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #17303 from overleaf/mf-fix-plans-page-mobile

Browse Source 
[web] Fix plans page table styling on both desktop and mobile

GitOrigin-RevId: 252bbaf7245751b1cfe07286a0fe19069219bb5b
This commit is contained in:
M Fahru
2024-03-04 09:04:08 +00:00
committed by Copybot
parent 95105d9f96
commit 920e86e4d0
6 changed files with 69 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/stylesheets/app/plans-ol.less → services/web/frontend/stylesheets/app/plans/plans-ol.less
View File
services/web/frontend/stylesheets/app/plans-v2.less → services/web/frontend/stylesheets/app/plans/plans-v2.less
+51 -105
View File
@@ -7,9 +7,7 @@
@plans-v2-highlighted-text-height-mobile: 41px;
@plans-v2-learn-more-link-color: hsl(206, 100%, 52%);
@plans-v2-top-switch-group-width-mobile: 46%;
@plans-v2-discount-highlighted-text-z-index: 2;
@plans-v2-table-border-radius: 20px;
@plans-v2-dark-blue: #2857a1;
@plans-v2-table-td-mobile-min-height: 34px;
.plans {
@@ -18,11 +16,6 @@
display: none;
}
}
.btn-dark-blue {
background-color: @plans-v2-dark-blue;
color: @white;
}
}
.plans-v2-top-switch ul.plans-v2-nav {
@@ -404,7 +397,6 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
}
}
.plans-v2-table-group,
.plans-v2-table-student {
tr {
// "hide" the last column on desktop by making the background-color as the default background color
@@ -459,7 +451,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
}
@media (max-width: @screen-md-max) {
tr {
tr:first-of-type {
th:last-of-type {
// Last column is only a UI placeholder for desktop view.
// We need to hide it for mobile to have the full table fully visible on mobile
@@ -468,21 +460,6 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
}
}
}
@media (max-width: @screen-xs-max) {
tr {
&:not(.plans-v2-table-divider) {
td:not(:first-of-type),
th:not(:first-of-type) {
// 33.33% is because table-group & table-student have 3 real column on mobile.
// It actually has 5 table column, but on mobile version,
// the first column become row and the last column is hidden since it is just a UI placeholder.
// We need to force 33.33% width to make each of 3 columns have an equal width of 1/3 screen width.
width: 33.33%;
}
}
}
}
}
.plans-v2-table-individual {
@@ -535,29 +512,6 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
}
}
}
// for remove-personal-plan split test default variant
@media (max-width: @screen-xs-max) {
tr.cols-4:not(.plans-v2-table-divider) {
td,
th:not(:first-of-type) {
// 25% is because table-individual have 4 real columns on mobile
// it actually has 5 table columns, but on mobile version, the first column become row
// we need to force 25% width to make each of 4 columns have an equal width of 1/4 screen width
width: 25%;
}
}
// for remove-personal-plan split test personal-off variant
tr.cols-3:not(.plans-v2-table-divider) {
td:not(:first-of-type),
th:not(:first-of-type) {
// 33% is because table-individual have 3 real columns on mobile
// it actually has 4 table columns, but on mobile version, the first column become row
// we need to force 33% width to make each of 3 columns have an equal width of 1/3 screen width
width: calc(100% / 3);
}
}
}
}
.plans-v2-table-group {
@@ -580,6 +534,30 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
font-size: @font-size-small;
}
}
tr {
// top right border radius on desktop only
&:first-of-type {
th:last-child > .plans-v2-table-th {
border-top-right-radius: @plans-v2-table-border-radius;
@media (max-width: @screen-xs-max) {
border-top-right-radius: 0;
}
}
}
// bottom right border radius on desktop only
&:last-of-type {
td:last-child > .plans-v2-table-cell {
border-bottom-right-radius: @plans-v2-table-border-radius;
@media (max-width: @screen-xs-max) {
border-bottom-right-radius: 0;
}
}
}
}
}
.plans-v2-table {
@@ -612,7 +590,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
background-clip: padding-box; /* needed for firefox when there is bg color */
text-align: center;
&:not(.plans-v2-table-cell-before-green-highlighted-column):not(.plans-v2-table-green-highlighted):not(.plans-v2-table-divider-highlighted):not(.plans-v2-table-discount-highlighted) {
&:not(.plans-v2-table-cell-before-green-highlighted-column):not(.plans-v2-table-green-highlighted):not(.plans-v2-table-divider-highlighted) {
border-right: 1px solid @ol-blue-gray-0;
@media (max-width: @screen-xs-max) {
@@ -693,14 +671,6 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
}
}
}
&:last-child td.plans-v2-table-discount-highlighted {
border-bottom: 2px solid @plans-v2-dark-blue;
@media (max-width: @screen-xs-max) {
border-bottom: unset;
}
}
}
.fa-check {
@@ -734,6 +704,30 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
justify-content: space-around;
}
// The forced width below (plans-v2-table-cols-n) is to ensure the table columns have an equal width
// because on mobile, the first column (empty cell on first `tr` and feature name on the rest of `tr`) will be shown as its own row
// and the rest of the `tr` will incorporate a full width of the viewport
tr.plans-v2-table-cols-4:not(.plans-v2-table-divider) {
td,
th:not(:first-of-type) {
width: 25%;
}
}
tr.plans-v2-table-cols-3:not(.plans-v2-table-divider) {
td,
th:not(:first-of-type) {
width: calc(100% / 3);
}
}
tr.plans-v2-table-cols-2:not(.plans-v2-table-divider) {
td,
th:not(:first-of-type) {
width: 50%;
}
}
.plans-v2-table-column-header {
font-size: 12px;
}
@@ -1062,7 +1056,7 @@ tr.plans-v2-table-divider {
}
}
.plans-v2-table-divider-highlighted {
.plans-v2-table-divider-highlighted > div {
border-right: none;
}
}
@@ -1114,50 +1108,6 @@ p.plans-v2-table-green-highlighted-text {
}
}
.plans-v2-table-discount-highlighted {
border-left: 2px solid @plans-v2-dark-blue;
border-right: 2px solid @plans-v2-dark-blue;
@media (max-width: @screen-xs-max) {
border-left: unset;
border-right: unset;
}
}
p.plans-v2-table-discount-highlighted-text {
border: 2px solid @plans-v2-dark-blue;
position: absolute;
top: -1 * @plans-v2-highlighted-text-height-desktop;
left: -2px;
display: flex;
justify-content: center;
align-items: center;
// 4px because border width is 2px each side (left and right)
width: calc(100% + 4px);
font-family: @font-family-sans-serif;
font-size: @font-size-small;
line-height: 19px;
font-weight: 700;
background-color: @plans-v2-dark-blue;
border-radius: @plans-v2-table-border-radius @plans-v2-table-border-radius 0 0;
color: @white;
height: @plans-v2-highlighted-text-height-desktop;
margin: 0;
z-index: @plans-v2-discount-highlighted-text-z-index;
@media (max-width: @screen-sm-max) {
top: -1 * @plans-v2-highlighted-text-height-mobile;
height: @plans-v2-highlighted-text-height-mobile;
}
@media (max-width: @screen-xs-max) {
padding-left: 5px;
padding-right: 5px;
font-size: @font-size-extra-small;
line-height: 15px;
}
}
.plans-v2-table-sticky-header-container {
@media (max-width: @screen-xs-max) {
// `height: 60%` is just an arbitrary percentage
@@ -1224,10 +1174,6 @@ p.plans-v2-table-discount-highlighted-text {
color: @ol-green;
}
.plans-v2-table-sticky-header-item-discount-highlighted span {
color: @plans-v2-dark-blue;
}
.plans-v2-faq {
// need for specificity to override default a color
p > a {
services/web/frontend/stylesheets/app/plans.less → services/web/frontend/stylesheets/app/plans/plans.less
View File
services/web/frontend/stylesheets/main-style.less
+3 -3
View File
@@ -103,8 +103,9 @@
@import 'app/project-list-react.less';
@import 'app/editor.less';
@import 'app/homepage.less';
@import 'app/plans.less';
@import 'app/plans-v2.less';
@import 'app/plans/plans.less';
@import 'app/plans/plans-ol.less';
@import 'app/plans/plans-v2.less';
@import 'app/recurly.less';
@import 'app/bonus.less';
@import 'app/register.less';
@@ -139,7 +140,6 @@
@import 'app/blog-posts.less';
@import 'app/cms-page.less';
@import 'app/content_page.less';
@import 'app/plans-ol.less';
@import 'app/portals.less';
// module styles