👨🏼‍💻 #Proposal-86: Change Log - Edited Files

Having reached the point where I'm happy to commit the introduction of a Primary Navigation, it's time to document all of the changes that have been made and where applicable, the reason for the changes. I'll split the documentation into 2 posts. This one will outline the changes made to existing files and one other (which will reference this one) which will explain the new "PrimaryNavigation.jsx" component. Whilst I'll do my best to explain everything, I'll only give an overview of the PrimaryNavigation.css file when I reach that point.

Files Changed

I'll talk through my changes using VSCode's Source Control. (Note: I'll be committing my changes using GitHub Desktop but I won't use this to explain my changes since wrapping a chunk of code inside an additional 'div' component is highlighting unchanged code as changed.)

In the image to the right, the "Staged Changes" are new files and "Changes" are existing files that have been edited.

Staged Changes

These are generally self-explanatory. The .svg files are the introduction of additional icons:

---

As mentioned before, I'll explain PrimaryNavigation in a future post.

---

Changes

.eslintrc and .gitignore

Environment files that won't be committed.

---

all.scss

Addition of the new PrimaryNavigation.css file to the master CSS file.

---

App,scss

Addition of a "margin-bottom" of 60 pixels to the main content area so that the mobile navigation doesn't overlay the content. This is set to 0 on Desktop (since the navigation sits at the side and not the bottom).

I've also introduced a "padding-bottom" of 30px so that when the user reaches the bottom of the "Explore > Posts" screen, the "Loading" image appears on-screen (whereas the "Loading" image on steemit.com currently appears beneath so the only feedback to the user that additional content is loading is the change in scrollbar size).

---

PostFull.scss

Currently, when you view a post, the container has a maximum width which means that the left and right sidebars jump around as you navigate between pages. By removing this style (and also removing the unnecessary commented out style), the sidebars and post container can remain in a consistent position throughout the site.

---

Post.scss

Also linked to the above "sidebar jumping", the max-width of the page was set to be smaller (1454px) than elsewhere in the site (1600px) so this was adjusted. I also moved the sidebar widths to be only relevant on larger (Desktop) devices as it's not required on mobile devices.

I also needed to introduce some additional classes so that on a mobile device, the navigation remains visible. Currently, as you reduce the width of the screen, the right sidebar disappears first and on even smaller widths, the left navigation disappears. Since the navigation lives within the left sidebar, I need it to remain displayed but allow other items to disappear. This was awkward as it requires the identification of the "Parent" element which was achieved with the "has(div.App__navigation)" identifier.

The final change in this file was to get the content to fill its container width, irrespective of screen size.

---

PostsIndex.scss

The changes to this file are consistent with the changes to Post.scss

---

UserProfile.scss

The only change to this file was the introduction of some spacing below the profile image. Currently the "User Profile Navigation" sits here so no margin is required.

---

Icon.jsx

Having added a handful of new icons, they needed including in the "Icons" component so the changes to this file are minimal.

---

ReplyEditor.jsx

This was a file that GitHub Desktop got confused with and thought that I'd edited far more than I have due to the additional page structure that I introduced (left and right sidebars) when creating a post.

The ESLint that have been used across the site didn't like the way that imports were referenced numerous times so I tidied these up, as well as including an additional import for the PrimaryNavigation and something to sit in the Right Sidebar (I opted for SteemMarket for now).

The steemMarketData needed to be retrieved from the app state, returned to the component for rendering and then output to the new right sidebar. This only get displayed within a post and not a reply (isStory) and not within the pane when the post is being edited (!isEdit).

In the final code snippet above, you'll see 2 additional closing 'divs', the final change for this file is the wrapper to contain left sidebar, main content and right sidebar. The classes used were also updated to be consistent with other areas of the site.

---

Header/index.jsx

This file saw a couple of subtle changes.

When the user is viewing their friends feed, I've included some logic to see if it's their friends feed or another user's and updated the page title accordingly. And whilst I type this, I've also updated this to use the language file rather than a hard-coded title.

The only other change is to the Menu behind your avatar. I have changed the "Profile" icon to a person and made it so that the Profile landing page is "Posts" rather than "Blog".

---

Post.jsx

Similar to above, ESLint didn't like the duplication of Imports so I tidies this up again, as well as including the PrimaryNavigation component.

Since the list of user's subscriptions are now integrated into the PrimaryNavigation, I removed the "Topics" import too.

The above outlines the 2 changes to this file.

First, the PrimaryNavigation was introduced to the left sidebar, meaning that the existing Announcement was moved to the Right Sidebar:

And secondly, the code used for the Community Subscriptions was stripped out as it's no longer necessary here.

---

PostsIndex.jsx

The only change to this file is the same title change made in "Header/index.jsx", which uses slightly different variables for the logic.

---

PostsIndexLayout.jsx

The changes to this file are consistent with other files:

• Tidying Up Imports
• Include PrimaryNavigation component
• Remove "My Subscriptions" (Topics) component.

I also removed an unnecessary constructor:

The only real difference with this file is that the PrimaryNavigation component needs the routeTag passed to it which wasn't currently available to this page. (In hindsight, my new component could have retrieved this.) This once again meant that the existing Announcement component was moved to the Right Sidebar.

These changes are explained above so I won't repeat myself.

Removal of Subscriptions:

Addition of PrimaryNavigation (and moving Announcements to Right Sidebar):

---

Topics.jsx

The changes in this file were made to reflect the Subscriptions being moved into the navigation hierarchy, rather than being standalone. This involved removing the links to "My Friends", "My Communities" and the component heading (My subscriptions) from displaying on screen.

I also needed to adjust the markup and styles around the list so that it displayed correctly in the navigation.

The final change in this file was to tidy up the imports again.

---

UserProfile.jsx

This file sees a lot more changes due to the removal of the existing navigation (and associated code) as well as the unnecessary logging of the wallet URL in the console.

Before highlighting what was removed, I'll highlight the addition of the new PrimaryNavigation component as well as some additional structure (the User Profile currently on steemit.com doesn't have a Left or Right Sidebar) to make this area consistent with the rest of the site.

The screenshot above also shows the removal of the top_menu which saw the top_menu code removed:

The removal of this code section also meant that _tablink wasn't required.

The tab_header (secondary navigation which displays "posts", "comments" and "payout") also wasn't required any more so was removed:

Which meant that the associated code could be stripped out which meant that the _tablink2 variable could be stripped out which meant that the _url constant could also be stripped out.

The final thing to strip out that wasn't required was the reference to walletUrl which wasn't being used:

---

Language Files

Finally, the 8 active language files were updated to accommodate new menu items:

• "explore"
• "friends_feed"
• "friends"
• "my_friends"
• "my_profile"
• "my_subscription"
• "my_wallet"
• "notifications"
• "posts_all"
• "subscriptions"

You can view the translations in this post.

The only one of these that isn't for the navigation is "friends" which was added so that the page title on another user's friends feed says "@ username" Friends.

If any of these changes require further explanation or you're a future developer that has any questions, then please leave a comment below.