Skip to content

Improve and simplify the layout for datatypes, with css #830

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 24, 2022
Merged

Improve and simplify the layout for datatypes, with css #830

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a27800e
Use lists instead of tables for types.
Drup Mar 12, 2021
3e9783c
Avoid overriding between different set of CSS classes.
Drup Mar 12, 2021
57a59ae
adding css for "docsrc as lists"
panglesd Feb 18, 2022
7f8c820
promoting tests for new list layout
panglesd Feb 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
45 changes: 20 additions & 25 deletions src/html/generator.ml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,12 @@ let mk_anchor_link id =

let mk_anchor anchor =
match anchor with
| None -> ([], [])
| None -> ([], [], [])
| Some { Odoc_document.Url.Anchor.anchor; _ } ->
let link = mk_anchor_link anchor in
let attrib = [ Html.a_id anchor; Html.a_class [ "anchored" ] ] in
(attrib, link)
let extra_attr = [ Html.a_id anchor ] in
let extra_class = [ "anchored" ] in
(extra_attr, extra_class, link)

let class_ (l : Class.t) = if l = [] then [] else [ Html.a_class l ]

Expand Down Expand Up @@ -204,7 +205,7 @@ let div : ([< Html_types.div_attrib ], [< item ], [> Html_types.div ]) Html.star
=
Html.Unsafe.node "div"

let spec_class = function [] -> [] | attr -> class_ ("spec" :: attr)
let spec_class attr = class_ ("spec" :: attr)

let spec_doc_div ~resolve = function
| [] -> []
Expand Down Expand Up @@ -250,28 +251,22 @@ let rec documentedSrc ~resolve (t : DocumentedSrc.t) : item Html.elt list =
| [] -> []
| doc ->
let opening, closing = markers in
let delim s =
[ Html.span ~a:(class_ [ "comment-delim" ]) [ Html.txt s ] ]
in
[
Html.td
Html.div
~a:(class_ [ "def-doc" ])
(Html.span
~a:(class_ [ "comment-delim" ])
[ Html.txt opening ]
:: block ~resolve doc
@ [
Html.span
~a:(class_ [ "comment-delim" ])
[ Html.txt closing ];
]);
(delim opening @ block ~resolve doc @ delim closing);
]
in
let a, link = mk_anchor anchor in
let content =
let c = link @ content in
Html.td ~a:(class_ attrs) (c :> any Html.elt list)
in
Html.tr ~a (content :: doc)
let extra_attr, extra_class, link = mk_anchor anchor in
let content = (content :> any Html.elt list) in
Html.li
~a:(extra_attr @ class_ (attrs @ extra_class))
(link @ content @ doc)
in
Html.table (List.map one l) :: to_html rest
Html.ol (List.map one l) :: to_html rest
in
to_html t

Expand Down Expand Up @@ -307,8 +302,8 @@ and items ~resolve l : item Html.elt list =
let details ~open' =
let open' = if open' then [ Html.a_open () ] else [] in
let summary =
let anchor_attrib, anchor_link = mk_anchor anchor in
let a = spec_class attr @ anchor_attrib in
let extra_attr, extra_class, anchor_link = mk_anchor anchor in
let a = spec_class (attr @ extra_class) @ extra_attr in
Html.summary ~a @@ anchor_link @ source (inline ~resolve) summary
in
[ Html.details ~a:open' summary included_html ]
Expand All @@ -322,8 +317,8 @@ and items ~resolve l : item Html.elt list =
let inc = [ Html.div ~a:[ Html.a_class a_class ] (doc @ content) ] in
(continue_with [@tailcall]) rest inc
| Declaration { Item.attr; anchor; content; doc } :: rest ->
let anchor_attrib, anchor_link = mk_anchor anchor in
let a = spec_class attr @ anchor_attrib in
let extra_attr, extra_class, anchor_link = mk_anchor anchor in
let a = spec_class (attr @ extra_class) @ extra_attr in
let content = anchor_link @ documentedSrc ~resolve content in
let spec =
let doc = spec_doc_div ~resolve doc in
Expand Down
42 changes: 26 additions & 16 deletions src/odoc/etc/odoc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -419,28 +419,43 @@ pre code {
padding: 0.35em 0.5em;
}

.def-doc {
margin-bottom: 10px;
li:not(:last-child) > .def-doc {
margin-bottom: 15px;
}

/* Spacing between items */
div.odoc-spec,.odoc-include {
margin-bottom: 2em;
}

.spec.type .variant {
.spec.type .variant p, .spec.type .record p {
margin: 5px;
}

.spec.type .variant, .spec.type .record {
margin-left: 2ch;
list-style: none;
display: flex;
flex-wrap: wrap;
row-gap: 4px;
}
.spec.type .variant p {
margin: 0;
font-style: italic;

.spec.type .record > code, .spec.type .variant > code {
min-width: 40%;
}
.spec.type .record {
margin-left: 2ch;

.spec.type > ol {
margin-top: 0;
margin-bottom: 0;
}
.spec.type .record p {
margin: 0;
font-style: italic;

.spec.type .record > .def-doc, .spec.type .variant > .def-doc {
min-width:50%;
padding-left: 22px;
margin-left: 10%;
border-radius: 3px;
flex-grow:1;
border-left: 0.1em solid var(--spec-summary-border-color);
}

div.def {
Expand All @@ -449,11 +464,6 @@ div.def {
padding-left: 2ex;
}

div.def+div.def-doc {
margin-left: 1ex;
margin-top: 2.5px
}

div.def-doc>*:first-child {
margin-top: 0;
}
Expand Down
2 changes: 1 addition & 1 deletion test/generators/html/Alias-X.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ <h1>Module <code><span>Alias.X</span></code></h1>
</header>
<div class="odoc-content">
<div class="odoc-spec">
<div class="spec type" id="type-t" class="anchored">
<div class="spec type anchored" id="type-t">
<a href="#type-t" class="anchor"></a>
<code><span><span class="keyword">type</span> t</span>
<span> = int</span>
Expand Down
2 changes: 1 addition & 1 deletion test/generators/html/Alias.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ <h1>Module <code><span>Alias</span></code></h1>
</header>
<div class="odoc-content">
<div class="odoc-spec">
<div class="spec module" id="module-X" class="anchored">
<div class="spec module anchored" id="module-X">
<a href="#module-X" class="anchor"></a>
<code>
<span><span class="keyword">module</span> <a href="Alias-X.html">X</a>
Expand Down
4 changes: 2 additions & 2 deletions test/generators/html/Bugs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,15 @@ <h1>Module <code><span>Bugs</span></code></h1>
</header>
<div class="odoc-content">
<div class="odoc-spec">
<div class="spec type" id="type-opt" class="anchored">
<div class="spec type anchored" id="type-opt">
<a href="#type-opt" class="anchor"></a>
<code><span><span class="keyword">type</span> <span>'a opt</span></span>
<span> = <span><span class="type-var">'a</span> option</span></span>
</code>
</div>
</div>
<div class="odoc-spec">
<div class="spec value" id="val-foo" class="anchored">
<div class="spec value anchored" id="val-foo">
<a href="#val-foo" class="anchor"></a>
<code>
<span><span class="keyword">val</span> foo :
Expand Down
4 changes: 2 additions & 2 deletions test/generators/html/Bugs_post_406.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ <h1>Module <code><span>Bugs_post_406</span></code></h1>
</header>
<div class="odoc-content">
<div class="odoc-spec">
<div class="spec class-type" id="class-type-let_open" class="anchored">
<div class="spec class-type anchored" id="class-type-let_open">
<a href="#class-type-let_open" class="anchor"></a>
<code>
<span><span class="keyword">class</span>
Expand All @@ -31,7 +31,7 @@ <h1>Module <code><span>Bugs_post_406</span></code></h1>
</div>
</div>
<div class="odoc-spec">
<div class="spec class" id="class-let_open'" class="anchored">
<div class="spec class anchored" id="class-let_open'">
<a href="#class-let_open'" class="anchor"></a>
<code><span><span class="keyword">class</span> </span>
<span><a href="Bugs_post_406-class-let_open'.html">let_open'</a></span>
Expand Down
4 changes: 2 additions & 2 deletions test/generators/html/Bugs_pre_410.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ <h1>Module <code><span>Bugs_pre_410</span></code></h1>
</header>
<div class="odoc-content">
<div class="odoc-spec">
<div class="spec type" id="type-opt'" class="anchored">
<div class="spec type anchored" id="type-opt'">
<a href="#type-opt'" class="anchor"></a>
<code>
<span><span class="keyword">type</span> <span>'a opt'</span></span>
Expand All @@ -22,7 +22,7 @@ <h1>Module <code><span>Bugs_pre_410</span></code></h1>
</div>
</div>
<div class="odoc-spec">
<div class="spec value" id="val-foo'" class="anchored">
<div class="spec value anchored" id="val-foo'">
<a href="#val-foo'" class="anchor"></a>
<code>
<span><span class="keyword">val</span> foo' :
Expand Down
20 changes: 10 additions & 10 deletions test/generators/html/Class.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ <h1>Module <code><span>Class</span></code></h1>
</header>
<div class="odoc-content">
<div class="odoc-spec">
<div class="spec class-type" id="class-type-empty" class="anchored">
<div class="spec class-type anchored" id="class-type-empty">
<a href="#class-type-empty" class="anchor"></a>
<code>
<span><span class="keyword">class</span>
Expand All @@ -25,7 +25,7 @@ <h1>Module <code><span>Class</span></code></h1>
</div>
</div>
<div class="odoc-spec">
<div class="spec class-type" id="class-type-mutually" class="anchored">
<div class="spec class-type anchored" id="class-type-mutually">
<a href="#class-type-mutually" class="anchor"></a>
<code>
<span><span class="keyword">class</span>
Expand All @@ -39,7 +39,7 @@ <h1>Module <code><span>Class</span></code></h1>
</div>
</div>
<div class="odoc-spec">
<div class="spec class-type" id="class-type-recursive" class="anchored">
<div class="spec class-type anchored" id="class-type-recursive">
<a href="#class-type-recursive" class="anchor"></a>
<code>
<span><span class="keyword">class</span>
Expand All @@ -53,7 +53,7 @@ <h1>Module <code><span>Class</span></code></h1>
</div>
</div>
<div class="odoc-spec">
<div class="spec class" id="class-mutually'" class="anchored">
<div class="spec class anchored" id="class-mutually'">
<a href="#class-mutually'" class="anchor"></a>
<code><span><span class="keyword">class</span> </span>
<span><a href="Class-class-mutually'.html">mutually'</a></span>
Expand All @@ -62,7 +62,7 @@ <h1>Module <code><span>Class</span></code></h1>
</div>
</div>
<div class="odoc-spec">
<div class="spec class" id="class-recursive'" class="anchored">
<div class="spec class anchored" id="class-recursive'">
<a href="#class-recursive'" class="anchor"></a>
<code><span><span class="keyword">class</span> </span>
<span><a href="Class-class-recursive'.html">recursive'</a></span>
Expand All @@ -71,8 +71,8 @@ <h1>Module <code><span>Class</span></code></h1>
</div>
</div>
<div class="odoc-spec">
<div class="spec class-type" id="class-type-empty_virtual"
class="anchored"><a href="#class-type-empty_virtual" class="anchor"></a>
<div class="spec class-type anchored" id="class-type-empty_virtual">
<a href="#class-type-empty_virtual" class="anchor"></a>
<code>
<span><span class="keyword">class</span>
<span class="keyword">type</span> <span class="keyword">virtual</span>
Expand All @@ -87,7 +87,7 @@ <h1>Module <code><span>Class</span></code></h1>
</div>
</div>
<div class="odoc-spec">
<div class="spec class" id="class-empty_virtual'" class="anchored">
<div class="spec class anchored" id="class-empty_virtual'">
<a href="#class-empty_virtual'" class="anchor"></a>
<code>
<span><span class="keyword">class</span>
Expand All @@ -99,7 +99,7 @@ <h1>Module <code><span>Class</span></code></h1>
</div>
</div>
<div class="odoc-spec">
<div class="spec class-type" id="class-type-polymorphic" class="anchored">
<div class="spec class-type anchored" id="class-type-polymorphic">
<a href="#class-type-polymorphic" class="anchor"></a>
<code>
<span><span class="keyword">class</span>
Expand All @@ -114,7 +114,7 @@ <h1>Module <code><span>Class</span></code></h1>
</div>
</div>
<div class="odoc-spec">
<div class="spec class" id="class-polymorphic'" class="anchored">
<div class="spec class anchored" id="class-polymorphic'">
<a href="#class-polymorphic'" class="anchor"></a>
<code><span><span class="keyword">class</span> 'a </span>
<span><a href="Class-class-polymorphic'.html">polymorphic'</a></span>
Expand Down
2 changes: 1 addition & 1 deletion test/generators/html/External.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ <h1>Module <code><span>External</span></code></h1>
</header>
<div class="odoc-content">
<div class="odoc-spec">
<div class="spec value external" id="val-foo" class="anchored">
<div class="spec value external anchored" id="val-foo">
<a href="#val-foo" class="anchor"></a>
<code>
<span><span class="keyword">val</span> foo :
Expand Down
2 changes: 1 addition & 1 deletion test/generators/html/Functor-F1-argument-1-Arg.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ <h1>Parameter <code><span>F1.1-Arg</span></code></h1>
</header>
<div class="odoc-content">
<div class="odoc-spec">
<div class="spec type" id="type-t" class="anchored">
<div class="spec type anchored" id="type-t">
<a href="#type-t" class="anchor"></a>
<code><span><span class="keyword">type</span> t</span></code>
</div>
Expand Down
4 changes: 2 additions & 2 deletions test/generators/html/Functor-F1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ <h1>Module <code><span>Functor.F1</span></code></h1>
<h2 id="parameters"><a href="#parameters" class="anchor"></a>Parameters
</h2>
<div class="odoc-spec">
<div class="spec parameter" id="argument-1-Arg" class="anchored">
<div class="spec parameter anchored" id="argument-1-Arg">
<a href="#argument-1-Arg" class="anchor"></a>
<code><span><span class="keyword">module</span> </span>
<span><a href="Functor-F1-argument-1-Arg.html">Arg</a></span>
Expand All @@ -32,7 +32,7 @@ <h2 id="parameters"><a href="#parameters" class="anchor"></a>Parameters
</div>
<h2 id="signature"><a href="#signature" class="anchor"></a>Signature</h2>
<div class="odoc-spec">
<div class="spec type" id="type-t" class="anchored">
<div class="spec type anchored" id="type-t">
<a href="#type-t" class="anchor"></a>
<code><span><span class="keyword">type</span> t</span></code>
</div>
Expand Down
2 changes: 1 addition & 1 deletion test/generators/html/Functor-F2-argument-1-Arg.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ <h1>Parameter <code><span>F2.1-Arg</span></code></h1>
</header>
<div class="odoc-content">
<div class="odoc-spec">
<div class="spec type" id="type-t" class="anchored">
<div class="spec type anchored" id="type-t">
<a href="#type-t" class="anchor"></a>
<code><span><span class="keyword">type</span> t</span></code>
</div>
Expand Down
4 changes: 2 additions & 2 deletions test/generators/html/Functor-F2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ <h1>Module <code><span>Functor.F2</span></code></h1>
<h2 id="parameters"><a href="#parameters" class="anchor"></a>Parameters
</h2>
<div class="odoc-spec">
<div class="spec parameter" id="argument-1-Arg" class="anchored">
<div class="spec parameter anchored" id="argument-1-Arg">
<a href="#argument-1-Arg" class="anchor"></a>
<code><span><span class="keyword">module</span> </span>
<span><a href="Functor-F2-argument-1-Arg.html">Arg</a></span>
Expand All @@ -32,7 +32,7 @@ <h2 id="parameters"><a href="#parameters" class="anchor"></a>Parameters
</div>
<h2 id="signature"><a href="#signature" class="anchor"></a>Signature</h2>
<div class="odoc-spec">
<div class="spec type" id="type-t" class="anchored">
<div class="spec type anchored" id="type-t">
<a href="#type-t" class="anchor"></a>
<code><span><span class="keyword">type</span> t</span>
<span> = <a href="Functor-F2-argument-1-Arg.html#type-t">Arg.t</a>
Expand Down
2 changes: 1 addition & 1 deletion test/generators/html/Functor-F3-argument-1-Arg.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ <h1>Parameter <code><span>F3.1-Arg</span></code></h1>
</header>
<div class="odoc-content">
<div class="odoc-spec">
<div class="spec type" id="type-t" class="anchored">
<div class="spec type anchored" id="type-t">
<a href="#type-t" class="anchor"></a>
<code><span><span class="keyword">type</span> t</span></code>
</div>
Expand Down
4 changes: 2 additions & 2 deletions test/generators/html/Functor-F3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ <h1>Module <code><span>Functor.F3</span></code></h1>
<h2 id="parameters"><a href="#parameters" class="anchor"></a>Parameters
</h2>
<div class="odoc-spec">
<div class="spec parameter" id="argument-1-Arg" class="anchored">
<div class="spec parameter anchored" id="argument-1-Arg">
<a href="#argument-1-Arg" class="anchor"></a>
<code><span><span class="keyword">module</span> </span>
<span><a href="Functor-F3-argument-1-Arg.html">Arg</a></span>
Expand All @@ -32,7 +32,7 @@ <h2 id="parameters"><a href="#parameters" class="anchor"></a>Parameters
</div>
<h2 id="signature"><a href="#signature" class="anchor"></a>Signature</h2>
<div class="odoc-spec">
<div class="spec type" id="type-t" class="anchored">
<div class="spec type anchored" id="type-t">
<a href="#type-t" class="anchor"></a>
<code><span><span class="keyword">type</span> t</span>
<span> = <a href="Functor-F3-argument-1-Arg.html#type-t">Arg.t</a>
Expand Down
Loading