Skip to content

Commit 0ec8031

Browse files
soufianerafikgithub-actions[bot]
soufianerafik
and
github-actions[bot]
authored
[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>
1 parent f7e44bd commit 0ec8031

File tree

12 files changed

+195
-182
lines changed

12 files changed

+195
-182
lines changed

‎husky_directory/static/css/body.css

Lines changed: 32 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -261,12 +261,6 @@ img {
261261
.img-circle {
262262
border-radius: 50%;
263263
}
264-
hr {
265-
margin-top: 29px;
266-
margin-bottom: 29px;
267-
border: 0;
268-
border-top: 1px solid #8e7bb1;
269-
}
270264
.sr-only {
271265
position: absolute;
272266
width: 1px;
@@ -3993,123 +3987,36 @@ label.screen-reader {
39933987
background: url(http://www.washington.edu/static/home/wp-content/themes/uw-2014/assets/images/alert.png) no-repeat 0 -10px transparent;
39943988
}
39953989
}
3996-
@media print {
3997-
.uw-thinstrip,
3998-
#dawgdrops,
3999-
#quicklinks,
4000-
#uwsearcharea,
4001-
.uw-breadcrumbs,
4002-
.uw-hero-image,
4003-
.uw-hero-image:after,
4004-
.uw-hero-image:before,
4005-
.uw-news-image,
4006-
.site-news.single .uw-site-title,
4007-
.screen-reader-shortcut,
4008-
#wpadminbar,
4009-
#respond,
4010-
.uw-footer h4,
4011-
.uw-footer .footer-social,
4012-
.uw-footer > a,
4013-
.uw-footer {
4014-
display: none !important;
4015-
}
4016-
.uw-footer {
4017-
border-top: none;
4018-
}
4019-
.uw-footer ul.footer-links li a {
4020-
color: #fff !important;
4021-
}
4022-
.info-box {
4023-
margin-left: 0;
4024-
}
4025-
.widget {
4026-
padding-left: 0;
4027-
}
4028-
ul.uw-sidebar-menu {
4029-
margin-top: 0;
4030-
}
4031-
* {
4032-
text-shadow: none !important;
4033-
color: #000 !important;
4034-
background: transparent !important;
4035-
box-shadow: none !important;
4036-
position: static !important;
4037-
overflow: visible !important;
4038-
}
4039-
.site-regents p,
4040-
.site-regents a,
4041-
.site-regents li,
4042-
.site-regents td {
4043-
font-size: 14px !important;
4044-
line-height: 18px !important;
4045-
}
4046-
.site-regents h1 {
4047-
font-size: 23px !important;
4048-
}
4049-
.site-regents h2 {
4050-
font-size: 20px !important;
4051-
}
4052-
.site-regents h2.uw-site-title {
4053-
font-size: 40px !important;
4054-
}
4055-
.site-regents h3,
4056-
.site-regents h4 {
4057-
font-size: 17px !important;
4058-
}
4059-
a,
4060-
a:visited {
4061-
text-decoration: underline;
4062-
}
4063-
abbr[title]:after {
4064-
content: " (" attr(title) ")";
4065-
}
4066-
pre,
4067-
blockquote {
4068-
border: 1px solid #999;
4069-
page-break-inside: avoid;
4070-
}
4071-
thead {
4072-
display: table-header-group;
4073-
}
4074-
tr,
4075-
img {
4076-
page-break-inside: avoid;
4077-
}
4078-
img {
4079-
max-width: 100% !important;
4080-
}
4081-
p,
4082-
h2,
4083-
h3 {
4084-
orphans: 3;
4085-
widows: 3;
4086-
}
4087-
h2,
4088-
h3 {
4089-
page-break-after: avoid;
4090-
}
4091-
select {
4092-
background: #fff !important;
4093-
}
4094-
.navbar {
4095-
display: none;
4096-
}
4097-
.table td,
4098-
.table th {
4099-
background-color: #fff !important;
4100-
}
4101-
.btn > .caret,
4102-
.dropup > .btn > .caret {
4103-
border-top-color: #000 !important;
4104-
}
4105-
.label {
4106-
border: 1px solid #000;
4107-
}
4108-
.table {
4109-
border-collapse: collapse !important;
4110-
}
4111-
.table-bordered th,
4112-
.table-bordered td {
4113-
border: 1px solid #ddd !important;
4114-
}
3990+
3991+
.person-card {
3992+
background: #fff;
3993+
border: 1px solid #dfdfdf;
3994+
border-radius: 4px;
3995+
padding: 10px;
3996+
margin-bottom: 10px;
3997+
}
3998+
3999+
.person-name {
4000+
margin: 0;
4001+
}
4002+
4003+
.scenario-anchor,
4004+
.scenario-anchor-reference {
4005+
margin: 10px 0;
4006+
}
4007+
4008+
.table-view-more-btn {
4009+
width: 100%;
4010+
height: 30px;
4011+
padding: inherit;
4012+
}
4013+
4014+
.results-summary {
4015+
margin: 10px 0;
4016+
}
4017+
4018+
.no-style-list {
4019+
list-style-type: none;
4020+
padding: 0;
4021+
margin: 0;
41154022
}

‎husky_directory/static/css/print.css

Lines changed: 114 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,116 @@
1-
/****** Print Styles ******/
1+
/*
2+
TODO:
3+
- This print stylesheet was originally mixed into body.css, making it unnecessarily long and hard to maintain.
4+
- Cleaned it up a bit, but it still needs further refactoring for better readability and maintainability.
5+
- One approach worth considering is using a `.no-print` class in the HTML instead of explicitly listing elements here.
6+
- Something like `@media print { .no-print { display: none !important; } }` would make it cleaner and easier to manage.
7+
*/
28

3-
#wheader, .cblock, .rsummary, .mobileHeader, #footerMain, #footerMainNoPatch, .title, .btn-primary {
4-
display: none;
9+
@media print {
10+
/* Hide unnecessary UI elements */
11+
.uw-thinstrip, #dawgdrops, #quicklinks, #uwsearcharea, .uw-breadcrumbs,
12+
.uw-hero-image, .uw-hero-image:after, .uw-hero-image:before, .uw-news-image,
13+
.site-news.single .uw-site-title, .screen-reader-shortcut, #wpadminbar, #respond,
14+
.uw-footer h4, .uw-footer .footer-social, .uw-footer > a, .uw-footer,
15+
.cblock, .results-summary, .title, .btn-primary, #view-more, .navbar, .view-more {
16+
display: none !important;
17+
}
18+
19+
/* Footer cleanup */
20+
.uw-footer {
21+
border-top: none;
22+
}
23+
24+
.uw-footer ul.footer-links li a {
25+
color: #fff !important;
26+
}
27+
28+
/* Layout fixes */
29+
.info-box, .widget, ul.uw-sidebar-menu {
30+
margin-left: 0;
31+
padding-left: 0;
32+
margin-top: 0;
33+
}
34+
35+
/* Reset styles for print */
36+
* {
37+
text-shadow: none !important;
38+
color: #000 !important;
39+
background: transparent !important;
40+
box-shadow: none !important;
41+
position: static !important;
42+
overflow: visible !important;
43+
}
44+
45+
/* Typography adjustments */
46+
.site-regents {
47+
font-size: 14px !important;
48+
line-height: 18px !important;
49+
}
50+
51+
.site-regents h1 { font-size: 23px !important; }
52+
.site-regents h2 { font-size: 20px !important; }
53+
.site-regents h2.uw-site-title { font-size: 40px !important; }
54+
.site-regents h3, .site-regents h4 { font-size: 17px !important; }
55+
56+
/* Link styles */
57+
a, a:visited {
58+
text-decoration: underline;
59+
}
60+
61+
/* Abbreviation title formatting */
62+
abbr[title]:after {
63+
content: " (" attr(title) ")";
64+
}
65+
66+
/* Block elements */
67+
pre, blockquote {
68+
border: 1px solid #999;
69+
page-break-inside: avoid;
70+
}
71+
72+
/* Ensure headers remain at the top of pages */
73+
thead {
74+
display: table-header-group;
75+
}
76+
77+
/* Prevent page break issues */
78+
tr, img {
79+
page-break-inside: avoid;
80+
}
81+
82+
img {
83+
max-width: 100% !important;
84+
}
85+
86+
p, h2, h3 {
87+
orphans: 3;
88+
widows: 3;
89+
}
90+
91+
h2, h3 {
92+
page-break-after: avoid;
93+
}
94+
95+
/* Form and table styles */
96+
select {
97+
background: #fff !important;
98+
}
99+
100+
.table, .table-bordered {
101+
border-collapse: collapse !important;
102+
}
103+
104+
.table-bordered th, .table-bordered td {
105+
border: 1px solid #ddd !important;
106+
}
107+
108+
/* Buttons and labels */
109+
.btn > .caret, .dropup > .btn > .caret {
110+
border-top-color: #000 !important;
111+
}
112+
113+
.label {
114+
border: 1px solid #000;
115+
}
5116
}

‎husky_directory/templates/base.html

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,11 @@
1212
<meta name="robots" content="noarchive" />
1313

1414
<!-- Desktop -->
15-
<link rel="stylesheet"
16-
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css"
17-
type="text/css"/>
15+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css" type="text/css"/>
1816
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/mini.css') }}">
1917
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/body.css') }}">
2018
<link rel="shortcut icon" href="{{ url_for('static', filename='assets/favicon.ico') }}">
21-
2219
<link rel="stylesheet" type="text/css" media="print" href="{{ url_for('static', filename='css/print.css') }}">
23-
24-
<style>
25-
.btn.search:hover { color: black; }
26-
/*------------ Workday changes --------- */
27-
ul.dir-listing { list-style-type: none; padding: 0; }
28-
ul.multiaddr, ul.title, ul.address { list-style-type: none; padding: 0; }
29-
li.dir-boxstuff { padding-bottom: .6em }
30-
/*------------ End Workday stuff-------*/
31-
</style>
3220
</head>
3321

3422
<body>

‎husky_directory/templates/full_result.html

Lines changed: 39 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,42 @@
1-
<h4>{{ person['name'] }}</h4>
2-
<ul class="dir-listing">
3-
{% for email in person['emails'] %}
4-
<li>{{ email }}</li>
5-
{% endfor %}
6-
{% for contact_method, numbers in
7-
person['phone_contacts'].items() %}
8-
{% if numbers|length %}
1+
<!-- Begin Person Card -->
2+
<div class="person-card">
3+
<!-- Full Name -->
4+
<h4 class="person-name">{{ person['name'] }}</h4>
5+
<!-- Departments -->
6+
<ul class="no-style-list">
7+
{% for entry in person['departments'] %}
8+
<li>{{ entry.title }}, {{ entry.department }}</li>
9+
{% endfor %}
10+
</ul>
11+
<ul class="dir-listing no-style-list">
12+
<!-- Emails -->
13+
{% if person['emails']|length %}
914
<li>
10-
{{ contact_method|singularize|titleize }}:
11-
{{ numbers|join(', ') }}
15+
{% if person['emails']|length > 1 %}
16+
Emails: {{ person['emails']|join(', ') }}
17+
{% else %}
18+
Email: {{ person['emails'][0] }}
19+
{% endif %}
1220
</li>
1321
{% endif %}
14-
{% endfor %}
15-
{% if person['box_number'] %}
16-
<li class="dir-boxstuff">Box {{ person['box_number'] }}</li>
17-
{% endif %}
18-
</ul>
19-
<ul class="multiaddr">
20-
{% for entry in person['departments'] %}
21-
<li>{{ entry.title }}, {{ entry.department }}</li>
22-
{% endfor %}
23-
</ul>
24-
<form method="POST" action="/person/vcard">
25-
<input type="hidden" name="person_href" value="{{ person['href'] }}">
26-
<input class="btn btn-primary"
27-
type="submit"
28-
name="expand-{{ person['href'] }}"
29-
value="Download vcard">
30-
</form>
22+
<!-- Phones -->
23+
{% for contact_method, numbers in person['phone_contacts'].items() %}
24+
{% if numbers|length %}
25+
<li>{{ contact_method|singularize|titleize }}: {{ numbers|join(', ') }}</li>
26+
{% endif %}
27+
{% endfor %}
28+
<!-- Box Number -->
29+
{% if person['box_number'] %}
30+
<li class="person-box-number">Box {{ person['box_number'] }}</li>
31+
{% endif %}
32+
</ul>
33+
<!-- Download vCard Button -->
34+
<form method="POST" action="/person/vcard">
35+
<input type="hidden" name="person_href" value="{{ person['href'] }}">
36+
<input class="btn btn-primary"
37+
type="submit"
38+
name="expand-{{ person['href'] }}"
39+
value="Download vcard">
40+
</form>
41+
</div>
42+
<!-- End Person Card -->

‎husky_directory/templates/full_results.html

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{# scenario: models.search.DirectoryQueryScenarioOutput #}
22
{% for scenario in search_result["scenarios"]%}
33
{% if scenario['num_results'] > 0 %}
4-
<p>
54
{# population: str
65
# results: models.search.DirectoryQueryPopulationOutput
76
#}
@@ -16,6 +15,5 @@
1615
{% endfor %}
1716
{% endif %}
1817
{% endfor %}
19-
</p>
2018
{% endif %}
2119
{% endfor %}

0 commit comments

Comments
 (0)