[TASK] Visual streamlining fluid.be.widget.paginate 75/34375/3
authorBenjamin Kott <benjamin.kott@wfp2.com>
Thu, 20 Nov 2014 08:38:39 +0000 (09:38 +0100)
committerAnja Leichsenring <aleichsenring@ab-softlab.de>
Thu, 20 Nov 2014 13:53:21 +0000 (14:53 +0100)
* Visual streamlining of fluid.be.widget.paginate
* remove obsolete css

Resolves: #63090
Releases: master
Change-Id: I92f9c6e407fb00a1d2cb1e45ca65258cdb313f4a
Reviewed-on: http://review.typo3.org/34375
Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Tested-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
typo3/sysext/fluid/Resources/Private/Templates/ViewHelpers/Be/Widget/Paginate/Index.html
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_module_web_list.less
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/visual/_module_web_list.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

index a35a04f..61a10bf 100644 (file)
 </f:if>
 
 <f:section name="paginator">
-       <div id="typo3-dblist-pagination">
-               <f:if condition="{pagination.hasLessPages}">
-                       <f:then>
-                               <f:be.buttons.icon
-                                       uri="{f:widget.uri(arguments:{currentPage: 1})}"
-                                       icon="actions-view-paging-first"
-                                       title="{f:translate(key:'widget.pagination.first')}"
-                               />
-                               <f:be.buttons.icon
-                                       uri="{f:widget.uri(arguments:{currentPage: pagination.previousPage})}"
-                                       icon="actions-view-paging-previous"
-                                       title="{f:translate(key:'widget.pagination.previous')}"
-                               />
-                       </f:then>
-                       <f:else>
-                               <f:be.buttons.icon
-                                       uri=""
-                                       icon="actions-view-paging-first-disabled"
-                               />
-                               <f:be.buttons.icon
-                                       uri=""
-                                       icon="actions-view-paging-previous-disabled"
-                               />
-                       </f:else>
-               </f:if>
-               <span class="bar"> </span>
-               <span class="pageIndicator">
-                       <f:if condition="{recordsLabel}">
+       <nav id="typo3-dblist-pagination">
+               <ul class="pagination">
+                       <f:if condition="{pagination.hasLessPages}">
                                <f:then>
-                                       {recordsLabel}
+                                       <li>
+                                               <f:be.buttons.icon
+                                                       uri="{f:widget.uri(arguments:{currentPage: 1})}"
+                                                       icon="actions-view-paging-first"
+                                                       title="{f:translate(key:'widget.pagination.first')}"
+                                               />
+                                       </li>
+                                       <li>
+                                               <f:be.buttons.icon
+                                                       uri="{f:widget.uri(arguments:{currentPage: pagination.previousPage})}"
+                                                       icon="actions-view-paging-previous"
+                                                       title="{f:translate(key:'widget.pagination.previous')}"
+                                               />
+                                       </li>
                                </f:then>
                                <f:else>
-                                       <f:translate key="widget.pagination.records" />
+                                       <li class="disabled">
+                                               <span>
+                                                       <f:be.buttons.icon
+                                                               uri=""
+                                                               icon="actions-view-paging-first"
+                                                       />
+                                               </span>
+                                       </li>
+                                       <li class="disabled">
+                                               <span>
+                                                       <f:be.buttons.icon
+                                                               uri=""
+                                                               icon="actions-view-paging-previous"
+                                                       />
+                                               </span>
+                                       </li>
                                </f:else>
                        </f:if>
-                       {pagination.startRecord} - {pagination.endRecord}</span>
-               <span class="bar"> </span>
-               <span class="pageIndicator">
-                       <f:translate key="widget.pagination.page" />
-                       <span>
-                               <form id="paginator-form-{position}" onsubmit="goToPage{position}(this); return false;" style="display:inline;">
-                               <script type="text/javascript">
-                                       function goToPage{position}(formObject) {
-                                               var url = '{f:widget.uri(arguments:{currentPage: 987654321})}';
-                                               var page = formObject.elements['paginator-target-page'].value;
-                                               if (page > {pagination.numberOfPages}) {
-                                                       page = {pagination.numberOfPages};
-                                               } else if (page < 1) {
-                                                       page = 1;
-                                               }
-                                               url = url.replace('987654321', page);
-                                               self.location.href= url;
-                                       }
-                               </script>
-                               <f:form.textfield id="paginator-{position}" name="paginator-target-page" size="5" value="{pagination.current}" />
-                               </form>
-                       </span>
-                       / {pagination.numberOfPages}
-               </span>
-               <span class="bar"> </span>
-               <f:if condition="{pagination.hasMorePages}">
-                       <f:then>
-                               <f:be.buttons.icon
-                                       uri="{f:widget.uri(arguments:{currentPage: pagination.nextPage})}"
-                                       icon="actions-view-paging-next"
-                                       title="{f:translate(key:'widget.pagination.next')}"
-                               />
-                               <f:be.buttons.icon
-                                       uri="{f:widget.uri(arguments:{currentPage: pagination.numberOfPages})}"
-                                       icon="actions-view-paging-last"
-                                       title="{f:translate(key:'widget.pagination.last')}"
-                               />
-                       </f:then>
-                       <f:else>
-                               <f:be.buttons.icon
-                                       uri=""
-                                       icon="actions-view-paging-next-disabled"
-                               />
+                       <li>
+                               <span>
+                                       <f:if condition="{recordsLabel}">
+                                               <f:then>
+                                                       {recordsLabel}
+                                               </f:then>
+                                               <f:else>
+                                                       <f:translate key="widget.pagination.records" />
+                                               </f:else>
+                                       </f:if>
+                                       {pagination.startRecord} - {pagination.endRecord}
+                               </span>
+                       </li>
+                       <li>
+                               <span>
+                                       <f:translate key="widget.pagination.page" />
+                                       <span>
+                                               <form id="paginator-form-{position}" onsubmit="goToPage{position}(this); return false;" style="display:inline;">
+                                               <script type="text/javascript">
+                                                       function goToPage{position}(formObject) {
+                                                               var url = '{f:widget.uri(arguments:{currentPage: 987654321})}';
+                                                               var page = formObject.elements['paginator-target-page'].value;
+                                                               if (page > {pagination.numberOfPages}) {
+                                                                       page = {pagination.numberOfPages};
+                                                               } else if (page < 1) {
+                                                                       page = 1;
+                                                               }
+                                                               url = url.replace('987654321', page);
+                                                               self.location.href= url;
+                                                       }
+                                               </script>
+                                               <f:form.textfield id="paginator-{position}" name="paginator-target-page" class="paginator-input" size="5" value="{pagination.current}" />
+                                               </form>
+                                       </span>
+                                       / {pagination.numberOfPages}
+                               </span>
+                       </li>
+                       <f:if condition="{pagination.hasMorePages}">
+                               <f:then>
+                                       <li>
+                                               <f:be.buttons.icon
+                                                       uri="{f:widget.uri(arguments:{currentPage: pagination.nextPage})}"
+                                                       icon="actions-view-paging-next"
+                                                       title="{f:translate(key:'widget.pagination.next')}"
+                                               />
+                                       </li>
+                                       <li>
+                                               <f:be.buttons.icon
+                                                       uri="{f:widget.uri(arguments:{currentPage: pagination.numberOfPages})}"
+                                                       icon="actions-view-paging-last"
+                                                       title="{f:translate(key:'widget.pagination.last')}"
+                                               />
+                                       </li>
+                               </f:then>
+                               <f:else>
+                                       <li class="disabled">
+                                               <span>
+                                                       <f:be.buttons.icon
+                                                               uri=""
+                                                               icon="actions-view-paging-next"
+                                                       />
+                                               </span>
+                                       </li>
+                                       <li class="disabled">
+                                               <span>
+                                                       <f:be.buttons.icon
+                                                               uri=""
+                                                               icon="actions-view-paging-last"
+                                                       />
+                                               </span>
+                                       </li>
+                               </f:else>
+                       </f:if>
+                       <li>
                                <f:be.buttons.icon
-                                       uri=""
-                                       icon="actions-view-paging-last-disabled"
+                                       uri="{f:widget.uri(arguments:{currentPage: pagination.current})}"
+                                       icon="actions-system-refresh"
+                                       title="{f:translate(key:'widget.pagination.refresh')}"
                                />
-                       </f:else>
-               </f:if>
-               <span class="bar"> </span>
-               <f:be.buttons.icon
-                       uri="{f:widget.uri(arguments:{currentPage: pagination.current})}"
-                       icon="actions-system-refresh"
-                       title="{f:translate(key:'widget.pagination.refresh')}"
-               />
-       </div>
-</f:section>
+                       </li>
+               </ul>
+       </nav>
+</f:section>
\ No newline at end of file
index ef426b4..97b34c3 100644 (file)
@@ -136,24 +136,6 @@ div#typo3-listOptions {
        margin: 0 0 24px 0;
 }
 
-div#typo3-dblist-pagination {
-       padding: 5px 0 1px 0;
-}
-
-div#typo3-dblist-pagination img,
-div#typo3-dblist-pagination span.pageIndicator {
-       margin-right: 6px;
-}
-
-div#typo3-dblist-pagination img {
-       padding-bottom: 2px;
-       vertical-align: bottom;
-}
-
-div#typo3-dblist-pagination span.bar {
-       padding: 0 2px;
-}
-
 .db_list_normal td.col-control,
 .db_list_normal td.col-clipboard {
        padding-left: 3px;
index 596e472..0968bf9 100644 (file)
@@ -27,12 +27,4 @@ table.typo3-dblist tr td .typo3-DBctrl .typo3-ctrl-versioning-multipleVersions {
 
 table.typo3-dblist tr td .typo3-DBctrl .typo3-ctrl-versioning-oneVersion {
        background-color: #9999cc;
-}
-
-div#typo3-dblist-pagination {
-       white-space: nowrap;
-}
-
-div#typo3-dblist-pagination span.bar {
-       border-left: 1px solid #5485c3;
 }
\ No newline at end of file
index 15327f9..5617d79 100644 (file)
@@ -12043,20 +12043,6 @@ input.smallCheckboxes {
 div#typo3-listOptions {
   margin: 0 0 24px 0;
 }
-div#typo3-dblist-pagination {
-  padding: 5px 0 1px 0;
-}
-div#typo3-dblist-pagination img,
-div#typo3-dblist-pagination span.pageIndicator {
-  margin-right: 6px;
-}
-div#typo3-dblist-pagination img {
-  padding-bottom: 2px;
-  vertical-align: bottom;
-}
-div#typo3-dblist-pagination span.bar {
-  padding: 0 2px;
-}
 .db_list_normal td.col-control,
 .db_list_normal td.col-clipboard {
   padding-left: 3px;
@@ -12596,12 +12582,6 @@ table.typo3-dblist tr td .typo3-DBctrl .typo3-ctrl-versioning-multipleVersions {
 table.typo3-dblist tr td .typo3-DBctrl .typo3-ctrl-versioning-oneVersion {
   background-color: #9999cc;
 }
-div#typo3-dblist-pagination {
-  white-space: nowrap;
-}
-div#typo3-dblist-pagination span.bar {
-  border-left: 1px solid #5485c3;
-}
 /**
  * This file is part of the TYPO3 CMS project.
  *