Improve (hopefully) the problem list screen

2 files changed, 26 insertions, 7 deletions

diff --git a/css/codeq.css b/css/codeq.css
index ac63970..77d1d9c 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -503,6 +503,27 @@ ul.dropdown-menu a {
 }
 
 /* problem index screen */
-#screen_problem_list .language-problems a {
+#screen_problem_list .language-description {
+    margin-bottom: 1em;
+}
+
+#screen_problem_list .group-description {
+    margin-bottom: 0.5em;
+}
+
+#screen_problem_list h2 {
+    font-size: 1.4em;
+    font-weight: bold;
+}
+
+#screen_problem_list ul.group-problems {
+    padding-left: 1em;
+}
+
+#screen_problem_list .group-problems li {
+    list-style-type: none;
+}
+
+#screen_problem_list a {
     cursor: pointer;
 }
diff --git a/js/codeq/problem_list.js b/js/codeq/problem_list.js
index eae86ed..4a3d24d 100644
--- a/js/codeq/problem_list.js
+++ b/js/codeq/problem_list.js
@@ -205,15 +205,14 @@
                 groupDict, problemDict;
             // title: HTML structure for "name" and "desc"
             html.push('<h1 class="language-title" ', ta(langDict.name), '></h1><hr>');
-            html.push('<div class="language-description" ', ta(langDict.description), '></div>');
+            html.push('<p class="language-description" ', ta(langDict.description), '></p>');
             // content: problem directory
-            html.push('<ul class="language-problems">');
             for (i = 0; i < Ngroups; i++) {
                 group = groups[i] || {};
                 groupDict = convertTranslations(group.translations, 'name', 'description'); // the group-level translations, added will
                 // group content
-                html.push('<li><div class="group-title" ', ta(groupDict.name), '></div>');
-                html.push('<div class="group-description" ', ta(groupDict.description), '></div>');
+                html.push('<h2 class="group-title" ', ta(groupDict.name), '></h2>');
+                html.push('<p class="group-description" ', ta(groupDict.description), '></p>');
                 html.push('<ul class="group-problems">');
                 // problem content
                 problems = group.problems || [];
@@ -224,9 +223,8 @@
                     html.push('<li><a class="problem-', '' + problemReferences.length, '" ', ta(problemDict.name), '></a></li>');
                     problemReferences.push({'g': group.identifier || 'nogroup', 'p': problem.identifier || 'noproblem', 'id': problem.id});
                 }
-                html.push('</ul></li>');
+                html.push('</ul>');
             }
-            html.push('</ul>');
 
             return {
                 'language': languageIdentifier, // 'prolog', 'python', ...