protonet group navigation

The group navigation tabs [Home] [Topics] [Todos] [Events] [Files] and [Notes] are visually quite similar to each other. I wonder if it is possible to improve the usability with a few hacks.

A light gray background makes the buttons easier to recognize as control elements. Furthermore, icons make them more distinctive and easier to distinguish from each other. Size is also an issue. Hence larger buttons are faster to hit and improve usability.

Voilà – move the slider to see the change:

The good news is, all this can be done with CSS. The icons are unicode characters that render as icons. Here is the CSS code that can be applied by various means to your local internet browser.

/* protonet tabs */ a[ui-sref=".topics"]:before { padding-right: 5px; content:"\00BB"; } a[ui-sref^=".todo_lists"]:before { padding-right: 5px; content:"\2713"; } a[ui-sref=".events"]:before { padding-right: 4px; content:"\1F4C5"; } #shared-folder-nav:before { padding-right: 4px; content:"\1F4C1"; } a[ui-sref=".documents"]:before { padding-right: 2px; content:"\1F5D2"; }

The header background is discussed below.

protonet groups overview

The page has two main purposes. Providing access to all the groups and showing update indicators for modified content somewhere in any group. Over all, with plenty of groups, there is so much going on that it becomes difficult to recognize the important facts.

Just tell me at a glace which groups show activity:

click to zoom

Take a look at the before/after screenshots.

The following elements have been touched to improve the usability of the page:

1. Don't tell the user that nothing is new since the last visit.
2. Color mark and flag for groups with updates.
3. Clustering of groups into column layout instead of matrix layout. Does anyone remember the article The Magical number Seven, Plus or Minus Two? That's why chunks of groups of 6 groups is easier to digest and remember than plenty of groups in sequential order until the screen is full.
4. Smaller group titels. They are still large enough for for legibility and headline style. But now there is more white space and long group titles are less often truncated.
5. Less line heigt for the list of all groups on the right leaves more space for more groups.
6. The help text has been moved to the bottom right. Once you know that you can move groups from the list to the main area and arrange them by drag'n'drop, the line of text is waste of space.

Again, all this can be done with a cascading style sheet:

/* protonet group overview */ .widget-list>li { height:88px !important; } .widget-list>li:nth-child(6n+7), .widget-list>li:nth-child(6n+8) {margin-top: 0.6em;} .dashboard h2.ng-binding { font-size: 1.3em !important;} .widget-list .inline-flex>a { padding: 8 8 !important; } span[ng-if="!widget.project.mostRecentNotification"] { color: #ddd; display:none; } span[ng-if="widget.project.mostRecentNotification"] { padding-left: 5px; border-left: 11px solid #ff8e49; } span[ng-if="widget.project.mostRecentNotification"]:after { position: relative; float: right; content:"\1F3C1"; display: block; } .project-list>li:hover { background-color: #fff; -webkit-box-shadow: 1px 1px 3px #ccc; -moz-box-shadow: 1px 1px 35px #ccc; box-shadow: 1px 1px 3px #ccc; } .project-list>li>a { padding: 0 0 !important; } p.desktop.hint.ng-scope { font-size: 80% !important; float: right; position: fixed; right: 2em; bottom: 0; display: block; width: 166px; }

A group named ´

Did you notice the group named ´ ? It is a simple hack to have a blank group in the overview area in order to preserve the layout. In addition, the acute accent comes alphabetically after the letters – therefore it even serves as a visual white space divider between the list of groups and the command Show all to reveal the archived groups.

protonet background color scheme

Just a few lines of CSS will adjust the header background (as shown above) and the the content area to a light pattern.

/* protonet color scheme */ .master { background-color: transparent !important; } .master-header { background-color: #e8ebed !important; } .detail-header { background-color:#f5f8fa; } date-picker>.dropdown.secondary, .actions>.dropdown.secondary, .actions>label.secondary, label.bordered { border-color:#aaa; border-radius:5px; color: #222 !important; background-color:#fff !important; }

The header change is important as the head area now works as a bounding frame for the content. White does not do it.

The light gray pattern background for the content area (.master) is just taste. I leave it up to you to include it.

protonet lists

Topics, Todos, Files and Notes use lists to display topics, todos, folders, and notes. There is quite some visual clutter between the items that can be cleaned up with a few CSS statements.

Oh, sorry, it is just one statement. But the effect is significant.

/* protonet lists */ .flex-list>li { border: none !important; margin-bottom: 1px !important; }

colorful calendar

Here comes a colorful calendar for protonet – colorful not as in rainbow – but colorful as in ambient and context-aware. It means that the past is painted in pale yellow, today is marked light blue, and the weekend is markes as such.

Take a look at the before/after screenshots.

The styles:

/* protonet calendar */ .fc-sat, .fc-sun { background-color:#f5f8fa; } .fc-past { background-color:#FFFFE5; } .fc-other-month.fc-past, .fc-sat.fc-past, .fc-sun.fc-past { background-color:#F5F6DD !important; } .fc-today { background-color:#D2EEFF !important; } .entry-content *:hover>a, .entry-content *:hover>*>a { border-bottom-style: dashed; border-bottom-width: 1px; } .entry-content a:hover { text-decoration: none !important; border-bottom-style: solid; border-bottom-width: 2px; } .fc-button {background-color:#fff !important;} .fc-button.fc-state-active {background-color:#ddd !important;}

how to apply the design hack?

As a protonet admin you can simply customize the user interface of your protonet box (build 99). Go to Settings - Personalize and copy'n'paste the styles into the textfield at "Your own CSS". Re-login and you are done!

/* protonet design hacks v1.3 CC-BY-NC-4.0 Matthias Müller-Prove https://mprove.de/script/16/protonet/index.html */ /* protonet color scheme */ .master { background-color: transparent; } .master-header { background-color: #e8ebed; } .detail-header { background-color:#f5f8fa; } date-picker>.dropdown.secondary, .actions>.dropdown.secondary, .actions>label.secondary, label.bordered { border-color:#aaa; border-radius:5px; color: #222; background-color:#fff; } /* protonet group overview */ .widget-list>li { height:88px; } .widget-list>li:nth-child(6n+7), .widget-list>li:nth-child(6n+8) {margin-top: 0.6em;} .dashboard h2.ng-binding { font-size: 1.3em;} .widget-list .inline-flex>a { padding: 8 8; } span[ng-if="!widget.project.mostRecentNotification"] { color: #ddd; display:none; } span[ng-if="widget.project.mostRecentNotification"] { padding-left: 5px; border-left: 11px solid #ff8e49; } span[ng-if="widget.project.mostRecentNotification"]:after { position: relative; float: right; content:"\1F3C1"; display: block; } .project-list>li:hover { background-color: #fff; -webkit-box-shadow: 1px 1px 3px #ccc; -moz-box-shadow: 1px 1px 35px #ccc; box-shadow: 1px 1px 3px #ccc; } .project-list>li>a { padding: 0 0; } p.desktop.hint.ng-scope { font-size: 80%; float: right; position: fixed; right: 2em; bottom: 0; display: block; width: 166px; } /* protonet tabs */ a[ui-sref=".topics"]:before { padding-right: 5px; content:"\00BB"; } a[ui-sref^=".todo_lists"]:before { padding-right: 5px; content:"\2713"; } a[ui-sref=".events"]:before { padding-right: 4px; content:"\1F4C5"; } #shared-folder-nav:before { padding-right: 4px; content:"\1F4C1"; } a[ui-sref=".documents"]:before{ padding-right: 2px; content:"\1F5D2"; } /* protonet lists */ .flex-list>li { border: none; margin-bottom: 1px; } /* protonet calendar */ .fc-sat, .fc-sun { background-color:#f5f8fa; } .fc-past { background-color:#FFFFE5; } .fc-other-month.fc-past, .fc-sat.fc-past, .fc-sun.fc-past { background-color:#F5F6DD; } .fc-today { background-color:#D2EEFF; } .entry-content *:hover>a, .entry-content *:hover>*>a { border-bottom-style: dashed; border-bottom-width: 1px; } .entry-content a:hover { text-decoration: none; border-bottom-style: solid; border-bottom-width: 2px; } .fc-button {background-color:#fff;} .fc-button.fc-state-active {background-color:#ddd;} .master-toolbar .select-deselect .svg-icon, .btn-group .svg-icon {opacity:0.7;} /* protonet notifications on the left - experimental */ .sidebar.ng-scope { width:auto; right:auto; left: 3em; -webkit-transform: translateX(100%) translateX(-400px); transform: translateX(100%) translateX(-400px); } .sidebar.ng-scope.hidden { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .sidebar-detail.ng-scope { left: 400px; min-width: 800px; } /* protonet inactive user images */ img.inactive { -webkit-filter: grayscale(100%) contrast(55%) brightness(166%); filter: grayscale(100%) contrast(55%) brightness(166%); } /* end of protonet design hack */

In case you are not an admin, you can apply the design hacks in your local browser for any protonet interface.

One more thing_

_from Jochen Czwalina /9/2020: Noch ein kleiner Hack – funktioniert auch auf der aktuellen stable-Version…

Ok, wer es sich zutraut, kann als Workaround zumindest den Container mit der Werbung im html-file ausblenden:  – per SSH mit der lokalen Protonet Box verbinden (https://support.protonet.info/de/faq/cat-faq/kundenspezifische-anpassungen/#ssh-zugriff)  – cd /home/protonet/dashboard/current/app/views/public_links  – vim browse.html.erb (wer nicht weiß, was VIM ist, sollte bitte von dieser Anleitung Abstand nehmen und sie an einen Linux Spezi weiterleiten, Unbedarfte könnten doch einiges kaputt machen) |-> im file in Zeile 2 den Inhalt mit auskommentieren – speichern, SSH-Verbindung beenden und abwarten, wann Protonet den Cache für die HTML-Files neu erstellt.  Die Änderung ist nicht sofort sichtbar, erst wenn die Seite neu gezogen und im Cache ersetzt wurde (deswegen habe ich auch erst so spät gemerkt, dass es DOCH funktioniert hatte) ý˝ Dieser Workaround ist NICHT updatesicher und muss nach dem nächsten SOUL-Update wieder gemacht werden (falls das Protonet-Team das Template im Dateisystem nicht anpasst, um diesen Workaround zu verhindern). sudo mkdir /protonet/firmware/local_patches sudo cp /home/protonet/dashboard/current/app/views/public_links/browse.html.erb . sudo vim browse.html.erb Zeilen ersetzen bzw html Inhalt auskommentieren: Zeile 2: <!-- %= render partial: "growth_banner" % --> Zeile 49: <!-- %= render partial: "growth_banner" % --> sudo vim removeadvert.sh per copy & paste einfügen: ------------- COPY FROM BELOW HERE --------------- (nicht diese Zeile) #!/bin/sh # Ahh, remove that dang advert from the public links page by copying an altered html file during the startup. Cheers! JC # Local patch to be applied on Protonet SOUL, tested and deployed on stable/98 # first, remove the original file that is always saved during the startup process rm -f /home/protonet/dashboard/current/app/views/public_links/browse.html.erb # then copy the altered file to the original location cp /protonet/firmware/local_patches/browse.html.erb /home/protonet/dashboard/current/app/views/public_links/. # now set the correct owner of the file to make it non-root chown protonet:protonet /home/protonet/dashboard/current/app/views/public_links/browse.html.erb # set the file permissions correctly chmod 664 /home/protonet/dashboard/current/app/views/public_links/browse.html.erb # restart Apache webserver /etc/init.d/apache2 restart # restart nginx web service /etc/init.d/nginx restart # the end -------------- COPY UNTIL ABOVE HERE --------------- (nicht diese Zeile) sudo chmod 775 removeadvert.sh sudo ./removeadvert.sh

Feedback – please leave a message

brandmystic Love design hacks!

I'd be happy to receive and read your feedback via_

• hci.social/@mprove or norden.social/@chronohh
• mprove@acm.org
• More channels

à propos

• protonet/soul login branding anpassen
• twitter design hack