finished back of card for mobile, added blur to javascript to remove the focus effect
This commit is contained in:
parent
594cc89fa3
commit
eb4b2dbefb
|
@ -77,9 +77,9 @@ body {
|
||||||
background: var(--col-background-component);
|
background: var(--col-background-component);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
/* margin: 0 1.5rem; */
|
/* margin: 0 1.5rem; */
|
||||||
padding: 24px 24px 32px 24px;
|
|
||||||
}
|
}
|
||||||
.rating-component-front {
|
.rating-component-front {
|
||||||
|
padding: 24px 24px 32px 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.star-icon {
|
.star-icon {
|
||||||
|
@ -226,21 +226,22 @@ body {
|
||||||
|
|
||||||
.rating-component-back {
|
.rating-component-back {
|
||||||
/* display: none; */
|
/* display: none; */
|
||||||
padding: 34px 24px 37px 24px;
|
padding: 24px 24px 37px 24px;
|
||||||
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thank-you-img {
|
.thank-you-img {
|
||||||
margin-top: 0px;
|
margin-top: 10px;
|
||||||
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rating-component__rating {
|
.rating-component__rating {
|
||||||
margin-top: 1.5rem;
|
margin-top: 24px;
|
||||||
/* margin-inline: 45px; */
|
margin-inline: 55px;
|
||||||
|
|
||||||
font-size: var(--fs-body);
|
font-size: var(--fs-body);
|
||||||
/* line-height: var(--lh-body); */
|
line-height: var(--lh-body);
|
||||||
color: var(--col-orange);
|
color: var(--col-orange);
|
||||||
|
|
||||||
border-radius: 22.5px;
|
border-radius: 22.5px;
|
||||||
|
@ -253,7 +254,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.rating-component__body-submitted {
|
.rating-component__body-submitted {
|
||||||
margin-top: 10px;
|
margin-top: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 62.5rem) {
|
@media screen and (min-width: 62.5rem) {
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
const form = document.getElementById("ratingForm");
|
const form = document.getElementById("ratingForm");
|
||||||
const ratingSpan = document.getElementById("ratingSpan");
|
const ratingSpan = document.getElementById("ratingSpan");
|
||||||
|
const buttonSubmit = document.getElementById("buttonSubmit");
|
||||||
|
|
||||||
const frontSection = document.getElementById("rating-component-front");
|
const frontSection = document.getElementById("rating-component-front");
|
||||||
const backSection = document.getElementById("rating-component-back");
|
const backSection = document.getElementById("rating-component-back");
|
||||||
|
@ -17,8 +18,18 @@ form.addEventListener(
|
||||||
ratingSpan.innerText = output;
|
ratingSpan.innerText = output;
|
||||||
|
|
||||||
//hide first section, make second section visible
|
//hide first section, make second section visible
|
||||||
|
if (output != "") {
|
||||||
frontSection.classList.add("hidden");
|
frontSection.classList.add("hidden");
|
||||||
backSection.classList.remove("hidden");
|
backSection.classList.remove("hidden");
|
||||||
|
} else {
|
||||||
|
/*
|
||||||
|
Blur is used to remove the focus from the button that
|
||||||
|
we prevent from working because the user didn't select
|
||||||
|
a rating. Should probably add an error message, even
|
||||||
|
though its not in the design spec.
|
||||||
|
*/
|
||||||
|
buttonSubmit.blur();
|
||||||
|
}
|
||||||
//use a transition effect, plus a reduced motion version
|
//use a transition effect, plus a reduced motion version
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
Loading…
Reference in New Issue