Skip to content

Commit

Permalink
Task #231459 - [FE] - Issuance dashboard,landing Page UI changes as p…
Browse files Browse the repository at this point in the history
…er figma (#27)

* Approved list for vc maker

* approved list UI

* removed ununsed code

* remove map extra word

* [FE] - Hide Approve certificate button temporary

* [FE] - Resolved approved on preview button

* changes in logic

* reverted environment file

* Task #231459 - [FE] - Issuance dashboard UI changes

* changed footer text at issuance side

* Task #231459 - [FE] - Issuance dashboard,landing Page UI changes as per figma

* changed upload certificate button and modal UI
  • Loading branch information
sonaliTekdi authored Dec 11, 2024
1 parent f1b74ec commit 9e8f141
Show file tree
Hide file tree
Showing 23 changed files with 313 additions and 272 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -49,11 +49,11 @@
</table>

<!-- Table to show "No Records Found" -->
<table class="text-center my-5 w-100" *ngIf="certificateList.length === 0">
<table class="text-center w-100 mt-250" *ngIf="certificateList.length === 0">
<tbody class="fs-5">
<tr>
<td [attr.colspan]="tableSchema?.fields?.length || 1" class="fs-20 fw-400 lh-27">
{{ 'NO_RECORDS_FOUND' | translate }}
<h2>{{ 'NO_RECORDS_FOUND' | translate }}</h2>
</td>
</tr>
</tbody>
Expand Down
24 changes: 16 additions & 8 deletions src/app/header/header.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -81,28 +81,35 @@ hr {
outline: 0;
width: 65px;
}

.header {
position: fixed;
top: 0;
width: 100%;
z-index: 2;

@media (max-width: 767.98px) {
.custom-header {
justify-content: normal !important;

.logo-text {
width: calc(100% - 30px);

// text-align: center;
a {
display: inline-block;
}
}
}
}

@media (max-width: 991.98px) {
.custom-header {
justify-content: normal !important;

.logo-text {
width: calc(100% - 30px);

// text-align: center;
a {
display: inline-block;
Expand All @@ -111,7 +118,8 @@ hr {
}
}
}
.banner{

.banner {
background: black;
color: white;
display: flex;
Expand All @@ -122,12 +130,12 @@ hr {
margin: 0;
width: 100%;
text-align: center;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-family: "Poppins", sans-serif;
}

@media (max-width: 767.98px) {
.banner{
height:64px;
.banner {
height: 64px;
padding: 11px 26px;
background: black;
color: white;
Expand All @@ -138,8 +146,8 @@ hr {
margin: 0;
width: 100%;
text-align: center;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-family: "Poppins", sans-serif;

}
}

}
18 changes: 10 additions & 8 deletions src/app/home/home.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<nav class="navbar navbar-light bg-white p-48">
<div class="navbar-brand d-contents" id="navbarExample01">
<div class="nav-item active logo-text d-flex align-items-center gap-15 homeHeaderLogo">
<img src="assets/images/logo.png" />
<img src="assets/images/Digi-logo.png" />
Digi Vritti
<!-- <div (click)="postFile()" class="fs-12 lh-12 font-weight-bold lang-btn nav-link-color">
ADMIN
Expand All @@ -24,7 +24,9 @@
<!-- <a href="/login"><span class="fs-12 font-weight-bold lang-btn nav-link-color lh-12">SIGN IN</span>
</a> -->
<div class="button">
<a href="/login" class="clr-grn">Sign In</a>
<a href="/login"
class="btn btn-bg btn-style text-primary-color text-end fw-bold text-capitalize dns-btn pt-2 dsn-g-btn">Sign
In</a>
</div>
<!-- <a href="/login"><span class="fs-12 font-weight-bold lang-btn nav-link-color">SIGN UP</span>
</a> -->
Expand Down Expand Up @@ -129,7 +131,7 @@
<div class="row">
<div class="col-md-6">
<div class="accordionWrapper">
<button class="btn acc-header d-flex align-items-center justify-content-between" type="button"
<button class="acc-header d-flex align-items-center justify-content-between" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false"
aria-controls="collapseExample" (click)="toggleIcon()">
<div class="accordionTitle">can I download and print my certificate anytime?</div>
Expand Down Expand Up @@ -157,7 +159,7 @@
</div>
<div class="col-md-6">
<div class="accordionWrapper">
<button class="btn acc-header d-flex align-items-center justify-content-between" type="button"
<button class="acc-header d-flex align-items-center justify-content-between" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseExample1" aria-expanded="false"
aria-controls="collapseExample1" (click)="toggleIcon1()">
<div class="accordionTitle">How many times can I access my certificate?</div>
Expand Down Expand Up @@ -187,7 +189,7 @@
<div class="row">
<div class="col-md-6">
<div class="accordionWrapper">
<button class="btn acc-header d-flex align-items-center justify-content-between" type="button"
<button class="acc-header d-flex align-items-center justify-content-between" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseExample2" aria-expanded="false"
aria-controls="collapseExample2" (click)="toggleIcon2()">
<div class="accordionTitle">Who can verify certificates?</div>
Expand Down Expand Up @@ -215,7 +217,7 @@
</div>
<div class="col-md-6">
<div class="accordionWrapper">
<button class="btn acc-header d-flex align-items-center justify-content-between" type="button"
<button class="acc-header d-flex align-items-center justify-content-between" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseExample3" aria-expanded="false"
aria-controls="collapseExample3" (click)="toggleIcon3()">
<div class="accordionTitle">Will I pay to get my certificates?</div>
Expand Down Expand Up @@ -245,7 +247,7 @@
<div class="row">
<div class="col-md-6">
<div class="accordionWrapper">
<button class="btn acc-header d-flex align-items-center justify-content-between" type="button"
<button class="acc-header d-flex align-items-center justify-content-between" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseExample4" aria-expanded="false"
aria-controls="collapseExample4" (click)="toggleIcon4()">
<div class="accordionTitle">How do I verify my certificate?</div>
Expand Down Expand Up @@ -273,7 +275,7 @@
</div>
<div class="col-md-6">
<div class="accordionWrapper">
<button class="btn acc-header d-flex align-items-center justify-content-between" type="button"
<button class="acc-header d-flex align-items-center justify-content-between" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseExample5" aria-expanded="false"
aria-controls="collapseExample5" (click)="toggleIcon5()">
<div class="accordionTitle">What can I do if I lost my printed certificate?</div>
Expand Down
36 changes: 15 additions & 21 deletions src/app/home/home.component.scss
Original file line number Diff line number Diff line change
@@ -1,12 +1,3 @@
// body {
// background: $background;
// color: #585858;
// font-family: 'Exo 2', sans-serif;
// text-align: center;
// -webkit-font-smoothing: antialiased;
// -moz-osx-font-smoothing: grayscale;
// }

a {
color: inherit;
}
Expand Down Expand Up @@ -50,9 +41,9 @@ h1 {
position: relative;
}

.mt-20{
margin-top: 20px;
}
.mt-20 {
margin-top: 20px;
}

.menu-open-button {
background: #75eeac;
Expand Down Expand Up @@ -99,6 +90,7 @@ h1 {
background: white;
color: #75eeac;
}

&:nth-child(1) {
transition-duration: 10ms;
transform: translate3d(256.5px, 0, 0) scale(0.5);
Expand Down Expand Up @@ -162,21 +154,23 @@ h1 {
}

.menu-open:checked {
+ .menu-open-button {
+.menu-open-button {
transition-timing-function: linear;
transition-duration: 200ms;
transform: scale(1, 1) rotate(-45deg) translate3d(0, 0, 0);
}

~ .real-menu {
~.real-menu {
transform: translate3d(0, 5px, 0);

.menu-item {
transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
transform: translate3d(0, 0, 0);

&:nth-child(1) {
transition-duration: 400ms;
}

&:nth-child(2) {
transition-duration: 320ms;
}
Expand Down Expand Up @@ -209,18 +203,18 @@ h1 {
}
}

.center {
.center {
margin: 0;
position: relative;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-top: 3%;
}
}

.btn{
font-size:large;
font-weight: bold;
border-radius: 10px;
}
.btn {
font-size: large;
font-weight: bold;
border-radius: 10px;
}
111 changes: 56 additions & 55 deletions src/app/issure/dashboard/dashboard.component.scss
Original file line number Diff line number Diff line change
@@ -1,89 +1,90 @@
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td{
border: 0 solid #dddddd;
text-align: left;
padding: 16px;
line-height: 32px;
}
font-family: "Poppins", sans-serif;
border-collapse: collapse;
width: 100%;
}

th {
padding: 10px;
}

tr:nth-child(even) {
background-color: #e9e8e8;
}
td {
border: 0 solid #dddddd;
text-align: left;
padding: 16px;
line-height: 32px;
}

/* Model */
th {
padding: 10px;
}

tr:nth-child(even) {
background-color: #e9e8e8;
}

/* Model */

.modal.left .modal-dialog,
.modal.right .modal-dialog {
position: fixed;
margin: auto;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
position: fixed;
margin: auto;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
height: 100%;
overflow-y: auto;
height: 100%;
overflow-y: auto;
}

.right-xl-modal{
&.modal{
right: 0 !important;
// width: 70% !important;
left: inherit !important;
}
.modal-dialog{
max-width: 680px !important;
margin: 0 auto !important;
}
.right-xl-modal {
&.modal {
right: 0 !important;
// width: 70% !important;
left: inherit !important;
}

.modal-dialog {
max-width: 680px !important;
margin: 0 auto !important;
}
}

.modal.left .modal-body,
.modal.right .modal-body {
padding: 15px 15px 80px;
padding: 15px 15px 80px;
}

/*Left*/
.modal.left.fade .modal-dialog{
left: -320px;
-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
-o-transition: opacity 0.3s linear, left 0.3s ease-out;
transition: opacity 0.3s linear, left 0.3s ease-out;
.modal.left.fade .modal-dialog {
left: -320px;
-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
-o-transition: opacity 0.3s linear, left 0.3s ease-out;
transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.in .modal-dialog{
left: 0;
.modal.left.fade.in .modal-dialog {
left: 0;
}

/*Right*/
.modal.right.fade .modal-dialog {
right: -0;
-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
-o-transition: opacity 0.3s linear, right 0.3s ease-out;
transition: opacity 0.3s linear, right 0.3s ease-out;
right: -0;
-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
-o-transition: opacity 0.3s linear, right 0.3s ease-out;
transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
right: 0;
right: 0;
}

.mt-100 {
margin-top: 150px !important;
}

/* Model ENd */
/* Model ENd */
Loading

0 comments on commit 9e8f141

Please sign in to comment.