From 7918610072967441ea2b71ac1da3da5ea93a3605 Mon Sep 17 00:00:00 2001 From: shokouhi Date: Sat, 4 Jul 2020 13:48:53 +0430 Subject: [PATCH] responsive --- .rnd | Bin 1024 -> 1024 bytes package.json | 5 +- .../show/views/TestResult/ShowTestResult.vue | 20 ++- .../js/vue/components/modal/cycle/Show.vue | 19 ++- .../js/vue/components/modal/package/Show.vue | 8 +- .../vue/components/modal/testresult/Show.vue | 72 ++++++--- resources/js/vue/main.js | 5 +- resources/js/vue/styles/css/Assets/Main.scss | 150 +++++++++++++++++- resources/js/vue/views/Cycle/List.vue | 35 +++- resources/js/vue/views/Item/List.vue | 35 +++- resources/js/vue/views/Label/List.vue | 34 +++- resources/js/vue/views/MedicalCenter/List.vue | 27 +++- resources/js/vue/views/Package/List.vue | 38 ++++- resources/js/vue/views/TestResult/List.vue | 109 +++++++++++-- resources/js/vue/views/TestResult/Show.vue | 14 +- resources/js/vue/views/TestType/List.vue | 28 +++- resources/js/vue/views/User/List.vue | 50 ++++-- 17 files changed, 517 insertions(+), 132 deletions(-) diff --git a/.rnd b/.rnd index 6a9ba040bf791b7cc286946f24d495e485c16b1b..d2fab28bac6b59b3fdf144a8c2ad903e7bf7c23a 100644 GIT binary patch literal 1024 zcmV+b1poWHnMCbcm~nq2U=^xWvpr+Uu{>9gLpN|m7VLDf4&^UHC&Z&_0xaN4)x4T3 zBw2NLkSAfj7GAB}@BLJ+*;Og-~uZHDA74(7?y+R+=Uc1j_jGJDz24Tf?AXA(2ks+h*WXCC?F1uHX%Sv|}QfI#5YVBR|zPJrqF01DL+8Df!=X7C6o zVpmUr(YYR39MpT<4~2avM@fPRBVy!;=HQ9g$ZQ30^3zsQb||n<0h5f-ksK5d*#Nun z?mkYM{XB5J;YvHgob{>Lxt~HJ;3PNSLM?-#n!vdJhF@TXWbE(z>yRKLn&tKSy-V?yWozgzze{HD%|~{Yte5c&jw1;@XH0pr2W}FR zdoIAhfXa3wR>t@+A{FOTY?wb?4X8x$4ga2T__r+MEDAfVcq{v3%VfjZNnT8+bu6zl>5pbgT0q?b zCwZLAcF#hz54V7sR?D{ZSSeLyTc-tia3F3E zqKAxhH~*^R9<9qSo;1(8T4u3*xpUfTw6q1FgW&=4bMx~wDjk}wuQHcBWoH+|77$Dw z(~){Q;<3s<9(WGsG@P3dqr~VtW6C!RGwS`)eI?QZ{#$J#o{U-O9X+Sjtt1dtt|Dm6 zQk8XLzUi@fNa0^aNFb`LsRmXw9-$ICfb@kl$!>x5_^_)v4Fc|;4zQu+WgRDn`P&6> zJ1hJp(<7%On!|`JLs37OL1W5?Q?&mFYm1V5T^6FtIx!(uvPwF^W8u_zB;g03w{7i#L4x5<

xSpw%&x~6=9)MbSYDEFW&kaTq~LZ4?biVoV#IT66bcMF7hEXR0>+%!6{j;l z`V~lJAt4sc-8n{8@cD|gH4tW~>Y2AGPtVi^OjAJ}C@3p}Xks#fZOgLLu?Mx0sfJ{W zw!o3x+p|cDdY2WSJy_Z|FMTh&?}9|EtCX|tf*4DS?v_+9f6XijhtZA*b$p&-0Z z%LixnNAMJ%bXv~XXa#$#f6`z39SRv2TIsBbe0r*y8?@CL4|u=Mf$`TH17)n0HRI}O?&R#2pYB3|1_1R#)#cvKH~TOpGdG5cKTlJ@DxH+9z=H3r zMnZlE6JlL0&{N)OK2fFgubH*sb6c6nSDjN!!vM?jy{ - +

{{ data.device_label || 'AutoclaveID' }} : {{ data.device_id }}
- +
Result : fas fa-check @@ -27,7 +27,7 @@ >{{ data.result }}
- +
verify : fas fa-times @@ -37,7 +37,7 @@ >{{ data.verified }}
- +
Register User : {{ User }}
- +
Date : {{ data.created_at }}
- +
Medical Center : - + - - - + + - -
+ + +
Cycle ID : {{ data.id }}
- - - +
Sterilizer ID : {{ data.sterilizer_id }}
- +
{{ data.user ? data.user.name : '' }}
- -
+ +
Cycle Number : {{ data.cycle_number }}
- +
{{ data.date }}
- +
{{ data.note }} diff --git a/resources/js/vue/components/modal/package/Show.vue b/resources/js/vue/components/modal/package/Show.vue index f131575d..40f58f7c 100644 --- a/resources/js/vue/components/modal/package/Show.vue +++ b/resources/js/vue/components/modal/package/Show.vue @@ -8,25 +8,25 @@
- +
{{ data.name }}
- +
{{ data.created_at }}
- +
{{ data.user ? data.user.name : '' }}
- +
{{ data.note }} diff --git a/resources/js/vue/components/modal/testresult/Show.vue b/resources/js/vue/components/modal/testresult/Show.vue index 6670b052..b479aa57 100644 --- a/resources/js/vue/components/modal/testresult/Show.vue +++ b/resources/js/vue/components/modal/testresult/Show.vue @@ -17,7 +17,7 @@ >{{ data.device_id }}
--> - +
Result : fas fa-check @@ -27,7 +27,7 @@ >{{ data.result }}
- +
verify : fas fa-times @@ -37,7 +37,7 @@ >{{ data.verified }}
- +
Register User : {{ data.user.name }}
- +
Date : {{ data.created_at }}
- +
Medical Center : @@ -139,7 +147,8 @@
- + + @@ -148,10 +157,10 @@ --> @@ -160,7 +169,7 @@ Verify - + + + + + fas fa-print + Go to Print Page + + + - + @@ -196,8 +215,13 @@ export default { import { mapGetters, mapMutations } from "vuex"; import { ApiService } from "@/services"; import { urls } from "@/config/urls"; +import LightBox from 'vue-image-lightbox'; +import 'vue-image-lightbox/dist/vue-image-lightbox.min.css' export default { data: () => ({}), + components:{ + LightBox + }, methods: { ...mapMutations("modal", ["closeModal", "setResultModal"]), async verify(id) { @@ -243,7 +267,7 @@ export default { }, created() { this.data = this.getModalProperties.result.data.data; - console.log(this.data); + console.log(this.data.images.map(img => img.path)); }, computed: { diff --git a/resources/js/vue/main.js b/resources/js/vue/main.js index a6382f03..2a96f718 100644 --- a/resources/js/vue/main.js +++ b/resources/js/vue/main.js @@ -1,5 +1,6 @@ import 'font-awesome/css/font-awesome.min.css' import Vue from 'vue' + // Components import './components' @@ -17,8 +18,8 @@ import App from './App.vue' import i18n from '@/i18n' import router from '@/router' import store from '@/store' - - +import VueLazyLoad from 'vue-lazyload'; +Vue.use(VueLazyLoad) import { ApiService, TokenService } from '@/services' // Sync store with router sync(store, router) diff --git a/resources/js/vue/styles/css/Assets/Main.scss b/resources/js/vue/styles/css/Assets/Main.scss index faa1446d..496ca139 100644 --- a/resources/js/vue/styles/css/Assets/Main.scss +++ b/resources/js/vue/styles/css/Assets/Main.scss @@ -124,12 +124,154 @@ .theme--light.v-pagination .v-pagination__item:focus { outline: 0 !important; } -@media screen and(max-width : 1536px) { - .WM-WidthScreen-SM { - flex-basis:35% !important; - max-width: 35% !important; +table.v-table tbody td.Height-MD-60 { + height: 60px; +} +table.v-table tbody td.Height-MD-80 { + height: 80px; +} +.FlexBtn { + display: flex; + flex-wrap: nowrap; + padding: 10px 8px !important; + justify-content: flex-start; +} +td.FlexBtn .theme--light.v-btn { + padding: 21px 20px; +} +td.FlexBtn a.LinkBtn .theme--light.v-btn { + padding: 12px 10px; +} +.ResultMsg { + font-size: 10px; + color: #fff; + padding: 3px 10px; + border-radius: 5px; +} +.ResultMsg.Reject{ + background: #ee3552; +} +.ResultMsg.Accept{ + background: #1DE6B8;; +} +.theme--light.v-icon.Verified { + font-size: 15px !important; + color: #1DE6B8; +} +.theme--light.v-icon.NotVerified { + font-size: 15px !important; + color: #ee3552; +} + + +table.v-table tbody td.FlexBtn:not(:first-child) { + padding: 12px 8px; +} +td.FlexBtn .v-btn { + margin-top: 5px; +} +.WM-WidthScreen-SM { + flex-basis:35% !important; + max-width: 35% !important; +} +table.v-table tbody td.Height-SM-48 { + height: 48px; +} +.v-card .title { + font-size: .9rem !important; +} +.headline { + font-size: .9rem !important; +} +.FlexBtn { + padding: 10px 8px !important; +} +td.FlexBtn span { + display: none; +} +td.FlexBtn .theme--light.v-btn { + min-width: 30px; + padding: 15px 10px; + margin-right: 1 !important; + +} +td.FlexBtn a.LinkBtn .theme--light.v-btn { + padding: 9px 10px; +} +td.FlexBtn .theme--light.v-icon { + margin-right: 0 !important; +} + +@media screen and (min-width : 1900px) { + .WM-XL-Align-L { + text-align: left !important; } } +@media screen and(max-width : 1536px) { + // table.v-table tbody td.FlexBtn:not(:first-child) { + // padding: 12px 8px; + // } + // td.FlexBtn .v-btn { + // margin-top: 5px; + // } + // .WM-WidthScreen-SM { + // flex-basis:35% !important; + // max-width: 35% !important; + // } + + + +// .theme--light.v-btn.WM-ActBtn:not(.v-btn--icon):not(.v-btn--flat) { +// margin: 5px; +// padding: 10px; +// min-width: 30px; +// display: inline-block; +// } +// .theme--light.v-btn.WM-ActBtn:not(.v-btn--icon):not(.v-btn--flat) span { +// display: none; +// } +// .v-btn.WM-ActBtn__content .v-icon.mr-2 { +// margin-right: 0 !important; +// } +table.v-table tbody td.Height-SM-48 { + height: 48px; +} +.v-card .title { + font-size: .9rem !important; +} +.headline { + font-size: .9rem !important; +} +.FlexBtn { + padding: 10px 8px !important; +} +td.FlexBtn span { + display: none; +} +td.FlexBtn .theme--light.v-btn { + min-width: 30px; + padding: 15px 10px; + margin-right: 1 !important; + +} +td.FlexBtn a.LinkBtn .theme--light.v-btn { + padding: 9px 10px; +} +td.FlexBtn .theme--light.v-icon { + margin-right: 0 !important; +} + +} +@media screen and(max-width : 1366px) { + .FlexBtn { + // padding: 10px 8px !important; + padding: 20px 8px !important; + } + td.FlexBtn .v-btn { + margin-top: -5px; + } +} + @media screen and(max-width : 1024px) { .WM-WidthScreen-XS { flex-basis:60% !important; diff --git a/resources/js/vue/views/Cycle/List.vue b/resources/js/vue/views/Cycle/List.vue index 18235ce2..5b06058f 100644 --- a/resources/js/vue/views/Cycle/List.vue +++ b/resources/js/vue/views/Cycle/List.vue @@ -98,33 +98,58 @@ {{ item.sterilizer_id }} {{ item.cycle_number }} {{ item.date }} - - + + + + Show + + + + Edit + + + + Remove + + + + Generate Barcode + diff --git a/resources/js/vue/views/Item/List.vue b/resources/js/vue/views/Item/List.vue index e99b4481..a0e304f4 100644 --- a/resources/js/vue/views/Item/List.vue +++ b/resources/js/vue/views/Item/List.vue @@ -73,33 +73,54 @@ {{ item.name }} {{ item.size }} - - + + + diff --git a/resources/js/vue/views/Label/List.vue b/resources/js/vue/views/Label/List.vue index 416326c9..f3894bab 100644 --- a/resources/js/vue/views/Label/List.vue +++ b/resources/js/vue/views/Label/List.vue @@ -38,7 +38,7 @@ - + fas fa-search Filter @@ -69,33 +69,55 @@ {{ item.user ? item.user.name : '' }} {{ item.cycle_number }} {{ item.sterilizer_id }} - - + + + + Show + + + + Edit + + + + Remove + + + + Generate Barcode + diff --git a/resources/js/vue/views/MedicalCenter/List.vue b/resources/js/vue/views/MedicalCenter/List.vue index 25a8216d..052cce7c 100644 --- a/resources/js/vue/views/MedicalCenter/List.vue +++ b/resources/js/vue/views/MedicalCenter/List.vue @@ -37,23 +37,38 @@ {{ item.name }} {{ item.created_at }} {{ item.users_count }} Operator - - - + + + + Edit + + + + Operator + + + + Remove + diff --git a/resources/js/vue/views/Package/List.vue b/resources/js/vue/views/Package/List.vue index def989e8..314853f0 100644 --- a/resources/js/vue/views/Package/List.vue +++ b/resources/js/vue/views/Package/List.vue @@ -33,7 +33,6 @@ :items="medicalCenters" > - fas fa-search @@ -41,7 +40,7 @@ - + fas fa-plus @@ -49,6 +48,7 @@ + @@ -66,33 +66,55 @@ {{ item.name }} {{ item.user ? item.user.name : '' }} {{ item.description }} - - + + + + Show + + + diff --git a/resources/js/vue/views/TestResult/List.vue b/resources/js/vue/views/TestResult/List.vue index 598b4253..7caf8c43 100644 --- a/resources/js/vue/views/TestResult/List.vue +++ b/resources/js/vue/views/TestResult/List.vue @@ -48,7 +48,7 @@ item-value="id" > - + - - + + fas fa-search Filter - + fas fa-plus @@ -127,6 +127,17 @@ + @@ -145,36 +156,76 @@ class="title font-weight-light" >{{ item.user.medical_center.name }} {{ item.user.name }} - {{ item.result }} + + + {{ item.result }} + + + {{ item.result }} + + {{ item.created_at }} - {{ item.verified }} - - + + + + + + + + + + + + + Show + + + @@ -380,4 +431,36 @@ export default { .v-btn--floating, .v-btn--icon:before { border-radius: 50%!important; } +/* .FlexBtn { + display: flex; + flex-wrap: nowrap; + padding: 10px 8px !important; +} +td.FlexBtn .theme--light.v-btn { + padding: 21px 20px; +} +td.FlexBtn a.LinkBtn .theme--light.v-btn { + padding: 12px 10px; +} +@media screen and (max-width:1536px) { +.FlexBtn { + padding: 30px 8px !important; +} +td.FlexBtn span { + display: none; +} +td.FlexBtn .theme--light.v-btn { + min-width: 30px; + padding: 15px 10px; + margin-right: 1 !important; + +} +td.FlexBtn a.LinkBtn .theme--light.v-btn { + padding: 9px 10px; +} +td.FlexBtn .theme--light.v-icon { + margin-right: 0 !important; +} +} */ + diff --git a/resources/js/vue/views/TestResult/Show.vue b/resources/js/vue/views/TestResult/Show.vue index c28cbb18..6cbc4f12 100644 --- a/resources/js/vue/views/TestResult/Show.vue +++ b/resources/js/vue/views/TestResult/Show.vue @@ -102,9 +102,10 @@
- - - + + @@ -121,13 +122,6 @@ -