Task Preview Functionality and Bug Fixed Aesthetics for the Utopian V2 Frontend

Repository

https://github.com/utopian-io/v2.utopian.io

Bug Fixes

In this set of pull requests, I fixed small bug with regards to the Icons on the create page.

• Fixed the Icon color of the Social and ideas contribution categories.

Solution to this Bug

The solution for this issue was to create a set of CSS selectors for the ideas and social categories inside of the global style sheet called colors.styl. After which, I then fixed the color by assigning the global $social and $ideas colors to their respective selectors. The image above shows the bugged colors and the image below shows the fixed colors. This bug was resolved with this commit.

New Features

In these Pull Requests, I added a number of features pertaining to the task request preview components and the user profile component.

• Added the ability to hide elements in the side box of the user profile in response to the information filled out by the user. If the user does not have a location or a website attached to their account, then those boxes will simply not show. If the user does not have an "About Me Biography" filled out then this box will display the text, "There is no information about the user".

• Added a color border to the top of the task request previews. These colors are based on their corresponding categories. For instance, the copywriting category and the task-copywriting request category share the same color for this border.

• Added icons to the task request previews which correspond with the existing icons of their counterpart contribution categories. As an example, the development contribution icon will appear on the task-development request category as well.

• Added task titles for the task request previews which appear in the various places of the frontend. This makes the Task request previews more in line with the Category contribution previews.

Implementing the Features

To make the user profile reactive based on the information being passed into it, I created some simple Vue logic inside of the pug template of the profile component. For the location and website blocks, I built in a set of v-if statements to check to see if the associated data for the user exists. Since the v-if statement is lazily evaluated, if the data exists then the item is parsed and rendered as HTML, otherwise, the components are not parsed and rendered. For the About Me block, I build a set of v-if and v-else statements to allow the block to display one element or the other in response to the user biography information. Either the user's biography appears or the placeholder text appears. This was done in this commit with minor cleanup and comments added in future commits.

The task features required that I first build an array of strings which contained all of the task categories. I then set about creating a new field called _tasks which is attached to the global post object. Also, I amended the _visibile_tags field in the post object so that the proper tasks tags would be consumed and then placed into the _tasks field for global use. I then created a set of Css selectors which followed the existing contribution category selectors style and changed them to account for these new task classes. These additions can be seen in this commit.

To make the titles, colors and icons of the tasks visible inside of the post-preview Vue component, I then altered the pug template for this component. I built a v-if statement to check to see if the post._task field existed on incoming post object. The title, color and icon would not show if this field was null or undefined; however, if it does exist then the following part of the template would be parsed and rendered.

As a side note, I did forget that in JavaScript a variable/field could be considered undefined rather then just null. As a result of this I encountered an error with my initial logic and tried to fix it by creating more complex logic. Once I had realized my mistake, I decided to instead create a filter function which would then parse the incoming post._task string and alter it to suit the needs of the template. I then generalized the filter function to also parse the post._category field. This function is bound to the q-icon component which in turn generates the proper class for the icon. The generalized filter function can be found in this commit

To get the top color of the post-preview component to show properly, I added a ternary operator to the top of the opening q-item class which checks to see if the post._category field exists for the incoming post. If this field does exist then it uses the post._category string as the class otherwise it uses the post._task class. By doing things this way, we have a clear separation between the previews which belong to tasks and the ones which belong to category contributions. This was done in this commit

Pull requests referenced in this contribution: here and here

GitHub Account

https://github.com/tensor-programming