ui-fix

ng-seed/src/app/end-user/consultants/consultants-list.component.html

@@ -19,13 +19,12 @@
          </div> 
          <div fxLayout="row wrap mt-2 mb-2" class="flexRow">
             <div fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap" *ngFor="let consultant of consultants | searchFilter:filterdata : 'consultants'">
-               <div class="consultant-list-card" (click)="goToSlotBooking(consultant)">
+               <div class="consultant-list-card card-inner-circle-orange"  (click)="goToSlotBooking(consultant)">
-                  <div class="consultant-content">
+                  <!-- <div class="consultant-content"> -->
-                     <div class="pad-wrap d-flex">
+                     <div class="pad-wrap" >
-                       <div class="consultant-img">
+                       <!-- <div class="consultant-img">
                           <img src="https://newassets.apollo247.com/specialties/ic_oncology.png " alt="Online Doctor Consultation - Medical Oncology"  style="width: 40px;">
-                          <!-- <img src="{{consultant.img}}"  style="width: 40px;"> -->
+                       </div> -->
-                       </div>
                         <div class="consultant-card-cover">
                            <div>
                               <div class="text-center consultant-thumb">
@@ -33,33 +32,41 @@
                               </div>
                            </div>
                         </div>
-                        <div class="consultant-profile">
+                        <div class="consultant-profile text-center">
-                           <h5 class="text-primary">{{consultant.userName}}</h5>
+                           <h5 class="text-primary">Dr.{{consultant.userName}}</h5>
-                           <span class="silk-block consultant-span">{{consultant.practitionerInfos[0].designtion
+                           <span class="silk-block mb-1 consultant-qualification">{{consultant.practitionerInfos[0].qualification || null}}</span><br>
+                           <!-- <span class="silk-block consultant-span">{{consultant.practitionerInfos[0].designtion
                              || "ENT" }}</span><br>
                            <span class="silk-block mb-1 consultant-year">{{consultant.practitionerInfos[0].exp ||  null}}</span><br>
-                           <span class="silk-block mb-1 consultant-qualification">{{consultant.practitionerInfos[0].qualification || null}}</span><br>
+                           <span class="silk-block mb-1 consultant-amount">Starts at <span class="consultant-pay">₹ {{consultant.practitionerInfos[0].fees || 100}}</span> </span><br> -->
-                           <span class="silk-block mb-1 consultant-amount">Starts at <span class="consultant-pay">₹ {{consultant.practitionerInfos[0].fees || 100}}</span> </span><br>
+                           <span class="d-flex mb consultant-time">
+                              <mat-icon>access_time</mat-icon>
+                              <span class="consultant-language">10:00 Am</span>
+                              <!-- <span class="consultant-language pl-1">{{consultant.time}}</span> -->
+                           </span>
                         </div>
                      </div>
-                     <span class="d-flex mb">
+                     <!-- <span class="d-flex mb">
                         <mat-icon class="mt-1">transcribe</mat-icon>
                         <span class="mt-1 pl-1 consultant-language">{{consultant.practitionerInfos[0].languages || ""}}</span>
                      </span>
                      <span class="d-flex mb">
                         <mat-icon>location_on</mat-icon>
                         <span class="consultant-language pl-1">{{consultant.city}}</span>
-                     </span>
+                     </span> -->
-                     <span class="d-flex mb">
+                     <div class="text-center mt-1">
-                       <mat-icon>access_time</mat-icon>
+                     <a><img src="assets/images/facebook.svg" alt="Avatar" class="img"></a>
-                       <span class="consultant-language pl-1">{{consultant.time}}</span>
+                     <a><img src="assets/images/twitter.svg" alt="Avatar" class="img"></a>
-                    </span>
+                     <a><img src="assets/images/instagram.svg" alt="Avatar" class="img"></a>
+                     </div>
+                     <p class="message text-center">Apollo Hospitals Cancer Centre Nandanam,Chennai</p>
+                     <button class="button pill-shape text-center" routerLink="/customer/doctor-profile"> View Profile</button>
                      <!-- <div class="align-self-center"> 
                         <button type="button" class="UserActions-editButton edit-button EdgeButton EdgeButton--tertiary btn-red" data-scribe-element="profile_edit_button">
                           <span class="material-icons"> bookmark_add </span><span class="button-text">Book Appoinment</span>
                         </button>
                      </div> -->
-                  </div>
+                  <!-- </div> -->
                </div>
             </div> 
          </div>

ng-seed/src/app/end-user/consultants/consultants-list.component.scss

@@ -9,6 +9,9 @@ $black_60: rgba(0, 0, 0, 0.6);
     padding: 0rem 0.5rem 1rem;
     // padding-bottom: 4rem;
 }
+h5{
+    margin-top: 1rem;
+}
 .flexRow{
     display: flex !important;
 }
@@ -21,7 +24,7 @@ $black_60: rgba(0, 0, 0, 0.6);
 }
 .consultant-list-card {
     border-radius: 10px;
-    background: $white;
+    background: #EBF4FA;
     box-shadow: 0 2px 6px $black_10;
     transition: all 0.3s ease-in-out 0s;
     &:hover {
@@ -41,9 +44,9 @@ $black_60: rgba(0, 0, 0, 0.6);
     font-weight: 700;
 }
 .consultant-qualification{
-    font-size: 12px;
+    font-size: 13px;
-    color: #658F9B;
+    color: #0087ba;
-    font-weight: 600;
+    // font-weight: 600;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -67,33 +70,61 @@ $black_60: rgba(0, 0, 0, 0.6);
     white-space: nowrap;
     text-overflow: ellipsis;
 }
-.consultant-img {
+.consultant-time{
-    top: 25px;
+    margin-left: 5rem;
-    left: 25px;
+    margin-top: 0.5rem;
-    height: 24px;
-    display: flex;
-    text-align: center;
-    align-items: center;
-    border-radius: 6px;
-    justify-content: center;
 }
+.button {
+    background-color: #4caf50;
+    color: #efefef;
+    border: none;
+    text-align: center;
+    padding: 10px 20px;
+    border-radius: 25px;
+    margin-left: 4rem;
+    margin-top: 1rem;
+    cursor: pointer;
+    margin-bottom: 1rem;
+  }
+  .img{
+    width: 25px;
+    margin-right: 10px;
+}
+.message {
+    color: rgba(0, 0, 0, 0.54);
+    font-size: 12px;
+    font-weight: 600;
+    // line-height: 10px;
+    word-break: break-word;
+  }
+// .consultant-img {
+//     top: 25px;
+//     left: 25px;
+//     height: 24px;
+//     display: flex;
+//     text-align: center;
+//     align-items: center;
+//     border-radius: 6px;
+//     justify-content: center;
+// }
 // .mb{
 //     margin-bottom: 0.20rem;
 // }
-.consultant-card-cover {
+// .consultant-card-cover {
-    padding: 0rem 6rem;
+//     padding: 0rem 6rem;
-    position: relative;
+//     position: relative;
-    background-size: cover;
+//     background-size: cover;
-    margin-left: -8rem;
+//     margin-left: -8rem;
-}
+// }
 .consultant-thumb {
-    position: absolute;
+    // position: absolute;
     margin-top: 20px;
     img {
         border: 5px solid $white;
         border-radius: 100%;
-        height: 75px;
+        height: 90px;
-        width: 75px;
+        width: 90px;
+        margin-top: 20px;
     }
 }
 .btn-red {

ng-seed/src/app/end-user/consultants/consultants-list.component.ts

@@ -8,6 +8,7 @@ import { Router } from '@angular/router';
   styleUrls: ['./consultants-list.component.scss']
 })
 export class ConsultantsListComponent implements OnInit {
+  
   animal: string;
   name: string;
   consultants:any =[];

ng-seed/src/assets/images/facebook.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="#217e69" d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/></svg>

ng-seed/src/assets/images/instagram.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="#217e69" d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3Z"/></svg>

ng-seed/src/assets/images/twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="#217e69" d="M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23Z"/></svg>