---
# System prepended metadata

title: '<center>14^th^ August, 2019</center>'
tags: [Daily Internship Documentation]

---

# <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.
```htmlmixed=4
 <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:
```htmlmixed=14
  <!--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.
```css=26
.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.
```css=36
.detail-logo{
    width: 7%;
    padding-left: 10px;
}
```

3. Create a class to seperate between thedetail information and detail category for the problem report detail.
```css=54
.detail-separator{
    width: 2%
}
```

---
## Result

![](https://i.imgur.com/1an1PMP.jpg)
