add #followers modal with brief explanation of current inability of obtaining of complete followers list

css/style.css

@@ -768,6 +768,56 @@ textarea.splited-post {
 .post .show-more:before {
     content: '💭';
 }
+
+/* FIXME need to rework and replace all .twister-user to get same vis */
+.twister-peer {
+    margin: 0;
+    min-height: 72px;
+    padding: 4px;
+    border-bottom: solid 1px rgba(69, 71, 77, .1);
+    border-top: solid 1px rgba(69, 71, 77, .1);
+}
+
+.twister-peer + .twister-peer {
+    border-top: none;
+}
+
+.twister-peer .avatar {
+    float: left;
+    width: 48px;
+    height: 48px;
+    overflow: hidden;
+    margin: 4px;
+}
+
+.twister-peer .avatar img {
+    width: 48px;
+    height: auto;
+    border-radius: 16%;
+}
+
+.twister-peer .name, .twister-peer .alias {
+    color: #E34F42;
+    display: inline-block;
+}
+
+.twister-peer .name {
+    font-weight: 600;
+}
+
+.twister-peer .avatar:hover, .twister-peer .name:hover, .twister-peer .alias:hover {
+    cursor: pointer;
+}
+
+.twister-peer .bio {
+    text-align: center;
+    padding: 4px;
+}
+
+.twister-peer .bio a {
+    color: #E34F42;
+}
+
 /***********************************
 ********************* WHO TO FOLLOW
 ***********************************/

home.html

@@ -118,7 +118,7 @@
         <ul class="module profile-data">
           <li><a href="#" class="open-profile-modal"><span class="posts-count">&nbsp;</span><span class="label">Posts</span></a></li>
           <li><a href="#following" class="open-following-page"><span class="following-count">&nbsp;</span><span class="label">Following</span></a></li>
-          <li><a href="#" class="open-followers"><span class="followers-count">&nbsp;</span><span class="label">Followers</span> *</a></li>
+          <li><a class="open-followers"><span class="followers-count"></span><span class="label">Followers</span> *</a></li>
         </ul>
 
         <div class="post-area">
@@ -683,6 +683,23 @@
     </div>
     <!-- MODAL DE HASHTAGS END -->
 
+    <div id="template-followers-list">
+        <ol class="followers-list">
+            <div class="loading-roller">
+                <div></div>
+            </div>
+        </ol>
+    </div>
+
+    <div id="template-followers-peer">
+        <li class="twister-peer">
+            <div class="avatar"><img src="img/grayed_avatar_placeholder_24.png" alt="avatar" /></div>
+            <div class="name"></div>
+            <div class="alias"></div>
+            <div class="bio"></div>
+        </li>
+    </div>
+
     <div id="template-following-list">
         <ol class="following-list">
             <div class="loading-roller">

js/interface_common.js

@@ -544,6 +544,46 @@ function openMentionsModalHandler(peerAlias) {
     }
 }
 
+function openFollowersModal(peerAlias) {
+    if (!peerAlias && !defaultScreenName) {
+        alertPopup({
+            //txtTitle: polyglot.t(''), add some title (not 'error', please) or just KISS
+            txtMessage: polyglot.t('You don\'t have any followers because you are not logged in.')
+        });
+        history.back();
+        return;
+    }
+
+    var modal = openModal({
+        classAdd: 'followers-modal',
+        content: twister.tmpl.followersList.clone(true),
+        title: polyglot.t('Followers')
+    });
+
+    appendKnownFollowersToElem(modal.content.find('ol'));
+
+    alertPopup({txtMessage: '* ' + polyglot.t('warn_followers_not_all')});
+}
+
+function appendKnownFollowersToElem(list) {
+    for (var i = 0; i < twisterFollowingO.knownFollowers.length; i++)
+        addPeerToFollowersList(list, twisterFollowingO.knownFollowers[i]);
+
+    $.MAL.listLoaded(list);
+}
+
+function addPeerToFollowersList(list, peerAlias) {
+    var item = twister.tmpl.followersPeer.clone(true).attr('data-peer-alias', peerAlias);
+
+    item.find('.alias').text('@' + peerAlias);
+    item.find('.alias, .avatar, .name').on('mouseup', {route: $.MAL.userUrl(peerAlias)}, routeOnClick);
+    getAvatar(peerAlias, item.find('.avatar img'));
+    getFullname(peerAlias, item.find('.name'));
+    getBioToElem(peerAlias, item.find('.bio'));
+
+    item.prependTo(list);
+}
+
 function openFollowingModal(peerAlias) {
     if (!peerAlias || peerAlias === defaultScreenName) {
         if (!defaultScreenName) {
@@ -838,6 +878,8 @@ function loadModalFromHash() {
         }
     } else if (hashstring === '#directmessages')
         openCommonDMsModal();
+    else if (hashstring === '#followers')
+        openFollowersModal();
     else if (hashstring === '#following')
         openFollowingModal();
     else if (hashstring === '#groupmessages')
@@ -2040,6 +2082,8 @@ function initInterfaceCommon() {
         closePrompt(event);
     });
 
+    $('.open-followers').on('mouseup', {route: '#followers'}, routeOnClick);
+
     $('.post-text').on('click', 'a', muteEvent);
     $('.post-reply').on('click', postReplyClick);
     $('.post-propagate').on('click', reTwistPopup);
@@ -2210,6 +2254,8 @@ function setTextcompleteDropdownListPos(position) {
 
 $(document).ready(function () {
     twister.html.blanka.appendTo('body').hide();
+    twister.tmpl.followersList = extractTemplate('#template-followers-list');
+    twister.tmpl.followersPeer = extractTemplate('#template-followers-peer');
     twister.tmpl.followingList = extractTemplate('#template-following-list');
     twister.tmpl.followingUser = extractTemplate('#template-following-user');
     twister.tmpl.commonDMsListItem = extractTemplate('#template-direct-messages-list-item')

js/interface_home.js

@@ -60,8 +60,6 @@ var InterfaceFunctions = function() {
             $miniProfile.find("a.open-following-page").attr("href","#");
             $miniProfile.find("a.open-following-page").bind("click", function()
             { alert(polyglot.t("You are not following anyone because you are not logged in."))} );
-            $miniProfile.find("a.open-followers").bind("click", function()
-            { alert(polyglot.t("You don't have any followers because you are not logged in."))} );
             $(".dropdown-menu-following").attr("href","#");
             $(".dropdown-menu-following").bind("click", function()
             { alert(polyglot.t("You are not following anyone because you are not logged in."))} );

js/interface_localization.js

@@ -128,6 +128,9 @@ if(preferredLanguage == "en"){
       "nobody": "nobody", // used to promote a post without attaching the user
       "Not available": "Not available", // username is not available
       "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.",
+      "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n"
+        + "The counter indicates only a number of known peers sharing your torrent.\n"
+        + "In the list below are included ones, mostly, who are followed by you.",
       "notify_desktop_error": "Twister cannot perform desktop notification: unknown error occured.",
       "notify_desktop_perm_denied": "Twister cannot perform desktop notification: permission denied.\n\nIf you want to get notifications, allow them for %{this_domain} in settings of your browser.",
       "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.",
@@ -451,6 +454,9 @@ if(preferredLanguage == "es"){
       "nobody": "Nadie", // used to promote a post without attaching the user
       "Not available": "No disponible", // username is not available
       "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.",
+      "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n"
+        + "The counter indicates only a number of known peers sharing your torrent.\n"
+        + "In the list below are included ones, mostly, who are followed by you.",
       "notify_desktop_error": "Twister cannot perform desktop notification: unknown error occured.",
       "notify_desktop_perm_denied": "Twister cannot perform desktop notification: permission denied.\n\nIf you want to get notifications, allow them for %{this_domain} in settings of your browser.",
       "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.",
@@ -759,6 +765,9 @@ if(preferredLanguage == "uk"){
       "nobody": "анонім", // used to promote a post without attaching the user
       "Not available": "Не доступне", // username is not available
       "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.",
+      "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n"
+        + "The counter indicates only a number of known peers sharing your torrent.\n"
+        + "In the list below are included ones, mostly, who are followed by you.",
       "notify_desktop_error": "Twister не може створити сповіщення: невідома помилка.",
       "notify_desktop_perm_denied": "Twister не може створити сповіщення на робочому столі: доступ обмежено.\n\nЯкщо ви бажаєте отримувати сповіщення, дозвольте їх виконання в налаштуваннях браузера для %{this_domain}.",
       "notify_desktop_test": "Є дещо новеньке у стрічці.",
@@ -1064,6 +1073,9 @@ if(preferredLanguage == "zh-CN"){
       "nobody": "无名", // used to promote a post without attaching the user
       "Not available": "用户名不可用", // username is not available
       "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.",
+      "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n"
+        + "The counter indicates only a number of known peers sharing your torrent.\n"
+        + "In the list below are included ones, mostly, who are followed by you.",
       "notify_desktop_error": "Twister 无法发出桌面提醒：发生未知错误。",
       "notify_desktop_perm_denied": "Twister 无法发出桌面提醒：权限被拒绝。\n\n如果你想收到提醒，请在你的浏览器设置中允许 %{this_domain} 发出提醒。",
       "notify_desktop_test": "我们都在用 Twister。\n欢迎你的加入。",
@@ -1387,6 +1399,9 @@ if(preferredLanguage == "nl"){
       "nobody": "nobody", // used to promote a post without attaching the user
       "Not available": "Niet beschikbaar", // username is not available
       "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.",
+      "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n"
+        + "The counter indicates only a number of known peers sharing your torrent.\n"
+        + "In the list below are included ones, mostly, who are followed by you.",
       "notify_desktop_error": "Twister cannot perform desktop notification: unknown error occured.",
       "notify_desktop_perm_denied": "Twister cannot perform desktop notification: permission denied.\n\nIf you want to get notifications, allow them for %{this_domain} in settings of your browser.",
       "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.",
@@ -1694,6 +1709,9 @@ if(preferredLanguage == "it"){
       "nobody": "nessuno", // used to promote a post without attaching the user
       "Not available": "Non disponibile", // username is not available
       "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.",
+      "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n"
+        + "The counter indicates only a number of known peers sharing your torrent.\n"
+        + "In the list below are included ones, mostly, who are followed by you.",
       "notify_desktop_error": "Twister cannot perform desktop notification: unknown error occured.",
       "notify_desktop_perm_denied": "Twister cannot perform desktop notification: permission denied.\n\nIf you want to get notifications, allow them for %{this_domain} in settings of your browser.",
       "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.",
@@ -1999,6 +2017,9 @@ if(preferredLanguage == "fr"){
       "nobody": "nobody", // used to promote a post without attaching the user
       "Not available": "Non disponible", // username is not available
       "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.",
+      "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n"
+        + "The counter indicates only a number of known peers sharing your torrent.\n"
+        + "In the list below are included ones, mostly, who are followed by you.",
       "notify_desktop_error": "Impossible d'afficher les notifications: une erreur inconnue est survenue.",
       "notify_desktop_perm_denied": "Impossible d'afficher les notifications: autorisation refusée.\n\nSi tu souhaites afficher les notifications, autorise le %{this_domain} dans les paramêtres de ton navigateur.",
       "notify_desktop_test": "All the twisters gonna twist.\nBienvenue à toi!",
@@ -2308,6 +2329,9 @@ if(preferredLanguage == "ru"){
        "nobody": "Анонимно", // used to promote a post without attaching the user
        "Not available": "Недоступно",
        "warn_following_not_any": "Пока что таки нет читаемых!\nПоди ж найди кого-нибудь да и подпишись.",
+       "warn_followers_not_all": "Пока что нет простого способа узнать список всех подписчиков.\n"
+         + "Счётчик показывает лишь количество известных пиров твоего торрента.\n"
+         + "В списке ниже включены те, главным образом, на кого подписан(а) ты сам(а).",
        "notify_desktop_error": "Твистер не может выполнить уведомление: произошла неизвестная ошибка.",
        "notify_desktop_perm_denied": "Твистер не может выполнить уведомление: разрешение не получено.\n\nЧтобы получать уведомления, разрешите их для %{this_domain} в настройках вашего браузера.",
        "notify_desktop_test": "Одна лягушка сказала:\n'если не буду квакать — лопну'.\nВы нужны нам, берегите себя.",
@@ -2620,6 +2644,9 @@ if(preferredLanguage == "de"){
       "nobody": "nobody", // used to promote a post without attaching the user
       "Not available": "Nicht verfügbar", // username is not available
       "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.",
+      "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n"
+        + "The counter indicates only a number of known peers sharing your torrent.\n"
+        + "In the list below are included ones, mostly, who are followed by you.",
       "notify_desktop_error": "Twister kann keine Desktop-Meldungen anzeigen: ein unbekannter Fehler trat auf.",
       "notify_desktop_perm_denied": "Twister kann keine Desktop-Meldungen anzeigen: Keine Berechtigung.\n\nWenn Du Meldungen angezeigt haben möchtest, erlaube sie für %{this_domain} in den Einstellungen Deines Browsers.",
       "notify_desktop_test": "All die Twisterer werden twisten..\nDu bist nun auch willkommen!",
@@ -2928,6 +2955,9 @@ if(preferredLanguage == "ja"){
       "nobody": "ナナシ", // used to promote a post without attaching the user
       "Not available": "使用中", // username is not available
       "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.",
+      "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n"
+        + "The counter indicates only a number of known peers sharing your torrent.\n"
+        + "In the list below are included ones, mostly, who are followed by you.",
       "notify_desktop_error": "Twister cannot perform desktop notification: unknown error occured.",
       "notify_desktop_perm_denied": "Twister cannot perform desktop notification: permission denied.\n\nIf you want to get notifications, allow them for %{this_domain} in settings of your browser.",
       "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.",
@@ -3233,6 +3263,9 @@ if(preferredLanguage == "pt-BR"){
       "nobody": "nobody", // used to promote a post without attaching the user
       "Not available": "Indisponível", // username is not available
       "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.",
+      "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n"
+        + "The counter indicates only a number of known peers sharing your torrent.\n"
+        + "In the list below are included ones, mostly, who are followed by you.",
       "notify_desktop_error": "Twister cannot perform desktop notification: unknown error occured.",
       "notify_desktop_perm_denied": "Twister cannot perform desktop notification: permission denied.\n\nIf you want to get notifications, allow them for %{this_domain} in settings of your browser.",
       "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.",
@@ -3542,6 +3575,9 @@ if(preferredLanguage == "tr"){
       "nobody": "hiçkimse", // used to promote a post without attaching the user
       "Not available": "Kullanılamaz", // username is not available
       "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.",
+      "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n"
+        + "The counter indicates only a number of known peers sharing your torrent.\n"
+        + "In the list below are included ones, mostly, who are followed by you.",
       "notify_desktop_error": "Twister masaüstü uyarısını gösterimiyor: bilimeyen bir hata oluştu.",
       "notify_desktop_perm_denied": "Twister masaüstü uyarısını gösteremiyor: yetkilendirme hatası.\n\nUyarıları almak istiyorsanız, tarayıcı ayarlarında %{this_domain} alan adı için izin veriniz.",
       "notify_desktop_test": "Kasırga her yanı saracak\nBu karnavala hoşgeldin!",
@@ -3848,6 +3884,9 @@ if(preferredLanguage == "cs"){
       "nobody": "nikdo", // used to promote a post without attaching the user
       "Not available": "Tuto přezdívku již někdo používá", // username is not available
       "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.",
+      "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n"
+        + "The counter indicates only a number of known peers sharing your torrent.\n"
+        + "In the list below are included ones, mostly, who are followed by you.",
       "notify_desktop_error": "Twisteru se nepodařilo zobrazit upozornění na ploše: došlo k neznámé chybě.",
       "notify_desktop_perm_denied": "Twisteru se nepodařilo zobrazit upozornění na ploše: přístup byl odepřen.\n\nPokud chcete používat upozornění na ploše, povolte je pro %{this_domain} v nastavení vašeho prohlížeče.",
       "notify_desktop_test": "Twister to umí pořádně roztočit.\nKaždý je tu vítán.",

js/mobile_abstract.js

@@ -73,6 +73,14 @@ var MAL = function()
             });
     };
 
+    this.listLoaded = function (list) {
+        if ($.hasOwnProperty('mobile')) {
+            $.mobile.hidePageLoadingMsg();
+            list.listview('refresh');
+        } else
+            list.find('.loading-roller').hide();
+    };
+
     this.followingListLoaded = function(followingList) {
         if ($.hasOwnProperty('mobile')) {
             $.mobile.hidePageLoadingMsg();

theme_calm/css/style.css

@@ -944,6 +944,64 @@ textarea.splited-post {
 .post .show-more:before {
     content: '💭';
 }
+
+/* FIXME need to rework and replace all .twister-user to get same vis */
+.twister-peer {
+    margin: 0;
+    min-height: 72px;
+    padding: 4px;
+    border-bottom: solid 1px rgba(69, 71, 77, .1);
+    border-top: solid 1px rgba(69, 71, 77, .1);
+}
+
+.twister-peer + .twister-peer {
+    border-top: none;
+}
+
+.twister-peer .avatar {
+    float: left;
+    width: 48px;
+    height: 48px;
+    overflow: hidden;
+    margin: 4px;
+}
+
+.twister-peer .avatar img {
+    width: 48px;
+    height: auto;
+    border-radius: 16%;
+}
+
+.twister-peer .name, .twister-peer .alias {
+    color: #768fCE;
+    display: inline-block;
+}
+
+.twister-peer .name {
+    font-weight: 600;
+}
+
+.twister-peer .avatar:hover, .twister-peer .name:hover, .twister-peer .alias:hover {
+    cursor: pointer;
+}
+
+.twister-peer .bio {
+    text-align: center;
+    padding: 4px;
+}
+
+.twister-peer .bio a {
+    font: italic 1.1em "Open Sans", sans-serif;
+    text-decoration: none;
+    color: #B46E67;
+    transition: all 200ms;
+}
+
+.twister-peer .bio a:hover {
+    color: #E18881;
+    opacity: .8;
+}
+
 /***********************************
 ********************* WHO TO FOLLOW
 ***********************************/

theme_nin/css/style.css

@@ -2084,6 +2084,63 @@ textarea.splited-post {
   color: #ff0000;
 }
 
+/* FIXME need to rework and replace all .twister-user to get same vis */
+.twister-peer {
+    margin: 0;
+    min-height: 72px;
+    padding: 4px;
+    border-bottom: solid 1px rgba(69, 71, 77, .1);
+    border-top: solid 1px rgba(69, 71, 77, .1);
+    background: #FFF;
+}
+
+.twister-peer + .twister-peer {
+    border-top: none;
+}
+
+.twister-peer .avatar {
+    float: left;
+    width: 48px;
+    height: 48px;
+    overflow: hidden;
+    margin: 4px;
+}
+
+.twister-peer .avatar img {
+    width: 48px;
+    height: auto;
+}
+
+.twister-peer .name {
+    display: inline-block;
+}
+
+.twister-peer .name:hover {
+    color: #AAA;
+}
+
+.twister-peer .alias {
+    color: #AAA;
+    display: inline-block;
+}
+
+.twister-peer .alias:hover {
+    color: #B4C669;
+}
+
+.twister-peer .name {
+    font-weight: 600;
+}
+
+.twister-peer .avatar:hover, .twister-peer .name:hover, .twister-peer .alias:hover {
+    cursor: pointer;
+}
+
+.twister-peer .bio {
+    text-align: center;
+    padding: 4px;
+}
+
 /******** WHO TO FOLLOW ********/
 
 /* line 411, ../sass/style.sass */
@@ -2981,6 +3038,20 @@ ol.toptrends-list a:hover {
   padding: 0;
 }
 
+/*************************************
+*********** FOLLOWERS MODAL **********
+**************************************/
+
+.modal-wrapper.followers-modal {
+  width: 520px;
+  height: 720px;
+  margin: -360px 0 0 -260px;
+}
+
+.followers-modal .modal-content {
+  padding: 0;
+}
+
 /****** FOLLOWING MODAL****** */
 /* line 920, ../sass/style.sass */
 .modal-wrapper.following-modal {