Line break long routes to prevent scrolling
Prevents horizontal scrolling on the rails/info/routes page when there are long route names by introducing styled line breaks so that the table will fit within the rendered width of the browser. This is particularly relevant when there are a lot of nested namespaces in a rails project and makes the page more readable, especially when filtering with a search query. The table headings have also been left-aligned so that they line up more intuitively with the content and now that the table is no longer horizontally scrolling, less space has been explicitly allocated for the HTTP Verb column.
This commit is contained in:
parent
7b5e2f3d2c
commit
b11131868f
@ -2,18 +2,26 @@
|
|||||||
#route_table {
|
#route_table {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
word-wrap:break-word;
|
||||||
|
table-layout: fixed;
|
||||||
|
width:100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#route_table thead tr {
|
#route_table thead tr {
|
||||||
border-bottom: 2px solid #ddd;
|
border-bottom: 2px solid #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#route_table th {
|
||||||
|
padding-left: 30px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
#route_table thead tr.bottom {
|
#route_table thead tr.bottom {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#route_table thead tr.bottom th {
|
#route_table thead tr.bottom th {
|
||||||
padding: 10px 0;
|
padding: 10px 30px;
|
||||||
line-height: 15px;
|
line-height: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -21,6 +29,10 @@
|
|||||||
-webkit-appearance: textfield;
|
-webkit-appearance: textfield;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#route_table thead th.http-verb {
|
||||||
|
width: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
#route_table tbody tr {
|
#route_table tbody tr {
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid #ddd;
|
||||||
}
|
}
|
||||||
@ -66,7 +78,7 @@
|
|||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Helper</th>
|
<th>Helper</th>
|
||||||
<th>HTTP Verb</th>
|
<th class="http-verb">HTTP Verb</th>
|
||||||
<th>Path</th>
|
<th>Path</th>
|
||||||
<th>Controller#Action</th>
|
<th>Controller#Action</th>
|
||||||
</tr>
|
</tr>
|
||||||
|
Loading…
Reference in New Issue
Block a user