sticky div

Makefile

@@ -1,6 +1,6 @@
 export APP = moteur-de-recherche
 export APP_PATH := $(shell pwd)
-export APP_VERSION	:= 2.6
+export APP_VERSION	:= 2.7
 export DATA_PATH = ${APP_PATH}/backend/tests/iga/data
 #export APP_VERSION	:= $(shell git describe --tags || cat VERSION )
 

artifacts.sample

@@ -1,6 +1,6 @@
 export DC=docker-compose
-export INDEX_NAME = bld
-export DATA_PATH = /data
+export INDEX_NAME = iga
+export DATA_PATH = ${APP_PATH}/backend/tests/${INDEX_NAME}/data
 export ENV_FILE = ${APP_PATH}/backend/tests/${INDEX_NAME}/.env-${INDEX_NAME}
 export FRONTEND_STATIC_USER=${APP_PATH}/backend/tests/${INDEX_NAME}/static
 export DC_UP_ARGS=

backend/tools/elastic.py

@@ -46,7 +46,7 @@
     ssl_context = None    
 
 es = Elasticsearch([{
-                    "scheme": "https",
+                    "scheme": scheme,
                     'host': getenv('ES_HOST', 'elasticsearch'),
                     'port': getenv('ES_PORT', '9200'), 'timeout': 240,
                     'max_retries': 10,

frontend/src/layouts/Nav.svelte

@@ -33,6 +33,11 @@
 </script>
 
 <style>
+
+	nav {
+		height: 6rem;
+	}
+
 	[aria-current] {
 		position: relative !important;
 	}

frontend/src/routes/search/index.svelte

@@ -1,43 +1,49 @@
-<svelte:head>
-	<title>Rechercher</title>
-</svelte:head>
-
 <script>
-	import { onMount } from 'svelte';
-	import { envJson } from '../../components/user-data.store';
-	import { promiseSearch } from './stores.js';
-	import { itemJson, searchJson } from '../../components/user-data.store';
-	import { flatten, format2ES, search } from '../../components/utils.js';
-	import SearchBar from './SearchBar.svelte';
-	import ResultList from './ResultList.svelte';
-	import Aside from './aside.svelte';
+	import { onMount } from "svelte";
+	import { envJson } from "../../components/user-data.store";
+	import { promiseSearch } from "./stores.js";
+	import { itemJson, searchJson } from "../../components/user-data.store";
+	import { flatten, format2ES, search } from "../../components/utils.js";
+	import SearchBar from "./SearchBar.svelte";
+	import ResultList from "./ResultList.svelte";
+	import Aside from "./aside.svelte";
 
-	let body
+	let body;
 	onMount(async () => {
 		//initial search
 		if ($envJson.initialSearch) {
-			body =  format2ES($itemJson, flatten($searchJson, 2), $envJson.index_name)
-			$promiseSearch = search(body)
+			body = format2ES(
+				$itemJson,
+				flatten($searchJson, 2),
+				$envJson.index_name,
+			);
+			$promiseSearch = search(body);
 		}
 	});
-
 </script>
 
+<svelte:head>
+	<title>Rechercher</title>
+</svelte:head>
+
 <div class="wrapper">
+
 	<div class="search">
-		<SearchBar/>
+		<SearchBar />
 	</div>
+
 	<div class="aside">
-		<Aside/>
+		<Aside />
 	</div>
+
 	<div class="result">
 		<!-- <Aside/> -->
-		<ResultList/>
+		<ResultList />
 	</div>
 </div>
 
 <style>
-/* 
+	/* 
 .result {
   background: deepskyblue;
 }
@@ -50,22 +56,39 @@
 	background: green;
 } */
 
-.wrapper {
-  display: flex;  
-  flex-flow: row wrap;
-  font-weight: bold;
-  text-align: center; 
-}
+	.wrapper {
+		display: flex;
+		flex-flow: row wrap;
+		/* font-weight: bold;
+		text-align: center; */
+	}
 
-.wrapper > * {
-  /* padding: 10px; */
-  flex: 1 100%;
-}
-  /* .search  { flex: 3 0px; } */
-  	.aside { flex: 1 1 auto; } 
-   .result { flex: 1 1 auto; }
-  /* .search { order: 0; } 
-  .aside { order: 1; } 
-  .result { order: 2; } */
+	.wrapper > * {
+		/* padding: 10px; */
+		flex: 1 100%;
+	}
+	/* .search  { flex: 3 0px; } */
+	.aside {
+		position: sticky; /* Make the sidebar immovable*/
+		/* position: -webkit-sticky; */
+		z-index: 1; /*Side bar stays at the top*/
+		top: 0rem;
+		/* border-style: solid;
+		border: 1px;
+		border-color: red;
+		border-style: solid; */
+		max-width: 15%;
+		align-self: flex-start;
+	}
 
-</style>
+	.result {
+		/* flex: 1 1 auto; */
+		/* border: 1px;
+		border-color: blue;
+		border-style: solid; */
+		max-width: 85%;
+	}
+	.search { order: 0;  } 
+	.aside { order: 1; } 
+	.result { order: 2;  }
+</style>