This is an automated email from the ASF dual-hosted git repository.
humbedooh pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-ponymail-foal.git
The following commit(s) were added to refs/heads/master by this push:
new 1bb3e18 If we have lots of lists (>25), fall back to old style
phonebook on wide displays
1bb3e18 is described below
commit 1bb3e18ca48efc7016309e2d496565cf7a396f80
Author: Daniel Gruno <[email protected]>
AuthorDate: Sun Sep 19 13:15:03 2021 -0500
If we have lots of lists (>25), fall back to old style phonebook on wide
displays
---
webui/css/scaffolding.css | 24 +++++++++++++++++++++++
webui/index.html | 14 ++++++++------
webui/js/source/list-index.js | 45 +++++++++++++++++++++++++++++++------------
3 files changed, 65 insertions(+), 18 deletions(-)
diff --git a/webui/css/scaffolding.css b/webui/css/scaffolding.css
index a261c99..ed28d63 100644
--- a/webui/css/scaffolding.css
+++ b/webui/css/scaffolding.css
@@ -694,11 +694,35 @@ a.dropdown-toggle {
}
}
+
+/* Show wide list index on desktop, narrow on mobile */
+#list_index_child_wide {
+ display: block;
+}
+#list_index_child {
+ display: none;
+}
+
+@media only screen and (max-width: 800px) {
+ #list_index_child_wide {
+ display: none;
+ }
+ #list_index_child {
+ display: block;
+ }
+}
+
+#list_index_wide_lists {
+ list-style: none;
+}
+
/* Hide word cloud on short displays */
@media only screen and (max-height: 700px) {
#sidebar_wordcloud {
display: none;
}
+
+
}
.listview_email_labels .label {
diff --git a/webui/index.html b/webui/index.html
index cc57204..598c629 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -43,16 +43,18 @@ the License. -->
<h2>Mail Archives</h2>
<h4>Pick a list domain to start browsing emails:</h4>
</div>
- <div id="list_picker" style="margin: 0 auto;">
-
- <ul id="list_picker_ul">
-
- </ul>
- </div>
+
<div id="list_index"style="margin: 0 auto;">
<div id="list_index_child" style="margin: 0 auto; max-width: 400px;">
</div>
+ <div id="list_index_child_wide" style="margin: 0 auto; max-width:
780px;">
+ <div id="list_picker" style="margin: 0 auto;">
+ <ul id="list_picker_ul">
+ </ul>
+ </div>
+ <ul id="list_index_wide_lists"></ul>
+ </div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";></script>
diff --git a/webui/js/source/list-index.js b/webui/js/source/list-index.js
index d2e36b6..ad782dd 100644
--- a/webui/js/source/list-index.js
+++ b/webui/js/source/list-index.js
@@ -15,40 +15,52 @@
limitations under the License.
*/
+let LOTS_OF_LISTS = 25; // Beyond 25 list domains and we start using the old
phonebook.
let list_json = {}
function list_index(state, json) {
if (json) {
list_json = json;
}
+ let letter = 'a';
let lists = document.getElementById('list_picker_ul');
if (state && state.letter) {
- let tab = undefined;
- let tabs = lists.childNodes;
- for (var i = 0; i < tabs.length; i++) {
- let xtab = tabs[i];
- if ((xtab.innerText == state.to || xtab.getAttribute('data-list')
== state.to)) {
- tab = xtab;
- tab.setAttribute("class", 'active');
- } else {
+ letter = state.letter;
+ for (let xtab of lists.childNodes) {
+ if (xtab.innerText == state.letter) {
+ xtab.setAttribute("class", 'active');
+ } else if (xtab.setAttribute) {
xtab.setAttribute("class", "");
}
-
}
- return;
} else {
- let letters = 'abcdefghijklmnopqrstuvwxyz*';
+ let letters = 'abcdefghijklmnopqrstuvwxyz';
for (var i = 0; i < letters.length; i++) {
let letter = letters[i].toUpperCase();
let li = new HTML('li', {
- onclick: 'switch_index({letter: "%s"});'.format(letter),
+ onclick: 'list_index({letter: "%s"});'.format(letter),
class: (letter == 'A') ? 'active' : null
}, letter);
lists.inject(li);
}
}
+
+ let list_ul = document.getElementById('list_index_wide_lists');
+ list_ul.textContent = "";
+ for (let domain_name in list_json.lists) {
+ if (domain_name.toLowerCase().startsWith(letter.toLowerCase())) {
+ console.log(domain_name);
+ let li = new HTML('li', {});
+ let a = new HTML('a', {
+ href: 'list.html?%s'.format(domain_name)
+ }, domain_name);
+ li.inject(a);
+ list_ul.inject(li);
+ }
+ }
}
+
let preferred_lists = ['dev', 'users'];
let preferred_no_lists = ['security'];
@@ -86,6 +98,15 @@ function list_index_onepage(state, json) {
obj.inject(['- ', a]);
obj.inject(new HTML('br'));
}
+ if (domains.length > LOTS_OF_LISTS) {
+ list_index(state, json);
+ } else {
+ let wide_obj = document.getElementById('list_index_child_wide');
+ let new_obj = obj.cloneNode(true);
+ new_obj.setAttribute("id", "list_index_child_wide");
+ wide_obj.replaceWith(new_obj);
+ console.log(new_obj);
+ }
}
function prime_list_index() {
