Merge pull request #231 from slr/tasty-fixes-2

bunch of fixes

css/style.css

@@ -124,10 +124,12 @@ button.follow, button.unfollow, .following-list button.private {
     background: none;
     border: solid 1px rgba( 0, 0, 0, .2 );
     padding: 3px 15px;
+    font-size: 12px;
 }
 
 .following-list .public-following {
     padding: 4px 16px;
+    font-size: 12px;
 }
 
 .following-list .public-following:hover {
@@ -143,9 +145,9 @@ button.follow:hover, button.unfollow:hover, .following-list button.private:hover
 }
 
 .follow-suggestions .follow, .follow-suggestions .unfollow {
-    display: block;
-    position: relative;
-    left: 50%;
+    display: inline-block;
+    float: right;
+    margin-right: 10px;
 }
 
 /*************************************
@@ -524,9 +526,8 @@ button.follow:hover, button.unfollow:hover, .following-list button.private:hover
 {
     color: #e34f42;
     cursor: pointer;
-    font-size: 14px;
+    font-size: 12px;
     display: inline-block;
-    width: 70px;
     transition: all .2s linear;
 }
 .mini-profile-actions ul
@@ -700,7 +701,8 @@ textarea.splited-post {
 .twister-user
 {
     clear: both;
-    padding-bottom: 10px;
+    overflow: hidden;
+    padding-bottom: 4px;
     margin-top: 4px;
     border-bottom: solid 1px rgba( 69, 71, 77, .1 );
     border-top: solid 1px rgba( 69, 71, 77, .1 );
@@ -1173,14 +1175,14 @@ ol.toptrends-list {
     border: solid 1px rgba( 69, 71, 77, .05 );
     padding: 10px;
 }
-.singleBlock h2
+.singleBlock h2, .header-bold
 {
     font-weight: bold;
     line-height: 40px;
     color: rgba( 255, 255, 255, 1 );
     font-variant: small-caps;
     border-bottom: solid 1px rgba( 69, 71, 77, .1 );
-    margin: 15px 0 0 0;
+    margin: 0px 0px 12px 0px;
     padding-left: 5px;
     background: #e34f42;
 }
@@ -1248,9 +1250,81 @@ ol.toptrends-list {
     float: right;
     margin-right: 18px;
 }
+
+/*************************************
+************* LOGIN PAGE *************
+**************************************/
+
+.login .header-bold {
+    display: block;
+    width: 720px;
+    margin: 0px auto 12px auto;
+}
+
+.login .module {
+    display: block;
+    width: 720px;
+    padding: 32px 40px;
+    margin: 8px auto;
+    background: #fff;
+}
+
+.login .module p {
+    margin-bottom: 5px;
+}
+
+.login .module input {
+    padding: 5px 10px;
+    background: #f3f3f3;
+    border: solid 1px #dcdcdc;
+    transition: box-shadow 0.3s, border 0.3s;
+    font-size: 14px;
+}
+
+.login .module input:focus, .login .module select:focus {
+    background: #fff;
+    transition: background-color 100ms linear;
+    border: solid 1px rgba( 227, 79, 66, .5 );
+    box-shadow: 0 0 10px rgba(0, 0, 0, .3 );
+}
+
+.login .module select {
+    height: 30px;
+    padding: 3px 30px 3px 10px;
+    margin: 0;
+    border: 1px solid #ccc;
+    font-size: 14px;
+}
+
+.login .module span.availability {
+    margin-left: 10px;
+    color: #45474d;
+}
+
+.with-nickname, .import-secret-key, .create-user {
+    margin-top: 10px;
+}
+
+.login .module:nth-child(2) div ,
+.login .module:nth-child(3) div:nth-child(2),
+.login .secret-key-import,
+.login .username-import {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    margin-left: 16px;
+}
+
+.login .create-user,
+.login .import-secret-key {
+    display: block;
+    margin-left: auto;
+    margin-right: 16px;
+}
+
 /*************************************
-**************************** POPUP MODAL
+************* POPUP MODAL ************
 **************************************/
+
 .modal-blackout
 {
     position: fixed;
@@ -1303,7 +1377,7 @@ ol.toptrends-list {
     position: absolute;
     right: 0;
     top: 0;
-    padding: 3px 10px;
+    padding: 1px 10px;
     cursor: pointer;
     color: rgba( 255, 255, 255, .7 );
     font-weight: bold;
@@ -1320,7 +1394,7 @@ ol.toptrends-list {
     position: absolute;
     right: 30px;
     top: 0;
-    padding: 3px 10px;
+    padding: 1px 10px;
     cursor: pointer;
     color: rgba( 255, 255, 255, .7 );
     font-weight: bold;
@@ -1662,8 +1736,9 @@ ol.toptrends-list {
 }
 
 /*************************************
-****************** LOADER ************
+**************** LOADER **************
 **************************************/
+
 .postboard-loading
 {
     text-align: right;
@@ -1780,26 +1855,47 @@ ol.toptrends-list {
 }
 
 /*************************************
-****************** OPTIONS ***********
+**************** OPTIONS *************
 **************************************/
 
 .options .module
 {
-    margin: 5px;
-    padding: 15px;
+    display: block;
+    width: 720px;
+    padding: 32px 40px;
+    margin: 8px auto;
+    background: #fff;
 }
 
 .options .container
 {
-    margin: 5px 0px 5px 10px;
+    margin: 8px 0px 8px 16px;
+}
+
+.options .label {
+    font-size: 13px;
 }
 
 .options .label-h {
-  font-weight: 700;
+    font-weight: bold;
+    font-size: 14px;
 }
 
-.options .module label {
-    font: 12px "Open Sans", sans-serif;
+.options button, .options input, .options select {
+    font-size: 13px;
+}
+
+.options .module input, .options .module select {
+    background: #f3f3f3;
+    border: solid 1px #ccc;
+    transition: box-shadow 0.3s, border 0.3s;
+}
+
+.options .module input:focus, .options .module select:focus {
+    background: #fff;
+    transition: background-color 100ms linear;
+    border: solid 1px rgba( 227, 79, 66, .5 );
+    box-shadow: 0 0 10px rgba(0, 0, 0, .3 );
 }
 
 .volValue {
@@ -1819,7 +1915,20 @@ ol.toptrends-list {
     -ms-transition: height 1s linear;
 }
 
-/* Following page */
+/*************************************
+*********** FOLLOWING PAGE ***********
+**************************************/
+
+.following .postboard-loading
+{
+    text-align: center;
+}
+
+.following .header-bold {
+    display: block;
+    width: 100%;
+    margin: 0px auto 12px auto;
+}
 
 .following-list
 {
@@ -1828,11 +1937,11 @@ ol.toptrends-list {
 
 .following ol.following-list > li{
     width: 425px;
-    height: 150px;
+    height: 160px;
     margin: 5px;
     padding: 8px;
     float: left;
-    border: 0;
+    border: solid 1px rgba( 69, 71, 77, .1 );
     background: #fff;
 }
 
@@ -1841,21 +1950,32 @@ ol.toptrends-list {
 }
 
 .following ol.following-list > li:hover{
-    background: #fefef1;
+    border: solid 1px rgba( 227, 79, 66, .5 );
+}
+
+.following-list .mini-screen-name {
+    position: absolute;
+    top: 32px;
 }
 
 .following-list .following-config
 {
+    width: 100%;
     position: absolute;
-    left: 30%;
-    top: 69px;
+    top: 64px;
+    text-align: center;
+}
+
+.following-list .following-config button
+{
+    display: inline-block;
 }
 
 .following-list .mini-profile-actions
 {
     position: absolute;
     top: 0;
-    right: 0;
+    right: 8px;
     z-index: 10;
 }
 
@@ -1864,8 +1984,8 @@ ol.toptrends-list {
     font: 12px "Open Sans", sans-serif;
     display: block;
     position: absolute;
-    top: 110px;
-    right: 10px;
+    top: 120px;
+    right: 8px;
 }
 
 /* Autocomplite*/

following.html

@@ -146,7 +146,7 @@
 
   <!-- LADO ESQUERDO DE MÓDULOS INIT --> 
     <div class="following">
-      <h2><span>Following</span></h2>
+      <h2 class="header-bold"> Following </h2>
 
       <div class="postboard-loading" style="display: none;">
             <div></div>

js/interface_common.js

@@ -48,7 +48,7 @@ function closeModalHandler($this)
 
     $modalWindows.fadeOut( "fast", function()
     {
-        $modalWindows.detach();
+        $modalWindows.remove();
     });
     $body.css({
         "overflow": "auto",
@@ -86,7 +86,7 @@ function closePrompt()
 
     $modalWindows.fadeOut( "fast", function()
     {
-        $modalWindows.detach();
+        $modalWindows.remove();
     });
     $body.css({
         "overflow": "auto",
@@ -590,7 +590,7 @@ function toggleFollowButton(username, toggleUnfollow, bindFunc) {
             .unbind("click")
             .bind("click",
                 (function(e) {
-                    userClickFollow;
+                    userClickFollow(e);
 
                     if (this.bindFunc)
                         this.bindFunc;
@@ -855,9 +855,8 @@ function replyTextKeypress(e) {
                     tweetAction.click();
                 }
             }
-        }else if( !$.Options.keyEnterToSend() ){
+        } else if( !$.Options.keyEnterToSend() ){
             if (e.keyCode === 13 && (e.metaKey || e.ctrlKey)) {
-
                 $this.val($this.val().trim());
                 if( !tweetAction.hasClass("disabled") ) {
                     tweetAction.click();
@@ -1367,7 +1366,6 @@ var postSubmit = function(e, oldLastPostId)
     if($this.closest('.post-area,.post-reply-content')){
         $('.post-area-new').removeClass('open').find('textarea').blur();
     };
-    setTimeout('requestTimelineUpdate("latest",postsPerRefresh,followingUsers,promotedPostsOnly)', 1000);
     $replyText.data("unicodeConversionStack", []);
     $replyText.data("disabledUnicodeRules", []);
 }
@@ -1448,13 +1446,13 @@ function replaceDashboards() {
         $('.wrapper').addClass('w1200');
         $('.userMenu').addClass('w1200');
         var wf = $('.module.who-to-follow');
-        wf.remove();
+        wf.detach();
         wf.appendTo($('.dashboard.right'));
     } else if ($(window).width() < 1200 && $('.wrapper').hasClass('w1200')) {
         $('.wrapper').removeClass('w1200');
         $('.userMenu').removeClass('w1200');
         var wf = $('.module.who-to-follow');
-        wf.remove();
+        wf.detach();
         $('.module.mini-profile').after(wf);
     }
 
@@ -1523,6 +1521,7 @@ function initInterfaceCommon() {
     $( ".mentions-from-user").bind( "click", openMentionsModal );
 
     replaceDashboards();
+    $( window ).resize(replaceDashboards);
 
     $('.tox-ctc').on('click', function(){
         window.prompt(polyglot.t('copy_to_clipboard'), $(this).attr('data'))

js/interface_home.js

@@ -14,11 +14,19 @@ var InterfaceFunctions = function()
     this.init = function()
     {
         $( ".wrapper .postboard-news").click(function() {
-            requestTimelineUpdate("latest",postsPerRefresh,followingUsers,promotedPostsOnly);});
+            var newPosts = parseInt($(".userMenu .menu-news").text());
+            if (!newPosts)
+                newPosts = postsPerRefresh;
+            requestTimelineUpdate("latest",newPosts,followingUsers,promotedPostsOnly);
+        });
 
         // Add refresh posts for home link in menu
         $( ".userMenu-home.current a").click(function() {
-            requestTimelineUpdate("latest",postsPerRefresh,followingUsers,promotedPostsOnly);});
+            var newPosts = parseInt($(".userMenu .menu-news").text());
+            if (!newPosts)
+                newPosts = postsPerRefresh;
+            requestTimelineUpdate("latest",newPosts,followingUsers,promotedPostsOnly);
+        });
 
         $( ".promoted-posts-only").click(function() {
             promotedPostsOnly = !promotedPostsOnly;
@@ -139,6 +147,11 @@ var InterfaceFunctions = function()
                 })
                 .on("eventUnfollow", function(e, user) {
                     $(".following-count").text(followingUsers.length-1);
+                    $('.wrapper .postboard .post').each( function() {
+                        if (($(this).find('[data-screen-name="'+user+'"]').length && !$(this).find(".post-retransmited-by").text())
+                        || $(this).find(".post-retransmited-by").text() == '@'+user)
+                            $( this ).remove();
+                    });
                 });
         }
     }
@@ -149,7 +162,6 @@ var InterfaceFunctions = function()
 //***********************************************
 var interfaceFunctions = new InterfaceFunctions;
 $( document ).ready( interfaceFunctions.init );
-$( window ).resize(replaceDashboards);
 
 //função no window que fixa o header das postagens
 function fixDiv()

js/mobile_abstract.js

@@ -104,9 +104,9 @@ var MAL = function()
                 newTweetsBarMenu.addClass("show");
 
                 if ($.Options.getShowDesktopNotifPostsOpt() === 'enable') {
-                    this.showDesktopNotif(false, polyglot.t('You got')+' '+polyglot.t("new_posts", newPosts)+' '+polyglot.t('in postboard')+'.', false,'twister_notification_new_posts', $.Options.getShowDesktopNotifPostsTimerOpt(), function() {
-                            requestTimelineUpdate("latest",postsPerRefresh,followingUsers,promotedPostsOnly);
-                        }, false)
+                    this.showDesktopNotif(false, polyglot.t('You got')+' '+polyglot.t('new_posts', newPosts)+' '+polyglot.t('in postboard')+'.', false,'twister_notification_new_posts', $.Options.getShowDesktopNotifPostsTimerOpt(), (function() {
+                            requestTimelineUpdate('latest',this,followingUsers,promotedPostsOnly);
+                        }).bind(newPosts), false)
                 }
             } else {
                 newTweetsBar.hide();

js/twister_actions.js

@@ -224,7 +224,6 @@ function requestPostRecursively(containerToAppend,username,resource,count,useGet
     }
 }
 
-
 function newPostMsg(msg, $postOrig) {
     if( lastPostId != undefined ) {
         var params = [defaultScreenName, lastPostId + 1, msg]
@@ -236,6 +235,7 @@ function newPostMsg(msg, $postOrig) {
                    function(arg, ret) { incLastPostId(); }, null,
                    function(arg, ret) { var msg = ("message" in ret) ? ret.message : ret;
                                         alert(polyglot.t("ajax_error", { error: msg })); }, null);
+        setTimeout('requestTimelineUpdate("latest",1,["'+defaultScreenName+'"],promotedPostsOnly)', 1000);
     } else {
         alert(polyglot.t("Internal error: lastPostId unknown (following yourself may fix!)"));
     }
@@ -256,7 +256,7 @@ function newRtMsg($postOrig) {
                    function(arg, ret) { incLastPostId(); }, null,
                    function(arg, ret) { var msg = ("message" in ret) ? ret.message : ret;
                                         alert(polyglot.t("ajax_error", { error: msg })); }, null);
-        setTimeout('requestTimelineUpdate("latest",postsPerRefresh,followingUsers,promotedPostsOnly)', 1000);
+        setTimeout('requestTimelineUpdate("latest",1,["'+defaultScreenName+'"],promotedPostsOnly)', 1000);
     } else {
         alert(polyglot.t("Internal error: lastPostId unknown (following yourself may fix!)"));
     }

js/twister_following.js

@@ -86,11 +86,17 @@ TwisterFollowing.prototype = {
             //activate updating for only one user...
             i = followingUsers.indexOf(username);
 
-            if (i > -1)
+            if (i > -1) {
                 oneshot = true;
-            else if (typeof(this.followingsFollowings[username]) !== 'undefined') {
-                delete this.followingsFollowings[username];
-                this.save();
+            } else {
+                if (typeof(this.followingsFollowings[username]) !== 'undefined') {
+                    delete this.followingsFollowings[username];
+                    this.save();
+                }
+                if (typeof _idTrackerMap !== 'undefined' && username in _idTrackerMap)
+                   delete _idTrackerMap[username];
+                if (typeof _lastHaveMap !== 'undefined' && username in _lastHaveMap)
+                   delete _lastHaveMap[username];
                 return;
             }
         }
@@ -105,6 +111,17 @@ TwisterFollowing.prototype = {
         if (updated)
             this.save();
 
+        if (typeof _idTrackerMap !== 'undefined')
+            for (var user in _idTrackerMap) {
+                if (followingUsers.indexOf(user) < 0)
+                    delete _idTrackerMap[user];
+            }
+        if (typeof _lastHaveMap !== 'undefined')
+            for (var user in _lastHaveMap) {
+                if (followingUsers.indexOf(user) < 0)
+                    delete _lastHaveMap[user];
+            }
+
         for (; i < followingUsers.length; i++) {
             var ctime = new Date().getTime() / 1000;
 
@@ -351,6 +368,7 @@ function updateFollowing(cbFunc, cbArg) {
 // it is safe to call this even if username is already in followingUsers.
 // may also be used to set/clear publicFollow.
 function follow(user, publicFollow, cbFunc, cbArg) {
+    //console.log('we are following @'+user);
     if( followingUsers.indexOf(user) < 0 ) {
         followingUsers.push(user);
         twisterFollowingO.update(user);
@@ -365,6 +383,7 @@ function follow(user, publicFollow, cbFunc, cbArg) {
 
 // unfollow a single user
 function unfollow(user, cbFunc, cbArg) {
+    //console.log('we are not following @'+user+' anymore');
     var i = followingUsers.indexOf(user);
     if( i >= 0 ) {
         followingUsers.splice(i,1);
@@ -681,8 +700,7 @@ function userClickFollow(e) {
     e.stopPropagation();
     e.preventDefault();
 
-    var $this = $(this);
-    var $userInfo = $this.closest("[data-screen-name]");
+    var $userInfo = $(e.target).closest("[data-screen-name]");
     var username = $userInfo.attr("data-screen-name");
 
     if(!defaultScreenName)

js/twister_newmsgs.js

@@ -98,10 +98,12 @@ function requestMentionsCount() {
     if( _newMentionsUpdated ) {
         _newMentionsUpdated = false;
 
-        $.MAL.soundNotifyMentions();
+        if ( _newMentions ) {
+            $.MAL.soundNotifyMentions();
 
-        if ($.Options.getShowDesktopNotifMentionsOpt() === 'enable') {
-            $.MAL.showDesktopNotif(false, polyglot.t('You got')+' '+polyglot.t('new_mentions', _newMentions)+'.', false,'twister_notification_new_mentions', $.Options.getShowDesktopNotifMentionsTimerOpt(), function(){$.MAL.showMentions(defaultScreenName)}, false)
+            if ($.Options.getShowDesktopNotifMentionsOpt() === 'enable') {
+                $.MAL.showDesktopNotif(false, polyglot.t('You got')+' '+polyglot.t('new_mentions', _newMentions)+'.', false,'twister_notification_new_mentions', $.Options.getShowDesktopNotifMentionsTimerOpt(), function(){$.MAL.showMentions(defaultScreenName)}, false)
+            }
         }
     }
 

js/twister_timeline.js

@@ -79,6 +79,7 @@ function requestObj(users, mode, count, getspam)
     this.mode = mode; // 'latest', 'latestFirstTime' or 'older'
     this.count = count;
     this.getspam = getspam;
+    this.updateReportNewPosts = (users.toString() === defaultScreenName || mode === 'older') ? false : true;
 
     // getRequest method returns the list parameter expected by getposts rpc
     this.getRequest = function() {
@@ -111,10 +112,17 @@ function requestObj(users, mode, count, getspam)
     // doneReportProcessing is called after an getposts response is processed
     // mode changing may require a new request (to fill gaps)
     this.doneReportProcessing = function(receivedCount) {
-        if( this.mode == 'latest') this.mode = 'fillgap';
-        if( this.mode == 'latestFirstTime') this.mode = 'done';
-        if( this.mode == 'older') this.mode = 'done';
-        if( receivedCount < this.count ) this.mode = 'done';
+        if (receivedCount === this.count) {
+            this.mode = 'done';
+        } else {
+            if (this.mode === 'latest' || this.mode === 'latestFirstTime') {
+                this.mode = 'fillgap';
+            } else if (this.mode === 'fillgap') {
+                this.mode = 'older';
+            } else if (this.mode === 'older')
+                this.mode = 'done';
+        }
+        //console.log('we got '+receivedCount+' posts from requested '+this.count+', status of processing is "'+this.mode+'"');
     }
 }
 
@@ -197,25 +205,36 @@ function processReceivedPosts(req, posts)
         }
         req.reportProcessedPost(post["userpost"]["n"],post["userpost"]["k"], streamPostAppended);
     }
-    req.doneReportProcessing(posts.length);
+    req.doneReportProcessing(p2a);
+
+    if (req.updateReportNewPosts) {
+        _newPostsPending = 0; // FIXME maybe we need updating here instead this zeroing
+        $.MAL.reportNewPosts(_newPostsPending);
+    }
 
-    //if the count of posts less then 5....
-    if( req.mode == "done" && p2a > 5) {
+    //if the count of recieved posts less then or equals to requested...
+    if (req.mode === 'done') {
         timelineLoaded = true;
         $.MAL.postboardLoaded();
         _refreshInProgress = false;
-        $(window).scroll();
     } else {
         //we will request more older post...
-        req.count += postsPerRefresh;
-        req.mode = 'older';
-        requestGetposts(req);
+        req.count -= p2a;
+        if (req.count > 0) {
+            //console.log('we are requesting '+req.count+' more posts...');
+            requestGetposts(req);
+        } else {
+            timelineLoaded = true;
+            $.MAL.postboardLoaded();
+            _refreshInProgress = false;
+        }
     }
 }
 
 // request timeline update for a given list of users
 function requestTimelineUpdate(mode, count, timelineUsers, getspam)
 {
+    //console.log(mode+' timeline update request: '+count+' posts for following users - '+timelineUsers);
     if( _refreshInProgress || !defaultScreenName)
         return;
     $.MAL.postboardLoading();
@@ -226,10 +245,6 @@ function requestTimelineUpdate(mode, count, timelineUsers, getspam)
     } else {
         console.log("requestTimelineUpdate: not following any users");
     }
-    if( mode == "latest" || mode == "latestFirstTime" ) {
-        _newPostsPending = 0;
-        $.MAL.reportNewPosts(0);
-    }
 }
 
 // getlasthave is called every second to check if followed users have posted anything new

login.html

@@ -53,7 +53,7 @@
 
   <!-- LADO ESQUERDO DE MÓDULOS INIT --> 
     <div class="login">
-      <h2> twister login </h2>
+      <h2 class="header-bold"> twister login </h2>
 
       <div class="module">
         <p> <span>Existing local users</span> </p>

options.html

@@ -102,7 +102,7 @@
                   <option value="nin">Nin</option>
                 </select>
               </form>
-              <span class="selectable_theme theme_calm">
+              <span class="label selectable_theme theme_calm">
                 For new features check <a href="https://github.com/iHedgehog/twister-calm">twister-calm repository</a>!
               </span>
             </div>

theme_calm/css/style.css

@@ -135,10 +135,12 @@ button.follow, button.unfollow, .following-list button.private {
     background: none;
     border: solid 1px rgba( 0, 0, 0, .2 );
     padding: 3px 15px;
+    font-size: 12px;
 }
 
 .following-list .public-following {
     padding: 4px 16px;
+    font-size: 12px;
 }
 
 .following-list .public-following:hover {
@@ -164,9 +166,9 @@ button.unfollow:hover {
 }
 
 .follow-suggestions .follow, .follow-suggestions .unfollow {
-    display: block;
-    position: relative;
-    left: 50%;
+    display: inline-block;
+    float: right;
+    margin-right: 10px;
 }
 
 /*************************************
@@ -890,7 +892,8 @@ textarea.splited-post {
 .twister-user
 {
     clear: both;
-    padding-bottom: 10px;
+    overflow: hidden;
+    padding-bottom: 4px;
     margin-top: 4px;
     border-bottom: solid 1px rgba( 69, 71, 77, .1 );
     border-top: solid 1px rgba( 69, 71, 77, .1 );
@@ -1531,14 +1534,14 @@ textarea.splited-post {
     padding: 10px;
     border-radius: 6px;
 }
-.singleBlock h2
+.singleBlock h2, .header-bold
 {
     font-weight: bold;
     line-height: 40px;
     color: rgba( 255, 255, 255, 1 );
     font-variant: small-caps;
     border-bottom: solid 1px rgba( 69, 71, 77, .1 );
-    margin: 15px 0 0 0;
+    margin: 0;
     padding-left: 5px;
     background: #768fce;
     border-radius: 2px;
@@ -1608,16 +1611,23 @@ textarea.splited-post {
 }
 
 /*************************************
-**************************** LOGIN PAGE
+************* LOGIN PAGE *************
 **************************************/
-.login .module, .optionsPage .module {
+
+.login .header-bold {
+    display: block;
+    width: 500px;
+    margin: 0px auto 12px auto;
+}
+
+.login .module {
     padding: 20px;
     width: 500px;
     margin: 10px auto;
     border: 3px solid #c7cdda;
     border-radius: 6px;
 }
-.login .module p, .optionsPage .module p{
+.login .module p {
     font: 14px "Open Sans", sans-serif;
     margin-bottom: 5px;
 
@@ -1634,7 +1644,7 @@ textarea.splited-post {
     background: #fff;
     transition: background-color 100ms linear;
 }
-.login .module select, .optionsPage select{
+.login .module select {
     height: 30px;
     font: 13px/24px "Open sans";
     text-align: center;
@@ -1742,7 +1752,7 @@ textarea.splited-post {
     position: absolute;
     right: 0;
     top: 0;
-    padding: 3px 10px;
+    padding: 1px 10px;
     cursor: pointer;
     color: rgba( 255, 255, 255, .7 );
     font-weight: bold;
@@ -1759,7 +1769,7 @@ textarea.splited-post {
     position: absolute;
     right: 30px;
     top: 0;
-    padding: 3px 10px;
+    padding: 1px 10px;
     cursor: pointer;
     color: rgba( 255, 255, 255, .7 );
     font-weight: bold;
@@ -2142,9 +2152,11 @@ textarea.splited-post {
     font-size: 12px;
     color: rgba( 0, 0, 0, .6 );
 }
+
 /*************************************
-****************** LOADER ************
+**************** LOADER **************
 **************************************/
+
 .postboard-loading
 {
     text-align: right;
@@ -2261,26 +2273,74 @@ textarea.splited-post {
 }
 
 /*************************************
-****************** OPTIONS ***********
+**************** OPTIONS *************
 **************************************/
 
 .options .module
 {
-    margin: 5px;
-    padding: 15px;
+    display: block;
+    width: 720px;
+    padding: 32px 40px;
+    margin: 8px auto;
+    background: #fff;
+    border: 3px solid #c7cdda;
+    border-radius: 6px;
 }
 
 .options .container
 {
-    margin: 5px 0px 5px 10px;
+    margin: 8px 0px 8px 16px;
+}
+
+.options .label {
+    font-size: 13px;
 }
 
 .options .label-h {
-  font-weight: 700;
+    font-weight: bold;
+    font-size: 14px;
 }
 
-.options .module label {
-    font: 12px "Open Sans", sans-serif;
+.options button, .options input, .options select {
+    font: 13px/24px "Open sans";
+}
+
+.options .module input, .options .module select {
+    background: #f3f3f3;
+    border: solid 1px #ccc;
+    transition: box-shadow 0.3s, border 0.3s;
+}
+
+.options .module input:focus, .options .module select:focus {
+    background: #fff;
+    transition: background-color 100ms linear;
+    box-shadow: 0 0 10px rgba(0, 0, 0, .3 );
+}
+
+.options .module input {
+    padding: 0px 10px;
+    text-align: right;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+.options .module select {
+    padding: 0px 30px 0px 10px;
+    text-align: center;
+    background: #fff url(../img/form-arrow-down-black.png) no-repeat right center;
+    border: 1px solid #ccc;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+
+/* hide default apperance select element and arrow in firefox */
+    -webkit-appearance:none;
+    -moz-appearance:none;
+    appearance:none;
+    text-indent: 0.01px;
+    text-overflow: '';
+/* end */
 }
 
 .volValue {
@@ -2300,7 +2360,21 @@ textarea.splited-post {
     -ms-transition: height 1s linear;
 }
 
-/* Following page */
+/*************************************
+*********** FOLLOWING PAGE ***********
+**************************************/
+
+.following .postboard-loading
+{
+    text-align: center;
+}
+
+.following .header-bold {
+    display: block;
+    width: 100%;
+    margin: 0px auto 12px auto;
+}
+
 .following ol.following-list > li{
     display: inline-block;
     width: 280px;
@@ -2314,13 +2388,18 @@ textarea.splited-post {
 .following ol.following-list li .swarm-status {
     font: 11px "Open Sans", sans-serif;
     color: #343434;
-    margin-left: 10px;
+    display: block;
+    position: absolute;
+    top: 94px;
+    right: 8px;
 }
 .following ol.following-list li span.mini-profile-name:hover {
     color: #5e8da4;
 }
 .following ol.following-list li span.mini-screen-name {
     color: #5e8da4;
+    position: absolute;
+    top: 32px;
 }
 .following ol.following-list li span.mini-screen-name:hover {
     color: #76b2ce;
@@ -2339,6 +2418,14 @@ textarea.splited-post {
     vertical-align: middle;
 }
 
+.following-list .following-config
+{
+    width: 100%;
+    position: absolute;
+    top: 60px;
+    text-align: center;
+}
+
 /* Autocomplite*/
 .textcomplete-wrapper textarea {
     display: inline;

theme_nin/css/style.css

@@ -1611,6 +1611,75 @@ h3 .isFollowing:after {
   display: none;
 }
 
+/*************************************
+************* LOGIN PAGE *************
+**************************************/
+
+.login .header-bold {
+    display: block;
+    width: 720px;
+    margin: 0px auto 12px auto;
+}
+
+.login .module {
+    display: block;
+    width: 720px;
+    padding: 32px 40px;
+    margin: 8px auto;
+    background: #fff;
+}
+
+.login .module p {
+    margin-bottom: 5px;
+}
+
+.login .module input {
+    padding: 5px 10px;
+    background: #f3f3f3;
+    border: solid 1px #dcdcdc;
+    transition: box-shadow 0.3s, border 0.3s;
+    font-size: 14px;
+}
+
+.login .module input:focus, .login .module select:focus {
+    background: #fff;
+    transition: background-color 100ms linear;
+    border-bottom: solid 2px #B4C669;
+}
+
+.login .module select {
+    height: 30px;
+    padding: 3px 30px 3px 10px;
+    margin: 0;
+    border: 1px solid #ccc;
+    font-size: 14px;
+}
+
+.login .module span.availability {
+    margin-left: 10px;
+    color: #45474d;
+}
+
+.with-nickname, .import-secret-key, .create-user {
+    margin-top: 10px;
+}
+
+.login .module:nth-child(2) div ,
+.login .module:nth-child(3) div:nth-child(2),
+.login .secret-key-import,
+.login .username-import {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    margin-left: 16px;
+}
+
+.login .create-user,
+.login .import-secret-key {
+    display: block;
+    margin-left: auto;
+    margin-right: 16px;
+}
+
 /************** BUTTONS *********** */
 /* line 65, ../sass/_commons.sass */
 button, .mini-profile-actions span, a.button {
@@ -2121,6 +2190,10 @@ ul.userMenu-search-profiles button:after, ul.userMenu-search-profiles .mini-prof
   margin: 5px 0;
 }
 
+.post-area-new textarea:focus {
+  border-bottom: solid 2px #B4C669;
+}
+
 /* line 334, ../sass/style.sass */
 #postboard-top {
   clear: both;

theme_nin/sass/_login.sass

@@ -0,0 +1,55 @@
+.login .header-bold
+  display: block
+  width: 720px
+  margin: 0px auto 12px auto
+
+.login .module
+  display: block
+  width: 720px
+  padding: 32px 40px
+  margin: 8px auto
+  background: white
+
+.login .module p
+  margin-bottom: 5px
+
+.login .module input
+  padding: 5px 10px
+  background: #f3f3f3
+  border: solid 1px #dcdcdc
+  transition: box-shadow 0.3s, border 0.3s
+  font-size: 14px
+
+.login .module input:focus,
+.login .module select:focus
+  background: white
+  transition: background-color 100ms linear
+  border-bottom: solid 2px $color-green
+
+.login .module select
+  height: 30px
+  padding: 3px 30px 3px 10px
+  margin: 0
+  border: 1px solid #ccc
+  font-size: 14px
+
+.login .module span.availability
+  margin-left: 10px
+  color: #45474d
+
+.with-nickname, .import-secret-key, .create-user
+  margin-top: 10px
+
+.login .module:nth-child(2) div,
+.login .module:nth-child(3) div:nth-child(2),
+.login .secret-key-import,
+.login .username-import
+  margin-top: 20px
+  margin-bottom: 20px
+  margin-left: 16px
+
+.login .create-user,
+.login .import-secret-key
+  display: block
+  margin-left: auto
+  margin-right: 16px

theme_nin/sass/style.sass

@@ -8,6 +8,7 @@
 @import _profile
 @import _postboard
 @import _following
+@import _login
 @import _network
 @import _commons
 @import _tabs
@@ -353,6 +354,8 @@ ul.userMenu-search-profiles
     border: 1px solid rgba(0, 0, 0, 0.1)
     padding: 3px
     margin: 5px 0
+    &:focus
+      border-bottom: solid 2px $color-green
 
 #postboard-top 
   clear: both