Skip to content

Commit 3b31741

Browse files
molecula451molecula451
authored
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
1 parent cfac30d commit 3b31741

2 files changed

Lines changed: 178 additions & 23 deletions

File tree

‎app/assets/v2/css/quests.css‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,48 @@
1+
/* table properties */
2+
3+
td, th {
4+
white-space: nowrap;
5+
}
6+
7+
.table td,
8+
.table th {
9+
padding: 4px;
10+
border: none;
11+
}
12+
13+
.table {
14+
width: 100%;
15+
text-align: center;
16+
}
17+
18+
#explore_quests {
19+
width: auto;
20+
}
21+
22+
#quest_creator {
23+
position: relative;
24+
width: 30px;
25+
height: 30px;
26+
border-radius: 15px;
27+
bottom: -5px;
28+
}
29+
30+
.btn {
31+
width: 100px;
32+
position: relative;
33+
border: none;
34+
padding: 5px;
35+
text-align: center;
36+
display: inline-block;
37+
top: 5px;
38+
font-size: 16px;
39+
}
40+
41+
.btn-secondary {
42+
background-color: white;
43+
color: grey;
44+
}
45+
146
.show_on_mobile {
247
display: none;
348
}
@@ -57,6 +102,7 @@
57102
.announce a {
58103
background-color: #f2c3c4;
59104
color: black;
105+
width: auto;
60106
}
61107

62108
.announce h4 {
@@ -77,6 +123,7 @@
77123

78124
.announce5 a {
79125
background-color: #cee370 !important;
126+
width: auto;
80127
}
81128

82129
.announce4 h4 {
@@ -93,6 +140,7 @@
93140

94141
.announce4 a {
95142
background-color: #dcc58c !important;
143+
width: auto;
96144
}
97145

98146
.announce3 h4 {
@@ -109,6 +157,7 @@
109157

110158
.announce3 a {
111159
background-color: #b0d9d4 !important;
160+
width: auto;
112161
}
113162

114163
.announce2 h4 {
@@ -125,6 +174,7 @@
125174

126175
.announce2 a {
127176
background-color: #849ffc !important;
177+
width: auto;
128178
}
129179

130180
.announce6 h4 {
@@ -141,6 +191,7 @@
141191

142192
.announce6 a {
143193
background-color: #ddb9bd !important;
194+
width: auto;
144195
}
145196

146197
.referrals img {
@@ -1221,6 +1272,10 @@ body.green .tl {
12211272

12221273
@media (max-width: 1110px) {
12231274

1275+
.btn {
1276+
right: auto;
1277+
}
1278+
12241279
body.quest_battle {
12251280
background-size: 250% !important;
12261281
}
@@ -1348,6 +1403,28 @@ body.green .tl {
13481403

13491404
@media (max-width: 991.98px) {
13501405

1406+
.table {
1407+
border: auto;
1408+
}
1409+
1410+
#quest_creator {
1411+
top: 0.4rem;
1412+
}
1413+
1414+
.btn {
1415+
width: -webkit-fill-available;
1416+
top: 0.4rem;
1417+
border: none;
1418+
1419+
}
1420+
1421+
.table td,
1422+
.table th {
1423+
padding: 0.55rem;
1424+
border: none;
1425+
position: relative;
1426+
}
1427+
13511428
body.quest_battle {
13521429
background-size: 250% !important;
13531430
}
@@ -1416,6 +1493,32 @@ body.green .tl {
14161493

14171494
@media (max-width: 767.98px) {
14181495

1496+
.table {
1497+
text-align: center;
1498+
border-collapse: collapse;
1499+
border: auto;
1500+
}
1501+
1502+
.btn {
1503+
width: -webkit-fill-available;
1504+
top: 0.6rem;
1505+
border: none;
1506+
}
1507+
1508+
.table td,
1509+
.table th {
1510+
padding: 0.25rem;
1511+
}
1512+
1513+
#quest_creator {
1514+
top: 10px;
1515+
right: 1px;
1516+
}
1517+
1518+
#explore_quests {
1519+
top: -1px;
1520+
}
1521+
14191522
body.quest_battle {
14201523
background-size: 350% !important;
14211524
}
@@ -1511,6 +1614,27 @@ body.green .tl {
15111614

15121615
@media (max-width: 575.98px) {
15131616

1617+
.table {
1618+
border: none;
1619+
}
1620+
1621+
.table td {
1622+
padding: 5.5px;
1623+
}
1624+
1625+
.table th {
1626+
padding: 5.5px;
1627+
}
1628+
1629+
.btn {
1630+
right: auto;
1631+
top: 0.6rem;
1632+
}
1633+
1634+
#quest_creator {
1635+
top: 0.8rem;
1636+
}
1637+
15141638
body.quest_battle {
15151639
background-size: 250% !important;
15161640
}

‎app/quests/templates/quests/index.html‎

Lines changed: 54 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -76,57 +76,87 @@ <h3>No Quests Found</h3>
7676

7777
<!-- Quest table -->
7878
<div id="{{difficulty_level}}">
79-
<table class="table table-fixed">
79+
<div>
80+
<table class="table table-responsive-lg table-hover">
8081
<thead>
8182
<tr>
82-
<th scope="row"></th>
8383
<th scope="col">Quest Name</th>
8484
<th scope="col">Quest Prize</th>
8585
<th scope="col">Difficulty</th>
8686
<th scope="col">Attempts</th>
8787
<th scope="col">Description</th>
8888
<th scope="col">Play Time</th>
89-
<th scope="col">Play</th>
90-
<th scope="col"></th>
91-
<th scope="col">{% if difficulty_level == 'Created' %} Ownership {% endif %} </th>
89+
{% if difficulty_level == 'Created' %}
90+
<th scope="col">Ownership</th>
91+
{% else %}
92+
<th scope="col">Quest Owner</th>
93+
{% endif %}
94+
<th scope="col">Stage</th>
9295
</tr>
9396
</thead>
9497
{% for unlocked, beaten, cooldown, quest in the_quests %}
9598
<tbody>
9699
<tr>
97-
<th scope="row"></th>
98100
<td> {{quest.title}}</td>
99101
<td> {{quest.kudos_reward.humanized_name}}</td>
100102
<td> {{difficulty_level}}</td>
101103
<td> {{quest.ui_data.attempts_count}}</td>
102104
<td> {{quest.description}}</td>
103-
<td>{{quest.est_total_time_required}} mins (reading) <br> {{quest.est_skim_time_mins}} mins (skimming)<br></td>
105+
<td> {{quest.est_total_time_required}} mins (reading) <br> {{quest.est_skim_time_mins}} mins (skimming)<br></td>
106+
{% if difficulty_level == 'Created' %}
107+
<td>
108+
<span>
109+
<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>
110+
</span>
111+
</td>
112+
{% endif %}
113+
{% if not difficulty_level == 'Created' %}
114+
<td>
115+
<span>
116+
<a href="/profile/{{quest.creator}}">
117+
<img id="quest_creator" data-src="/dynamic/avatar/{{quest.creator}}" title="{{quest.creator}}">
118+
</a>
119+
</span>
120+
</td>
121+
{% endif %}
104122
{% if beaten %}
105-
<td>( ✅ Quest Beaten)
106-
</td>
107-
{% elif cooldown %}
108-
<td>( 🥶 In Cooldown Period)
109-
</td>
123+
<span>
124+
<td>
125+
<a class="btn btn-outline-success disabled" title="Quest Beaten"><span>✅</span> Beaten</a>
126+
</td>
127+
</span>
128+
{% elif cooldown %}
129+
<td>
130+
<span>
131+
<a class="btn btn-secondary disabled" title="In Cooldown Period"><span>🥶</span> Cold</a>
132+
</td>
133+
</span>
110134
{% elif unlocked %}
111-
<td><span> <a style="position: relative; bottom: 3px; left: 0px;" class="fa fa-gamepad fa-6" role="button" href="{{quest.url}}"></a></span>
112-
</td>
113-
<td>{% if difficulty_level == 'Created' %} <BR><td> <a class="mt-2" role="button" href="{{quest.edit_url}}">(Edit Quest)</a>
114-
{% endif %} </td>
115-
</td>
135+
<div>
136+
<td>
137+
<span>
138+
<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>
139+
</span>
140+
</td>
141+
</div>
142+
116143
{% else %}
117-
<td>🔒Locked; To unlock
144+
<td>
145+
<span>
118146
{% if quest.unlocked_by_hackathon %}
119-
register for <a href="{{quest.unlocked_by_hackathon.onboard_url}}">{{quest.unlocked_by_hackathon.name}}</a>.
120-
{% else %}
121-
beat <a href="{{quest.unlocked_by_quest.url}}">{{quest.unlocked_by_quest.title}}</a>.
147+
<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>
148+
{% else %}
149+
beat <a href="{{quest.unlocked_by_quest.url}}">{{quest.unlocked_by_quest.title}}</a>.
150+
</span>
122151
</td>
123152
{% endif %}
124153
{% endif %}
125154
</tr>
126155
</tbody>
127-
{% endfor %}
128-
</table>
156+
{% endfor %}
157+
</table>
129158
</div>
159+
</div>
130160
</div>
131161
{% endfor %}
132162
</div>
@@ -578,6 +608,7 @@ <h4 class="pt-0">Play Gitcoin Quests Now.</h4>
578608
{% block 'scripts' %}
579609
<script src="{% static "v2/js/lib/jquery-unveil.js" %}"></script>
580610
<script src="{% static "v2/js/pages/quests.index.js" %}"></script>
611+
<script src="{% static "v2/js/user_card.js" %}"></script>
581612
<script>
582613
$(document).ready(function() {
583614
setInterval(function(){

0 commit comments

Comments
 (0)