Visual improvements to Table block.

problem_builder/public/css/mentoring-table.css

@@ -63,14 +63,16 @@
 
 .mentoring-share-panel {
     float: right;
+    margin-bottom: .5em;
 }
 
 .mentoring-share-panel .mentoring-share-with {
     position: absolute;
-    right: 0;
+    right: 3.15em;
     background-color: rgb(255, 255, 255);
-    border: 1px solid rgb(221, 221, 221);
+    border: 2px solid rgb(221, 221, 221);
     padding: 1em;
+    font-size: .8em;
 }
 
 .mentoring-share-with .share-header {
@@ -86,20 +88,44 @@
     margin-right: 1em;
 }
 
+.mentoring-share-with .remove-share {
+    color: black;
+    margin-right: 1.45em;
+}
+
+.mentoring-share-with .add-share-field {
+    line-height: normal;
+    padding-top: .40em;
+    padding-bottom: .40em;
+}
+
 .mentoring-share-with .share-errors {
     color: darkred;
     font-size: .75em;
     text-align: center;
+    display: table-caption;
 }
 
 .new-share-container {
     margin-top: .5em;
+    vertical-align: top;
+}
+
+ul.shared-list {
+    padding-left: 0;
+    padding-right: 0;
+    margin: 0 0 .25em 0;
+}
+
+.share-errors-container {
+    display: table;
+    margin: 0 auto;
 }
 
 .shared-list li {
     list-style-type: none;
     display: block;
-    padding: .25em;
+    padding: .25em 0 .25em 0;
     margin: 0;
 }
 
@@ -118,16 +144,19 @@
     padding: 1em;
     background-color: rgb(255, 255, 255);
     position: absolute;
-    right: 0;
+    right: 3.15em;
     font-size: .8em;
 }
 
 .share-notification .notification-close {
     float: right;
+    font-size: 1.2em;
+    color: black;
+    cursor: pointer;
 }
 
 .report-download-container {
-    float: left;
+    text-align: right;
 }
 
 .mentoring .identification {

problem_builder/public/js/review_blocks.js

@@ -174,7 +174,7 @@ function MentoringTableBlock(runtime, element, initData) {
         })
     });
 
-    function addShare() {
+    function addShare(event) {
         var container = $newShareContainer.clone();
         container.find('.add-share-username').val('');
         container.insertAfter($element.find('.new-share-container').last());
@@ -182,12 +182,13 @@ function MentoringTableBlock(runtime, element, initData) {
     }
 
     function deleteShare(event) {
+        event.preventDefault();
         $.ajax({
             type: "POST",
             url: deleteShareUrl,
-            data: JSON.stringify({'username': $(event.target).prev()[0].innerHTML}),
+            data: JSON.stringify({'username': $(event.target).parent().prev()[0].innerHTML}),
             success: function () {
-                $(event.target).parent().remove();
+                $(event.target).parent().parent().remove();
                 $errorHolder.html('');
             },
             error: errorMessage

problem_builder/table.py

@@ -200,7 +200,7 @@ class MentoringTableBlock(
             raise JsonHandlerError(
                 400,
                 _('Some users could not be shared with. Please check these usernames: {}').format(
-                    ','.join(failed_users)
+                    ', '.join(failed_users)
                 )
             )
         return {}

problem_builder/templates/html/mentoring-table-container.html

 {% load i18n %}
 {% if allow_sharing %}
 <div class="share-panel-container">
-  {% if allow_download %}
-  <div class="report-download-container"><a class="report-download-link" href="#report_download" download="report.html">{% trans "Download report" %}</a></div>
-  {% endif %}
   <div class="mentoring-share-panel">
     {% if view_options %}
     <span>{% trans "Display Map from:" %}</span>
@@ -15,22 +12,24 @@
     </select>
     {% endif %}
     <button class="mentoring-share-button">
-      <i class="fa fa-share"></i>Share
+      <i class="fa fa-share-alt"></i> Share
     </button>
     <div class="mentoring-share-with" style="display: none;">
+      <div class="shared-with-container"></div>
       <div class="share-with-instructions">
-        <p>{% trans "Enter the username of another student you'd like to share this with." %}</p>
+        <p>{% trans "Enter usernames:" %}</p>
       </div>
-      <div class="shared-with-container"></div>
       <div class="new-share-container"><input class="add-share-username"><button class="add-share-field">+</button></div>
+      <div class="share-errors-container">
         <div class="share-errors"></div>
+      </div>
       <div class="share-action-buttons">
         <button class="do-share-button">Share</button>
       </div>
     </div>
     {% if share_notifications %}
     <div class="share-notification" data-shared="{{share_notifications}}">
-        <button class="notification-close"><i class="fa fa-close"></i></button>
+        <a class="notification-close"><i class="fa fa-close"></i></a>
         <p><strong>{% trans "Map added!" %}</strong></p>
         <p>
           {% blocktrans %}
@@ -52,3 +51,6 @@
     <div class="mentoring-table-target"></div>
   </div>
 </div>
+{% if allow_download %}
+<div class="report-download-container"><a class="report-download-link" href="#report_download" download="report.html">{% trans "Download report" %}</a></div>
+{% endif %}
\ No newline at end of file

problem_builder/templates/html/mentoring-table-shared-list.html

@@ -4,6 +4,6 @@
 {% endif %}
 <ul class="shared-list">
     {% for username in shared_with %}
-    <li><span class="username">{{username}}</span><button class="remove-share"><i class="fa fa-trash"></i></button></li>
+    <li><span class="username">{{username}}</span><a class="remove-share" href="#"><i class="fa fa-trash"></i></a></li>
     {% endfor %}
 </ul>
\ No newline at end of file