Connect: visually distinguish CAT-bound institutions

[vladimir-mencl-eresearch]

Hi @zmousm ,

Thanks for the work on #57 - that has finally made CAT usable for us.

And we started using it. And we realized we need to help our users navigate through the Connect page - we thought we should increase the visual difference between CAT-enabled institutions and those that just link to the Participants page.

I've added a light border around the CAT-enabled ones, plus added an icon for them (ended up picking "wifi" from FA) to be the counterpart of the link arrow. Than just had to add data-toggle attribute for the non-CAT institutions as well to allow positive selection in the CSS.

Please let me know if this looks OK to you to merge (on visual and code aspects).

Thanks a lot in advance for getting back to me.

Cheers, Vlad

[vladimir-mencl-eresearch]

Hi @zmousm , FYI, you can see this in action at https://member.eduroam.net.nz/connect - Screenshot attached.

[zmousm]

Hello @vladimir-mencl-eresearch. I'm glad you found eduroam connect useful :)

This is how your patch looks on eduroam.gr:

I think your visual tweaks make the institution list look a bit too busy. Mostly all our member institutions do use CAT already, but this is apparently not yet the case for your federation, so it is understandable the visual distinction makes more sense there. In this respect I think such tweaks are not suitable for general consumption, and I'm open to discuss if you feel otherwise, but let's see how you can have them in your deployments, without them getting in the way.

We had built in a mechanism which allows overriding parts of the template for this page, through the use of block tags. It is documented here:

https://github.com/grnet/djnro/blob/master/docs/installation/install.md#connect-page-customization-for-different-eduroam-cat-instances

You can add a cat_institution_selector block to power this case:

--- a/djnro/templates/front/connect.html
+++ b/djnro/templates/front/connect.html
@@ -68,6 +68,7 @@
        {% for i in institutions %}
        {% with catidp=institutions_cat|dict_lookup:i.institution.pk %}
        <li>
+         {% block cat_institution_selector %}
          {% if catidp and catexists %}
          <a class="btn" data-toggle="modal" data-target="catModal"
             data-idu="{% url 'participants' %}"
@@ -78,6 +79,7 @@
          {% endif %}
          <span class="title" {% if i.oper_name %}data-on="{{i.oper_name}}"{% endif %}>{% tolocale i.institution LANGUAGE_CODE %}</span><span class="small-small hidden">&nbsp;<sp
          </a>
+         {% endblock %}
        </li>
        {% endwith %}
        {% endfor %}

We can merge this in DjNRO (please remember to also document this block).

You can then create djnro/templates/front/cat_connect/connect.html with such content:

{% extends "front/connect.html" %}
{% load staticfiles %}
{% load i18n %}
{% load tolocale %}

{% block cat_institution_selector %}
      {% if catidp and catexists %}
      <a class="btn" data-toggle="modal" data-target="catModal"
         data-idu="{% url 'participants' %}"
         data-iid="{{ i.institution.pk }}" data-catidp="{{catidp}}" tabindex="0">
      {% else %}
      <a class="btn" data-iid="{{ i.institution.pk }}"
         href="{% url 'participants' %}" tabindex="0">
      {% endif %}
      <span class="title" {% if i.oper_name %}data-on="{{i.oper_name}}"{% endif %}>{% tolocale i.institution LANGUAGE_CODE %}</span><span class="small-small hidden">&nbsp;<span class="distance"></span>&nbsp;Km</span>&nbsp;<i title="{% trans 'See info (instructions, contacts) for this institution' %}" data-toggle="tooltip" data-placement="bottom" class="fa fa-arrow-circle-right text-muted connect-link"></i><i title="Use CAT profile created for this institution" data-toggle="tooltip" data-placement="bottom" class="fa fa-wifi text-muted connect-cat"></i>
      </a>
    </li>
{% endblock %}

{% block extrahead %}
<link rel='stylesheet' href="{% static 'css/nprogress.css' %}">
<link rel='stylesheet' href="{% static 'css/connect.css' %}">
<style>
/* when an institution selector is CAT-bound, the following arrow
   (visual distinction) should be hidden */
ul.insts a[data-toggle="modal"] i.connect-link {
    display: none;
}
/* and instead a different icon shown */
ul.insts a[data-toggle="modal"] i.connect-cat {
    display: inline;
}
/* but this icon should be hidden otherwise */
ul.insts a:not([data-toggle="modal"]) i.connect-cat {
    display: none;
}

/* distinguish CAT-enabled institutions */
ul.insts a[data-toggle="modal"] {
    border: .1rem solid green;
}
</style>
{% endblock %}

And point to it in your settings:

CAT_CONNECT_TEMPLATE = {
    'production': 'front/cat_connect/connect.html',
}

Some notes:

• You can of course move the CSS to a static asset rather than an inline style, and reference that, at the expense of complicating the not getting in the way part a little more.
• You will notice the CSS is slightly different from yours. This is because the cidp_unbind_selector.cat_ui event handler unsets the data-toggle attribute, as you already noticed with your last commit. I think it's best to avoid the additional state complexity induced by introducing different values for data-toggle (which comes from bootstrap), but if you were to go that way, you could override the exthandlers.cidp_unbind_selector function passed to ConfigurationAssistantToolUI in overrides. You would likewise need to wrap that part of the template in a block in order to do so.
• As noted in the docs it does not make sense to use translation tags in your template, which is why I removed the tag around the i.connect-cat title attribute value. I kept the tag for the other icon title, as it was copied over, however this runs the risk that the text may go out of sync if it ever gets updated in the DjNRO template, so perhaps you should also remove that tag. I am sorry for this inconvenience but I think this may not be a problem for your use case, as you only care for English?

[vladimir-mencl-eresearch]

Hi @zmousm , thanks a lot for the very quick and very helpful reply!

Agree that in your case, this would look crowded. I'll try to think of of something that would apply only to us ... and minimize the "get in the way part".

In this PR, I ended up doing rather complex gymnastics to introduce a second icon for the CAT-enabled institutions.

The reason for having the second icon was to give a clue to the users that these institutions are CAT enabled.

Institutions that are NOT CAT-enabled end up with the arrow that says "You can't use CAT, you have to follow a link". And to avoid relying only on the visual clue of the arrow, there is a tooltip shown over the arrow.

I wanted to introduce an equivalent of that for CAT-enabled institutions: an icon that says "you can use CAT here", and a place where to put the tooltip with the explanatory text.

Putting the visual details (and the particularly the green frame) aside, would you think of this as generally useful, or rather not?

(I'm leading this towards merging the "wifi" icon, but not the green frame).

I could then do the rest with the existing override mechanism. (Though, thinking whether it would make sense to define a config variable with a name of an extra CSS file to load, avoiding creation of a custom template if the only thing changing is extra CSS ... how would that sound to you?)

Cheers, Vlad

PS: Agree about dropping translations from the page - and yes, you are right, we are running our site as English-only.

[zmousm]

Hi @vladimir-mencl-eresearch

This is how eduroam.gr looks like without the border:

I admit it's not bad but I am really not excited about the icon:

• wi-fi is somewhat too generic, eduroam and CAT are mainly but not exclusively about wi-fi
• eduroam CAT does not have an icon of its' own; there is the eduroam logo, which is not suitable for such use (it is not square and it can not be altered)
• the cog or cogs icons might work, or perhaps some check icon, but again I am really not sure, I would need to try each and think about it

Let me go back to provide some perspective for the design:

• The institution list layout was based on UNINETT eduroam configurator. I really liked the clean design upon which I mostly added some usability tweaks.
• The CAT UI on this page is complemented by showing links and contacts for the particular institution. This (second) part was not completed (which is why the link to this page was not promoted on the front page); it could be a modal on the same or the participants page, or just an anchor there. Precedence is given to CAT, where available. The complementary info is linked from the CAT modal heading and/or the icon next to the institution selector. The arrow is meant to suggest "see also".

In this respect

• the arrow icon was not meant to distinguish institutions which are not "CAT-enabled", although that is perhaps an interesting side effect,
• I still feel an icon denoting "CAT-enabled" institutions is redundant, yet this is understandably somewhat subjective.

We could have a setting (of sorts) to enable showing the "CAT-enabled" icon, but let's be frank, we are clearly stepping into settings bloat territory here -- understanding this customization complexity quite some time ago re-enforced my belief that a separate, replaceable front-end app is the way to go in the long term. We could even have it always on; I would not object if you insist, provided we agree on a suitable icon. However I would suggest that you keep the tweak via a custom template for some time (a couple of months) to see how you like it by then, while we address other matters (such as eduroam db v2), and maybe also have time to think/discuss about the (missing) complementary part I mentioned previously.

I feel that discussing such matters via other means beforehand might be useful, if only for saving some time.

[vladimir-mencl-eresearch]

Hi @zmousm , I take your points - about clean layout and about settings bloat. I'll solve this with a local customized template - thanks again for your input here. I'll close this PR now - thanks again for the feedback. Cheers, Vlad

[zmousm]

@vladimir-mencl-eresearch do you not want to merge this patch so that you can override the institution selector block?

--- a/djnro/templates/front/connect.html
+++ b/djnro/templates/front/connect.html
@@ -68,6 +68,7 @@
        {% for i in institutions %}
        {% with catidp=institutions_cat|dict_lookup:i.institution.pk %}
        <li>
+         {% block cat_institution_selector %}
          {% if catidp and catexists %}
          <a class="btn" data-toggle="modal" data-target="catModal"
             data-idu="{% url 'participants' %}"
@@ -78,6 +79,7 @@
          {% endif %}
          <span class="title" {% if i.oper_name %}data-on="{{i.oper_name}}"{% endif %}>{% tolocale i.institution LANGUAGE_CODE %}</span><span class="small-small hidden">&nbsp;<sp
          </a>
+         {% endblock %}
        </li>
        {% endwith %}
        {% endfor %}