Adding main card tag to the individual tags page

[gautamig54]

Fixes #5890 (<=== Add issue number here)

Mobile view :

Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!

• 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

We're happy to help you get this ready -- don't be afraid to ask for help, and don't be discouraged if your tests fail at first!

If tests do fail, click on the red X to learn why by reading the logs.

Please be sure you've reviewed our contribution guidelines at https://publiclab.org/contributing-to-public-lab-software

Thanks!

[gautamig54]

@CleverFool77 @jywarren Kindly have a look here.
Minor tweeks remaining for the mobile view I guess.

[plotsbot]

	1 Warning
⚠️	There was an error with Danger bot’s Junit parsing: No JUnit file was found at output.xml

	3 Messages
📖	@gautamig54 Thank you for your pull request! I’m here to help with some tips and recommendations. Please take a look at the list provided and help us review and accept your contribution! And don’t be discouraged if you see errors – we’re here to help.
📖	It looks like you haven’t marked all the checkboxes. Help us review and accept your suggested changes by going through the steps one by one. If it is still a ‘Work in progress’, please include ‘[WIP]’ in the title.
📖	#

Screenshots 📸 (click to expand)

5938-test_viewing_question_post.png

5938-test_wiki.png

5938-test_tag_page.png

5938-test_login.png

5938-test_wiki_page_with_inline_grids.png

5938-test_questions.png

5938-test_stats.png

5938-test_tags.png

5938-test_people.png

5938-test_front.png

5938-test_signup.png

5938-test_questions_shadow.png

5938-test_blog.png

5938-test_front_page_with_navbar_search_autocomplete.png

5938-test_viewing_the_dashboard.png

Learn about automated screenshots

Generated by 🚫 Danger

[jywarren]

Looks fantastic! Here's the auto-generated screenshot too:

I was thinking the "Add one now" button doesn't seem clearly linked to the above statement 'has no wiki page'. Would it work better simply as a text link at the end of the sentence "has no wiki page"?

Also, the ... menu may be better in the true upper right corner of the box. Is there a way to do that in the mobile view?

Can the Subscribe button text be white?

Under Learn more >> - you can use this character: » -- which can be generated with the HTML special code ».

What happens with a really long title? Does it wrap nicely?

[gautamig54]

Thanks @jywarren for your feedback. I'll make the suggested changes!

[gautamig54]

Instead of "Add one now" can we change the text saying, "add a wiki page" or something like this?

[gautamig54]

@jywarren I made the said changes. Have a look at these. Thanks!

[jywarren]

This looks great! Ready for a merge now?!

…

On Wed, Jun 26, 2019, 4:19 AM Gautami Gupta ***@***.***> wrote: @jywarren <https://github.com/jywarren> I made the said changes. Have a look at these. Thanks! [image: Screen Shot 2019-06-26 at 1 50 34 PM] <https://user-images.githubusercontent.com/35326753/60163348-07901c00-9819-11e9-812d-02d695a290c9.png> [image: Screen Shot 2019-06-26 at 1 50 54 PM] <https://user-images.githubusercontent.com/35326753/60163364-0f4fc080-9819-11e9-8b8f-95e0e049b3ac.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5938?email_source=notifications&email_token=AAAF6J3Z2UVRGYMH6SCWQE3P4MQ6FA5CNFSM4H2WCCQKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYSXQXY#issuecomment-505772127>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAF6J3BAA7GLPTGPOUMSM3P4MQ6FANCNFSM4H2WCCQA> .

[gautamig54]

Yes @jywarren! I think it is ready for merge. Any feedbacks @CleverFool77 ?

[CleverFool77]

Hi @gautamig54
I saw in style guide that even in mobile form, the main card was above the image like its in desktop.
But in the image you uploaded, the main card is below the image for mobile form.
So what do we need to follow.
I want to know that.

Cc : @jywarren

[jywarren]

I thought about that but I think it's nice to see the image. Can we say that if there is no image, then it does overlap, but if there is an image we do? Thanks!!! Good catch!

…

On Thu, Jun 27, 2019, 11:16 AM Lekhika Dugtal ***@***.***> wrote: ***@***.**** commented on this pull request. Hi @gautamig54 <https://github.com/gautamig54> I saw in style guide that even in mobile form, the main card was above the image like its in desktop. But in the image you uploaded, the main card is below the image for mobile form. So what do we need to follow. I want to know that. Cc : @jywarren <https://github.com/jywarren> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5938?email_source=notifications&email_token=AAAF6J3B2UD77UGVP6IMERLP4TKSPA5CNFSM4H2WCCQKYY3PNVWWK3TUL52HS4DFWFIHK3DMKJSXC5LFON2FEZLWNFSXPKTDN5WW2ZLOORPWSZGOB43YUCA#pullrequestreview-255298056>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAF6J6BUVCWGEADE3AYKZTP4TKSPANCNFSM4H2WCCQA> .

[CleverFool77]

It does makes sense. We can have main card overlap when there is no wiki page or wiki page doesn't have an image.

[gautamig54]

I will then implement this, that if there is no wiki image, then we can overlap the tag card.

[gautamig54]

I had a doubt. With the image, we are also showing the number of people discussing the topic. That will also be overwritten.
Should we just leave it like this for now?

[jywarren]

Hmm. What if we make the number move to upper right corner for mobile size? Is that weird?

…

On Fri, Jun 28, 2019, 4:17 AM Gautami Gupta ***@***.***> wrote: I had a doubt. With the image, we are also showing the number of people discussing the topic. That will also be overwritten. Should we just leave it like this for now? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5938?email_source=notifications&email_token=AAAF6J3H6ZRLDIF6PCWXHJTP4XCJBA5CNFSM4H2WCCQKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYZNFXQ#issuecomment-506647262>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAF6J7UYB2Z7RLQOTCZGJTP4XCJBANCNFSM4H2WCCQA> .

[gautamig54]

I think that might be a bit weird. @CleverFool77 What do you think?

[CleverFool77]

I can't say it exactly regarding position gautami. How about having a a mockup first. Then only we can decide maybe.

[gautamig54]

@jywarren I am not able to understand how to move the number in the upper right corner. Can you help us with a mock up?
Also, I was thinking if we can have the number on the main card itself instead in the bottom right corner of the image. In that case this issue can easily be handled?

[CleverFool77]

Hi gautami,
Regarding that, you can set the position of div having people following as per the screen size.
Eg - in less than medium, it would be at different position. Like this.

[CleverFool77]

And another way is to play with Bootstrap4 visibility feature. You can do this through this too.
Have it visible at one position in one kind of screens and another position at different screen.

[jywarren]

I just merged #5948, so we can do this next if it's ready? Thanks all, this is very exciting!!!

[jywarren]

I'm going to merge this as a short term solution and we can continue refining as you're discussing in a follow-up. That way we get to look at the whole tag page completed now!

[jywarren]

Coming up soon at http://stable.publiclab.org!!!