# 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

<center>
<img src="https://imgur.com/25nFVnt.png" stye="height" 300px>
</center>
<br>

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

<center>
<img src="https://imgur.com/hZ00KAj.png" stye="height" 300px>
</center>
<br>

**18:00** - Leave BMW Lab.

###### tags: `on-intern`