[Outreachy] All Posts Design #8848

RuthNjeri · 2020-12-14T17:14:05Z

PR is descriptively titled 📑 and links the original issue above 🔗
tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR -- or run tests locally with rake test
code is in uniquely-named feature branch and has no merge conflicts 📁
screenshots/GIFs are attached 📎 in case of UI updation
ask @publiclab/reviewers for help, in a comment below

gitpod-io · 2020-12-14T17:14:11Z

sagarpreet-chadha

Code wise everything looks perfect :)
Design wise maybe the dropdown in mobile view leaves a white right margin which can be filled similar to how we see in social media apps.

RuthNjeri · 2020-12-14T18:44:33Z

Thanks @sagarpreet-chadha! Just so I know I've understood, your suggestion is to have a right margin from the dropdown? By maybe pushing the dropdown to the left that will leave some white space on the right?

jywarren · 2020-12-14T19:54:18Z

Hi, this is looking great. One thing we do on the /tag/outreachy - style pages is to use a Bootstrap style to hide the tab text when on narrower screens:

plots2/app/views/tag/show/_nav_tabs.html.erb

Lines 6 to 14 in ff3417a

    
           <li class="nav-item"> 
        
             <a class="nav-link <% if @node_type == "note" %> active<% end %>" href="/tag/<%= params[:id] %>"> 
        
               <i class="fa fa-file"></i>  
        
               <span class="d-lg-inline">  
        
                 <span class="d-none d-md-inline"><%= t('tag.show.research_notes') %></span> 
        
                 <span class="d-none d-sm-inline badge badge-primary"><%= params[:counts][:posts] %></span> 
        
               </span> 
        
             </a> 
        
           </li>

Maybe we can do the same here to get the buttons to line up on one line even on narrow screens?

Thanks @RuthNjeri ! This is awesome! Should we be looking to merge anything else before this from your project?

Great work!

test/functional/notes_controller_test.rb

jywarren · 2020-12-14T20:09:55Z

app/views/notes/index.html.erb

      <li class="nav-item">
-        <a class="nav-link <% if params[:action] == "recent" %> active <% end %>" href="/notes/recent"> <i class="fa fa-clock-o"></i><span class="hidden-sm hidden-xs"> <%= translation('notes.index.recent') %></span></a>
+        <a class="nav-link <% if params[:controller] == "notes" %> active <% end %>" href="/notes/" target="_blank"> <i class="fa fa-file"></i><span class="hidden-sm hidden-xs"> <%= translation('notes.index.research_notes') %></span></a>


Should these be target blank? Perhaps we could have them be regular links? but i'm very open to ideas if you'd like to share your reasoning! Thanks!

Good catch, the research_notes link should not be target blank.. but I think for the rest of the links it makes sense for them to be since once you click on either question, wikis, or comments there's no way of going back to the notes section from those pages... unless you go back to the dashboard then click the 'all posts' link which is an extra step for the user in loading and reloading the pages... if this is not a problem, I can remove the target blank from the rest of the links too.

I think we could go with normal links for all, but i see your point too. Maybe we can brainstorm a bit on the UI design for this in follow-up (like, could we put a compact way to navigate back on the other pages? not sure.); i think your solution is good too, but we needn't let this hold us up. Thanks for thinking carefully and being flexible here!

Alright, I'll remove the target blank and we can follow it up more in the future..

app/models/node.rb

jywarren · 2020-12-14T20:19:44Z

Awesome work, @RuthNjeri - this is very exciting and we're almost done with this section!

jywarren · 2020-12-14T22:29:28Z

Ah, and it looks like one of the tests changed conflicted with a change from @noi5e -- the notes_controller_test, but I hope it'll be an easy one to resolve. Please reach out if it causes you any trouble though! 🙌

RuthNjeri · 2020-12-15T13:07:38Z

Hi, this is looking great. One thing we do on the /tag/outreachy - style pages is to use a Bootstrap style to hide the tab text when on narrower screens:

plots2/app/views/tag/show/_nav_tabs.html.erb

Lines 6 to 14 in ff3417a

<li class="nav-item">

<a class="nav-link <% if @node_type == "note" %> active<% end %>" href="/tag/<%= params[:id] %>">





<%= t('tag.show.research_notes') %>

<%= params[:counts][:posts] %>



</a>

</li>

Maybe we can do the same here to get the buttons to line up on one line even on narrow screens?

Thanks @RuthNjeri ! This is awesome! Should we be looking to merge anything else before this from your project?

Great work!

Thanks! This PR would need to be merged first, but due to this feedback I'll have to update it before merging. I'll let you know once it's ready to be merged.

codecov · 2020-12-17T11:36:15Z

Codecov Report

❗ No coverage uploaded for pull request base (main@98c561e). Click here to learn what that means.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main    #8848   +/-   ##
=======================================
  Coverage        ?   81.85%           
=======================================
  Files           ?      100           
  Lines           ?     5934           
  Branches        ?        0           
=======================================
  Hits            ?     4857           
  Misses          ?     1077           
  Partials        ?        0

RuthNjeri · 2020-12-17T14:35:49Z

Hi @sagarpreet-chadha I added some responsive styling on the navbar and the sort dropdown, let me know if it looks much better..
and @jywarren I've made the mobile view hide the navbar text, let me know if it looks okay.

jywarren · 2020-12-17T18:38:01Z

I think this is good for now! I guess I wonder if a follow-up could show all the buttons on one line, which may be a different bootstrap style, but it's not essential for this pr unless you want to. What's left to complete here before we merge? 🎉🎉🎉

…

On Thu, Dec 17, 2020, 9:36 AM Ruth ***@***.***> wrote: Hi @sagarpreet-chadha <https://github.com/sagarpreet-chadha> I added some responsive styling on the navbar and the sort dropdown, let me know if it looks much better.. [image: Screenshot 2020-12-17 at 17 26 54] <https://user-images.githubusercontent.com/7622875/102501224-3e519600-408e-11eb-920e-1666a6b9b274.png> [image: Screenshot 2020-12-17 at 17 27 35] <https://user-images.githubusercontent.com/7622875/102501231-414c8680-408e-11eb-8623-5fdb5250bcf2.png> [image: Screenshot 2020-12-17 at 17 27 58] <https://user-images.githubusercontent.com/7622875/102501234-41e51d00-408e-11eb-90af-9661899efbc5.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#8848 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF6J2ZSEH2Q5CHBNJSMH3SVIJNJANCNFSM4U3BWTVA> .

RuthNjeri · 2020-12-17T19:39:28Z

Hi @jywarren I tried the inline style but on the mobile responsiveness for the Galaxy Fold it was overlapping with the Sort Dropdown..I can look at it again tomorrow and let you know... I'll fix the conflicting files right now...

jywarren · 2020-12-17T20:15:19Z

Ah ok and sure, that seems like good reason not to do more on the tabs/buttons in this pr as well! Thanks for being so thorough!!!

…

On Thu, Dec 17, 2020, 2:42 PM codeclimate[bot] ***@***.***> wrote: Code Climate has analyzed commit cb0b69d <cb0b69d> and detected *0 issues* on this pull request. View more on Code Climate <https://codeclimate.com/github/publiclab/plots2/pull/8848>. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#8848 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF6J4X5INMVDOPPBHCCWTSVJNKFANCNFSM4U3BWTVA> .

jywarren · 2020-12-17T20:56:50Z

This is great. I guess that means we are good to go to merge now? Thanks Ruth! Just ping me in the chatroom if you are ready to go and we can wrap this one up!

codeclimate · 2020-12-18T13:01:10Z

Code Climate has analyzed commit d057e97 and detected 0 issues on this pull request.

View more on Code Climate.

RuthNjeri · 2020-12-18T13:04:33Z

Hi @jywarren, I've added a responsive design for the inline issue I had with the Galaxy Fold..
The navbar is inline apart from the Galaxy Fold..

Once the tests pass, it should be good to go 🚀

Current Responsive Displays

Galaxy Fold Before

Galaxy Fold After

gitpod-io · 2020-12-18T13:04:58Z

gitpod-io · 2020-12-18T13:08:20Z

jywarren · 2020-12-18T14:01:17Z

Fantastic!!!! Hooray!!!

cesswairimu · 2020-12-18T14:11:08Z

🎉 🎉 🎉

* all posts route * add to do item * notes controller * remove previous code and inline comments * remove inline comments * reuse published_notes for popular, recent, liked * implements review feedback * fix order and increase limit * fixed tests * all posts design * revert pagination code * revert pagy code in wiki * remove target blank from research note link * optimize query and add test for hidden response id * update styling * fix tests * styling * remove target blank * add columns in the hidden_response select * all posts route * add to do item * notes controller * remove previous code and inline comments * remove inline comments * reuse published_notes for popular, recent, liked * implements review feedback * fix order and increase limit * fixed tests * revert pagy code in wiki * optimize query and add test for hidden response id * update styling * fix tests * add columns in the hidden_response select * all_posts_route merge * fix failing test * revise node query * all posts route * add to do item * notes controller * remove previous code and inline comments * remove inline comments * reuse published_notes for popular, recent, liked * implements review feedback * fix order and increase limit * fixed tests * revert pagy code in wiki * optimize query and add test for hidden response id * update styling * fix tests * add columns in the hidden_response select * fix failing test * revise node query * add a revision for the hidden note test node * remove trailing whitespace * remove sidebar test * make nav bar links responsive * make navbar responsive * cleanup and styling * nav pills responsive design galaxy fold

RuthNjeri added 10 commits December 4, 2020 16:44

all posts route

1d350a1

add to do item

28b874e

notes controller

9086169

remove previous code and inline comments

470535f

remove inline comments

c3eb81d

reuse published_notes for popular, recent, liked

c5954b6

implements review feedback

2aac988

fix order and increase limit

39b3da8

fixed tests

09d035c

all posts design

1ab9daf

RuthNjeri added 2 commits December 14, 2020 20:25

revert pagination code

c99d295

revert pagy code in wiki

23a5cc4

RuthNjeri changed the title ~~[WIP] All Posts Design~~ All Posts Design Dec 14, 2020

RuthNjeri requested review from jywarren, cesswairimu and sagarpreet-chadha and removed request for jywarren December 14, 2020 17:44

RuthNjeri added the outreachy label Dec 14, 2020

RuthNjeri added this to the New Dashboard Implementation milestone Dec 14, 2020

sagarpreet-chadha reviewed Dec 14, 2020

View reviewed changes

jywarren changed the title ~~All Posts Design~~ [Outreachy] All Posts Design Dec 14, 2020

jywarren requested changes Dec 14, 2020

View reviewed changes

remove target blank from research note link

f89974c

RuthNjeri added 3 commits December 17, 2020 14:13

remove sidebar test

a532050

Merge branch 'add_all_posts_route' into all_posts_design

d827d11

Merge branch 'main' into all_posts_design

654c7b2

RuthNjeri added 3 commits December 17, 2020 15:25

make nav bar links responsive

6b9f2ca

make navbar responsive

b0741f0

cleanup and styling

687cd63

Merge branch 'main' into all_posts_design

cb0b69d

nav pills responsive design galaxy fold

d057e97

RuthNjeri closed this Dec 18, 2020

RuthNjeri reopened this Dec 18, 2020

RuthNjeri closed this Dec 18, 2020

RuthNjeri reopened this Dec 18, 2020

jywarren approved these changes Dec 18, 2020

View reviewed changes

jywarren merged commit 2d3b9c8 into publiclab:main Dec 18, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Outreachy] All Posts Design #8848

[Outreachy] All Posts Design #8848

RuthNjeri commented Dec 14, 2020 •

edited

gitpod-io bot commented Dec 14, 2020 •

edited

sagarpreet-chadha left a comment

RuthNjeri commented Dec 14, 2020

jywarren commented Dec 14, 2020

jywarren Dec 14, 2020

RuthNjeri Dec 15, 2020

jywarren Dec 15, 2020

RuthNjeri Dec 15, 2020

jywarren commented Dec 14, 2020

jywarren commented Dec 14, 2020

RuthNjeri commented Dec 15, 2020

codecov bot commented Dec 17, 2020 •

edited

RuthNjeri commented Dec 17, 2020 •

edited

jywarren commented Dec 17, 2020 via email

RuthNjeri commented Dec 17, 2020

jywarren commented Dec 17, 2020 via email

jywarren commented Dec 17, 2020

codeclimate bot commented Dec 18, 2020

RuthNjeri commented Dec 18, 2020

gitpod-io bot commented Dec 18, 2020

gitpod-io bot commented Dec 18, 2020

jywarren commented Dec 18, 2020

cesswairimu commented Dec 18, 2020

[Outreachy] All Posts Design #8848

[Outreachy] All Posts Design #8848

Conversation

RuthNjeri commented Dec 14, 2020 • edited

gitpod-io bot commented Dec 14, 2020 • edited

sagarpreet-chadha left a comment

Choose a reason for hiding this comment

RuthNjeri commented Dec 14, 2020

jywarren commented Dec 14, 2020

jywarren Dec 14, 2020

Choose a reason for hiding this comment

RuthNjeri Dec 15, 2020

Choose a reason for hiding this comment

jywarren Dec 15, 2020

Choose a reason for hiding this comment

RuthNjeri Dec 15, 2020

Choose a reason for hiding this comment

jywarren commented Dec 14, 2020

jywarren commented Dec 14, 2020

RuthNjeri commented Dec 15, 2020

codecov bot commented Dec 17, 2020 • edited

Codecov Report

RuthNjeri commented Dec 17, 2020 • edited

jywarren commented Dec 17, 2020 via email

RuthNjeri commented Dec 17, 2020

jywarren commented Dec 17, 2020 via email

jywarren commented Dec 17, 2020

codeclimate bot commented Dec 18, 2020

RuthNjeri commented Dec 18, 2020

gitpod-io bot commented Dec 18, 2020

gitpod-io bot commented Dec 18, 2020

jywarren commented Dec 18, 2020

cesswairimu commented Dec 18, 2020

RuthNjeri commented Dec 14, 2020 •

edited

gitpod-io bot commented Dec 14, 2020 •

edited

codecov bot commented Dec 17, 2020 •

edited

RuthNjeri commented Dec 17, 2020 •

edited