diff options
| author | Kjetil Orbekk <kjetil.orbekk@gmail.com> | 2020-02-10 22:21:11 -0500 |
|---|---|---|
| committer | Kjetil Orbekk <kjetil.orbekk@gmail.com> | 2020-02-10 22:28:54 -0500 |
| commit | 32d3fa0eaea214c0c291ac6387cd4289b9cec69a (patch) | |
| tree | c39cca703d08dc337e90fd9f82be84210b129765 | |
| parent | 76cecb24e5b959b9f8dc225d25a2b3319fb87890 (diff) | |
Work on table presentation
| -rw-r--r-- | src/template.rs | 42 | ||||
| -rw-r--r-- | static/default.css | 53 | ||||
| -rw-r--r-- | templates/layout.hbs | 1 | ||||
| -rw-r--r-- | templates/profile.hbs | 36 |
4 files changed, 109 insertions, 23 deletions
diff --git a/src/template.rs b/src/template.rs index f3985e2..0ac67fb 100644 --- a/src/template.rs +++ b/src/template.rs @@ -247,27 +247,43 @@ mod table { use super::*; #[derive(Debug, Serialize, Deserialize, Clone)] + pub struct TableRow { + pub index: i32, + pub columns: Vec<Json>, + } + + #[derive(Debug, Serialize, Deserialize, Clone)] pub struct DisplayTable { - pub headings: Vec<String>, - pub rows: Vec<Vec<Json>>, + pub num_rows: usize, + pub num_columns: usize, + pub headings: TableRow, + pub rows: Vec<TableRow>, } pub fn apply(columns: &Vec<Column>, d: &Json) -> Result<DisplayTable, Error> { let rows = d .as_array() - .ok_or_else(|| Error::TemplateError("expected array".to_string(), d.clone()))?; + .ok_or_else(|| Error::TemplateError("expected array".to_string(), d.clone()))? + .iter() + .map(|d| { + columns + .iter() + .map(|c| function::eval(&c.field, d)) + .collect::<Result<Vec<_>, _>>() + }) + .collect::<Result<Vec<_>, _>>()?; Ok(DisplayTable { - headings: columns.iter().map(|c| c.display_name.clone()).collect(), - rows: rows - .iter() - .map(|d| { - columns - .iter() - .map(|c| function::eval(&c.field, d)) - .collect::<Result<Vec<_>, _>>() - }) - .collect::<Result<Vec<_>, _>>()?, + num_rows: rows.len(), + num_columns: columns.len(), + headings: TableRow { + index: 1, + columns: columns.iter().map(|c| json!(c.display_name)).collect(), + }, + rows: (2..).zip(rows.into_iter()).map(|(i, columns)| TableRow { + index: i, + columns: columns, + }).collect(), }) } } diff --git a/static/default.css b/static/default.css index a35597c..2377d14 100644 --- a/static/default.css +++ b/static/default.css @@ -1,29 +1,30 @@ /* Placement */ body { display: grid; - margin: 0 auto; - grid-template-columns: auto 200px minmax(800px, 1024px) auto; + margin: auto; + max-width: 1224px; + grid-template-columns: 200px minmax(600px, auto); grid-template-rows: fit-content 1fr auto; grid-gap: 0; } header { - grid-column: 3; + grid-column: 2; grid-row: 1; } nav { - grid-column: 2; + grid-column: 1; grid-row: 2 / 4; } main { - grid-column: 3; + grid-column: 2; grid-row: 2; } footer { - grid-column: 2 / 4; + grid-column: 1 / 3; grid-row: 3; } @@ -75,3 +76,43 @@ main { footer { text-align: center; } + +table { + display: grid; + width: 100%; + grid-auto-flow: row; +} + +thead, tbody, tr { + display: contents; +} + +th { + font-size: 14pt; + font-weight: normal; + text-align: left; +} + +th, td { + padding: 8px; +} + +.details { + max-height: 0; + padding: 0px 8px 0px 8px; + overflow-y: hidden; + transition: all 0.15s cubic-bezier(0, 1, 0, 1); +} + +.details-visible { + padding: 8px; + max-height: 1000px; + transition: all 0.15s ease-in-out; +} + +.details div { +} + +tr:nth-child(2n + 1) td { + background-color: #fff; +} diff --git a/templates/layout.hbs b/templates/layout.hbs index bd47622..25b558c 100644 --- a/templates/layout.hbs +++ b/templates/layout.hbs @@ -4,6 +4,7 @@ <meta charset="utf8"> <link href="/static/default.css" rel="stylesheet" type="text/css"/> <title>pj- {{ title }}</title> + {{ ~> extra_head }} </head> <body> diff --git a/templates/profile.hbs b/templates/profile.hbs index c7e75e9..a1c6ed1 100644 --- a/templates/profile.hbs +++ b/templates/profile.hbs @@ -1,20 +1,48 @@ -{{#*inline "page"~}} +{{#*inline "extra_head"}} +<style> +table { + grid-template-columns: repeat({{document.num_columns}}, auto); +} +.details { + grid-column: 1 / -1; +} +</style> +<script> +function toggleDetails(e) { + var d = e.querySelector(".details"); + var toggled = d.classList.contains("details-visible"); + if (toggled) { + d.classList.remove("details-visible"); + } else { + d.classList.add("details-visible"); + } +} +</script> +{{/inline}} +{{#*inline "page"}} {{#if user~}} <p>Profile for {{ user }}</p> {{/if~}} {{#with document ~}} <table> <thead> - {{#each headings ~}} + {{#with headings ~}} + {{#each columns ~}} <th>{{ this }}</th> {{/each ~}} + {{/with ~}} </thead> <tbody> {{#each rows ~}} - <tr> - {{#each this ~}} + <tr onclick="toggleDetails(this)"> + {{#each columns ~}} <td>{{ this }}</td> {{/each ~}} + <td class="details"> + <div> + Hello + </div> + </td> </tr> {{/each ~}} </tbody> |