[//]: # (https://github.com/KrNel/kure)

Some welcome changes to the site's look have been made this time around. I wanted to make the site more appealing. The table list formats are compact and efficient, but they don't provide a rich viewing and user experience (UX). That's why images for kurated posts have been added to enhance the viewing pleasure through a grid view of the content.

After adding images for kurated posts to a grid view, that became the default view. But having the option to look at data in a more compact way to better see more data at once, was something that should also be provided for the UX. The `View` can be toggled between the default grid mode and a list mode, allowing the user to customize their experience on the site.

Each of the KURE pages also have multiple sections. The Home page has Recent Kurations and Community Activity, the Communities page has Newly Created and Recently Active, and the individual community pages have Posts and Members. Eventually there is going to be a need to look through a lot of data, and pagination is one way to go about it. But I preferred to stick with infinite scroll which was already added to the Steem content viewing. So I added tabs change the content selection on each page. That I can add infinite scroll (yet to be done).

Any feedback or criticism is welcome and appreciated. I am looking to improve the app and your experience using it.

*What do you want to see next?*

<center><a href="https://thekure.net/"><img src="https://i.imgur.com/ltGSQBe.png" /></a></center>

---
# Repository
https://github.com/KrNel/kure

# Site
https://thekure.net/

---
# Index

1. What is KURE?
2. What's new?
	2.1 UI/UX Improvements
		2.1.1 Added images to Kurated posts
		2.1.2 Added grid view to pages
		2.1.3 Added toggle view option to display content
		2.1.4 Added tabbed view selection to pages
		2.1.5 Added ellipsis overflow for text to fit perfectly
3. Bug and Other Fixes
	3.1 Fixed Reply link showing when not logged in
	3.2 Fixed PostSummary rep being 25
	3.3 Fixed comments from previous post viewed showing as next post's comments
	3.4 Fixed bug with reply form disabling upvote and reply actions
	3.5 Fixed padding issue messing up the Home page table list view
	3.6 Fixed Communities menu item inactive for individual community pages
4. Pull Request / Latest Commits
5. Roadmap
6. Contact

---
# 1. What is [KURE](https://thekure.net/)?

### Kindred United to Reward Everyone.

#### A Community Platform and Curation Network Remedy for Steem

Do you want to find content that other people really value, based on topics that interest you? How?

Upvotes don't do it, because so many upvotes come from autovoting, autobots, or curation trails. You don't know if a vote for content is done by a real person, or some automation. The content isn't being evaluated when it's automated.

Plus, you can upvote so many things, which can be unrelated.

Imagine a curation network where people are interacting through community groups to share and value content, and you can really see what they value globally through various communities that people organize and collaborate together to build.

KURE provides a network hub for people to create their own community groups for evaluating content to curate. It will also develop into communities to create posts within.

Create your own communities and have others join to contribute. Make up your own criteria. Manage who can add curation links to your community group. Anyone else can follow your community and engage.

My goal is to make content easier for everyone to find by all of us sharing the content we like trough communities. Others can find communities they are interested in and see what is being curated within that community to also support it with upvotes, resteems and comments.

Maybe you want to share what you value, and get others to see it or support it, but don't want to resteem it, or want more people to see it. On KURE, the community you create and those who are involved in it will popularize content you value and allow others to see it. Another way of thinking about it, is it's kind of like having a custom community feed, based on a community that engages in creating it, rather than just one person.

KURE empowers the Steem community to coordinate their curation efforts through building community networks of their own.

---
# 2. What's new

## Video Demonstration

https://vimeo.com/327743146

---
## 2.1 UI/UX Improvements

---
## 2.1.1 Added images to Kurated posts

Images are now added to the data for a kurated post. If you're adding a post manually through the link in the Manage page, the content retrieval from Steem also grabs the image link from the post at the time the post is being added to a community. It's returned along with the author, category, permlink, and title.

<center><img src="https://i.imgur.com/V0Syy91.png" /></center>

If browsing Steem content or looking at a Steem post, the add icon will include the image from the post being added to a community and sent.

<center><img src="https://i.imgur.com/uyEdC3V.png" /></center>

The result is being able to grab images for display on kurated posts. They only show on the grid layout view, as it's not really useful to have a small image in a table list view. But maybe i can change the table list to be more like a a list used to display Steem posts.

<center><img src="https://i.imgur.com/YCReggi.jpg" /></center>

---
## 2.1.2 Added grid view to pages

Three pages got a UI/UX overhaul to the content views: Home, Communities and individual community pages. Each has a default grid view to show the content of kurated posts added to community groups, or community groups data.

The main image from the post when kurated is used int he grid display for each post, along with data like title, author, community and when it was added to the community.

### Home page

<center><img src="https://i.imgur.com/blqv5gJ.jpg" /></center>

### Communities page

There are no images for the community groups, so the data is displayed without any image.

<center><img src="https://i.imgur.com/DnmOsZ1.png" /></center>

### Individual community details pages

<center><img src="https://i.imgur.com/yP5ENh6.jpg" /></center>

The newly added image has it's primary purpose in the grid layout view. An image is created from the path to the image and cropped if it's too long so as to not make a vertically long grid box. The title link and author link is on the top and left, while hte KURE info for the community the post was added to and when it was added is on the right.

<center><img src="https://i.imgur.com/6U7s97A.png" /></center>

I plan to add more meta data, like the Likes and Rating from KURE, as well as who submitted the post for kuration.

---
## 2.1.3 Added toggle view option to display content

If you prefer to see a more compact view to scan the data of a post or community more easily and quickly, you can click on the `View` icon at the right of the section header to change the view. 

<center><img src="https://i.imgur.com/rr6DxJe.png" /></center>

<center><img src="https://i.imgur.com/iSzeD7G.png" /></center>

The toggling is done with function in each page to check the state `showGrid` and change it when a `View` change is selected.

<center><img src="https://i.imgur.com/sQYN5Pm.png" /></center>

In each page the `ToggleView` component is also imported and then used to display the toggle icons.

<center><img src="https://i.imgur.com/yILNwdo.png" /></center>

The pages show a different component based on the view selection.

<center><img src="https://i.imgur.com/bg9zuWJ.png" /></center>

Each pages' grid component then loads the common PostGrid component which displays the various data from the kurated post for view.

<center><img src="https://i.imgur.com/6U7s97A.png" /></center>

As such, now each page can be viewed as a grid with images to enhance the UX, or as a list which can also enhance the UX by making more data visible:

### Home page

<center><img src="https://i.imgur.com/blqv5gJ.jpg" /></center>

<center><img src="https://i.imgur.com/fGObgA2.png" /></center>

### Communities page

<center><img src="https://i.imgur.com/DnmOsZ1.png" /></center>

<center><img src="https://i.imgur.com/MNaDXM3.png" /></center>

### Individual community details pages

<center><img src="https://i.imgur.com/yP5ENh6.jpg" /></center>

<center><img src="https://i.imgur.com/9X73vjY.jpg" /></center>

---
## 2.1.4 Added tabbed view selection to pages

Each KURE page had multiple section to display content. The Home page, for example, had the section Recent Kurations and Community Activity. These sections used to be displayed one on top of the others. To get more data for each section would require pagination.

But I already use infinite scroll on the Steem pages. So it's better to stick to that. The sections needed to be in their own view to have infinite scroll work for each. As such, section are now viewable separately as tabs.

<center><img src="https://i.imgur.com/EQ7aM0d.png" /></center>

<center><img src="https://i.imgur.com/uiaK7Aa.png" /></center>

The tab selected will determine which component to load. Each component has it's own `tabs` array to loop through and display the view. When the component updates with a state change for a change int he tab selection, a check is made to see which tab should be shown on the page by adding an `activeTab` class.

<center><img src="https://i.imgur.com/dSuKUox.png" /></center>

---
## 2.1.5 Added ellipsis overflow for text to fit perfectly

For titles in KRUE pages, and for the description in the PostSummary, the text was being cut off at certain character size limits. I changed that to be dynamic with `text-overflow: ellipsis;`

<center><img src="https://i.imgur.com/VW8lMAH.png" /></center>

Now the titles and description are shortened based on the parent element that contains them.

<center><img src="https://i.imgur.com/EbuxqXO.png" /></center>

---
# 3. Bug Fixes

---
## 3.1 Fixed Reply link showing when not logged in

This was a simple thing I forgot to add. Checking if someone is authenticated before showing the reply button fixed it.

<center><img src="https://i.imgur.com/lBC0yKz.png" /></center>

---
## 3.2 Fixed PostSummary rep being 25

The `PostSummary` component was pulling the `author_reputation` which is a long number, and then sending it to the `AuthorCatgoryTime` component to get processed into a readable format. but I was already converting the rep to human readable format prior to passing it along. As a result, the conversion was being done twice and errored  it to 25.

---
## 3.3 Fixed comments from previous post viewed showing as next post's comments

Comments from previous posts where being used as comments in other posts sometimes, not always. After looking around for the cause, I found it in the logs for Redux calls. The calling for comment fetching data was supposed to be done after a post was being called, but it was being called before with the old post info, and then already returning the data for the old post comment while the new post data was being fetched.

---
## 3.4 Fixed bug with reply form disabling upvote and reply actions

The reply form was showing up under the vote and reply link, but it rendered the former inactive. After moving where the reply form was being loaded outside of the unordered list and changing some css, it was allowing votes and the reply link to close the form like it should.

---
## 3.5 Fixed padding issue messing up the Home page table list view

After adding the tabs for sections, the changes made the table view load with padding inside, as it was inside a Segment. After removing the Segment from the parent component, the extra padding was no longer an issue.

---
## 3.6 Fixed Communities menu item inactive for individual community pages

Going to individual community pages would not have the Communities menu item as active. A community is part of the communities, should I made the menu item active when viewing individual communities.

I removed the `exact` property from the `Menu.Item` creation for the menu item iterations. But then the Home page was always showing as active for all pages. I have separate the home page when looping through menu items and put the `exact` option for it alone.

<center><img src="https://i.imgur.com/5Nrj245.png" /></center>

---
# 4. Pull Request / Latest Commits

# [PR 11](https://github.com/KrNel/kure/pull/11)

---
# 5. Roadmap

The previous part of the roadmap "Improved UI/UX for the KURE community part of the site" was worked on this time. With that done I am going after the publishing of main Steem content posts. Then I'll return to comments and polish some things there, and improve the loading of the site.

Working on:

- Posting content to Steem (not just curation post submissions)
- Comment edit, delete, sort and other tweaks
- Improved UI/UX, landing page, code splitting, PRPL
- Posts submitted to communities page
- Liking and rating submissions
- About page

---
# 6. Contact

If you want to contact me, you can reach me on Discord at https://discord.gg/ApUp4jJ, or email at `krnel@protonmail.com`. I'm not really on steem.chat, but I think I get emails if you send me a message.

- [Discord](https://discord.gg/ApUp4jJ)
- Email: `krnel@protonmail.com`
- Site: [thekure.net](https://thekure.net/)

---
Thank you for your time, attention and support. I appreciate it. Every vote matters, but I'm especially thankful for the support from @utopian-io, @fundition and @v4vapid.

Peace.