Ignore:
Timestamp:
Jan 16, 2013, 2:15:29 AM (11 years ago)
Author:
mistic100
Message:

impove display, add LiveValidation

Location:
extensions/GuestBook/template
Files:
1 added
1 deleted
3 edited

Legend:

Unmodified
Added
Removed

  • extensions/GuestBook/template/comment_list.tpl

    r16347 r20181  
    1313      <a href="{$comment.U_CANCEL}">
    1414        {'Cancel'|@translate}
    15       </a>{if isset($comment.U_VALIDATE) or isset($comment.U_EDIT)} | {/if}
     15      </a>{if isset($comment.U_VALIDATE)} | {/if}
    1616    {/if}
    1717    {if isset($comment.U_EDIT) and !isset($comment.IN_EDIT)}

  • extensions/GuestBook/template/guestbook.tpl

    r17732 r20181  
    11{combine_css path=$GUESTBOOK_PATH|@cat:"template/style.css"}
    2 {if $themeconf.name|in_array:$clear_themes}
    3   {combine_css path=$GUESTBOOK_PATH|@cat:"template/style-clear.css"}
     2{combine_script id="livevalidation" load="footer" path=$GUESTBOOK_PATH|@cat:"template/livevalidation.min.js"}
     3
     4{footer_script require='livevalidation'}
     5{if !$comment_add.IS_LOGGED}
     6var author = new LiveValidation('author', {ldelim} onlyOnSubmit: true });
     7author.add(Validate.Presence, {ldelim} failureMessage: "{'Please enter your username'|@translate}" });
    48{/if}
     9
     10{if $add_comment.EMAIL_MANDATORY and (!$add_comment.IS_LOGGED or empty($add_comment.EMAIL))}
     11var email = new LiveValidation('email', {ldelim} onlyOnSubmit: true });
     12email.add(Validate.Presence, {ldelim} failureMessage: "{'Please enter your e-mail'|@translate}" });
     13email.add(Validate.Email, {ldelim} failureMessage: "{'mail address must be like xxx@yyy.eee (example : jack@altern.org)'|@translate}" });
     14{/if}
     15
     16var website = new LiveValidation('website', {ldelim} onlyOnSubmit: true });
     17website.add(Validate.Format, {ldelim} pattern: /^https?:\/\/(-\.)?([^\s\/?\.#-]+\.?)+(\/[^\s]*)?$/i,
     18  failureMessage: "{'invalid website address'|@translate}"});
     19
     20var content = new LiveValidation('contentid', {ldelim} onlyOnSubmit: true });
     21content.add(Validate.Presence, {ldelim} failureMessage: "{'Please enter a message'|@translate}" });
     22 
     23jQuery("#addComment").hide();
     24jQuery("#guestbookAdd").css('width','180px');
     25jQuery("#expandForm").click(function() {ldelim}
     26  jQuery("#guestbookAdd").animate({ldelim}"width": "550px"}, function() {ldelim}
     27    jQuery("#expandForm").slideUp();
     28    jQuery("#addComment").slideDown("slow");
     29  });
     30});
     31{/footer_script}
    532
    633{if $comment_add.ACTIVATE_RATING}
    … …  
    1340  {/footer_script}
    1441{/if}
    15 
    16 {footer_script}
    17 jQuery("#expandForm").click(function() {ldelim}
    18   jQuery("#guestbookAdd").animate({ldelim}"width": "500px"}, function() {ldelim}
    19     jQuery("#addComment").slideDown("slow");
    20   });
    21 });
    22 {/footer_script}
    2342
    2443
    … …  
    4160{if isset($comment_add)}
    4261<div id="guestbookAdd">
    43 <h4 id="expandForm">{'Sign the guestbook'|@translate}</h4>
    44 <form method="post" action="{$comment_add.F_ACTION}" id="addComment" style="display:none;">
    45   <table>
    46   {if $comment_add.SHOW_AUTHOR}
    47     <tr>
    48     <td>
    49       <p><label for="author">{'Author'|@translate}* :</label></p>
    50       <p><input type="text" name="author" id="author" value="{$comment_add.AUTHOR}"></p>
    51     </td>
    52     <td>
    53       <p><label for="email">{'Email address'|@translate} ({'not publicly visible'|@translate}) :</label></p>
    54       <p><input type="text" name="email" id="email" size="30" value="{$comment_add.EMAIL}"></p>
    55     </td>
    56     </tr>
    57   {/if}
    58     <tr>
    59   {if $comment_add.ACTIVATE_RATING}
    60     <td>
    61       <p>{'Rate'|@translate} :</p>
    62       <p><span id="comment_rate"></span></p>
    63     </td>
    64   {/if}
    65     <td>
    66       <p><label for="website">{'Website'|@translate} :</label></p>
    67       <p><input type="text" name="website" id="website" size="30" value="{$comment_add.WEBSITE}"></p>
    68     </td>
    69     </tr>
    70   </table>
    71  
    72   <p><label for="contentid">{'Comment'|@translate}* :</label></p>
    73   <p><textarea name="content" id="contentid" rows="10" style="width:100%;">{$comment_add.CONTENT}</textarea></p>
    74   <p><input type="hidden" name="key" value="{$comment_add.KEY}">
    75     <input type="submit" value="{'Submit'|@translate}"> {'* : mandatory fields'|@translate}</p>
    76 </form>
     62  <h4 id="expandForm">{'Sign the guestbook'|@translate}</h4>
     63  <form method="post" action="{$comment_add.F_ACTION}" id="addComment" class="contact">
     64    <table>
     65    {if not $comment_add.IS_LOGGED or empty($comment_add.EMAIL)}
     66      <tr>
     67        <td>
     68          <label for="author">{'Author'|@translate}* :</label>
     69        {if $comment_add.IS_LOGGED}
     70          {$comment_add.AUTHOR}
     71          <input type="hidden" name="author" value="{$comment_add.AUTHOR}">
     72        {else}
     73          <input type="text" name="author" id="author" value="{$comment_add.AUTHOR}">
     74        {/if}
     75        </td>
     76        <td>
     77          <label for="email">{'Email address'|@translate}{if $comment_add.EMAIL_MANDATORY}*{/if} ({'not publicly visible'|@translate}) :</label>
     78          <input type="text" name="email" id="email" value="{$comment_add.EMAIL}">
     79        </td>
     80      </tr>
     81    {/if}
     82      <tr>
     83      {if $comment_add.ACTIVATE_RATING}
     84        <td>
     85          <label>{'Rate'|@translate} :</label>
     86          <span id="comment_rate"></span>
     87        </td>
     88      {/if}
     89        <td>
     90          <label for="website">{'Website'|@translate} :</label>
     91          <input type="text" name="website" id="website" value="{$comment_add.WEBSITE}">
     92        </td>
     93      </tr>
     94      <tr>
     95        <td colspan="2">
     96          <label for="contentid">{'Comment'|@translate}* :</label>
     97          <textarea name="content" id="contentid" rows="7">{$comment_add.CONTENT}</textarea>
     98        </td>
     99      </tr>
     100      <tr>
     101        <td colspan="2">
     102          <input type="submit" value="{'Send'|@translate}">
     103          {'* : mandatory fields'|@translate}
     104        </td>
     105      </tr>
     106    </table>
     107   
     108    <input type="hidden" name="key" value="{$comment_add.KEY}">
     109  </form>
    77110</div>
    78111{/if}

  • extensions/GuestBook/template/style.css

    r17717 r20181  
    11#guestbookAdd {
    22  padding:15px;
    3   width:180px;
     3  width:550px;
    44  margin:10px auto 25px auto;
    5   background: #333333;
    6   background: -moz-linear-gradient(top, #333333 0%, #252525 100%);
    7   background: -webkit-linear-gradient(top, #333333 0%, #252525 100%);
    8   background: -o-linear-gradient(top, #333333 0%, #252525 100%);
    9   background: -ms-linear-gradient(top, #333333 0%, #252525 100%);
    10   background: linear-gradient(top, #333333 0%, #252525 100%);
    115  border-radius:5px;
    126  border:1px solid #555;
    137  box-shadow:5px 5px 5px rgba(0, 0, 0, 0.25);
    14   color:#aaa;
     8  overflow:hidden;
    159}
    1610
    … …  
    1913  cursor:pointer;
    2014  text-align:center;
     15  font-size:13px;
    2116}
    22   #guestbookAdd h4:hover {
    23     color:#fff;
    24   }
     17 
    2518
    26 #guestbookAdd table {
     19.contact table {
    2720  width:100%;
    2821  text-align:left;
    2922}
     23  .contact table td {
     24    width:50%;
     25    text-align:left;
     26  }
     27.contact label {
     28  font-weight:bold;
     29  display:block;
     30}
     31.contact input[type="text"], .contact textarea, .contact select {
     32  border-radius:2px;
     33  padding:3px;
     34}
     35.contact textarea {
     36  width:535px;
     37}
     38.contact input[type="text"] {
     39  width:260px;
     40}
    3041
    31 #addComment {
    32   margin-top:5px;
     42
     43.LV_validation_message{
     44  display:block;
     45  font-weight:bold;
     46  margin:0 0 0 5px;
    3347}
     48.LV_valid {
     49   display:none;
     50}
     51.LV_invalid {
     52  color:#cc0000;
     53}
     54.LV_invalid_field,
     55input.LV_invalid_field:hover,
     56input.LV_invalid_field:active,
     57textarea.LV_invalid_field:hover,
     58textarea.LV_invalid_field:active {
     59  border: 1px solid #cc0000;
     60}
     61
    3462
    3563p.comment_count {
    … …  
    4068}
    4169
    42 #guestbookAdd p, .commentElement p {
     70.commentElement p {
    4371  text-align:left;
    4472  margin-bottom:0.5em;
    … …  
    4775
    4876.commentElement {
    49   padding:0;
     77  padding:0 !important;
    5078  list-style:none;
    5179  text-align:left;
     80  border:1px solid #555;
     81  border-radius:5px;
     82  margin:5px;
     83  overflow:hidden;
    5284}
    5385  .commentElement .description {
    5486    padding:7px !important;
     87    min-height:0;
    5588  }
    5689  .commentHeader  {
    57     background:#444;
     90    background:rgba(127,127,127,0.5);
    5891    margin:-7px;
    5992    margin-bottom:0;
Note: See TracChangeset for help on using the changeset viewer.