chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: responsive (#180)

Browse source 
* refactor: can open one dropdown whe lt.md

* style: update MainLayout background color and fix avatar border class name

* feat: add touch position binding for dropdown in ProfileMenu

* refactor: enhance icon styling in DrawerComponent

* fix: update screen size conditions

* feat: add responsive search and filter functionality in MainPage

* feat: update styling and functionality in BasicInformation and MainPage components

* feat: package view mode improve layout and responsiveness

* feat: improve layout and responsiveness of ProfileBanner component

* feat: enhance TreeView component with improved icon layout and cursor pointer styling

* feat: update DialogForm component to prevent text wrapping in the center column

* feat: enhance FormDocument, PriceDataComponent, and BasicInfoProduct components with layout and styling improvements

* feat: enhance ProfileBanner dark tab

* feat: 02 => responsive & responsibleArea type

* fix: layout header bg condition & 02 filter col

* feat: 04 flow => add AddButton component and enhance layout in FormFlow and FlowDialog

* feat: 07 => enhance layout and responsiveness

* refactor: simplify header structure and improve layout consistency

* fix: improve text color in ItemCard and adjust responsive breakpoints in product service group

* refactor: 05 => enhance layout responsiveness and improve class bindings in quotation components

* refactor: enhance styling and improve props flexibility in dialog and select components

* refactor: 05 => enhance layout responsiveness in quotation components

* refactor: 05 => enhance layout responsiveness

* refactor: 05 => formWorkerAdd

* refactor: 05 => formWorkerAdd Product table

* refactor: 05 => improve layout responsiveness and enhance component structure

* refactor: enhance grid view handling and improve component imports

* refactor: improve column classes for better layout consistency

* refactor: 09 => enhance layout structure and improve responsiveness in task order views

* refactor: 10 => enhance invoice main page layout and improve component interactions

* refactor: 13 => enhance receipt main page layout and improve component interactions

* refactor: 11 => enhance layout and improve responsiveness in credit note pages

* refactor: 01 => screen.sm search & filter

* refactor: 01 => improve layout responsiveness and fix variable naming in branch management forms

---------

Co-authored-by: puriphatt <puriphat@frappet.com>
This commit is contained in:
Methapon Metanipat 2025-01-27 10:39:53 +07:00 • committed by GitHub
parent 79ec995547
commit e0c1725001
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
45 changed files with 993 additions and 609 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/shared/SelectInput.vue
View file

@ -16,8 +16,8 @@ const props = withDefaults(
id?: string;
label?: string;
option: T[];
optionLabel?: keyof T;
optionValue?: keyof T;
optionLabel?: keyof T | string;
optionValue?: keyof T | string;
placeholder?: string;
hideSelected?: boolean;

6
src/components/shared/SelectZone.vue
View file

@ -74,16 +74,16 @@ function assignSelect(to: unknown[], from: unknown[]) {
<template>
<section class="full-width column">
<header
class="row items-center no-wrap q-px-md q-py-sm"
class="row items-center q-px-md q-py-sm"
:class="{ 'bordered surface-3 ': borderSearchSection }"
>
<div class="col"><slot name="top"></slot></div>
<div class="col-12 col-md"><slot name="top"></slot></div>
<q-input
for="input-search"
outlined
dense
:label="$t('general.search')"
class="q-ml-auto"
class="col-12 col-md-3"
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="search"
debounce="300"

27
src/components/shared/TreeView.vue
View file

@ -118,6 +118,9 @@ function visibleNode(text: string, node: Node, ancestor?: Node[]): boolean {
<template v-for="(node, i) in nodes" :key="i">
<div
class="tree-item"
:class="{
'cursor-pointer': node.children ? true : undefined,
}"
v-if="filterText ? visibleNode(filterText, node, ancestorNode) : true"
>
<slot
@ -205,19 +208,21 @@ function visibleNode(text: string, node: Node, ancestor?: Node[]): boolean {
/>
</label>
<div
class="item__icon flex items-center justify-center"
:style="`background: ${node.bg || dec?.bg}; color: ${node.fg || dec?.fg}; height: ${iconSize}; width: ${iconSize}`"
>
<div>
<div
class="flex items-center justify-center"
:style="`height: calc(${iconSize} - 40%); width: calc(${iconSize} - 40%)`"
class="item__icon flex items-center justify-center"
:style="`background: ${node.bg || dec?.bg}; color: ${node.fg || dec?.fg}; height: ${iconSize}; width: ${iconSize}`"
>
<Icon
v-if="(node.icon && dec && dec.icon) || (dec && dec.icon)"
:icon="node.icon || dec.icon"
class="full-width full-height"
/>
<div
class="flex items-center justify-center"
:style="`height: calc(${iconSize} - 40%); width: calc(${iconSize} - 40%)`"
>
<Icon
v-if="(node.icon && dec && dec.icon) || (dec && dec.icon)"
:icon="node.icon || dec.icon"
class="full-width full-height"
/>
</div>
</div>
</div>