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
Solution to this Bug
The solution for this issue was to create a set of CSS selectors for the
social categories inside of the global style sheet called
colors.styl. After which, I then fixed the color by assigning the global
$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.
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
copywritingcategory and the
task-copywritingrequest 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
developmentcontribution icon will appear on the
task-developmentrequest 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-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.
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