#183 SonarQuest FE / Quests / Rework quests presentation layout (#187)

viadee · Feb 27, 2019 · 3bf61cf · 3bf61cf
1 parent 3e1e00c
commit 3bf61cf
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 41 deletions.
diff --git a/...ntend/src/app/pages/quest-page/components/available-quests/available-quests.component.css b/...ntend/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
-}
+#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/...tend/src/app/pages/quest-page/components/available-quests/available-quests.component.html b/...tend/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>
+</mat-card>
diff --git a/...src/app/pages/quest-page/components/participated-quests/participated-quests.component.css b/...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
-}
+#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/...rc/app/pages/quest-page/components/participated-quests/participated-quests.component.html b/...rc/app/pages/quest-page/components/participated-quests/participated-quests.component.html
@@ -34,17 +34,18 @@ <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">
       <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>
+  </mat-card-content>