Skip to content
Snippets Groups Projects
Commit 25131804 authored by Timothee P's avatar Timothee P :sunflower:
Browse files

fix table not responsive in importTasks

parent 4f163062
No related branches found
No related tags found
1 merge request!47Evol/redmine ticket 11083 full responsive design
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<tbody> <tbody>
<tr :key="importFile.created_on" v-for="importFile in data"> <tr :key="importFile.created_on" v-for="importFile in data">
<td> <td>
<h4 class="ui header"> <h4 class="ui header align-right">
<div :data-tooltip="importFile.geojson_file_name"> <div :data-tooltip="importFile.geojson_file_name">
{{ importFile.geojson_file_name | subString }} {{ importFile.geojson_file_name | subString }}
<div class="sub header"> <div class="sub header">
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<span <span
v-if="importFile.infos" v-if="importFile.infos"
:data-tooltip="importFile.infos" :data-tooltip="importFile.infos"
class="ui icon" class="ui icon margin-left"
> >
<i <i
v-if="importFile.status == 'processing'" v-if="importFile.status == 'processing'"
...@@ -130,4 +130,69 @@ export default { ...@@ -130,4 +130,69 @@ export default {
transform-origin: center; transform-origin: center;
animation: 2s; 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> </style>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment