From 1f6174b23253c91e5354dfa5fa7a20090c3ac4da Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Tue, 17 Apr 2018 22:55:17 +0530 Subject: [PATCH] Redesign docs page - reorganize files into assets folder - initialize base layout --- docs/assets/{ => css}/frappe-datatable.css | 0 docs/assets/{ => css}/hljs-default.css | 0 docs/assets/css/index.css | 159 +++++++++++++++++ docs/assets/img/data-table-logo.svg | 22 +++ docs/assets/img/frappe-bird-grey.svg | 46 +++++ docs/assets/index.css | 69 -------- docs/assets/{ => js}/Sortable.min.js | 0 docs/assets/{ => js}/clusterize.min.js | 0 docs/assets/{ => js}/frappe-datatable.js | 0 docs/assets/{ => js}/highlight.pack.js | 0 docs/assets/{ => js}/index.js | 48 ++--- docs/index.html | 194 +++++++++++++-------- 12 files changed, 371 insertions(+), 167 deletions(-) rename docs/assets/{ => css}/frappe-datatable.css (100%) rename docs/assets/{ => css}/hljs-default.css (100%) create mode 100644 docs/assets/css/index.css create mode 100644 docs/assets/img/data-table-logo.svg create mode 100644 docs/assets/img/frappe-bird-grey.svg delete mode 100644 docs/assets/index.css rename docs/assets/{ => js}/Sortable.min.js (100%) rename docs/assets/{ => js}/clusterize.min.js (100%) rename docs/assets/{ => js}/frappe-datatable.js (100%) rename docs/assets/{ => js}/highlight.pack.js (100%) rename docs/assets/{ => js}/index.js (96%) diff --git a/docs/assets/frappe-datatable.css b/docs/assets/css/frappe-datatable.css similarity index 100% rename from docs/assets/frappe-datatable.css rename to docs/assets/css/frappe-datatable.css diff --git a/docs/assets/hljs-default.css b/docs/assets/css/hljs-default.css similarity index 100% rename from docs/assets/hljs-default.css rename to docs/assets/css/hljs-default.css diff --git a/docs/assets/css/index.css b/docs/assets/css/index.css new file mode 100644 index 0000000..538990c --- /dev/null +++ b/docs/assets/css/index.css @@ -0,0 +1,159 @@ +@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900'); + +:root { + --border-color: #d1d8dd; + --border: 1px solid var(--border-color); + --text-color: #36414C; + --navbar-font-size: 1.25rem; + --light-bg: #f5f7fa; + --primary-color: #7575ff; + --primary-color-hover: #5b5be5; +} + +*, *::after, *::before { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +html, body { + /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */ + font-family: Lato, sans-serif; + font-size: 12px; + color: var(--text-color); +} + +body { + position: relative; +} + +code { + font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +} + +h1 { + font-size: 2.5rem; + margin: 2rem 0 4rem 0; +} + +h3 { + font-size: 1.25rem; +} + +p { + font-size: 1.25rem; + margin: 1rem 0; +} + +.navbar { + position: sticky; + top: 0; + padding: 1.5rem; + background-color: white; + z-index: 1; + border-bottom: var(--border); +} + +.navbar .container { + display: flex; + justify-content: space-between; +} + +.navbar-links a { + color: var(--text-color); + text-decoration: none; + font-weight: bold; + font-size: var(--navbar-font-size); +} + +.container { + max-width: 720px; + margin: 0 auto; +} + +.logo { + max-width: 8rem; +} + +.footer-logo { + max-width: 3rem; + max-height: 3rem; + padding: 0.5rem; + background-color: #fff; + transform: translateY(-50%); +} + +.text-center { + text-align: center; +} + +.padding-1 { + padding: 0.5rem; +} + +.showcase { + display: flex; + flex-direction: column; + align-items: flex-start; + margin: 4rem 0; +} + +.showcase.align-center { + align-items: center; +} + +.features { + display: flex; + width: 100%; + font-size: 1.25rem; + margin-top: 1rem; + line-height: 2rem; +} + +.features ul { + padding-left: 2rem; + flex: 1; +} + +[class^="example-"] { + display: flex; + justify-content: center; + width: 100%; +} + +.code { + text-align: left; + width: 100%; + margin: 1rem 0; +} + +.hljs { + padding: 2rem; + border-left: 2px solid var(--border-color); + background-color: var(--light-bg); +} + +footer { + border-top: 1px solid #d1d8dd; +} + +.download-button { + color: #fff; + background-color: var(--primary-color); + border: 0px; + border-bottom: 3px solid rgba(0, 0, 0, 0.2); + font-size: 1.5rem; + padding: 1rem 2rem; + border-radius: 3px; +} + +.download-button:hover { + cursor: pointer; + background-color: var(--primary-color-hover); +} + +/* .data-table-header { + background: #f7fafc; + color: #8d99a6; +} */ + diff --git a/docs/assets/img/data-table-logo.svg b/docs/assets/img/data-table-logo.svg new file mode 100644 index 0000000..371a147 --- /dev/null +++ b/docs/assets/img/data-table-logo.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/img/frappe-bird-grey.svg b/docs/assets/img/frappe-bird-grey.svg new file mode 100644 index 0000000..613bbde --- /dev/null +++ b/docs/assets/img/frappe-bird-grey.svg @@ -0,0 +1,46 @@ + +image/svg+xml \ No newline at end of file diff --git a/docs/assets/index.css b/docs/assets/index.css deleted file mode 100644 index 198eb94..0000000 --- a/docs/assets/index.css +++ /dev/null @@ -1,69 +0,0 @@ -*, *::after, *::before { - box-sizing: border-box; - padding: 0; - margin: 0; -} - -html, body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - font-size: 12px; -} - -code { - font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; -} - -h1 { - font-size: 3rem; - margin: 1rem 0; -} - -h2 { - font-size: 2.5rem; -} - -.padding-1 { - padding: 0.5rem; -} - -.installation .code { - width: 50%; -} - -.showcase { - display: flex; - flex-direction: column; - align-items: center; - padding: 4rem; -} - -.showcase p { - font-size: 2rem; - margin: 1rem 0; -} - -[class^="example-"] { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} - -.code { - text-align: left; - width: 100%; - margin: 1rem 0; -} - -.hljs { - border-radius: 3px; -} - -footer { - border-top: 1px solid #d1d8dd; -} - -.data-table-header { - background: #f7fafc; - color: #8d99a6; -} \ No newline at end of file diff --git a/docs/assets/Sortable.min.js b/docs/assets/js/Sortable.min.js similarity index 100% rename from docs/assets/Sortable.min.js rename to docs/assets/js/Sortable.min.js diff --git a/docs/assets/clusterize.min.js b/docs/assets/js/clusterize.min.js similarity index 100% rename from docs/assets/clusterize.min.js rename to docs/assets/js/clusterize.min.js diff --git a/docs/assets/frappe-datatable.js b/docs/assets/js/frappe-datatable.js similarity index 100% rename from docs/assets/frappe-datatable.js rename to docs/assets/js/frappe-datatable.js diff --git a/docs/assets/highlight.pack.js b/docs/assets/js/highlight.pack.js similarity index 100% rename from docs/assets/highlight.pack.js rename to docs/assets/js/highlight.pack.js diff --git a/docs/assets/index.js b/docs/assets/js/index.js similarity index 96% rename from docs/assets/index.js rename to docs/assets/js/index.js index 0703010..a3a6eb3 100644 --- a/docs/assets/index.js +++ b/docs/assets/js/index.js @@ -7,40 +7,40 @@ const { } = getSampleData(); // Hero -let datatable1 = new DataTable('.example-1 .target', { +let datatable1 = new DataTable('.example-1', { columns, data, checkboxColumn: true }); -// Formatted Cells -let datatable2 = new DataTable('.example-2', { - columns: ['Name', 'Position', 'Office', 'Extn.', 'Start Date', - { content: 'Salary', format: val => '$' + val, align: 'right' }], - data -}); +// // Formatted Cells +// let datatable2 = new DataTable('.example-2', { +// columns: ['Name', 'Position', 'Office', 'Extn.', 'Start Date', +// { content: 'Salary', format: val => '$' + val, align: 'right' }], +// data +// }); -// Inline Filters -let datatable3 = new DataTable('.example-3', { - columns, - data, - enableInlineFilters: true -}); -datatable3.showToastMessage('Click on a cell and press Ctrl/Cmd + F'); +// // Inline Filters +// let datatable3 = new DataTable('.example-3', { +// columns, +// data, +// enableInlineFilters: true +// }); +// datatable3.showToastMessage('Click on a cell and press Ctrl/Cmd + F'); -// Keyboard -let datatable4 = new DataTable('.example-4', { - columns, - data -}); -datatable4.showToastMessage('Double click to edit'); +// // Keyboard +// let datatable4 = new DataTable('.example-4', { +// columns, +// data +// }); +// datatable4.showToastMessage('Double click to edit'); -// Tree Structured Rows -let datatable5 = new DataTable('.example-5', getTreeData()); -datatable5.showToastMessage('Expand/Collapse tree nodes'); +// // Tree Structured Rows +// let datatable5 = new DataTable('.example-5', getTreeData()); +// datatable5.showToastMessage('Expand/Collapse tree nodes'); function getSampleData(multiplier) { - let columns = ['Name', 'Position', 'Office', {name: 'Extn.', width: 75}, 'Start Date', 'Salary']; + let columns = ['Name', 'Position', 'Office', {name: 'Extn.', width: 120}, 'Start Date', 'Salary']; let data = [ ['Tiger Nixon', 'System Architect', 'Edinburgh', 5421, '2011/04/25', '320,800'], ['Garrett Winters', 'Accountant', 'Tokyo', 8422, '2011/07/25', '170,750'], diff --git a/docs/index.html b/docs/index.html index 77d6316..7f75756 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5,66 +5,107 @@ Frappe DataTable - A simple, modern datatable library for the web - - - + + + -
-

Frappe DataTable

-

A simple, modern and interactive datatable for the web

-
-
+
-
-

Format Cells

-

Show custom formatted cells based on context

-
-
-
-

Inline Filters

-

Filter rows based on search text per column

-
-
-
-

Keyboard Navigation

-

Full Keyboard Navigation support

-
-
-
-

Tree Structure

-

Show tree structured rows in your table

-
-
-
-

Installation

-
-
// Install using yarn
-yarn add frappe-datatable
+    
+    

 
-// or npm
-npm install frappe-datatable
-
-
-

Usage

-
- 
    let datatable = new DataTable({
-        columns: ['Name', 'Position', ...],
-        data: [
-            ['Tiger Nixon', 'System Architect', ...],
-            ['Garrett Winters', 'Accountant', ...],
-            ...
-        ]
-    })
-
-
-
-
-
-

List of configurable options

-
- 
{
+        

+            
+            
A simple, modern and interactive
 datatable for the web

+            

+        

+
+        

+                
Installation

+                

+        
# Install using yarn
+$ yarn add frappe-datatable
+
+# or npm
+$ npm install frappe-datatable

+        

+
+        

+                
Usage

+                

+        
import DataTable from 'frappe-datatable';
+
+// or add
+// <script src="frappe-datatable.js" ></script>
+// in your html
+
+let datatable = new DataTable({
+    columns: ['Name', 'Position', ...],
+    data: [
+        ['Tiger Nixon', 'System Architect', ...],
+        ['Garrett Winters', 'Accountant', ...],
+        ...
+    ]
+});

+        

+        

+            
Cell Features

+            

+                
    
+                    
  • Custom Formatters
    • 
+                    
  • Inline Editing
    • 
+                    
  • Mouse Selection
    • 
+                

+                
    
+                    
  • Copy Cells
    • 
+                    
  • Keyboard Navigation
    • 
+                    
  • Custom Cell Editor
    • 
+                

+            

+        

+
+        

+            
Column Features

+            

+                
    
+                    
  • Reorder Columns
    • 
+                    
  • Sort by Column
    • 
+                    
  • Remove / Hide Column
    • 
+                

+                
    
+                    
  • Custom Actions
    • 
+                    
  • Resize Column
    • 
+                    
  • Flexible Layout
    • 
+                

+            

+        

+
+        

+            
Row Features

+
+            

+                
    
+                    
  • Row Selection
    • 
+                    
  • Tree Structured Rows
    • 
+                    
  • Inline Filters
    • 
+                

+                
    
+                    
  • Large Number of Rows
    • 
+                    
  • Dynamic Row Height
    • 
+                

+            

+        

+
+        

+            
List of configurable options

+            

+                
{
     columns: [],
     data: [],
     dropdownButton: '▼',
@@ -102,25 +143,30 @@ npm install frappe-datatable

     noDataMessage: 'No Data',
     cellHeight: null,
     enableInlineFilters: false
-};
-
-
-
-
- View on GitHub -
-
- MIT License -
-
-