chore: clean up TS (gitcoinco#7062)

Author: thelostone-mc

app/assets/v2/css/activity_stream.css

@@ -1,14 +1,9 @@
 #reflink {
   cursor: pointer;
-  font-size: 12px;
   padding: 3px;
-  background-color: #ecf0f4;
   border: 0px solid;
-}
-
-.dark-mode #reflink {
-  background-color: var(--gc-blue);
-  color: #ecf0f4;
+  color: var(--link-color);
+  background: var(--bg-shade-0);
 }
 
 .click_here_to_join_video{
@@ -33,12 +28,12 @@
 }
 #new_activity_notifier {
   text-align: center;
-  background-color: #f5f5f9;
-  border-bottom: 1px solid #eee;
+  color: var(--link-color);
+  background: var(--bg-shade-0);
+  border-bottom: 1px solid var(--text-color);
   cursor: pointer;
-  padding: 5px 10px;
+  padding: 12px;
   border-radius: 3px;
-  color: black;
   font-size: 0.8rem;
   font-weight: bold;
 }

app/assets/v2/css/gitcoin.css

@@ -549,6 +549,12 @@ div.button-pink {
   transition: max-height 0.2s ease-out;
 }
 
+.panel-active {
+  max-height: 100%;
+  overflow: hidden;
+  transition: max-height 0.2s ease-out;
+}
+
 .accordion:after {
   /* stylelint-disable-next-line */
   font-family: 'Font Awesome 5 Pro';

app/assets/v2/css/town_square.css

@@ -900,11 +900,9 @@ body.green.offer_view .announce {
   text-transform: uppercase;
   cursor: pointer;
 }
-.townsquare_block-header::after {
-  content: ""
-}
-.townsquare_block-header.closed::after {
-  content: "^"
+
+.text-mode-color {
+  color: var(--townsquare-block-header-color);
 }
 
 #status .btn-group-toggle .btn-radio {
@@ -995,7 +993,7 @@ body.green.offer_view .announce {
   font-size: 12px;
 }
 
-.townsquare_nav-list.tribe .avatar {
+.townsquare_nav-list .tribe .avatar {
   width: 20px;
   height: 20px;
   margin-right: 4px;

app/assets/v2/js/activity.js

@@ -181,7 +181,7 @@ $(document).ready(function() {
   // notifications of new activities
   var ping_activity_notifier = (function() {
     var plural = document.buffered_rows.length == 1 ? 'y' : 'ies';
-    var html = '<div id=new_activity_notifier>' + document.buffered_rows.length + ' New Activit' + plural + ' - Click to View</div>';
+    var html = '<div id="new_activity_notifier">' + document.buffered_rows.length + ' New Activit' + plural + ' - Click to View</div>';
 
     if ($('#new_activity_notifier').length) {
       $('#new_activity_notifier').html(html);

app/assets/v2/js/base.js

@@ -238,21 +238,21 @@ $(document).ready(function() {
     $(event.target).parents('.faq_parent').find('.answer').toggleClass('show');
   });
 
-  $('.accordion').on('click', (event) => {
-    const element = $(event.target);
 
-    element.toggleClass('active');
-    let panel = element[0].nextElementSibling;
+  $('body').on('click', '.accordion', event => {
+    const element = $(event.target);
+    const panel = element[0].nextElementSibling;
 
     if (panel) {
-      if (panel.style.maxHeight) {
-        panel.style.maxHeight = null;
+      if (element.hasClass('active')) {
+        panel.style.maxHeight = 0;
         panel.style.marginBottom = 0 + 'px';
       } else {
         panel.style.maxHeight = panel.scrollHeight + 'px';
         panel.style.marginBottom = 10 + 'px';
       }
     }
+    element.toggleClass('active');
   });
   attach_close_button();
 });

app/assets/v2/js/pages/townsquare.js

@@ -1,30 +1,4 @@
 $(document).ready(function() {
-  // gets multi part (ex: 10 hours 2 minutes 5 seconds) time
-  var time_difference_broken_down = function(difference) {
-    let remaining = ' now. Refresh to view offer!';
-    let prefix = ' in ';
-
-    if (difference > 0) {
-      console.log(moment(difference).inspect());
-      const parts = {
-        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
-        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
-        minutes: Math.floor((difference / 1000 / 60) % 60),
-        seconds: Math.floor((difference / 1000) % 60)
-      };
-
-      remaining = Object.keys(parts)
-        .map(part => {
-          if (!parts[part])
-            return;
-          return `${parts[part]} ${part}`;
-        })
-        .join(' ');
-    } else {
-      return remaining;
-    }
-    return prefix + remaining;
-  };
 
   $('body').on('click', '#mobile_nav_toggle li a', function(e) {
     $('#mobile_nav_toggle li a').removeClass('active');
@@ -48,15 +22,6 @@ $(document).ready(function() {
     document.location = $(this).find('a.btn').attr('href');
   });
 
-  // collapse menu items
-  $('body').on('click', '.townsquare_block-header', function(e) {
-    let target_id = $(this).data('target');
-
-    $('#' + target_id).toggleClass('hidden');
-    $(this).toggleClass('closed');
-    localStorage.setItem(target_id, $(this).hasClass('closed'));
-  });
-
   // effects when an offer is clicked upon
   $('body').on('click', '.offer a', function(e) {
     var speed = 500;
@@ -173,15 +138,6 @@ $(document).ready(function() {
       $('#top_bar').html($(response).find('#top_bar').html());
       // bind more actions
       joinTribe();
-      // collapse menu items
-      $('.townsquare_block-header').each(function() {
-        let target_id = $(this).data('target');
-        var item = localStorage.getItem(target_id);
-
-        if (item == 'true') {
-          $(this).click();
-        }
-      });
       const hide_promo = localStorage.getItem('hide_promo');
 
       if (!hide_promo) {

app/townsquare/templates/townsquare/index.html

@@ -47,13 +47,12 @@
         text-transform: none;
         border-radius: 5px 5px 0 0;
       }
-      
+
       .box-hackathons {
         background: #ffff;
-        border-bottom: 1px solid #ddd;
         border-radius: 0 0 5px 5px;
       }
-      
+
       .box-hackathons .card {
         border: none;
       }
@@ -165,7 +164,6 @@
 
                         <div class="checkbox_container">
                           <input name="trending" id="trending" type="checkbox" value="0" {% if trending_only %}checked=checked{%endif%} />
-                          <!-- <span class="checkbox"></span> -->
                           <label for=trending>{% trans "Trending Only" %}</label>
                         </div>
                       </div>
@@ -189,51 +187,57 @@
             </div>
             <div class="actions_container col-12 col-md-4 col-lg-3">
             <div id=right_sidebar>
-              {% if SHOW_DRESSING %}
+                {% if SHOW_DRESSING %}
 
-                {% include 'townsquare/shared/tribe.html' %}
-               
+                  {% include 'townsquare/shared/tribe.html' %}
 
-                {% if hackathon_tabs|length %}
-                  <div class="townsquare_block-header box-collapse  mt-1" data-target="hackathons">
-                    Gitcoin Hackathons
-                  </div>
-                  {% include 'townsquare/shared/hackathons.html' %}
-                {% endif %}
+                  {% if hackathon_tabs|length %}
+                    {% include 'townsquare/shared/hackathons.html' %}
+                  {% endif %}
+
+                  {% include 'townsquare/shared/reflink.html' %}
 
-                {% include 'townsquare/shared/reflink.html' %}
+                  <hr>
 
-                <div class="townsquare_block-header text-left my-4 mt-sm-0 mb-sm-2" data-target="actions">
-                  Actions <i data-toggle="tooltip" data-html="true" class="fas fa-info-circle mr-3" title="
-                      <strong>Gitcoin Actions</strong> are a way to introduce entropy into your learning routine.  Gitcoin will select the best educational, networking, or (sometimes)monetary or reputational opportunities and put them in front of you on a daily, weekly, monthly, and (sometimes) secret basis!
-                      <br>
-                      <br>
-                      Come to Gitcion daily to discover today's daily action!
+                  <div class="townsquare_block-header text-left my-4 mt-sm-0 mb-sm-2" data-target="actions">
+                    <div class="accordion active">
+                      Actions
+                      <i data-toggle="tooltip" data-html="true" class="fas fa-info-circle mr-3" title="
+                        <p class='text-left'>
+                          <strong>Gitcoin Actions</strong> are a way to introduce entropy into your learning routine.
+                          Gitcoin will select the best educational, networking, or (sometimes)monetary or reputational opportunities and put them in front of you on a daily, weekly, monthly, and (sometimes) secret basis!
+                        </p>
+                        <p class='text-left'>
+                          Come to Gitcion daily to discover today's daily action!
+                        </p>
                       "></i>
-                </div>
-                <div id=actions>
-                  <div class="offer_coming font-caption">
-                    <div class="checkbox_container">
-                      <input name="receive_daily_offers_in_inbox" id="receive_daily_offers_in_inbox" type="checkbox" value="1" {% if is_subscribed %} checked="checked" {% endif %} />
-                      <span class="checkbox"></span>
-                      <div class="filter-label ml-1">
-                        <label for=receive_daily_offers_in_inbox>{% trans "Email when available" %}</label>
+                    </div>
+
+                    <div id="actions" class="panel-active">
+                      <div class="offer_coming font-caption">
+                        <div class="checkbox_container font-smaller-5">
+                          <input name="receive_daily_offers_in_inbox" id="receive_daily_offers_in_inbox" type="checkbox" value="1" {% if is_subscribed %} checked="checked" {% endif %} />
+                          <span class="checkbox"></span>
+                          <div class="filter-label ml-1">
+                            <label for=receive_daily_offers_in_inbox>{% trans "Email when available" %}</label>
+                          </div>
+                        </div>
                       </div>
+
+                      {% include 'townsquare/shared/offers.html' %}
+
+                      <a href="/action/new" class="font-smaller-2 mb-2">
+                        <i class="fa fa-plus-circle" aria-hidden="true"></i>
+                        Create Action
+                      </a>
                     </div>
                   </div>
 
-                  {% include 'townsquare/shared/offers.html' %}
-
-                  <a href="/action/new" class="font-smaller-2 mb-2">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
-                    Create Action
-                  </a>
                   <hr>
-                </div>
 
                   {% include 'townsquare/shared/matchround.html' %}
                 {% endif %}
-                </div>
+              </div>
             </div>
           </div>
         </div>

app/townsquare/templates/townsquare/shared/feednav.html

@@ -1,39 +1,56 @@
-  <div class="townsquare_nav-list my-3">
-    <div class="townsquare_block-header" data-target="feeds" >
+<div class="townsquare_nav-list">
+  <div class="feed-container my-3">
+    <div class="townsquare_block-header accordion active" data-target="feeds" >
       Feeds
     </div>
-    <ul id=feeds class="nav d-inline-block font-body mb-2">
-      {% for this_tab in tabs %}
-        {% include 'townsquare/shared/thistab.html' %}
-      {% endfor %}
-    </ul>
-    {% if hackathon_tabs|length %}
-    <div class="townsquare_block-header mt-2" data-target="hackathons">
-      Hackathons
+    <div class="panel-active">
+      <ul id=feeds class="nav d-inline-block font-body">
+        {% for this_tab in tabs %}
+          {% include 'townsquare/shared/thistab.html' %}
+        {% endfor %}
+      </ul>
     </div>
-    <ul id=hackathons class="nav d-inline-block font-caption mb-2">
-      {% for this_tab in hackathon_tabs %}
-        {% include 'townsquare/shared/thistab.html' %}
-      {% endfor %}
-    </ul>
-    {% endif %}
-    <div class="townsquare_nav-list my-3">
-      <div class="townsquare_block-header" data-target="filter">
-        Filter
+  </div>
+
+  <hr>
+
+  <div class="hacktathon-feed-container my-3">
+    {% if hackathon_tabs|length %}
+      <div class="townsquare_block-header mt-2 accordion active" data-target="hackathons">
+        Hackathons
       </div>
-      <ul id=filter class="nav d-inline-block font-caption mb-2">
-          {% for tag in tags %}
-            {% include 'townsquare/shared/tag.html' %}
+      <div class="panel-active">
+        <ul id=hackathons class="nav d-inline-block font-caption panel-active">
+          {% for this_tab in hackathon_tabs %}
+            {% include 'townsquare/shared/thistab.html' %}
           {% endfor %}
+        </ul>
+      </div>
+    {% endif %}
+  </div>
+
+  <hr>
+
+  <div class="filter-feed-container my-3">
+    <div class="townsquare_block-header accordion active" data-target="filter">
+      Filter
+    </div>
+    <div class="panel-active">
+      <ul id=filter class="nav d-inline-block font-caption">
+        {% for tag in tags %}
+          {% include 'townsquare/shared/tag.html' %}
+        {% endfor %}
       </ul>
     </div>
   </div>
 
-  <div class="townsquare_nav-list my-3 tribe">
-    <div class="townsquare_block-header" data-target="tribes">
-      Shortcuts
+  <hr>
+
+  <div class="my-tribes-container my-3 tribe">
+    <div class="townsquare_block-header accordion active tribe" data-target="tribes">
+      My Tribes
     </div>
-    <div id="tribes">
+    <div id="tribes" class="panel-active">
       <ul class="nav d-inline-block font-caption">
         {% for tribe in following_tribes %}
           <li class="nav-item">
@@ -56,11 +73,13 @@
     </div>
   </div>
 
-  <div class="townsquare_nav-list my-3 tribe">
-    <div class="townsquare_block-header" data-target="suggested-tribes">
+  <hr>
+
+  <div class="suggested-tribes-container my-3 tribe">
+    <div class="townsquare_block-header accordion active" data-target="suggested-tribes">
       Suggested Tribes
     </div>
-    <div id="suggested-tribes">
+    <div id="suggested-tribes" class="panel-active">
       <ul class="nav d-inline-block font-body col-sm-9 col-lg-8 pr-2" style="padding-right: 0">
         {% for tribe in suggested_tribes %}
           <li class="nav-item d-flex justify-content-between align-items-center my-1">
@@ -78,4 +97,6 @@
         {% endfor %}
       </ul>
     </div>
-  </div>
+  </div>
+  <hr>
+</div>