Changeset 27213


Ignore:
Timestamp:
02/05/14 18:26:30 (6 years ago)
Author:
mistic100
Message:

improve display on smartpocket

Location:
extensions/GuestBook/template
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • extensions/GuestBook/template/guestbook.tpl

    r26071 r27213  
    2222  content.add(Validate.Presence, {ldelim} failureMessage: "{'Please enter a message'|translate}" }); 
    2323   
     24  {if $themeconf.mobile} 
     25  var width = $(document).width()-30; 
     26  {else} 
     27  var width = jQuery('#guestbookAdd').parent().width(); 
     28  {/if} 
     29   
    2430  {if !isset($GB_OPEN)} 
    2531  jQuery('#addComment').hide(); 
    2632  jQuery('#guestbookAdd').css('width', '180px'); 
    2733  jQuery('#expandForm').click(function() {ldelim} 
    28     jQuery('#guestbookAdd').animate({ldelim}'width': '550px'}, function() {ldelim} 
     34    jQuery('#guestbookAdd').animate({ 'width': Math.min(width, 580) }, function() {ldelim} 
    2935      jQuery('#expandForm').slideUp(); 
    3036      jQuery('#addComment').slideDown('slow'); 
    3137    }); 
    3238  }); 
     39  {else} 
     40  jQuery('#guestbookAdd').css({ 'width': Math.min(width, 580) }); 
    3341  {/if} 
    3442 
     
    5765  <h4 id="expandForm">{'Sign the guestbook'|translate}</h4> 
    5866  <form method="post" action="{$comment_add.F_ACTION}" id="addComment" class="contact"> 
    59     <table> 
    60     {if not $comment_add.IS_LOGGED or empty($comment_add.EMAIL)} 
    61       <tr> 
    62         <td> 
    63           <label for="author">{'Author'|translate}* :</label> 
    64         {if $comment_add.IS_LOGGED} 
    65           {$comment_add.AUTHOR} 
    66           <input type="hidden" name="author" value="{$comment_add.AUTHOR}"> 
    67         {else} 
    68           <input type="text" name="author" id="author" value="{$comment_add.AUTHOR}"> 
    69         {/if} 
    70         </td> 
    71         <td> 
    72           <label for="email">{'Email address'|translate}{if $comment_add.EMAIL_MANDATORY}*{/if} ({'not publicly visible'|translate}) :</label> 
    73           <input type="text" name="email" id="email" value="{$comment_add.EMAIL}"> 
    74         </td> 
    75       </tr> 
     67   
     68  {if not $comment_add.IS_LOGGED or empty($comment_add.EMAIL)} 
     69    <div class="col-50"> 
     70      <label for="author">{'Author'|translate}* :</label> 
     71    {if $comment_add.IS_LOGGED} 
     72      {$comment_add.AUTHOR} 
     73      <input type="hidden" name="author" value="{$comment_add.AUTHOR}"> 
     74    {else} 
     75      <input type="text" name="author" id="author" value="{$comment_add.AUTHOR}"> 
    7676    {/if} 
    77       <tr> 
    78       {if $comment_add.ACTIVATE_RATING} 
    79         <td> 
    80           <label>{'Rate'|translate} :</label> 
    81           <span id="comment_rate"></span> 
    82         </td> 
    83       {/if} 
    84         <td> 
    85           <label for="website">{'Website'|translate} :</label> 
    86           <input type="text" name="website" id="website" value="{$comment_add.WEBSITE}"> 
    87         </td> 
    88       </tr> 
    89       <tr> 
    90         <td colspan="2"> 
    91           <label for="contentid">{'Comment'|translate}* :</label> 
    92           <textarea name="content" id="contentid" rows="7">{$comment_add.CONTENT}</textarea> 
    93         </td> 
    94       </tr> 
     77    </div> 
     78    <div class="col-50"> 
     79      <label for="email">{'Email address'|translate}{if $comment_add.EMAIL_MANDATORY}*{/if} ({'not publicly visible'|translate}) :</label> 
     80      <input type="text" name="email" id="email" value="{$comment_add.EMAIL}"> 
     81    </div> 
     82  {/if} 
     83  {if $comment_add.ACTIVATE_RATING} 
     84    <div class="col-50"> 
     85      <label>{'Rate'|translate} :</label> 
     86      <span id="comment_rate"></span> 
     87    </div> 
     88  {/if} 
     89    <div class="col-50"> 
     90      <label for="website">{'Website'|translate} :</label> 
     91      <input type="text" name="website" id="website" value="{$comment_add.WEBSITE}"> 
     92    </div> 
     93     
     94    <div class="col-100"> 
     95      <label for="contentid">{'Comment'|translate}* :</label> 
     96      <textarea name="content" id="contentid" rows="7">{$comment_add.CONTENT}</textarea> 
     97    </div> 
     98     
    9599    {if isset($CRYPTO)} 
    96100      {$CRYPTO.parsed_content} 
     
    99103      {$EASYCAPTCHA.parsed_content} 
    100104    {/if} 
    101       <tr> 
    102         <td colspan="2"> 
    103           <input type="submit" value="{'Send'|translate}">  
    104           {'* : mandatory fields'|translate} 
    105         </td> 
    106       </tr> 
    107     </table> 
     105     
     106    <div class="col-100"> 
     107      <input type="submit" value="{'Send'|translate}">  
     108      {'* : mandatory fields'|translate} 
     109    </div> 
    108110     
    109111    <input type="hidden" name="key" value="{$comment_add.KEY}"> 
  • extensions/GuestBook/template/style.css

    r20181 r27213  
    11#guestbookAdd { 
    22  padding:15px; 
    3   width:550px; 
     3  max-width:580px; 
    44  margin:10px auto 25px auto; 
    55  border-radius:5px; 
     
    77  box-shadow:5px 5px 5px rgba(0, 0, 0, 0.25); 
    88  overflow:hidden; 
     9  -moz-box-sizing:border-box; 
     10  box-sizing:border-box; 
    911} 
    1012 
     
    1517  font-size:13px; 
    1618} 
     19 
     20/* minimal fluid grid */ 
     21.contact [class^=col-] { 
     22  -moz-box-sizing:border-box; 
     23  box-sizing:border-box; 
     24  padding:0 2px; 
     25} 
     26.contact [class^=col-]:not(:last-child) { 
     27  margin-bottom:5px; 
     28} 
     29.contact .col-50 { 
     30  float:left; 
     31  width:50%; 
     32} 
     33.contact .col-100 { 
     34  width:100%; 
     35} 
     36@media (max-width:500px) { 
     37  .contact .col-50 { 
     38    float:none; 
     39    width:100%; 
     40  } 
     41} 
    1742   
    18  
    19 .contact table { 
    20   width:100%; 
    21   text-align:left; 
    22 } 
    23   .contact table td { 
    24     width:50%; 
    25     text-align:left; 
    26   } 
    2743.contact label { 
    2844  font-weight:bold; 
     
    3349  padding:3px; 
    3450} 
    35 .contact textarea { 
    36   width:535px; 
    37 } 
    38 .contact input[type="text"] { 
    39   width:260px; 
     51.contact textarea, .contact input[type="text"] { 
     52  -moz-box-sizing:border-box; 
     53  box-sizing:border-box; 
     54  width:100%; 
    4055} 
    4156 
     
    6681  font-weight:bold; 
    6782  font-size:1.1em; 
     83} 
     84 
     85.commentsList { 
     86  padding:0; 
    6887} 
    6988 
Note: See TracChangeset for help on using the changeset viewer.