Relocate Intro Videos

[Chinonyemildred]

2831 I observed that introductory videos which are to introduce a new comer to the community, the library and what the community stands for, was located at after the lists of tutorials, making them appear below the fold.

This means that a new comer would have to scroll down before finding out 'who' the community is.

I suggested relocating the videos to come above the fold, so a new comer sees them first. @bebatut suggested that we make them stay on a right column and keep the tutorials on the left column.

We decided to go with that and I worked on the modification. I also took responsiveness into consideration across large, medium and small screens.

[bebatut]

It looks quite nice:

Some comments

• Maybe the right column could be a bit smaller than the left one
• I would put "Galaxy Tips & Tricks", "Data Science Survival Kit" and maybe "Galaxy for Developers and Admins" in the left column below
• Maybe putting "How to contribute?" and "Galaxy for Contributors and Instructors" below the videos

• Some content has disappear (the news, tweets, the hall of fame):

  

It seems that there is a conflict on the file you edited with the current version of the file in GitHub. Have you ever solved git conflicts? Can you try to solve the conflict? Do you need help?

[shiltemann]

I like this as well, perhaps we can add the news and tweets on the right column as well, perhaps under the first video? I think it would be nice to have the news feed more prominent as it announced new tutorials, or updates interesting for contributors.

So maybe all the tutorials on the left, and in the right column something like:

1. "Welcome to the GTN" video
2. News feed (we can play around with the number of items to show)
3. "Join the community" Video
4. Tweets
5. Hall of Fame
6. Map of GTN

Depending on how long the left column with tutorials gets, we can match the height on the right, and have the rest of the above list below the two columns if needed.

and I agree with @bebatut that perhaps the left column could be a bit wider than the right

What do you think?

Maybe you can try a couple of these different ideas and post some screenshots here?

We would also have to take into account how this will look on mobile devices and small screens, where it will become a single-column format

[Chinonyemildred]

It looks quite nice:

Some comments

• Maybe the right column could be a bit smaller than the left one

Okay, this looked pretty nice in balanced proportion. We'll try this suggestion and see if it'll look better :)

• I would put "Galaxy Tips & Tricks", "Data Science Survival Kit" and maybe "Galaxy for Developers and Admins" in the left column below
• Maybe putting "How to contribute?" and "Galaxy for Contributors and Instructors" below the videos

Okay this makes a lot of sense. It was my initial plan before I went for this

• Some content has disappear (the news, tweets, the hall of fame):

Oops! I'll take a quick look at it and make corrections. Thank you so much for pointing it out!

It seems that there is a conflict on the file you edited with the current version of the file in GitHub. Have you ever solved git conflicts? Can you try to solve the conflict? Do you need help?

I noticed it too. I've made some study on how to take it out. I'll give you feedback and questions especially when I run into roadblocks. Thank you!

[Chinonyemildred]

I like this as well, perhaps we can add the news and tweets on the right column as well, perhaps under the first video? I think it would be nice to have the news feed more prominent as it announced new tutorials, or updates interesting for contributors.

So maybe all the tutorials on the left, and in the right column something like:

1. "Welcome to the GTN" video
2. News feed (we can play around with the number of items to show)
3. "Join the community" Video
4. Tweets
5. Hall of Fame
6. Map of GTN

Depending on how long the left column with tutorials gets, we can match the height on the right, and have the rest of the above list below the two columns if needed.

and I agree with @bebatut that perhaps the left column could be a bit wider than the right

What do you think?

I love your ideas! I think since our goal is to provide users especially new comers a good navigation experience, we can leave both videos right on top of each other and the news feed, tweets, hall of fame and map can follow suit right under in the right column. Keeping all the tutorials to the left column. It will look a lot more organized and still give a new user the immediate information about the GTN and the community.

Maybe you can try a couple of these different ideas and post some screenshots here?

Alright, I'll do that.

We would also have to take into account how this will look on mobile devices and small screens, where it will become a single-column format.

Yeah, that's very important Thank you so much! :)

[shiltemann]

I think since our goal is to provide users especially new comers a good navigation experience

Agreed, but we need to balance the experience not only for newcomers, but also frequent visitors and experienced users, for whom the news and twitter feeds might be more informative than a video they've already seen. We can play around with the order and size of things a bit to see what works.

But above all, thanks for working on this!

[Chinonyemildred]

I have made a second commit, taking into consideration all our suggestions. It is also responsive and looks beautiful too! Our new comers and normal users can have the best experience too :)

[shiltemann]

@Chinonyemildred could you post some screenshots here? That way everybody can have a look and give their opinion/suggestions etc :)

[bebatut]

It looks like this right now:

• I feel like the News are a bit too big. Maybe changing the font size to have it same as the other elements
• I would put the GTN tweets below the Galaxy video
• The Galaxy Training Network maps and the Contributor Hall of Fame should probably be side by side
• The text in the section "Acknowledgement und funding" should not be centered

@Chinonyemildred could you try with these suggestions and post screenshots? Thanks

[Chinonyemildred]

Thank you so much @bebatut for the screenshot and suggestions. I pretty much tried out a couple of them before settling for this.

I wanted the galaxy tweets below the the community video but it seemed less obvious beside the map, due to sizing of the columns (Left column is wider than the right column).

Having the contributor hall of fame and map on the same level may mean some little empty space above the row. Can we go ahead with it like that?

I'll quickly address the font size in the news and the centered text in Acknowledgement.

[Chinonyemildred]

Here are screenshots of the page layout now:

Took it on my phone while previewing the work, the tweet image is there but didn't load while I was taking the screenshot...

I had difficulty changing the font size of the news texts. I found this code I couldn't decipher:

Please what can I do about it? @bebatut @shiltemann

[bebatut]

{% include _includes/newslist.html %} means that Jekyll needs to import the content of _includes/newslist.html file there

[Chinonyemildred]

{% include _includes/newslist.html %} means that Jekyll needs to import the content of _includes/newslist.html file there

Okay, that means I'll go to that html file to edit the font size right?

[shiltemann]

Okay, that means I'll go to that html file to edit the font size right?

Indirectly. The styling will be done in CSS, and we might have to override the CSS coming from bootstrap (we can help with that) What you can do in that file however, is change the number of news items to show from 6 to maybe 4 or 5 to save on some space?

P.S. I would try to resolve the merge conflict sooner rather than later, sometimes the longer you wait the harder it gets (again, if you need help with this just let us know! they can be a bit tricky if you're not used to them)

And a final tiny general git tip: try to make your commit message more descriptive, stating what you've done ("moved news section" etc, rather than "Relocate Videos" for every commit), helps you and us keep track of what was done in which commit.

Let me know if you would like me to do any of these things, I can add a commit to your PR as well that you can work further on.

[hexylena]

Please try swapping out the h5 for a div in the newslist, we already have a strange semantic heading hierarchy, this would be a chance to help fix that.

[Chinonyemildred]

Thank you so much @shiltemann. I really need help with the git conflict. Can you help me please? I tried but I haven't experienced this before so I don't know how to resolve it accurately.

Thanks for this suggestion, I'll reduce the number of items....this should work some magic!

Thank you so much :)

[Chinonyemildred]

@hexylena, thank you for this suggestion, I think it will just be the save of the day. I had changed h5 to h6 and the color immediately changed from black to blue, when I ctrl z back to h5, the black color of the texts returned. I'm not familiar with the CSS parts so I couldn't do anything but leave and report the road block I encountered.

Thank you so much!❤

[shiltemann]

@Chinonyemildred no worries! So, the conflict will look something like this in the file (you can see it using the "Resolve Conflicts" button at the bottom of this page, or if you are using the command line after you merge the main branch into yours):

           <h2>Galaxy Tips & Tricks</h2>
            <table class="table table-striped">
<<<<<<< Relocate-Videos
                    <thead>
                        <tr>
                            <th>Topic</th>
             [..]

=======
                <thead>
                    <tr>
                        <th>Topic</th>
                        <th>Tutorials</th>
               [...]

>>>>>>> main
            </table>
            <h2>Galaxy for Developers and Admins</h2>

This is where git does not know how to merge the code from your branch (First half between the <<< and === markers), and the code from the main branch (below that). This usually happens because somebody else made a change to the same code after you created your branch. What you need to do is provide it with the final way the file needs to look. (So look at the difference between the two code blocks and see what the differences are and what you would like to keep from each, etc).

It appears that the main branch just has different indentation, so you can just use the code from your branch and fix the indentation there. You should be able to do this via the GitHub web interface.

I am also happy to do it for you if you are feeling unsure about it, just say the word, but I just though I would explain the principle :)

[Chinonyemildred]

@shiltemann I still feel confused, so I might need to study this aspect of git. At the same time, I wouldn't want to still leave this conflict open, please if you don't mind, can you help me resolve it? I'm so thankful for your guidance ❤

[shiltemann]

@Chinonyemildred ok done! Please pull in the new changes before adding more commits (using git pull)

[Chinonyemildred]

Okay, thank you so much @shiltemann, thank you!❤

Please should I be worried about the failing check?🤔

[shiltemann]

I will look into the failing test too

[Chinonyemildred]

Thank you so much!

[Chinonyemildred]

Yay! Thank you so much!🎉🎉. The only thing pending is the news section and we can say we're done. I appreciate you for your help❤❤❤

[shiltemann]

awesome! One more suggestion: the tagline under the first video is more related to the second video, maybe remove it, or change to something like "watch the video below to find out more about the GTN" or something, what do you think?

[shiltemann]

Maybe remove the word "Galaxy" from the title here so it fits on one line?

[Chinonyemildred]

awesome! One more suggestion: the tagline under the first video is more related to the second video, maybe remove it, or change to something like "watch the video below to find out more about the GTN" or something, what do you think?

Thank you for pointing it out. I just realized that the tagline is the same as the second video. I'll edit it. Your tagline suggestion has a clear call to action, I love it❤. Thank you!

[Chinonyemildred]

Maybe remove the word "Galaxy" from the title here so it fits on one line?

Okay, this can work. Removing it from the heading doesn't take out it's emphasis as the tagline still retains the name. So we practically kill two birds with one stone.

[Chinonyemildred]

I have edited the tagline for the GTN video and the title of the community video. I also reduced the newslist limit as @shiltemann suggested and it did make space for the other contents of the column.

I changed h5 to div as suggested by @hexylena but the color still changed to blue. I think it's something that will be addressed via the CSS file, so I'll need your help with that please.

Although I noticed that reducing the number of news brought a balance to the look of the page, reducing the font size may no longer be needed. What do you think?

Here is how our page looks like now:

We're good to go right?

[Chinonyemildred]

Is this okay?🤔

[shiltemann]

Very nice @Chinonyemildred! I think it could still be worth reducing the font size for the news, it will fit better with the surrounding text, and may create space to have an extra news item in the same height we have now. I can try to help with this today :+1:

[Chinonyemildred]

Thank you @shiltemann, the font size is the only pending thing. Thank you for your help with it❤❤

[shiltemann]

ok, pushed a change, you can do a pull to view it locally, made text smaller which allowed a 5th item. here is a screenshot, what do you think?

[bebatut]

Thanks @Chinonyemildred for the changes there. It looks nice!

In there :

We use different headlines:

• Welcome to the Galaxy Training!
• Welcome to the GTN!

But we never explained what does GTN stand for

[Chinonyemildred]

@shiltemann it looks nice, it still retained its weight which give it some emphasis yet keeping the balance.....,❤❤ @bebatut we can do the explanation in the tagline beneath WELCOME TO GTN: 'Watch the video to find out about Galaxy Training Network'. My worry may be the length of the sentence (it may break into two lines). I guess of it does, I can just edit it to 'Find out about Galaxy Training Network'.

What do you think?

[bebatut]

Sounds like a good suggestion :smile:

[Chinonyemildred]

Now we're good to go! :)

[shiltemann]

ooh yay, excited to merge this! Thanks so much @Chinonyemildred, great work!

[hexylena]

It looks great!!

[Chinonyemildred]

Wow! It looks beautiful❤. Thank you so much @bebatut, @shiltemann and @hexylena for your guidance and help through the process.❤❤❤❤