Download Order Info Mobile View

[simon1066]

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.

[mc12345678]

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:

<!-- 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">&nbsp;</td>
    </tr>

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,

[mc12345678]

Sorry, after looking over the above post, I realized I didn't include enough of the "table" to discern everything:

<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">&nbsp;</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">&nbsp;</td>
    </tr>
  </table>

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.

[davewest]

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.

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 COWAA

<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>' : '&nbsp;'; ?></div>
<br /><br />
</div></div>

<?php
       } // end foreach
?>
  </div>

[simon1066]

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:

<!-- 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>

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,

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.

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 COWAA

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.

[simon1066]

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

 <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>' : '&nbsp;'; ?></td>

and use this css

@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.

[simon1066]

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;}