szkielet wygladau dla mobile
This commit is contained in:
196
frontend/src/components/OrderCard.vue
Normal file
196
frontend/src/components/OrderCard.vue
Normal 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">→</span>
|
||||
<div class="step">IZ</div>
|
||||
<span class="arrow">→</span>
|
||||
<div class="step">AK</div>
|
||||
<span class="arrow">→</span>
|
||||
<div class="step">LD</div>
|
||||
<span class="arrow">→</span>
|
||||
<div class="step">LD</div>
|
||||
<span class="arrow">→</span>
|
||||
<div class="step">LD</div>
|
||||
<span class="arrow">→</span>
|
||||
<div class="step">LD</div>
|
||||
<span class="arrow">→</span>
|
||||
<div class="step">LD</div>
|
||||
<span class="arrow">→</span>
|
||||
<div class="step">LD</div>
|
||||
<span class="arrow">→</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>
|
||||
@@ -1,13 +1,473 @@
|
||||
<template>
|
||||
<q-page class="flex flex-center">
|
||||
<img
|
||||
alt="Quasar logo"
|
||||
src="~assets/quasar-logo-vertical.svg"
|
||||
style="width: 200px; height: 200px"
|
||||
<q-page class="content">
|
||||
<section class="filters">
|
||||
<div class="search-field">
|
||||
<input class="input" placeholder="Search orders or models..." type="text" />
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import OrderCard from 'src/components/OrderCard.vue'
|
||||
|
||||
//
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user