Better classname conventions

cfpb · Aug 1, 2024 · eed3133 · eed3133
1 parent fd45a86
commit eed3133
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 13 deletions.
diff --git a/viewer/static_src/css/crawler.less b/viewer/static_src/css/crawler.less
@@ -43,17 +43,17 @@
   margin-bottom: 15px;
 }
 
-.u-crawl_text {
-  font-weight: bold;
-  padding-right: 5px;
-  margin-bottom: 15px;
-}
-
-.u-crawl_date {
+.crawl-date {
   display: flex;
+
+  &__text {
+    font-weight: bold;
+    padding-right: 5px;
+    margin-bottom: 15px;
+  }
 }
 
-.u-help_text {
+.help-text {
   margin-top: 15px;
   margin-bottom: 30px;
 }

diff --git a/viewer/templates/viewer/page_list.html b/viewer/templates/viewer/page_list.html
@@ -137,8 +137,8 @@ <h4>
   <div class="o-well">
     <div class="h3">Discover more</div>
     {% if crawl_stats.start %}
-    <div class="u-crawl_date">
-      <span id="last-crawl" class="u-crawl_text">Data last updated:</span>
+    <div class="crawl-date">
+      <span id="last-crawl" class="crawl-date__text">Data last updated:</span>
       <p>{{ crawl_stats.start | format_datetime }}</p>
     </div>
     {% endif %}

diff --git a/viewer/templates/viewer/search_form.html b/viewer/templates/viewer/search_form.html
@@ -33,7 +33,7 @@ <h2 class="h3">Search the index</h2>
       <button class="a-btn" type="submit" aria-label="Search">Search</button>
     </div>
 
-    <p class="u-help_text">
+    <p class="help-text">
       Check out the <a href="{% url 'help' %}">Common searches</a> page for
       examples
     </p>

diff --git a/viewer/templates/viewer/search_results.html b/viewer/templates/viewer/search_results.html
@@ -10,8 +10,8 @@ <h1>Consumerfinance.gov web page index</h1>
       </p>
     </div>
     {% if crawl_stats.start %}
-    <div class="u-crawl_date">
-      <span class="u-crawl_text">Data last updated: </span>
+    <div class="crawl-date">
+      <span class="crawl-date__text">Data last updated:</span>
       <p><a href="#last-crawl">{{ crawl_stats.start | format_datetime }}</a></p>
     </div>
     {% endif %}