set height styles of detail and container after search

haerrel · Jun 9, 2019 · 2415d98 · 2415d98
1 parent 609b1cc
commit 2415d98
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 66 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/main/typescript/angularclient/src/app/app.component.css b/src/main/typescript/angularclient/src/app/app.component.css
@@ -1,5 +1 @@
 @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
-
-.checked {
-  color: orange;
-}
diff --git a/src/main/typescript/angularclient/src/app/header/header.component.html b/src/main/typescript/angularclient/src/app/header/header.component.html
@@ -43,7 +43,7 @@
   Die Tags sollten irgendwo rechts in der Suchleiste dargestellt werden. So wie im Mock.
   Habe CSS zum Demozweck eingefügt, kannst komplett löschen.
   -->
-  <div class="d-flex flex-row w-50 m-md-auto">
+  <div class="d-flex flex-row w-75 m-md-auto">
     <div id="container" >
       <input class="form-control w-100 mr-sm-2" type="search" placeholder="Search" aria-label="Search" #searchInput (keyup)="search(searchInput)">
       <div id="click">

diff --git a/...ypescript/angularclient/src/app/mixins/vertical-app-list/vertical-app-list.component.html b/...ypescript/angularclient/src/app/mixins/vertical-app-list/vertical-app-list.component.html
@@ -1,7 +1,7 @@
-<div class="shadow-lg ml-5 overflow-auto" style="width: 270px">
+<div id="fullheight" class="container shadow-lg ml-2 overflow-auto" style="height:100%; min-width: 320px">
   <div *ngFor="let app of this.apps">
 
-    <div class="card mb-3 shadow-sm" [routerLink]="[this.routerPrefix, app.id]">
+    <div class="card mt-2 shadow-sm" [routerLink]="[this.routerPrefix, app.id]">
       <div class="row no-gutters">
         <div class="col-md-4">
           <div class="text-center">

diff --git a/src/main/typescript/angularclient/src/app/routes/root/app-details/app-details.component.html b/src/main/typescript/angularclient/src/app/routes/root/app-details/app-details.component.html
@@ -1,58 +1,56 @@
-<div class="pt-4 d-flex flex-row">
+<div class="pt-4 d-flex flex-row" id="fullheight">
 
   <app-vertical-app-list [apps]="this.sidebarApps" routerPrefix='/home/apps/'></app-vertical-app-list>
 
-  <div class="flex-grow-1">
-    <div class="container">
-      <div class="row">
-        <!-- headline -->
-        <div class="col-sm-12">
-          <h1 class="d-inline-block align-middle mr-2">{{this.app.title}}</h1>
-          <img class="d-inline-block align-middle mr-2" [src]="this.app.thumbnail" width="60" height="60"/>
-          <a class="d-inline-block align-middle mr-2" [href]="this.app.link">
-            Hier gehts zur App
-            <i class="fa fa-external-link" aria-hidden="true"></i>
-          </a>
-        </div>
+  <div class="flex-grow-1 mx-4 shadow-lg overflow-auto">
+    <div class="row">
+      <!-- headline -->
+      <div class="col-sm-12">
+        <h1 class="d-inline-block align-middle mr-2">{{this.app.title}}</h1>
+        <img class="d-inline-block align-middle mr-2" [src]="this.app.thumbnail" width="60" height="60"/>
+        <a class="d-inline-block align-middle mr-2" [href]="this.app.link">
+          Hier gehts zur App
+          <i class="fa fa-external-link" aria-hidden="true"></i>
+        </a>
       </div>
-      <hr>
-      <div class="container-fluid">
-        <div class="row">
-          <div class="col-sm-6">
-            <!-- COLUMN 1 -->
-            <div class="pb-3">
-              <h5>Tags</h5>
-              <div class="d-inline mr-2" id="tagbar" *ngFor="let tag of this.app.tags">
-                <a [routerLink]="" (click)="addTagToSearch(tag)">#{{tag.text}}</a>
-              </div>
-            </div>
-            <div class="pb-3">
-              <h5>Bilder</h5>
-              <div class="d-inline mr-2" id="images" *ngFor="let thumbnail of [1,2]"> <!-- TODO this.app.images, ggf. auch eigene images componente -->
-                <img src="https://via.placeholder.com/40"/>
-              </div>
-            </div>
-            <div class="pb-3">
-              <h5>Beschreibung</h5>
-              <p>{{this.app.text}}</p>
-            </div>
-            <div class="pb-3">
-              <h5>Zum Entwickler</h5>
-              <p>{{this.app.developer}}</p> <!-- TODO this.app.developer not served by backend -->
-            </div>
-            <div class="pb-3">
-              <h5>Datum der Veröffentlichung</h5>
-              <p>{{this.app.datePublished}}</p>
+    </div>
+    <hr>
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-sm-6">
+          <!-- COLUMN 1 -->
+          <div class="pb-3">
+            <h5>Tags</h5>
+            <div class="d-inline mr-2" id="tagbar" *ngFor="let tag of this.app.tags">
+              <a [routerLink]="" (click)="addTagToSearch(tag)">#{{tag.text}}</a>
             </div>
           </div>
-          <div class="col-sm-6">
-            <!-- COLUMN 2 -->
-            <div>
-              <b>Bewertung: </b>
-              <app-star-rating [rating]="this.app.rating" [overall]="5"></app-star-rating>
-              <button class="btn btn-primary px-3" (click)="add(tagid)"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>
+          <div class="pb-3">
+            <h5>Bilder</h5>
+            <div class="d-inline mr-2" id="images" *ngFor="let thumbnail of [1,2]"> <!-- TODO this.app.images, ggf. auch eigene images componente -->
+              <img src="https://via.placeholder.com/40"/>
             </div>
           </div>
+          <div class="pb-3">
+            <h5>Beschreibung</h5>
+            <p>{{this.app.text}}</p>
+          </div>
+          <div class="pb-3">
+            <h5>Zum Entwickler</h5>
+            <p>{{this.app.developer}}</p> <!-- TODO this.app.developer not served by backend -->
+          </div>
+          <div class="pb-3">
+            <h5>Datum der Veröffentlichung</h5>
+            <p>{{this.app.datePublished}}</p>
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <!-- COLUMN 2 -->
+          <div>
+            <b>Bewertung: </b>
+            <app-star-rating [rating]="this.app.rating" [overall]="5"></app-star-rating>
+            <button class="btn btn-primary px-3" (click)="add(tagid)"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/main/typescript/angularclient/src/app/routes/root/home/home.component.html b/src/main/typescript/angularclient/src/app/routes/root/home/home.component.html
@@ -1,6 +1,5 @@
-<div class="contentContainer d-flex flex-row">
-  <div class="w-25"></div>
-  <div class="contentContainer w-50 mt-4">
+<div class="container d-flex flex-row" id="fullheight">
+  <div class="container h-100 mt-4 mx-auto">
     <div *ngIf="isSearchEmpty() && noTags(); else listSearchResults">
 
       <!-- Beliebtesten Apps -->
@@ -50,17 +49,13 @@ <h3 class="font-weight-bold">Günstigste Apps</h3>
     </div>
 
     <ng-template #listSearchResults>
-      <div *ngFor="let app of this.getSearchApps()">
-        <app-appcard [app]="app"></app-appcard>
-      </div>
+      <diV class="d-flex flex-wrap shadow-lg">
+        <div *ngFor="let app of this.getSearchApps()">
+          <app-appcard [app]="app"></app-appcard>
+        </div>
+      </diV>
     </ng-template>
 
   </div>
 
 </div>
-<!--
-<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
-<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
-<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
-<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>
--->
diff --git a/src/main/typescript/angularclient/src/styles.css b/src/main/typescript/angularclient/src/styles.css
@@ -1 +1,15 @@
 /* You can add global styles to this file, and also import other style files */
+
+.checked {
+  color: orange;
+}
+
+html {
+  height: 100%;
+}
+
+* { padding: 0; margin: 0; }
+html, body, #fullheight {
+  min-height: 90% !important;
+  height: 95%;
+}