Results 1 to 7 of 7
  1. #1
    Join Date
    Feb 2009
    Location
    UK
    Posts
    797
    Plugin Contributions
    0

    Default Download Order Info Mobile 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.
    Last edited by simon1066; 14 Apr 2020 at 06:43 PM. Reason: spelling
    Simon

  2. #2
    Join Date
    Jul 2012
    Posts
    15,321
    Plugin Contributions
    17

    Default Re: Download Order Info Mobile View

    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:
    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">&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,
    ZC Installation/Maintenance Support <- Site
    Contribution for contributions welcome...
    Upgraded to Zen Cart V1.5.3 from V1.5.1 from V1.5.0 from V1.3.9h

  3. #3
    Join Date
    Jul 2012
    Posts
    15,321
    Plugin Contributions
    17

    Default Re: Download Order Info Mobile View

    Sorry, after looking over the above post, I realized I didn't include enough of the "table" to discern everything:
    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">&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.
    ZC Installation/Maintenance Support <- Site
    Contribution for contributions welcome...
    Upgraded to Zen Cart V1.5.3 from V1.5.1 from V1.5.0 from V1.3.9h

  4. #4
    Join Date
    Dec 2007
    Location
    Payson, AZ
    Posts
    1,001
    Plugin Contributions
    12

    Default Re: Download Order Info Mobile View

    Quote Originally Posted by simon1066 View Post
    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

    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>' : '&nbsp;'; ?></div>
    <br /><br />
    </div></div>
    
    <?php
           } // end foreach
    ?>
      </div>
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	Screenshot_downloads2.jpg 
Views:	11 
Size:	65.6 KB 
ID:	18948   Click image for larger version. 

Name:	downloads1.jpg 
Views:	10 
Size:	21.2 KB 
ID:	18949  
    Dave
    Always forward thinking... MySite..

  5. #5
    Join Date
    Feb 2009
    Location
    UK
    Posts
    797
    Plugin Contributions
    0

    Default Re: Download Order Info Mobile View

    Quote Originally Posted by mc12345678 View Post
    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:
    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>
    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.

    Quote Originally Posted by davewest View Post
    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.
    Simon

  6. #6
    Join Date
    Feb 2009
    Location
    UK
    Posts
    797
    Plugin Contributions
    0

    Default Re: Download Order Info Mobile View

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

  7. #7
    Join Date
    Feb 2009
    Location
    UK
    Posts
    797
    Plugin Contributions
    0

    Default Re: Download Order Info Mobile View

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

 

 

Similar Threads

  1. v156 Adding one category ID to mobile menu view
    By haredo in forum General Questions
    Replies: 0
    Last Post: 7 Apr 2020, 01:43 AM
  2. Replies: 10
    Last Post: 6 Apr 2020, 03:43 PM
  3. v156 link menu in mobile view
    By ColtSAA in forum General Questions
    Replies: 1
    Last Post: 26 Jul 2019, 04:31 PM
  4. Changing title in mobile view
    By amomandherblog in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 25 May 2017, 05:21 AM
  5. Replies: 2
    Last Post: 5 Jul 2013, 10:58 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR