Changeset 3009


Ignore:
Timestamp:
Dec 21, 2008, 9:45:12 PM (16 years ago)
Author:
plg
Message:

modification: instructions are displayed by blocks that can be expanded
individually. The icon doesn't fit with roma theme currently.

Location:
branches/2.0
Files:
2 added
3 edited

Legend:

Unmodified
Added
Removed

  • branches/2.0/admin/template/goto/theme/roma/theme.css

    r2990 r3009  
    4848.content dl, dd { margin:5px; }
    4949.content div.titrePage { height:55px; }
    50 .instructions { height:450px; overflow:scroll; padding:0 20px 0; text-align:left; margin-bottom: 20px;
    51 font-size:14px; line-height:21px; }
    52 .instructions { overflow-y:scroll; overflow-x:hidden; }
    53 .instructions  h3 { text-align: center; margin: 30px 0 0 0; }
     50
     51.instructions { text-align:left;}
     52.instructionBlock {border: 1px solid #666; margin: 5px; overflow: hidden;}
     53.instructionBlockHeaderCollapsed, .instructionBlockHeaderExpanded {font-size:110%; cursor: pointer; overflow: hidden; background-repeat: no-repeat; background-position: left center; padding-left: 20px; background-color: #111; padding: 5px 20px; color: #ff3363;}
     54.instructionBlockHeaderCollapsed { background-image: url(../../icon/expand.png);}
     55.instructionBlockHeaderExpanded { background-image: url(../../icon/collapse.png);}
     56.instructionBlockContent { padding:5px;}
     57
    5458.content ul.thumbnails span.wrap2:hover { background-color:#111; border:1px solid #FF3363; color:#666; }
    5559.content ul.thumbnails span.wrap2 { border:1px solid #666; padding: 4px; }

  • branches/2.0/language/en_UK/help.html

    r2495 r3009  
    22<h2>Help</h2>
    33
    4 <h3>Quick start</h3>
    5 
     4<div id="instructionQuickStart" class="instructionBlock">
     5  <div
     6    id="quickStart_header"
     7    class="instructionBlockHeaderCollapsed"
     8    onclick="blockToggleDisplay('quickStart_header', 'quickStart_content')"
     9  >
     10    Quick Start
     11  </div>
     12  <div
     13    id="quickStart_content"
     14    class="instructionBlockContent"
     15    style="display:none"
     16  >
    617<ol>
    718 
    … …  
    3041 
    3142</ol>
    32 
    33 <h3>Adding elements</h3>
    34 
     43  </div> <!-- quickStart_content -->
     44</div> <!-- instructionQuickStart -->
     45
     46<div id="instructionAddPhotos" class="instructionBlock">
     47  <div
     48    id="addPhotos_header"
     49    class="instructionBlockHeaderCollapsed"
     50    onclick="blockToggleDisplay('addPhotos_header', 'addPhotos_content')"
     51  >
     52    Adding elements
     53  </div>
     54  <div
     55    id="addPhotos_content"
     56    class="instructionBlockContent"
     57    style="display:none"
     58  >
    3559<ul>
    3660
    … …  
    115139
    116140</ul>
    117 
    118 <h3>Thumbnails</h3>
    119 
     141  </div> <!-- addPhotos_content -->
     142</div> <!-- instructionAddPhotos -->
     143
     144<div id="instructionThumbnails" class="instructionBlock">
     145  <div
     146    id="thumbnails_header"
     147    class="instructionBlockHeaderCollapsed"
     148    onclick="blockToggleDisplay('thumbnails_header', 'thumbnails_content')"
     149  >
     150    Thumbnails
     151  </div>
     152  <div
     153    id="thumbnails_content"
     154    class="instructionBlockContent"
     155    style="display:none"
     156  >
    120157<ul>
    121158
    … …  
    144181
    145182</ul>
    146 
    147 <h3>Access authorization</h3>
    148 
     183  </div> <!-- thumbnails_content -->
     184</div> <!-- instructionThumbnails -->
     185
     186<div id="instructionPermissions" class="instructionBlock">
     187  <div
     188    id="permissions_header"
     189    class="instructionBlockHeaderCollapsed"
     190    onclick="blockToggleDisplay('permissions_header', 'permissions_content')"
     191  >
     192    Permissions
     193  </div>
     194  <div
     195    id="permissions_content"
     196    class="instructionBlockContent"
     197    style="display:none"
     198  >
    149199<ul>
    150200
    … …  
    179229
    180230</ul>
    181 
    182 <h3>Users Groups</h3>
    183 
     231  </div> <!-- permissions_content -->
     232</div> <!-- instructionPermissions -->
     233
     234<div id="instructionGroups" class="instructionBlock">
     235  <div
     236    id="groups_header"
     237    class="instructionBlockHeaderCollapsed"
     238    onclick="blockToggleDisplay('groups_header', 'groups_content')"
     239  >
     240    Groups
     241  </div>
     242  <div
     243    id="groups_content"
     244    class="instructionBlockContent"
     245    style="display:none"
     246  >
    184247<ul>
    185248
    … …  
    197260
    198261</ul>
    199 
    200 <h3>Files upload by users</h3>
    201 
     262  </div> <!-- groups_content -->
     263</div> <!-- instructionGroups -->
     264
     265<div id="instructionUpload" class="instructionBlock">
     266  <div
     267    id="upload_header"
     268    class="instructionBlockHeaderCollapsed"
     269    onclick="blockToggleDisplay('upload_header', 'upload_content')"
     270  >
     271    Upload by users
     272  </div>
     273  <div
     274    id="upload_content"
     275    class="instructionBlockContent"
     276    style="display:none"
     277  >
    202278<p>Piwigo offers the possibility for users to upload images. in
    203279order to do it:</p>
    … …  
    218294in order to validate or to refuse the files proposed, then to synchronize
    219295filesystem with database.</p>
    220 
    221 
    222 <h3>Links between elements and categories, virtual categories</h3>
    223 
     296  </div> <!-- upload_content -->
     297</div> <!-- instructionUpload -->
     298
     299<div id="instructionCategoryLinks" class="instructionBlock">
     300  <div
     301    id="categoryLinks_header"
     302    class="instructionBlockHeaderCollapsed"
     303    onclick="blockToggleDisplay('categoryLinks_header', 'categoryLinks_content')"
     304  >
     305    Links between elements and categories, virtual categories
     306  </div>
     307  <div
     308    id="categoryLinks_content"
     309    class="instructionBlockContent"
     310    style="display:none"
     311  >
    224312<ul>
    225313
    … …  
    240328
    241329</ul>
    242 
    243 <h3>Miscellanous informations</h3>
    244 
     330  </div> <!-- categoryLinks_content -->
     331</div> <!-- instructionCategoryLinks -->
     332
     333<div id="instructionMisc" class="instructionBlock">
     334  <div
     335    id="misc_header"
     336    class="instructionBlockHeaderCollapsed"
     337    onclick="blockToggleDisplay('misc_header', 'misc_content')"
     338  >
     339    Miscellanous informations
     340  </div>
     341  <div
     342    id="misc_content"
     343    class="instructionBlockContent"
     344    style="display:none"
     345  >
    245346<ul>
    246347
    … …  
    258359
    259360</ul>
     361  </div> <!-- misc_content -->
     362</div> <!-- instructionMisc -->
     363
    260364</div>

  • branches/2.0/template-common/scripts.js

    r2700 r3009  
    9191};
    9292
     93function blockToggleDisplay(headerId, contentId)
     94{
     95  var revHeader = document.getElementById(headerId);
     96  var revContent = document.getElementById(contentId);
     97
     98  if (revContent.style.display == 'none')
     99  {
     100    revContent.style.display = 'block';
     101    revHeader.className = 'instructionBlockHeaderExpanded';
     102  }
     103  else
     104  {
     105    revContent.style.display = 'none';
     106    revHeader.className = 'instructionBlockHeaderCollapsed';
     107  }
     108}
     109
     110
    93111PwgWS.prototype = {
    94112
Note: See TracChangeset for help on using the changeset viewer.