Responsive design
This commit is contained in:
parent
157cd74826
commit
bf6873d261
|
@ -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",
|
||||||
|
|
|
@ -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 |
|
@ -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 |
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
export const backend = 'http://127.0.0.1:3000';
|
export const backend = process.env.BACKEND || 'http://127.0.0.1:3000';
|
||||||
|
|
Loading…
Reference in New Issue