doneit-web/src/app/modals/document-detail/document-detail.page.html

<ion-menu autoHide="false" side="end" content-id="main-content">
  <ion-header>
    <ion-toolbar translucent>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item >
        <ion-icon name="documents" slot="start"></ion-icon>
        <ion-label>Efectuar Despacho</ion-label>
      </ion-item>
      <ion-item >
        <ion-icon name="arrow-undo" slot="start"></ion-icon>
        <ion-label>Pedido de Parecer</ion-label>
      </ion-item>
      <ion-item >
        <ion-icon name="arrow-redo" slot="start"></ion-icon>
        <ion-label>Pedido de Deferimento</ion-label>
      </ion-item>
      <ion-item >
        <ion-icon name="calendar" slot="start"></ion-icon>
        <ion-label>Marcar reunião</ion-label>
      </ion-item>
      <ion-item >
        <ion-icon name="trash" slot="start"></ion-icon>
        <ion-label>Descartar</ion-label>
      </ion-item>
      <ion-item disabled>
        <ion-icon name="paper-plane" slot="start"></ion-icon>
        <ion-label>Enviar para pendentes</ion-label>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-menu>
<div class="ion-page" id="main-content">
  <ion-menu-button></ion-menu-button>
</div>

<ion-content>
  <div class="main-content d-flex">
    <div class="content d-flex flex-column" >
      <div class="main-header">
        <div class="title-content">
          <app-btn-modal-dismiss></app-btn-modal-dismiss>
          <div class="middle">
            <ion-label class="title">{{LoadedDocument.Subject}}</ion-label>
          </div>
          <div class="div-icon">
              <ion-menu-button autoHide="false">
                <ion-icon name="ellipsis-vertical-outline"></ion-icon>
              </ion-menu-button>
          </div>
        </div>
      </div>
      <div class="upper-content">
        <div class="content-details">
          <ion-label>
            <p><span class="date">Sexta, 14 de Abril</span><span class="label">{{LoadedDocument.Type}}</span></p>
          </ion-label>
        </div>
      </div>
      <div class="line"></div>
      <div class="middle-content">
        <h5>Intervenientes</h5>
        <ion-item class="ion-no-margin ion-no-padding">
          <ion-label>
            <div>
              <p>{{LoadedDocument.Interveners}}</p>
            </div>
          </ion-label>
        </ion-item>
        <h5>Status</h5>
        <ion-item class="ion-no-margin ion-no-padding">
            <p >{{LoadedDocument.Status}}</p>
        </ion-item>
      </div>
      <div class="bottom-content width-100">
        <ion-list>
          <h5>Documentos Anexados</h5>
          <ion-item class="ion-no-margin ion-no-padding">
          <ion-label
          >
            <p class="attach-title-item">{{LoadedDocument.Subject}}<span class="span-right color-red btn-size"><ion-icon hidden name="close"></ion-icon></span></p>
            <p><span class="span-left">{{LoadedDocument.UserName}}</span><span class="span-right"></span></p>
          </ion-label>
        </ion-item>
        </ion-list>
      </div>

    </div>
    <div class="aside-right flex-column height-100">
      <div class="buttons">
        <button class="btn-ok" shape="round" >Efectuar Despacho</button>
        <button class="btn-cancel" shape="round" >Descartar</button>
        <div class="solid"></div>
        <button  class="btn-cancel" shape="round" >Solicitar Parecer</button>
        <button  class="btn-cancel" shape="round" >Pedido de Deferimento</button>
        <button  class="btn-cancel" shape="round" >Marcar Reunião</button>
        <button class="btn-cancel" shape="round" >Enviar para Pendentes</button>
        <div class="solid"></div>
        <button class="btn-cancel" shape="round" >Executar</button>
        <button class="btn-cancel" shape="round" >Delegar</button>
        <button class="btn-cancel" shape="round" >Arquivar</button>
      </div>
    </div>

    <div>
      <ion-list>
        <ion-list-header>
          <ion-label>
            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
          </ion-label>
        </ion-list-header>
        <ion-item>
          <ion-label>
            <h3>
              <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
            </h3>
            <p>
              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
            </p>
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-label>
            <h3>
              <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
            </h3>
            <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-label>
            <h3>
              <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
            </h3>
            <p>
              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
            </p>
          </ion-label>
        </ion-item>
        <ion-button color="medium" shape="round" expand="block">
          <!-- <ion-icon color="medium" name="attach" slot="start"></ion-icon> -->
          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
        </ion-button>
      </ion-list>
    </div>
  </div>
</ion-content>