From 0ec8031655732fb9733441f85d29e4052c6fa99b Mon Sep 17 00:00:00 2001
From: Soufiane <13897436+soufianerafik@users.noreply.github.com>
Date: Mon, 3 Feb 2025 13:43:51 -0800
Subject: [PATCH] [GH-182] - Improved search results UI, CSS Refactoring and
 Cleanup (#185)

* feat(frontend): Fix CSS issues and UI cleanups

* feat(frontend): Remove unused css

* [Bot] Update version to 2.4.1

* fix(frontend): extend "listing type" width

* fix(frontend): Update email separator to ','

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
---
 husky_directory/static/css/body.css           | 157 ++++--------------
 husky_directory/static/css/print.css          | 117 ++++++++++++-
 husky_directory/templates/base.html           |  14 +-
 husky_directory/templates/full_result.html    |  66 +++++---
 husky_directory/templates/full_results.html   |   2 -
 husky_directory/templates/links.html          |   2 +-
 husky_directory/templates/result_count.html   |   4 +-
 husky_directory/templates/search_options.html |   2 +-
 .../templates/summary_results_table/base.html |   2 +-
 .../scenario_population_block.html            |   7 +-
 pyproject.toml                                |   2 +-
 tests/blueprints/test_search_blueprint.py     |   2 +-
 12 files changed, 195 insertions(+), 182 deletions(-)

diff --git a/husky_directory/static/css/body.css b/husky_directory/static/css/body.css
index 65633182..fd328857 100644
--- a/husky_directory/static/css/body.css
+++ b/husky_directory/static/css/body.css
@@ -261,12 +261,6 @@ img {
 .img-circle {
   border-radius: 50%;
 }
-hr {
-  margin-top: 29px;
-  margin-bottom: 29px;
-  border: 0;
-  border-top: 1px solid #8e7bb1;
-}
 .sr-only {
   position: absolute;
   width: 1px;
@@ -3993,123 +3987,36 @@ label.screen-reader {
     background: url(http://www.washington.edu/static/home/wp-content/themes/uw-2014/assets/images/alert.png) no-repeat 0 -10px transparent;
   }
 }
-@media print {
-  .uw-thinstrip,
-  #dawgdrops,
-  #quicklinks,
-  #uwsearcharea,
-  .uw-breadcrumbs,
-  .uw-hero-image,
-  .uw-hero-image:after,
-  .uw-hero-image:before,
-  .uw-news-image,
-  .site-news.single .uw-site-title,
-  .screen-reader-shortcut,
-  #wpadminbar,
-  #respond,
-  .uw-footer h4,
-  .uw-footer .footer-social,
-  .uw-footer > a,
-  .uw-footer {
-    display: none !important;
-  }
-  .uw-footer {
-    border-top: none;
-  }
-  .uw-footer ul.footer-links li a {
-    color: #fff !important;
-  }
-  .info-box {
-    margin-left: 0;
-  }
-  .widget {
-    padding-left: 0;
-  }
-  ul.uw-sidebar-menu {
-    margin-top: 0;
-  }
-  * {
-    text-shadow: none !important;
-    color: #000 !important;
-    background: transparent !important;
-    box-shadow: none !important;
-    position: static !important;
-    overflow: visible !important;
-  }
-  .site-regents p,
-  .site-regents a,
-  .site-regents li,
-  .site-regents td {
-    font-size: 14px  !important;
-    line-height: 18px !important;
-  }
-  .site-regents h1 {
-    font-size: 23px  !important;
-  }
-  .site-regents h2 {
-    font-size: 20px  !important;
-  }
-  .site-regents h2.uw-site-title {
-    font-size: 40px !important;
-  }
-  .site-regents h3,
-  .site-regents h4 {
-    font-size: 17px  !important;
-  }
-  a,
-  a:visited {
-    text-decoration: underline;
-  }
-  abbr[title]:after {
-    content: " (" attr(title) ")";
-  }
-  pre,
-  blockquote {
-    border: 1px solid #999;
-    page-break-inside: avoid;
-  }
-  thead {
-    display: table-header-group;
-  }
-  tr,
-  img {
-    page-break-inside: avoid;
-  }
-  img {
-    max-width: 100% !important;
-  }
-  p,
-  h2,
-  h3 {
-    orphans: 3;
-    widows: 3;
-  }
-  h2,
-  h3 {
-    page-break-after: avoid;
-  }
-  select {
-    background: #fff !important;
-  }
-  .navbar {
-    display: none;
-  }
-  .table td,
-  .table th {
-    background-color: #fff !important;
-  }
-  .btn > .caret,
-  .dropup > .btn > .caret {
-    border-top-color: #000 !important;
-  }
-  .label {
-    border: 1px solid #000;
-  }
-  .table {
-    border-collapse: collapse !important;
-  }
-  .table-bordered th,
-  .table-bordered td {
-    border: 1px solid #ddd !important;
-  }
+
+.person-card {
+  background: #fff;
+  border: 1px solid #dfdfdf;
+  border-radius: 4px;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+.person-name {
+  margin: 0;
+}
+
+.scenario-anchor,
+.scenario-anchor-reference {
+  margin: 10px 0;
+}
+
+.table-view-more-btn {
+  width: 100%;
+  height: 30px;
+  padding: inherit;
+}
+
+.results-summary {
+  margin: 10px 0;
+}
+
+.no-style-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
 }
diff --git a/husky_directory/static/css/print.css b/husky_directory/static/css/print.css
index db8e5f20..2d9e4582 100644
--- a/husky_directory/static/css/print.css
+++ b/husky_directory/static/css/print.css
@@ -1,5 +1,116 @@
-/****** Print Styles ******/
+/*
+  TODO:
+  - This print stylesheet was originally mixed into body.css, making it unnecessarily long and hard to maintain.
+  - Cleaned it up a bit, but it still needs further refactoring for better readability and maintainability.
+  - One approach worth considering is using a `.no-print` class in the HTML instead of explicitly listing elements here.
+  - Something like `@media print { .no-print { display: none !important; } }` would make it cleaner and easier to manage.
+*/
 
-#wheader, .cblock, .rsummary, .mobileHeader, #footerMain, #footerMainNoPatch, .title, .btn-primary  {
-	display: none;
+@media print {
+	/* Hide unnecessary UI elements */
+	.uw-thinstrip, #dawgdrops, #quicklinks, #uwsearcharea, .uw-breadcrumbs,
+	.uw-hero-image, .uw-hero-image:after, .uw-hero-image:before, .uw-news-image,
+	.site-news.single .uw-site-title, .screen-reader-shortcut, #wpadminbar, #respond,
+	.uw-footer h4, .uw-footer .footer-social, .uw-footer > a, .uw-footer,
+	.cblock, .results-summary, .title, .btn-primary, #view-more, .navbar, .view-more {
+		display: none !important;
+	}
+
+	/* Footer cleanup */
+	.uw-footer {
+		border-top: none;
+	}
+
+	.uw-footer ul.footer-links li a {
+		color: #fff !important;
+	}
+
+	/* Layout fixes */
+	.info-box, .widget, ul.uw-sidebar-menu {
+		margin-left: 0;
+		padding-left: 0;
+		margin-top: 0;
+	}
+
+	/* Reset styles for print */
+	* {
+		text-shadow: none !important;
+		color: #000 !important;
+		background: transparent !important;
+		box-shadow: none !important;
+		position: static !important;
+		overflow: visible !important;
+	}
+
+	/* Typography adjustments */
+	.site-regents {
+		font-size: 14px !important;
+		line-height: 18px !important;
+	}
+
+	.site-regents h1 { font-size: 23px !important; }
+	.site-regents h2 { font-size: 20px !important; }
+	.site-regents h2.uw-site-title { font-size: 40px !important; }
+	.site-regents h3, .site-regents h4 { font-size: 17px !important; }
+
+	/* Link styles */
+	a, a:visited {
+		text-decoration: underline;
+	}
+
+	/* Abbreviation title formatting */
+	abbr[title]:after {
+		content: " (" attr(title) ")";
+	}
+
+	/* Block elements */
+	pre, blockquote {
+		border: 1px solid #999;
+		page-break-inside: avoid;
+	}
+
+	/* Ensure headers remain at the top of pages */
+	thead {
+		display: table-header-group;
+	}
+
+	/* Prevent page break issues */
+	tr, img {
+		page-break-inside: avoid;
+	}
+
+	img {
+		max-width: 100% !important;
+	}
+
+	p, h2, h3 {
+		orphans: 3;
+		widows: 3;
+	}
+
+	h2, h3 {
+		page-break-after: avoid;
+	}
+
+	/* Form and table styles */
+	select {
+		background: #fff !important;
+	}
+
+	.table, .table-bordered {
+		border-collapse: collapse !important;
+	}
+
+	.table-bordered th, .table-bordered td {
+		border: 1px solid #ddd !important;
+	}
+
+	/* Buttons and labels */
+	.btn > .caret, .dropup > .btn > .caret {
+		border-top-color: #000 !important;
+	}
+
+	.label {
+		border: 1px solid #000;
+	}
 }
diff --git a/husky_directory/templates/base.html b/husky_directory/templates/base.html
index 2469fa0e..72adf7a0 100644
--- a/husky_directory/templates/base.html
+++ b/husky_directory/templates/base.html
@@ -12,23 +12,11 @@
     <meta name="robots" content="noarchive" />
 
     <!-- Desktop -->
-    <link rel="stylesheet"
-          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css"
-          type="text/css"/>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css" type="text/css"/>
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/mini.css') }}">
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/body.css') }}">
     <link rel="shortcut icon" href="{{ url_for('static', filename='assets/favicon.ico') }}">
-
     <link rel="stylesheet" type="text/css" media="print" href="{{ url_for('static', filename='css/print.css') }}">
-
-    <style>
-        .btn.search:hover { color: black; }
-        /*------------ Workday changes --------- */
-        ul.dir-listing { list-style-type: none; padding: 0; }
-        ul.multiaddr, ul.title, ul.address { list-style-type: none; padding: 0; }
-        li.dir-boxstuff { padding-bottom: .6em }
-        /*------------ End Workday stuff-------*/
-    </style>
 </head>
 
 <body>
diff --git a/husky_directory/templates/full_result.html b/husky_directory/templates/full_result.html
index f073e70f..b19d81c6 100644
--- a/husky_directory/templates/full_result.html
+++ b/husky_directory/templates/full_result.html
@@ -1,30 +1,42 @@
-<h4>{{ person['name'] }}</h4>
-<ul class="dir-listing">
-    {% for email in person['emails'] %}
-        <li>{{ email }}</li>
-    {% endfor %}
-    {% for contact_method, numbers in
-                           person['phone_contacts'].items() %}
-        {% if numbers|length %}
+<!-- Begin Person Card -->
+<div class="person-card">
+    <!-- Full Name -->
+    <h4 class="person-name">{{ person['name'] }}</h4>
+    <!-- Departments -->
+    <ul class="no-style-list">
+        {% for entry in person['departments'] %}
+            <li>{{ entry.title }}, {{ entry.department }}</li>
+        {% endfor %}
+    </ul>
+    <ul class="dir-listing no-style-list">
+        <!-- Emails -->
+        {% if person['emails']|length %}
             <li>
-                {{ contact_method|singularize|titleize }}:
-                {{ numbers|join(', ') }}
+                {% if person['emails']|length > 1 %}
+                    Emails: {{ person['emails']|join(', ') }}
+                {% else %}
+                    Email: {{ person['emails'][0] }}
+                {% endif %}
             </li>
         {% endif %}
-    {% endfor %}
-    {% if person['box_number'] %}
-        <li class="dir-boxstuff">Box {{ person['box_number'] }}</li>
-    {% endif %}
-</ul>
-<ul class="multiaddr">
-    {% for entry in person['departments'] %}
-        <li>{{ entry.title }}, {{ entry.department }}</li>
-    {% endfor %}
-</ul>
-<form method="POST" action="/person/vcard">
-    <input type="hidden" name="person_href" value="{{ person['href'] }}">
-    <input class="btn btn-primary"
-           type="submit"
-           name="expand-{{ person['href'] }}"
-           value="Download vcard">
-</form>
+        <!-- Phones -->
+        {% for contact_method, numbers in person['phone_contacts'].items() %}
+            {% if numbers|length %}
+                <li>{{ contact_method|singularize|titleize }}: {{ numbers|join(', ') }}</li>
+            {% endif %}
+        {% endfor %}
+        <!-- Box Number -->
+        {% if person['box_number'] %}
+            <li class="person-box-number">Box {{ person['box_number'] }}</li>
+        {% endif %}
+    </ul>
+    <!-- Download vCard Button -->
+    <form method="POST" action="/person/vcard">
+        <input type="hidden" name="person_href" value="{{ person['href'] }}">
+        <input class="btn btn-primary"
+               type="submit"
+               name="expand-{{ person['href'] }}"
+               value="Download vcard">
+    </form>
+</div>
+<!-- End Person Card -->
diff --git a/husky_directory/templates/full_results.html b/husky_directory/templates/full_results.html
index 1d3330d4..333e045f 100644
--- a/husky_directory/templates/full_results.html
+++ b/husky_directory/templates/full_results.html
@@ -1,7 +1,6 @@
 {# scenario: models.search.DirectoryQueryScenarioOutput #}
 {% for scenario in search_result["scenarios"]%}
     {% if scenario['num_results'] > 0 %}
-        <p>
         {# population: str
          # results: models.search.DirectoryQueryPopulationOutput
         #}
@@ -16,6 +15,5 @@
                 {% endfor %}
             {% endif %}
         {% endfor %}
-        </p>
     {% endif %}
 {% endfor %}
diff --git a/husky_directory/templates/links.html b/husky_directory/templates/links.html
index d23e268d..8561f0b2 100644
--- a/husky_directory/templates/links.html
+++ b/husky_directory/templates/links.html
@@ -1,4 +1,4 @@
-                <div class="footerblock" style="margin-top:70px;margin-bottom:70px;">
+                <div class="footerblock">
                     <div class="rcwblock">
                         <p>
                             Pursuant to RCW 42.56, the UW is providing this directory information
diff --git a/husky_directory/templates/result_count.html b/husky_directory/templates/result_count.html
index 6ec53332..8cc6045a 100644
--- a/husky_directory/templates/result_count.html
+++ b/husky_directory/templates/result_count.html
@@ -1,4 +1,4 @@
-<div class="rsummary" id="rsummary">
+<div class="results-summary">
     {% if search_result['num_results'] > 0 %}
         {% for scenario in search_result['scenarios'] %}
             {% if scenario['num_results'] > 0 %}
@@ -36,9 +36,7 @@
                         </a>
                     {% endif %}
                 {% endfor %}
-                <br>
             {% endif %}
         {% endfor %}
-        <br>
     {% endif %}
 </div>
diff --git a/husky_directory/templates/search_options.html b/husky_directory/templates/search_options.html
index 09240e7c..f19493c8 100644
--- a/husky_directory/templates/search_options.html
+++ b/husky_directory/templates/search_options.html
@@ -52,7 +52,7 @@ <h3>Search options</h3>
 {% if request_input is not blank %}
     {% set selected_length = request_input['render_length'] %}
 {% endif %}
-<div class="col-md-2">
+<div class="col-md-3">
     <h3>Kind of listing</h3>
     <label for="length-full">
         <input type="radio"
diff --git a/husky_directory/templates/summary_results_table/base.html b/husky_directory/templates/summary_results_table/base.html
index 8c1a6ab6..9faddcb6 100644
--- a/husky_directory/templates/summary_results_table/base.html
+++ b/husky_directory/templates/summary_results_table/base.html
@@ -5,7 +5,7 @@
             <th>Name</th>
             <th>Phone</th>
             <th>Email</th>
-            <th>*</th>
+            <th class="view-more">More Info</th>
         </tr>
     </thead>
     <tbody>
diff --git a/husky_directory/templates/summary_results_table/scenario_population_block.html b/husky_directory/templates/summary_results_table/scenario_population_block.html
index 07030076..899b0958 100644
--- a/husky_directory/templates/summary_results_table/scenario_population_block.html
+++ b/husky_directory/templates/summary_results_table/scenario_population_block.html
@@ -2,7 +2,7 @@
 and then 1 or more rows of results. #}
 <tr>
     <td colspan="3">
-        <div class="rcdescr">
+        <div class="scenario-description">
             {% set scenario_desc = scenario['description'] %}
             {% set anchor_id = population_name ~ '-' ~ scenario_desc|linkify %}
             <h3 class='scenario-anchor-reference'
@@ -12,7 +12,6 @@
             </h3>
         </div>
     </td>
-    <td>&nbsp;</td>
 </tr>
 
 {# data: models.search.Person #}
@@ -29,7 +28,7 @@
             {% endfor %}
             &nbsp;
         </td>
-        <td>
+        <td class="view-more">
             {% set form_id = "more-form-" ~ loop.index  %}
             <form action="/person/listing" id="{{ form_id }}"
                   method="POST" name="{{ form_id }}">
@@ -61,7 +60,7 @@
                 <input id="{{ form_id }}-population"
                        type="hidden" name="population"
                        value="{{ request_input['population'] }}">
-                <input class="btn btn-primary"
+                <input class="btn btn-primary table-view-more-btn"
                        type="submit"
                        name="expand-{{ loop.index }}" value="More">
             </form>
diff --git a/pyproject.toml b/pyproject.toml
index 49073c75..bb931c18 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "uw-husky-directory"
-version = "2.4.0"
+version = "2.4.1"
 description = "An updated version of the UW Directory"
 authors = ["Thomas Thorogood <goodtom@uw.edu>"]
 license = "MIT"
diff --git a/tests/blueprints/test_search_blueprint.py b/tests/blueprints/test_search_blueprint.py
index f03647cb..d7a8418c 100644
--- a/tests/blueprints/test_search_blueprint.py
+++ b/tests/blueprints/test_search_blueprint.py
@@ -251,7 +251,7 @@ def test_render_full_no_box_number(self):
                 },
             )
         ) as html:
-            assert not html.find_all("li", class_="dir-boxstuff")
+            assert not html.find_all("li", class_="person-box-number")
             self.html_validator.assert_has_scenario_anchor(
                 "students-last-name-is-lovelace"
             )