# <center>5^th^ July, 2019</center>

###### tags: `Daily Internship Documentation`
---
## 3^rd^ Day of Internship

## Summary

Today, I research and implement the dropdown menu in HTML and CSS. A drop down menu will pop up when the user press the "more" button.

---
## Documentation

### 1. Dashboard Page
#### 1.1 dashboard.page.ts

there are no changes to the typescript file

#### 1.2 dashboard.page.html

1. Add a comment above 'more' button. Change the properties in 'more' button from ordinary button into drop-down menu button. **(line 9-16)**
2. Add a comment above 'star' button. **(line 20)**
3. Switch the position of 'Report Dispenser' button with 'Nearby Dispenser' button. Add a comment above them. **(line 39-54)**
4.

<ion-header no-border [style.height.px]="headerHeight" [style.width.px]="screenWidth">
  <div class="background-image" [ngStyle]="{'background-image': 'url(' + url_dispenser_picture + ')'}">

    <div class="overlay">
      <div class="logo">
        <img src="assets/dashboard/acuo_logo.png">
      </div>

      <!--More button for dropdown options-->
      <span class="dropdown" style="float: right;">
        <button class="pressed dropbtn">
          <ion-icon name="more" size="large"></ion-icon>
          <div class="dropdown-content">
            <button href="#" >Maintenance records</button>
            <button href="#" >Detailed information</button>
          </div>
        </button>
      </span>

      <!--Star button for tracking feature-->
      <span>
        <button class="ripple header-button">
          <ion-icon name="star-outline" size="large"></ion-icon>
        </button>
      </span>

      <div class="jellyfish-icon" [style.top.px]="jellyfishIconTop" [style.left.px]="jellyfishIconLeft">
        <img alt="avatar" src="assets/dashboard/jellyfishIcon.png">
      </div>
    </div>

  </div>
</ion-header>

<ion-content [style.height.px]="contentHeight" [style.width.px]="screenWidth" position="absolute">

  <div class="content-button-space">

    <!--Report Dispenser button-->
    <span class="content-button">
      <button class="ripple full-button">
        <ion-icon name="warning" size="large"></ion-icon>
        <p>Report dispenser</p>
      </button>
    </span>

    <!--Nearby Dispenser button-->
    <span class="content-button ">
      <button class="ripple full-button">
        <ion-icon name="pin" size="large"></ion-icon>
        <p>Nearby dispenser</p>
      </button>
    </span>

  </div>

  <div class="report-status">
    No Report Problem
  </div>

</ion-content>

#### 1.1 dashboard.page.scss

1. Add drop-down menu part. **(line 10-50)**
2. Simplified the height & width configuration for *.background-image* & *.overlay* class into single configuration. **(line 60-63)**

button {
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    overflow: hidden;
    outline: none;
    z-index: 1;
}

.dropbtn {
    background-color: transparent;
    border: none;
    color: white;
}
 
.dropdown {
    top: 20px;
    right: 20px;
    position: relative;
    display: inline-block;
}
    
.dropdown-content {
    position: absolute;
    display: none;
    right: 0;
    border: none;
    background-color: #f9f9f9;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 8px;
}
  
.dropdown-content button {
    color: black;
    padding: 20px;
    top: 30%;
    height: 50px;
    text-decoration: none;
    display: block;
    border-bottom: black;
    text-align: center;
}
  
.dropdown-content button:hover {background-color: #f1f1f1;}
  
.dropdown:hover .dropdown-content {
    display: block;
}

//=======================
// Header Part CSS 
//=======================
.ion-header {
    position: relative;
    width: 100%;
}

.background-image, .overlay{
    height: 100%;
    width: 100%;
}
.background-image{
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.overlay {
    z-index: 1;
    background-color: rgba($color: #000000, $alpha: 0.5);
}

.jellyfish-icon{
    position: absolute;
    height: 120px;
    width: 120px;
    border-radius: 50px;
}

.logo{
    position: absolute;
    top: 20px;
}

.header-button{
    position: relative;
    top: 20px;
    right: 20px;
    float: right;
    height:40px;
    width: 40px;
    color: white;
}

.logo {
    height: 50px;
    width: 90px;
    left: 33px;
}

//=======================
// Content Part CSS
//=======================
.content-button-space{
    position: relative;
    height:65%;
    width: 100%;
}

.content-button{
    position: relative;
    top: 0px;
    left: 0px;
    float: left;
    height:100%;
    width: 50%;
    text-align: center;
    color: black;
}

.full-button{
    position: relative;
    height: 100%;
    width: 100%;
}

.report-status{
    text-align: center;
    height: 35%;
    bottom: 0px;
    border-top: 1px solid #e9e9e9;
}

/* Ripple effect */
.ripple {
    background-position: center;
    transition: background 0.8s;
}

.ripple:hover {
    background:transparent radial-gradient(circle,  transparent 1%, white 1%) center/15000%;
}

.ripple:active {
    color: #D3D3D3;
    size: 100%;
    transition: background 0s;
}

//Pressed effect

.pressed:active {
  transform: translateY(4px);
}

---
## Result

The look of the dropdown menu: