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

in Steem Dev3 months ago (edited)

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:

Filename Use
account-group.svg(My) Subscriptions
account-heart.svgMy Friends
account-settings-variant.svgSettings
compass-outline.svgExplore
currency-usd.svgPayouts
library-books.svgPosts
wallet_2.svg(My) Wallet

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.

Footer-Top-green.png

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

Sort:  
 3 months ago 

I think it's all very understandable. In some cases I thought: "Hm, he can't remove that!". But a quick look at the code confirmed your decision.

During my explorations, I also noticed some imports that are not used at all. These are probably remnants of previous functions that have been removed...

I'm looking forward to your PR :-)

 3 months ago 

That's very reassuring, thank you 🙂 I've realised that I didn't document Topics.jsx so I'll update this post soon with that information too.

 3 months ago 

I've updated the documentation to include Topics.jsx now. I didn't update a huge amount so it's fairly brief.

Time to document the PrimaryNavigation files 😱

Something I've been wondering about for a while is whether you're leaving space available somewhere for advertising and for the market price graphs of STEEM, SBD, TRX, BTC, etc? If the user has to scroll all the way down below "My Wallet" in the left-hand menu to see the ads - or even below the subscription list, that's a lot of scrolling.

Not sure how important the price graphs are, but the ability to display ads in a place where they'll be seen is probably important (even if my browser blocks them. ;-).

I did read this:

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).

But I'm not sure if that's referring to the price graphs that I see in the right-hand sidebar at steemit? If so, I don't see them anywhere in your demo site - not , post, reply, while editing, or in any of the various feeds.

 3 months ago 

I've not moved or removed the Market Price (other than introducing it to the Post page) so presumably there's an environment setting making it appear or not (there certainly appears to be logic that if there's no data, the component doesn't display). I've tried "forcing" it into the page but something (possibly external to my code) is preventing it from displaying. I'll need to spend some more time trying to understand what's happening but the code's there, unchanged.

There appears to be environment logic around the Ads too - I hadn't moved them until your reply - So I've now moved them into the right column, underneath whatever content is in that area at the time (in a similar vein to it currently being underneath the left sidebar content). I can "hard code" these to be switched on and they look ok there.

This post has been featured in the latest edition of Steem News...

Coin Marketplace

STEEM 0.20
TRX 0.13
JST 0.030
BTC 64599.25
ETH 3467.96
USDT 1.00
SBD 2.55