bartool/duck-prod-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

szkielet wygladau dla mobile

Browse Source
This commit is contained in:
bartool
2026-03-29 19:25:42 +02:00
parent 9a7cb88344
commit 550db68a5f
2 changed files with 662 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
frontend/src/components/OrderCard.vue Normal file
View File

@@ -0,0 +1,196 @@
<template>
<div class="my-order-card">
<div class="mark"></div>
<div class="card-head">
<div class="order-info">
<span class="order-id">0112/2025/12</span>
<h3 class="model">Regius 6 Core</h3>
<p class="client">Mayo Stock</p>
<div class="list-month">
<span class="month">IV</span>
<span class="month">2025-4</span>
</div>
<span class="finish">MIX</span>
</div>
</div>
<div class="flow">
<div class="flow-head">
<span class="label">Etapy Produckji</span>
<div class="line"></div>
</div>
<div class="steps no-scrollbar">
<div class="step">B</div>
<span class="arrow">&#x2192;</span>
<div class="step">IZ</div>
<span class="arrow">&#x2192;</span>
<div class="step">AK</div>
<span class="arrow">&#x2192;</span>
<div class="step">LD</div>
<span class="arrow">&#x2192;</span>
<div class="step">LD</div>
<span class="arrow">&#x2192;</span>
<div class="step">LD</div>
<span class="arrow">&#x2192;</span>
<div class="step">LD</div>
<span class="arrow">&#x2192;</span>
<div class="step">LD</div>
<span class="arrow">&#x2192;</span>
<div class="step">LD</div>
<span class="arrow">&#x2192;</span>
<button class="step add">
<q-icon class="add-icon" name="add" />
</button>
</div>
</div>
</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.my-order-card {
overflow: hidden;
position: relative;
padding: 1.25rem;
background: var(--my-surface-container);
// border-left: 2px solid transparent;
border-radius: var(--my-radius-lg);
transition: background-color var(--my-transition);
&:hover {
background: var(--my-surface-container-high);
// border-left-color: color-mix(in srgb, var(--my-primary) 30%, transparent);
.mark {
background: color-mix(in srgb, var(--my-primary) 80%, transparent);
}
}
.mark {
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: transparent;
transition: background-color var(--my-transition);
}
.order-info {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
'order-id month month'
'model model finish'
'client client finish';
gap: 4px;
.order-id {
grid-area: order-id;
display: block;
color: var(--my-primary);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: -0.05em;
}
.model {
grid-area: model;
margin: 0;
color: var(--my-on-surface);
font-size: 1.125rem;
font-weight: 700;
line-height: 1.75rem;
letter-spacing: -0.025em;
}
.client {
grid-area: client;
margin: 0;
color: var(--my-on-surface-variant);
font-size: 0.875rem;
font-weight: 500;
}
.list-month {
grid-area: month;
justify-self: end;
display: flex;
flex-wrap: nowrap;
flex-direction: row-reverse;
gap: 5px;
.month {
min-width: 50px;
text-align: center;
padding: 0.1rem 0.5rem;
color: var(--my-tertiary);
background: var(--my-surface-container-highest);
border-radius: var(--my-radius-sm);
// border: 1px solid var(--my-tertiary);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: -0.05em;
text-transform: uppercase;
}
}
.finish {
grid-area: finish;
justify-self: end;
align-self: center;
color: var(--my-on-surface-variant);
display: block;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
text-align: center;
padding: 0.5rem;
border: 1px solid var(--my-surface-container-highest);
border-radius: var(--my-radius-sm);
}
}
.flow {
margin-top: 1.5rem;
.flow-head {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
.label {
color: var(--my-on-surface-variant);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.line {
flex: 1;
height: 1px;
background: color-mix(in srgb, var(--my-outline-variant) 30%, transparent);
}
}
.steps {
display: flex;
align-items: center;
gap: 0.5rem;
padding-bottom: 0.5rem;
overflow-x: auto;
.arrow {
color: var(--my-outline-variant);
font-size: 0.75rem;
}
.step {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
font-size: 0.75rem;
font-weight: 700;
color: var(--my-primary);
background: color-mix(in srgb, var(--my-primary-dim) 20%, transparent);
border: 1px solid color-mix(in srgb, var(--my-primary) 30%, transparent);
border-radius: var(--my-radius-sm);
}
}
}
}
</style>

470
frontend/src/pages/IndexPage.vue
View File

@@ -1,13 +1,473 @@
<template> <template>
<q-page class="flex flex-center"> <q-page class="content">
<img <section class="filters">
alt="Quasar logo" <div class="search-field">
src="~assets/quasar-logo-vertical.svg" <input class="input" placeholder="Search orders or models..." type="text" />
style="width: 200px; height: 200px" <div class="icon-wrap">
<span class="material-symbols-outlined" data-icon="tune">tune</span>
</div>
</div>
<div class="month-tabs no-scrollbar">
<button class="tab active">All</button>
<button class="tab">Jan</button>
<button class="tab">Feb</button>
<button class="tab">Mar</button>
<button class="tab">Apr</button>
<button class="tab">May</button>
<button class="tab">Jun</button>
</div>
</section>
<div class="stats">
<div class="stat-card primary">
<span class="label">In Progress</span>
<span class="value">14 Units</span>
</div>
<div class="stat-card tertiary">
<span class="label">Avg Lead Time</span>
<span class="value">22 Days</span>
</div>
</div>
<div class="orders">
<order-card></order-card>
<div class="order-card">
<div class="card-head">
<div class="copy">
<span class="order-id">0026/2025/1</span>
<h3 class="client">Regius 6 CLS</h3>
<p class="model">Mayo Stock</p>
</div>
<div class="meta">
<span class="month">Month 08</span>
<div class="finish">
<span
class="material-symbols-outlined icon"
data-icon="flare"
style="font-variation-settings: 'FILL' 1"
>flare</span
> >
<span class="label">Gloss</span>
</div>
</div>
</div>
<div class="flow">
<div class="flow-head">
<span class="label">Production Flow</span>
<div class="line"></div>
</div>
<div class="steps no-scrollbar">
<div class="step done"><span class="text">ST</span></div>
<span class="arrow">→</span>
<div class="step done"><span class="text">IS</span></div>
<span class="arrow">→</span>
<div class="step current"><span class="text">AC</span></div>
<span class="arrow">→</span>
<button class="step add" type="button">
<!-- <span class="material-symbols-outlined add-icon" data-icon="add">add</span> -->
<q-icon class="add-icon" name="add" />
</button>
</div>
</div>
</div>
<div class="order-card">
<div class="card-head">
<div class="copy">
<span class="order-id">#2024-079</span>
<h3 class="client">Annie Clark</h3>
<p class="model">St. Vincent Signature Relic</p>
</div>
<div class="meta">
<span class="month">Month 07</span>
<span class="month">Month 07</span>
<div class="finish">
<span class="material-symbols-outlined icon" data-icon="texture">texture</span>
<span class="label">Satin</span>
</div>
</div>
</div>
<div class="flow">
<div class="flow-head">
<span class="label">Production Flow</span>
<div class="line"></div>
</div>
<div class="steps no-scrollbar">
<div class="step done"><span class="text">ST</span></div>
<span class="arrow">→</span>
<div class="step done"><span class="text">IS</span></div>
<span class="arrow">→</span>
<div class="step done"><span class="text">AC</span></div>
<span class="arrow">→</span>
<div class="step done"><span class="text">LD</span></div>
<span class="arrow">→</span>
<button class="step add" type="button">
<span class="material-symbols-outlined add-icon" data-icon="add">add</span>
</button>
</div>
</div>
</div>
<div class="order-card urgent">
<div class="card-head">
<div class="copy">
<span class="order-id order-id-error">#2024-085 [URGENT]</span>
<h3 class="client">Kevin Parker</h3>
<p class="model">Psychedelic Dream Strut</p>
</div>
<div class="meta">
<span class="month month-error">Month 08</span>
<div class="finish">
<span class="material-symbols-outlined icon" data-icon="layers">layers</span>
<span class="label">Mix</span>
</div>
</div>
</div>
<div class="flow">
<div class="flow-head">
<span class="label">Production Flow</span>
<div class="line"></div>
</div>
<div class="steps no-scrollbar">
<div class="step alert"><span class="text">ST</span></div>
<span class="arrow">→</span>
<div class="step waiting">
<span class="material-symbols-outlined wait-icon" data-icon="hourglass_empty"
>hourglass_empty</span
>
</div>
</div>
</div>
</div>
</div>
</q-page> </q-page>
</template> </template>
<script setup> <script setup>
import OrderCard from 'src/components/OrderCard.vue'
// //
</script> </script>
<style lang="scss" scoped>
@mixin meta-label {
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.content {
padding: 1rem;
}
.filters {
display: grid;
gap: 1rem;
margin-bottom: 1.5rem;
.search-field {
position: relative;
.input {
width: 100%;
padding: 0.75rem 3rem 0.75rem 1rem;
color: var(--my-on-surface);
background: var(--my-surface-container-highest);
border: 0;
border-bottom: 2px solid var(--my-outline-variant);
transition: border-color var(--my-transition);
&:focus {
outline: none;
border-bottom-color: var(--my-primary);
}
&::placeholder {
color: var(--my-outline);
}
}
.icon-wrap {
position: absolute;
top: 50%;
right: 1rem;
color: var(--my-on-surface-variant);
transform: translateY(-50%);
}
}
.month-tabs {
display: flex;
gap: 0.5rem;
padding-bottom: 0.5rem;
overflow-x: auto;
}
.tab {
flex: 0 0 auto;
padding: 0.5rem 1rem;
color: var(--my-on-surface-variant);
background: var(--my-surface-container);
border-radius: var(--my-radius-md);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
transition:
background-color var(--my-transition),
color var(--my-transition),
transform var(--my-transition);
&:hover {
background: var(--my-surface-container-high);
}
&:active {
transform: scale(0.95);
}
&.active {
color: var(--my-on-primary);
background: var(--my-primary-dim);
}
}
}
.stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
.stat-card {
padding: 1rem;
background: var(--my-surface-container-low);
border-left: 2px solid var(--my-primary);
border-radius: var(--my-radius-lg);
.label {
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
display: block;
margin-bottom: 0.25rem;
color: var(--my-on-surface-variant);
}
.value {
color: var(--my-white);
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.025em;
}
&.tertiary {
border-left-color: var(--my-tertiary);
}
}
}
.orders {
display: grid;
gap: 1rem;
}
.order-card {
padding: 1.25rem;
background: var(--my-surface-container);
border-bottom: 2px solid transparent;
border-radius: var(--my-radius-lg);
transition:
background-color var(--my-transition),
border-color var(--my-transition);
&:hover {
background: var(--my-surface-container-high);
border-bottom-color: color-mix(in srgb, var(--my-primary) 30%, transparent);
}
&.urgent {
border-bottom-color: var(--my-error-dim);
}
.card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.copy {
display: grid;
gap: 0.25rem;
}
.order-id {
display: block;
color: var(--my-primary);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: -0.05em;
&.order-id-error {
color: var(--my-error);
}
}
.client {
margin: 0;
color: var(--my-on-surface);
font-size: 1.125rem;
font-weight: 700;
line-height: 1.75rem;
letter-spacing: -0.025em;
}
.model {
margin: 0;
color: var(--my-on-surface-variant);
font-size: 0.875rem;
font-weight: 500;
}
.meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.5rem;
}
.month {
padding: 0.25rem 0.5rem;
color: var(--my-tertiary);
background: var(--my-surface-container-highest);
border-radius: var(--my-radius-sm);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: -0.05em;
text-transform: uppercase;
&.month-error {
color: var(--my-error);
background: color-mix(in srgb, var(--my-error-container) 20%, transparent);
}
}
.finish {
color: var(--my-on-surface-variant);
text-align: center;
.label {
display: block;
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
}
}
.flow {
margin-top: 1.5rem;
}
.flow-head {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
.label {
@include meta-label;
color: var(--my-on-surface-variant);
}
.line {
flex: 1;
height: 1px;
background: color-mix(in srgb, var(--my-outline-variant) 30%, transparent);
}
}
.steps {
display: flex;
align-items: center;
gap: 0.5rem;
padding-bottom: 0.5rem;
overflow-x: auto;
}
.arrow {
color: var(--my-outline-variant);
font-size: 0.75rem;
}
.step {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 2.5rem;
height: 2.5rem;
background: var(--my-surface-container-highest);
border: 1px solid color-mix(in srgb, var(--my-outline-variant) 30%, transparent);
border-radius: var(--my-radius-sm);
.text {
color: var(--my-on-surface-variant);
font-size: 0.75rem;
font-weight: 700;
}
&.done {
background: color-mix(in srgb, var(--my-primary-dim) 20%, transparent);
border-color: color-mix(in srgb, var(--my-primary) 30%, transparent);
.text {
color: var(--my-primary);
}
}
// &.current {
// animation: pulse-soft 1.8s ease-in-out infinite;
// }
&.add {
background: var(--my-surface-container-lowest);
border-style: dashed;
border-color: var(--my-outline-variant);
transition:
background-color var(--my-transition),
transform var(--my-transition);
&:hover {
background: var(--my-surface-container-highest);
}
&:active {
transform: scale(0.9);
}
}
&.alert {
background: var(--my-error-container);
border-color: var(--my-error);
.text {
color: var(--my-on-error);
}
}
&.waiting {
border-style: dashed;
}
.add-icon,
.wait-icon {
color: var(--my-on-surface-variant);
font-size: 0.875rem;
}
}
}
</style>