Skip to content

Commit 7a7978a

Browse files
Goodyear2017Goodyear2017
authored
Solve table text getting truncated issue (#9920)
1 parent 3656fbb commit 7a7978a

6 files changed

Lines changed: 219 additions & 103 deletions

File tree

‎src/Bootstrap/dist/css/bootstrap-theme.css‎

Lines changed: 59 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Bootstrap/less/theme/page-statistics-most-downloaded.less‎

Lines changed: 98 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,105 @@
11
.page-statistics-most-downloaded {
2-
.show-all-packages-toggle {
2+
.show-all-packages-toggle {
3+
font-weight: bold;
4+
}
5+
6+
.table {
7+
margin-top: 40px;
8+
table-layout: auto;
9+
min-width: 100%;
10+
max-width: fit-content;
11+
width:fit-content;
12+
13+
thead {
14+
padding-bottom: 4px;
15+
margin-bottom: 10px;
16+
17+
th {
318
font-weight: bold;
19+
}
20+
21+
.packages {
22+
th:nth-child(1) {
23+
width: 10%;
24+
}
25+
26+
th:nth-child(2) {
27+
width: 70%;
28+
}
29+
30+
th:nth-child(3) {
31+
width: 20%;
32+
}
33+
}
34+
35+
.package-versions {
36+
th:nth-child(1) {
37+
width: 10%;
38+
}
39+
40+
th:nth-child(2) {
41+
width: 50%;
42+
}
43+
44+
th:nth-child(3) {
45+
width: 20%;
46+
}
47+
48+
th:nth-child(4) {
49+
width: 20%;
50+
}
51+
}
452
}
553

54+
tbody {
55+
margin-bottom: 20px;
56+
57+
td {
58+
overflow: visible;
59+
text-overflow: initial;
60+
}
61+
}
62+
}
63+
64+
@media (max-width: 1300px) {
665
.table {
7-
margin-top: 40px;
8-
table-layout: fixed;
9-
10-
thead {
11-
padding-bottom: 4px;
12-
margin-bottom: 10px;
13-
14-
th {
15-
font-weight: bold;
16-
}
17-
18-
.packages {
19-
th:nth-child(1) {
20-
width: 10%;
21-
}
22-
23-
th:nth-child(2) {
24-
width: 70%;
25-
}
26-
27-
th:nth-child(3) {
28-
width: 20%;
29-
}
30-
}
31-
32-
.package-versions {
33-
th:nth-child(1) {
34-
width: 10%;
35-
}
36-
37-
th:nth-child(2) {
38-
width: 50%;
39-
}
40-
41-
th:nth-child(3) {
42-
width: 20%;
43-
}
44-
45-
th:nth-child(4) {
46-
width: 20%;
47-
}
48-
}
49-
}
50-
51-
tbody {
52-
margin-bottom: 20px;
53-
54-
td {
55-
overflow: hidden;
56-
text-overflow: ellipsis;
57-
}
66+
67+
thead {
68+
.packages {
69+
th:nth-child(1) {
70+
width: auto;
71+
}
72+
73+
th:nth-child(2) {
74+
width: auto;
75+
}
76+
77+
th:nth-child(3) {
78+
width: auto;
79+
}
80+
}
81+
82+
.package-versions {
83+
th:nth-child(1) {
84+
width: auto;
85+
}
86+
87+
th:nth-child(2) {
88+
width: auto;
89+
}
90+
91+
th:nth-child(3) {
92+
width: auto;
93+
}
94+
95+
th:nth-child(4) {
96+
width: auto;
97+
}
5898
}
99+
}
59100
}
60-
}
101+
}
102+
.table-wrapper{
103+
overflow:auto;
104+
}
105+
}

‎src/Bootstrap/less/theme/page-statistics-overview.less‎

Lines changed: 56 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,69 @@
11
.page-statistics-overview {
2-
td {
3-
max-width: 0;
4-
overflow: hidden;
5-
text-overflow: ellipsis;
6-
white-space: nowrap;
7-
}
2+
td {
3+
max-width: fit-content;
4+
overflow: visible;
5+
text-overflow: initial;
6+
white-space: nowrap;
7+
}
88

9-
.stats-title-text {
10-
font-size: 1.6em;
11-
margin-bottom: 10px;
12-
}
9+
.stats-title-text {
10+
font-size: 1.6em;
11+
margin-bottom: 10px;
12+
}
1313

14-
.chart {
15-
width: 98%;
16-
height: 300px;
17-
}
14+
.chart {
15+
width: 98%;
16+
height: 300px;
1817

19-
circle.graph-dot {
20-
fill: steelblue;
18+
.svg:not(:root){
19+
overflow:visible;
2120
}
21+
}
2222

23-
circle.graph-dot:hover {
24-
fill: orange;
25-
}
23+
circle.graph-dot {
24+
fill: steelblue;
25+
}
2626

27-
rect.graph-bar {
28-
fill: steelblue;
29-
}
27+
circle.graph-dot:hover {
28+
fill: orange;
29+
}
3030

31-
rect.graph-bar:hover {
32-
fill: orange;
33-
}
31+
rect.graph-bar {
32+
fill: steelblue;
33+
}
3434

35-
line.graph-line {
36-
stroke: steelblue;
37-
stroke-width: 2;
38-
}
35+
rect.graph-bar:hover {
36+
fill: orange;
37+
}
3938

40-
text.graph-x-axis-text{
41-
font-size: 0.8em;
42-
}
39+
line.graph-line {
40+
stroke: steelblue;
41+
stroke-width: 2;
42+
}
4343

44-
text.graph-x-axis-date{
45-
font-size: 0.6em;
46-
}
44+
text.graph-x-axis-text {
45+
font-size: 0.8em;
46+
}
4747

48-
text.graph-y-axis-text {
49-
font-size: 0.9em;
50-
}
48+
text.graph-x-axis-date {
49+
font-size: 0.6em;
50+
}
51+
52+
text.graph-y-axis-text {
53+
font-size: 0.9em;
54+
}
55+
56+
.table {
57+
width: fit-content;
58+
max-width: fit-content;
59+
min-width: 100%;
60+
}
61+
62+
.table-wrapper {
63+
overflow: auto;
64+
}
65+
66+
svg:not(:root) {
67+
overflow: visible;
68+
}
5169
}

‎src/NuGetGallery/Views/Statistics/Index.cshtml‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<div class="row">
2424
@if (Model.IsDownloadPackageAvailable)
2525
{
26-
<div class="col-md-6 col-xs-12">
26+
<div class="col-md-6 col-xs-12 table-wrapper">
2727
<h2 class="stats-title-text">Package Downloads</h2>
2828

2929
<table class="table col-xs-12 borderless" aria-label="Package Downloads">
@@ -59,7 +59,7 @@
5959
}
6060
@if (Model.IsDownloadPackageVersionsAvailable)
6161
{
62-
<div class="col-md-6 col-xs-12">
62+
<div class="col-md-6 col-xs-12 table-wrapper">
6363
<h2 class="stats-title-text">Version Downloads</h2>
6464

6565
<table class="table col-xs-12 borderless" aria-label="Version Downloads">
@@ -102,7 +102,7 @@
102102
{
103103
<div class="col-md-6 col-xs-12">
104104
<h2 class="stats-title-text">NuGet Client Usage (Last 6 Weeks)</h2>
105-
<div class="col-xs-12 chart">
105+
<div class="col-xs-12 chart table-wrapper">
106106
@{
107107

108108
var limitCount = 15;
@@ -173,7 +173,7 @@
173173
{
174174
<div class="col-md-6 col-xs-12">
175175
<h2 class="stats-title-text">Downloaded Packages Per Week (Last 6 Weeks)</h2>
176-
<div class="col-xs-12 chart">
176+
<div class="col-xs-12 chart table-wrapper">
177177
@if (Model.Last6Weeks != null)
178178
{
179179
<svg class="chart" id="line-chart-sixweeks-downloads">

0 commit comments

Comments
 (0)