fix: styling improvements for fixed elements (#91)

angular.json

@@ -85,7 +85,11 @@
 							"ngswConfigPath": "ngsw-config.json"
 						},
 						"development": {
-							"optimization": false,
+							"optimization": {
+								"styles": {
+									"inlineCritical": false
+								}
+							},
 							"sourceMap": true,
 							"namedChunks": true,
 							"extractLicenses": true,

src/app/components/blog/blog5/blog5.component.html

@@ -1,23 +1,23 @@
 <div
-	class="relative flex flex-col max-w-xl p-6 divide-y xl:flex-row xl:divide-y-0 xl:divide-x"
+	class="relative flex flex-col max-w-2xl p-6 divide-y xl:flex-row xl:divide-y-0 xl:divide-x"
 	[ngClass]="['bg' + contrast, 'text' + defaultInv, 'divide' + neutral]"
 >
-	<div class="p-3 space-y-1 xl:ml-6">
+	<div class="p-3 space-y-1">
 		<h3 class="text-3xl font-semibold">Lorem ipsum dolor sit amet</h3>
 		<p class="text-sm" [ngClass]="['text' + plainInv]">
 			Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam possimus repellat
 			incidunt odit eligendi mollitia quaerat autem nobis fugiat natus?
 		</p>
 	</div>
-	<div class="flex items-center p-3 space-x-3">
+	<div class="flex items-center gap-3 p-3">
 		<img
-			class="object-cover w-12 h-12 rounded-full shadow bg-gray-500"
+			class="object-cover w-12 h-12 bg-gray-500 rounded-full shadow"
 			alt=""
 			src="https://source.unsplash.com/100x100/?portrait"
 		/>
 		<div class="space-y-1">
-			<span class="text-sm">April 03, 2021</span>
-			<div class="flex flex-wrap space-x-3">
+			<span class="text-xs">April 03, 2021</span>
+			<div class="flex flex-wrap gap-3">
 				<a
 					rel="noopener noreferrer"
 					href="#"
@@ -46,9 +46,3 @@ <h3 class="text-3xl font-semibold">Lorem ipsum dolor sit amet</h3>
 		</div>
 	</div>
 </div>
-
-<!-- <img
-			class="object-cover w-12 h-12 rounded-full shadow bg-gray-500"
-			alt=""
-			src="https://source.unsplash.com/100x100/?portrait"
-		/> -->

src/app/components/components.component.html

@@ -18,9 +18,9 @@ <h1 class="text-5xl font-bold">Components</h1>
 			class="relative px-3 py-1 m-1 text-sm rounded-md shadow-sm sm:py-2 sm:text-base ring ring-transparent group md:px-4 hover:ring hover:ring-opacity-50 focus:ring-opacity-50"
 			[ngClass]="[
 				'hover:ring' + primary,
-				(category | filter: query) ? 'text' + contrastInv : 'text' + plainInv,
-				(category | filter: query) ? activeBgColor : disabledBgColor,
-				(category | filter: query) ? 'no-underline' : 'line-through'
+				(category | filter : query) ? 'text' + contrastInv : 'text' + plainInv,
+				(category | filter : query) ? activeBgColor : disabledBgColor,
+				(category | filter : query) ? 'no-underline' : 'line-through'
 			]"
 		>
 			<span
@@ -33,5 +33,8 @@ <h1 class="text-5xl font-bold">Components</h1>
 			<span class="text-sm">{{ category.name }}</span>
 		</a>
 	</div>
+	<div class="flex justify-center">
+		<ads [sticky]="true"></ads>
+	</div>
 	<router-outlet></router-outlet>
 </div>

src/app/docs/docs.component.html

@@ -19,6 +19,9 @@
 			{{ category.name }}
 		</a>
 	</div>
+	<div class="flex justify-center">
+		<ads [sticky]="true"></ads>
+	</div>
 	<div class="py-4 prose">
 		<router-outlet></router-outlet>
 	</div>

src/app/shared/components/ads/ads.component.ts

@@ -9,6 +9,7 @@ import {
 } from '@angular/core';
 import {ethicalads} from 'src/assets/js/ads';
 import {BaseComponent} from '../base/base.component';
+import {NavigationEnd, Router} from '@angular/router';
 
 @Component({
 	selector: 'ads',
@@ -21,16 +22,29 @@ export class AdsComponent extends BaseComponent implements OnInit, OnDestroy, Af
 	@Input() keyword = '';
 	keywords = 'tailwind|tailwindcss|css|component|template|web development|webdev|document';
 	interval;
+	routerSubscription;
 	manuallyClosed = false;
+	lastNavigationTime = 0;
 
-	constructor() {
+	constructor(private router: Router) {
 		super();
 	}
 
 	ngOnInit() {
 		if (this.keyword) {
 			this.keywords += '|' + this.keyword;
 		}
+
+		this.routerSubscription = this.router.events.subscribe(event => {
+			if (event instanceof NavigationEnd) {
+				const currentTime = Date.now();
+				if (currentTime - this.lastNavigationTime > 2000) {
+					ethicalads.reload();
+					this.manuallyClosed = false;
+					this.lastNavigationTime = currentTime;
+				}
+			}
+		});
 	}
 
 	ngAfterViewInit(): void {
@@ -40,6 +54,7 @@ export class AdsComponent extends BaseComponent implements OnInit, OnDestroy, Af
 
 	ngOnDestroy(): void {
 		clearInterval(this.interval);
+		this.routerSubscription.unsubscribe();
 	}
 
 	refreshAdsInIntervalIfElementVisible() {

src/app/shared/components/empty-child-route/empty-child-route.component.html

@@ -1,7 +1,6 @@
 <div
 	class="container flex flex-col items-center justify-center p-6 mx-auto mt-8 space-y-4 lg:my-16"
 >
-	<ads [sticky]="true"></ads>
 	<div class="flex flex-wrap justify-center">
 		<a
 			rel="noopener noreferrer"

src/app/shared/components/footer/footer.component.html

@@ -1,4 +1,7 @@
-<footer class="border-t" [ngClass]="['bg' + contrast, 'text' + defaultInv, 'border' + neutral]">
+<footer
+	class="pb-16 border-t sm:pb-10"
+	[ngClass]="['bg' + contrast, 'text' + defaultInv, 'border' + neutral]"
+>
 	<div class="container mx-auto space-y-6">
 		<div class="px-12 pt-12 space-y-8 md:flex md:justify-between md:px-6 md:space-y-0">
 			<div class="flex flex-col my-6 space-y-6 md:m-0">

src/app/shared/components/showcase/showcase.component.html

@@ -1,8 +1,5 @@
 <div class="container px-6 mx-auto mt-6 mb-12">
 	<h2 class="mb-4 text-2xl font-semibold text-center">{{ title }}</h2>
-	<div class="flex justify-center">
-		<ads [keyword]="title" [sticky]="true"></ads>
-	</div>
 	<div class="flex flex-col space-y-12">
 		<ng-content></ng-content>
 	</div>

src/app/templates/templates.component.html

@@ -26,5 +26,8 @@ <h1 class="text-5xl font-bold">Components</h1>
 			<span class="text-sm capitalize">{{ category.name }}</span>
 		</a>
 	</div>
+	<div class="flex justify-center">
+		<ads [sticky]="true"></ads>
+	</div>
 	<router-outlet></router-outlet>
 </div>

tailwind.config.js

@@ -158,7 +158,7 @@ module.exports = {
 						maxWidth: theme('maxWidth.6xl'),
 					},
 					'@screen 2xl': {
-						maxWidth: theme('maxWidth.7xl'),
+						maxWidth: theme('maxWidth.6xl'),
 					},
 				},
 			};