Merge pull request #14 from tayloraswift/hide-long-topics

hide 'See Also' lists by default if they contain more than 12 members

Author: tayloraswift

Assets/css/Main.css

@@ -153,6 +153,7 @@ extension Inliner.Groups
         }
     }
 }
+
 extension Inliner.Groups:HyperTextOutputStreamable
 {
     static
@@ -176,23 +177,56 @@ extension Inliner.Groups:HyperTextOutputStreamable
         {
             html[.section, { $0.class = "group topic" }]
             {
-                if  let principal:Unidoc.Scalar = self.inliner.masters.principal,
-                        group.members.contains(.scalar(principal))
-                {
-                    $0[.h2] = "See Also"
-                }
+                guard
+                let principal:Unidoc.Scalar = self.inliner.masters.principal,
+                    group.members.contains(.scalar(principal))
                 else
                 {
                     $0 ?= group.overview.map(self.inliner.passage(overview:))
+
+                    $0[.ul]
+                    {
+                        self.inliner.list(members: group.members, to: &$0)
+                    }
+                    return
                 }
-                $0[.ul]
+
+                $0[.h2] = "See Also"
+
+                if  group.members.count < 13
                 {
-                    for member:Volume.Link in group.members
+                    $0[.ul]
                     {
-                        switch member
+                        self.inliner.list(members: group.members, to: &$0)
+                    }
+                }
+                else
+                {
+                    $0[.details]
+                    {
+                        $0[.summary]
+                        {
+                            $0[.p] { $0.class = "view" } = "View members"
+
+                            $0[.p] { $0.class = "hide" } = "Hide members"
+
+                            $0[.p, { $0.class = "reason" }]
+                            {
+                                $0 += """
+                                This section is hidden by default because it contains too many \
+
+                                """
+
+                                $0[.span] { $0.class = "count" } = "(\(group.members.count))"
+
+                                $0 += """
+                                 members.
+                                """
+                            }
+                        }
+                        $0[.ul]
                         {
-                        case .scalar(let scalar):   $0 ?= self.inliner.card(scalar)
-                        case .text(let text):       $0[.li] { $0[.span] { $0[.code] = text } }
+                            self.inliner.list(members: group.members, to: &$0)
                         }
                     }
                 }

Assets/css/Main.css.map

@@ -82,6 +82,23 @@ extension Inliner
     }
 }
 extension Inliner
+{
+    func list(members:[Volume.Link], to list:inout HTML.ContentEncoder)
+    {
+        for member:Volume.Link in members
+        {
+            switch member
+            {
+            case .scalar(let scalar):
+                list ?= self.card(scalar)
+
+            case .text(let text):
+                list[.li] { $0[.span] { $0[.code] = text } }
+            }
+        }
+    }
+}
+extension Inliner
 {
     func vectorLink<Display, Scalars>(
         components display:Display,

Sources/UnidocPages/Groups/Inliner.Groups.swift

@@ -1,3 +1,72 @@
+//  Collapsed groups
+section.group
+{
+    details
+    {
+        summary
+        {
+            cursor: pointer;
+
+            display: flex;
+            flex-flow: column nowrap;
+            align-items: center;
+
+            text-align: center;
+
+            p
+            {
+                margin: 0;
+            }
+
+            p.view,
+            p.hide
+            {
+                font-family: $typeface-sans;
+                font-weight: 700;
+                font-size: 125%;
+
+            }
+
+            p.hide
+            {
+                display: none;
+            }
+
+            p.reason
+            {
+                margin-top: 0.5rem;
+                font-style: italic;
+                color: $light-foreground-semi;
+
+                span.count
+                {
+                    font-style: normal;
+                }
+            }
+        }
+
+        summary::marker
+        {
+            content: '';
+        }
+    }
+    details[open]
+    {
+        summary
+        {
+            p.view,
+            p.reason
+            {
+                display: none;
+            }
+
+            p.hide
+            {
+                display: block;
+            }
+        }
+    }
+}
 //  Generic constraints
 section.group code.constraints
 {