webui: update markup

one/templates/box/file/box.html

@@ -9,21 +9,26 @@
 {% endblock title %}
 {% block boxhelp %}
 <div class="boxhelp">
-    <div class="icon">
-        <img src="{% static "icons/information-frame.png" %}" alt="{% trans "Help" %}" />
+    <div class="help">
+        <div class="icon">
+            <img src="{% static "icons/information-frame.png" %}" alt="{% trans "Help" %}" />
+        </div>
+        <div class="boxhelp-box">
+            <p>{% blocktrans %}This is your global data store.{% endblocktrans %}</p>
+            <p>{% blocktrans %}You can access it from all your own virtual machines,
+            the lab client, this web interface, or through SFTP protocol.
+            {% endblocktrans %}</p>
+            <p>{% blocktrans %}This directory is mounted on Windows machines as Z:
+            drive, and on Linux ones as ~/sshfs.{% endblocktrans %}</p>
+            <p>{% blocktrans %}If you log in on lab machines (currently Ubuntu only),
+            you can see this folder also as ~/sshfs.{% endblocktrans %}</p>
+            <p>{% blocktrans with serv=storeserv %}You can also use an SFTP client (eg.
+            WinSCP) to access your files at {{serv}}. You will need to register a
+            public key bellow.{% endblocktrans %}</p>
+        </div>
     </div>
-    <div class="boxhelp-box">
-        <p>{% blocktrans %}This is your global data store.{% endblocktrans %}</p>
-        <p>{% blocktrans %}You can access it from all your own virtual machines,
-        the lab client, this web interface, or through SFTP protocol.
-        {% endblocktrans %}</p>
-        <p>{% blocktrans %}This directory is mounted on Windows machines as Z:
-        drive, and on Linux ones as ~/sshfs.{% endblocktrans %}</p>
-        <p>{% blocktrans %}If you log in on lab machines (currently Ubuntu only),
-        you can see this folder also as ~/sshfs.{% endblocktrans %}</p>
-        <p>{% blocktrans with serv=storeserv %}You can also use an SFTP client (eg.
-        WinSCP) to access your files at {{serv}}. You will need to register a
-        public key bellow.{% endblocktrans %}</p>
+    <div class="icon">
+        <img src="" alt="toggle" title="{% trans "Show/hide box" %}" class="toggle-box" data-id="files" id="toggle-box-files"/>
     </div>
 </div>
 {% endblock %}

one/templates/box/template/box.html

@@ -10,15 +10,20 @@
 
 {% block boxhelp %}
 <div class="boxhelp">
-    <div class="icon">
-        <img src="{% static "icons/information-frame.png" %}" alt="{% trans "Help" %}" />
+    <div class="help">
+        <div class="icon">
+            <img src="{% static "icons/information-frame.png" %}" alt="{% trans "Help" %}" />
+        </div>
+        <div class="boxhelp-box">
+            <p>{% blocktrans %}This is the list of your own templates.{% endblocktrans %}</p>
+            <p>{% blocktrans %}Templates are customized versions of the base images.{% endblocktrans %}</p>
+            <p>{% blocktrans %}You can install all the needed software on a master
+            machine, and it will be ready to run by your students in minutes.
+            {% endblocktrans %}</p>
+        </div>
     </div>
-    <div class="boxhelp-box">
-        <p>{% blocktrans %}This is the list of your own templates.{% endblocktrans %}</p>
-        <p>{% blocktrans %}Templates are customized versions of the base images.{% endblocktrans %}</p>
-        <p>{% blocktrans %}You can install all the needed software on a master
-        machine, and it will be ready to run by your students in minutes.
-        {% endblocktrans %}</p>
+    <div class="icon">
+        <img src="" alt="toggle" title="{% trans "Show/hide box" %}" class="toggle-box" data-id="templates" id="toggle-box-templates"/>
     </div>
 </div>
 {% endblock %}

one/templates/box/vm/box.html

@@ -10,15 +10,20 @@
 
 {% block boxhelp %}
 <div class="boxhelp">
-    <div class="icon">
-        <img src="{% static "icons/information-frame.png" %}" alt="{% trans "Help" %}" />
+    <div class="help">
+        <div class="icon">
+            <img class="help" src="{% static "icons/information-frame.png" %}" alt="{% trans "Help" %}" />
+        </div>
+        <div class="boxhelp-box">
+            <p>{% blocktrans %}This is the list of your running virtual machines.{% endblocktrans %}</p>
+            <p>{% blocktrans %}You can launch a new VM instance if it is shared by
+            a teacher for one of your groups.{% endblocktrans %}</p>
+            <p>{% blocktrans %}Please note, that users and shares both have a limit
+            of launchable instances.{% endblocktrans %}</p>
+        </div>
     </div>
-    <div class="boxhelp-box">
-        <p>{% blocktrans %}This is the list of your running virtual machines.{% endblocktrans %}</p>
-        <p>{% blocktrans %}You can launch a new VM instance if it is shared by
-        a teacher for one of your groups.{% endblocktrans %}</p>
-        <p>{% blocktrans %}Please note, that users and shares both have a limit
-        of launchable instances.{% endblocktrans %}</p>
+    <div class="icon">
+        <img src="" alt="{% trans "Show/hide box" %}" class="toggle-box" data-id="vms" id="toggle-box-vms"/>
     </div>
 </div>
 {% endblock %}

school/templates/box/group/box.html

@@ -3,6 +3,26 @@
 {% load l10n %}
 {% get_current_language as LANGUAGE_CODE %}
 
+{% block boxhelp %}
+<div class="boxhelp">
+    <div class="help">
+        <div class="icon">
+            <img src="/static/icons/information-frame.png" alt="{% trans "Help" %}" />
+        </div>
+        <div class="boxhelp-box">
+            <p>{% blocktrans %}This is the list of your own templates.{% endblocktrans %}</p>
+            <p>{% blocktrans %}Templates are customized versions of the base images.{% endblocktrans %}</p>
+            <p>{% blocktrans %}You can install all the needed software on a master
+            machine, and it will be ready to run by your students in minutes.
+            {% endblocktrans %}</p>
+        </div>
+    </div>
+    <div class="icon">
+        <img src="" alt="toggle" title="{% trans "Show/hide box" %}" class="toggle-box" data-id="groups" id="toggle-box-groups"/>
+    </div>
+</div>
+{% endblock %}
+
 {% block title %}
     {% trans "My Groups" %}
 {% endblock title %}

school/templates/box/person/box.html

@@ -3,6 +3,26 @@
 {% load l10n %}
 {% get_current_language as LANGUAGE_CODE %}
 
+{% block boxhelp %}
+<div class="boxhelp">
+    <div class="help">
+        <div class="icon">
+            <img src="/static/icons/information-frame.png" alt="{% trans "Help" %}" />
+        </div>
+        <div class="boxhelp-box">
+            <p>{% blocktrans %}This is the list of your own templates.{% endblocktrans %}</p>
+            <p>{% blocktrans %}Templates are customized versions of the base images.{% endblocktrans %}</p>
+            <p>{% blocktrans %}You can install all the needed software on a master
+            machine, and it will be ready to run by your students in minutes.
+            {% endblocktrans %}</p>
+        </div>
+    </div>
+    <div class="icon">
+        <img src="" alt="eye" title="{% trans "Show/hide box" %}" class="toggle-box" data-id="members" id="toggle-box-members"/>
+    </div>
+</div>
+{% endblock %}
+
 {% block title %}
     {% trans "Members of" %}: {{group.name}}
 {% endblock title %}