diff options
| -rw-r--r-- | admin/template/goto/icon/collapse.png | bin | 0 -> 3599 bytes | |||
| -rw-r--r-- | admin/template/goto/icon/expand.png | bin | 0 -> 159 bytes | |||
| -rw-r--r-- | admin/template/goto/theme/roma/theme.css | 12 | ||||
| -rw-r--r-- | language/en_UK/help.html | 152 | ||||
| -rw-r--r-- | template-common/scripts.js | 18 |
5 files changed, 154 insertions, 28 deletions
diff --git a/admin/template/goto/icon/collapse.png b/admin/template/goto/icon/collapse.png Binary files differnew file mode 100644 index 000000000..a2566d534 --- /dev/null +++ b/admin/template/goto/icon/collapse.png diff --git a/admin/template/goto/icon/expand.png b/admin/template/goto/icon/expand.png Binary files differnew file mode 100644 index 000000000..d4aa7b76b --- /dev/null +++ b/admin/template/goto/icon/expand.png diff --git a/admin/template/goto/theme/roma/theme.css b/admin/template/goto/theme/roma/theme.css index 2b3a21cc1..5e4d1f1d2 100644 --- a/admin/template/goto/theme/roma/theme.css +++ b/admin/template/goto/theme/roma/theme.css @@ -47,10 +47,14 @@ text-transform:none; font-weight:bold; padding-left:20px; width:54%; } .content dl, dd { margin:5px; } .content div.titrePage { height:55px; } -.instructions { height:450px; overflow:scroll; padding:0 20px 0; text-align:left; margin-bottom: 20px; -font-size:14px; line-height:21px; } -.instructions { overflow-y:scroll; overflow-x:hidden; } -.instructions h3 { text-align: center; margin: 30px 0 0 0; } + +.instructions { text-align:left;} +.instructionBlock {border: 1px solid #666; margin: 5px; overflow: hidden;} +.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;} +.instructionBlockHeaderCollapsed { background-image: url(../../icon/expand.png);} +.instructionBlockHeaderExpanded { background-image: url(../../icon/collapse.png);} +.instructionBlockContent { padding:5px;} + .content ul.thumbnails span.wrap2:hover { background-color:#111; border:1px solid #FF3363; color:#666; } .content ul.thumbnails span.wrap2 { border:1px solid #666; padding: 4px; } .content ul.thumbnails span.wrap2 { -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; } diff --git a/language/en_UK/help.html b/language/en_UK/help.html index b585cb741..2de471858 100644 --- a/language/en_UK/help.html +++ b/language/en_UK/help.html @@ -1,8 +1,19 @@ <div class="instructions"> <h2>Help</h2> -<h3>Quick start</h3> - +<div id="instructionQuickStart" class="instructionBlock"> + <div + id="quickStart_header" + class="instructionBlockHeaderCollapsed" + onclick="blockToggleDisplay('quickStart_header', 'quickStart_content')" + > + Quick Start + </div> + <div + id="quickStart_content" + class="instructionBlockContent" + style="display:none" + > <ol> <li>Create a local directory "test_category".</li> @@ -29,9 +40,22 @@ your gallery.</li> </ol> - -<h3>Adding elements</h3> - + </div> <!-- quickStart_content --> +</div> <!-- instructionQuickStart --> + +<div id="instructionAddPhotos" class="instructionBlock"> + <div + id="addPhotos_header" + class="instructionBlockHeaderCollapsed" + onclick="blockToggleDisplay('addPhotos_header', 'addPhotos_content')" + > + Adding elements + </div> + <div + id="addPhotos_content" + class="instructionBlockContent" + style="display:none" + > <ul> <li> @@ -114,9 +138,22 @@ containing sub-categories.</li> Synchronize</span></li> </ul> - -<h3>Thumbnails</h3> - + </div> <!-- addPhotos_content --> +</div> <!-- instructionAddPhotos --> + +<div id="instructionThumbnails" class="instructionBlock"> + <div + id="thumbnails_header" + class="instructionBlockHeaderCollapsed" + onclick="blockToggleDisplay('thumbnails_header', 'thumbnails_content')" + > + Thumbnails + </div> + <div + id="thumbnails_content" + class="instructionBlockContent" + style="display:none" + > <ul> <li>As said earlier, each element of picture type must be associated with @@ -143,9 +180,22 @@ containing sub-categories.</li> "thumbnail" for ugo (user, group, other).</li> </ul> - -<h3>Access authorization</h3> - + </div> <!-- thumbnails_content --> +</div> <!-- instructionThumbnails --> + +<div id="instructionPermissions" class="instructionBlock"> + <div + id="permissions_header" + class="instructionBlockHeaderCollapsed" + onclick="blockToggleDisplay('permissions_header', 'permissions_content')" + > + Permissions + </div> + <div + id="permissions_content" + class="instructionBlockContent" + style="display:none" + > <ul> <li>You can forbid access to categories. Categories can be "public" or @@ -178,9 +228,22 @@ containing sub-categories.</li> </li> </ul> - -<h3>Users Groups</h3> - + </div> <!-- permissions_content --> +</div> <!-- instructionPermissions --> + +<div id="instructionGroups" class="instructionBlock"> + <div + id="groups_header" + class="instructionBlockHeaderCollapsed" + onclick="blockToggleDisplay('groups_header', 'groups_content')" + > + Groups + </div> + <div + id="groups_content" + class="instructionBlockContent" + style="display:none" + > <ul> <li>Piwigo is able to manage groups of users. It can be very useful @@ -196,9 +259,22 @@ containing sub-categories.</li> "jack" will be able to see "Christmas 2003".</li> </ul> - -<h3>Files upload by users</h3> - + </div> <!-- groups_content --> +</div> <!-- instructionGroups --> + +<div id="instructionUpload" class="instructionBlock"> + <div + id="upload_header" + class="instructionBlockHeaderCollapsed" + onclick="blockToggleDisplay('upload_header', 'upload_content')" + > + Upload by users + </div> + <div + id="upload_content" + class="instructionBlockContent" + style="display:none" + > <p>Piwigo offers the possibility for users to upload images. in order to do it:</p> @@ -217,10 +293,22 @@ must be validated by an administrator. For that purpose, an administrator must go in <span class="pwgScreen">Administration, Pictures, Waiting</span> in order to validate or to refuse the files proposed, then to synchronize filesystem with database.</p> - - -<h3>Links between elements and categories, virtual categories</h3> - + </div> <!-- upload_content --> +</div> <!-- instructionUpload --> + +<div id="instructionCategoryLinks" class="instructionBlock"> + <div + id="categoryLinks_header" + class="instructionBlockHeaderCollapsed" + onclick="blockToggleDisplay('categoryLinks_header', 'categoryLinks_content')" + > + Links between elements and categories, virtual categories + </div> + <div + id="categoryLinks_content" + class="instructionBlockContent" + style="display:none" + > <ul> <li>Piwigo dissociates categories where elements are stored and @@ -239,9 +327,22 @@ filesystem with database.</p> in <span class="pwgScreen">Administration, Categories, Manage</span>.</li> </ul> - -<h3>Miscellanous informations</h3> - + </div> <!-- categoryLinks_content --> +</div> <!-- instructionCategoryLinks --> + +<div id="instructionMisc" class="instructionBlock"> + <div + id="misc_header" + class="instructionBlockHeaderCollapsed" + onclick="blockToggleDisplay('misc_header', 'misc_content')" + > + Miscellanous informations + </div> + <div + id="misc_content" + class="instructionBlockContent" + style="display:none" + > <ul> <li>As soon as you created your gallery, modify default display properties @@ -257,4 +358,7 @@ filesystem with database.</p> documentation</a> for further reading.</li> </ul> + </div> <!-- misc_content --> +</div> <!-- instructionMisc --> + </div>
\ No newline at end of file diff --git a/template-common/scripts.js b/template-common/scripts.js index 519786ab7..f6b22b41c 100644 --- a/template-common/scripts.js +++ b/template-common/scripts.js @@ -90,6 +90,24 @@ function PwgWS(urlRoot) }; }; +function blockToggleDisplay(headerId, contentId) +{ + var revHeader = document.getElementById(headerId); + var revContent = document.getElementById(contentId); + + if (revContent.style.display == 'none') + { + revContent.style.display = 'block'; + revHeader.className = 'instructionBlockHeaderExpanded'; + } + else + { + revContent.style.display = 'none'; + revHeader.className = 'instructionBlockHeaderCollapsed'; + } +} + + PwgWS.prototype = { callService : function(method, parameters, options) |
