From 3b31741959fb76702f9d528066776d1793f94e72 Mon Sep 17 00:00:00 2001
From: Paul <41552663+molecula451@users.noreply.github.com>
Date: Sat, 4 Jul 2020 23:28:54 -0400
Subject: [PATCH] Super Responsive Quest Table (#7026)

* Super Responsive Quest Table

* Quest Owner row & avatar

* buttons and icons

* Config icon

* Quest Creator & Icon Locked Quest by hackaton

* Beaten quest new style

* Title creator

* tab

* improved style

* space

* improved style

* some properties

* some properties

* some properties

* responsive button & quest creator

* purge inline style

* responsive properties

* responsive

* improved code and style

* some style

* some fixes

* lint fixes

* lint fixes

* lint

* lint

* lint
---
 app/assets/v2/css/quests.css           | 124 +++++++++++++++++++++++++
 app/quests/templates/quests/index.html |  77 ++++++++++-----
 2 files changed, 178 insertions(+), 23 deletions(-)

diff --git a/app/assets/v2/css/quests.css b/app/assets/v2/css/quests.css
index b94821e65f2..54802b5b88e 100644
--- a/app/assets/v2/css/quests.css
+++ b/app/assets/v2/css/quests.css
@@ -1,3 +1,48 @@
+/* table properties */
+
+td, th {
+  white-space: nowrap;
+}
+
+.table td, 
+.table th {
+  padding: 4px;
+  border: none;
+}
+
+.table {
+  width: 100%;
+  text-align: center;
+}
+
+#explore_quests {
+  width: auto;
+}
+
+#quest_creator {
+  position: relative;
+  width: 30px;
+  height: 30px;
+  border-radius: 15px;
+  bottom: -5px;
+}
+
+.btn {
+  width: 100px;
+  position: relative;
+  border: none;
+  padding: 5px;
+  text-align: center;
+  display: inline-block;
+  top: 5px;
+  font-size: 16px;
+}
+
+.btn-secondary {
+  background-color: white;
+  color: grey;
+}
+
 .show_on_mobile {
   display: none;
 }
@@ -57,6 +102,7 @@
 .announce a {
   background-color: #f2c3c4;
   color: black;
+  width: auto;
 }
 
 .announce h4 {
@@ -77,6 +123,7 @@
 
 .announce5 a {
   background-color: #cee370 !important;
+  width: auto;
 }
 
 .announce4 h4 {
@@ -93,6 +140,7 @@
 
 .announce4 a {
   background-color: #dcc58c !important;
+  width: auto;
 }
 
 .announce3 h4 {
@@ -109,6 +157,7 @@
 
 .announce3 a {
   background-color: #b0d9d4 !important;
+  width: auto;
 }
 
 .announce2 h4 {
@@ -125,6 +174,7 @@
 
 .announce2 a {
   background-color: #849ffc !important;
+  width: auto;
 }
 
 .announce6 h4 {
@@ -141,6 +191,7 @@
 
 .announce6 a {
   background-color: #ddb9bd !important;
+  width: auto;
 }
 
 .referrals img {
@@ -1221,6 +1272,10 @@ body.green .tl {
 
 @media (max-width: 1110px) {
 
+  .btn {
+    right: auto;
+  }
+
   body.quest_battle {
     background-size: 250% !important;
   }
@@ -1348,6 +1403,28 @@ body.green .tl {
 
 @media (max-width: 991.98px) {
 
+  .table {
+    border: auto;
+  }
+
+  #quest_creator {
+    top: 0.4rem;
+  }
+
+  .btn {
+    width: -webkit-fill-available;
+    top: 0.4rem;
+    border: none;
+
+  }
+
+  .table td, 
+  .table th {
+    padding: 0.55rem;
+    border: none;
+    position: relative; 
+  }
+
   body.quest_battle {
     background-size: 250% !important;
   }
@@ -1416,6 +1493,32 @@ body.green .tl {
 
 @media (max-width: 767.98px) {
 
+  .table {
+    text-align: center;
+    border-collapse: collapse;
+    border: auto;
+  }
+
+  .btn {
+    width: -webkit-fill-available;
+    top: 0.6rem;
+    border: none;
+  }
+
+  .table td, 
+  .table th {
+    padding: 0.25rem;
+  }
+
+  #quest_creator {
+    top: 10px;
+    right: 1px;
+  }
+
+  #explore_quests {
+    top: -1px;
+  }
+
   body.quest_battle {
     background-size: 350% !important;
   }
@@ -1511,6 +1614,27 @@ body.green .tl {
 
 @media (max-width: 575.98px) {
 
+  .table {
+    border: none;
+  }
+
+  .table td {
+    padding: 5.5px;
+  }
+
+  .table th {
+    padding: 5.5px;
+  }
+
+  .btn {
+    right: auto;
+    top: 0.6rem;
+  }
+
+  #quest_creator {
+    top: 0.8rem;
+  }
+
   body.quest_battle {
     background-size: 250% !important;
   }
diff --git a/app/quests/templates/quests/index.html b/app/quests/templates/quests/index.html
index 2bceaf42016..dba740ca182 100644
--- a/app/quests/templates/quests/index.html
+++ b/app/quests/templates/quests/index.html
@@ -76,57 +76,87 @@ <h3>No Quests Found</h3>
     
       <!-- Quest table -->
   <div id="{{difficulty_level}}">    
-    <table  class="table table-fixed">
+  <div>
+    <table class="table table-responsive-lg table-hover">
      <thead>
          <tr>
-            <th scope="row"></th>
                   <th scope="col">Quest Name</th>
                   <th scope="col">Quest Prize</th>
                   <th scope="col">Difficulty</th>
                   <th scope="col">Attempts</th>
                   <th scope="col">Description</th>
                   <th scope="col">Play Time</th>
-                  <th scope="col">Play</th>
-                  <th scope="col"></th>
-                  <th scope="col">{% if difficulty_level == 'Created' %} Ownership {% endif %} </th>
+                  {% if difficulty_level == 'Created' %} 
+                  <th scope="col">Ownership</th>
+                  {% else %}
+                  <th scope="col">Quest Owner</th>
+                  {% endif %}
+                  <th scope="col">Stage</th>
          </tr>
       </thead>
       {% for unlocked, beaten, cooldown, quest in the_quests %}
             <tbody>
                <tr>
-               <th scope="row"></th>
                     <td> {{quest.title}}</td>
                     <td> {{quest.kudos_reward.humanized_name}}</td>
                     <td> {{difficulty_level}}</td>
                     <td> {{quest.ui_data.attempts_count}}</td>
                     <td> {{quest.description}}</td>
-                    <td>{{quest.est_total_time_required}} mins (reading) <br> {{quest.est_skim_time_mins}} mins (skimming)<br></td>
+                    <td> {{quest.est_total_time_required}} mins (reading) <br> {{quest.est_skim_time_mins}} mins (skimming)<br></td>
+                    {% if difficulty_level == 'Created' %} 
+                     <td>
+                       <span> 
+                         <a class="btn btn-outline-secondary" title="Edit your Quest" role="button" href="{{quest.edit_url}}"><span><i class="fa fa-cog"></i></span> Edit</a>
+                       </span> 
+                    </td>
+                    {% endif %}
+                  {% if not difficulty_level == 'Created' %}
+                  <td>
+                  <span>
+                   <a href="/profile/{{quest.creator}}"> 
+                    <img id="quest_creator" data-src="/dynamic/avatar/{{quest.creator}}" title="{{quest.creator}}">
+                   </a>
+                  </span>
+                  </td>
+                  {% endif %}
                  {% if beaten %}
-                 <td>( ✅ Quest Beaten)
-                 </td>
-                {% elif cooldown %}
-                 <td>( 🥶 In Cooldown Period)
-                 </td>
+                   <span>
+                    <td>
+                    <a class="btn btn-outline-success disabled" title="Quest Beaten"><span>✅</span> Beaten</a>
+                    </td>
+                   </span>
+                 {% elif cooldown %}
+                    <td>
+                    <span>
+                  <a class="btn btn-secondary disabled" title="In Cooldown Period"><span>🥶</span> Cold</a>
+                    </td>
+                    </span>
                  {% elif unlocked %}
-                 <td><span> <a style="position: relative; bottom: 3px; left: 0px;"  class="fa fa-gamepad fa-6" role="button" href="{{quest.url}}"></a></span>
-                 </td>
-                 <td>{% if difficulty_level == 'Created' %} <BR><td> <a class="mt-2" role="button" href="{{quest.edit_url}}">(Edit Quest)</a>
-                      {% endif %} </td>
-                 </td>
+                 <div>
+                    <td>
+                    <span> 
+                      <a  class="btn btn-outline-primary" title="Dive into the web3" role="button" href="{{quest.url}}"><span><i class="fa fa-gamepad"></i></span> Play </a>
+                    </span>
+                    </td>
+                 </div>
+                  
                   {% else %}
-                    <td>🔒Locked; To unlock
+                    <td>
+                    <span>
                     {% if quest.unlocked_by_hackathon %}
-          register for <a href="{{quest.unlocked_by_hackathon.onboard_url}}">{{quest.unlocked_by_hackathon.name}}</a>.
-        {% else %}
-          beat <a href="{{quest.unlocked_by_quest.url}}">{{quest.unlocked_by_quest.title}}</a>.
+                    <a href="{{quest.unlocked_by_hackathon.url}}" target="_blank" class="btn btn-secondary" title="Locked, to unlock. Register for {{quest.unlocked_by_hackathon.name}}">🔒Unlock</a>
+                    {% else %}
+                        beat <a href="{{quest.unlocked_by_quest.url}}">{{quest.unlocked_by_quest.title}}</a>.
+                    </span>
                     </td>
                   {% endif %}
                   {% endif %}
                 </tr>
              </tbody>
-      {% endfor %}
-    </table>
+       {% endfor %}
+     </table>
     </div>
+   </div>
   </div>
   {% endfor %}
 </div>
@@ -578,6 +608,7 @@ <h4 class="pt-0">Play Gitcoin Quests Now.</h4>
 {% block 'scripts' %}
 <script src="{% static "v2/js/lib/jquery-unveil.js" %}"></script>
 <script src="{% static "v2/js/pages/quests.index.js" %}"></script>
+<script src="{% static "v2/js/user_card.js" %}"></script>
 <script>
   $(document).ready(function() {
     setInterval(function(){