From 9d8940b4f67fd042c98b045633bf09913fb266a1 Mon Sep 17 00:00:00 2001
From: olOwOlo <26087907+olOwOlo@users.noreply.github.com>
Date: Mon, 5 Nov 2018 21:01:56 +0800
Subject: [PATCH] feat(table): responsive table
Merge from ahonn/hexo-theme-even@2c06f7bdfd4bad1e3fe33688014b3007b9b3a685
Closes #107
---
exampleSite/content/post/even-preview.md | 16 ++++++++++++
src/css/_partial/_post/_content.scss | 32 +++++++++++++-----------
src/js/even.js | 11 ++++++++
src/js/main.js | 1 +
4 files changed, 46 insertions(+), 14 deletions(-)
diff --git a/exampleSite/content/post/even-preview.md b/exampleSite/content/post/even-preview.md
index ba4494a..62d4785 100644
--- a/exampleSite/content/post/even-preview.md
+++ b/exampleSite/content/post/even-preview.md
@@ -480,6 +480,22 @@ function doIt() {
| ~~Orange~~ | Oranges | **Carrot** |
| Green | ~~***Pears***~~ | Spinach |
+Class or Enum | Year | Month | Day | Hours | Minutes | Seconds* | Zone Offset | Zone ID | toString Output | Where Discussed
+----------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |:-------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------:| ------------------------------------------------------------------------------------- |:-------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------:| -------------------------------------------------- | ---------------------------------------------------------------------------------------------------
+`Instant` | | | | | |  | | | `2013-08-20T15:16:26.355Z` | [Instant Class](https://docs.oracle.com/javase/tutorial/datetime/iso/instant.html)
+`LocalDate` |  |  |  | | | | | | `2013-08-20` | [Date Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/date.html)
+`LocalDateTime` |  |  |  |  |  |  | | | `2013-08-20T08:16:26.937` | [Date and Time Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/datetime.html)
+`ZonedDateTime` |  |  |  |  |  |  |  |  | `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` | | | |  |  |  | | | `08:16:26.943` | [Date and Time Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/datetime.html)
+`MonthDay` | |  |  | | | | | | `--08-20` | [Date Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/date.html)
+`Year` |  | | | | | | | | `2013` | [Date Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/date.html)
+`YearMonth` |  |  | | | | | | | `2013-08` | [Date Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/date.html)
+`Month` | |  | | | | | | | `AUGUST` | [DayOfWeek and Month Enums](https://docs.oracle.com/javase/tutorial/datetime/iso/enum.html)
+`OffsetDateTime` |  |  |  |  |  |  |  | | `2013-08-20T08:16:26.954-07:00` | [Time Zone and Offset Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/timezones.html)
+`OffsetTime` | | | |  |  |  |  | | `08:16:26.957-07:00` | [Time Zone and Offset Classes](https://docs.oracle.com/javase/tutorial/datetime/iso/timezones.html)
+`Duration` | | | \** | \** | \** |  | | | `PT20H` (20 hours) | [Period and Duration](https://docs.oracle.com/javase/tutorial/datetime/iso/period.html)
+`Period` |  |  |  | | | | \*** | \*** | `P10D` (10 days) | [Period and Duration](https://docs.oracle.com/javase/tutorial/datetime/iso/period.html)
+
## Smart Strong
```
diff --git a/src/css/_partial/_post/_content.scss b/src/css/_partial/_post/_content.scss
index 0e50aed..5628664 100644
--- a/src/css/_partial/_post/_content.scss
+++ b/src/css/_partial/_post/_content.scss
@@ -44,23 +44,27 @@
max-width: 100%;
}
- > table {
- max-width: 100%;
- margin: 10px 0;
- border-spacing: 0;
- box-shadow: 2px 2px 3px rgba(0,0,0,.125);
+ .table-wrapper {
+ overflow-x: auto;
- thead {
- background: $deputy-color;
- }
+ > table {
+ max-width: 100%;
+ margin: 10px 0;
+ border-spacing: 0;
+ box-shadow: 2px 2px 3px rgba(0,0,0,.125);
- th, td {
- padding: 5px 15px;
- border: 1px double $content-table-border-color;
- }
+ thead {
+ background: $deputy-color;
+ }
- tr:hover {
- background-color: $deputy-color;
+ th, td {
+ padding: 5px 15px;
+ border: 1px double $content-table-border-color;
+ }
+
+ tr:hover {
+ background-color: $deputy-color;
+ }
}
}
diff --git a/src/js/even.js b/src/js/even.js
index e8f8b33..c82eb41 100644
--- a/src/js/even.js
+++ b/src/js/even.js
@@ -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}
diff --git a/src/js/main.js b/src/js/main.js
index 1dd8566..4554e68 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -9,6 +9,7 @@ $(document).ready(function () {
Even.fancybox();
});
+Even.responsiveTable();
Even.flowchart();
Even.sequence();