Better responsive layout

phpx-foundation · Nov 15, 2024 · a640c43 · a640c43
1 parent 3fb5fd0
commit a640c43
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 12 deletions.
diff --git a/app/View/Components/Markdown.php b/app/View/Components/Markdown.php
@@ -57,8 +57,8 @@ public function render()
 
 			if ($this->sidebar) {
 				$html = <<<HTML
-				<div class="flex items-start justify-start">
-					<article class="max-w-none flex-shrink mb-64">
+				<div class="w-full flex items-start justify-start">
+					<article class="flex-1 max-w-full flex-shrink mb-64 overflow-x-auto">
 						{$html}
 					</article>
 					{$this->sidebar()}

diff --git a/resources/js/globe.js b/resources/js/globe.js
@@ -21,12 +21,8 @@ const Globe = new ThreeGlobe()
 	.labelColor(() => 'white')
 	.labelText('name');
 
-console.log(data);
-
 // Setup renderer
-const renderer = new THREE.WebGLRenderer();
-renderer.setSize(node.clientWidth, node.clientHeight);
-node.appendChild(renderer.domElement);
+const renderer = new THREE.WebGLRenderer({ alpha: true });
 
 // Setup scene
 const scene = new THREE.Scene();
@@ -43,8 +39,23 @@ camera.position.z = 150;
 // Add camera controls
 const tbControls = new TrackballControls(camera, renderer.domElement);
 tbControls.minDistance = 101;
-tbControls.rotateSpeed = 5;
-tbControls.zoomSpeed = 0.8;
+tbControls.rotateSpeed = 1;
+tbControls.zoomSpeed = 0.2;
+
+function setSize() {
+	const width = node.clientWidth;
+	const height = node.clientHeight;
+
+	camera.position.z = width > 1000 ? 150 : 120;
+	camera.aspect = width / height;
+	camera.updateProjectionMatrix();
+
+	renderer.setSize(width, height);
+}
+
+setSize();
+window.addEventListener('resize', setSize, false);
+node.appendChild(renderer.domElement);
 
 let last_coords = [null, null];
 

diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
@@ -1,4 +1,11 @@
-@props(['footer' => null, 'title' => null, 'og' => null, 'scripts' => null])
+@props([
+	'before' => null,
+	'after' => null,
+	'footer' => null, 
+	'title' => null, 
+	'og' => null, 
+	'scripts' => null,
+])
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full antialiased bg-black text-white/50">
 <head>
@@ -54,11 +61,15 @@
 		@endif
 	</div>
 
+	{{ $before }}
+
 	{{-- Content --}}
 	<div class="w-full max-w-4xl mx-auto flex flex-col items-start justify-center px-4 py-8">
 		{{ $slot }}
 	</div>
 
+	{{ $after }}
+
 	{{-- Footer --}}
 	@isset($footer)
 		<div class="w-full bg-white text-black border-2 border-black font-semibold {{ str($attributes->get('class'))->contains('justify-') ? '' : 'mt-auto' }}">

diff --git a/resources/views/world/home.blade.php b/resources/views/world/home.blade.php
@@ -7,9 +7,11 @@
 		<meta property="og:image" content="{{ asset('world/og.jpg') }}" />
 	</x-slot:og>
 
-	<div id="globe-visualization" class="w-full h-96" data-points="{{ json_encode($points) }}"></div>
+	<x-slot:before>
+		<div id="globe-visualization" class="w-full h-32 -mb-4 sm:h-40 md:h-56 lg:h-96" data-points="{{ json_encode($points) }}"></div>
+	</x-slot:before>
 
-	<x-markdown class="my-12" :file="base_path('README.md')" sidebar />
+	<x-markdown :file="base_path('README.md')" sidebar />
 
 	@vite('resources/js/globe.js')