fix: landing page on mobile #35 (#36)

AmadeusITGroup · Jul 31, 2023 · 509b90e · 509b90e
1 parent 4045c82
commit 509b90e
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/demo/src/lib/layout/Header.svelte b/demo/src/lib/layout/Header.svelte
@@ -11,7 +11,7 @@
 	$: isSvelte = $selectedFramework$ === 'svelte';
 </script>
 
-<header class="bg-light pt-4 pb-md-5 px-4 px-lg-5 d-flex mb-3 d-md-block align-items-center title">
+<header class="bg-light pt-4 pb-5 px-4 px-lg-5 d-flex mb-3 d-md-block align-items-center title">
 	<div class="row mb-4 align-items-end">
 		<h1 class="col-auto me-auto me-md-none mb-0">{title}</h1>
 		<div class="col">
@@ -37,7 +37,7 @@
 			</div>
 		</div>
 	</div>
-	<ul class="nav-tabs px-4 px-lg-5 content-tabset justify-content-md-start justify-content-end nav" role="tablist">
+	<ul class="nav-tabs px-4 px-lg-5 content-tabset justify-content-start nav" role="tablist">
 		{#each tabs as { title, key, path }}
 			{@const isActive = tab === key}
 			<li class="nav-item" role="presentation">

diff --git a/demo/src/routes/+layout.svelte b/demo/src/routes/+layout.svelte
@@ -2,6 +2,7 @@
 	import Svg from '$lib/layout/Svg.svelte';
 	import github from 'bootstrap-icons/icons/github.svg?raw';
 	import twitter from 'bootstrap-icons/icons/twitter.svg?raw';
+	import coneStriped from 'bootstrap-icons/icons/cone-striped.svg?raw';
 	import 'bootstrap/dist/css/bootstrap.css';
 	import {/*canonicalURL$,*/ pathToRoot$} from '../lib/stores';
 	import './styles.scss';
@@ -18,7 +19,10 @@
 		<div class="container-fluid">
 			<a class="navbar-brand" href={$pathToRoot$}> AgnosUI </a>
 			<div class="d-flex align-items-center">
-				<span class="badge bg-warning text-bg-warning">Work In Progress</span>
+				<span class="badge bg-warning text-bg-warning d-none d-sm-block">Work In Progress</span>
+				<span class="badge rounded-pill bg-warning text-bg-warning d-block d-sm-none" aria-label="Work In Progress">
+					<Svg className="icon-20 align-middle" svg={coneStriped} />
+				</span>
 				<a class="nav-link text-white ms-3" href="https://github.com/AmadeusITGroup/AgnosUI" aria-label="link to GitHub repository" target="_blank">
 					<Svg className="icon-24 align-middle" svg={github} />
 				</a>

diff --git a/demo/src/routes/+page.svelte b/demo/src/routes/+page.svelte
@@ -41,7 +41,7 @@
 		font-weight: 300;
 	}
 	.links {
-		padding: 1rem;
+		padding: 1rem 0rem;
 		@media (min-width: 768px) {
 			padding: 3rem;
 		}

diff --git a/demo/src/routes/[framework]/+layout.svelte b/demo/src/routes/[framework]/+layout.svelte
@@ -5,10 +5,10 @@
 	import {menu} from '../navigation';
 </script>
 
-<div class="container-fluid demo-gutter demo-layout">
+<div class="demo-layout">
 	<aside class="demo-sidebar">
 		<nav class="w-100">
-			<ul class="list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
+			<ul class="list-unstyled mb-0 pb-0 pb-md-2 pe-lg-2 main-nav-list">
 				{#each menu as { title, submenu }}
 					<li class="py-2" id="sidenav-{title}">
 						<strong class="d-flex w-100 align-items-center fw-semibold">{title}</strong>
@@ -36,3 +36,13 @@
 		<slot />
 	</div>
 </div>
+
+<style lang="scss">
+	.main-nav-list {
+		@media (max-width: 992px) {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-evenly;
+		}
+	}
+</style>