Update main notification dashboard with new styles.

lms/djangoapps/open_ended_grading/views.py

@@ -193,6 +193,11 @@ def combined_notifications(request, course_id):
     notification_tuples=open_ended_notifications.NOTIFICATION_TYPES
 
     notification_list = []
+    description_dict = {
+            'Peer Grading': "View all problems that require peer assessment in this particular course.",
+            'Staff Grading': "View ungraded submissions submitted by your students for the open ended problems in the course.",
+            'Problems you have submitted': "View open ended problems that you have previously submitted for grading." 
+    }
     for response_num in xrange(0,len(notification_tuples)):
         tag=notification_tuples[response_num][0]
         if tag in response:
@@ -200,13 +205,12 @@ def combined_notifications(request, course_id):
             human_name = notification_tuples[response_num][2]
             url = _reverse_without_slash(url_name, course_id)
             has_img = response[tag]
-            img_path = "/static/images/slider-handle.png"
 
             notification_item = {
                 'url' : url,
                 'name' : human_name,
-                'has_img' : has_img,
-                'img' : img_path,
+                'alert' : has_img,
+                'description': description_dict[human_name]
             }
             notification_list.append(notification_item)
 

lms/static/sass/course/_open_ended_grading.scss

@@ -13,5 +13,43 @@
             padding: 7px;
         }
     }
+    .notification-container
+    {
+        margin: 30px 0px;
+    }
+
+    .alert
+    {
+        background-color: red;
+    }
+    .notification
+    {
+        margin: 10px;
+        width: 30%;
+        @include inline-block;
+        vertical-align: top;
+        .notification-link
+        {
+            display:block;
+            height: 8em;
+            padding: 10px;
+            border: 1px solid black;
+            text-align: center;
+        }
+        .notification-title
+        {
+            text-transform: uppercase;
+        }
+        .notification-link:hover
+        {
+            background-color: #eee;
+            color: black;
+        }
+        .notification-description
+        {
+            padding-top:5%;
+        }
+        @include clearfix;
+    }
 
 }

lms/templates/open_ended_problems/combined_notifications.html

@@ -23,19 +23,23 @@
                 No items require attention at the moment.
             </div>
             %else:
-            <ul class="notification-list">
+            <div class="notification-container">
                 %for notification in notification_list:
-                <li>
-                    <a href="${notification['url']}">
-                        ${notification['name']}
-                        % if notification['has_img'] == True:
-                        <img src="${notification['img']}"/>
-                        %endif
+                 % if notification['alert']:
+                    <div class="notification alert">
+                % else:
+                    <div class="notification">
+                % endif
+                    <a href="${notification['url']}" class="notification-link">
+                        <div class="notification-title">${notification['name']}</div>
+                    <div class="notification-description">
+                        <p>${notification['description']}</p>
+                    </div>
                     </a>
-                </li>
+                </div>
                 %endfor
-            </ul>
+            </div>
             %endif
         %endif
     </div>
-</section>
+</section>