mirror of
https://github.com/go-gitea/gitea
synced 2024-12-23 00:54:28 +00:00
Fix project column title overflow (#31011)
By the way: * Re-format the "color.go" to Golang code style * Remove unused `overflow-y: scroll;` from `.project-column` because there is `overflow: visible`
This commit is contained in:
parent
47accfebbd
commit
b6574099ed
@ -1,5 +1,6 @@
|
|||||||
// Copyright 2023 The Gitea Authors. All rights reserved.
|
// Copyright 2023 The Gitea Authors. All rights reserved.
|
||||||
// SPDX-License-Identifier: MIT
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
package util
|
package util
|
||||||
|
|
||||||
import (
|
import (
|
||||||
@ -8,7 +9,7 @@ import (
|
|||||||
"strings"
|
"strings"
|
||||||
)
|
)
|
||||||
|
|
||||||
// Get color as RGB values in 0..255 range from the hex color string (with or without #)
|
// HexToRBGColor parses color as RGB values in 0..255 range from the hex color string (with or without #)
|
||||||
func HexToRBGColor(colorString string) (float64, float64, float64) {
|
func HexToRBGColor(colorString string) (float64, float64, float64) {
|
||||||
hexString := colorString
|
hexString := colorString
|
||||||
if strings.HasPrefix(colorString, "#") {
|
if strings.HasPrefix(colorString, "#") {
|
||||||
@ -35,7 +36,7 @@ func HexToRBGColor(colorString string) (float64, float64, float64) {
|
|||||||
return r, g, b
|
return r, g, b
|
||||||
}
|
}
|
||||||
|
|
||||||
// Returns relative luminance for a SRGB color - https://en.wikipedia.org/wiki/Relative_luminance
|
// GetRelativeLuminance returns relative luminance for a SRGB color - https://en.wikipedia.org/wiki/Relative_luminance
|
||||||
// Keep this in sync with web_src/js/utils/color.js
|
// Keep this in sync with web_src/js/utils/color.js
|
||||||
func GetRelativeLuminance(color string) float64 {
|
func GetRelativeLuminance(color string) float64 {
|
||||||
r, g, b := HexToRBGColor(color)
|
r, g, b := HexToRBGColor(color)
|
||||||
@ -46,8 +47,8 @@ func UseLightText(backgroundColor string) bool {
|
|||||||
return GetRelativeLuminance(backgroundColor) < 0.453
|
return GetRelativeLuminance(backgroundColor) < 0.453
|
||||||
}
|
}
|
||||||
|
|
||||||
// Given a background color, returns a black or white foreground color that the highest
|
// ContrastColor returns a black or white foreground color that the highest contrast ratio.
|
||||||
// contrast ratio. In the future, the APCA contrast function, or CSS `contrast-color` will be better.
|
// In the future, the APCA contrast function, or CSS `contrast-color` will be better.
|
||||||
// https://github.com/color-js/color.js/blob/eb7b53f7a13bb716ec8b28c7a56f052cd599acd9/src/contrast/APCA.js#L42
|
// https://github.com/color-js/color.js/blob/eb7b53f7a13bb716ec8b28c7a56f052cd599acd9/src/contrast/APCA.js#L42
|
||||||
func ContrastColor(backgroundColor string) string {
|
func ContrastColor(backgroundColor string) string {
|
||||||
if UseLightText(backgroundColor) {
|
if UseLightText(backgroundColor) {
|
||||||
|
@ -68,18 +68,14 @@
|
|||||||
{{range .Columns}}
|
{{range .Columns}}
|
||||||
<div class="ui segment project-column"{{if .Color}} style="background: {{.Color}} !important; color: {{ContrastColor .Color}} !important"{{end}} data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.Link}}/{{.ID}}">
|
<div class="ui segment project-column"{{if .Color}} style="background: {{.Color}} !important; color: {{ContrastColor .Color}} !important"{{end}} data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.Link}}/{{.ID}}">
|
||||||
<div class="project-column-header{{if $canWriteProject}} tw-cursor-grab{{end}}">
|
<div class="project-column-header{{if $canWriteProject}} tw-cursor-grab{{end}}">
|
||||||
<div class="ui large label project-column-title tw-py-1">
|
<div class="ui circular label project-column-issue-count">
|
||||||
<div class="ui small circular grey label project-column-issue-count">
|
{{.NumIssues ctx}}
|
||||||
{{.NumIssues ctx}}
|
|
||||||
</div>
|
|
||||||
<span class="project-column-title-label">{{.Title}}</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="project-column-title-label gt-ellipsis">{{.Title}}</div>
|
||||||
{{if $canWriteProject}}
|
{{if $canWriteProject}}
|
||||||
<div class="ui dropdown jump item">
|
<div class="ui dropdown tw-p-1">
|
||||||
<div class="tw-px-2">
|
{{svg "octicon-kebab-horizontal"}}
|
||||||
{{svg "octicon-kebab-horizontal"}}
|
<div class="menu">
|
||||||
</div>
|
|
||||||
<div class="menu user-menu">
|
|
||||||
<a class="item show-modal button" data-modal="#edit-project-column-modal-{{.ID}}">
|
<a class="item show-modal button" data-modal="#edit-project-column-modal-{{.ID}}">
|
||||||
{{svg "octicon-pencil"}}
|
{{svg "octicon-pencil"}}
|
||||||
{{ctx.Locale.Tr "repo.projects.column.edit"}}
|
{{ctx.Locale.Tr "repo.projects.column.edit"}}
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
width: 320px;
|
width: 320px;
|
||||||
height: calc(100vh - 450px);
|
height: calc(100vh - 450px);
|
||||||
min-height: 60vh;
|
min-height: 60vh;
|
||||||
overflow-y: scroll;
|
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -30,17 +29,15 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
gap: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-column-title {
|
.ui.label.project-column-issue-count {
|
||||||
background: none !important;
|
color: inherit;
|
||||||
line-height: 1.25 !important;
|
|
||||||
cursor: inherit;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-column-title,
|
.project-column-title-label {
|
||||||
.project-column-issue-count {
|
flex: 1;
|
||||||
color: inherit !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-column > .cards {
|
.project-column > .cards {
|
||||||
|
Loading…
Reference in New Issue
Block a user