Align table headers width

For consistency across table, most visible on the dependencies page which contains two tables.
avisi-cloud · Jul 2, 2024 · 00ea644 · 00ea644
1 parent 32f81b3
commit 00ea644
Show file tree

Hide file tree

Showing 14 changed files with 142 additions and 75 deletions.
diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/DecisionsTableViewModel.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/DecisionsTableViewModel.kt
@@ -7,7 +7,13 @@ import nl.avisi.structurizr.site.generatr.site.formatDate
 
 fun PageViewModel.createDecisionsTableViewModel(decisions: Collection<Decision>, hrefFactory: (Decision) -> String) =
     TableViewModel.create {
-        headerRow(headerCell("ID"), headerCell("Date"), headerCell("Status"), headerCell("Title"))
+        headerRow(
+            headerCellSmall("ID"),
+            headerCell("Date"),
+            headerCell("Status"),
+            headerCellLarge("Title")
+        )
+
         decisions
             .sortedBy { it.id.toInt() }
             .forEach {

diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/PropertiesTableViewModel.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/PropertiesTableViewModel.kt
@@ -4,7 +4,11 @@ import com.structurizr.util.Url
 
 fun createPropertiesTableViewModel(properties: Map<String, String>) =
     TableViewModel.create {
-        headerRow(headerCell("Name"), headerCell("Value"))
+        headerRow(
+            headerCellMedium("Name"),
+            headerCell("Value")
+        )
+
         properties
             .toSortedMap()
             .forEach { (name, value) ->

diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/SectionsTableViewModel.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/SectionsTableViewModel.kt
@@ -7,7 +7,11 @@ import nl.avisi.structurizr.site.generatr.hasSections
 
 fun PageViewModel.createSectionsTableViewModel(sections: Collection<Section>, dropFirst: Boolean = true, hrefFactory: (Section) -> String) =
     TableViewModel.create {
-        headerRow(headerCell("#"), headerCell("Title"))
+        headerRow(
+            headerCellSmall("#"),
+            headerCell("Title")
+        )
+
         sections
             .sortedBy { it.order }
             .drop(if (dropFirst) 1 else 0)

diff --git a/.../nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemDependenciesPageViewModel.kt b/.../nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemDependenciesPageViewModel.kt
@@ -37,8 +37,8 @@ class SoftwareSystemDependenciesPageViewModel(
 
     private fun TableViewModel.TableViewInitializerContext.header() {
         headerRow(
-            headerCell("System"),
-            headerCell("Description"),
+            headerCellMedium("System"),
+            headerCellLarge("Description"),
             headerCell("Technology")
         )
     }

diff --git a/...main/kotlin/nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemTableUtilities.kt b/...main/kotlin/nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemTableUtilities.kt
@@ -7,10 +7,11 @@ fun TableViewModel.TableViewInitializerContext.softwareSystemCell(
     pageViewModel: PageViewModel,
     system: SoftwareSystem
 ) = if (pageViewModel.includedSoftwareSystems.contains(system))
-    headerCellWithLink(
+    cellWithLink(
         pageViewModel,
         system.name,
-        SoftwareSystemPageViewModel.url(system, SoftwareSystemPageViewModel.Tab.HOME)
+        SoftwareSystemPageViewModel.url(system, SoftwareSystemPageViewModel.Tab.HOME),
+        boldText = true
     )
 else
-    headerCell("${system.name} (External)", greyText = true)
+    cellWithExternal("${system.name} (External)")
diff --git a/...main/kotlin/nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemsPageViewModel.kt b/...main/kotlin/nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemsPageViewModel.kt
@@ -7,7 +7,10 @@ class SoftwareSystemsPageViewModel(generatorContext: GeneratorContext) : PageVie
     override val pageSubTitle = "Software Systems"
 
     val softwareSystemsTable: TableViewModel = TableViewModel.create {
-        headerRow(headerCell("Name"), headerCell("Description"))
+        headerRow(
+            headerCellMedium("Name"),
+            headerCell("Description")
+        )
 
         generatorContext.workspace.model.softwareSystems
             .sortedBy { it.name.lowercase() }

diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/TableViewModel.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/TableViewModel.kt
@@ -1,5 +1,12 @@
 package nl.avisi.structurizr.site.generatr.site.model
 
+enum class CellWidth {
+    UNSPECIFIED,
+    ONE_TENTH,
+    ONE_FOURTH,
+    TWO_FOURTH,
+}
+
 data class TableViewModel(val headerRows: List<RowViewModel>, val bodyRows: List<RowViewModel>) {
     sealed interface CellViewModel {
         val isHeader: Boolean
@@ -10,16 +17,23 @@ data class TableViewModel(val headerRows: List<RowViewModel>, val bodyRows: List
         override val isHeader: Boolean,
         val greyText: Boolean = false,
         val boldText: Boolean = false,
-        val oneTenthWidth: Boolean = false
+        val width: CellWidth = CellWidth.UNSPECIFIED
     ) : CellViewModel {
         override fun toString() = if (isHeader)
             "headerCell($title, greyText=$greyText)"
         else
-            "cell($title, greyText=$greyText, boldText=$boldText, oneTenthWidth=$oneTenthWidth)"
+            "cell($title, greyText=$greyText, boldText=$boldText, width=${width.name})"
     }
 
-    data class LinkCellViewModel(val link: LinkViewModel, override val isHeader: Boolean) : CellViewModel {
-        override fun toString() = if (isHeader) "headerCell($link)" else "cell($link)"
+    data class LinkCellViewModel(
+        val link: LinkViewModel,
+        override val isHeader: Boolean,
+        val boldText: Boolean = false
+    ) : CellViewModel {
+        override fun toString() = if (isHeader)
+            "headerCell($link), boldText=$boldText,"
+        else
+            "cell($link), boldText=$boldText,"
     }
 
     data class ExternalLinkCellViewModel(
@@ -46,17 +60,23 @@ data class TableViewModel(val headerRows: List<RowViewModel>, val bodyRows: List
             bodyRows.add(RowViewModel(cells.toList()))
         }
 
-        fun headerCell(title: String, greyText: Boolean = false) = TextCellViewModel(title, true, greyText)
-        fun headerCellWithLink(pageViewModel: PageViewModel, title: String, href: String) =
-            LinkCellViewModel(LinkViewModel(pageViewModel, title, href), true)
-
-        fun cell(title: String): TextCellViewModel = TextCellViewModel(title, false)
-        fun cellWithIndex(title: String): TextCellViewModel =
-            TextCellViewModel(title, false, greyText = false, boldText = true, oneTenthWidth = true)
-
-        fun cellWithLink(pageViewModel: PageViewModel, title: String, href: String) =
-            LinkCellViewModel(LinkViewModel(pageViewModel, title, href), false)
+        fun headerCell(title: String) =
+            TextCellViewModel(title, true)
+        fun headerCellSmall(title: String): TextCellViewModel =
+            TextCellViewModel(title, isHeader = true, width = CellWidth.ONE_TENTH)
+        fun headerCellMedium(title: String): TextCellViewModel =
+            TextCellViewModel(title, isHeader = true, width = CellWidth.ONE_FOURTH)
+        fun headerCellLarge(title: String): TextCellViewModel =
+            TextCellViewModel(title, isHeader = true, width = CellWidth.TWO_FOURTH)
 
+        fun cell(title: String, greyText: Boolean = false) =
+            TextCellViewModel(title, false, greyText, false)
+        fun cellWithIndex(title: String) =
+            TextCellViewModel(title, false, boldText = true)
+        fun cellWithExternal(title: String) =
+            TextCellViewModel(title, false, greyText = true, boldText = true)
+        fun cellWithLink(pageViewModel: PageViewModel, title: String, href: String, boldText: Boolean = false) =
+            LinkCellViewModel(LinkViewModel(pageViewModel, title, href), false, boldText)
         fun cellWithExternalLink(title: String, href: String) =
             ExternalLinkCellViewModel(ExternalLinkViewModel(title, href), false)
     }

diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/Table.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/Table.kt
@@ -2,6 +2,7 @@ package nl.avisi.structurizr.site.generatr.site.views
 
 import kotlinx.html.*
 import nl.avisi.structurizr.site.generatr.site.model.TableViewModel
+import nl.avisi.structurizr.site.generatr.site.model.CellWidth
 
 fun FlowContent.table(viewModel: TableViewModel) {
     table (classes = "table is-fullwidth") {
@@ -36,24 +37,30 @@ private fun TBODY.row(viewModel: TableViewModel.RowViewModel) {
 
 private fun TR.cell(viewModel: TableViewModel.CellViewModel) {
     when (viewModel) {
-        is TableViewModel.TextCellViewModel ->
-            if (viewModel.isHeader && viewModel.greyText)
-                th { span(classes = "has-text-grey") { +viewModel.title } }
-            else if (viewModel.isHeader)
-                th { +viewModel.title }
-            else if (viewModel.boldText && viewModel.oneTenthWidth)
-                td(classes = "is-one-tenth") { span(classes = "has-text-weight-bold") { +viewModel.title } }
-            else if (viewModel.boldText)
-                td { span(classes = "has-text-weight-bold") { +viewModel.title } }
-            else if (viewModel.oneTenthWidth)
-                td(classes = "is-one-tenth") { +viewModel.title }
+        is TableViewModel.TextCellViewModel -> {
+            val classes = when (viewModel.width) {
+                CellWidth.UNSPECIFIED -> null
+                CellWidth.ONE_TENTH -> "is-one-tenth"
+                CellWidth.ONE_FOURTH -> "is-one-fourth"
+                CellWidth.TWO_FOURTH -> "is-two-fourth"
+            }
+
+            var spanClasses = ""
+            if (viewModel.greyText) spanClasses += "has-text-grey "
+            if (viewModel.boldText) spanClasses += "has-text-weight-bold"
+
+            if (viewModel.isHeader)
+                th(classes = classes) { span(classes = spanClasses) { +viewModel.title } }
             else
-                td { +viewModel.title }
-        is TableViewModel.LinkCellViewModel ->
+                td(classes = classes) { span(classes = spanClasses) { +viewModel.title } }
+        }
+        is TableViewModel.LinkCellViewModel -> {
+            val classes = if (viewModel.boldText) "has-text-weight-bold" else null
             if (viewModel.isHeader)
-                th { link(viewModel.link) }
+                th(classes = classes)  { link(viewModel.link) }
             else
-                td { link(viewModel.link) }
+                td(classes = classes)  { link(viewModel.link) }
+        }
         is TableViewModel.ExternalLinkCellViewModel ->
             if (viewModel.isHeader)
                 th { externalLink(viewModel.link) }

diff --git a/src/main/resources/assets/css/style.css b/src/main/resources/assets/css/style.css
@@ -22,6 +22,14 @@
     width: 10%;
 }
 
+.is-one-fourth {
+    width: 25%;
+}
+
+.is-two-fourth {
+    width: 50%;
+}
+
 svg a:hover {
     opacity: 90%;
 }

diff --git a/src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/DecisionsTableViewModelTest.kt b/src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/DecisionsTableViewModelTest.kt
@@ -44,6 +44,6 @@ class DecisionsTableViewModelTest : ViewModelTest() {
     }
 
     private fun TableViewModel.TableViewInitializerContext.decisionsTableHeaderRow() {
-        headerRow(headerCell("ID"), headerCell("Date"), headerCell("Status"), headerCell("Title"))
+        headerRow(headerCellSmall("ID"), headerCell("Date"), headerCell("Status"), headerCellLarge("Title"))
     }
 }
diff --git a/...test/kotlin/nl/avisi/structurizr/site/generatr/site/model/PropertiesTableViewModelTest.kt b/...test/kotlin/nl/avisi/structurizr/site/generatr/site/model/PropertiesTableViewModelTest.kt
@@ -56,6 +56,6 @@ class PropertiesTableViewModelTest : ViewModelTest() {
     }
 
     private fun TableViewModel.TableViewInitializerContext.propertiesTableHeaderRow() {
-        headerRow(headerCell("Name"), headerCell("Value"))
+        headerRow(headerCellMedium("Name"), headerCell("Value"))
     }
 }
diff --git a/...avisi/structurizr/site/generatr/site/model/SoftwareSystemDependenciesPageViewModelTest.kt b/...avisi/structurizr/site/generatr/site/model/SoftwareSystemDependenciesPageViewModelTest.kt
@@ -37,9 +37,10 @@ class SoftwareSystemDependenciesPageViewModelTest : ViewModelTest() {
             TableViewModel.create {
                 dependenciesTableHeader()
                 bodyRow(
-                    headerCellWithLink(
+                    cellWithLink(
                         viewModel, softwareSystem2.name,
-                        SoftwareSystemPageViewModel.url(softwareSystem2, SoftwareSystemPageViewModel.Tab.HOME)
+                        SoftwareSystemPageViewModel.url(softwareSystem2, SoftwareSystemPageViewModel.Tab.HOME),
+                        boldText = true
                     ),
                     cell("Uses SOAP"),
                     cell("SOAP"),
@@ -57,9 +58,10 @@ class SoftwareSystemDependenciesPageViewModelTest : ViewModelTest() {
             TableViewModel.create {
                 dependenciesTableHeader()
                 bodyRow(
-                    headerCellWithLink(
+                    cellWithLink(
                         viewModel, softwareSystem2.name,
-                        SoftwareSystemPageViewModel.url(softwareSystem2, SoftwareSystemPageViewModel.Tab.HOME)
+                        SoftwareSystemPageViewModel.url(softwareSystem2, SoftwareSystemPageViewModel.Tab.HOME),
+                        boldText = true
                     ),
                     cell("Uses REST"),
                     cell("REST"),
@@ -99,9 +101,9 @@ class SoftwareSystemDependenciesPageViewModelTest : ViewModelTest() {
         val viewModel = SoftwareSystemDependenciesPageViewModel(generatorContext, softwareSystem1)
 
         assertThat(viewModel.dependenciesInboundTable.bodyRows[0].columns[0])
-            .isEqualTo(TableViewModel.TextCellViewModel("External system (External)", isHeader = true, greyText = true))
+            .isEqualTo(TableViewModel.TextCellViewModel("External system (External)", isHeader = false, greyText = true, boldText = true))
         assertThat(viewModel.dependenciesOutboundTable.bodyRows[0].columns[0])
-            .isEqualTo(TableViewModel.TextCellViewModel("External system (External)", isHeader = true, greyText = true))
+            .isEqualTo(TableViewModel.TextCellViewModel("External system (External)", isHeader = false, greyText = true, boldText = true))
     }
 
     @Test
@@ -122,8 +124,8 @@ class SoftwareSystemDependenciesPageViewModelTest : ViewModelTest() {
 
     private fun TableViewModel.TableViewInitializerContext.dependenciesTableHeader() {
         headerRow(
-            headerCell("System"),
-            headerCell("Description"),
+            headerCellMedium("System"),
+            headerCellLarge("Description"),
             headerCell("Technology"),
         )
     }

diff --git a/.../kotlin/nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemsPageViewModelTest.kt b/.../kotlin/nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemsPageViewModelTest.kt
@@ -29,22 +29,24 @@ class SoftwareSystemsPageViewModelTest : ViewModelTest() {
 
         assertThat(viewModel.softwareSystemsTable).isEqualTo(
             TableViewModel.create {
-                headerRow(headerCell("Name"), headerCell("Description"))
+                headerRow(headerCellMedium("Name"), headerCell("Description"))
                 bodyRow(
-                    headerCellWithLink(
+                    cellWithLink(
                         viewModel, system1.name, SoftwareSystemPageViewModel.url(
                             system1,
                             SoftwareSystemPageViewModel.Tab.HOME
-                        )
+                        ),
+                        boldText = true
                     ),
                     cell(system1.description)
                 )
                 bodyRow(
-                    headerCellWithLink(
+                    cellWithLink(
                         viewModel, system2.name, SoftwareSystemPageViewModel.url(
                             system2,
                             SoftwareSystemPageViewModel.Tab.HOME
-                        )
+                        ),
+                        boldText = true
                     ),
                     cell(system2.description)
                 )
@@ -77,6 +79,6 @@ class SoftwareSystemsPageViewModelTest : ViewModelTest() {
         val viewModel = SoftwareSystemsPageViewModel(generatorContext)
 
         assertThat(viewModel.softwareSystemsTable.bodyRows[1].columns[0])
-            .isEqualTo(TableViewModel.TextCellViewModel("system 2 (External)", isHeader = true, greyText = true))
+            .isEqualTo(TableViewModel.TextCellViewModel("system 2 (External)", isHeader = false, greyText = true, boldText = true))
     }
 }