Skip to content

Commit 7d47bfa

Browse files
committed
Improve the CSS word breaking behavior #3
Signed-off-by: tdruez <[email protected]>
1 parent 5c10582 commit 7d47bfa

37 files changed

+56
-68
lines changed

component_catalog/templates/component_catalog/includes/component_list_table.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% load i18n %}
22
{% load inject_preserved_filters from dje_tags %}
33
{% load naturaltime_short from dje_tags %}
4-
<table id="object-list-table" class="table table-bordered table-striped table-md components-table">
4+
<table id="object-list-table" class="table table-bordered table-striped table-md text-break components-table">
55
{% if form %}
66
{% include 'includes/object_list_table_header.html' with include_checkbox=True checkbox_select_all=True %}
77
{% else %}
@@ -54,7 +54,7 @@
5454
<div class="smaller text-muted-darker" title="{{ object.last_modified_date|date:'N j, Y, f A' }}">Modified {{ object.last_modified_date|naturaltime_short }}</div>
5555
{% endif %}
5656
</td>
57-
<td class="break-all">
57+
<td>
5858
{{ object.version }}
5959
</td>
6060
{% if dataspace.show_usage_policy_in_user_views %}
@@ -64,7 +64,7 @@
6464
{% endif %}
6565
</td>
6666
{% endif %}
67-
<td class="break-word">
67+
<td class="text-break">
6868
{% if dataspace.show_usage_policy_in_user_views %}
6969
{{ object.get_license_expression_linked_with_policy|default_if_none:"" }}
7070
{% else %}

component_catalog/templates/component_catalog/includes/package_list_table.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
{% load inject_preserved_filters from dje_tags %}
33
{% load urlize_target_blank from dje_tags %}
44
{% load naturaltime_short from dje_tags %}
5-
<table id="object-list-table" class="table table-bordered table-striped table-md table-fixed-layout packages-table">
5+
<table id="object-list-table" class="table table-bordered table-striped table-md table-fixed-layout text-break packages-table">
66
{% if form or add_to_component_form %}
77
{% include 'includes/object_list_table_header.html' with include_checkbox=True checkbox_select_all=True %}
88
{% else %}
@@ -46,7 +46,7 @@
4646
{% endif %}
4747
</td>
4848
{% endif %}
49-
<td class="break-word">
49+
<td class="text-break">
5050
{% if dataspace.show_usage_policy_in_user_views %}
5151
{{ object.get_license_expression_linked_with_policy|default_if_none:"" }}
5252
{% else %}

component_catalog/templates/component_catalog/includes/scan_list_table.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{% load i18n %}
22
{% load humanize %}
3-
<table class="table table-bordered table-hover">
3+
<table class="table table-bordered table-hover text-break">
44
<thead>
55
<tr>
66
<th style="background-color: #f9f9f9; padding: .75rem 1.25rem;">
@@ -17,7 +17,7 @@
1717
<tr>
1818
<td style="padding: .5rem 1.25rem;">
1919
<div class="row align-items-center">
20-
<div class="col" style="word-break: break-all;">
20+
<div class="col">
2121
{% if scan.package %}
2222
<i class="fas fa-archive"></i>
2323
<strong style="font-size: 115%;">

component_catalog/templates/component_catalog/tabs/field_key_files_table.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
{% if forloop.first %}<dl class="row mb-0">{% endif %}
33
<dt class="col-sm-2 text-end pt-2 pe-0"></dt>
44
<dd class="col-sm-10">
5-
<table class="table table-bordered table-md">
5+
<table class="table table-bordered table-md text-break">
66
<thead>
77
<tr>
88
<th>Key file</th>

component_catalog/templates/component_catalog/tabs/tab_product_usage.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% load i18n %}
22
{% load as_icon from dje_tags %}
33
{% spaceless %}
4-
<table class="table table-bordered table-hover table-md">
4+
<table class="table table-bordered table-hover table-md text-break">
55
<thead>
66
<tr>
77
<th>{% trans 'Product name' %}</th>

component_catalog/templates/component_catalog/tabs/tab_subcomponents.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% load i18n %}
22
{% load as_icon from dje_tags %}
33
{% spaceless %}
4-
<table class="table table-bordered table-hover table-md">
4+
<table class="table table-bordered table-hover table-md text-break">
55
<thead>
66
<tr>
77
<th>

component_catalog/tests/test_views.py

+1-1
Original file line numberDiff line numberDiff line change
@@ -4289,7 +4289,7 @@ def test_component_catalog_list_view_license_expression(self):
42894289

42904290
response = self.client.get(component_list_url)
42914291
expected = (
4292-
f'<td class="break-word"><span class="license-expression">'
4292+
f'<td class="text-break"><span class="license-expression">'
42934293
f'<a href="{l1.get_absolute_url()}" title="{l1.short_name}">{l1.key}</a>'
42944294
f"</span></td>"
42954295
)

dejacode/static/css/dejacode_bootstrap.css

+6-18
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,6 @@ body {
2525
body.body-background, .bg-light {
2626
background-color: #f9fbfd;
2727
}
28-
.white-background {
29-
background-color: #fff;
30-
}
3128
a {
3229
color: #2e73d0;
3330
text-decoration: none;
@@ -71,9 +68,6 @@ a.dropdown-item:hover {
7168
margin-bottom: 0;
7269
font-size: 1.625rem;
7370
}
74-
.transparent {
75-
color: transparent;
76-
}
7771
.smaller {
7872
font-size: 90%;
7973
}
@@ -87,6 +81,10 @@ code {
8781
height: 1rem;
8882
width: 1rem;
8983
}
84+
.text-break-initial {
85+
word-wrap: initial!important;
86+
word-break: initial!important;
87+
}
9088

9189
/* -- Navbar -- */
9290
nav.navbar {
@@ -351,13 +349,13 @@ textarea.licenseexpressionwidget {
351349

352350
/* -- PurlDB List -- */
353351
table.purldb-table .column-type {
354-
min-width: 70px;
352+
min-width: 75px;
355353
}
356354
table.purldb-table .column-name {
357355
min-width: 75px;
358356
}
359357
table.purldb-table .column-version {
360-
min-width: 90px;
358+
min-width: 95px;
361359
}
362360
table.purldb-table .column-license_expression {
363361
max-width: 250px;
@@ -539,7 +537,6 @@ td.sub-header {
539537
}
540538
.table-fixed-layout {
541539
table-layout: fixed;
542-
word-break: break-all;
543540
}
544541
.table thead tr th {
545542
vertical-align: middle;
@@ -727,9 +724,6 @@ code.key {
727724
border-radius: 0.1875rem;
728725
white-space: nowrap;
729726
}
730-
.white-space-normal {
731-
white-space: normal !important;
732-
}
733727
.dropdown-item.active,
734728
.dropdown-item:active {
735729
background-color: #4b70aa;
@@ -763,12 +757,6 @@ pre.json-document {
763757
.jumbotron-heading {
764758
font-weight: 300;
765759
}
766-
.break-word {
767-
word-break: break-word;
768-
}
769-
.break-all {
770-
word-break: break-all;
771-
}
772760
h4.feature-title {
773761
color: #95aac9;
774762
padding-top: .5rem;

dje/templates/account/profile.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
<div>
3232
<label for="api_key" class="form-label">API Key</label>
3333
<div class="input-group mb-3">
34-
<input type="text" class="form-control transparent" readonly="readonly" id="api_key" value="{{ request.user.auth_token.key|default:'<i>Not available</i>' }}">
34+
<input type="text" class="form-control bg-transparent" readonly="readonly" id="api_key" value="{{ request.user.auth_token.key|default:'<i>Not available</i>' }}">
3535
<button class="btn btn-secondary" type="button" id="show_api_key" data-bs-toggle="tooltip" title="Display/Hide API key" aria-label="Display/Hide API key">
3636
<i id="eye_icon" class="far fa-eye-slash"></i>
3737
</button>

dje/templates/activity_log.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<h1>{{ verbose_name|capfirst }} Activity Log</h1>
1111
<h4>Activity for the last: {{ days }} days, for Dataspace: {{ dataspace.name }}</h4>
1212
<h5>Generated on {{ now }}</h5>
13-
<table class="table table-striped table-bordered table-hover table-md mt-3">
13+
<table class="table table-striped table-bordered table-hover table-md mt-3 text-break">
1414
<thead>
1515
<tr>
1616
<th>{{ verbose_name|capfirst }}</th>

dje/templates/admin/object_import.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ <h5>Help for {{ importer.verbose_name|title }} Import:</h5>
5656
</strong>
5757
</div>
5858
</div>
59-
<table id="extended_help" class="table table-striped table-bordered" style="display: none; margin-top: 10px;">
59+
<table id="extended_help" class="table table-striped table-bordered text-break mt-3" style="display: none;">
6060
<thead>
6161
<tr>
6262
<th>Supported columns</th>
@@ -154,7 +154,7 @@ <h4 class="mb-0">Import preview</h4>
154154
{% endfor %}
155155
</div>
156156

157-
<table class="table table-bordered table-md">
157+
<table class="table table-bordered table-md text-break">
158158
<thead>
159159
<tr>
160160
<th>&nbsp;</th>

dje/templates/includes/field_table.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% if forloop.first %}<dl class="row mb-0">{% endif %}
22
<dt class="col-sm-2 text-end pt-2 pe-0"></dt>
33
<dd class="col-sm-10">
4-
<table class="table table-bordered table-md">
4+
<table class="table table-bordered table-md text-break">
55
<thead>
66
<tr>
77
{% for entry in values %}

dje/templates/includes/global_search_component_table.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ <h3>
1616
{% endif %}
1717
</small>
1818
</h3>
19-
<table class="table table-bordered table-striped table-md">
19+
<table class="table table-bordered table-striped table-md text-break">
2020
<thead>
2121
<tr>
2222
<th>Name</th>

dje/templates/includes/global_search_license_table.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ <h3>
1616
{% endif %}
1717
</small>
1818
</h3>
19-
<table class="table table-bordered table-striped table-md">
19+
<table class="table table-bordered table-striped table-md text-break">
2020
<thead>
2121
<tr>
2222
<th>Name</th>

dje/templates/includes/global_search_owner_table.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ <h3>
1717
{% endif %}
1818
</small>
1919
</h3>
20-
<table class="table table-bordered table-striped table-md">
20+
<table class="table table-bordered table-striped table-md text-break">
2121
<thead>
2222
<tr>
2323
<th>Name</th>

dje/templates/includes/global_search_package_table.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ <h3>
1717
{% endif %}
1818
</small>
1919
</h3>
20-
<table class="table table-bordered table-striped table-md">
20+
<table class="table table-bordered table-striped table-md text-break">
2121
<thead>
2222
<tr>
2323
<th>Identifier</th>

dje/templates/includes/global_search_product_table.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h3>
99
Click <a href="{% url 'product_portfolio:product_list' %}?q={{ search_query }}">here</a> to see the full list.
1010
</small>
1111
</h3>
12-
<table class="table table-bordered table-striped table-md">
12+
<table class="table table-bordered table-striped table-md text-break">
1313
<thead>
1414
<tr>
1515
<th>Name</th>

dje/templates/includes/object_list_table_header.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{% load i18n %}
2-
<thead>
2+
<thead class="text-break-initial">
33
<tr>
44
{% if is_grouping_active %}
55
<th class="column-grouping" scope="col">

dje/templates/object_details_base.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
{% block page_title %}{% trans verbose_name_plural|title %}: {{ object }}{% endblock %}
77

8-
{% block main_class %}white-background{% endblock %}
8+
{% block main_class %}bg-white{% endblock %}
99

1010
{% block content %}
1111
<div class="header container">
@@ -21,7 +21,7 @@
2121
{% include 'includes/reference_data_label.html' %}
2222
{% endif %}
2323
</div>
24-
<h1 class="header-title break-word">
24+
<h1 class="header-title text-break">
2525
{% block header_title %}
2626
{{ object }}
2727
<small class="ms-1" style="font-size: 70%">

dje/templates/tabs/tab_component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% load i18n %}
22
{% load urlize_target_blank from dje_tags %}
33
{% spaceless %}
4-
<table class="table table-bordered table-hover table-md">
4+
<table class="table table-bordered table-hover table-md text-break">
55
<thead>
66
<tr>
77
<th>{% trans 'Name' %}</th>
@@ -25,7 +25,7 @@
2525
</strong>
2626
</td>
2727
<td>{{ component.version }}</td>
28-
<td class="break-word" style="max-width: 250px;">
28+
<td class="text-break" style="max-width: 250px;">
2929
{% if show_licenses_policy %}
3030
{{ component.get_license_expression_linked_with_policy|default_if_none:'' }}
3131
{% else %}

dje/templates/tabs/tab_external.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{% load i18n %}
22
{% load urlize_target_blank from dje_tags %}
3-
<table class="table table-bordered table-striped table-md">
3+
<table class="table table-bordered table-striped table-md text-break">
44
<thead>
55
<tr>
66
<th>

dje/templates/tabs/tab_licenses.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% load i18n %}
22
{% spaceless %}
33
{% for licenses_table in extra_context.licenses_tables %}
4-
<table class="table table-bordered table-md col-count-{{ licenses_table|length }}">
4+
<table class="table table-bordered table-md col-count-{{ licenses_table|length }} text-break">
55
<tr>
66
<th>
77
{% trans 'License' %}

license_library/templates/license_library/includes/license_list_table.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% load i18n %}
22
{% load inject_preserved_filters from dje_tags %}
33
{% load dje_tags %}
4-
<table id="object-list-table" class="table table-bordered table-striped table-md licenses-table">
4+
<table id="object-list-table" class="table table-bordered table-striped table-md text-break licenses-table">
55
{% include 'includes/object_list_table_header.html' %}
66
<tbody>
77
{% for object in object_list %}

organization/templates/organization/includes/owner_list_table.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% load i18n %}
22
{% load inject_preserved_filters from dje_tags %}
33
{% load urlize_target_blank from dje_tags %}
4-
<table id="object-list-table" class="table table-bordered table-striped table-md table-fixed-layout owners-table">
4+
<table id="object-list-table" class="table table-bordered table-striped table-md text-break table-fixed-layout owners-table">
55
{% include 'includes/object_list_table_header.html' %}
66
<tbody>
77
{% for object in object_list %}
@@ -16,7 +16,7 @@
1616
{% endfor %}
1717
</ul>
1818
</td>
19-
<td class="break-word">
19+
<td class="text-break">
2020
{% with licenses=object.license_set.all %}
2121
<ul class="fa-ul ms-4 mb-0">
2222
{% for license in licenses|slice:":8" %}

organization/templates/organization/tabs/tab_license.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{% load i18n %}
22
{% spaceless %}
3-
<table class="table table-bordered table-hover table-md">
3+
<table class="table table-bordered table-hover table-md text-break">
44
<thead>
55
<tr>
66
<th>{% trans 'Name' %}</th>

product_portfolio/templates/product_portfolio/includes/product_list_table.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{% load i18n %}
22
{% load inject_preserved_filters from dje_tags %}
3-
<table id="object-list-table" class="table table-bordered table-striped table-md products-table">
3+
<table id="object-list-table" class="table table-bordered table-striped table-md text-break products-table">
44
{% include 'includes/object_list_table_header.html' with include_checkbox=True %}
55
<tbody>
66
{% for name_version_group in name_version_groups %}

product_portfolio/templates/product_portfolio/license_summary.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ <h1 class="header-title">
2828

2929
{% include 'includes/messages_alert.html' %}
3030

31-
<table class="table table-bordered">
31+
<table class="table table-bordered text-break">
3232
<thead>
3333
<tr>
3434
<th scope="col">Licenses</th>

product_portfolio/templates/product_portfolio/object_manage_grid.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
.table-sm .col-form-label {font-size: 0.825rem;}
1515
textarea.licenseexpressionwidget {min-width: 150px !important;}
1616
.license-expression-header {width: auto; color: #6c757d; font-size: 87.5%;}
17-
.object_display {min-width: 240px; word-break: break-word;}
17+
.object_display {min-width: 240px; word-break: break-word; word-wrap: break-word;}
1818
.autocompleteinput {min-width: 200px;}
1919
.asteriskField {display: none;}
2020
.invalid-feedback {display: block !important;}

product_portfolio/templates/product_portfolio/product_tree_comparison.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ <h1 class="header-title">
4141
</div>
4242
</div>
4343

44-
<table class="table table-bordered table-striped table-md">
44+
<table class="table table-bordered table-striped table-md text-break">
4545
<thead>
4646
<tr>
4747
<th style="width: 20%">Changes</th>

0 commit comments

Comments
 (0)