make details less jumpy

This commit is contained in:
Özgür Kesim 2023-12-27 21:00:27 +01:00
parent 354370a523
commit 5fa23a72bb
Signed by: oec
GPG Key ID: F136A7F922D018D7

View File

@ -31,14 +31,22 @@ tr:hover {
.issue { .issue {
background: #edc; background: #edc;
} }
.minh {
min-height: 5em;
}
details { details {
max-width: 30vw; max-width: 50vw;
border-radius: 5px; border-radius: 5px;
padding: 8px; padding: 8px;
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
details[open] {
position: absolute;
background: white;
border: 2px grey solid;
}
details.version { details.version {
max-width: 30vw; max-width: 30vw;
padding: 5px; padding: 5px;
@ -47,6 +55,14 @@ details.version {
white-space: normal; white-space: normal;
text-align: justify; text-align: justify;
} }
details[open].feature {
background: aliceblue;
border: 2px midnightblue solid;
}
details[open].issue {
background: lightyellow;
border: 2px brown solid;
}
</style></head> </style></head>
<body> <body>
<h1>GNU Taler Dashboard</h1> <h1>GNU Taler Dashboard</h1>
@ -79,7 +95,7 @@ details.version {
<th class="side">{{ . }}</th> <th class="side">{{ . }}</th>
{{- range $tar := $top.TargetVersions }} {{- range $tar := $top.TargetVersions }}
{{- with $version := $versions.Get . }} {{- with $version := $versions.Get . }}
<td>{{ with $features.ByCategoryAndTarget $cat $tar }} <td><div class="minh">{{ with $features.ByCategoryAndTarget $cat $tar }}
<details class="feature"> <details class="feature">
<summary>{{ $l := len .}}{{ if lt 1 $l }}{{ $l }} features{{ else }}1 feature{{ end }}</summary> <summary>{{ $l := len .}}{{ if lt 1 $l }}{{ $l }} features{{ else }}1 feature{{ end }}</summary>
{{- range . }} {{- range . }}
@ -94,7 +110,7 @@ details.version {
<a href="https://bugs.gnunet.org/view.php?id={{.Id}}" target="_blank">{{.Id}}</a> {{.Summary}}<br>{{end}} <a href="https://bugs.gnunet.org/view.php?id={{.Id}}" target="_blank">{{.Id}}</a> {{.Summary}}<br>{{end}}
</details> </details>
{{ end -}} {{ end -}}
</td>{{ end }} </div></td>{{ end }}
{{ end }} {{ end }}
</tr> </tr>
{{- end}} {{- end}}