github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-03-15 14:14:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #19568 from overleaf/jel-light-touch-table-mobile

Browse source 
[web] Adjustments for mobile view on light touch plans redesign

GitOrigin-RevId: cadbcad321da8a20733b13c65e3f3aa9302e7ea8
This commit is contained in:
Jessica Lawshe 2024-07-25 08:45:32 -05:00 committed by Copybot
parent 1f432ca5a9
commit d3ee849415
1 changed files with 65 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less
View file

@ -11,6 +11,7 @@
@highlighted-border: var(--border-width-base) solid var(--green-50); @highlighted-border: var(--border-width-base) solid var(--green-50);
@table-border-size: 2px; @table-border-size: 2px;
@table-border: @table-border-size solid var(--neutral-10); @table-border: @table-border-size solid var(--neutral-10);
@plans-table-sticky-header-size: 60px;
.plans-page { .plans-page {
p { p {
@ -506,6 +507,12 @@
&.plans-table-cell-divider { &.plans-table-cell-divider {
border-bottom: 0; border-bottom: 0;
} }
@media (max-width: @screen-xs-max) {
border: 0;
&.plans-table-th {
border-top: @table-border;
}
}
// padding // padding
> div { > div {
@ -522,6 +529,9 @@
&.plans-table-cell-price > div { &.plans-table-cell-price > div {
padding-top: 0; padding-top: 0;
padding-bottom: var(--spacing-06); padding-bottom: var(--spacing-06);
@media (max-width: @screen-xs-max) {
padding-top: var(--spacing-05);
}
} }
&.plans-table-cell-short-feature-list > div { &.plans-table-cell-short-feature-list > div {
padding-top: 0; padding-top: 0;
@ -544,11 +554,6 @@
&.plans-table-cell-divider > div { &.plans-table-cell-divider > div {
padding: var(--spacing-05) var(--spacing-08); padding: var(--spacing-05) var(--spacing-08);
} }
@media (max-width: @screen-xs-max) {
border-left: unset;
border-right: unset;
}
} }
// border adjustments for highlighted column // border adjustments for highlighted column
@ -581,10 +586,10 @@
} }
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
border-left: unset; // column is not highlighted on mobile
border-right: unset; border: 0;
.plans-table-cell-content { .plans-table-cell-content {
border-color: transparent; border: 0;
} }
} }
} }
@ -606,7 +611,6 @@
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
// column is not highlighted on mobile, so // column is not highlighted on mobile, so
// match non-highlighted column border on mobile // match non-highlighted column border on mobile
border-top: @table-border;
border-bottom: @table-border; border-bottom: @table-border;
} }
} }
@ -720,8 +724,10 @@
td { td {
vertical-align: middle; vertical-align: middle;
@media (min-width: @screen-sm-min) {
height: 100%; height: 100%;
} }
}
tr { tr {
&:first-child th { &:first-child th {
@ -816,6 +822,11 @@
justify-content: space-around; justify-content: space-around;
} }
td,
th {
align-self: stretch;
}
// The forced width below (plans-table-cols-n) is to ensure the table columns have an equal width // The forced width below (plans-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 // 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 // and the rest of the `tr` will incorporate a full width of the viewport
@ -890,14 +901,7 @@
height: 100%; height: 100%;
.plans-table-th-content { .plans-table-th-content {
display: flex;
flex-direction: column;
height: 100%; height: 100%;
@media (max-width: @screen-sm-max) {
padding-left: @padding-xs;
padding-right: @padding-xs;
}
} }
} }
@ -1051,6 +1055,12 @@
} }
} }
.plans-table-th-content {
@media (max-width: @screen-xs-max) {
height: @plans-table-sticky-header-size!important;
overflow: hidden;
}
}
.plans-table-sticky-header-container { .plans-table-sticky-header-container {
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
// `height: 60%` is just an arbitrary percentage // `height: 60%` is just an arbitrary percentage
@ -1061,16 +1071,15 @@
width: 100%; width: 100%;
position: absolute; position: absolute;
} }
}
.plans-table-sticky-header-without-switch { .plans-table-sticky-header-without-switch {
margin-bottom: -107px; margin-bottom: -107px;
margin-top: 67px; margin-top: @plans-table-sticky-header-size;
} }
.plans-table-sticky-header-with-switch { .plans-table-sticky-header-with-switch {
margin-bottom: -140px; margin-bottom: -140px;
margin-top: 100px; margin-top: @plans-table-sticky-header-size + 34px;
} }
.plans-table-sticky-header { .plans-table-sticky-header {
@ -1082,7 +1091,7 @@
top: 0; top: 0;
left: 0; left: 0;
z-index: @z-index-plans-page-table-header-mobile; z-index: @z-index-plans-page-table-header-mobile;
height: 42px; height: @plans-table-sticky-header-size;
border-bottom: @table-border; border-bottom: @table-border;
// separate sticky class because we want to remove the class (to visually remove the sticky header) // separate sticky class because we want to remove the class (to visually remove the sticky header)
@ -1102,8 +1111,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 var(--spacing-01);
@media (max-width: @screen-xs-max) {
color: var(--neutral-90); color: var(--neutral-90);
font-size: var(--font-size-03); font-size: var(--font-size-03);
font-weight: 600; font-weight: 600;
@ -1111,11 +1119,11 @@
line-height: var(--line-height-02); line-height: var(--line-height-02);
} }
} }
}
.plans-table-sticky-header-item-green-highlighted span { .plans-table-sticky-header-item-green-highlighted span {
color: var(--green-50); color: var(--green-50);
} }
}
.plans-v2-faq { .plans-v2-faq {
p { p {