Merge Request #231

← To merge requests From colab_pagination into master
Merged
softwarepublico/softwarepublico!231
Created by Carlos Coêlho

Colab pagination

Reference: https://softwarepublico.gov.br/social/search/communities

Assignee: Matheus Fernandes
Milestone: None

Merged by Matheus Fernandes

Source branch has been removed
Commits (2)
2 participants
Design Colab
Showing 3 changed files   Show diff stats
src/colab-spb-theme-plugin/colab_spb_theme/static/css/screen.css
  Diff comments   Edit   View file @e316a89
... ... @@ -695,3 +695,86 @@ body > .alert,
695 695 #main-content .row > .alert {
696 696 margin-top: 20px;
697 697 }
  698 +
  699 +#pagination-block span {
  700 + padding: 5px 0;
  701 + margin-right: 4px;
  702 + color: #172738;
  703 + border: 1px solid #D3D6DE;
  704 + border-radius: 4px;
  705 + letter-spacing: 0.6px;
  706 + font-size: 12px;
  707 + font-weight: 700;
  708 + text-decoration: none;
  709 + display: inline-block;
  710 + width: 30px;
  711 +}
  712 +
  713 +#pagination-block span.previous-arrow,
  714 +#pagination-block span.next-arrow {
  715 + display: none;
  716 +}
  717 +
  718 +#pagination-block .previous_page,
  719 +#pagination-block .next_page {
  720 + position: relative;
  721 + padding: 5px 9px;
  722 +}
  723 +
  724 +#pagination-block .previous_page,
  725 +#pagination-block .next_page {
  726 + width: auto;
  727 + position: relative;
  728 + background-image: none;
  729 + font-weight: 500;
  730 +}
  731 +
  732 +#pagination-block .previous_page::before {
  733 + content: "\f104";
  734 + margin: 0 10px 0 0;
  735 +}
  736 +
  737 +#pagination-block .next_page::after {
  738 + content: "\f105";
  739 + margin: 0 0 0 10px;
  740 +}
  741 +
  742 +#pagination-block .next_page::after,
  743 +#pagination-block .previous_page::before {
  744 + font-family: "FontAwesome";
  745 + font-size: 15px;
  746 + font-weight: bold;
  747 + line-height: 10px;
  748 +}
  749 +
  750 +#pagination-block a {
  751 + font-family: "open_sansregular";
  752 + font-size: 12px;
  753 + color: #172738;
  754 +}
  755 +
  756 +#pagination-block .disabled .previous_page::before,
  757 +#pagination-block .disabled .next_page::after,
  758 +#pagination-block .pagination .disabled a {
  759 + color: #888;
  760 + cursor: text;
  761 +}
  762 +
  763 +#pagination-block .pagination .disabled {
  764 + pointer-events: none;
  765 +}
  766 +
  767 +#pagination-block #pagination-center a {
  768 + font-weight: 700;
  769 +}
  770 +
  771 +#pagination-block a:hover,
  772 +#pagination-block span:hover {
  773 + background-color: rgb(255, 255, 255);
  774 + text-decoration: none;
  775 +}
  776 +
  777 +#pagination-block #pagination-center li.active a {
  778 + background-color: #ECEDF1;
  779 + border: 1px solid #D3D6DE;
  780 +}
... ...
src/colab-spb-theme-plugin/colab_spb_theme/templates/mailinglist-summary.html
  Diff comments   Edit   View file @e316a89
... ... @@ -85,50 +85,72 @@
85 85  
86 86 {% block mailinglist_view_paginator %}
87 87 {% if page_obj.has_other_pages %}
88   - <div class="text-center">
89   - <ul class="pagination">
90   - <li {% if page_obj.number == 1 %}class="disabled"{% endif %}>
91   - <a href="{% if page_obj.number == 1 %}javascript:void(0);{% else %}?page={{1}}{% endif %}"><span class="glyphicon glyphicon-chevron-left small-icon"></span><span class="glyphicon glyphicon-chevron-left small-icon"></span></a>
92   - </li>
93   - <li {% if not page_obj.has_previous %}class="disabled"{% endif %}>
94   - <a href="{% if page_obj.has_previous %}?page={{page_obj.previous_page_number }}{% else %}javascript:void(0);{% endif %}"><span class="glyphicon glyphicon-chevron-left small-icon"></span></a>
95   - </li>
96   -
97   - {% if page_obj.has_previous %}
98   - {% if page_obj.previous_page_number > 1 %}
99   - <li>
100   - <a href="?page={{page_obj.previous_page_number|add:-1 }}">{{ page_obj.number|add:-2 }}</a>
101   - </li>
102   - {% endif %}
103   - <li>
104   - <a href="?page={{page_obj.previous_page_number }}">{{ page_obj.number|add:-1 }}</a>
105   - </li>
106   - {% endif %}
107   -
108   - <li class="active">
109   - <a href="javascript:void(0);">{{ page_obj.number }}</a>
110   - </li>
111   -
112   - {% if page_obj.has_next %}
113   - <li>
114   - <a href="?page={{page_obj.next_page_number }}">{{ page_obj.number|add:1 }}</a>
115   - </li>
116   - {% if page_obj.next_page_number < page_obj.paginator.num_pages %}
117   - <li>
118   - <a href="?page={{page_obj.next_page_number|add:1 }}">{{ page_obj.number|add:2 }}</a>
119   - </li>
120   - {% endif %}
121   - {% endif %}
122   -
123   - <li {% if not page_obj.has_next %}class="disabled"{% endif %}>
124   - <a href="{% if page_obj.has_next %}?page={{page_obj.next_page_number }}{% else %}javascript:void(0);{% endif %}"><span class="glyphicon glyphicon-chevron-right small-icon"></span></a>
125   - </li>
  88 + <div id="pagination-block">
  89 + <div class="row">
  90 + <div class="col-md-2">
  91 + <div class="pull-left">
  92 + <ul class="pagination">
  93 + <li {% if not page_obj.has_previous %}class="disabled"{% endif %}>
  94 + <span class="previous_page">
  95 + <a href="{% if page_obj.has_previous %}{% append_to_get page=page_obj.previous_page_number %}{% else %}javascript:void(0);{% endif %}"><span class="previous-arrow">« </span>Anterior</a>
  96 + </span>
  97 + </li>
  98 + </ul>
  99 + </div>
  100 + </div>
126 101  
127   - <li {% if page_obj.number == page_obj.paginator.num_pages %}class="disabled"{% endif %}>
128   - <a href="{% if page_obj.number == page_obj.paginator.num_pages %}javascript:void(0);{% else %}?page={{page_obj.paginator.num_pages }}{% endif %}"><span class="glyphicon glyphicon-chevron-right small-icon"></span><span class="glyphicon glyphicon-chevron-right small-icon"></span></a>
129   - </li>
  102 + <div class="col-md-8">
  103 + <div id="pagination-center" class="text-center">
  104 + {% if page_obj.has_previous %}
  105 + <ul class="pagination">
  106 + {% if page_obj.previous_page_number > 1 %}
  107 + <li>
  108 + <a href="{% append_to_get page=page_obj.previous_page_number|add:-1 %}">{{ page_obj.number|add:-2 }}</a>
  109 + </li>
  110 + </ul>
  111 + <ul class="pagination">
  112 + {% endif %}
  113 + <li>
  114 + <a href="{% append_to_get page=page_obj.previous_page_number %}">{{ page_obj.number|add:-1 }}</a>
  115 + </li>
  116 + </ul>
  117 + {% endif %}
  118 +
  119 + <ul class="pagination">
  120 + <li class="active">
  121 + <a href="javascript:void(0);">{{ page_obj.number }}</a>
  122 + </li>
  123 + </ul>
  124 +
  125 + {% if page_obj.has_next %}
  126 + <ul class="pagination">
  127 + <li>
  128 + <a href="{% append_to_get page=page_obj.next_page_number %}">{{ page_obj.number|add:1 }}</a>
  129 + </li>
  130 + {% if page_obj.next_page_number < page_obj.paginator.num_pages %}
  131 + </ul>
  132 + <ul class="pagination">
  133 + <li>
  134 + <a href="{% append_to_get page=page_obj.next_page_number|add:1 %}">{{ page_obj.number|add:2 }}</a>
  135 + </li>
  136 + {% endif %}
  137 + </ul>
  138 + {% endif %}
  139 + </div>
  140 + </div>
130 141  
131   - </ul>
  142 + <div class="col-md-2">
  143 + <div class="pull-right">
  144 + <ul class="pagination">
  145 + <li {% if not page_obj.has_next %}class="disabled"{% endif %}>
  146 + <span class="next_page">
  147 + <a href="{% if page_obj.has_next %}{% append_to_get page=page_obj.next_page_number %}{% else %}javascript:void(0);{% endif %}">Próximo<span class="next-arrow"> »</span></a>
  148 + </span>
  149 + </li>
  150 + </ul>
  151 + </div>
  152 + </div>
  153 + </div>
132 154 </div>
133 155 {% endif %}
134 156 {% endblock %}
... ...
src/colab-spb-theme-plugin/colab_spb_theme/templates/search/search.html
  Diff comments   Edit   View file @e316a89
... ... @@ -95,54 +95,75 @@
95 95 </div>
96 96  
97 97 {% if page.has_other_pages %}
98   - <div class="text-center">
99   - <ul class="pagination">
100   - <li {% if page.number == 1 %}class="disabled"{% endif %}>
101   - <a href="{% if page.number == 1 %}javascript:void(0);{% else %}{% append_to_get page=1 %}{% endif %}"><span class="glyphicon glyphicon-chevron-left small-icon"></span><span class="glyphicon glyphicon-chevron-left small-icon"></span></a>
102   - </li>
103   - <li {% if not page.has_previous %}class="disabled"{% endif %}>
104   - <a href="{% if page.has_previous %}{% append_to_get page=page.previous_page_number %}{% else %}javascript:void(0);{% endif %}"><span class="glyphicon glyphicon-chevron-left small-icon"></span></a>
105   - </li>
106   -
107   - {% if page.has_previous %}
108   - {% if page.previous_page_number > 1 %}
109   - <li>
110   - <a href="{% append_to_get page=page.previous_page_number|add:-1 %}">{{ page.number|add:-2 }}</a>
111   - </li>
112   - {% endif %}
113   - <li>
114   - <a href="{% append_to_get page=page.previous_page_number %}">{{ page.number|add:-1 }}</a>
115   - </li>
116   - {% endif %}
117   -
118   - <li class="active">
119   - <a href="javascript:void(0);">{{ page.number }}</a>
120   - </li>
121   -
122   - {% if page.has_next %}
123   - <li>
124   - <a href="{% append_to_get page=page.next_page_number %}">{{ page.number|add:1 }}</a>
125   - </li>
126   - {% if page.next_page_number < page.paginator.num_pages %}
127   - <li>
128   - <a href="{% append_to_get page=page.next_page_number|add:1 %}">{{ page.number|add:2 }}</a>
129   - </li>
130   - {% endif %}
131   - {% endif %}
132   -
133   - <li {% if not page.has_next %}class="disabled"{% endif %}>
134   - <a href="{% if page.has_next %}{% append_to_get page=page.next_page_number %}{% else %}javascript:void(0);{% endif %}"><span class="glyphicon glyphicon-chevron-right small-icon"></span></a>
135   - </li>
136   -
137   - <li {% if page.number == page.paginator.num_pages %}class="disabled"{% endif %}>
138   - <a href="{% if page.number == page.paginator.num_pages %}javascript:void(0);{% else %}{% append_to_get page=page.paginator.num_pages %}{% endif %}"><span class="glyphicon glyphicon-chevron-right small-icon"></span><span class="glyphicon glyphicon-chevron-right small-icon"></span></a>
139   - </li>
140   -
141   - </ul>
  98 + <div id="pagination-block">
  99 + <div class="row">
  100 + <div class="col-md-2">
  101 + <div class="pull-left">
  102 + <ul class="pagination">
  103 + <li {% if not page.has_previous %}class="disabled"{% endif %}>
  104 + <span class="previous_page">
  105 + <a href="{% if page.has_previous %}{% append_to_get page=page.previous_page_number %}{% else %}javascript:void(0);{% endif %}"><span class="previous-arrow">« </span>Anterior</a>
  106 + </span>
  107 + </li>
  108 + </ul>
  109 + </div>
  110 + </div>
  111 +
  112 + <div class="col-md-8">
  113 + <div id="pagination-center" class="text-center">
  114 + {% if page.has_previous %}
  115 + <ul class="pagination">
  116 + {% if page.previous_page_number > 1 %}
  117 + <li>
  118 + <a href="{% append_to_get page=page.previous_page_number|add:-1 %}">{{ page.number|add:-2 }}</a>
  119 + </li>
  120 + </ul>
  121 + <ul class="pagination">
  122 + {% endif %}
  123 + <li>
  124 + <a href="{% append_to_get page=page.previous_page_number %}">{{ page.number|add:-1 }}</a>
  125 + </li>
  126 + </ul>
  127 + {% endif %}
  128 +
  129 + <ul class="pagination">
  130 + <li class="active">
  131 + <a href="javascript:void(0);">{{ page.number }}</a>
  132 + </li>
  133 + </ul>
  134 +
  135 + {% if page.has_next %}
  136 + <ul class="pagination">
  137 + <li>
  138 + <a href="{% append_to_get page=page.next_page_number %}">{{ page.number|add:1 }}</a>
  139 + </li>
  140 + {% if page.next_page_number < page.paginator.num_pages %}
  141 + </ul>
  142 + <ul class="pagination">
  143 + <li>
  144 + <a href="{% append_to_get page=page.next_page_number|add:1 %}">{{ page.number|add:2 }}</a>
  145 + </li>
  146 + {% endif %}
  147 + </ul>
  148 + {% endif %}
  149 + </div>
  150 + </div>
  151 +
  152 + <div class="col-md-2">
  153 + <div class="pull-right">
  154 + <ul class="pagination">
  155 + <li {% if not page.has_next %}class="disabled"{% endif %}>
  156 + <span class="next_page">
  157 + <a href="{% if page.has_next %}{% append_to_get page=page.next_page_number %}{% else %}javascript:void(0);{% endif %}">Próximo<span class="next-arrow"> »</span></a>
  158 + </span>
  159 + </li>
  160 + </ul>
  161 + </div>
  162 + </div>
  163 + </div>
142 164 </div>
143 165 {% endif %}
144 166 </div>
145   -
146 167 </div>
147 168 </div>
148 169 {% endblock main-content %}
... ...