improved css for stock view

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/Components/Menu.svelte

@@ -10,6 +10,7 @@ import TimeRecorder from './TimeRecorder.svelte';
 let key = $state(null);
 const router  = useTinyRouter();
 const modules = $state([]);
+let expand = $state(false);
 
 async function fetchModules(){
     const url  = `${location.protocol}//${location.host.replace('5173','8080')}/legacy/user/modules`;
@@ -27,6 +28,7 @@ async function fetchModules(){
 
 function onclick(e){
     e.preventDefault();
+    expand = false;
     let href = e.target.getAttribute('href');
     if (href) router.navigate(href);
     return false;
@@ -34,6 +36,7 @@ function onclick(e){
 
 async function search(e){
     e.preventDefault();
+    expand = false;
     router.navigate(`/search?key=${key}`);
     return false;
 }
@@ -47,11 +50,12 @@ onMount(fetchModules);
     }
 </style>
 
-<nav>
+<nav class={expand?"":"collapsed"}>
     <form onsubmit={search}>
         <input type="text" bind:value={key} />
         <button type="submit">{t('search')}</button>
     </form>
+	<button class="symbol" onclick={e => expand = !expand}></button>
     <a href="/user"     {onclick} class="user">{t('users')}</a>
     <a href="/company"  {onclick} class="company">{t('companies')}</a>
     <a href="/project"  {onclick} class="project">{t('projects')}</a>
@@ -72,7 +76,7 @@ onMount(fetchModules);
     {#if module.name.trim()}<a href={module.url}>{module.name}</a>{/if}
     {/each}
     {#if user.name }
-    <a onclick={logout}>{t('logout_user',{user:user.name})}</a>
+    <a class="logout" onclick={logout}>{t('logout_user',{user:user.name})}</a>
     {/if}
     <TimeRecorder />
 </nav>

frontend/src/routes/task/EasyList.svelte

@@ -73,7 +73,7 @@
     }
 
     function measured(evt,duration,d){
-        if (d > 100) return;
+        if (d > 10) return;
         if (duration < 500){
             onclick(evt);
         } else {

web/src/main/resources/web/css/bloodshed-color.css

@@ -307,4 +307,11 @@ tr:hover .taglist .tag button {
 
 .easylist .filter{
 	background: black;
+}
+
+@media screen and (max-width: 900px) {
+	#app nav a{
+		background: black;
+		color: red;
+	}
 }

web/src/main/resources/web/css/bloodshed.css

@@ -426,6 +426,48 @@ a.wikilink{
     float: right;
 }
 
+@media screen and (min-width: 900px) {
+	#app nav button.symbol{
+		display: none;
+	}
+}
+
+@media screen and (max-width: 900px) {
+	body{
+		padding-top: 13px;
+	}
+	#app nav{
+        grid-template-columns: 33% 34% 33%;
+		display: grid;
+		padding: 0 10px;
+		position: absolute;
+		left: 0;
+		right: 0;
+
+    }
+    #app nav form{
+    	grid-column-end: span 2;
+    }
+    #app nav .logout{
+    	grid-column-end: 4;
+    }
+
+	#app nav.collapsed a{
+		display: none;
+	}
+
+	#app nav a {
+	  font-size: 19px !important;
+	  display: grid;
+	  text-align: center;
+	  border: 1px solid;
+	  margin: 5px;
+	  padding: 15px 0;
+	  border-radius: 7px;
+	}
+}
+
+
 @media screen and (max-width: 600px) {
     .grid2{
         display: grid;
@@ -455,6 +497,15 @@ a.wikilink{
 	.easylist input{
 		font-size: 20px;
 	}
+	#app nav{
+		grid-template-columns: auto auto;
+	}
+	#app nav form{
+		grid-column-end: span 1;
+	}
+    #app nav .logout{
+    	grid-column-end: 3;
+    }
 }
 
 fieldset.vcard{

web/src/main/resources/web/css/default-color.css

@@ -297,4 +297,11 @@ tr:hover .taglist .tag button {
 
 .easylist .filter{
 	background: black;
+}
+
+@media screen and (max-width: 900px) {
+	#app nav a{
+		background: black;
+		color: orange;
+	}
 }

web/src/main/resources/web/css/default.css

@@ -504,8 +504,75 @@ a.wikilink{
     float: right;
 }
 
+@media screen and (min-width: 900px) {
+	#app nav button.symbol{
+		display: none;
+	}
+}
+
+@media screen and (max-width: 900px) {
+	body{
+		padding-top: 30px;
+	}
+	#app nav{
+        grid-template-columns: 33% 34% 33%;
+		display: grid;
+		padding: 0 10px;
+		position: absolute;
+		left: 0;
+		right: 0;
+    }
+    #app nav form{
+    	grid-column-end: span 2;
+    }
+    #app nav .logout{
+    	grid-column-end: 4;
+    }
+
+	#app nav.collapsed a{
+		display: none;
+	}
+
+	#app nav a {
+	  font-size: 19px !important;
+	  display: grid;
+	  text-align: center;
+	  border: 1px solid;
+	  margin: 5px;
+	  border-radius: 7px;
+	}
+
+	#app nav a::before {
+      font-size: 30px;
+    }
+    .grid3 {
+        grid-template-columns: auto auto;
+    }
+
+    .grid3 .properties{
+    	grid-column-end: span 2;
+    	order: 1;
+    }
+    .grid3 .tags{
+		order: 2;
+	}
+    .grid3 .notes{
+    	grid-column-end: span 2;
+    	order: 3;
+    }
+
+	.grid3 .locations{
+		order: 5;
+	}
+	.grid3 .items{
+		order: 6;
+	}
+}
+
+
 @media screen and (max-width: 600px) {
-    .grid2{
+    .grid2,
+    .grid3{
         display: grid;
         grid-template-columns: auto;
     }
@@ -533,6 +600,18 @@ a.wikilink{
 	.easylist input{
 		font-size: 20px;
 	}
+	#app nav{
+		grid-template-columns: auto auto;
+	}
+	#app nav form,
+    .grid3 .notes,
+    .grid3 .tags,
+    .grid3 .properties{
+		grid-column-end: span 1;
+	}
+    #app nav .logout{
+    	grid-column-end: 3;
+    }
 }
 
 fieldset.vcard{

web/src/main/resources/web/css/winter-color.css

@@ -282,4 +282,11 @@ tr:hover .taglist .tag button {
 .easylist fieldset {
 	border-color: blue;
 	color: blue;
+}
+
+@media screen and (max-width: 900px) {
+	#app nav a{
+		background: white;
+		color: blue;
+	}
 }

web/src/main/resources/web/css/winter.css

@@ -426,6 +426,48 @@ a.wikilink{
     float: right;
 }
 
+@media screen and (min-width: 900px) {
+	#app nav button.symbol{
+		display: none;
+	}
+}
+
+@media screen and (max-width: 900px) {
+	body{
+		padding-top: 13px;
+	}
+	#app nav{
+        grid-template-columns: 33% 34% 33%;
+		display: grid;
+		padding: 0 10px;
+		position: absolute;
+		left: 0;
+		right: 0;
+
+    }
+    #app nav form{
+    	grid-column-end: span 2;
+    }
+    #app nav .logout{
+    	grid-column-end: 4;
+    }
+
+	#app nav.collapsed a{
+		display: none;
+	}
+
+	#app nav a {
+	  font-size: 19px !important;
+	  display: grid;
+	  text-align: center;
+	  border: 1px solid;
+	  margin: 5px;
+	  padding: 15px 0;
+	  border-radius: 7px;
+	}
+}
+
+
 @media screen and (max-width: 600px) {
     .grid2{
         display: grid;
@@ -455,6 +497,15 @@ a.wikilink{
 	.easylist input{
 		font-size: 20px;
 	}
+	#app nav{
+		grid-template-columns: auto auto;
+	}
+	#app nav form{
+		grid-column-end: span 1;
+	}
+    #app nav .logout{
+    	grid-column-end: 3;
+    }
 }
 
 fieldset.vcard{