Skip to content

Commit

Permalink
add contact template in footer with styles, handle also toggling butt…
Browse files Browse the repository at this point in the history 
…on showing more numbers
  • Loading branch information
@goldipl
goldipl committed Jun 12, 2024
1 parent e625c68 commit 9adbd66
Show file tree
Hide file tree
Showing 5 changed files with 219 additions and 3 deletions.
44 changes: 43 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -824,7 +824,49 @@ <h3>Zakupy</h3>
<h3>Kontakt</h3>
</div>
<div class="footer-col-wrapper__contact">

<div class="contact-slot">
<div class="contact-slot-line">
<img class="contact-slot__img" src="./assets/icons/footer/clock.svg" alt="godziny otwarcia" width="14" height="14">
<p class="contact-slot__text">Pn - Pt:</p>
<p class="contact-slot__hours">8:00 - 19:30</p>
</div>
<div class="contact-slot-line">
<span class="spacer"></span>
<p class="contact-slot__text">Sobota:</p>
<p class="contact-slot__hours">8:00 - 17:30</p>
</div>
<div class="contact-slot-line">
<span class="spacer"></span>
<p class="contact-slot__text">Niedziela:</p>
<p class="contact-slot__hours">9:00 - 16:30</p>
</div>
</div>
<div class="contact-slot phones">
<div class="contact-slot-line">
<img class="contact-slot__img" src="./assets/icons/footer/telephone.svg" alt="telefon" width="14" height="14">
<p class="contact-slot__text"><a href="tel:+44 7931934965">+44 7931934965</a></p>
<p class="contact-slot__show-more"><span>Pokaż więcej</span> <img class="arrow-down-show" src="./assets/icons/footer/arrow-down.svg" alt="strzalka" width="12" height="6"></p>
</div>
<div class="contact-slot-line phone hidden">
<span class="spacer"></span>
<p class="contact-slot__text"><a href="tel:+44 7983070418">+44 7983070418</a></p>
</div>
<div class="contact-slot-line phone hidden">
<span class="spacer"></span>
<p class="contact-slot__text"><a href="tel:+44 7976501634">+44 7976501634</a></p>
</div>
<div class="contact-slot-line phone hidden">
<span class="spacer"></span>
<p class="contact-slot__text"><a href="tel:+48 660068796">+48 660068796</a></p>
<img src="./assets/icons/footer/PLflag.svg" alt="flag" width="19" height="14">
</div>
</div>
<div class="contact-slot">
<div class="contact-slot-line">
<img class="contact-slot__img" src="./assets/icons/footer/mail.svg" alt="e-mail" width="14" height="11">
<p class="contact-slot__text"><a href="mailto:office@furnipol.co.uk">office@furnipol.co.uk</a></p>
</div>
</div>
</div>
</div>
</div>
Expand Down
17 changes: 16 additions & 1 deletion js/scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,19 @@ $(document).ready(function(){
$(this).toggleClass('open');
});
$('footer .footer-wrapper-bottom span').text(currentYear);
});
});

// Toggling show more telephones on desktop
$(document).ready(function() {
$(".contact-slot__show-more").click(function() {
var hiddenElements = $(this).closest(".contact-slot.phones").find(".contact-slot-line.phone");
hiddenElements.toggleClass("hidden");

$(".contact-slot__show-more span").each(function() {
var showMoreText = $(this).text().trim().includes("więcej") ? "Pokaż mniej" : "Pokaż więcej";
$(this).text(showMoreText);
});

$(this).find(".arrow-down-show").toggleClass("rotated");
});
});
79 changes: 79 additions & 0 deletions sass/common/_footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,85 @@
}
}
}
&__contact {
display: flex;
flex-direction: column;
.contact-slot {
display: flex;
flex-direction: column;
margin-bottom: 15px;
&.phones {
.contact-slot-line {
display: inline-flex;
white-space: nowrap;
margin-bottom: 2px;
&.hidden {
display: none;
}
}
.contact-slot__show-more {
font-size: 11px;
font-weight: 500;
text-align: left;
color: $light_grey02;
cursor: pointer;
margin: 0;
user-select: none;
}
.arrow-down-show {
display: inline-flex;
margin-left: 4px;
&.rotated {
transform: rotate(180deg);
}
}
}
&-line {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin-bottom: 5px;
.contact-slot__img {
object-fit: contain;
}
.contact-slot__text {
display: inline-flex;
font-size: 14px;
font-weight: 300;
line-height: 19px;
text-align: left;
color: $grey01;
margin: 0 15px;
min-width: 65px;
a {
font-size: 14px;
font-weight: 300;
line-height: 19px;
text-align: left;
color: $grey01;
text-decoration: none;
&:hover {
color: $furnipol_orange;
}
}
}
.contact-slot__hours {
display: inline-flex;
font-size: 14px;
font-weight: 300;
line-height: 19px;
text-align: left;
color: $grey01;
margin: 0;
}
.spacer {
display: flex;
width: 14px;
}
}
}
}
}
}
}
Expand Down
80 changes: 80 additions & 0 deletions sass/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1208,6 +1208,86 @@ body {
.footer-2-0 .footer-wrapper-top-col .footer-col-wrapper__links a:hover {
color: #eb7d3f;
}
.footer-2-0 .footer-wrapper-top-col .footer-col-wrapper__contact {
display: flex;
flex-direction: column;
}
.footer-2-0 .footer-wrapper-top-col .footer-col-wrapper__contact .contact-slot {
display: flex;
flex-direction: column;
margin-bottom: 15px;
}
.footer-2-0 .footer-wrapper-top-col .footer-col-wrapper__contact .contact-slot.phones .contact-slot-line {
display: inline-flex;
white-space: nowrap;
margin-bottom: 2px;
}
.footer-2-0 .footer-wrapper-top-col .footer-col-wrapper__contact .contact-slot.phones .contact-slot-line.hidden {
display: none;
}
.footer-2-0 .footer-wrapper-top-col .footer-col-wrapper__contact .contact-slot.phones .contact-slot__show-more {
font-size: 11px;
font-weight: 500;
text-align: left;
color: #a8a8a9;
cursor: pointer;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.footer-2-0 .footer-wrapper-top-col .footer-col-wrapper__contact .contact-slot.phones .arrow-down-show {
display: inline-flex;
margin-left: 4px;
}
.footer-2-0 .footer-wrapper-top-col .footer-col-wrapper__contact .contact-slot.phones .arrow-down-show.rotated {
transform: rotate(180deg);
}
.footer-2-0 .footer-wrapper-top-col .footer-col-wrapper__contact .contact-slot-line {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin-bottom: 5px;
}
.footer-2-0 .footer-wrapper-top-col .footer-col-wrapper__contact .contact-slot-line .contact-slot__img {
-o-object-fit: contain;
object-fit: contain;
}
.footer-2-0 .footer-wrapper-top-col .footer-col-wrapper__contact .contact-slot-line .contact-slot__text {
display: inline-flex;
font-size: 14px;
font-weight: 300;
line-height: 19px;
text-align: left;
color: #25262b;
margin: 0 15px;
min-width: 65px;
}
.footer-2-0 .footer-wrapper-top-col .footer-col-wrapper__contact .contact-slot-line .contact-slot__text a {
font-size: 14px;
font-weight: 300;
line-height: 19px;
text-align: left;
color: #25262b;
text-decoration: none;
}
.footer-2-0 .footer-wrapper-top-col .footer-col-wrapper__contact .contact-slot-line .contact-slot__text a:hover {
color: #eb7d3f;
}
.footer-2-0 .footer-wrapper-top-col .footer-col-wrapper__contact .contact-slot-line .contact-slot__hours {
display: inline-flex;
font-size: 14px;
font-weight: 300;
line-height: 19px;
text-align: left;
color: #25262b;
margin: 0;
}
.footer-2-0 .footer-wrapper-top-col .footer-col-wrapper__contact .contact-slot-line .spacer {
display: flex;
width: 14px;
}
.footer-2-0 .footer-wrapper-middle {
padding: 30px 0;
width: 100%;
Expand Down
Loading

0 comments on commit 9adbd66

Please sign in to comment.