jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updating back button and funnel header to align when text wraps to more than one line

Browse source
This commit is contained in:
Max 2021-12-21 14:57:23 -05:00
parent dcfd404abe
commit 47af82ee10
2 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/common-components/funnel-sub-header/funnel-sub-header.vue
View file

@ -1,18 +1,15 @@
<template> <template>
<div class="current_car_info-text"> <div class="current_car_info-text">
<div class="d-flex align-items-center justify-content-center"> <div class="d-flex align-items-center justify-content-center container-fluid">
<h2 class="text-center fs-5 d-block fw-normal mb-0"> <h2 class="text-center fs-5 d-block fw-normal mb-0">
<p class="m-0" v-if="hasBackButton"> <span>
{{ text }}
</p>
<span v-else>
{{ text }} {{ text }}
</span> </span>
</h2> <buttonBack
<buttonBack
v-if="hasBackButton" v-if="hasBackButton"
:backButtonAction="backButtonAction" :backButtonAction="backButtonAction"
/> />
</h2>
</div> </div>
</div> </div>
</template> </template>

7
src/ux-components/button-back/button-back.vue
View file

@ -2,7 +2,7 @@
<button <button
v-if="backButtonAction" v-if="backButtonAction"
@click="backButtonAction" @click="backButtonAction"
class="back-button-wrapper d-flex p-3" class="back-button-wrapper p-3"
:aria-label="backButtonAccessibleText" :aria-label="backButtonAccessibleText"
> >
<div class="button-back"> <div class="button-back">
@ -35,6 +35,9 @@ export default {
background: transparent; background: transparent;
text-decoration: none; text-decoration: none;
border-bottom: none; border-bottom: none;
// Account for padding while still being inline with heading text (for cases where text wraps to 2 lines)
margin-bottom: -6px;
margin-top: -6px;
.button-back { .button-back {
display: inline-flex; display: inline-flex;
@ -42,6 +45,8 @@ export default {
height: 18px; height: 18px;
width: 23px; width: 23px;
overflow: hidden; overflow: hidden;
// Account for padding while still being inline with heading text (for cases where text wraps to 2 lines)
margin-bottom: -2px;
.arrow-left { .arrow-left {
position: absolute; position: absolute;
width: 18px; width: 18px;