Responsive design

This commit is contained in:
Brieuc Dubois 2024-01-03 04:37:21 +01:00
parent 157cd74826
commit bf6873d261
7 changed files with 94 additions and 14 deletions

View File

@ -4,6 +4,7 @@
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev",
"dev-host": "vite dev --host",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"test": "playwright test", "test": "playwright test",

View File

@ -0,0 +1,3 @@
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 6L15 12L9 18" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 217 B

View File

@ -0,0 +1,19 @@
<!-- <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M4 6H20M4 12H14M4 18H9"
stroke="#fff"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg> -->
<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9 6L15 12L9 18"
stroke="#fff"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>

After

Width:  |  Height:  |  Size: 469 B

View File

@ -56,9 +56,7 @@
currentChoice={view?.primary_tag_id} currentChoice={view?.primary_tag_id}
/> />
</div> </div>
<div>
<button class:disabled={true}>Sub-group</button> <button class:disabled={true}>Sub-group</button>
</div>
<button class:disabled={true}>Filter</button> <button class:disabled={true}>Filter</button>
<button class:disabled={true}>Sort</button> <button class:disabled={true}>Sort</button>
<button id="newButton" on:click={async () => cards.add(project.id, getEmptyTags())}>New</button> <button id="newButton" on:click={async () => cards.add(project.id, getEmptyTags())}>New</button>
@ -67,27 +65,29 @@
<style lang="less"> <style lang="less">
header { header {
margin: 0 50px;
padding: 20px 0; padding: 20px 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap;
border-bottom: 2px solid #444; border-bottom: 2px solid #444;
} }
h2 { h2 {
font-size: 40px; font-size: 30px;
} }
nav { nav {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 7px;
button { button {
cursor: pointer; cursor: pointer;
color: #aaa; color: #aaa;
padding: 5px 10px; padding: 5px 10px;
margin-left: 10px;
border-radius: 7px; border-radius: 7px;
border: none; border: none;
background-color: transparent; background-color: transparent;

View File

@ -67,13 +67,21 @@
section { section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; height: 100vh;
margin: 0 40px; transition: all 0.3s ease-in-out;
width: 100vw;
@media (min-width: 800px) {
margin-left: 250px;
width: calc(100vw - 250px);
}
} }
.grid { .grid {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex: 1; flex: 1;
overflow: scroll;
padding: 0 40px;
} }
</style> </style>

View File

@ -7,12 +7,15 @@
import projectTags from '../stores/projectTags'; import projectTags from '../stores/projectTags';
import EditIcon from './icons/editIcon.svelte'; import EditIcon from './icons/editIcon.svelte';
import { get } from 'svelte/store'; import { get } from 'svelte/store';
import MenuOpener from './icons/menu_opener.svelte';
export let project: Project; export let project: Project;
let viewEditId: number; let viewEditId: number;
let viewEditValue: string; let viewEditValue: string;
let isVisible = false;
onMount(async () => { onMount(async () => {
await views.init(project.id); await views.init(project.id);
@ -46,7 +49,7 @@
} }
</script> </script>
<nav> <nav class:hidden={!isVisible}>
<div> <div>
<div id="branding"> <div id="branding">
<span id="title">Focus.</span> <span id="title">Focus.</span>
@ -119,23 +122,68 @@
</div> </div>
</div> </div>
</nav> </nav>
<button class="toggle" class:open={isVisible} on:click={() => (isVisible = !isVisible)}>
<MenuOpener />
</button>
<style lang="less"> <style lang="less">
nav { nav {
min-width: 300px; position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 250px;
background-color: #273049; background-color: #273049;
height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
font-size: 22px; font-size: 22px;
transition: transform 0.3s ease-in-out;
}
.toggle {
visibility: hidden;
position: fixed;
top: 5px;
left: 5px;
border-radius: 50%;
width: 50px;
height: 50px;
transform: scale(1);
transition-property: left, transform;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
&:hover {
cursor: pointer;
background-color: #fff2;
}
&:active {
background-color: #fff2;
}
&.open {
left: 195px;
transform: scaleX(-1);
}
}
@media (max-width: 800px) {
nav.hidden {
transform: translateX(-100%);
}
.toggle {
visibility: visible;
}
} }
#branding { #branding {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: end;
justify-content: space-between; gap: 10px;
padding: 20px; padding: 20px;
#title { #title {
@ -143,8 +191,9 @@
} }
#version { #version {
font-size: 30px; font-size: 25px;
color: #aaa; color: #aaa;
margin-bottom: 3px;
} }
} }

View File

@ -1 +1 @@
export const backend = 'http://127.0.0.1:3000'; export const backend = process.env.BACKEND || 'http://127.0.0.1:3000';