In case anyone else needs to know - To convert the table columns to rows for the download section of an order form at a given screen width, I changed the stock code of \includes\templates\my_template\templates\tpl_modules_download.php
change lines 57 - 67 (changes in red) to
Code:
<th class="downloadProductNameLink" data-th="<?php echo TABLE_HEADING_PRODUCT_NAME; ?>"><?php echo '<a href="' . $file['link_url'] . '" download="' . $file['filename'] . '">' . $file['products_name'] . '</a>'; ?></th>
<?php } else { ?>
<th class="downloadProductName" data-th="<?php echo TABLE_HEADING_PRODUCT_NAME; ?>"><?php echo $file['products_name']; ?></th>
<?php
}
?>
<td class="downloadFilesize" data-th="<?php echo TABLE_HEADING_BYTE_SIZE; ?>"><?php echo $file['filesize'] . $file['filesize_units']; ?></td>
<td class="downloadFilename" data-th="<?php echo TABLE_HEADING_DOWNLOAD_FILENAME; ?>"><?php echo $file['filename']; ?></td>
<td class="downloadExpiry" data-th="<?php echo TABLE_HEADING_DOWNLOAD_DATE; ?>"><?php echo ($file['unlimited_downloads'] ? TEXT_DOWNLOADS_UNLIMITED : zen_date_short($file['expiry'])); ?></td>
<td class="downloadCounts centeredContent" data-th="<?php echo TABLE_HEADING_DOWNLOAD_COUNT; ?>"><?php echo ($file['unlimited_downloads'] ? TEXT_DOWNLOADS_UNLIMITED_COUNT : $file['download_count']); ?></td>
<td class="downloadButton centeredContent"><?php echo ($file['is_downloadable']) ? '<a href="' . $file['link_url'] . '" download="' . $file['filename'] . '">' . zen_image_button(BUTTON_IMAGE_DOWNLOAD, BUTTON_DOWNLOAD_ALT) . '</a>' : ' '; ?></td>
and use this css
Code:
@media (max-width:853px) {
table#downloads tr.tableHeading th:not(:first-child) {display: none;}
table#downloads tr.tableRow th, table#downloads tr.tableHeading th, table#downloads tr.tableRow td{display: block;clear: both;border-bottom:none;}
table#downloads tr.tableRow td[data-th]:before {content: attr(data-th);float: left;}
table#downloads tr.tableRow td {text-align:right;}
table#downloads tr:nth-child(odd) {background: #F5F5F5;}
}
th.downloadProductNameLink {padding: 0.75em 0.75em;
font-size:16px;font-weight:normal;}
It may need tweaking depending on the template you are using.
Bookmarks