added a container when the search is not found

aline-borges · Oct 29, 2020 · 20e788a · 20e788a
1 parent acc8f75
commit 20e788a
Show file tree

Hide file tree

Showing 11 changed files with 152 additions and 99 deletions.
diff --git a/src/app/components/hotel/hotel.component.html b/src/app/components/hotel/hotel.component.html
@@ -18,18 +18,17 @@
       <i class="fas fa-search"></i>
     </button>
   </div>
-
+  <div class="show-filters-buttons">
+    <button id="show-search-button" (click)="showForm()">
+      Mostrar Pesquisa
+      <i class="fas fa-plus"></i>
+    </button>
+    <button id="filter-button" (click)="showFilters()">
+      Filtrar
+      <i class="fas fa-filter"></i>
+    </button>
+  </div>
   <div *ngIf="hotels.length > 0">
-    <div class="show-filters-buttons">
-      <button id="show-search-button" (click)="showForm()">
-        Mostrar Pesquisa
-        <i class="fas fa-plus"></i>
-      </button>
-      <button id="filter-button" (click)="showFilters()">
-        Filtrar
-        <i class="fas fa-filter"></i>
-      </button>
-    </div>
     <div *ngIf="hotels" class="header-hotel-bar">
       <p class="hotels-result"><span class="quantity-result">{{ this.quantity }}</span> {{ this.quantity == '1' ? 'hotel' : 'hotéis' }} para <span class="place-result">{{ this.place }}</span></p>
       <div class="ordenation-aside">
@@ -190,8 +189,9 @@
       </li>
     </ul>
   </div>
-
-  <div *ngIf="hotels.length === 0">
-    Não encontramos nenhum resultado para sua busca
+  <div class="not-found" *ngIf="hotels.length === 0">
+    <img class="not-found-image" src="../../../assets/images/pool.gif" alt="not found">
+    <p class="not-found-title">Ops! Busca não encontrada.</p>
+    <p class="not-found-message">Relaxa que temos várias ofertas esperando por você. Faça uma nova busca!</p>
   </div>
 </div>
diff --git a/src/app/components/hotel/hotel.component.scss b/src/app/components/hotel/hotel.component.scss
@@ -5,6 +5,8 @@ $superDarkBlue: #093282;
 $tuleDarkBlue: #093182b4;
 $blue: #055AFE;
 $darkBlue: #0547C7;
+$purple: #5F42A0;
+$lightPurple: #7C52B4;
 $lightBlue: #D1D6EE;
 $extraLightBlue: #BBC1E1;
 $white: #FEFEFE;
@@ -54,6 +56,21 @@ $black: #000000;
   color: $white;
 }
 
+.not-found {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  @include for-tablet-portrait-up {
+    margin: auto;
+  }
+
+  @include for-phone-only {
+    margin: auto;
+  }
+}
+
 #hotel-page {
   display: flex;
   flex-direction: column;
@@ -361,33 +378,31 @@ $black: #000000;
   }
 }
 
-.background-place {
-  border: 0.2rem dotted $ice;
-  outline: none;
-  padding: 0.8rem 1.6rem;
-  background: transparent;
+.not-found-message,
+.not-found-title {
   font-family: 'Montserrat', sans-serif;
-  margin: 20rem 2.4rem 0 5.0rem;
-  font-weight: 700;
-  cursor: pointer;
-  color: $ice;
-  width: fit-content;
-  font-size: 1.2rem;
+  letter-spacing: .1rem;
+  margin-top: 1.0rem;
 
   @include for-tablet-portrait-up {
-    font-size: 2rem;
-    padding: 1.5rem 3rem;
+    text-align: center;
   }
 
   @include for-phone-only {
-    margin: 3rem auto;
-    max-width: 25rem;
+    text-align: center;
   }
+}
 
-  &:hover {
-    color: $white;
-    border-color: $white;
-  }
+.not-found-title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: $purple;
+}
+
+.not-found-message {
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: $lightPurple;
 }
 
 /* FORMS */
@@ -803,13 +818,14 @@ $black: #000000;
 
 /* IMAGES */
 
-#loading {
-  width: 40rem;
-  margin: 0 50rem;
+#loading,
+.not-found-image {
+  width: 35rem;
+  margin: 5rem auto;
 
   @include for-tablet-portrait-up {
-    width: 60rem;
-    margin: auto;
+    width: 25rem;
+    margin: 5rem auto;
   }
 
   @include for-phone-only {

diff --git a/src/app/components/package/package.component.html b/src/app/components/package/package.component.html
@@ -18,17 +18,17 @@
       <i class="fas fa-search"></i>
     </button>
   </div>
+  <div class="show-filters-buttons">
+    <button id="show-search-button" (click)="showForm()">
+      Mostrar Pesquisa
+      <i class="fas fa-plus"></i>
+    </button>
+    <button id="filter-button" (click)="showFilters()">
+      Filtrar
+      <i class="fas fa-filter"></i>
+    </button>
+  </div>
   <div *ngIf="packages.length > 0">
-    <div class="show-filters-buttons">
-      <button id="show-search-button" (click)="showForm()">
-        Mostrar Pesquisa
-        <i class="fas fa-plus"></i>
-      </button>
-      <button id="filter-button" (click)="showFilters()">
-        Filtrar
-        <i class="fas fa-filter"></i>
-      </button>
-    </div>
     <div *ngIf="packages" class="header-hotel-bar">
       <p class="hotels-result"><span class="quantity-result">{{ this.quantity }}</span> {{ this.quantity == '1' ? 'pacote' : 'pacotes' }} para <span class="place-result">{{ this.place }}</span></p>
       <div class="ordenation-aside">
@@ -129,7 +129,9 @@
     </ul>
   </div>
 
-  <div *ngIf="packages.length === 0">
-    Não encontramos nenhum resultado para sua busca
+  <div class="not-found" *ngIf="packages.length === 0">
+    <img class="not-found-image" src="../../../assets/images/pool.gif" alt="not found">
+    <p class="not-found-title">Ops! Busca não encontrada.</p>
+    <p class="not-found-message">Relaxa que temos várias ofertas esperando por você. Faça uma nova busca!</p>
   </div>
 </div>
diff --git a/src/app/components/package/package.component.scss b/src/app/components/package/package.component.scss
@@ -5,6 +5,8 @@ $superDarkBlue: #093282;
 $tuleDarkBlue: #093182b4;
 $blue: #055AFE;
 $darkBlue: #0547C7;
+$purple: #5F42A0;
+$lightPurple: #7C52B4;
 $lightBlue: #D1D6EE;
 $extraLightBlue: #BBC1E1;
 $white: #FEFEFE;
@@ -54,6 +56,21 @@ $black: #000000;
   color: $white;
 }
 
+.not-found {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  @include for-tablet-portrait-up {
+    margin: auto;
+  }
+
+  @include for-phone-only {
+    margin: auto;
+  }
+}
+
 #package-page {
   display: flex;
   flex-direction: column;
@@ -360,35 +377,34 @@ $black: #000000;
   }
 }
 
-.background-place {
-  border: 0.2rem dotted $ice;
-  outline: none;
-  padding: 0.8rem 1.6rem;
-  background: transparent;
+.not-found-message,
+.not-found-title {
   font-family: 'Montserrat', sans-serif;
-  margin: 20rem 2.4rem 0 5.0rem;
-  font-weight: 700;
-  cursor: pointer;
-  color: $ice;
-  width: fit-content;
-  font-size: 1.2rem;
+  letter-spacing: .1rem;
+  margin-top: 1.0rem;
 
   @include for-tablet-portrait-up {
-    font-size: 2rem;
-    padding: 1.5rem 3rem;
+    text-align: center;
   }
 
   @include for-phone-only {
-    margin: 3rem auto;
-    max-width: 25rem;
+    text-align: center;
   }
+}
 
-  &:hover {
-    color: $white;
-    border-color: $white;
-  }
+.not-found-title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: $purple;
+}
+
+.not-found-message {
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: $lightPurple;
 }
 
+
 /* FORMS */
 
 .search-form {
@@ -815,13 +831,14 @@ $black: #000000;
 
 /* IMAGES */
 
-#loading {
-  width: 40rem;
-  margin: 0 50rem;
+#loading,
+.not-found-image {
+  width: 35rem;
+  margin: 5rem auto;
 
   @include for-tablet-portrait-up {
-    width: 60rem;
-    margin: auto;
+    width: 25rem;
+    margin: 5rem auto;
   }
 
   @include for-phone-only {

diff --git a/src/app/components/ticket/ticket.component.html b/src/app/components/ticket/ticket.component.html
@@ -18,17 +18,17 @@
       <i class="fas fa-search"></i>
     </button>
   </div>
+  <div class="show-filters-buttons">
+    <button id="show-search-button" (click)="showForm()">
+      Mostrar Pesquisa
+      <i class="fas fa-plus"></i>
+    </button>
+    <button id="filter-button" (click)="showFilters()">
+      Filtrar
+      <i class="fas fa-filter"></i>
+    </button>
+  </div>
   <div *ngIf="tickets.length > 0">
-    <div class="show-filters-buttons">
-      <button id="show-search-button" (click)="showForm()">
-        Mostrar Pesquisa
-        <i class="fas fa-plus"></i>
-      </button>
-      <button id="filter-button" (click)="showFilters()">
-        Filtrar
-        <i class="fas fa-filter"></i>
-      </button>
-    </div>
     <div *ngIf="tickets" class="header-hotel-bar">
       <p class="hotels-result"><span class="quantity-result">{{ this.quantity }}</span> {{ 
         this.quantity == '1' ? 'atividade' : 'atividades' }} para 
@@ -135,9 +135,9 @@
     </ul>
   </div>
   <div class="not-found" *ngIf="tickets.length === 0">
-    <img class="not-found-image" src="../../../assets/images/search2.gif" alt="not found">
-    <p class="not-found-title">Poxa, que pena!</p>
-    <p class="not-found-message">Infelizmente, não encontramos ofertas para a sua busca.</p>
+    <img class="not-found-image" src="../../../assets/images/pool.gif" alt="not found">
+    <p class="not-found-title">Ops! Busca não encontrada.</p>
+    <p class="not-found-message">Relaxa que temos várias ofertas esperando por você. Faça uma nova busca!</p>
   </div>
 </div>