Responsive Bug ?![Solved - use new v3.2 layouts]

[sakis]

Hallo,

wenn ich die download details auf dem Smartphone betrachte sieht das ganze nicht so huebsch aus.

hier ein paar Screenshot

EDIT Solved Version v43 and higher has fully responsive layouts denoted wih V3.2 in  layout name  (and in German by Google) Version v43 und höher hat voll ansprechende Layouts bezeichnet mit V3.2 in Layoutnamen  ColinM



Desktop version



Mobil

[sakis]

Kann mir da keiner helfen ? 

[ColinM]

Hi
Sorry I seem to have missed this one - had a bit of holiday!!!

Which type of phone are you using.  I have an Android based one.

Also which browser were you using?

Are the screen shots you are showing from the Downloads details layout?  Which one is it please?  I will test to see what is going wrong.  Maybe that particular layout needs modifying.

Was it OK in Landscape view?

Colin

[sakis]

Hallo,

sorry für die späte Antwort.

Ich hoffe Sie hatten einen schönen Urlaub

Ich habe ein Andoid Gerät  und da ist das selbe problem. Die Screenshots stammen aus Firefox (Browser verkleinert) doch das ergebniss ist gleich sowohl am Browser aber auch am Smartphone. Das Screenshot stammt aus dem Download Details "Layout mit TABS v2.5".


Das Problem besteht sowohl in den Landscape View aber auch in den normal View.

Hier der Code von meinem "Layout mit TABS v2.5"

Code Select Expand

<table width="100%" border="0" cellpadding="0" cellspacing="5">
  <tr>
    <td height="38" colspan="3" valign="middle"><h2>{file_pic} {file_title} {release} {pic_is_new}{pic_is_hot}{pic_is_updated}</h2></td>
  </tr>
</table>
{tags}
{tabs begin}

{tab description}
<table width="100%" border="0" cellpadding="0" cellspacing="5">
    <tr>
    <td style="text-align: justify;vertical-align:top;">{description_long}</td>
</tr></table>
{tab description end}

{tab pics}
<table width="100%" border="0" cellpadding="0" cellspacing="5">
<tr>
<td style="text-align: justify;vertical-align:top;">

<div style="padding:5px 5px 10px 5px;overflow: hidden;margin-bottom: 10px;margin-top: 8px;">

  <div style="float: left;"><div style="display: block;text-align: center !important;vertical-align: middle !important;">{screenshot_begin}<a href="{screenshot}" rel="lightbox"><img style="padding:4px; margin-right: 5px;" class="animate fadeInRight" src="{thumbnail}" align="right" /></a>{screenshot_end}
  </div>
  </div>
 
  <div style="float: left;"><div style="display: block;text-align: center !important;vertical-align: middle !important;">{screenshot_begin2}<a href="{screenshot2}" rel="lightbox"><img style="padding:4px; margin-right: 5px;" class="animate fadeInRight" src="{thumbnail2}" align="right" /></a>{screenshot_end2}
  </div>
  </div>
 
  <div style="float: left;"><div style="display: block;text-align: center !important;vertical-align: middle !important;">{screenshot_begin3}<a href="{screenshot3}" rel="lightbox"><img style="padding:4px; margin-right: 5px;" class="animate fadeInRight" src="{thumbnail3}" align="right" /></a>{screenshot_end3}
  </div>
  </div>
 
  <div style="float: left;"><div style="display: block;text-align: center !important;vertical-align: middle !important;">{screenshot_begin4}<a href="{screenshot4}" rel="lightbox"><img style="padding:4px; margin-right: 5px;" class="animate fadeInRight" src="{thumbnail4}" align="right" /></a>{screenshot_end4}
  </div>
  </div>
 
  <div style="float: left;"><div style="display: block;text-align: center !important;vertical-align: middle !important;">{screenshot_begin5}<a href="{screenshot5}" rel="lightbox"><img style="padding:4px; margin-right: 5px;" src="{thumbnail5}" align="right" /></a>{screenshot_end5}
  </div>
</div>

</div>

</td>
</tr>
</table>
{tab pics end}

{tab mp3}
<table width="100%" border="0" cellpadding="0" cellspacing="5">
    <tr>
       <td style="text-align: justify;vertical-align:top;">{mp3_player}</td>
    </tr>
    <tr>
       <td style="text-align: justify;vertical-align:top;">{mp3_id3_tag}</td>
    </tr>
</table>
{tab mp3 end}

{tab data}
<div style="margin-left: 5px;margin-bottom: 15px;clear: both;padding: 8px;background-color: #f4f4f4;border: 1px solid #dfdfdf;margin-top: 3px;border-radius: 5px;"> 
    <table width="100%" border="0" cellpadding="0" cellspacing="0" style="padding:5px 10px 5px 10px;">
   
    <tr>
        <td style="margin: 0px;padding: 0px 0px 5px;width: 100px;vertical-align: top;color: #464646;">
    <span style="border-bottom: 1px dotted #b7b7b7;padding: 5px 0px;width: 100px;position: absolute;display: block;z-index: 0;"></span>
    <span style="font-weight: bold;padding-right: 3px;background-color: #f4f4f4;position: relative;">{release_title}&#160;</span></td>
    <td style="padding: 0px 0px 0px 6px;width: 200px;vertical-align: top;">{release}&#160;</td>
   
        <td style="margin: 0px;padding: 0px 0px 5px;width: 100px;vertical-align: top;color: #464646;">
    <span style="border-bottom: 1px dotted #b7b7b7;padding: 5px 0px;width: 100px;position: absolute;display: block;z-index: 0;"></span>
    <span style="font-weight: bold;padding-right: 3px;background-color: #f4f4f4;position: relative;">{hits_title}&#160;</span></td>
    <td style="padding: 0px 0px 0px 6px;width: 200px;vertical-align: top;">{hits_value}&#160;</td>
    </tr>

    <tr>
        <td style="margin: 0px;padding: 0px 0px 5px;width: 100px;vertical-align: top;color: #464646;">
    <span style="border-bottom: 1px dotted #b7b7b7;padding: 5px 0px;width: 100px;position: absolute;display: block;z-index: 0;"></span>
    <span style="font-weight: bold;padding-right: 3px;background-color: #f4f4f4;position: relative;">{filesize_title}&#160;</span></td>
    <td style="padding: 0px 0px 0px 6px;width: 200px;vertical-align: top;">{filesize_value}&#160;</td>
   
        <td style="margin: 0px;padding: 0px 0px 5px;width: 100px;vertical-align: top;color: #464646;">
    <span style="border-bottom: 1px dotted #b7b7b7;padding: 5px 0px;width: 100px;position: absolute;display: block;z-index: 0;"></span>
    <span style="font-weight: bold;padding-right: 3px;background-color: #f4f4f4;position: relative;">{created_date_title}&#160;</span></td>
    <td style="padding: 0px 0px 0px 6px;width: 200px;vertical-align: top;">{created_date_value}&#160;</td>
    </tr>
   
<tr>
        <td style="margin: 0px;padding: 0px 0px 5px;width: 100px;vertical-align: top;color: #464646;">
    <span style="border-bottom: 1px dotted #b7b7b7;padding: 5px 0px;width: 100px;position: absolute;display: block;z-index: 0;"></span>
    <span style="font-weight: bold;padding-right: 3px;background-color: #f4f4f4;position: relative;">{modified_date_title}&#160;</span></td>
    <td style="padding: 0px 0px 0px 6px;width: 200px;vertical-align: top;">{modified_date_value}&#160;</td>
   
        <td style="margin: 0px;padding: 0px 0px 5px;width: 100px;vertical-align: top;color: #464646;">
    <span style="border-bottom: 1px dotted #b7b7b7;padding: 5px 0px;width: 100px;position: absolute;display: block;z-index: 0;"></span>
    <span style="font-weight: bold;padding-right: 3px;background-color: #f4f4f4;position: relative;">{custom_title_1}&#160;</span></td>
    <td style="padding: 0px 0px 0px 6px;width: 200px;vertical-align: top;">{custom_value_1}&#160;</td>
    </tr>

<tr>
        <td style="margin: 0px;padding: 0px 0px 5px;width: 100px;vertical-align: top;color: #464646;">
    <span style="border-bottom: 1px dotted #b7b7b7;padding: 5px 0px;width: 100px;position: absolute;display: block;z-index: 0;"></span>
    <span style="font-weight: bold;padding-right: 3px;background-color: #f4f4f4;position: relative;">{created_by_title}&#160;</span></td>
        <td style="padding: 0px 0px 0px 6px;width: 200px;vertical-align: top;">{created_by_value}&#160;</td>

        <td style="margin: 0px;padding: 0px 0px 5px;width: 100px;vertical-align: top;color: #464646;">
    <span style="border-bottom: 1px dotted #b7b7b7;padding: 5px 0px;width: 100px;position: absolute;display: block;z-index: 0;"></span>
    <span style="font-weight: bold;padding-right: 3px;background-color: #f4f4f4;position: relative;">{license_title}&#160;</span></td>
        <td style="padding: 0px 0px 0px 6px;width: 200px;vertical-align: top;">{license_text}&#160;</td>
</tr>

    <tr>
       <td style="margin: 0px;padding: 0px 0px 5px;width: 100px;vertical-align: top;color: #464646;">
    <span style="border-bottom: 1px dotted #b7b7b7;padding: 5px 0px;width: 100px;position: absolute;display: block;z-index: 0;"></span>
    <span style="font-weight: bold;padding-right: 3px;background-color: #f4f4f4;position: relative;">{author_title}&#160;</span></td>
    <td style="padding: 0px 0px 0px 6px;width: 200px;vertical-align: top;">{author_text}&#160;</td>

    <td style="margin: 0px;padding: 0px 0px 5px;width: 100px;vertical-align: top;color: #464646;">
    <span style="border-bottom: 1px dotted #b7b7b7;padding: 5px 0px;width: 100px;position: absolute;display: block;z-index: 0;"></span>
    <span style="font-weight: bold;padding-right: 3px;background-color: #f4f4f4;position: relative;">{author_url_title}&#160;</span></td>
    <td style="padding: 0px 0px 0px 6px;width: 200px;vertical-align: top;">{author_url_text}&#160;</td>
    </tr>

    <tr>
        <td style="margin: 0px;padding: 0px 0px 5px;width: 100px;vertical-align: top;color: #464646;">
    <span style="border-bottom: 1px dotted #b7b7b7;padding: 5px 0px;width: 100px;position: absolute;display: block;z-index: 0;"></span>
    <span style="font-weight: bold;padding-right: 3px;background-color: #f4f4f4;position: relative;">{md5_title}&#160;</span></td>
    <td style="padding: 0px 0px 0px 6px;width: 200px;vertical-align: top;">{md5_value}&#160;</td>

        <td style="margin: 0px;padding: 0px 0px 5px;width: 100px;vertical-align: top;color: #464646;">
    <span style="border-bottom: 1px dotted #b7b7b7;padding: 5px 0px;width: 100px;position: absolute;display: block;z-index: 0;"></span>
    <span style="font-weight: bold;padding-right: 3px;background-color: #f4f4f4;position: relative;">{sha1_title}&#160;</span></td>
    <td style="padding: 0px 0px 0px 6px;width: 200px;vertical-align: top;">{sha1_value}&#160;</td>
    </tr>
</table>
</div>
{tab data end}

{tab download}
<table width="100%" border="0" cellpadding="0" cellspacing="5">
      <tr>
        <td height="20" align="center">{file_name_title}: {file_name}</td>
      </tr>
      <tr>
        <td height="20" align="center">{filesize_title}: {filesize_value}</td>
      </tr>

      <tr>
         <td align="center" valign="middle">{url_download} {mirror_1} {mirror_2}
         </td>
      </tr>
</table>
{tab download end}
{tabs end}

LG
Sakis

[ColinM]

Hi
OK I will look at that layout, and I also have an Android phone and tablet to test on.  Presently the Layouts are being revised.  I have not used the Details layout with tabs for some time!

Colin

[ColinM]

Hi
Have sorted out a revision to the Example Details Layout with Tabs v2.5.  The basic change is to add in

Code Select Expand

word-wrap: break-word; in the relevant <td style= " l for the SHA1 and MD5 value elements.  And of course changed the width styles from absolute px values to % types. 

Please see pics attached.  I tested on Firefox on my PC and with Firefox on my Samsung Android based phone.  I have not yet tested with other browsers.

I also used

Code Select Expand

table-layout:fixed; in the <table  style as that means one only has to set sizes in the first row.

The revised content of the main body of the layout is in the attached file.
Please use a Copy of the Example Details Layout with Tabs v2.5 as there may be a need to make further changes.

Colin
Edit  OK with Chrome Version 45.0.2454.101 m
Edit OK with Opera 32
Edit OK with IE 11 and Edge

[gelöscht durch Administrator]

[sakis]

Vielen Dank für die schnelle umsetzung.

Das ergebniss sind gut aus, aber nur im landscape mode. aber nicht schlimm. trotzdem vielen vielen dank.

[ColinM]

Hi
Glad it helped.  But I had it reasonably ok in portrait - see attached.  Think some of the padding spacing could be improved, and there is 10% of space I did not use!! Also some 'partial characterrs which is Firefox or Android problem

Colin

[gelöscht durch Administrator]

[Arno]

Hi Colin,
what should we doing here?

[ColinM]

Arno
I would suggest that we add a new set of layouts with the suffix 3.2.  These would not have to be default layouts initially.  I can upgrade the existing layouts a bit at a time.  What would be the best way to supply them?   An initial scheme to put into Div style would be to use styles like
<div style="display: table-cell;"></div>  which is equivalent to <td>  - there are corresponding ones for <tr> and <table> etc

The specific details for the present case are given below.  The text file New4.txt is a complete replacement for the main part of the "Example Details Layout with Tabs v2.5" layout

Made several changes to the Download Details Layout "Example Details Layout with Tabs v2.5 (2)" in the {tabs-data} section
This is around line 69 and following

First changed <table .. by adding table-layout: fixed so it is
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="padding:5px 10px 5px 10px; table-layout:fixed;">
Using this means that the table takes its  width spacing entirely from the first row.  It means it is not necessary to have widths anywhere except in the <td...>s in the first <tr>...</tr>

In this first row of four  <td...>s I set the widths to % values as 15% , 30%, 15% and 30% (they could have been slightly increased)
I also removed the widths in the <span...> tags

Then width:  and its value were remove from all other <td and <span tags

The important changes were then adding word-wrap: break-word; in the <td lines with {md5_value} and {sha1_value} as shown below.
Note the "table-layout: fixed" facilitates the word-wrap: break-word; as otherwise the browser may get 'confused'

<td style="padding: 0px 0px 0px 6px; ;vertical-align: top; word-wrap: break-word; ">{md5_value} </td>
<td style="padding: 0px 0px 0px 6px; vertical-align: top; word-wrap: break-word; ">{sha1_value} </td>

Actually not convinced that all the <span> tags are needed but I did not have time to check.

Colin