Improve display of profile topic interest table

- A bit more spacing
- Topics always get their own row

src/options/o_checkboxesbase.php

@@ -203,15 +203,14 @@ function print_web_edit(PaperTable $pt, $ov, $reqov) {
                     "data-range-type" => $this->formid];
             if (($isgroup = $tg->nontrivial())) {
                 echo '<li class="ctelt cteltg"><div class="ctelti">';
-                if ($tg->improper()) {
+                if ($tg->has_group_topic()) {
                     $arg["data-default-checked"] = in_array($tg->tid, $ov->value_list());
                     $checked = in_array($tg->tid, $reqov->value_list());
                     echo '<label class="checki cteltx"><span class="checkc">',
                         $this->render_checkbox($tg->tid, $checked, $arg),
                         '</span>', $topicset->unparse_name_html($tg->tid), '</label>';
                 } else {
-                    echo '<div class="cteltx"><span class="topicg">',
-                        htmlspecialchars($tg->name), '</span></div>';
+                    echo '<div class="cteltx">', $tg->unparse_name_html(), '</div>';
                 }
                 echo '<div class="checki">';
             }

src/topicset.php

@@ -6,7 +6,7 @@ class TopicGroup {
     /** @var string */
     public $name;     // never contains a colon
     /** @var ?int */
-    public $tid;      // if nonnull, its name equals the group name
+    public $tid;      // if nonnull, the group name is also a topic name
     /** @var ?list<int> */
     public $members;  // if nonnull, contains all members
 
@@ -15,11 +15,15 @@ function __construct($name) {
         $this->name = $name;
     }
     /** @return bool */
+    function trivial() {
+        return $this->members === null || count($this->members) <= 1;
+    }
+    /** @return bool */
     function nontrivial() {
         return $this->members !== null && count($this->members) > 1;
     }
     /** @return bool */
-    function improper() {
+    function has_group_topic() {
         return $this->tid !== null;
     }
     /** @return int */
@@ -39,6 +43,11 @@ function proper_members() {
         }
         return $this->members;
     }
+    /** @param string $suffix
+     * @return string */
+    function unparse_name_html($suffix = "") {
+        return '<span class="topicg">' . htmlspecialchars($this->name) . $suffix . '</span>';
+    }
 }
 
 class TopicSet implements ArrayAccess, IteratorAggregate, Countable {
@@ -405,12 +414,10 @@ function unparse_name_html($tid) {
         $tg = ($this->group_map())[$tid];
         if ($tg->nontrivial()) {
             if ($tg->tid === $tid) {
-                $this->_topic_html[$tid] = '<span class="topicg">'
-                    . htmlspecialchars($tg->name) . '</span>';
+                $this->_topic_html[$tid] = $tg->unparse_name_html();
             } else {
-                $this->_topic_html[$tid] = '<span class="topicg">'
-                    . htmlspecialchars($tg->name) . ':</span> '
-                    . htmlspecialchars(ltrim(substr($tname, strlen($tg->name) + 1)));
+                $this->_topic_html[$tid] = $tg->unparse_name_html(":")
+                    . ' ' . htmlspecialchars(ltrim(substr($tname, strlen($tg->name) + 1)));
             }
         } else {
             $this->_topic_html[$tid] = htmlspecialchars($tname);

src/userstatus.php

@@ -1714,7 +1714,7 @@ static function print_topics(UserStatus $us) {
 topics. We use this information to help match papers to reviewers.</p>',
             Ht::hidden("has_ti", 1),
             $us->feedback_html_at("ti"),
-            '  <table class="table-striped"><thead>
+            '  <table class="table-striped profile-topic-interests"><thead>
     <tr><td></td><th class="ti_interest">Low</th><th class="ti_interest"></th><th class="ti_interest"></th><th class="ti_interest"></th><th class="ti_interest">High</th></tr>
     <tr><td></td><th class="topic-2"></th><th class="topic-1"></th><th class="topic0"></th><th class="topic1"></th><th class="topic2"></th></tr></thead><tbody>', "\n";
 
@@ -1724,9 +1724,14 @@ static function print_topics(UserStatus $us) {
         foreach ($ts->group_list() as $tg) {
             foreach ($tg->members() as $i => $tid) {
                 $tic = "ti_topic";
-                if ($i === 0) {
+                if ($tg->trivial() || ($i === 0 && $tg->has_group_topic())) {
                     $n = $ts->unparse_name_html($tid);
                 } else {
+                    if ($i == 0) {
+                        echo "    <tr><td class=\"ti_topic\">",
+                            $tg->unparse_name_html(),
+                            "</td><td class=\"ti_interest\" colspan=\"5\"></td></tr>\n";
+                    }
                     $n = $ts->unparse_subtopic_name_html($tid);
                     $tic .= " ti_subtopic";
                 }
@@ -1736,7 +1741,7 @@ static function print_topics(UserStatus $us) {
                 for ($j = -2; $j <= 2; ++$j) {
                     $ichecked = $ival >= $ibound[$j+2] && $ival < $ibound[$j+3];
                     $reqchecked = $reqval >= $ibound[$j+2] && $reqval < $ibound[$j+3];
-                    echo '<td class="ti_interest">', Ht::radio("ti$tid", $j, $reqchecked, ["class" => "uic js-range-click", "data-range-type" => "topicinterest$j", "data-default-checked" => $ichecked]), "</td>";
+                    echo '<td class="ti_interest">', Ht::radio("ti{$tid}", $j, $reqchecked, ["class" => "uic js-range-click", "data-range-type" => "topicinterest{$j}", "data-default-checked" => $ichecked]), "</td>";
                 }
                 echo "</tr>\n";
             }

stylesheets/style.css

@@ -2938,22 +2938,22 @@ del .rto {
 }
 
 .ti_interest {
-	padding-right: 1px;
+	padding: 2px 1px 2px 0;
 	white-space: nowrap;
 	font-size: smaller;
 	text-align: center;
 	min-width: 2.2rem;
 }
 .ti_topic {
-	padding-right: 0.5em;
+	padding: 2px 0.5em 2px 6px;
 }
 .ti_subtopic {
 	padding-left: 1.75em;
 }
 table.reviewers, div.revnotes {
 	margin-bottom: 8px;
 }
-table.reviewers {
+table.reviewers, table.profile-topic-interests {
 	margin-left: -6px;
 }
 td.rl:first-child {