search

Hypertopic / Cassandre

Diary for qualitative analysis
https://hypertopic.org/cassandre
GNU Affero General Public License v3.0
25 stars 7 forks source link

LaSuli highlights on a memo should not 'move' between creation and display #85

Closed benel closed 4 years ago

benel commented 5 years ago

While it's not really a "bug" in Cassandre, the DOM structure of Cassandre causes LaSuli highlights to "move" depending on the user that is connected.

Capture d’écran 2019-04-25 à 11 22 44 Capture d’écran 2019-04-25 à 11 23 06

A solution would be that the nav element would be put after the main element in the DOM and that positioned to the top owing to the stylesheet. @christophe-lejeune What do you think about it?

christophe-lejeune commented 5 years ago

If the position of the highlights depends on the number of characters from the top of page, a similar issue is likely to occur with the left panel. This panel includes groundings ("ancrage" on the screenshots).

If a highlight is created, then a grounding is added (or removed, or renamed), LaSuli highlights are also likely to "move" (as when user sign-in or sign-out). Of course, Bootstrap could help to move the panel after the "content" section, and force a different position when rendering. However, perhaps positioning the elements (navbars, panels, content) might become delicate.

For the same reason, I suppose that any update in Cassandre source code (like, for instance, renaming the classes introduced in a new version of Bootstrap) would induce such a move in LaSuli's highlights. Although I have currently no intention of this kind, it is likely to occur one day or another.

However, perhaps my present contribution rests on the wrong assumption that highlights coordinates are relative to beginning of the HTML page. Could you confirm of infirm this ?

benel commented 5 years ago

If the position of the highlights depends on the number of characters from the top of page, a similar issue is likely to occur with the left panel. (...) However, perhaps my present contribution rests on the wrong assumption that highlights coordinates are relative to beginning of the HTML page. Could you confirm of infirm this ?

I'm not sure about your exact assumption. Coordinates are relative to the text you get when you remove HTML markup.

If you have the following file:

<html>
  <body>
    <p>Hello there!</p>
  </body>
</html>

Hello coordinates are [0, 5].

The problem is when a part on the beginning is changing ever and ever. For example: 

<html>
  <body>
    <nav><a>Log in...</a></nav>
    <p>Hello there!</p>
  </body>
</html>

becoming:

<html>
  <body>
    <nav><b>Alice</b> logged in</nav>
    <p>Hello there!</p>
  </body>
</html>

Then Hello coordinates is [10, 15] when no one is logged and [16, 21] when Alice is logged.

My proposal was to move the nav bar at the end of the body element:

<html>
  <body>
    <p>Hello there!</p>
    <nav><a>Log in...</a></nav>
  </body>
</html>

so that Hello coordinates are [0, 5] independently from who is connected or not.

Of course, in order not to change the interface, the nav bar would be positioned on the top with the use of a CSS.

benel commented 5 years ago

Please note that the left panel problem is a bit different: it will cause an offset if data are changed but not if the status of the browser changes. It could be fixed with the same strategy, but the problem is less likely to happen.

christophe-lejeune commented 5 years ago

As my example with Bootstrap renamed classes illustrates, I was assuming that LaSuli uses unfiltered source code as a reference for coordinates. Your example makes clear that my assumption was wrong. This also confirms that the evolution of Cassandre source code won't cause highlights to move (good news).

I agree that the left panel issue is not exactly the same (because it is not a matter of browser status)... but I think this problem is far from being unlikely. It should be anticipated and dealt with in the same movement. Indeed, qualitative researchers are constantly renaming memos (that provide groundings to other memos), even after having highlighted a field memo. They also frequently modify groundings. To avoid such modifications to break highlights coordinates, the left panel should be moved (with the navbar) after the content column.

Such a refactoring should not be too tricky to achieve :-) I am going to test this in the future...

christophe-lejeune commented 5 years ago

Do not hesitate to confirm that the refactoring helped. If required, I will adapt the code in order for Cassandre to improve compatibility with LaSuli.

benel commented 5 years ago

When logging in Cassandre, there is a 8 character offset (to the left) due to the spaces added by the modify_rights button.

image

Would it be feasible to put the "share" widget (data and button) outside the <main> element (or at least, after the content text)?

benel commented 5 years ago

The same widget is also a source of offsets when the language of the interface change.

christophe-lejeune commented 5 years ago

The "rights" widget is planned to be refactored, in several respects : the way fullnames and userid are paired, the icon that will replace ..., the way relative date is processed.

This refactoring may of course face the issue you are reporting here-above... If the 8 characters offset is solely due to the button, perhaps the introduction of the icon (as it is planned) will suffice to solve the problem. Do you have any idea why the offset is of 8 characters ? I suppose 3 of them are for the ... but I am unsure for the remaining five characters.

However, replacing the ... button by an icon won't solve the problem due to language change. A solution would be to move the "rights" widget at the end of the document. I however doubt Bootstrap order would help, as for nav widgets, to move the "rights" widget to its current position (perhaps some CSS would do the job).

Another solution would be to move this widget inside the header nav, as intended in the first mockups. This solution thus moves the widget outside `main, as you indicate. I however am still not fully convinced by the way it will show on the interface; I have to think about it.

benel commented 5 years ago

Do you have any idea why the offset is of 8 characters ?

Yes, indeed. This is due to a difference in the PCDATA character numbers (PCDATA in SGML/HTML/XML means the characters you get when you remove the markup).

In the screenshot I provided, if you compare lines in red and lines in green (and remove markups in your mind), you can see a 8 character difference between those two lines:

span>              </p>
span>                      <button

These 8 spaces probably come from the indentation of

benel commented 5 years ago

move the "rights" widget to its current position (perhaps some CSS would do the job).

Yes, that was my general idea...

benel commented 5 years ago

And in fact, the offset was bigger, because there also the ... and the spaces before the new </p>.

image

image

benel commented 5 years ago

move the "rights" widget to its current position (perhaps some CSS would do the job).

One solution could be to put the widget after the text and then use CSS flexbox order to switch them. See code and demonstration here: https://stackoverflow.com/questions/26113278/move-one-element-before-another-with-css-html#answer-26113333

However this is something like a hack...

benel commented 5 years ago

However this is something like a hack...

I see no other solution for now...

benel commented 5 years ago

It would be like that: https://jsfiddle.net/benel/b9dz1rht/4/

It is not that horrible, isn't it?

christophe-lejeune commented 5 years ago

This solution indeed is close to (above mentioned) Bootstrap's order (indeed, Bootstrap classes rest on flexbox). The principle is simple (and not that horrible). Implementing this solution will however require some tests, given that the current page design is quite complex (and already involve "order" classes for other elements).

benel commented 5 years ago

In LaSuli, I fixed (see above commit) the offset part due to extra spaces (or tabs). Now the offset is just three characters due to ... that will be fixed by using Bootstrap order as discussed earlier. @christophe-lejeune My students and teaching assistants will start working with Cassandre+LaSuli on the 4th of November. Do you prefer to make the fix in Cassandre yourself or do you prefer that I make it in my own branch?

benel commented 5 years ago

@christophe-lejeune The solution discussed earlier (based on CSS flexbox) works like a charm.

It has been implemented in 6bab8f4 (that you can cherrypick in your own branch or merge later if you prefer).

It has been tested with LaSuli 3.2.4 and the highlights doesn't move anymore between creation and display on: