Uni/WME
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Make use of css inside xslt

Browse source
This commit is contained in:
hodasemi 2018-11-14 10:11:40 +01:00
parent 591de1e5eb
commit d0249ac8a3
3 changed files with 123 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
aufgabe2/css/main.css
View file

@ -151,6 +151,31 @@ h1 {
overflow-x: scroll; overflow-x: scroll;
} }
.world_table {
width: 100%
}
.world_table tr:nth-child(odd) {
background-color: lightgrey;
}
.world_table th {
background-color: #fff;
white-space: nowrap; /* kein umbruch bei schmaler ansicht */
}
.world_table th i {
font-size: 0.6em;
color: lightgreen;
}
.world_table th td {
line-height: 1em;
padding: 11px 0;
font-size: 14px; /* same as section */
}
/*
table#t01 { table#t01 {
width: 100%; width: 100%;
} }
@ -161,9 +186,9 @@ table#t01 tr:nth-child(odd) {
table#t01 th { table#t01 th {
background-color: #fff; background-color: #fff;
white-space: nowrap; /* kein umbruch bei schmaler ansicht */ white-space: nowrap; // kein umbruch bei schmaler ansicht
} }
/* die sort up sort down icons neben den Spaltennamen */ // die sort up sort down icons neben den Spaltennamen
table#t01 th i { table#t01 th i {
font-size: 0.6em; font-size: 0.6em;
color: lightgreen; color: lightgreen;
@ -172,8 +197,9 @@ table#t01 th i {
table#t01 th, table#t01 td { table#t01 th, table#t01 td {
line-height: 1em; line-height: 1em;
padding: 11px 0; padding: 11px 0;
font-size: 14px; /* same as section */ font-size: 14px; // same as section
} }
*/
@media only screen and (max-width: 1200px) { @media only screen and (max-width: 1200px) {
table#t01 th:nth-child(n+7), table#t01 td:nth-child(n+7) { table#t01 th:nth-child(n+7), table#t01 td:nth-child(n+7) {

2
aufgabe2/main.inc.php
View file

@ -22,7 +22,7 @@ At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun pa
<div id="options" class="option_list"></div> <div id="options" class="option_list"></div>
<div class="table-wrapper"> <div class="table-wrapper">
<table id="t01"></table> <table id="t01" class="world_table"></table>
</div> </div>

90
aufgabe2/resources/world_data_sheet.xslt
View file

@ -21,23 +21,82 @@
<body> <body>
<h1>World Data Overview ...</h1> <h1>World Data Overview ...</h1>
<div class="table-wrapper"> <div class="table-wrapper">
<table> <table class="world_table">
<thead>
<tr> <tr>
<th>id</th> <th onclick="sortTable(0)">
<th>name</th> id
<th>birth_rate_per_1000</th> <i class="fas fa-chevron-up"></i>&nbsp;
<th>cell_phones_per_100</th> <i class="fas fa-chevron-down"></i>
<th>children_per_woman</th> </th>
<th>electricity_consumption_per_capita</th> <th onclick="sortTable(1)">
<th>gdp_per_capita</th> name
<th>gdp__per__capita__growth</th> <i class="fas fa-chevron-up"></i>&nbsp;
<th>inflation_annual</th> <i class="fas fa-chevron-down"></i>
<th>internet_user_per_100</th> </th>
<th>life_expectancy</th> <th onclick="sortTable(2)">
<th>military_expenditure_percent_of_gdp</th> stringPerToSlash(birth_rate_per_1000)
<th>gps_lat</th> <i class="fas fa-chevron-up"></i>&nbsp;
<th>gps_long</th> <i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(3)">
stringPerToSlash(cell_phones_per_100)
<i class="fas fa-chevron-up"></i>&nbsp;
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(4)">
stringPerToSlash(children_per_woman)
<i class="fas fa-chevron-up"></i>&nbsp;
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(5)">
stringPerToSlash(electricity_consumption_per_capita)
<i class="fas fa-chevron-up"></i>&nbsp;
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(6)">
stringPerToSlash(gdp_per_capita)
<i class="fas fa-chevron-up"></i>&nbsp;
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(7)">
stringPerToSlash(gdp__per__capita__growth)
<i class="fas fa-chevron-up"></i>&nbsp;
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(8)">
inflation_annual
<i class="fas fa-chevron-up"></i>&nbsp;
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(9)">
stringPerToSlash(internet_user_per_100)
<i class="fas fa-chevron-up"></i>&nbsp;
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(10)">
life_expectancy
<i class="fas fa-chevron-up"></i>&nbsp;
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(11)">
military_expenditure_percent_of_gdp
<i class="fas fa-chevron-up"></i>&nbsp;
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(12)">
gps_lat
<i class="fas fa-chevron-up"></i>&nbsp;
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(13)">
gps_long
<i class="fas fa-chevron-up"></i>&nbsp;
<i class="fas fa-chevron-down"></i>
</th>
</tr> </tr>
</thread>
<tbody>
<xsl:for-each select="Countries/Country"> <xsl:for-each select="Countries/Country">
<tr> <tr>
<td><xsl:value-of select="id"/></td> <td><xsl:value-of select="id"/></td>
@ -56,6 +115,7 @@
<td><xsl:value-of select="gps_long"/></td> <td><xsl:value-of select="gps_long"/></td>
</tr> </tr>
</xsl:for-each> </xsl:for-each>
</tbody>
</table> </table>
</div> </div>
</body> </body>