Ways to cover the excessive empty space on the website

[sakshi-dhamija]

Problem: The blank space on the left side increases even further with an increase in previously seen terms. It makes the website look Empty.

Possible Solutions:

1. We can move the previously seen section from the right side to the left side.
2. We can add a new feature on the left side where a user would be able to save certain terms. It'll be different from previously seen since previously seen contains all terms user visited, while the save feature will contain terms that the user wants to save and revisit.

Can @matuskalas @hmenager @bryan-brancotte suggest if adding a new feature is more beneficial or there's some other way we can tackle this?

[HagerDakroury]

Hi @secrashi,

I'm just dropping by to make an additional suggestion.

As a quick fix, the tree container can expand vertically to fill up the white space (instead of it having a fixed size). That wouldn't require introducing a new feature and also would allow viewing more of the tree (which is a good thing!).

[bryan-brancotte]

Hi @secrashi

Whatever the solution, we should keep in mind that it has to also work with smartphone, in small screen configuration the right panel is moved after the tree, and the tree only occupy 70% of the screen so we can grab the page (a discussion can be read in #69)

I would have suggested a third option, make the scrollbars only for the right panel, but I am curious about your option 2 (bookmark), and wonder what edam curators such as @hmenager and @matuskalas
could do with such new functionality.

Just an idea in the air: what use could curators could make of saving the whole expended/collapsed stat of the tree ? A bookmark could be not just an term, but a list of term that should be visible on the screen

[sakshi-dhamija]

Hi @bryan-brancotte, yes a bookmark might not just be a term but a list of terms, and we can show them on our website in the same way as previously seen or maybe a @hmenager @matuskalas can suggest a better UI option. Also, we can make the bookmark terms flow down the same way previously seen terms do!
I wan inactive for some time due to my exams but now if you approve I can proceed with this!

[sakshi-dhamija]

• This is almost how the final website would look after we add a bookmark option. I'm planning to add a bookmark icon near the edit and add icon.

• Also in mobile view or when previously seen terms and details box of current concept would float down then the order would be:

1. Tree
2. Details box of the current term.
3. Previously seen terms.
4. Bookmarked terms.

I'm very eager to work on this feature, Can @hmenager @bryan-brancotte @matuskalas approve of this, or else can suggest something better?

[bryan-brancotte]

Hi @secrashi

I would really liked to have curators mind on this aspect, but indeed I like the idea of term bookmark, and even more whole tree state bookmark. I think you can move on the first step and PR term bookmarks. Whole tree state bookmark can come later as an extension of this feature if needed.

I think the order you propose for low width screen is good. I think that bookmark should be less wide, maybe in your screen shot at least in two sub columns ? or even an horizontal list ? I don't know yet, remarks, question and suggestions will come later when the feature start to be usable.

Good luck :)

[matuskalas]

Hi all! I agree that this is something to think about, thank you for bringing it up @secrashi! These are all good points @secrashi @HagerDakroury @bryan-brancotte and options to consider, but I'm personally very unsure what would be the best... 🤔

(maybe a bit leaning towards the idea of extending the tree view vertically - that might be useful for other purposes, too)
(i like the bookmark idea, too!)

[sakshi-dhamija]

Thank you so much @bryan-brancotte @matuskalas for your reviews!

but indeed I like the idea of term bookmark, and even more whole tree state bookmark. I think you can move on the first step and PR term bookmarks. Whole tree state bookmark can come later as an extension of this feature if needed.

Sure, it might be a bigger task but I would like to work on the whole tree state bookmark. I would make a PR for intial step asap, and then work on this!

I think that bookmark should be less wide, maybe in your screen shot at least in two sub columns ? or even an horizontal list ? I don't know yet, remarks, question and suggestions will come later when the feature start to be usable.

That indeed is a great suggestion, I think I too have to experiment things out to see what suits best. Meanwhile, I'll keep you updated with any changes I make!

(maybe a bit leaning towards the idea of extending the tree view vertically - that might be useful for other purposes, too)

Thanks @matuskalas, that just gave me an idea about a new feature that we can add to extend the tree vertically. I'll soon describe this in a new issue and mention it here!
Thank you so much again!

[bryan-brancotte]

After seeing work done in #195 I think we indeed should keep the proposed order for vertical layout (mobile): tree, bookmarks, details.

If we want to have bookmark at the end, we should use:

@media (min-width: 1200px){
    /* columned layout, allows to have a panel at the bottom left */
    #main {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
    #main > div:nth-child(1) {
      grid-column: 1 / 3;
    }
    #main > div:nth-child(2) {
      grid-column: 3;
      grid-row: 1 / 6; /* I don't understand either why 1/4 or 1/5 wouldn't work */
    }
    #main > div:nth-child(3) {
      grid-column: 1 / 3;
    }
}

@@ -134,7 +134,7 @@
         </div>
     </div>
     <div class="content row" id="main">
-        <div class="col-xs-12 col-lg-8">
+        <div class="col-xs-12">
             <div class="panel panel-default" id="tree-and-controls">
                <div class="loader-wrapper">
                   <i class="fa fa-spinner fa-spin fa-10x"></i>
@@ -221,11 +221,14 @@
                 <div class="tooltip"></div>
             </div>
         </div>
-        <div class="col-xs-12 col-lg-4" id="edamAccordion">
+        <div class="col-xs-12" id="edamAccordion">
             <div id="history-separator" class="panel-separator temp">
                 Previously seen:
             </div>
         </div>
+        <div class="col-xs-12" id="bookmarks">
+            bookmarks here
+        </div>
     </div>
 </div>
 <div class="footer-tools"> <a class="back-to-top" href="#top" title="Reach the top of the page">Back to top</a> </div>