mirror of
https://github.com/overleaf/overleaf.git
synced 2025-03-15 14:14:27 +00:00
Merge pull request #19568 from overleaf/jel-light-touch-table-mobile
[web] Adjustments for mobile view on light touch plans redesign GitOrigin-RevId: cadbcad321da8a20733b13c65e3f3aa9302e7ea8
This commit is contained in:
parent
1f432ca5a9
commit
d3ee849415
1 changed files with 65 additions and 57 deletions
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue