mirror of
https://git.adityakumar.xyz/hugo-theme-even.git
synced 2024-11-09 14:59:45 +00:00
feat(table): responsive table
Merge from ahonn/hexo-theme-even@2c06f7bdfd Closes #107
This commit is contained in:
parent
e9cccbf2b9
commit
9d8940b4f6
4 changed files with 46 additions and 14 deletions
|
@ -480,6 +480,22 @@ function doIt() {
|
||||||
| ~~Orange~~ | Oranges | **Carrot** |
|
| ~~Orange~~ | Oranges | **Carrot** |
|
||||||
| Green | ~~***Pears***~~ | Spinach |
|
| Green | ~~***Pears***~~ | Spinach |
|
||||||
|
|
||||||
|
Class or Enum | Year | Month | Day | Hours | Minutes | Seconds* | Zone Offset | Zone ID | toString Output | Where Discussed
|
||||||
|
----------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |:-------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------:| ------------------------------------------------------------------------------------- |:-------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------:| -------------------------------------------------- | ---------------------------------------------------------------------------------------------------
|
||||||
|
`Instant` | | | | | | <center>![checked](/favicon-16x16.png)</center> | | | `2013-08-20T15:16:26.355Z` | [Instant Class](https://docs.oracle.com/javase/tutorial/datetime/iso/instant.html)
|
||||||
|
`LocalDate` | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | | | | | | `2013-08-20` | [Date Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/date.html)
|
||||||
|
`LocalDateTime` | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | | | `2013-08-20T08:16:26.937` | [Date and Time Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/datetime.html)
|
||||||
|
`ZonedDateTime` | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | `2013-08-21T00:16:26.941+09:00[Asia/Tokyo]` | [Time Zone and Offset Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/timezones.html)
|
||||||
|
`LocalTime` | | | | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | | | `08:16:26.943` | [Date and Time Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/datetime.html)
|
||||||
|
`MonthDay` | | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | | | | | | `--08-20` | [Date Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/date.html)
|
||||||
|
`Year` | <center>![checked](/favicon-16x16.png)</center> | | | | | | | | `2013` | [Date Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/date.html)
|
||||||
|
`YearMonth` | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | | | | | | | `2013-08` | [Date Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/date.html)
|
||||||
|
`Month` | | <center>![checked](/favicon-16x16.png)</center> | | | | | | | `AUGUST` | [DayOfWeek and Month Enums](https://docs.oracle.com/javase/tutorial/datetime/iso/enum.html)
|
||||||
|
`OffsetDateTime` | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | | `2013-08-20T08:16:26.954-07:00` | [Time Zone and Offset Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/timezones.html)
|
||||||
|
`OffsetTime` | | | | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | | `08:16:26.957-07:00` | [Time Zone and Offset Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/timezones.html)
|
||||||
|
`Duration` | | | \** | \** | \** | <center>![checked](/favicon-16x16.png)</center> | | | `PT20H` (20 hours) | [Period and Duration](https://docs.oracle.com/javase/tutorial/datetime/iso/period.html)
|
||||||
|
`Period` | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | <center>![checked](/favicon-16x16.png)</center> | | | | \*** | \*** | `P10D` (10 days) | [Period and Duration](https://docs.oracle.com/javase/tutorial/datetime/iso/period.html)
|
||||||
|
|
||||||
## Smart Strong
|
## Smart Strong
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
|
@ -44,23 +44,27 @@
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
> table {
|
.table-wrapper {
|
||||||
max-width: 100%;
|
overflow-x: auto;
|
||||||
margin: 10px 0;
|
|
||||||
border-spacing: 0;
|
|
||||||
box-shadow: 2px 2px 3px rgba(0,0,0,.125);
|
|
||||||
|
|
||||||
thead {
|
> table {
|
||||||
background: $deputy-color;
|
max-width: 100%;
|
||||||
}
|
margin: 10px 0;
|
||||||
|
border-spacing: 0;
|
||||||
|
box-shadow: 2px 2px 3px rgba(0,0,0,.125);
|
||||||
|
|
||||||
th, td {
|
thead {
|
||||||
padding: 5px 15px;
|
background: $deputy-color;
|
||||||
border: 1px double $content-table-border-color;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
tr:hover {
|
th, td {
|
||||||
background-color: $deputy-color;
|
padding: 5px 15px;
|
||||||
|
border: 1px double $content-table-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:hover {
|
||||||
|
background-color: $deputy-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -266,4 +266,15 @@ Even.sequence = function() {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Even.responsiveTable = function() {
|
||||||
|
const tables = document.querySelectorAll('.post-content > table');
|
||||||
|
for (let i = 0; i < tables.length; i++) {
|
||||||
|
const table = tables[i];
|
||||||
|
const wrapper = document.createElement('div');
|
||||||
|
wrapper.className = 'table-wrapper';
|
||||||
|
table.parentElement.replaceChild(wrapper, table);
|
||||||
|
wrapper.appendChild(table);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
export {Even}
|
export {Even}
|
||||||
|
|
|
@ -9,6 +9,7 @@ $(document).ready(function () {
|
||||||
Even.fancybox();
|
Even.fancybox();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Even.responsiveTable();
|
||||||
Even.flowchart();
|
Even.flowchart();
|
||||||
Even.sequence();
|
Even.sequence();
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue