diff --git a/README.md b/README.md index 932dd51..c1a02f7 100755 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ # sheetsee-tables -Sheetsee,js uses this module to make tables. With this module you can create tables with your spreadsheet data that are sortable, searchable and paginate-able. +Sheetsee.js uses this module to make tables. With this module you can create tables with your spreadsheet data that are sortable, searchable and paginate-able. You'll need a placeholder `
` in your html, a ` ``` -_[View Demo](http://jlord.us/sheetsee.js/demos/demo-table.html)_ +_[See Demos](https://github.com/jlord/sheetsee-tables/tree/master/demos)_ _[Visit Site](http://jlord.us/sheetsee.js)_ diff --git a/index.js b/index.js old mode 100755 new mode 100644 diff --git a/test/index.html b/test/demo-table-json.html similarity index 67% rename from test/index.html rename to test/demo-table-json.html index 341e9e5..da0c011 100644 --- a/test/index.html +++ b/test/demo-table-json.html @@ -2,27 +2,28 @@ - Sheetsee Table Test + Sheetsee Table JSON Demo - - + + + +
-

All Pennies

+

Animals

Clear -
+
Loading...
+ + + + + + +
+

Penny Locals

+

spreadsheet

+ + Clear +

Loading...
+
+ + + + + + diff --git a/test/qa.md b/test/qa.md deleted file mode 100644 index 87c4978..0000000 --- a/test/qa.md +++ /dev/null @@ -1,24 +0,0 @@ -# Testing - -When making edits to `index.js` you can browserify the page and test it with a table demo here. - -_Todo have browserify watch for changes to `index.js`_ - -```bash -# To browserify and launch test html in browser -npm test -# To just re-browserify and refresh in browser manually -npm run bfy -``` - -# QA - -- [ ] **Filter** Typing 'cat' should return one page with 3 results - - [ ] Sorting while filtering shouldn't reset - - [ ] Filtering shouldn't mess up pagination -- [ ] **No Matches** Typing jibberish returns empty table -- [ ] **One page of pagination** Should change pagaination dom -- [ ] **Clear** Clear button should clear filter and all data returns -- [ ] **Sort** Click the arrows in Rating and table sorts -- [ ] **Pagination** Should be able to navigate between two pages - - [ ] **Pagination** Should be able to navigate between two pages diff --git a/test/style.css b/test/style.css new file mode 100644 index 0000000..e588e16 --- /dev/null +++ b/test/style.css @@ -0,0 +1,80 @@ +.container {max-width: 800px; margin: 0 auto; overflow: auto;} + +h3 {padding-top: 18px;} +h1 {font-size: 36px;} + +table {border-spacing: 0;} +tbody tr:nth-child(odd) {background-color: #f3f3f3;} +thead {text-align: left; font-family: Source Sans Pro, Arial, sans-serif;} +td {min-width: 140px; vertical-align: top; padding: 8px;} +td a {line-height: 24px;} +tr {height: 50px;} +ul, ol {text-indent: 0; margin: 0; padding-left: 20px;} +ul li {padding-bottom: 6px; line-height: 22px;} + +footer {padding-top: 20px; margin-top: 60px; border-top: 4px solid #CCF4FF; -webkit-column-count: 6; column-count: 6; -webkit-column-gap: 20px; column-gap: 20px; -moz-column-count: 6; -moz-column-gap: 20px; height: 125px;} +footer ul {list-style: none; padding-left: 0px; font-family: Source Sans Pro, Baskerville, Georgia, serif;} +footer li {line-height: inherit; font-size: 12px;} +footer h4 {font-size: 14px; -webkit-column-break-before: always; break-before: always; -moz-column-break-before: always; } +footer h4 {margin-top: 0px;} +footer a {border: none;} + +.half {max-width: 50%; display: inline-block; vertical-align: top;} +.half:nth-child(odd) {padding-left: 20px;} + +img[alt=sheetseeimg] { + width: 400px; +} + +.index p:first-of-type { + text-align: center; +} + +/* older css */ + +body {font-family: 'Source Sans Pro'; background: #fff; color: #535353; border: 10px #47CCFC solid; margin: 0px; padding: 20px 20px 100px 20px; overflow: auto; } +h1, h2, h3, h4, h5, h6 {font-family: Source Sans Pro, Arial, sans-serif;} +h2 {margin-top: 40px;} + +img {width: 100%;} +hr {border: 2px solid #CCF4FF;} + +p {font-size: 18px;} +p a, a {color: #535353; text-decoration: none; padding-bottom: 0px; border-bottom: 2px #CCF4FF solid;} +a:hover {color: #47CCFC;} +a:active {color: #47CCFC;} +small {padding: 10px 0px;} +p, ol {line-height: 1.4;} +text {font-size: 12px;} + +body.index p:nth-of-type(2) {font-size: 30px;} +body.index table {border: 4px solid #CCF4FF; padding: 18px;} +.home-link {color: #47CCFC;} + +pre {word-wrap: break-word; padding: 10px; background: #F8F8F8;} +pre code {padding: 0;} +code {font-family: "Source Code Pro", monospace; line-height: 1; font-size: 14px; background: #F8F8F8; color: #636363; font-weight: 400; padding: 2px 6px; border-radius: 2px;} +h3 code {font-weight: bold; background: #CCF4FF; font-size: 19px;} +.hljs {background: #F8F8F8; color: #494949; line-height: 1.4em;} + +.new-news { + color: #47CCFC; + font-size: 30px; + font-weight: bold; + border: 8px solid #47CCFC; + /*border-radius: 3px;*/ + display: inline-block; + padding: 6px 16px; + margin-top: 40px; +} + +/* funsies */ +::selection {background: #44FFB4;} +::-moz-selection {background: #44FFB4;} + +/* Table */ +.ssExample table {min-width: 600px;} +.tHeader::after {content: " \2193 \2191 "; font-size: 10px; padding-left: 3px; cursor: pointer;} + +/* Map Popup Style */ +.leaflet-popup-content h2 {margin-bottom: 4px; margin-top: auto;}