From 2084f14fd2c8ea2a3cbfa20d17a97bdb422c6f6b Mon Sep 17 00:00:00 2001 From: razvanaldea89 Date: Mon, 18 Feb 2019 20:17:22 +0200 Subject: [PATCH] responsive tables experiment ~ need a second opinion --- build/css/custom.css | 62 ++++ production/projects.html | 755 ++++++++++++++++++++++----------------- 2 files changed, 499 insertions(+), 318 deletions(-) diff --git a/build/css/custom.css b/build/css/custom.css index 593bc613..00b77323 100644 --- a/build/css/custom.css +++ b/build/css/custom.css @@ -4867,4 +4867,66 @@ ul.notifications { div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate { text-align: left; } +} + +/* Experiment for responsive tables - from https://codepen.io/AllThingsSmitty/pen/MyqmdM */ +@media screen and (max-width: 600px) { + table.responsive-experimental { + border: 0; + } + + table.responsive-experimental caption { + font-size: 1.3em; + } + + table.responsive-experimental thead { + border: none; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + + table.responsive-experimental tr { + border-bottom: 3px solid #ddd; + display: block; + margin-bottom: .625em; + } + + table.responsive-experimental td { + border-bottom: 1px solid #ddd; + display: block; + font-size: .8em; + text-align: right; + clear:both; + } + + table.responsive-experimental td::before { + /* + * aria-label has no advantage, it won't be read inside a table + content: attr(aria-label); + */ + content: attr(data-label); + float: left; + font-weight: bold; + font-size:13px; + width: 30%; + text-align: left; + } + + table.responsive-experimental td:last-child { + border-bottom: 0; + } + + table.responsive-experimental ul { + float:right; + } + + table.responsive-experimental .td-wrapper { + width:70%; + float:right; + } } \ No newline at end of file diff --git a/production/projects.html b/production/projects.html index 0a5db220..28585920 100755 --- a/production/projects.html +++ b/production/projects.html @@ -290,15 +290,15 @@
-
-
- - +
+
+ + +
-
@@ -332,7 +332,7 @@

Simple table with project listing with progress and editing options

- +
@@ -345,369 +345,488 @@ - - - - + - - + + - - - - + - - + + - - - - + - - + + - - - - + - - + + - - - - + - - + + - - - - + - - + + - - - - + - - + + - - - - + - - + + - - - - + - - + +
#
# - Pesamakini Backend UI -
- Created 01.01.2015 - 		-
    -
  • - Avatar -
    • -
  • - Avatar -
    • -
  • - Avatar -
    • -
  • - Avatar -
    • -
- 		-
-
+
# +
+ Pesamakini Backend UI +
+ Created 01.01.2015
- 57% Complete 		- + +
+
    +
  • + Avatar +
    • +
  • + Avatar +
    • +
  • + Avatar +
    • +
  • + Avatar +
    • +
+
- View - Edit - Delete + +
+
+
+
+ 57% Complete +
+ 		+
+ +
+ 		+
+ View + Edit + Delete +
# - Pesamakini Backend UI -
- Created 01.01.2015 - 		-
    -
  • - Avatar -
    • -
  • - Avatar -
    • -
- 		-
-
+
# +
+ Pesamakini Backend UI +
+ Created 01.01.2015
- 47% Complete 		- + +
+
    +
  • + Avatar +
    • +
  • + Avatar +
    • +
+
- View - Edit - Delete + +
+
+
+
+ 47% Complete +
+ 		+
+ +
+ 		+
+ View + Edit + Delete +
# - Pesamakini Backend UI -
- Created 01.01.2015 - 		-
    -
  • - Avatar -
    • -
  • - Avatar -
    • -
  • - Avatar -
    • -
- 		-
-
+
# +
+ Pesamakini Backend UI +
+ Created 01.01.2015
- 77% Complete 		- + +
+
    +
  • + Avatar +
    • +
  • + Avatar +
    • +
  • + Avatar +
    • +
+
- View - Edit - Delete + +
+
+
+
+ 77% Complete +
+ 		+
+ +
+ 		+
+ View + Edit + Delete +
# - Pesamakini Backend UI -
- Created 01.01.2015 - 		-
    -
  • - Avatar -
    • -
  • - Avatar -
    • -
  • - Avatar -
    • -
  • - Avatar -
    • -
- 		-
-
+
# +
+ Pesamakini Backend UI +
+ Created 01.01.2015
- 60% Complete 		- + +
+
    +
  • + Avatar +
    • +
  • + Avatar +
    • +
  • + Avatar +
    • +
  • + Avatar +
    • +
+
- View - Edit - Delete + +
+
+
+
+ 60% Complete +
+ 		+
+ +
+ 		+
+ View + Edit + Delete +
# - Pesamakini Backend UI -
- Created 01.01.2015 - 		-
    -
  • - Avatar -
    • -
  • - Avatar -
    • -
  • - Avatar -
    • -
- 		-
-
+
# +
+ Pesamakini Backend UI +
+ Created 01.01.2015
- 12% Complete 		- + +
+
    +
  • + Avatar +
    • +
  • + Avatar +
    • +
  • + Avatar +
    • +
+
- View - Edit - Delete + +
+
+
+
+ 12% Complete +
+ 		+
+ +
+ 		+
+ View + Edit + Delete +
# - Pesamakini Backend UI -
- Created 01.01.2015 - 		-
    -
  • - Avatar -
    • -
  • - Avatar -
    • -
  • - Avatar -
    • -
  • - Avatar -
    • -
- 		-
-
+
# +
+ Pesamakini Backend UI +
+ Created 01.01.2015
- 35% Complete 		- + +
+
    +
  • + Avatar +
    • +
  • + Avatar +
    • +
  • + Avatar +
    • +
  • + Avatar +
    • +
+
- View - Edit - Delete + +
+
+
+
+ 35% Complete +
+ 		+
+ +
+ 		+
+ View + Edit + Delete +
# - Pesamakini Backend UI -
- Created 01.01.2015 - 		-
    -
  • - Avatar -
    • -
  • - Avatar -
    • -
- 		-
-
+
# +
+ Pesamakini Backend UI +
+ Created 01.01.2015
- 87% Complete 		- + +
+
    +
  • + Avatar +
    • +
  • + Avatar +
    • +
+
- View - Edit - Delete + +
+
+
+
+ 87% Complete +
+ 		+
+ +
+ 		+
+ View + Edit + Delete +
# - Pesamakini Backend UI -
- Created 01.01.2015 - 		-
    -
  • - Avatar -
    • -
  • - Avatar -
    • -
  • - Avatar -
    • -
- 		-
-
+
# +
+ Pesamakini Backend UI +
+ Created 01.01.2015
- 77% Complete 		- + +
+
    +
  • + Avatar +
    • +
  • + Avatar +
    • +
  • + Avatar +
    • +
+
- View - Edit - Delete + +
+
+
+
+ 77% Complete +
+ 		+
+ +
+ 		+
+ View + Edit + Delete +
# - Pesamakini Backend UI -
- Created 01.01.2015 - 		-
    -
  • - Avatar -
    • -
  • - Avatar -
    • -
  • - Avatar -
    • -
  • - Avatar -
    • -
- 		-
-
+
# +
+ Pesamakini Backend UI +
+ Created 01.01.2015
- 77% Complete 		- + +
+
    +
  • + Avatar +
    • +
  • + Avatar +
    • +
  • + Avatar +
    • +
  • + Avatar +
    • +
+
- View - Edit - Delete + +
+
+
+
+ 77% Complete +
+ 		+
+ +
+ 		+
+ View + Edit + Delete +