Merge pull request #2457 from pinkiebell/css/bounty

bounty template layout adjustments
gitcoinco · Oct 20, 2018 · 47f966d · 47f966d
2 parents fe9a1c0 + 437bd3d
commit 47f966d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 33 deletions.
diff --git a/app/assets/v2/css/base.css b/app/assets/v2/css/base.css
@@ -1643,11 +1643,13 @@ div.busyOverlay {
 .expandable {
   overflow: hidden;
   max-height: 0;
+  opacity: 0.0;
   transition: 0.3s ease-in-out;
 }
 
 .expandable#expanded {
-  max-height: 10rem;
+  max-height: 100rem;
+  opacity: 1.0;
 }
 
 .arrow {
@@ -1670,24 +1672,10 @@ div.busyOverlay {
   vertical-align: middle;
 }
 
-.funding {
-  background-color: #f9f9f9;
-}
-
-.funding > div.placeholder {
-  margin-left: 8.3%;
-}
-
-@media (max-width: 768px) {
-  .funding > div.placeholder {
-    margin-left: 3px;
-  }
-}
-
 .g-bold {
   font-weight: bold;
 }
 
 .g-text-left {
   text-align: left;
-}
+}
diff --git a/app/assets/v2/css/tag.css b/app/assets/v2/css/tag.css
@@ -42,6 +42,7 @@
 }
 
 .tag.token > a {
-  position: absolute;
-  margin-top: 0.3rem;
+  height: 0;
+  line-height: 1.5rem;
+  float: right;
 }
diff --git a/app/retail/templates/shared/result.html b/app/retail/templates/shared/result.html
@@ -50,8 +50,10 @@
             <img class="m-0" style="position: relative; top: -2px;" src="{% static 'v2/images/coin.svg' %}">
           [[/if]]
         </p>
-        [[if tokens]]
-          <a href="" onclick="toggleExpandableBounty(event, '.[[:network]].i[[:standard_bounties_id]]')">{% trans 'See All' %}   <i class="fa fa-angle-down arrow"></i></a>
+        [[if tokens ]]
+          <a href="" onclick="toggleExpandableBounty(event, '.[[:network]].i[[:standard_bounties_id]]')">
+            {% trans 'See All' %}   <i class="fa fa-angle-down arrow"></i>
+          </a>
         [[/if]]
       </div>
       [[if value_in_usdt]]
@@ -64,21 +66,26 @@
       [[/if]]
       </div>
     </div>
-    [[if tokens]]
-      <div class="col-md-12 tags expandable funding">
-        <div class="placeholder">
-          <span class="text-highlight-gc-purple m-0 uppercase middle">{% trans 'Funding' %}</span>
-        </div>
-        <div class="tag token font-caption">
-          <p><span>[[:rounded_amount]] [[:token_name]]</span></p>
-        </div>
-        [[props tokens]]
-          [[for prop ~tokenName=key]]
+    [[if tokens ]]
+      <div class="col-md-12 expandable">
+        <div class="d-flex flex-wrap">
+          <div class="avatar-container col-1 hide_min_viewport"></div>
+          <div>
+            <span class="text-highlight-gc-purple m-0 uppercase middle">{% trans 'Funding' %}</span>
+          </div>
+          <div class="tags flex-wrap col-9">
             <div class="tag token font-caption">
-              <p><span>[[:#data]] [[:~tokenName]]<i class="fas fa-users ml-1"></i></span></p>
+              <p><span>[[:rounded_amount]] [[:token_name]]</span></p>
             </div>
-          [[/for]]
-        [[/props]]
+            [[props tokens]]
+              [[for prop ~tokenName=key]]
+                <div class="tag token font-caption">
+                  <p><span>[[:#data]] [[:~tokenName]]<i class="fas fa-users ml-1"></i></span></p>
+                </div>
+              [[/for]]
+            [[/props]]
+          </div>
+        </div>
       </div>
     [[/if]]
   </div>