From de454ec088dbcfcdc85d5bb37aaee4a2467d72c9 Mon Sep 17 00:00:00 2001
From: Kevin Haase <kevin.haase@viadee.de>
Date: Wed, 27 Feb 2019 21:40:36 +0100
Subject: [PATCH] #183 SonarQuest FE / Quests / Rework quests presentation
 layout

---
 .../available-quests.component.css            | 49 +++++++++++++------
 .../available-quests.component.html           | 10 ++--
 .../participated-quests.component.css         | 49 +++++++++++++------
 .../participated-quests.component.html        | 13 +++--
 4 files changed, 80 insertions(+), 41 deletions(-)

diff --git a/sonarQuest-frontend/src/app/pages/quest-page/components/available-quests/available-quests.component.css b/sonarQuest-frontend/src/app/pages/quest-page/components/available-quests/available-quests.component.css
index 3423814d..9d243d02 100644
--- a/sonarQuest-frontend/src/app/pages/quest-page/components/available-quests/available-quests.component.css
+++ b/sonarQuest-frontend/src/app/pages/quest-page/components/available-quests/available-quests.component.css
@@ -1,14 +1,35 @@
-div#tobecovered{
-    position: relative;
-}
-
-div#tobecovered img.cover{
-    position: absolute;
-    /* position in top left of #tobecovered */
-    top: 0; /* top of #tobecovered */
-    left: 0; /* left of #tobecovered */
-}
-
-mat-card#questcard {
-    width: 250px
-}
\ No newline at end of file
+#questcard {
+  background-image: url('/assets/images/dagger.png');
+  background-repeat: no-repeat;
+  background-position: top;
+  background-blend-mode: difference;
+  width: 100%;
+}
+
+.quest-container {
+  display: grid;
+  grid-column-gap: 10px;
+}
+
+@media only screen and (min-width: 320px) and (max-width: 600px){
+  .quest-container {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media only screen and (min-width: 601px) and (max-width: 980px){
+  .quest-container {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+@media only screen and (min-device-width: 981px) and (max-width: 1600px){
+  .quest-container {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+
+@media only screen and (min-device-width: 1601px){
+  .quest-container {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+}
diff --git a/sonarQuest-frontend/src/app/pages/quest-page/components/available-quests/available-quests.component.html b/sonarQuest-frontend/src/app/pages/quest-page/components/available-quests/available-quests.component.html
index e3f643d1..bbdce1e5 100644
--- a/sonarQuest-frontend/src/app/pages/quest-page/components/available-quests/available-quests.component.html
+++ b/sonarQuest-frontend/src/app/pages/quest-page/components/available-quests/available-quests.component.html
@@ -42,9 +42,8 @@ <h2>
         {{"QUEST_PAGE.AVAILABLE_QUESTS_FOR_WORLD"| translate}} <strong>{{currentWorld?.name}}</strong>
       </h2>
     </div>
-    <mat-grid-list cols="4" rowHeight="2:1">
-      <mat-grid-tile *ngFor="let quest of availableQuests">
-        <mat-card id="questcard">
+    <div *ngFor="let quest of participatedQuests" class="quest-container">
+      <mat-card id="questcard">
           <mat-card-header>
             <img mat-card-avatar [src]="quest.image">
             <mat-card-title>
@@ -74,7 +73,6 @@ <h3>{{quest.title}}</h3>
             </div>
           </mat-card-actions>
         </mat-card>
-      </mat-grid-tile>
-    </mat-grid-list>
+      </div>
   </mat-card-content>
-</mat-card>
\ No newline at end of file
+</mat-card>
diff --git a/sonarQuest-frontend/src/app/pages/quest-page/components/participated-quests/participated-quests.component.css b/sonarQuest-frontend/src/app/pages/quest-page/components/participated-quests/participated-quests.component.css
index 3423814d..9d243d02 100644
--- a/sonarQuest-frontend/src/app/pages/quest-page/components/participated-quests/participated-quests.component.css
+++ b/sonarQuest-frontend/src/app/pages/quest-page/components/participated-quests/participated-quests.component.css
@@ -1,14 +1,35 @@
-div#tobecovered{
-    position: relative;
-}
-
-div#tobecovered img.cover{
-    position: absolute;
-    /* position in top left of #tobecovered */
-    top: 0; /* top of #tobecovered */
-    left: 0; /* left of #tobecovered */
-}
-
-mat-card#questcard {
-    width: 250px
-}
\ No newline at end of file
+#questcard {
+  background-image: url('/assets/images/dagger.png');
+  background-repeat: no-repeat;
+  background-position: top;
+  background-blend-mode: difference;
+  width: 100%;
+}
+
+.quest-container {
+  display: grid;
+  grid-column-gap: 10px;
+}
+
+@media only screen and (min-width: 320px) and (max-width: 600px){
+  .quest-container {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media only screen and (min-width: 601px) and (max-width: 980px){
+  .quest-container {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+@media only screen and (min-device-width: 981px) and (max-width: 1600px){
+  .quest-container {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+
+@media only screen and (min-device-width: 1601px){
+  .quest-container {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+}
diff --git a/sonarQuest-frontend/src/app/pages/quest-page/components/participated-quests/participated-quests.component.html b/sonarQuest-frontend/src/app/pages/quest-page/components/participated-quests/participated-quests.component.html
index bd9bb8fb..c1d051f0 100644
--- a/sonarQuest-frontend/src/app/pages/quest-page/components/participated-quests/participated-quests.component.html
+++ b/sonarQuest-frontend/src/app/pages/quest-page/components/participated-quests/participated-quests.component.html
@@ -34,6 +34,8 @@ <h3>{{"TABLE.INFO.NO_ENTRIES"| translate}}</h3>
   </mat-card-content>
 </mat-card>
 
+
+
 <mat-card *ngIf="currentWorld?.usequestcards">
   <mat-card-content>
     <div align="center" *ngIf="currentWorld?.name">
@@ -41,10 +43,9 @@ <h2>
         {{"QUEST_PAGE.MY_QUESTS_FOR_WORLD"| translate}} <strong>{{currentWorld?.name}}</strong>
       </h2>
     </div>
-    <mat-grid-list cols="4" rowHeight="2:1" gutterSize="10px">
-      <mat-grid-tile *ngFor="let quest of participatedQuests">
-        <div id="tobecovered">
-          <img src="assets\images\dagger.png" class="cover" />
+        <div *ngFor="let quest of participatedQuests" class="quest-container">
+
+
           <mat-card id="questcard">
             <mat-card-header>
               <img mat-card-avatar [src]="quest.image">
@@ -72,6 +73,4 @@ <h3>{{quest.title}}</h3>
             </mat-card-actions>
           </mat-card>
         </div>
-      </mat-grid-tile>
-    </mat-grid-list>
-  </mat-card-content>
\ No newline at end of file
+  </mat-card-content>