feat: add indentation on nested BulletList

also updated `app.css` to visualy handle nested bullet list Signed-off-by: gfanton <8671905+gfanton@users.noreply.github.com>
gnolang · Aug 10, 2023 · 3650d5a · 3650d5a
1 parent f1d8bc8
commit 3650d5a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/examples/gno.land/p/demo/ui/ui.gno b/examples/gno.land/p/demo/ui/ui.gno
@@ -114,16 +114,27 @@ func (l Link) String(dom DOM) string {
 
 type BulletList []DomStringer
 
-func (bl BulletList) String(dom DOM) string {
+func (bl BulletList) stringIndent(dom DOM, depth int) string {
 	output := ""
 
+	// indent by 2 spaces * depth
+	indent := strings.Repeat("  ", depth)
 	for _, entry := range bl {
-		output += "- " + entry.String(dom) + "\n"
+		switch e := entry.(type) {
+		case BulletList:
+			output += e.stringIndent(dom, depth+1)
+		default:
+			output += indent + "- " + e.String(dom) + "\n"
+		}
 	}
 
 	return output
 }
 
+func (bl BulletList) String(dom DOM) string {
+	return bl.stringIndent(dom, 0)
+}
+
 func Text(s string) DomStringer {
 	return Raw{Content: s}
 }

diff --git a/gno.land/cmd/gnoweb/static/css/app.css b/gno.land/cmd/gnoweb/static/css/app.css
@@ -236,15 +236,21 @@ a[href="#"] {
 
 ul {
   padding: 0;
+  list-style: none;
+}
+
+ul > li > ul {
+    padding-left: 1rem;
+    list-style: circle inside;
 }
 
 li {
-  list-style: none;
   margin-bottom: 0.4rem;
 }
 
 li > * {
   vertical-align: middle;
+  margin: 0;
 }
 
 input {