# <center>14^th^ August, 2019</center>

###### tags: `Daily Internship Documentation`
---
## 31^st^ Day of Internship

## Summary

Fix the card structure of the detail information of the report problem from the user.

URL:
* [**NTUST_RepairmanApp Github ver 2019.08.14**](https://github.com/ianjoseph2204/NTUST_RepairmanApp/tree/7323e747cc25f45f221f2ccca20b69dd4112bdbe)

---
## Weekly Presentation Powerpoint

{%slideshare IanJoseph13/20190814-ian-josephstatusreport %}

---
## Documentation

### 1. Report Repair Page
#### 1.1 report-repair.page.html

1. Modify the back button.

 <span class="back-button">
        <ion-icon class="arrow-back" (click)="backButton()" ion-text-left="10px" size="large" name="ios-arrow-back"></ion-icon>
        <span class="report-repairing-progress">Report repairing progress</span>
      </span>

2. Add new separator between detail property & detail information:

  <!--Card for User report information-->
  <ion-card>
    <span class="detail-logo">
      <ion-icon color="primary" name="pin"></ion-icon>
    </span>
    <span class="detail-property">Location</span>
    <span class="detail-separator">:</span>
    <span class="detail-information">{{device_building_position}}, {{device_placement_position}}</span>

    <span class="detail-logo">
      <ion-icon color="primary" name="pricetag"></ion-icon>
    </span>
    <span class="detail-property">Device ID</span>
    <span class="detail-separator">:</span>
    <span class="detail-information">{{device_id}}</span>

    <span class="detail-logo">
      <ion-icon color="primary" name="pricetag"></ion-icon>
    </span>
    <span class="detail-property">Device Type</span>
    <span class="detail-separator">:</span>
    <span class="detail-information">{{device_type}}</span>

    <span class="detail-logo">
      <ion-icon color="primary" name="person"></ion-icon>
    </span>
    <span class="detail-property">Repairman</span>
    <span class="detail-separator">:</span>
    <span class="detail-information">{{employee_name}}</span>

    <span class="detail-logo">
      <ion-icon color="primary" name="warning"></ion-icon>
    </span>
    <span class="detail-property">Problem</span>
    <span class="detail-separator">:</span>
    <span class="detail-information">{{problem_description}}</span>
  </ion-card>

  <!--Input repair description-->
  <ion-textarea>

  </ion-textarea>

#### 1.2 report-repair.page.scss

1. Simplfy some classes with the same attributes into one declaration.

.detail-logo, .detail-property, .detail-information, .detail-separator{
    position: relative;
    min-height: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
    left: 0;
    font-size: 15px;
    float: left;
}

2. Add a new class to set the position of detail-logo.

.detail-logo{
    width: 7%;
    padding-left: 10px;
}

3. Create a class to seperate between thedetail information and detail category for the problem report detail.

.detail-separator{
    width: 2%
}

---
## Result