24st July Report

Progress

08:40 - Entering BMW Lab.

Add CSS style

• Card
  In html change the code

<ion-card [ngClass]="{'card-today': !click, 'card-today-click': click}" (click)="openDetail()" tappable>
            <ion-item lines="none">
              <ion-label slot="start">
                <h2 [ngClass]="{'text-click': click}">Client Name</h2>
              </ion-label>
              <ion-label>
                <h2 [ngClass]="{'text-click': click}" style="text-align: right">10:00 AM</h2>
              </ion-label>
            </ion-item>
            <ion-item lines="none">
              <ion-label slot="start">
                <h2 [ngClass]="{'text-click': click}">Address</h2>
              </ion-label>
            </ion-item>
          </ion-card>

Add css file.

.text-click {
    color: white;
}

• Resize ion-item

In html add.

<ion-item>
      <p style="color:white; font-weight: lighter; margin: 0px;">TEL</p>
    </ion-item>
    <ion-item lines="none">
      <ion-label>
        <h1 style="color:white">08123112123</h1>
      </ion-label>
      <ion-button class=" button-content" size="small">Call</ion-button>
    </ion-item>

In css addd.

ion-item {
    --min-height: 0px !important;
}

• Add border

In app.css / global.css add.

.my-custom-modal-css .modal-wrapper {
    height: 70%;
    top: 30%;
    position: absolute;
    display: block;
    border-radius: 10px;
}

• Resize modal page

Not finished because it was difficult and after discussing with Aldy there was no need to change its size. Need to discuss with Johnny.

Result

To do next

• Change font color when click
• Add border in modal
• Change ion-list size

13:00 - Because electricity goes out so I leave BMW Lab early.

Add bubble text in Dashboard page

In html Add.

<div class="speech-bubble" [style.top.px]="ballonTextTop" [style.left.px]="ballonTextLeft">
        <div class="speech-bubble-text">Hi! I am Jellyfish and live on the <br> second floor of T4!</div>
      </div>

In css add.

.speech-bubble {
    position: relative;
    background: white;
    border-radius: 15px;
    width: 250px;
    opacity: 0.8;
}

.speech-bubble-text {
    padding: 10px;
}

.speech-bubble:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top-color: white;
    border-bottom: 0;
    margin-left: -20px;
    margin-bottom: -20px;
}

In ts change and add.

    this.jellyfishIconTop = this.headerHeight - 120;
    this.jellyfishIconLeft = this.screenWidth / 2 - 60;

    this.ballonTextTop = this.headerHeight - 140;
    this.ballonTextLeft = this.screenWidth / 2 - 125;

Result

18:00 - Leave BMW Lab.

tags: on-intern