Skip to content

Commit

Permalink
Super Responsive Quest Table (#7026)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@molecula451
molecula451 authored Jul 5, 2020
1 parent cfac30d commit 3b31741
Show file tree
Hide file tree
Showing 2 changed files with 178 additions and 23 deletions.
124 changes: 124 additions & 0 deletions app/assets/v2/css/quests.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
Expand Down Expand Up @@ -57,6 +102,7 @@
.announce a {
background-color: #f2c3c4;
color: black;
width: auto;
}

.announce h4 {
Expand All @@ -77,6 +123,7 @@

.announce5 a {
background-color: #cee370 !important;
width: auto;
}

.announce4 h4 {
Expand All @@ -93,6 +140,7 @@

.announce4 a {
background-color: #dcc58c !important;
width: auto;
}

.announce3 h4 {
Expand All @@ -109,6 +157,7 @@

.announce3 a {
background-color: #b0d9d4 !important;
width: auto;
}

.announce2 h4 {
Expand All @@ -125,6 +174,7 @@

.announce2 a {
background-color: #849ffc !important;
width: auto;
}

.announce6 h4 {
Expand All @@ -141,6 +191,7 @@

.announce6 a {
background-color: #ddb9bd !important;
width: auto;
}

.referrals img {
Expand Down Expand Up @@ -1221,6 +1272,10 @@ body.green .tl {

@media (max-width: 1110px) {

.btn {
right: auto;
}

body.quest_battle {
background-size: 250% !important;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down
77 changes: 54 additions & 23 deletions app/quests/templates/quests/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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(){
Expand Down

0 comments on commit 3b31741

Please sign in to comment.