github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

new plans page: refactor custom tooltip to bootstrap tooltip (#7972)

Browse source 
GitOrigin-RevId: d3552867a9e9176288803cadffacb5f3dab24895
This commit is contained in:
M Fahru 2022-05-17 04:32:01 -04:00 committed by Copybot
parent 5050493827
commit 4d25132a5f
3 changed files with 56 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
services/web/app/views/subscriptions/plans-marketing/v2/_cards_controls_tables.pug
View file

@ -28,12 +28,16 @@ include ./_mixins
autocomplete="off"
)
span
div.plans-v2-m-a-switch-annual-text-container
.plans-v2-m-a-switch-annual-text-container
span(data-ol-plans-v2-m-a-switch-annual-text) #{translate("annual")}
div.plans-v2-m-a-tooltip.plans-v2-m-a-tooltip-monthly(data-ol-plans-v2-m-a-tooltip)
div.plans-v2-m-a-tooltip-arrow
span(data-ol-tooltip-period='monthly') #{translate("save_20_percent_by_paying_annually")}
span(hidden data-ol-tooltip-period='annual') #{translate("saving_20_percent")}
.tooltip.in.right.plans-v2-m-a-tooltip(
role="tooltip"
data-ol-plans-v2-m-a-tooltip
)
.tooltip-arrow
.tooltip-inner
span(data-ol-tooltip-period='monthly') #{translate("save_20_percent_by_paying_annually")}
span(hidden data-ol-tooltip-period='annual') #{translate("saving_20_percent")}
.row(hidden data-ol-plans-v2-license-picker-container)
.col-sm-12

32
services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-m-a-switch.js
View file

@ -68,9 +68,9 @@ export function enableMonthlyAnnualSwitching() {
}
export function hideMonthlyAnnualSwitchOnSmallScreen() {
const isSmallScreen = window.matchMedia('(max-width: 767px)').matches
const smallScreen = window.matchMedia('(max-width: 767px)').matches
if (isSmallScreen) {
if (smallScreen) {
const el = document.querySelector('[data-ol-plans-v2-m-a-switch-container]')
el.hidden = true
@ -78,9 +78,9 @@ export function hideMonthlyAnnualSwitchOnSmallScreen() {
}
export function showMonthlyAnnualSwitchOnSmallScreen() {
const isSmallScreen = window.matchMedia('(max-width: 767px)').matches
const smallScreen = window.matchMedia('(max-width: 767px)').matches
if (isSmallScreen) {
if (smallScreen) {
const el = document.querySelector('[data-ol-plans-v2-m-a-switch-container]')
el.hidden = false
@ -107,10 +107,7 @@ export function hideMonthlyAnnualTooltip() {
function switchMonthlyAnnualTooltip() {
const el = document.querySelector('[data-ol-plans-v2-m-a-tooltip]')
if (currentMonthlyAnnualSwitchValue === 'annual') {
el.classList.replace(
'plans-v2-m-a-tooltip-annual',
'plans-v2-m-a-tooltip-monthly'
)
el.classList.remove('plans-v2-m-a-tooltip-annual-selected')
document.querySelectorAll('[data-ol-tooltip-period]').forEach(childEl => {
const period = childEl.getAttribute('data-ol-tooltip-period')
if (period === 'monthly') {
@ -120,10 +117,7 @@ function switchMonthlyAnnualTooltip() {
}
})
} else {
el.classList.replace(
'plans-v2-m-a-tooltip-monthly',
'plans-v2-m-a-tooltip-annual'
)
el.classList.add('plans-v2-m-a-tooltip-annual-selected')
document.querySelectorAll('[data-ol-tooltip-period]').forEach(childEl => {
const period = childEl.getAttribute('data-ol-tooltip-period')
if (period === 'annual') {
@ -135,6 +129,17 @@ function switchMonthlyAnnualTooltip() {
}
}
function changeMonthlyAnnualTooltipPosition() {
const smallScreen = window.matchMedia('(max-width: 767px)').matches
const el = document.querySelector('[data-ol-plans-v2-m-a-tooltip]')
if (smallScreen) {
el.classList.replace('right', 'bottom')
} else {
el.classList.replace('bottom', 'right')
}
}
// month and annual value will each have its own set of tables that we need to
// switch accordingly
function switchMonthlyAnnualTable() {
@ -215,4 +220,7 @@ export function setUpMonthlyAnnualSwitching() {
switchMonthlyAnnualTable()
switchUnderlineText()
})
changeMonthlyAnnualTooltipPosition()
window.addEventListener('resize', changeMonthlyAnnualTooltipPosition)
}

81
services/web/frontend/stylesheets/app/plans-v2.less
View file

@ -196,19 +196,42 @@
position: absolute;
color: @white;
width: auto;
height: 35px;
padding: @padding-xs @padding-sm;
border-radius: 4px;
left: 59px;
top: -5px;
left: 100%;
top: 0;
z-index: @plans-v2-m-a-tooltip-z-index;
&.plans-v2-m-a-tooltip-annual-selected {
.tooltip-inner {
background-color: @ol-green;
}
.tooltip-arrow {
border-right-color: @ol-green;
}
}
span {
white-space: nowrap;
}
@media (max-width: @screen-xs-max) {
top: 36px;
left: -121%;
top: unset;
&.plans-v2-m-a-tooltip-annual-selected {
left: -33%;
.tooltip-inner {
background-color: @ol-green;
}
.tooltip-arrow {
border-right-color: unset;
border-bottom-color: @ol-green;
}
}
span {
font-size: @font-size-extra-small;
@ -217,56 +240,6 @@
}
}
.plans-v2-m-a-tooltip-monthly {
background-color: rgba(0, 0, 0, 0.9);
.plans-v2-m-a-tooltip-arrow {
background-color: rgba(0, 0, 0, 0.9);
}
@media (max-width: @screen-xs-max) {
left: -86px;
.plans-v2-m-a-tooltip-arrow {
left: 102px;
}
}
}
.plans-v2-m-a-tooltip-annual {
background-color: @ol-green;
.plans-v2-m-a-tooltip-arrow {
background-color: @ol-green;
}
@media (max-width: @screen-xs-max) {
left: -27px;
.plans-v2-m-a-tooltip-arrow {
left: 43px;
}
}
}
.plans-v2-m-a-tooltip-arrow {
background-color: rgba(0, 0, 0, 0.9);
position: absolute;
left: -4px;
top: 14px;
width: 8px;
height: 8px;
transform: rotate(45deg);
// hide the arrow behind the tooltip text
z-index: @plans-v2-m-a-tooltip-arrow-z-index;
@media (max-width: @screen-xs-max) {
width: 18px;
height: 18px;
top: -9px;
}
}
.page-header.top-page-header {
// remove page-header border & margin on mobile
@media (max-width: @screen-xs-max) {