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

View File

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

View File

@ -7,12 +7,15 @@
import projectTags from '../stores/projectTags';
import EditIcon from './icons/editIcon.svelte';
import { get } from 'svelte/store';
import MenuOpener from './icons/menu_opener.svelte';
export let project: Project;
let viewEditId: number;
let viewEditValue: string;
let isVisible = false;
onMount(async () => {
await views.init(project.id);
@ -46,7 +49,7 @@
}
</script>
<nav>
<nav class:hidden={!isVisible}>
<div>
<div id="branding">
<span id="title">Focus.</span>
@ -119,23 +122,68 @@
</div>
</div>
</nav>
<button class="toggle" class:open={isVisible} on:click={() => (isVisible = !isVisible)}>
<MenuOpener />
</button>
<style lang="less">
nav {
min-width: 300px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 250px;
background-color: #273049;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
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 {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
align-items: end;
gap: 10px;
padding: 20px;
#title {
@ -143,8 +191,9 @@
}
#version {
font-size: 30px;
font-size: 25px;
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';