Dotclear


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

File:
1 edited

Legend:

Unmodified
Added
Removed

  • 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} 
Note: See TracChangeset for help on using the changeset viewer.

Sites map