Dotclear

Changeset 4007:d08f9c5e38db


Ignore:
Timestamp:
07/11/19 15:15:52 (6 years ago)
Author:
franck <carnet.franck.paul@…>
Branch:
default
Message:

Responsive tables (not yet applied for plugins), thanks Adrian Roselli for code (js/css)  http://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html

Files:
13 edited

Legend:

Unmodified
Added
Removed

  • admin/js/_blogs.js

    r3880 r4007  
    88  $('#form-blogs td input[type=checkbox]').enableShiftClick(); 
    99  dotclear.condSubmit('#form-blogs td input[type=checkbox]', '#form-blogs #do-action'); 
     10  dotclear.responsiveCellHeaders(document.querySelector('#form-blogs table'), '#form-blogs table', 1); 
    1011  $('#form-blogs').submit(function() { 
    1112    const action = $(this).find('select[name="action"]').val(); 

  • admin/js/_comments.js

    r3880 r4007  
    5454  dotclear.commentsActionsHelper(); 
    5555  dotclear.condSubmit('#form-comments td input[type=checkbox]', '#form-comments #do-action'); 
     56  dotclear.responsiveCellHeaders(document.querySelector('#form-comments table'), '#form-comments table', 1); 
    5657  $('form input[type=submit][name=delete_all_spam]').click(function() { 
    5758    return window.confirm(dotclear.msg.confirm_spam_delete); 

  • admin/js/_posts_list.js

    r3880 r4007  
    5555  dotclear.condSubmit('#form-entries td input[type=checkbox]', '#form-entries #do-action'); 
    5656  dotclear.postsActionsHelper(); 
     57  dotclear.responsiveCellHeaders(document.querySelector('#form-entries table'), '#form-entries table', 1); 
    5758}); 

  • admin/js/_users.js

    r3880 r4007  
    77  }); 
    88  dotclear.condSubmit('#form-users input[type="checkbox"]', '#form-users #do-action'); 
     9  dotclear.responsiveCellHeaders(document.querySelector('#form-users table'), '#form-users table', 1); 
    910  $('#form-users').submit(function() { 
    1011    const action = $(this).find('select[name="action"]').val(); 

  • admin/js/common.js

    r3930 r4007  
    460460      window.open($(this).attr('href')); 
    461461    }); 
     462  }, 
     463 
     464  /** 
     465   * Add headers on each cells (responsive tables) 
     466   * 
     467   * @param      DOM elt   table         The table 
     468   * @param      string    selector      The selector 
     469   * @param      number    [offset=0]    The offset = number of firsts columns to ignore 
     470   * @param      boolean   [thead=false] True if titles are in thead rather than in the first tr of the body 
     471   */ 
     472  responsiveCellHeaders: function(table, selector, offset = 0, thead = false) { 
     473    try { 
     474      let THarray = []; 
     475      const ths = table.getElementsByTagName("th"); 
     476      for (let i = 0; i < ths.length; i++) { 
     477        for (let colspan = ths[i].colSpan; colspan > 0; colspan--) { 
     478          THarray.push(ths[i].innerText.replace('►', '')); 
     479        } 
     480      } 
     481      let styleElm = document.createElement("style"); 
     482      let styleSheet; 
     483      document.head.appendChild(styleElm); 
     484      styleSheet = styleElm.sheet; 
     485      for (let i = offset; i < THarray.length; i++) { 
     486        styleSheet.insertRule( 
     487          selector + " td:nth-child(" + (i + 1) + ')::before {content:"' + THarray[i] + ' ";}', 
     488          styleSheet.cssRules.length 
     489        ); 
     490      } 
     491      table.className += (table.className !== '' ? ' ' : '') + 'rch' + (thead ? ' rch-thead' : ''); 
     492    } catch (e) { 
     493      console.log("responsiveCellHeaders(): " + e); 
     494    } 
    462495  }, 
    463496 

  • admin/style/default-dark.css

    r3969 r4007  
    19541954  padding-right: 34px; } 
    19551955 
    1956 th img, 
    1957 tr.line img { 
     1956th img, tr.line img { 
    19581957  vertical-align: middle; } 
    1959   th img.expand, 
    1960   tr.line img.expand { 
     1958  th img.expand, tr.line img.expand { 
    19611959    margin-right: 6px; 
    19621960    margin-bottom: -2px; } 
    … …  
    19641962tr.line p { 
    19651963  margin: 0; } 
    1966 tr.line input, 
    1967 tr.line select { 
     1964tr.line input, tr.line select { 
    19681965  vertical-align: middle; 
    19691966  box-shadow: none; } 
    … …  
    19801977    border: none; } 
    19811978 
    1982 .noborder td, 
    1983 td.noborder, 
    1984 .noborder th, 
    1985 th.noborder { 
     1979.noborder td, td.noborder, .noborder th, th.noborder { 
    19861980  border-width: 0 0 1px 0; 
    19871981  border-color: #dbdcdd; 
    … …  
    19951989  min-width: 50%; } 
    19961990 
    1997 table.settings, 
    1998 table.prefs { 
     1991table.settings, table.prefs { 
    19991992  margin-bottom: 3em; } 
    2000   table.settings th:first-child, 
    2001   table.prefs th:first-child { 
     1993  table.settings th:first-child, table.prefs th:first-child { 
    20021994    width: 20%; } 
    2003   table.settings th + th, 
    2004   table.prefs th + th { 
     1995  table.settings th + th, table.prefs th + th { 
    20051996    width: 30%; } 
    2006     table.settings th + th + th, 
    2007     table.prefs th + th + th { 
     1997    table.settings th + th + th, table.prefs th + th + th { 
    20081998      width: 10%; } 
    2009   table.settings th:last-child, 
    2010   table.prefs th:last-child { 
     1999  table.settings th:last-child, table.prefs th:last-child { 
    20112000    width: 40%; } 
    20122001 
    … …  
    20252014  padding-left: 15px; } 
    20262015 
     2016/* Responsive Cell Header */ 
     2017.rch td::before { 
     2018  display: none; } 
     2019 
     2020@media screen and (max-width: 44em), print and (max-width: 5in) { 
     2021  table.rch { 
     2022    display: block; } 
     2023    table.rch caption, table.rch tbody, table.rch tr, table.rch td { 
     2024      display: block; } 
     2025    table.rch th, table.rch tr:first-of-type { 
     2026      display: none; } 
     2027    table.rch td:first-of-type { 
     2028      border-top: 1px solid #ecedee; 
     2029      color: #c9cbcf; 
     2030      background: #595b5d; } 
     2031    table.rch td::before { 
     2032      display: inline; 
     2033      font-weight: bold; } 
     2034    table.rch td { 
     2035      display: grid; 
     2036      grid-template-columns: 10em auto; 
     2037      grid-gap: 1em 0.5em; 
     2038      text-align: left; 
     2039      border: none; } 
     2040    table.rch .maximal { 
     2041      max-width: inherit; } 
     2042    table.rch .nowrap { 
     2043      white-space: inherit; } 
     2044    table.rch td.expand { 
     2045      grid-template-columns: auto !important; 
     2046      color: #dcdee0; 
     2047      background-color: #272b30; 
     2048      border-top: 1px dashed #ecedee; } 
     2049 
     2050  table.rch-thead thead { 
     2051    display: none; } 
     2052  table.rch-thead tr:first-of-type { 
     2053    display: block; } } 
    20272054a.form-control { 
    20282055  display: none; 

  • admin/style/default.css

    r3969 r4007  
    19541954  padding-right: 34px; } 
    19551955 
    1956 th img, 
    1957 tr.line img { 
     1956th img, tr.line img { 
    19581957  vertical-align: middle; } 
    1959   th img.expand, 
    1960   tr.line img.expand { 
     1958  th img.expand, tr.line img.expand { 
    19611959    margin-right: 6px; 
    19621960    margin-bottom: -2px; } 
    … …  
    19641962tr.line p { 
    19651963  margin: 0; } 
    1966 tr.line input, 
    1967 tr.line select { 
     1964tr.line input, tr.line select { 
    19681965  vertical-align: middle; 
    19691966  box-shadow: none; } 
    … …  
    19801977    border: none; } 
    19811978 
    1982 .noborder td, 
    1983 td.noborder, 
    1984 .noborder th, 
    1985 th.noborder { 
     1979.noborder td, td.noborder, .noborder th, th.noborder { 
    19861980  border-width: 0 0 1px 0; 
    19871981  border-color: #dbdbdb; 
    … …  
    19951989  min-width: 50%; } 
    19961990 
    1997 table.settings, 
    1998 table.prefs { 
     1991table.settings, table.prefs { 
    19991992  margin-bottom: 3em; } 
    2000   table.settings th:first-child, 
    2001   table.prefs th:first-child { 
     1993  table.settings th:first-child, table.prefs th:first-child { 
    20021994    width: 20%; } 
    2003   table.settings th + th, 
    2004   table.prefs th + th { 
     1995  table.settings th + th, table.prefs th + th { 
    20051996    width: 30%; } 
    2006     table.settings th + th + th, 
    2007     table.prefs th + th + th { 
     1997    table.settings th + th + th, table.prefs th + th + th { 
    20081998      width: 10%; } 
    2009   table.settings th:last-child, 
    2010   table.prefs th:last-child { 
     1999  table.settings th:last-child, table.prefs th:last-child { 
    20112000    width: 40%; } 
    20122001 
    … …  
    20252014  padding-left: 15px; } 
    20262015 
     2016/* Responsive Cell Header */ 
     2017.rch td::before { 
     2018  display: none; } 
     2019 
     2020@media screen and (max-width: 44em), print and (max-width: 5in) { 
     2021  table.rch { 
     2022    display: block; } 
     2023    table.rch caption, table.rch tbody, table.rch tr, table.rch td { 
     2024      display: block; } 
     2025    table.rch th, table.rch tr:first-of-type { 
     2026      display: none; } 
     2027    table.rch td:first-of-type { 
     2028      border-top: 1px solid #ececec; 
     2029      color: #c9c9c9; 
     2030      background: #595959; } 
     2031    table.rch td::before { 
     2032      display: inline; 
     2033      font-weight: bold; } 
     2034    table.rch td { 
     2035      display: grid; 
     2036      grid-template-columns: 10em auto; 
     2037      grid-gap: 1em 0.5em; 
     2038      text-align: left; 
     2039      border: none; } 
     2040    table.rch .maximal { 
     2041      max-width: inherit; } 
     2042    table.rch .nowrap { 
     2043      white-space: inherit; } 
     2044    table.rch td.expand { 
     2045      grid-template-columns: auto !important; 
     2046      color: #323232; 
     2047      background-color: #fff; 
     2048      border-top: 1px dashed #ececec; } 
     2049 
     2050  table.rch-thead thead { 
     2051    display: none; } 
     2052  table.rch-thead tr:first-of-type { 
     2053    display: block; } } 
    20272054a.form-control { 
    20282055  display: none; 

  • admin/style/scss/partials/_tables.scss

    r3779 r4007  
    11table { 
    2      .maximal { 
    3           overflow: hidden; 
    4           text-overflow: ellipsis; 
    5           max-width: 1px; 
    6      } 
    7      .maximal, 
    8      &.maximal { 
    9           width: 100%; 
    10      } 
    11      .minimal { 
    12           width: 1px; 
    13      } 
    14      .nowrap { 
    15           white-space: nowrap; 
    16           vertical-align: top; 
    17      } 
    18      .count { 
    19           text-align: right; 
    20           padding-right: 1.5em; 
    21      } 
     2  .maximal { 
     3    overflow: hidden; 
     4    text-overflow: ellipsis; 
     5    max-width: 1px; 
     6  } 
     7  .maximal, &.maximal { 
     8    width: 100%; 
     9  } 
     10  .minimal { 
     11    width: 1px; 
     12  } 
     13  .nowrap { 
     14    white-space: nowrap; 
     15    vertical-align: top; 
     16  } 
     17  .count { 
     18    text-align: right; 
     19    padding-right: 1.5em; 
     20  } 
    2221} 
    23  
    2422th.first input { 
    25      padding-right: 34px; 
     23  padding-right: 34px; 
    2624} 
    27  
    28 th, 
     25th, tr.line { 
     26  img { 
     27    vertical-align: middle; 
     28    &.expand { 
     29      margin-right: 6px; 
     30      margin-bottom: -2px; 
     31    } 
     32  } 
     33} 
    2934tr.line { 
    30      img { 
    31           vertical-align: middle; 
    32           &.expand { 
    33                margin-right: 6px; 
    34                margin-bottom: -2px; 
    35           } 
    36      } 
     35  p { 
     36    margin: 0; 
     37  } 
     38  input, select { 
     39    vertical-align: middle; 
     40    box-shadow: none; 
     41  } 
     42  select { 
     43    width: 6em; 
     44  } 
     45  input[type=text] { 
     46    //    background: $line-input-background; 
     47  } 
     48  &:hover { 
     49    background: $line-background-over; 
     50  } 
     51  &:focus-within { 
     52    background-color: $line-focus-background; 
     53  } 
    3754} 
    38  
    39 tr.line { 
    40      p { 
    41           margin: 0; 
    42      } 
    43      input, 
    44      select { 
    45           vertical-align: middle; 
    46           box-shadow: none; 
    47      } 
    48      select { 
    49           width: 6em; 
    50      } 
    51      input[type=text] { 
    52 //        background: $line-input-background; 
    53      } 
    54      &:hover { 
    55           background: $line-background-over; 
    56      } 
    57      &:focus-within { 
    58     background-color: $line-focus-background; 
    59      } 
     55td.status { 
     56  vertical-align: middle; 
     57  a { 
     58    border: none; 
     59  } 
    6060} 
    61  
    62 td.status { 
    63      vertical-align: middle; 
    64      a { 
    65           border: none; 
    66      } 
     61.noborder td, td.noborder, .noborder th, th.noborder { 
     62  border-width: 0 0 1px 0; 
     63  border-color: $cell-noborder-color; 
     64  line-height: 2em; 
     65  padding-bottom: 0; 
    6766} 
    68  
    69 .noborder td, 
    70 td.noborder, 
    71 .noborder th, 
    72 th.noborder { 
    73      border-width: 0 0 1px 0; 
    74   border-color: $cell-noborder-color; 
    75      line-height: 2em; 
    76      padding-bottom: 0; 
     67.noborder p { 
     68  margin-bottom: 0; 
    7769} 
    78  
    79 .noborder p { 
    80      margin-bottom: 0; 
     70table.posts-list { 
     71  min-width: 50%; 
    8172} 
    82  
    83 table.posts-list { 
    84      min-width: 50%; 
     73table.settings, table.prefs { 
     74  margin-bottom: 3em; 
     75  th:first-child { 
     76    width: 20%; 
     77  } 
     78  th+th { 
     79    width: 30%; 
     80    +th { 
     81      width: 10%; 
     82    } 
     83  } 
     84  th:last-child { 
     85    width: 40%; 
     86  } 
    8587} 
    86  
    87 table.settings, 
    88 table.prefs { 
    89      margin-bottom: 3em; 
    90      th:first-child { 
    91           width: 20%; 
    92      } 
    93      th + th { 
    94           width: 30%; 
    95           + th { 
    96                width: 10%; 
    97           } 
    98      } 
    99      th:last-child { 
    100           width: 40%; 
    101      } 
    102 } 
    103  
    104  
    10588/* js */ 
    10689 
    10790td.expand { 
    108      padding: 1em; 
    109      td { 
    110           border-bottom: none; 
    111      } 
     91  padding: 1em; 
     92  td { 
     93    border-bottom: none; 
     94  } 
    11295} 
     96.handle { 
     97  padding: 0; 
     98} 
     99.handler { 
     100  cursor: move; 
     101  background: transparent url(drag.png) no-repeat 0 50%; 
     102  padding-left: 15px; 
     103} 
     104/* Responsive Cell Header */ 
    113105 
    114 .handle { 
    115      padding: 0; 
     106.rch td::before { 
     107  display: none; 
    116108} 
    117  
    118 .handler { 
    119      cursor: move; 
    120      background: transparent url(drag.png) no-repeat 0 50%; 
    121      padding-left: 15px; 
     109@media screen and (max-width: $s-screen), print and (max-width: 5in) { 
     110  table.rch { 
     111    display: block; 
     112    caption, tbody, tr, td { 
     113      display: block; 
     114    } 
     115    th, tr:first-of-type { 
     116      display: none; 
     117    } 
     118    td:first-of-type { 
     119      border-top: 1px solid $gray-lighter; 
     120      color: $gray-light; 
     121      background: $gray-darker; 
     122    } 
     123    td::before { 
     124      display: inline; 
     125      font-weight: bold; 
     126    } 
     127    td { 
     128      display: grid; 
     129      grid-template-columns: 10em auto; 
     130      grid-gap: 1em 0.5em; 
     131      text-align: left; 
     132      border: none; 
     133    } 
     134    .maximal { 
     135      max-width: inherit; 
     136    } 
     137    .nowrap { 
     138      white-space: inherit; 
     139    } 
     140    td.expand { 
     141      grid-template-columns: auto !important; 
     142      color: $body-color; 
     143      background-color: $body-background; 
     144      border-top: 1px dashed $gray-lighter; 
     145    } 
     146  } 
     147  table.rch-thead { 
     148    thead { 
     149      display: none; 
     150    } 
     151    tr:first-of-type { 
     152      display: block; 
     153    } 
     154  } 
    122155} 

  • plugins/aboutConfig/js/index.js

    r3709 r4007  
    1 /*global $ */ 
     1/*global $, dotclear */ 
    22'use strict'; 
    33 
    … …  
    1111    window.location = $('#ls_nav option:selected').val(); 
    1212  }); 
     13  dotclear.responsiveCellHeaders(document.querySelector('table.settings'), 'table.settings', 0, true); 
     14  $('table.settings').addClass('rch rch-thead'); 
    1315}); 

  • plugins/antispam/js/antispam.js

    r3987 r4007  
    3131    return window.confirm(dotclear.msg.confirm_spam_delete); 
    3232  }); 
     33  dotclear.responsiveCellHeaders(document.querySelector('#filters-list-form table'), '#filters-list-form table', 1, true); 
    3334}); 

  • plugins/pages/js/list.js

    r3995 r4007  
    5656  $('#pageslist td input[type=checkbox]').enableShiftClick(); 
    5757  dotclear.condSubmit('#pageslist td input[type=checkbox]', '#form-entries #do-action'); 
     58  dotclear.responsiveCellHeaders(document.querySelector('#form-entries table'), '#form-entries table', 3, true); 
    5859 
    5960  $('#pageslist tr.line td:not(.expander)').mousedown(function() { 

  • plugins/simpleMenu/js/simplemenu.js

    r3880 r4007  
    2626  $('#menuitemslist tr td.handle').addClass('handler'); 
    2727  dotclear.condSubmit('#menuitems tr td input[name^=items_selected]', '#menuitems #remove-action'); 
     28  dotclear.responsiveCellHeaders(document.querySelector('#menuitems table'), '#menuitems table', 2); 
    2829}); 

  • plugins/userPref/js/index.js

    r3709 r4007  
    1 /*global $ */ 
     1/*global $, dotclear */ 
    22'use strict'; 
    33 
    … …  
    1313    window.location = $('#lp_nav option:selected').val(); 
    1414  }); 
     15  dotclear.responsiveCellHeaders(document.querySelector('table.prefs'), 'table.prefs', 0, true); 
     16  $('table.prefs').addClass('rch rch-thead'); 
    1517}); 
Note: See TracChangeset for help on using the changeset viewer.

Sites map