From 9db361b360a0f8ce4b6991be5efcdaacd086a176 Mon Sep 17 00:00:00 2001 From: david zynda Date: Fri, 16 Feb 2024 00:06:23 +0100 Subject: [PATCH 1/7] radios and buttons fixed --- .../components/general/contractModal.scss | 6 + src/views/PassportView.vue | 160 +++++++++++------- 2 files changed, 104 insertions(+), 62 deletions(-) diff --git a/src/assets/styles/components/general/contractModal.scss b/src/assets/styles/components/general/contractModal.scss index 6536e9aa6..09cffe47a 100644 --- a/src/assets/styles/components/general/contractModal.scss +++ b/src/assets/styles/components/general/contractModal.scss @@ -36,12 +36,18 @@ font-weight: bolder; } } + .v-radio .radio-label { + color: $catena-x-black !important; + cursor: pointer; + font-weight: 500; + } .contract-container { display: flex; flex-direction: column; justify-content: center !important; align-items: center !important; padding: 20px 80px 50px 80px; + border-radius: 20px; } .title-container { width: fit-content; diff --git a/src/views/PassportView.vue b/src/views/PassportView.vue index cfdd4ecdc..d335c4dca 100644 --- a/src/views/PassportView.vue +++ b/src/views/PassportView.vue @@ -54,7 +54,9 @@
-
{{ $t("passportView.policyAgreement.title") }}
+
+ {{ $t("passportView.policyAgreement.title") }} +
@@ -63,67 +65,85 @@ :key="contractId" >
- {{ $t("passportView.policyAgreement.contractId") }} + {{ + $t("passportView.policyAgreement.contractId") + }} {{ contractId }}
+ - - {{ $t("passportView.policyAgreement.decline") }} - {{ $t("passportView.policyAgreement.agree") }} - - - - {{ detailsTitle }} - - - -
- -
- +
+ + {{ $t("passportView.policyAgreement.decline") }} + {{ $t("passportView.policyAgreement.agree") }} + + + + {{ detailsTitle }} + + + +
+ +
+ +
@@ -137,13 +157,19 @@
{{ $t("passportView.policyAgreement.declineModal.cancel") }}{{ + $t("passportView.policyAgreement.declineModal.cancel") + }} @@ -365,7 +393,7 @@ export default { return Array.isArray(value) ? value.length > 0 : Object.keys(value).length > 0; - }else if (Array.isArray(value) && value !== null){ + } else if (Array.isArray(value) && value !== null) { return value.length > 0; } return true; // Include if it's not an object/array or if it's a non-empty primitive value @@ -428,9 +456,13 @@ export default { toggleDetails() { this.details = !this.details; if (this.details) { - this.detailsTitle = this.$t("passportView.policyAgreement.details.lessDetails"); + this.detailsTitle = this.$t( + "passportView.policyAgreement.details.lessDetails" + ); } else { - this.detailsTitle = this.$t("passportView.policyAgreement.details.moreDetails"); + this.detailsTitle = this.$t( + "passportView.policyAgreement.details.moreDetails" + ); } }, chooseContract(contract, policy) { @@ -625,11 +657,15 @@ export default { let additionalData = []; let sources = []; // In order to have the additional data available we need to copy it in deep - if(jsonUtil.exists("additionalData", this.data["data"]["aspect"])){ - additionalData = jsonUtil.copy(this.data["data"]["aspect"]["additionalData"]); + if ( + jsonUtil.exists("additionalData", this.data["data"]["aspect"]) + ) { + additionalData = jsonUtil.copy( + this.data["data"]["aspect"]["additionalData"] + ); } // When extend deep is called this property will be replaced - if(jsonUtil.exists("sources", this.data["data"]["aspect"])){ + if (jsonUtil.exists("sources", this.data["data"]["aspect"])) { sources = jsonUtil.copy(this.data["data"]["aspect"]["sources"]); } this.data = configUtil.normalizePassport( @@ -638,11 +674,11 @@ export default { jsonUtil.get("data.semanticId", this.data) ); // Re-add the additionalData - if(jsonUtil.exists("additionalData", this.data["aspect"])){ + if (jsonUtil.exists("additionalData", this.data["aspect"])) { this.data["aspect"]["additionalData"] = additionalData; } // Re-add the sources - if(jsonUtil.exists("sources", this.data["aspect"])){ + if (jsonUtil.exists("sources", this.data["aspect"])) { this.data["aspect"]["sources"] = sources; } this.error = false; From 00ffb6d76e830af4c31922164a78cf79ba78a209 Mon Sep 17 00:00:00 2001 From: david zynda Date: Fri, 16 Feb 2024 11:52:03 +0100 Subject: [PATCH 2/7] modal style fix --- .../components/general/contractModal.scss | 30 ++++++++- src/views/PassportView.vue | 64 ++++++++++--------- 2 files changed, 61 insertions(+), 33 deletions(-) diff --git a/src/assets/styles/components/general/contractModal.scss b/src/assets/styles/components/general/contractModal.scss index 09cffe47a..9805f40ee 100644 --- a/src/assets/styles/components/general/contractModal.scss +++ b/src/assets/styles/components/general/contractModal.scss @@ -27,15 +27,40 @@ .back-to-homepage { margin: 5px 0; } + .decliner { + padding: 20px 80px 50px 80px; + } .content-container { margin-top: 20px; - width: 500px; + min-width: 500px; .policy-group-label { margin-top: 15px; font-weight: bolder; + word-break: break-word; } } + .btn-background { + background-color: rgb(237, 240, 244); + width: 100%; + padding-bottom: 30px; + } + .v-selection-control-group { + align-items: center; + } + .v-selection-control { + padding-left: 10px; + } + + .details { + display: flex; + align-items: center; + width: 100%; + } + .v-radio label { + opacity: 1 !important; + color: rgb(17, 17, 17); + } .v-radio .radio-label { color: $catena-x-black !important; cursor: pointer; @@ -46,8 +71,8 @@ flex-direction: column; justify-content: center !important; align-items: center !important; - padding: 20px 80px 50px 80px; border-radius: 20px; + word-break: break-word; } .title-container { width: fit-content; @@ -63,6 +88,7 @@ .json-viewer-container { border: 1px solid lightgray; border-radius: 5px; + margin-bottom: 50px; word-break: break-word; .json-viewer { min-width: 300px; diff --git a/src/views/PassportView.vue b/src/views/PassportView.vue index d335c4dca..6a6872cea 100644 --- a/src/views/PassportView.vue +++ b/src/views/PassportView.vue @@ -122,7 +122,7 @@ >{{ $t("passportView.policyAgreement.agree") }} - + - +
-
+
{{ $t("passportView.policyAgreement.declineModal.question") }}
-
+
{{ $t("passportView.policyAgreement.declineModal.homepage") }}
- - {{ - $t("passportView.policyAgreement.declineModal.cancel") - }} - - +
+ + {{ + $t("passportView.policyAgreement.declineModal.cancel") + }} + + +
From 2fcca1035a35d9a5975bef528402d028fa24ecb8 Mon Sep 17 00:00:00 2001 From: david zynda Date: Fri, 16 Feb 2024 12:52:24 +0100 Subject: [PATCH 3/7] outlined btns thicker frame --- src/views/PassportView.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/views/PassportView.vue b/src/views/PassportView.vue index 6a6872cea..6dcdc6c26 100644 --- a/src/views/PassportView.vue +++ b/src/views/PassportView.vue @@ -104,6 +104,7 @@ color="#0F71CB" class="text-none" variant="outlined" + style="border: 2px solid" @click="declineContract()" >{{ $t("passportView.policyAgreement.decline") }} @@ -163,6 +164,7 @@ color="#0F71CB" class="text-none" variant="outlined" + style="border: 2px solid" @click="cancelDeclineContract()" >{{ $t("passportView.policyAgreement.declineModal.cancel") From 7a65f392f289196441483f3f6af77ad50e1ab76e Mon Sep 17 00:00:00 2001 From: david zynda Date: Fri, 16 Feb 2024 15:54:47 +0100 Subject: [PATCH 4/7] decliner btn size --- src/views/PassportView.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/PassportView.vue b/src/views/PassportView.vue index 6dcdc6c26..f69ee1262 100644 --- a/src/views/PassportView.vue +++ b/src/views/PassportView.vue @@ -160,7 +160,7 @@ Date: Fri, 16 Feb 2024 16:13:05 +0100 Subject: [PATCH 5/7] details btn icon --- src/assets/styles/components/general/contractModal.scss | 1 - src/views/PassportView.vue | 8 ++++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/assets/styles/components/general/contractModal.scss b/src/assets/styles/components/general/contractModal.scss index 9805f40ee..451e1648a 100644 --- a/src/assets/styles/components/general/contractModal.scss +++ b/src/assets/styles/components/general/contractModal.scss @@ -83,7 +83,6 @@ .details-btn { margin: 20px; color: $catena-x-blue; - text-decoration: underline; } .json-viewer-container { border: 1px solid lightgray; diff --git a/src/views/PassportView.vue b/src/views/PassportView.vue index f69ee1262..8afb3df04 100644 --- a/src/views/PassportView.vue +++ b/src/views/PassportView.vue @@ -128,10 +128,18 @@ rounded="xl" size="x-large" variant="text" + :prepend-icon=" + !details + ? 'mdi-plus-circle-outline' + : 'mdi-minus-circle-outline' + " @click="toggleDetails" class="details-btn text-none" > {{ detailsTitle }} + From b262409d16ff2d723e0e708cf972bd3304e62f9b Mon Sep 17 00:00:00 2001 From: david zynda Date: Fri, 16 Feb 2024 17:01:36 +0100 Subject: [PATCH 6/7] QR code reader fix --- src/components/general/QrcodeStrem.vue | 2 +- src/views/SearchView.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/general/QrcodeStrem.vue b/src/components/general/QrcodeStrem.vue index e501e94f9..f1d3990f4 100644 --- a/src/components/general/QrcodeStrem.vue +++ b/src/components/general/QrcodeStrem.vue @@ -57,7 +57,7 @@ export default { try { await promise; } catch (error) { - store.commit("setQrError", error); + store.commit("setQrError", error.name); if (error.name === "NotAllowedError") { this.error = "ERROR: you need to grant camera access permission"; } else if (error.name === "NotFoundError") { diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue index 192153b98..0afcb6d6b 100644 --- a/src/views/SearchView.vue +++ b/src/views/SearchView.vue @@ -49,7 +49,7 @@

{{ $t("searchView.errorCameraOff") }}

{{ $t("searchView.errorTypeID") }}

-

{{ $t(error) }}

+

{{ $t(`searchView.cameraError.${qrError}`) }}

From 1b10bfda1b022116ba459afed27b17ebdd1b39ae Mon Sep 17 00:00:00 2001 From: Mathias Brunkow Moser Date: Fri, 16 Feb 2024 18:24:46 +0100 Subject: [PATCH 7/7] fix: fixed responsiveness --- .../components/general/contractModal.scss | 341 ++++++++++-------- src/views/PassportView.vue | 21 +- 2 files changed, 206 insertions(+), 156 deletions(-) diff --git a/src/assets/styles/components/general/contractModal.scss b/src/assets/styles/components/general/contractModal.scss index 78c676246..c8f367458 100644 --- a/src/assets/styles/components/general/contractModal.scss +++ b/src/assets/styles/components/general/contractModal.scss @@ -21,175 +21,210 @@ * SPDX-License-Identifier: Apache-2.0 */ -.contract-modal { - justify-content: center; - align-items: center; - .back-to-homepage { - margin: 5px 0; - } - .decliner { - padding: 20px 80px 50px 80px; - } - .content-container { - margin-top: 20px; - min-width: 500px; + .contract-modal { + justify-content: center; + align-items: center; + + .back-to-homepage { + margin: 5px 0; + } + + .decliner { + padding: 20px 80px 50px 80px; + } + + .content-container { + margin-top: 20px; + min-width: 500px; + + .policy-group-label { + margin-top: 15px; + font-weight: bolder; + word-break: break-word; + margin-bottom: 5px; + padding: 5px; + font-weight: bolder; + word-break: break-all; + width: 100%; + } + } + + .btn-background { + background-color: rgb(237, 240, 244); + width: 100%; + padding-bottom: 30px; + } + + .v-selection-control-group { + align-items: center; + padding: 0 40px; + } - .policy-group-label { - margin-top: 15px; - font-weight: bolder; + .v-selection-control { + padding-left: 10px; + } + + .details { + display: flex; + align-items: center; + width: 100%; + } + + .v-radio label { + opacity: 1 !important; + color: rgb(17, 17, 17); + } + + .v-radio .radio-label { + color: $catena-x-black !important; + cursor: pointer; + font-weight: 500; + } + + .contract-container { + border-radius: 20px; word-break: break-word; - margin-bottom: 5px; - padding: 5px; - font-weight: bolder; - word-break: break-all; } - } - .btn-background { - background-color: rgb(237, 240, 244); - width: 100%; - padding-bottom: 30px; - } - .v-selection-control-group { - align-items: center; - } - .v-selection-control { - padding-left: 10px; - } - .details { - display: flex; - align-items: center; - width: 100%; - } - .v-radio label { - opacity: 1 !important; - color: rgb(17, 17, 17); - } - .v-radio .radio-label { - color: $catena-x-black !important; - cursor: pointer; - font-weight: 500; - } - .contract-container { - display: flex; - flex-direction: column; - justify-content: center !important; - align-items: center !important; - border-radius: 20px; - word-break: break-word; - } - .title-container { - width: fit-content; - font-size: 1.5em; - font-weight: 600; - padding: 15px; - } - .details-btn { - margin: 20px; - color: $catena-x-blue; - } - .json-viewer-container { - border: 1px solid lightgray; - border-radius: 5px; - margin-bottom: 50px; - word-break: break-word; - .json-viewer { - min-width: 300px; - max-height: 50vh; - overflow: auto; - background-color: rgb(245, 245, 245); + .title-container { + width: fit-content; + font-size: 1.5em; + font-weight: 600; + width: 100%; + text-align: center; + padding-top: 56px; } - } - .contractid-title{ - font-size: 14px; - font-weight: 500; - } - .policy-container { - color: rgb(17,17,17)!important; - padding: 5px 15px 15px 15px !important; - .attribute-operator{ + + .details-btn { + margin: 20px; + color: $catena-x-blue; + } + + .json-viewer-container { + border: 1px solid lightgray; + border-radius: 5px; + margin-bottom: 50px; + word-break: break-word; + + .json-viewer { + min-width: 300px; + max-height: 50vh; + overflow: auto; + background-color: rgb(245, 245, 245); + } + } + + .contractid-title { + font-size: 14px; + font-weight: 500; + } + + .policy-container { + color: rgb(17, 17, 17) !important; + padding: 5px 15px 15px 15px !important; + + .attribute-operator { padding: 10px 0; max-height: 60%; cursor: pointer; font-weight: 800; color: $catena-x-blue; - } - .attribute-constraint{ - word-break: break-all; - } - - .policy-container { - background-color: #fff; - border-radius: 10px; - border: solid 1px #dcdcdc; - - .policy-title { - font-size: 11px; - font-weight: 500; - color: rgb(17,17,17)!important; } - - .policy-icon { - position: absolute; - right: 7px; - top: 7px; - color: #939393; - } - - .policy-icon-green { - color: #428c5b; - } - - .policy-label { - font-size: 12px; - font-weight: 500; - padding-bottom: 5px; - display: flex; - align-items: center; - } - - .policy-value { - font-size: 10px; - font-weight: 500; - padding-bottom: 5px; - word-wrap: break-word; - } - - .policy-second-value { - font-size: 10px; - font-weight: 500; - padding-bottom: 5px; - word-wrap: break-word; - } - - .policy-second-label { - font-size: 12px; - font-weight: 500; - padding-top: 12px; - } - - .policy-info-icon { - position: absolute; - right: 0; - bottom: 7px; - color: #0f71cb; + + .attribute-constraint { + word-break: break-all; } - - .policy-info-icon:hover { - color: $catena-x-dark-blue; - cursor: pointer; + + .policy-container { + background-color: #fff; + border-radius: 10px; + border: solid 1px #dcdcdc; + + .policy-title { + font-size: 11px; + font-weight: 500; + color: rgb(17, 17, 17) !important; + } + + .policy-icon { + position: absolute; + right: 7px; + top: 7px; + color: #939393; + } + + .policy-icon-green { + color: #428c5b; + } + + .policy-label { + font-size: 12px; + font-weight: 500; + padding-bottom: 5px; + display: flex; + align-items: center; + } + + .policy-value { + font-size: 10px; + font-weight: 500; + padding-bottom: 5px; + word-wrap: break-word; + } + + .policy-second-value { + font-size: 10px; + font-weight: 500; + padding-bottom: 5px; + word-wrap: break-word; + } + + .policy-second-label { + font-size: 12px; + font-weight: 500; + padding-top: 12px; + } + + .policy-info-icon { + position: absolute; + right: 0; + bottom: 7px; + color: #0f71cb; + } + + .policy-info-icon:hover { + color: $catena-x-dark-blue; + cursor: pointer; + } } } } -} -@media (max-width: 628px) { - .contract-modal { - .content-container { - width: 320px; - display: inline; - .policy-group-label-mobile { - display: block; + @media (max-width: 628px) { + .contract-modal { + .content-container { + width: 320px; + display: inline; + + .policy-group-label-mobile { + display: block; + } } } } +.container-policy-selection { + @media (max-width: 628px) { + margin-top: 95px; + } + + @media (max-width: 375px) { + margin-top: 160px; + } + + } + +@media (max-width: 628px) { + .container-policy-selection .contract-modal .v-selection-control-group { + padding: 0 !important; + } +} \ No newline at end of file diff --git a/src/views/PassportView.vue b/src/views/PassportView.vue index d746c7aa1..ec2135f98 100644 --- a/src/views/PassportView.vue +++ b/src/views/PassportView.vue @@ -47,10 +47,10 @@ {{ $t("passportView.dpp") }} - + - +
@@ -422,7 +422,7 @@ export default { processId: null, backendService: null, parsedPolicyConstraints: {}, - error: true, + error: false, errorObj: { title: "Something went wrong while returning the passport!", description: "We are sorry for that, you can retry or try again later", @@ -576,6 +576,7 @@ export default { "The request took too long... Please retry or try again later."; this.status = 408; this.statusText = "Request Timeout"; + this.error= true; } this.searchResponse = result; } catch (e) { @@ -606,6 +607,7 @@ export default { "It was not possible to display the policies and contracts."; this.status = 500; this.statusText = "Internal Server Error"; + this.error= true; } // Extract policies @@ -617,6 +619,7 @@ export default { "It was not possible to display the policies and contracts."; this.status = 500; this.statusText = "Internal Server Error"; + this.error= true; }else{ // Check if policies array has elements and then access the @id of the first element const firstPolicyObj = this.policies[0]; @@ -631,6 +634,7 @@ export default { "It was not possible to display the policies and contracts."; this.status = 500; this.statusText = "Internal Server Error"; + this.error= true; }else{ // Commit the contract ID to the store this.$store.commit("setContractToSign", { @@ -668,6 +672,7 @@ export default { "The request took too long... Please retry or try again later."; this.status = 408; this.statusText = "Request Timeout"; + this.error= true; } this.data = result; } catch (e) { @@ -720,6 +725,7 @@ export default { "The request took too long... Please retry or try again later."; this.errorObj.status = 408; this.errorObj.statusText = "Request Timeout"; + this.error= true; } this.data = result; } catch (e) { @@ -817,6 +823,7 @@ export default { this.errorObj.statusText = jsonUtil.exists("statusText", response) ? response["statusText"] : "Internal Server Error"; + this.error= true; return response; } @@ -827,6 +834,7 @@ export default { "It was not possible to complete the passport transfer."; this.errorObj.status = 400; this.errorObj.statusText = "Bad Request"; + this.error= true; return null; } // Check if reponse content was successfull and if not print error comming message from backend @@ -843,6 +851,7 @@ export default { this.errorObj.statusText = jsonUtil.exists("statusText", response) ? response["statusText"] : "Not found"; + this.error= true; } return response; @@ -884,6 +893,7 @@ export default { this.errorObj.statusText = jsonUtil.exists("statusText", response) ? response["statusText"] : "Internal Server Error"; + this.error= true; return response; } @@ -894,6 +904,7 @@ export default { "It was not possible to complete the passport transfer."; this.errorObj.status = 400; this.errorObj.statusText = "Bad Request"; + this.error= true; return null; } @@ -911,6 +922,7 @@ export default { this.errorObj.statusText = jsonUtil.exists("statusText", response) ? response["statusText"] : "Not found"; + this.error= true; } return response; @@ -943,6 +955,7 @@ export default { this.errorObj.statusText = jsonUtil.exists("statusText", response) ? response["statusText"] : "Internal Server Error"; + this.error= true; return response; } @@ -953,6 +966,7 @@ export default { "It was not possible to complete the passport transfer."; this.errorObj.status = 400; this.errorObj.statusText = "Bad Request"; + this.error= true; return null; } @@ -970,6 +984,7 @@ export default { this.errorObj.statusText = jsonUtil.exists("statusText", response) ? response["statusText"] : "Not found"; + this.error= true; } return response;