SteemPlus - Busy Feed+ UI Improvements and Minor Bug Fixes

Repository

---

Repository: https://github.com/stoodkev/SteemPlus/
Project Name: SteemPlus
Publisher: @stoodkev

Feature Improvements

---

The main changes I made in this piece of work was to take the existing feed+ UI and make it more in line with the busy styling. The following shows what feed+ on busy looked like prior to my changes:

The following shows what it looked like following the changes:

As the original implementation didn't have the correct structure of the HTML to make these changes in a clean way, I first made some adjustments in feedplus.js to add additional structure to the feed plus filter options. Following this, I added additional classes along with minor adjustments to existing classes to make the styling more in line with busy.

The main reason I created new classes is that the feedplus.css file is shared across Steemit and Busy with some elements also being shared, so in order to create a busy relevant experience, additional classes were required.

The changes mentioned above were related to the following commits:

https://github.com/stoodkev/SteemPlus/pull/112/commits/da354844184cd207cde6bb302dbedfdfd6355016
https://github.com/stoodkev/SteemPlus/pull/112/commits/2f249e8c4fb5f364edfc2c058d2d35343f5acac6

Bug Fixes

---

Within this piece of work I also resolved three issues which I reported to the project, these were very small fixes although I believe they have an impact to the user experience hence why mentioned them here. I wouldn't have included these in a post if it wasn't for the above as they're too small, but I see no harm in mentioning these fixes below along with the improvements I mentioned above.

The following issues were resolved within this piece of work:

Issue 1: Boost pop up covered by post overlay on busy.org

---

The following link shows the issue that was resolved in more detail:

https://github.com/stoodkev/SteemPlus/issues/108

Issue Overview

The boost button feature within SteemPlus allows you to boost posts you like by sending bids to bid bots such as Smartsteem or Minnowbooster. The issue was occurring was that when you press the boost button when viewing a post which appears as a modal, the boost button pop up window would appear below the post modal meaning that a user will get no visual indication that the boost action was triggered. This was due to the z-index of the pop-up window being less than the post modal.

The following video shows the issue in more detail:

Resolution

This issue was resolved by simply making the boost button pop up z-index higher than the post shown in the modal, the following adjustment corrected this issue:

 .modal-busy {
     display: none; /* Hidden by default */
     position: fixed; /* Stay in place */
-    z-index: 1; /* Sit on top */
+    z-index: 10000; /* Sit on top */
     left: 0;
     top: 0;
     width: 100%; /* Full width */

This was resolved in the following commit:

https://github.com/stoodkev/SteemPlus/pull/112/commits/588b1b86e1d8fd6dfb87c1a4c03beecf6e488821

Issue 2: Comment or send comment button partially covered by floating bottom post bar

---

The following link shows the issue that was resolved in more detail:

https://github.com/stoodkev/SteemPlus/issues/109

Issue Overview

When the "Float Post's Voting Bar" option was enabled within SteemPlus, the floating post bar allows a user to view post options regardless of where they're in a post. Busy has two ways of showing a post either as a modal on top of the current page (feed) or as the page itself. The issue was that when the "Float Post's Voting Bar" option was enabled and a post was opened in the modal some comments were partially hidden by the floating post's voting bar or alternatively when a post has no comments most of the comment button would not be clickable.

The following video shows the issue in more detail:

Issue Resolution

This issue as resolved by simply adding a line of javascript to post_floating_bottom_bar.js this can be seen below:

$('.ant-modal-body').css('margin-bottom', '7.5rem');

This would allow the .ant-modal-body to have additional margin when the floating post bar was enabled within SteemPlus and therefore prevent the comment button or part of a comment.

I first attempted to resolve this issue in this commit:

https://github.com/stoodkev/SteemPlus/pull/112/commits/5ea72b918fe0599cef8ebf92038ebe94d8bd1b8d

This was later merged in the following pull request:

https://github.com/stoodkev/SteemPlus/pull/112

however, it seems I made an error and put margin-top instead of margin-bottom despite testing this in the console tools to check that margin-bottom: 7.5rem was correct, I, therefore, sent another pull request where I resolved this. The following is a link to the commit:

https://github.com/stoodkev/SteemPlus/pull/114/commits/c7e92f50daf12a273018c4e653fac2669f6ce5fc

and this pull request:

https://github.com/stoodkev/SteemPlus/pull/114

Issue 3: Multiple instances of following indication being provided to the user upon multiple author name clicks

---

The following link shows the issue that was resolved in more detail:

https://github.com/stoodkev/SteemPlus/issues/116

Issue Overview

Everytime that you click the author on SteemPlus it calls openAuthorPopupInfo(element) in author_popup_info.js. The first thing it looks to do is create the container which holds the information, this can be seen here:

if (isSteemit) {
        userAuthorPopupInfo = element[0].pathname.replace('/@', '');
        $('.Author__dropdown').append('<hr><div class="author-popup-message"></div>');

Once created it will make an ajax request to gather various information about that author you clicked on, upon result will run the following code:

if (isFollowing !== undefined) {
                $('.author-popup-message').append('<span class="author-popup-witness">Following you</span><br>');
            }
            // If not
            else {
                $('.author-popup-message').append('<span class="author-popup-witness">Not following you</span><br>');
            }

If you clicked on an author multiple times this would trigger multiple ajax requests and therefore multiple results. Upon each result, it will append the result to .author-popup-message therefore for each ajax request, it would append a new result and this is why you would get multiple instances occurring.

The following video shows this issue in more detail:

Issue Resolution

First we will define a new variable outside of openAuthorPopupInfo(element) this looked like this:

let currentRequest = null;

following this I then reassigned the variable to that of the ajax request, as seen below:

// Get followers from steemSQL
    currentRequest = $.ajax({
        type: "GET",
        beforeSend: function (xhttp) {
            xhttp.setRequestHeader("Content-type", "application/json");
            xhttp.setRequestHeader("X-Parse-Application-Id", chrome.runtime.id);
        }, 

and then finally I added an if statement into beforeSend which will check if the current request is not null and abort the current request if so.

beforeSend: function (xhttp) {
            xhttp.setRequestHeader("Content-type", "application/json");
            xhttp.setRequestHeader("X-Parse-Application-Id", chrome.runtime.id);
            if (currentRequest != null) {
                currentRequest.abort();
            }
        },

This resolution mentioned above relates to the following commit:

https://github.com/stoodkev/SteemPlus/pull/114/commits/33b46c5846b0c892b2df960eb189b73575787c61

Pull Request

All of these changes were merged by SteemPlus from the following pull requests:

https://github.com/stoodkev/SteemPlus/pull/112
https://github.com/stoodkev/SteemPlus/pull/114

GitHub Account

My GitHub account: https://github.com/tobias-g1