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.

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

To do next

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

18:00 - Leave BMW Lab.

tags: on-intern