Printable View
Given there are 5 columns in the download section of tpl_modules_download.php, it is impossible (in its current state) to fit the table within the portrait view on a mobile device (most) - also for some devices in landscape.
I wondered if others have found a way round this. Two thoughts so far are:
Sizing the text using css 'vw' - this looks bad.
Converting the table layout to divs and rearranging the 'columns' at different widths - I haven't attempted this yet.
Here's what mine looks like on a mobile, not sure at the moment if had made adjustments already, but there had been something related and guidance on correcting such a product display the first time in getting to display correctly.
OK, couldn't paste the image because of account limits, but I was able to retrieve this page source html:
So, enjoy that one. Looks like a table, there is a heading that goes across to "show" one item per column, but then they stack up together,HTML Code:<!-- list of products -->
<tr class="tableRow">
<!-- left box -->
<td class="downloadProductName">Single Download</td>
<td class="downloadFilesize">133 bytes</td>
<td class="downloadFilename">pdf_sample.zip</td>
<td class="downloadExpiry">02/06/2019</td>
<td class="downloadCounts centeredContent">5</td>
<td class="downloadButton centeredContent"> </td>
</tr>
Sorry, after looking over the above post, I realized I didn't include enough of the "table" to discern everything:
Would think that perhaps if there were multiple downloads to the order that there might be some confusion, but would have to see. With a single download it seems to make sense when displayed.HTML Code:<table id="downloads">
<tr class="tableHeading">
<th scope="col" id="dlFileNameHeading">Item Name</th>
<th scope="col" id="dlByteSize">File Size</th>
<th scope="col" id="dlFilenameHeading">Filename</th>
<th scope="col" id="dlDateHeading">Link Expires</th>
<th scope="col" id="dlCountHeading">Remaining</th>
<th scope="col" id="dlButtonHeading"> </th>
</tr>
<!-- list of products -->
<tr class="tableRow">
<!-- left box -->
<td class="downloadProductName">Single Download</td>
<td class="downloadFilesize">133 bytes</td>
<td class="downloadFilename">pdf_sample.zip</td>
<td class="downloadExpiry">02/06/2019</td>
<td class="downloadCounts centeredContent">5</td>
<td class="downloadButton centeredContent"> </td>
</tr>
</table>
Started working on a doc page, but I use div's in a manner that allows for a responsive design for Order Status and my shopping cart. Based on screen size they well stack and un-stack... The template files are part of COWAAQuote:
Originally Posted by simon1066
Code:<div class="ui-grid-b ui-responsive">
<!-- list of products -->
<?php
foreach($downloads as $file) {
?>
<!-- left box -->
<!-- dd -->
<div class="ui-block-dd"><div class="ui-body ui-body-d">
<br class="clearBoth" />
<div class="centeredContent"><?php echo $file['filename']; ?> <?php echo $file['filesize'] . $file['filesize_units']; ?></div>
</div></div>
<!-- ee -->
<div class="ui-block-ee"><div class="ui-body ui-body-d">
<br class="clearBoth" />
<div class="centeredContent"><?php echo ($file['unlimited_downloads'] ? TEXT_DOWNLOADS_UNLIMITED : zen_date_short($file['expiry'])); ?></div>
</div></div>
<!-- ff -->
<div class="ui-block-ff"><div class="ui-body ui-body-d">
<br class="clearBoth" />
<div class="centeredContent"><?php echo ($file['download_maxdays'] == 0 ? TEXT_DOWNLOADS_UNLIMITED_COUNT : $file['download_count'] . ' Remaining Downloads'); ?></div>
</div></div>
<!-- gg -->
<div class="ui-block-gg"><div class="ui-body ui-body-d">
<br class="clearBoth" />
<div class="centeredContent"><?php echo ($file['is_downloadable']) ? '<a href="' . $file['link_url'] . '" download="' . $file['filename'] . '">' . zen_image_button(BUTTON_IMAGE_DOWNLOAD, BUTTON_DOWNLOAD_ALT) . '</a>' : ' '; ?></div>
<br /><br />
</div></div>
<?php
} // end foreach
?>
</div>
Thank you for that @mc12345678. This code is what I have at the moment, stock ZC v1.56c. If by stacking up together you mean the columns become rows then maybe you have some clever css to achieve that. If it's simply that the columns compress as the width reduces, then that's what is happening at the moment - but they can only compress so far.Quote:
Originally Posted by mc12345678
Thanks @davewest, I think that responsive divs might be the way I go - quite a job to convert especially as I think my order tables and cart could also do with some responsive TLC.Quote:
Originally Posted by davewest
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
and use this cssCode:<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>
It may need tweaking depending on the template you are using.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;}
Edit: I found that
th.downloadProductNameLink {padding: 0.75em 0.75em;
font-size:16px;font-weight:normal;}
should be
th.downloadProductNameLink {padding: 0.75em 0.75em;
font-size:inherit;font-weight:normal;}