# 22st July Report

## Progress

**08:20** - Entering BMW Lab.

### Learn About GitHub Desktop

To see how to use GitHub step by step you can use [documentation](https://help.github.com/en/desktop).

There is several term when you using git.
+ Remote Repo
This is code store by git
+ Local Repo
This is code store by your computer
+ Push
Send data from your computer to git
+ Pull
Send data from git to your computer
+ Commit
Update change in local repo
+ Clone
Copy code from git to your local repo(done at beginning)

How to syncing branch
+ Update local branch by fetching
+ Resolve conflict by merge
+ After finish change your code commit and then pull request

#### Source
https://www.youtube.com/watch?v=8KCQe9Pm1kg
https://www.youtube.com/watch?v=j3CiBWIeTiE

## Change CSS style

+ Background
In css add.

ion-content {
    --background: #f5f4f5; // change color youwant
}

ion-list {
    background-color: transparent;
}

ion-item {
    --background: rgba(0, 0, 0, 0);
    --border-color: rgba(0, 0, 0, 0);
}

+ Card
In css change.

ion-card.card-today {
    border-left: 5px solid #4a90e2;
    cursor: pointer;
}

ion-card.card-today-click {
    border-left: 5px solid #4a90e2;
    cursor: pointer;
    --background: #4a90e2;

}

In html change.

 <ion-card [ngClass]="{'card-today': !click, 'card-today-click': click}" (click)="openDetail()" tappable>

In typescript add and change.

click = false;

async openDetail() {

    this.click = true;
    let modal = await this.modalController.create({
      component: DetailPage,
      componentProps: { value: 123, },
      cssClass: 'my-custom-modal-css'

    });

    modal.onDidDismiss().then(() => {
      this.click = false;
    });

    await modal.present();
  }

+ header
In css add.

.header {
    --background: #4a90e2;
}

.title-text {
    --color: white;
    font-weight: bold;
}

In html change.

<ion-header no-border>
  <ion-toolbar class="header">
    <ion-item lines="none">
      <ion-title class="title-text">CLIENT NAME</ion-title>
      <ion-icon slot="end" mode="ios" name="arrow-down" (click)="dismiss()" style="cursor: pointer; color: white;">
      </ion-icon>
    </ion-item>
  </ion-toolbar>

+ footer
In css add.

ion-col {
    --ion-grid-column-padding: 0px;
}

ion-grid {
    --ion-grid-padding: 0px;
}

ion-content {
    --background: #4a90e2;
}

ion-footer {
    --background: #4a90e2;
}

.footer {
    --background: #3776c0;
    --min-height: 0px;
}

ion-button.button-footer {
    --background: #4587d5;
    --box-shadow: none;
    text-transform: none !important;
    font-size: 110% !important;
}

In html change.

ion-footer>
  <!-- <div class="row">
    <div class="column" style="background-color:#aaa;">
      <h3 style="text-align: center">Column 1</h3>
    </div>
    <div class="column" style="background-color:#bbb;">
      <h3 style="text-align: center;">Column 2</h3>
    </div>
  </div> -->
  <ion-toolbar class="footer">
    <section class="full-width">
      <ion-button class="button-footer" expand="full" *ngIf="!Arrived" (click)="arrived()">Arrived</ion-button>

      <ion-grid *ngIf="Arrived">
        <ion-row>
          <ion-col size="6">
            <div>
              <ion-button class="button-footer" expand="full" (click)="applyForComponent()">Apply for<br>Component
              </ion-button>
            </div>
          </ion-col>
          <ion-col size="6">
            <div>
              <ion-button class="button-footer" *ngIf="!inputCamera" expand="full" (click)="compleRepair()">Comple
                Repair
              </ion-button>
              <ion-button class="button-footer" *ngIf="inputCamera" expand="full" (click)="imageInput.click()">Comple
                Repair
              </ion-button>
              <input type="file" id="file-input" accept="image/*;capture=camera" style="display: none;"
                (change)="uploadImage($event)" multiple #imageInput>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </section>
  </ion-toolbar>
</ion-footer>

I try to make div as button because of padding in bottom, but still have problem.

+ content
In css add.

ion-button.button-content {
    --background: rgba(255, 255, 255, 0.1);
    --box-shadow: none;
    --border-style: solid;
    --border-width: 1px;
    --border-color: white;
}

In html change.

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

    <ion-item lines="none">
      <ion-label>
        <p style="color:white; font-weight: lighter;">CONTACT</p>
        <h1 style="color:white">Someone</h1>
      </ion-label>
    </ion-item>
  </ion-list>

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

To do next
+ Change font color when click
+ Add border in modal
+ Change ion-list size

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

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