Hede-io landing page view toggle

image source

<h4>Repository <p dir="auto"><span><a href="https://github.com/Hede-io/hede.io" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/Hede-io/hede.io <h4>Components <p dir="auto">hede-io which I can say is "steem-wiki" is where contributors come to share their knowledge of so many things which they know in the world, these ideas consist of so many things which every average human can share <ul> <li>slang terms, <li>any project or product <li>any event (ces 2018, mad cool festival 2018, steem gathering istanbul 2018) <li>people (Ned Scott, famous youtubers, politicians, fiction characters,"married man", instagrammers) <li>your friend's username on steem<br /> social media (YouTube channels, websites) <li>acts (get a tattoo, open a blog, be a father) <li>places, tv series, movies, books, restaurants<br /> <a href="https://steemit.com/utopian-io/@hede-io/introducing-hede-wiki-platform-and-knowledge-sharing-dictionary-on-steem" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">source <p dir="auto">With all this it makes the knowledge which users are meant to share invaluable, because everyone have lots to offer.<br /> Some of the features of this project are: <ul> <li>0% beneficiary from posts <li>No approval needed to publish entries <li>Multilingual and has language auto-detection <li>Informal and experience-based wikis <li>Topic-based like other wikis that makes information easily accessible <li>The entry becomes a post on Steem<br /> Filtering entries by language and theme (category) <li>References to other topics <li>Add tags and Steem specific title to your post <li>Responsive design supporting mobile <li>Optimized fast browsing and fast searching of topics<br /> <a href="https://steemit.com/utopian-io/@hede-io/introducing-hede-wiki-platform-and-knowledge-sharing-dictionary-on-steem" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">source <p dir="auto">To read more about the project check <a href="https://steemit.com/utopian-io/@hede-io/introducing-hede-wiki-platform-and-knowledge-sharing-dictionary-on-steem" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">here <h4>Proposal <p dir="auto">Landing on hede-io for the first time, I found out everything there has been set by the developers, so I don't need to do anything than just contribute to a topic or create one of my own. But after logging in several times I feel a need for control over the <code>view of the landing page.<br /> The hede.io page has just a specific view of contributions entered which I will call the <code>list view, but I think there s need for more views like <code>list view with images , <code>grid view also with images . Where users can see an idea of what a topic shared looked like from the images they can see. <h3>Mockups / Examples <h4>views <p dir="auto">The views should be categorized into three parts, where users can choose their choice from. They can either choose list view(which is the current state), list view with images (propose), grid view (propose). Images to illustrate; <p dir="auto">When the view feature is added, here is a prototype of how it should come out with better designing though.<br /> <img src="https://images.hive.blog/768x0/https://img.esteem.ws/4l8qwjc5q1.jpg" alt="image" srcset="https://images.hive.blog/768x0/https://img.esteem.ws/4l8qwjc5q1.jpg 1x, https://images.hive.blog/1536x0/https://img.esteem.ws/4l8qwjc5q1.jpg 2x" /> <p dir="auto">And after having the view option at the top right corner, once the drop down icon is clicked it brings out various options for users to select from and then we have something like this <img src="https://images.hive.blog/768x0/https://img.esteem.ws/7zqcp1lbrr.jpg" alt="image" srcset="https://images.hive.blog/768x0/https://img.esteem.ws/7zqcp1lbrr.jpg 1x, https://images.hive.blog/1536x0/https://img.esteem.ws/7zqcp1lbrr.jpg 2x" /> <ul> <li><p dir="auto">List view<br /> If the list option is selected which is the first from the image above we should have the Current view of hede.io<br /> . <img src="https://images.hive.blog/768x0/https://img.esteem.ws/k3hnul5o12.jpg" alt="image" srcset="https://images.hive.blog/768x0/https://img.esteem.ws/k3hnul5o12.jpg 1x, https://images.hive.blog/1536x0/https://img.esteem.ws/k3hnul5o12.jpg 2x" /> <li><p dir="auto">List view with images<br /> If this option is selected then the list view will add the first images of the contributions at the end of each contribution. Something similar to this image <img src="https://images.hive.blog/768x0/https://img.esteem.ws/y6h7ancws2.jpg" alt="image" srcset="https://images.hive.blog/768x0/https://img.esteem.ws/y6h7ancws2.jpg 1x, https://images.hive.blog/1536x0/https://img.esteem.ws/y6h7ancws2.jpg 2x" /> <p dir="auto">Well, here is a better view of the proposal with an image gotten from Steemhunt.com of how the hede.io page should look like when list view with images is been selected <img src="https://images.hive.blog/768x0/https://img.esteem.ws/8z1ogssb3v.jpg" alt="image" srcset="https://images.hive.blog/768x0/https://img.esteem.ws/8z1ogssb3v.jpg 1x, https://images.hive.blog/1536x0/https://img.esteem.ws/8z1ogssb3v.jpg 2x" /> <ul> <li>Grid view<br /> The grid view is one of the view I personally like, this view shows larger images with the title of contributions above the image including number of entries for that topic. A sketch of the view <img src="https://images.hive.blog/768x0/https://img.esteem.ws/lir501j3c8.jpg" alt="image" srcset="https://images.hive.blog/768x0/https://img.esteem.ws/lir501j3c8.jpg 1x, https://images.hive.blog/1536x0/https://img.esteem.ws/lir501j3c8.jpg 2x" /> <p dir="auto">A better image is a screenshot I got from dtube website d.tube of how the landing page is <img src="https://images.hive.blog/768x0/https://img.esteem.ws/bpjixtn7l2.jpg" alt="image" srcset="https://images.hive.blog/768x0/https://img.esteem.ws/bpjixtn7l2.jpg 1x, https://images.hive.blog/1536x0/https://img.esteem.ws/bpjixtn7l2.jpg 2x" /> <h4>Benefits <p dir="auto">Some benefits which I perceive this development will help with is: <ul> <li>Users have control over the type of view they want, this makes it not boring since they won't see same type of view over and over again, <li>it becomes more interesting to read, seeing something (a word probably) I don't know before and a charming image of what the contribution is about will make me want to know what knowledge was shared there, <li>In general the interface will be more lively as there are various combinations of images which user can feed their eyes with incase of where they have an idea of what knowledge is already shared. <h4>GitHub Account <p dir="auto">Below is the link to my github account<br /> <a href="https://github.com/onos1" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">onos1 <p dir="auto">Here is a confirmation of an issue from the project owner on the enhancement of the hede.io page.<br /> <a href="https://github.com/Hede-io/hede.io/issues/23" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">here