fix: align design of footer with current web
This commit is contained in:
Christel Westerberg
@@ -7,6 +7,8 @@ import Image from "@/components/Image"
|
||||
|
||||
import Navigation from "./Navigation"
|
||||
|
||||
import styles from "./footer.module.css"
|
||||
|
||||
import type { LangParams } from "@/types/params"
|
||||
import type { GetFooterData } from "@/types/requests/footer"
|
||||
|
||||
@@ -27,57 +29,44 @@ export default async function Footer({ lang }: LangParams) {
|
||||
|
||||
const footerData = data.all_footer.items[0]
|
||||
return (
|
||||
<footer className="global-footer">
|
||||
<div className="global-footer__content">
|
||||
<h2 className="global-footer__content__heading">
|
||||
<footer className={styles.container}>
|
||||
<div className={styles.content}>
|
||||
<h2 className={styles.contentHeading}>
|
||||
<Image
|
||||
alt={footerData.logoConnection.edges[0].node.title}
|
||||
data-js="scandiclogoimg"
|
||||
data-nosvgsrc="/_static/img/scandic-logotype-white.png" // what here?
|
||||
height="22"
|
||||
height={23}
|
||||
src={footerData.logoConnection.edges[0].node.url}
|
||||
width="102"
|
||||
width={102.17}
|
||||
/>
|
||||
<span className="hidden--accessible">Scandic</span>
|
||||
<span className={styles.hiddenAccessible}>Scandic</span>
|
||||
</h2>
|
||||
<ul className="l-footer-sections">
|
||||
<ul className={styles.footerSections}>
|
||||
{footerData.navigation.map((group) => (
|
||||
<li className="global-footer-section" key={group.title}>
|
||||
<div className="link-list-top-header">{group.title}</div>
|
||||
<li className={styles.footerLink} key={group.title}>
|
||||
<div className={styles.footerLinkHeader}>{group.title}</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div
|
||||
data-js-collapsible="global-footer"
|
||||
className="collapsible-global-footer"
|
||||
>
|
||||
<div>
|
||||
<Navigation linkGroups={footerData.navigation} />
|
||||
|
||||
<div className="global-footer__content__bottom">
|
||||
<p className="newFooterTitle">
|
||||
<strong>{footerData.about.title}</strong>
|
||||
<div className={styles.contentBottom}>
|
||||
<p className={styles.contentBottomTitle}>
|
||||
{footerData.about.title}
|
||||
</p>
|
||||
<div className="padTop15">
|
||||
<p>{footerData.about.text}</p>
|
||||
<p style={{ textAlign: "center" }}>
|
||||
<strong>{footerData.app_downloads.title}</strong>
|
||||
<div>
|
||||
<p className={styles.footerAboutText}>{footerData.about.text}</p>
|
||||
<p className={styles.contentBottomTitle}>
|
||||
{footerData.app_downloads.title}
|
||||
</p>
|
||||
<table
|
||||
style={{
|
||||
height: "62px",
|
||||
width: "100%",
|
||||
borderCollapse: "collapse",
|
||||
}}
|
||||
>
|
||||
<table className={styles.appDownloadTable}>
|
||||
<tbody>
|
||||
<tr style={{ height: "62px" }}>
|
||||
<tr className={styles.tableRow}>
|
||||
<td
|
||||
style={{
|
||||
width: "50%",
|
||||
height: "62px",
|
||||
textAlign: "right",
|
||||
}}
|
||||
className={styles.tableData}
|
||||
style={{ textAlign: "right" }}
|
||||
>
|
||||
<a
|
||||
title="Appstore"
|
||||
@@ -100,11 +89,8 @@ export default async function Footer({ lang }: LangParams) {
|
||||
</a>
|
||||
</td>
|
||||
<td
|
||||
style={{
|
||||
width: "50%",
|
||||
height: "62px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
className={styles.tableData}
|
||||
style={{ textAlign: "left" }}
|
||||
>
|
||||
<a
|
||||
title="Google Play"
|
||||
@@ -130,118 +116,56 @@ export default async function Footer({ lang }: LangParams) {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `#map-destinations-list .hotel-teaser .hotel-teaser__body + .special-alerts.special-alerts--inline-block {
|
||||
display: none;
|
||||
}`,
|
||||
}}
|
||||
/>
|
||||
<p>
|
||||
<Script
|
||||
id="inline-script"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `const isNetsHotel = location.href.match(/hotel=((389)|(365)|(374)|(888)|(891)|(340))/g) != null;
|
||||
let removeSavedCardElem = function () {
|
||||
if (!isNetsHotel) {
|
||||
return;
|
||||
}
|
||||
if (document.querySelector(".credit-card-form__saved-select")) {
|
||||
if (!document.querySelector(".credit-card-form__new")) {
|
||||
document.querySelector(".credit-card-form").classNameList.add("hidden");
|
||||
}
|
||||
document.querySelector(".credit-card-form__saved-select").remove();
|
||||
document.querySelector(".credit-card-form__select input[type=radio]").checked = "checked";
|
||||
}
|
||||
setTimeout( function() {
|
||||
if (document.querySelector(".credit-card-form__select")) {
|
||||
document.querySelector(".credit-card-form__select input[type=radio]").checked = "checked";
|
||||
document.querySelector(".credit-card-form__select").classNameList.add("hidden");
|
||||
}
|
||||
if (document.querySelector(".credit-card-form__new")) {
|
||||
document.querySelector(".credit-card-form__new").classNameList.remove("ng-hide");
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
removeSavedCardElem();
|
||||
setTimeout(removeSavedCardElem, 500);
|
||||
const confirmPgHotelId = document.getElementById("adm-hotelOperaId") && document.getElementById("adm-hotelOperaId").value;
|
||||
const isNetsHotelConfnPg = ["389","365","374","888","891","340"].indexOf(confirmPgHotelId) != -1;
|
||||
if (isNetsHotelConfnPg && document.querySelector(".save-credit-card__form")) {
|
||||
document.querySelector(".save-credit-card__form").style.display = "none";
|
||||
document.querySelector(".save-credit-card__form").remove();
|
||||
}`,
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div className="global-footer__social-media" id="social-icons">
|
||||
<h3 className="heading-5 u-uppercase">
|
||||
<div className={styles.sectionContainer}>
|
||||
<h3 className={styles.sectionTitle}>
|
||||
{footerData.social_media.title}
|
||||
</h3>
|
||||
<a
|
||||
href={footerData.social_media.facebook.href}
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
className="social-media-icon"
|
||||
title="Scandic on Facebook"
|
||||
>
|
||||
<svg
|
||||
focusable="false"
|
||||
className="icon icon--facebook icon--white"
|
||||
viewBox="0 0 150 150"
|
||||
role="img"
|
||||
aria-labelledby="social-icons facebook-icon"
|
||||
<section className={styles.socialMediaIconsContainer}>
|
||||
<a
|
||||
href={footerData.social_media.facebook.href}
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
className={styles.socialMediaIconLink}
|
||||
title="Scandic on Facebook"
|
||||
>
|
||||
<title id="facebook-icon">
|
||||
{footerData.social_media.facebook.title}
|
||||
</title>
|
||||
<use xlinkHref="/_static/img/icons/sprites.svg#icon-facebook"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href={footerData.social_media.twitter.href}
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
className="social-media-icon"
|
||||
>
|
||||
<span className="hidden--accessible">{`Model.SafeGet(m => m.FooterHeader) on Twitter`}</span>
|
||||
<svg
|
||||
focusable="false"
|
||||
className="icon icon--twitter icon--white"
|
||||
viewBox="0 0 150 150"
|
||||
role="img"
|
||||
aria-labelledby="social-icons twitter-icon"
|
||||
<svg
|
||||
focusable="false"
|
||||
className={styles.socialMediaIcon}
|
||||
viewBox="0 0 150 150"
|
||||
role="img"
|
||||
aria-labelledby="social-icons facebook-icon"
|
||||
>
|
||||
<title id="facebook-icon">
|
||||
{footerData.social_media.facebook.title}
|
||||
</title>
|
||||
<use xlinkHref="/_static/img/icons/sprites.svg#icon-facebook"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href={footerData.social_media.instagram.href}
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
className={styles.socialMediaIconLink}
|
||||
title="Scandic on Instagram"
|
||||
>
|
||||
<title id="twitter-icon">
|
||||
{footerData.social_media.twitter.title}
|
||||
</title>
|
||||
<use xlinkHref="/_static/img/icons/sprites.svg#icon-twitter"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href={footerData.social_media.instagram.href}
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
className="social-media-icon"
|
||||
title="Scandic on Instagram"
|
||||
>
|
||||
<svg
|
||||
focusable="false"
|
||||
className="icon icon--instagram icon--white"
|
||||
viewBox="0 0 150 150"
|
||||
role="img"
|
||||
aria-labelledby="social-icons instagram-icon"
|
||||
>
|
||||
<title id="instagram-icon">
|
||||
{footerData.social_media.instagram.title}
|
||||
</title>
|
||||
<use xlinkHref="/_static/img/icons/sprites.svg#icon-instagram"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<svg
|
||||
focusable="false"
|
||||
className={styles.socialMediaIcon}
|
||||
viewBox="0 0 150 150"
|
||||
role="img"
|
||||
aria-labelledby="social-icons instagram-icon"
|
||||
>
|
||||
<title id="instagram-icon">
|
||||
{footerData.social_media.instagram.title}
|
||||
</title>
|
||||
<use xlinkHref="/_static/img/icons/sprites.svg#icon-instagram"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
<div className="global-footer__trip-advisor">
|
||||
<h3 className="heading-5 u-uppercase">
|
||||
<div className={styles.sectionContainer}>
|
||||
<h3 className={styles.sectionTitle}>
|
||||
{footerData.trip_advisor.title}
|
||||
</h3>
|
||||
<Image
|
||||
|
||||
Reference in New Issue
Block a user