Improve styles

5 files changed, 201 insertions, 107 deletions

diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
index 7a047d3c..abb4e85b 100644
--- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
+++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
@@ -22,7 +22,6 @@ import org.jetbrains.dokka.plugability.query
 import org.jetbrains.dokka.plugability.querySingle
 import org.jetbrains.dokka.utilities.htmlEscape
 import org.jetbrains.dokka.utilities.urlEncoded
-import java.io.File
 import java.net.URI
 
 open class HtmlRenderer(
@@ -278,12 +277,8 @@ open class HtmlRenderer(
                     val content = contentsForSourceSetDependent(divergentForPlatformDependent, pageContext)
 
                     consumer.onTagContentUnsafe {
-                        +createHTML().div("brief-with-platform-tags") {
-                            consumer.onTagContentUnsafe {
-                                +createHTML().div("inner-brief-with-platform-tags") {
-                                    consumer.onTagContentUnsafe { +it.key.first }
-                                }
-                            }
+                        +createHTML().div("with-platform-tags") {
+                            consumer.onTagContentUnsafe { +it.key.first }
 
                             consumer.onTagContentUnsafe {
                                 +createHTML().span("pull-right") {
@@ -296,7 +291,7 @@ open class HtmlRenderer(
                             }
                         }
                     }
-                    div("main-subrow") {
+                    div {
                         if (node.implicitlySourceSetHinted) {
                             buildPlatformDependent(divergentForPlatformDependent, pageContext)
                         } else {
@@ -366,64 +361,141 @@ open class HtmlRenderer(
             .filter { sourceSetRestriction == null || it.sourceSets.any { s -> s in sourceSetRestriction } }
             .takeIf { it.isNotEmpty() }
             ?.let {
-                val anchorName = node.dci.dri.first().anchor
-                withAnchor(anchorName) {
-                    div(classes = "table-row") {
-                        if (!style.contains(MultimoduleTable)) {
-                            attributes["data-filterable-current"] = node.sourceSets.joinToString(" ") {
-                                it.sourceSetIDs.merged.toString()
-                            }
-                            attributes["data-filterable-set"] = node.sourceSets.joinToString(" ") {
-                                it.sourceSetIDs.merged.toString()
-                            }
-                        }
+                when (pageContext) {
+                    is MultimoduleRootPage -> buildRowForMultiModule(node, it, pageContext, sourceSetRestriction, style)
+                    is ModulePage -> buildRowForModule(node, it, pageContext, sourceSetRestriction, style)
+                    else -> buildRowForContent(node, it, pageContext, sourceSetRestriction, style)
+                }
+            }
+    }
 
-                        it.filterIsInstance<ContentLink>().takeIf { it.isNotEmpty() }?.let {
-                            div("main-subrow " + node.style.joinToString(" ")) {
-                                it.filter { sourceSetRestriction == null || it.sourceSets.any { s -> s in sourceSetRestriction } }
-                                    .forEach {
-                                        span {
-                                            it.build(this, pageContext, sourceSetRestriction)
-                                            buildAnchor(anchorName)
-                                        }
-                                        if (ContentKind.shouldBePlatformTagged(node.dci.kind) && (node.sourceSets.size == 1 || pageContext is ModulePage))
-                                            createPlatformTags(node)
-                                    }
+    private fun FlowContent.buildRowForMultiModule(
+        contextNode: ContentGroup,
+        toRender: List<ContentNode>,
+        pageContext: ContentPage,
+        sourceSetRestriction: Set<DisplaySourceSet>?,
+        style: Set<Style>
+    ) {
+        val anchorName = contextNode.dci.dri.first().anchor
+        withAnchor(anchorName) {
+            div(classes = "table-row") {
+                div("main-subrow " + contextNode.style.joinToString(separator = " ")) {
+                    buildRowHeaderLink(toRender, pageContext, sourceSetRestriction, anchorName, "w-100")
+                    div {
+                        buildRowBriefSectionForDocs(toRender, pageContext, sourceSetRestriction)
+                    }
+                }
+            }
+        }
+    }
+
+    private fun FlowContent.buildRowForModule(
+        contextNode: ContentGroup,
+        toRender: List<ContentNode>,
+        pageContext: ContentPage,
+        sourceSetRestriction: Set<DisplaySourceSet>?,
+        style: Set<Style>
+    ) {
+        val anchorName = contextNode.dci.dri.first().anchor
+        withAnchor(anchorName) {
+            div(classes = "table-row") {
+                addSourceSetFilteringAttributes(contextNode)
+                div {
+                    div("main-subrow " + contextNode.style.joinToString(separator = " ")) {
+                        buildRowHeaderLink(toRender, pageContext, sourceSetRestriction, anchorName)
+                        div("pull-right") {
+                            if (ContentKind.shouldBePlatformTagged(contextNode.dci.kind)) {
+                                createPlatformTags(contextNode, cssClasses = "no-gutters")
                             }
                         }
+                    }
+                    div {
+                        buildRowBriefSectionForDocs(toRender, pageContext, sourceSetRestriction)
+                    }
+                }
+            }
+        }
+    }
 
-                        it.filter { it !is ContentLink }.takeIf { it.isNotEmpty() }?.let {
-                            if (pageContext is ModulePage || pageContext is MultimoduleRootPage) {
+    private fun FlowContent.buildRowForContent(
+        contextNode: ContentGroup,
+        toRender: List<ContentNode>,
+        pageContext: ContentPage,
+        sourceSetRestriction: Set<DisplaySourceSet>?,
+        style: Set<Style>
+    ) {
+        val anchorName = contextNode.dci.dri.first().anchor
+        withAnchor(anchorName) {
+            div(classes = "table-row") {
+                addSourceSetFilteringAttributes(contextNode)
+                div("main-subrow keyValue " + contextNode.style.joinToString(separator = " ")) {
+                    buildRowHeaderLink(toRender, pageContext, sourceSetRestriction, anchorName)
+                    div {
+                        toRender.filter { it !is ContentLink && !it.hasStyle(ContentStyle.RowTitle)}.takeIf { it.isNotEmpty() }?.let {
+                            if (ContentKind.shouldBePlatformTagged(contextNode.dci.kind) && contextNode.sourceSets.size == 1)
+                                createPlatformTags(contextNode)
+
+                            div("title") {
                                 it.forEach {
-                                    span(classes = if (it.dci.kind == ContentKind.Comment) "brief-comment" else "") {
-                                        it.build(this, pageContext, sourceSetRestriction)
-                                    }
-                                }
-                            } else {
-                                div("platform-dependent-row keyValue") {
-                                    val title = it.filter { it.style.contains(ContentStyle.RowTitle) }
-                                    div {
-                                        title.forEach {
-                                            it.build(this, pageContext, sourceSetRestriction)
-                                        }
-                                    }
-                                    div("title") {
-                                        (it - title).forEach {
-                                            it.build(this, pageContext, sourceSetRestriction)
-                                        }
-                                    }
+                                    it.build(this, pageContext, sourceSetRestriction)
                                 }
                             }
                         }
                     }
                 }
             }
+        }
     }
 
-    private fun FlowContent.createPlatformTagBubbles(sourceSets: List<DisplaySourceSet>) {
+    private fun FlowContent.buildRowHeaderLink(
+        toRender: List<ContentNode>,
+        pageContext: ContentPage,
+        sourceSetRestriction: Set<DisplaySourceSet>?,
+        anchorName: String,
+        classes: String = ""
+    ) {
+        toRender.filter { it is ContentLink || it.hasStyle(ContentStyle.RowTitle) }.takeIf { it.isNotEmpty() }?.let {
+            div(classes) {
+                it.filter { sourceSetRestriction == null || it.sourceSets.any { s -> s in sourceSetRestriction } }
+                    .forEach {
+                        span("inline-flex") {
+                            it.build(this, pageContext, sourceSetRestriction)
+                            if(it is ContentLink) buildAnchor(anchorName)
+                        }
+                    }
+            }
+        }
+    }
+
+    private fun FlowContent.addSourceSetFilteringAttributes(
+        contextNode: ContentGroup,
+    ) {
+        attributes["data-filterable-current"] = contextNode.sourceSets.joinToString(" ") {
+            it.sourceSetIDs.merged.toString()
+        }
+        attributes["data-filterable-set"] = contextNode.sourceSets.joinToString(" ") {
+            it.sourceSetIDs.merged.toString()
+        }
+    }
+
+    private fun FlowContent.buildRowBriefSectionForDocs(
+        toRender: List<ContentNode>,
+        pageContext: ContentPage,
+        sourceSetRestriction: Set<DisplaySourceSet>?,
+    ){
+        toRender.filter { it !is ContentLink }.takeIf { it.isNotEmpty() }?.let {
+            it.forEach {
+                span(classes = if (it.dci.kind == ContentKind.Comment) "brief-comment" else "") {
+                    it.build(this, pageContext, sourceSetRestriction)
+                }
+            }
+        }
+    }
+
+    private fun FlowContent.createPlatformTagBubbles(sourceSets: List<DisplaySourceSet>, cssClasses: String = "") {
         if (shouldRenderSourceSetBubbles) {
-            div("platform-tags") {
-                sourceSets.forEach {
+            div("platform-tags " + cssClasses) {
+                sourceSets.sortedBy { it.name }.forEach {
                     div("platform-tag") {
                         when (it.platform.key) {
                             "common" -> classes = classes + "common-like"
@@ -440,12 +512,13 @@ open class HtmlRenderer(
 
     private fun FlowContent.createPlatformTags(
         node: ContentNode,
-        sourceSetRestriction: Set<DisplaySourceSet>? = null
+        sourceSetRestriction: Set<DisplaySourceSet>? = null,
+        cssClasses: String = ""
     ) {
         node.takeIf { sourceSetRestriction == null || it.sourceSets.any { s -> s in sourceSetRestriction } }?.let {
             createPlatformTagBubbles(node.sourceSets.filter {
                 sourceSetRestriction == null || it in sourceSetRestriction
-            })
+            }.sortedBy { it.name }, cssClasses)
         }
     }
 
diff --git a/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt b/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt
index 465f8cb7..6273e789 100644
--- a/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt
+++ b/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt
@@ -63,7 +63,7 @@ class KotlinSignatureProvider(ctcc: CommentsToContentConverter, logger: DokkaLog
             contentBuilder.contentFor(
                 e,
                 ContentKind.Symbol,
-                setOf(TextStyle.Monospace, TextStyle.Block) + e.stylesIfDeprecated(it),
+                setOf(TextStyle.Monospace) + e.stylesIfDeprecated(it),
                 sourceSets = setOf(it)
             ) {
                 group(styles = setOf(TextStyle.Block)) {
diff --git a/plugins/base/src/main/kotlin/translators/documentables/DefaultPageCreator.kt b/plugins/base/src/main/kotlin/translators/documentables/DefaultPageCreator.kt
index 41881baf..f5fbb51e 100644
--- a/plugins/base/src/main/kotlin/translators/documentables/DefaultPageCreator.kt
+++ b/plugins/base/src/main/kotlin/translators/documentables/DefaultPageCreator.kt
@@ -117,7 +117,7 @@ open class DefaultPageCreator(
 
             link(it.name, it.dri)
             if (it.sourceSets.size == 1 || (documentations.isNotEmpty() && haveSameContent)) {
-                documentations.first()?.let { firstSentenceComment(kind = ContentKind.Comment, content = it) }
+                documentations.first()?.let { firstSentenceComment(kind = ContentKind.Comment, content = it.root) }
             }
         }
     }
@@ -169,8 +169,8 @@ open class DefaultPageCreator(
         ) {
             link(it.name, it.dri, kind = ContentKind.Main)
             sourceSetDependentHint(it.dri, it.sourceSets.toSet(), kind = ContentKind.SourceSetDependentHint) {
-                contentForBrief(it)
                 +buildSignature(it)
+                contentForBrief(it)
             }
         }
         s.safeAs<WithExtraProperties<Documentable>>()?.let { it.extra[InheritorsInfo] }?.let { inheritors ->
@@ -206,8 +206,8 @@ open class DefaultPageCreator(
         group(kind = ContentKind.Cover) {
             cover(e.name)
             sourceSetDependentHint(e.dri, e.sourceSets.toSet()) {
-                +contentForDescription(e)
                 +buildSignature(e)
+                +contentForDescription(e)
             }
         }
         group(styles = setOf(ContentStyle.TabbedContent)) {
@@ -226,8 +226,8 @@ open class DefaultPageCreator(
         group(kind = ContentKind.Cover, sourceSets = mainSourcesetData + extensions.sourceSets) {
             cover(c.name.orEmpty())
             sourceSetDependentHint(c.dri, c.sourceSets) {
-                +contentForDescription(c)
                 +buildSignature(c)
+                +contentForDescription(c)
             }
         }
 
@@ -249,8 +249,8 @@ open class DefaultPageCreator(
                         kind = ContentKind.SourceSetDependentHint,
                         styles = emptySet()
                     ) {
-                        contentForBrief(it)
                         +buildSignature(it)
+                        contentForBrief(it)
                     }
                 }
             }
@@ -267,8 +267,8 @@ open class DefaultPageCreator(
                 ) {
                     link(it.name, it.dri)
                     sourceSetDependentHint(it.dri, it.sourceSets.toSet(), kind = ContentKind.SourceSetDependentHint) {
-                        contentForBrief(it)
                         +buildSignature(it)
+                        contentForBrief(it)
                     }
                 }
             }
@@ -464,7 +464,8 @@ open class DefaultPageCreator(
         documentable.sourceSets.forEach { sourceSet ->
             documentable.documentation[sourceSet]?.children?.firstOrNull()?.root?.let {
                 group(sourceSets = setOf(sourceSet), kind = ContentKind.BriefComment) {
-                    comment(it)
+                    if(documentable.hasSeparatePage) firstSentenceComment(it)
+                    else comment(it)
                 }
             }
         }
@@ -495,13 +496,13 @@ open class DefaultPageCreator(
         }
         divergentGroup(ContentDivergentGroup.GroupID("member")) {
             instance(setOf(d.dri), d.sourceSets.toSet()) {
-                before {
-                    +contentForDescription(d)
-                    +contentForComments(d)
-                }
                 divergent(kind = ContentKind.Symbol) {
                     +buildSignature(d)
                 }
+                after {
+                    +contentForDescription(d)
+                    +contentForComments(d)
+                }
             }
         }
     }
@@ -535,15 +536,15 @@ open class DefaultPageCreator(
                             ) {
                                 elements.map {
                                     instance(setOf(it.dri), it.sourceSets.toSet(), extra = PropertyContainer.withAll(SymbolAnchorHint)) {
-                                        before {
-                                            contentForBrief(it)
-                                            contentForSinceKotlin(it)
-                                        }
                                         divergent {
                                             group {
                                                 +buildSignature(it)
                                             }
                                         }
+                                        after {
+                                            contentForBrief(it)
+                                            contentForSinceKotlin(it)
+                                        }
                                     }
                                 }
                             }
@@ -566,4 +567,7 @@ open class DefaultPageCreator(
 
     private val Documentable.descriptions: SourceSetDependent<Description>
         get() = groupedTags.withTypeUnnamed<Description>()
+
+    private val Documentable.hasSeparatePage: Boolean
+        get() = this !is DTypeAlias
 }
diff --git a/plugins/base/src/main/kotlin/translators/documentables/PageContentBuilder.kt b/plugins/base/src/main/kotlin/translators/documentables/PageContentBuilder.kt
index 42700f20..4bebd9f1 100644
--- a/plugins/base/src/main/kotlin/translators/documentables/PageContentBuilder.kt
+++ b/plugins/base/src/main/kotlin/translators/documentables/PageContentBuilder.kt
@@ -289,14 +289,14 @@ open class PageContentBuilder(
         }
 
         fun firstSentenceComment(
-            content: Description,
+            content: DocTag,
             kind: Kind = ContentKind.Comment,
             sourceSets: Set<DokkaSourceSet> = mainSourcesetData,
             styles: Set<Style> = mainStyles,
             extra: PropertyContainer<ContentNode> = mainExtra
         ){
             val builtDescription = commentsConverter.buildContent(
-                content.root,
+                content,
                 DCI(mainDRI, kind),
                 sourceSets
             )
diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css
index 7c1b2803..97ac19f7 100644
--- a/plugins/base/src/main/resources/dokka/styles/style.css
+++ b/plugins/base/src/main/resources/dokka/styles/style.css
@@ -3,7 +3,7 @@
 @import url('jetbrains-mono.css');
 
 :root {
-    --breadcrumb-font-color: #A6AFBA;
+    --breadcrumb-font-color: #637282;
     --hover-link-color: #5B5DEF;
     --average-color: #637282;
     --footer-height: 64px;
@@ -62,7 +62,7 @@
     background-color: white;
 }
 
-.tabs-section-body > .table {
+.tabs-section-body > div {
     margin-top: 12px;
 }
 
@@ -130,9 +130,13 @@
     width: 100%;
 }
 
+.cover p.paragraph {
+    margin-top: 4px;
+}
+
 .divergent-group {
     background-color: white;
-    padding: 16px 8px;
+    padding: 8px 0px 8px 0;
     margin-bottom: 2px;
 }
 
@@ -164,15 +168,15 @@
 
 #leftColumn {
     width: 280px;
-    min-height: 100%;
     border-right: 1px solid #DADFE6;
-    flex: 0 0 auto;
+    display: flex;
+    flex-direction: column;
 }
 
 #sideMenu {
-    max-height: calc(100% - 140px);
     padding-top: 16px;
     position: relative;
+    max-height: calc(100% - 140px);
 }
 
 #sideMenu img {
@@ -238,6 +242,13 @@ code.paragraph {
     font-weight: bold;
     position: relative;
     line-height: 24px;
+    font-family: JetBrains Mono, Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
+    font-size: 14px;
+    min-height: 43px;
+}
+
+.symbol > a {
+    color: var(--hover-link-color);
 }
 
 .copy-icon {
@@ -313,6 +324,12 @@ code.paragraph {
     overflow: hidden;
 }
 
+
+.sideMenuPart a:hover {
+    text-decoration: none;
+    color: var(--average-color);
+}
+
 .sideMenuPart > .overview:before {
     box-sizing: border-box;
     content: '';
@@ -398,16 +415,6 @@ td:first-child {
     font-size: 12px;
 }
 
-.symbol {
-    font-family: JetBrains Mono, Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
-    font-size: 12px;
-    min-height: 43px;
-}
-
-.symbol > a {
-    color: var(--hover-link-color);
-}
-
 .identifier {
     color: darkblue;
     font-size: 12px;
@@ -417,7 +424,6 @@ td:first-child {
 .brief {
     white-space: pre-wrap;
     overflow: hidden;
-    padding-top: 8px;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -518,9 +524,8 @@ blockquote {
 }
 
 code, pre {
-    font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
     color: #333;
-    font-size: 12px;
+    font-size: 14px;
 }
 
 pre {
@@ -657,20 +662,23 @@ footer {
     letter-spacing: normal;
     text-align: center;
     outline: none;
-
     color: #fff
-
 }
 
 .platform-tags {
     display: flex;
     flex-wrap: wrap;
+    padding-bottom: 8px;
 }
 
 .platform-tags > .platform-tag {
     align-self: center;
 }
 
+.platform-tags > .platform-tag:first-of-type {
+    margin-left: auto;
+}
+
 .platform-tag.jvm-like {
     background-color: #4DBB5F;
     color: white;
@@ -728,16 +736,16 @@ td.content {
     display: flex;
     flex-direction: row;
     padding: 0;
-    justify-content: space-between;
     flex-wrap: wrap;
 }
 
-.main-subrow > span {
+.main-subrow > div > span {
     display: flex;
     position: relative;
 }
 
-.main-subrow > span > a {
+.main-subrow > div > span > a, 
+.main-subrow > div > span > span[data-unresolved-link] {
     text-decoration: none;
     font-style: normal;
     font-weight: 600;
@@ -745,7 +753,7 @@ td.content {
     color: #282E34;
 }
 
-.main-subrow > span > a:hover {
+.main-subrow > div > span > a:hover {
     color: var(--hover-link-color);
 }
 
@@ -776,6 +784,10 @@ td.content {
     position: relative;
 }
 
+.inline-flex {
+    display: inline-flex;
+}
+
 .platform-hinted {
     flex: auto;
     display: block;
@@ -853,17 +865,12 @@ td.content {
     top: 0;
 }
 
-.inner-brief-with-platform-tags {
-    display: block;
-    width: 100%
-}
-
-.brief-with-platform-tags {
+.with-platform-tags {
     display: flex;
 }
 
-.brief-with-platform-tags ~ .main-subrow {
-    padding-top: 16px;
+.with-platform-tags ~ .main-subrow {
+    padding-top: 8px;
 }
 
 .cover .with-platform-tabs {
@@ -893,7 +900,7 @@ td.content {
 }
 
 .table-row .with-platform-tabs .sourceset-depenent-content .brief {
-    padding: 16px;
+    padding: 8px;
     background-color: #f4f4f4;
 }
 
@@ -1074,6 +1081,15 @@ div.runnablesample {
     margin-bottom: 0.2em;
 }
 
+.w-100 {
+    width: 100%;
+}
+
+.no-gutters {
+    margin: 0;
+    padding: 0;
+}
+
 @media screen and (max-width: 1119px) {
     /* TODO this feels wrong as only is an aproximation of correct solution*/
     .filter-section {
@@ -1136,7 +1152,8 @@ div.runnablesample {
         margin-left: -0.5em;
     }
     #content {
-        padding: 0 var(--mobile-horizontal-spacing-for-content);
+        padding: var(--mobile-horizontal-spacing-for-content);
+        padding-top: 0;
     }
     #sideMenu {
         padding-bottom: 16px;