CptArn/ontvlambaar
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed mobile issues
All checks were successful
Copy Files to Samba Share dev / Copy Files (push) Successful in 24s
Details

Browse Source
This commit is contained in:
Arne Vlaeminck
2024-11-07 19:52:11 +01:00
parent f0a3e648fe
commit 4aa3a1360d
7 changed files with 22 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/footer/footer.component.html
View File

@@ -5,5 +5,5 @@
<span class="btw">BTW BE0673 769 126</span> <span class="btw">BTW BE0673 769 126</span>
</div> </div>
<img src="assets/roze_barcode_outlined_SVG.svg" class="only-on-dark" /> <img alt="lotte@ontvlambaar.be" src="assets/roze_barcode_outlined_SVG.svg" class="only-on-dark" />
<img src="assets/zwart_barcode_outlined_SVG.svg" class="only-on-light" /> <img alt="lotte@ontvlambaar.be" src="assets/zwart_barcode_outlined_SVG.svg" class="only-on-light" />

1
src/app/footer/footer.component.scss
View File

@@ -41,6 +41,7 @@ img {
.contact { .contact {
width: 100%; width: 100%;
margin-bottom: 2rem; margin-bottom: 2rem;
font-size: 1.5rem;
} }
img { img {

2
src/app/header/header.component.html
View File

@@ -1,4 +1,4 @@
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier" (click)="isCollapsed = !isCollapsed"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier">
<path d="M5 6.5H14V8H10V6.5Z"></path> <path d="M5 6.5H14V8H10V6.5Z"></path>
<path d="M5 11.5H16.5V13H7.5V11.5Z"></path> <path d="M5 11.5H16.5V13H7.5V11.5Z"></path>
<path d="M5 16.5H19V18H5V16.5Z"></path> <path d="M5 16.5H19V18H5V16.5Z"></path>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 640 B

After

Width:  |  Height:  |  Size: 603 B

10
src/app/header/header.component.scss
View File

@@ -40,18 +40,22 @@ svg {
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
padding: 0; padding: 0;
border-radius: 1rem;
background-color: var(--menu-color);
&.collapsed { &.collapsed {
max-height: 10rem; max-height: 25rem;
transition: max-height 0.5s ease; transition: max-height 0.5s ease;
overflow: hidden; overflow: hidden;
} }
li { li {
background-color: var(--background-color); background-color: var(--menu-color);
z-index: 200; z-index: 200;
height: 3rem; height: 4rem;
width: 100%; width: 100%;
color: var(--menu-text-color);
padding: 0 1rem;
} }
a { a {

4
src/app/header/header.component.ts
View File

@@ -13,8 +13,10 @@ export class HeaderComponent {
@HostListener('document:click', ['$event']) @HostListener('document:click', ['$event'])
public reset(event: unknown) { public reset(event: unknown) {
if ((event as any).srcElement.tagName !== 'path') { if ((event as any).srcElement.closest("svg")?.tagName !== 'svg') {
this.isCollapsed = false; this.isCollapsed = false;
} else {
this.isCollapsed = !this.isCollapsed;
} }
} }
} }

4
src/app/hero/hero.component.scss
View File

@@ -38,4 +38,8 @@ img {
.slogan { .slogan {
font-size: 1.3rem; font-size: 1.3rem;
} }
:host {
padding: 7rem 0;
}
} }

4
src/styles.scss
View File

@@ -4,6 +4,8 @@ html {
--background-color: rgb(255, 255, 255); --background-color: rgb(255, 255, 255);
--accent-color: rgb(211, 55, 38); --accent-color: rgb(211, 55, 38);
--logo-color: var(--text-color); --logo-color: var(--text-color);
--menu-color: #e0e0e0;
--menu-text-color: var(--text-color);
font-family: Fredoka; font-family: Fredoka;
font-weight: 300; font-weight: 300;
@@ -23,6 +25,8 @@ html {
--background-color: rgb(41, 23, 44); --background-color: rgb(41, 23, 44);
--accent-color: #E94541; --accent-color: #E94541;
--logo-color: #E94541; --logo-color: #E94541;
--menu-color: #A3203D;
--menu-text-color: #F4A5A7;
.only-on-dark { .only-on-dark {
display: inline-block; display: inline-block;