Responsive design
This commit is contained in:
parent
157cd74826
commit
bf6873d261
|
|
@ -4,6 +4,7 @@
|
|||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"dev-host": "vite dev --host",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"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}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<button class:disabled={true}>Sub-group</button>
|
||||
</div>
|
||||
<button class:disabled={true}>Sub-group</button>
|
||||
<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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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