---
# System prepended metadata

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

---

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

###### tags: `Daily Internship Documentation`
---
## 32^nd^ Day of Internship

## Summary



URL:
* [**NTUST_RepairmanApp Github ver 2019.08.15**](https://github.com/ianjoseph2204/NTUST_RepairmanApp/tree/0f23757ef7cb2358f4d40ab585992d60c5c393aa)

---
## Documentation

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

1. Create the upload image part:

```htmlmixed=52
 <!--Input repair description-->
  <ion-card>
    <div class="description-text">Description</div>

    <div class="description-textarea">
      <ion-textarea placeholder="Write down your progress on this repair..."></ion-textarea>
    </div>

    <div class="description-text">Upload photos</div>

    <div class="image-container">
      <span class="image-block">
        <div class="image-upload-space">
          <div class="camera-icon">
            <ion-icon name="camera" size="large"></ion-icon>
          </div>
        </div>
      </span>

      <span class="image-block">
        <div class="image-upload-space">
          <div class="camera-icon">
            <ion-icon name="camera" size="large"></ion-icon>
          </div>
        </div>
      </span>

      <span class="image-block">
        <div class="image-upload-space">
          <div class="camera-icon">
            <ion-icon name="camera" size="large"></ion-icon>
          </div>
        </div>
      </span>
    </div>

    <div style="margin: 0 10px 10px 10px">
      <ion-button expand="block">SUBMIT</ion-button>
    </div>
  </ion-card>

```

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

1. Create CSS classes for upload image UI.

```css=61
//=======================
// Content Part CSS
//=======================

.description-textarea, .description-text{
    position: relative;
    margin-top: 10px;
    margin-left: 10px;
    font-size:  15px;
}

.description-text{
    font-weight: bold;
}

.description-textarea{
    margin-right: 10px;
}

ion-textarea{
    border-bottom: solid 1.5px lightgrey;
}

.image-container, .image-block, .image-upload-space{
    position: relative;
}

.image-container{
    height: 130px;
    width: 100%;
    display: table;
    margin-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
}

.image-block{
    width: 33.33%;
    height: 100%;
    float: left;
}

.image-upload-space {
    height: 120px;
    width: 90px;
    border-radius: 2px;
    border: dashed 1.5px #d9d9d9;
    background-color: #fbfbfb;
    margin: 0 auto;
}

.camera-icon{
    position: relative;
    height: 32px;
    width: 32px;
    margin: 50% auto;
}

```

---
## Result

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