diff --git a/src/components/ImportTask.vue b/src/components/ImportTask.vue index d7e008942c59ba2405acd96ee2611f5d5f0e4b58..8e085eddf482e6623cc70d4f1d53f4a3cf65c36f 100644 --- a/src/components/ImportTask.vue +++ b/src/components/ImportTask.vue @@ -10,7 +10,7 @@ <tbody> <tr :key="importFile.created_on" v-for="importFile in data"> <td> - <h4 class="ui header"> + <h4 class="ui header align-right"> <div :data-tooltip="importFile.geojson_file_name"> {{ importFile.geojson_file_name | subString }} <div class="sub header"> @@ -24,7 +24,7 @@ <span v-if="importFile.infos" :data-tooltip="importFile.infos" - class="ui icon" + class="ui icon margin-left" > <i v-if="importFile.status == 'processing'" @@ -130,4 +130,69 @@ export default { transform-origin: center; animation: 2s; } + +/* +Max width before this PARTICULAR table gets nasty +This query will take effect for any screen smaller than 760px +and also iPads specifically. +*/ +@media only screen and (max-width: 760px), + (min-device-width: 768px) and (max-device-width: 1024px) { + /* Force table to not be like tables anymore */ + table, + thead, + tbody, + th, + td, + tr { + display: block; + } + + /* Hide table headers (but not display: none;, for accessibility) */ + thead tr { + position: absolute; + top: -9999px; + left: -9999px; + } + + tr { + border: 1px solid #ccc; + } + + td { + /* Behave like a "row" */ + border: none; + border-bottom: 1px solid #eee; + position: relative; + padding-left: 50%; + } + + td:before { + /* Now like a table header */ + position: absolute; + /* Top/left values mimic padding */ + /* top: 6px; */ + left: 6px; + width: 25%; + padding-right: 10px; + white-space: "break-spaces"; + } + + /* + Label the data + */ + td:nth-of-type(1):before { + content: "Fichiers importés"; + } + td:nth-of-type(2):before { + content: "Statut"; + } + + .align-right { + text-align: right; + } + .margin-left { + margin-left: 94%; + } +} </style> \ No newline at end of file