From 740f82305fe1e815e5cc0cc56577c3e2307369c3 Mon Sep 17 00:00:00 2001
From: Eddie Kohler <ekohler@gmail.com>
Date: Thu, 16 Dec 2021 18:44:25 -0500
Subject: [PATCH] Style improvements: Flex for sideways forms, <nav>.

---
 assign.php                     |  2 +-
 bulkassign.php                 | 12 ++++----
 lib/intlmsgset.php             |  3 +-
 manualassign.php               | 12 ++++----
 src/groupedextensions.php      |  1 +
 src/pages/p_autoassign.php     | 12 ++++----
 src/pages/p_conflictassign.php | 12 ++++----
 src/userstatus.php             |  2 +-
 stylesheets/style.css          | 50 ++++++++++++----------------------
 9 files changed, 46 insertions(+), 60 deletions(-)

diff --git a/assign.php b/assign.php
index 142d574140..b726f9cca3 100644
--- a/assign.php
+++ b/assign.php
@@ -592,7 +592,7 @@ function pcAssignments($qreq) {
     Ht::label("Email", "revreq_email"),
     Ht::entry("email", (string) $Qreq->email, ["id" => "revreq_email", "size" => 52, "class" => $email_class, "autocomplete" => "off", "type" => "email"]),
     '</div>',
-    '<div class="f-2col">',
+    '<div class="f-mcol">',
     '<div class="', Ht::control_class("firstName", "f-i"), '">',
     Ht::label("First name (given name)", "revreq_firstName"),
     Ht::entry("firstName", (string) $Qreq->firstName, ["id" => "revreq_firstName", "size" => 24, "class" => "fullw", "autocomplete" => "off"]),
diff --git a/bulkassign.php b/bulkassign.php
index b0ea0f89d1..d24ff97054 100644
--- a/bulkassign.php
+++ b/bulkassign.php
@@ -96,12 +96,12 @@ function complete_assignment($qreq, $callback) {
 
 
 $Conf->header("Assignments", "bulkassign", ["subtitle" => "Bulk update"]);
-echo '<div class="mb-5 clearfix">',
-    '<div class="papmode"><a href="', $Conf->hoturl("autoassign"), '">Automatic</a></div>',
-    '<div class="papmode"><a href="', $Conf->hoturl("manualassign"), '">Manual</a></div>',
-    '<div class="papmode"><a href="', $Conf->hoturl("conflictassign"), '">Conflicts</a></div>',
-    '<div class="papmode active"><a href="', $Conf->hoturl("bulkassign"), '">Bulk update</a></div>',
-    '</div>';
+echo '<nav class="papmodes mb-5 clearfix"><ul>',
+    '<li class="papmode"><a href="', $Conf->hoturl("autoassign"), '">Automatic</a></li>',
+    '<li class="papmode"><a href="', $Conf->hoturl("manualassign"), '">Manual</a></li>',
+    '<li class="papmode"><a href="', $Conf->hoturl("conflictassign"), '">Conflicts</a></li>',
+    '<li class="papmode active"><a href="', $Conf->hoturl("bulkassign"), '">Bulk update</a></li>',
+    '</ul></nav>';
 
 
 // upload review form action
diff --git a/lib/intlmsgset.php b/lib/intlmsgset.php
index a7f0c0b5ca..ac702122a4 100644
--- a/lib/intlmsgset.php
+++ b/lib/intlmsgset.php
@@ -1,5 +1,5 @@
 <?php
-// intlmsg.php -- HotCRP helper functions for message i18n
+// intlmsgset.php -- HotCRP helper functions for message i18n
 // Copyright (c) 2006-2020 Eddie Kohler; see LICENSE.
 
 class IntlMsg {
@@ -7,6 +7,7 @@ class IntlMsg {
     public $context;
     /** @var string */
     public $otext;
+    /** @var ?list<string> */
     public $require;
     /** @var float */
     public $priority = 0.0;
diff --git a/manualassign.php b/manualassign.php
index 31c359d828..330caa054e 100644
--- a/manualassign.php
+++ b/manualassign.php
@@ -105,12 +105,12 @@ function saveAssignments($qreq, $reviewer) {
 
 
 $Conf->header("Assignments", "assignpc", ["subtitle" => "Manual"]);
-echo '<div class="mb-5 clearfix">',
-    '<div class="papmode"><a href="', $Conf->hoturl("autoassign"), '">Automatic</a></div>',
-    '<div class="papmode active"><a href="', $Conf->hoturl("manualassign"), '">Manual</a></div>',
-    '<div class="papmode"><a href="', $Conf->hoturl("conflictassign"), '">Conflicts</a></div>',
-    '<div class="papmode"><a href="', $Conf->hoturl("bulkassign"), '">Bulk update</a></div>',
-    '</div>';
+echo '<nav class="papmodes mb-5 clearfix"><ul>',
+    '<li class="papmode"><a href="', $Conf->hoturl("autoassign"), '">Automatic</a></li>',
+    '<li class="papmode active"><a href="', $Conf->hoturl("manualassign"), '">Manual</a></li>',
+    '<li class="papmode"><a href="', $Conf->hoturl("conflictassign"), '">Conflicts</a></li>',
+    '<li class="papmode"><a href="', $Conf->hoturl("bulkassign"), '">Bulk update</a></li>',
+    '</ul></nav>';
 
 
 // Help list
diff --git a/src/groupedextensions.php b/src/groupedextensions.php
index fff3009ce6..71d6dd1be3 100644
--- a/src/groupedextensions.php
+++ b/src/groupedextensions.php
@@ -224,6 +224,7 @@ function groups() {
         return $this->members("");
     }
 
+    /** @return bool */
     function allowed($allowed, $gj) {
         if (isset($allowed)) {
             $old_context = $this->conf->xt_swap_context($this);
diff --git a/src/pages/p_autoassign.php b/src/pages/p_autoassign.php
index 732a2c4e09..08df2cb01b 100644
--- a/src/pages/p_autoassign.php
+++ b/src/pages/p_autoassign.php
@@ -286,12 +286,12 @@ private function render() {
         $conf = $this->conf;
         $qreq = $this->qreq;
         $conf->header("Assignments", "autoassign", ["subtitle" => "Automatic"]);
-        echo '<div class="mb-5 clearfix">',
-            '<div class="papmode active"><a href="', $conf->hoturl("autoassign"), '">Automatic</a></div>',
-            '<div class="papmode"><a href="', $conf->hoturl("manualassign"), '">Manual</a></div>',
-            '<div class="papmode"><a href="', $conf->hoturl("conflictassign"), '">Conflicts</a></div>',
-            '<div class="papmode"><a href="', $conf->hoturl("bulkassign"), '">Bulk update</a></div>',
-            '</div>';
+        echo '<nav class="papmodes mb-5 clearfix"><ul>',
+            '<li class="papmode active"><a href="', $conf->hoturl("autoassign"), '">Automatic</a></li>',
+            '<li class="papmode"><a href="', $conf->hoturl("manualassign"), '">Manual</a></li>',
+            '<li class="papmode"><a href="', $conf->hoturl("conflictassign"), '">Conflicts</a></li>',
+            '<li class="papmode"><a href="', $conf->hoturl("bulkassign"), '">Bulk update</a></li>',
+            '</ul></nav>';
 
 
         // run or report autoassignment
diff --git a/src/pages/p_conflictassign.php b/src/pages/p_conflictassign.php
index 806b19c099..2348b785a7 100644
--- a/src/pages/p_conflictassign.php
+++ b/src/pages/p_conflictassign.php
@@ -14,12 +14,12 @@ static function go($user, $qreq) {
         $user->add_overrides(Contact::OVERRIDE_CONFLICT);
 
         $conf->header("Assignments", "assignpc", ["subtitle" => "Conflicts"]);
-        echo '<div class="mb-5 clearfix">',
-            '<div class="papmode"><a href="', hoturl("autoassign"), '">Automatic</a></div>',
-            '<div class="papmode"><a href="', hoturl("manualassign"), '">Manual</a></div>',
-            '<div class="papmode active"><a href="', hoturl("conflictassign"), '">Conflicts</a></div>',
-            '<div class="papmode"><a href="', hoturl("bulkassign"), '">Bulk update</a></div>',
-            '</div>';
+        echo '<nav class="papmodes mb-5 clearfix"><ul>',
+            '<li class="papmode"><a href="', $conf->hoturl("autoassign"), '">Automatic</a></li>',
+            '<li class="papmode"><a href="', $conf->hoturl("manualassign"), '">Manual</a></li>',
+            '<li class="papmode active"><a href="', $conf->hoturl("conflictassign"), '">Conflicts</a></li>',
+            '<li class="papmode"><a href="', $conf->hoturl("bulkassign"), '">Bulk update</a></li>',
+            '</ul></nav>';
 
         echo '<div class="w-text mt-5 mb-5">';
 
diff --git a/src/userstatus.php b/src/userstatus.php
index a6a571c247..856158f0b2 100644
--- a/src/userstatus.php
+++ b/src/userstatus.php
@@ -1359,7 +1359,7 @@ static function render_main(UserStatus $us, Qrequest $qreq) {
                       Ht::entry("preferredEmail", $qreq->preferredEmail ?? $user->preferredEmail, ["class" => "fullw", "size" => 52, "id" => "preferredEmail", "autocomplete" => $us->autocomplete("email"), "data-default-value" => $user->preferredEmail, "type" => "email"]));
         }
 
-        echo '<div class="f-2col w-text">';
+        echo '<div class="f-mcol w-text">';
         $t = Ht::entry("firstName", $qreq->firstName ?? $user->firstName, ["size" => 24, "autocomplete" => $us->autocomplete("given-name"), "class" => "fullw", "id" => "firstName", "data-default-value" => $user->firstName]) . $us->global_profile_difference("firstName");
         $us->render_field("firstName", "First name (given name)", $t, "f-i");
 
diff --git a/stylesheets/style.css b/stylesheets/style.css
index 792db24331..aae4adf7d7 100644
--- a/stylesheets/style.css
+++ b/stylesheets/style.css
@@ -282,13 +282,13 @@ a.attention, .btn-link:active {
 }
 a.qq, a.qx,
 a.q, a.x, a.xx, a.nn, a.btn,
-div.papmode.active > a, div.papmode.active:hover > a.noul, .leftmenu-item > a,
+.papmode.active > a, .papmode.active:hover > a.noul, .leftmenu-item > a,
 a.pnum, a.ptitle, a.mailto, u.x, .noul {
 	-webkit-text-decoration-line: none;
 	text-decoration-line: none;
 }
 a.q:hover, a.qq:hover, a.x:hover,
-div.papmode.active:hover > a, .leftmenu-item:hover > a,
+.papmode.active:hover > a, .leftmenu-item:hover > a,
 tr.pl:hover a.pnum, tr.pl:hover a.ptitle, a.ptitle.uu,
 div.js-foldup:hover a.js-foldup,
 div.js-aufoldup:hover a.js-aufoldup,
@@ -484,6 +484,10 @@ label.checki {
 	padding-top: 0.5em !important;
 	padding-top: 0.5rem !important;
 }
+.pl-3 {
+	padding-left: 1em !important;
+	padding-left: 1rem !important;
+}
 
 .text-start {
 	text-align: start;
@@ -576,7 +580,7 @@ td.g {
 }
 .clearfix:after, .pst:after, .pavt:after, .revvt:after,
 .cmteditinfo:after, .aa:after, .aab:after,
-.entryi:after, .popup-actions:after, .modal-content:after, .f-horizontal:after {
+.entryi:after, .popup-actions:after, .modal-content:after {
 	clear: both;
 	content: "";
 	display: block;
@@ -1616,13 +1620,6 @@ input.wide {
 .f-i, .f-checkbox, .f-m {
 	margin-bottom: 1.25em;
 }
-.f-horizontal {
-	margin-right: -18px;
-	margin-bottom: 1em;
-}
-.f-i:last-child, .f-horizontal:last-child {
-	margin-bottom: 0;
-}
 label.f-c, .f-i > label {
 	display: table;
 }
@@ -1651,29 +1648,13 @@ label.f-c, .f-i > label {
 	margin-top: 0.25rem;
 	margin-bottom: 0.25rem;
 }
-.f-2col {
-	-webkit-columns: 300px 2;
-	columns: 300px 2;
-	-webkit-column-gap: 18px;
-	column-gap: 18px;
-}
-.f-2col > .f-i {
-	margin-bottom: 0;
-	padding-bottom: 1.25em;
-	-webkit-column-break-inside: avoid;
-	page-break-inside: avoid;
-	break-inside: avoid;
-}
-.f-2col:last-child {
-	margin-bottom: -1.25em;
-}
-.f-horizontal > .f-i, .f-horizontal > .f-ig {
-	float: left;
-	width: auto;
-	margin: 0 18px 0 0;
+.f-mcol {
+	display: flex;
+	flex-wrap: wrap;
+	column-gap: 24px;
 }
-.f-horizontal > .f-h {
-	margin-right: 18px;
+.f-mcol > * {
+	flex-grow: 1;
 }
 
 
@@ -1810,6 +1791,9 @@ img.check {
 .w-entry-text {
 	max-width: 560px;
 }
+.maxw-480 {
+	max-width: 480px;
+}
 .minw-50 {
 	min-width: 50%;
 }
@@ -2842,7 +2826,7 @@ a.badge:active {
 	padding: 12px 0 0 24px;
 	z-index: 5;
 }
-.submission-modes > ul {
+.submission-modes > ul, .papmodes > ul {
 	list-style-type: none;
 	margin: 0;
 	padding: 0;