Changeset 27213


Ignore:
Timestamp:
Feb 5, 2014, 6:26:30 PM (10 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.