Fixed overflow of titles and descriptions on search results pages
Some checks failed
Run Integration Tests / test (push) Failing after 2m50s

This commit is contained in:
partisan 2025-05-27 22:09:22 +02:00
parent 3407ed5f4b
commit 4867b3b932
8 changed files with 33 additions and 11 deletions

View file

@ -1357,6 +1357,28 @@ p {
font-weight: 400;
}
.single-line-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
.clamp-3-lines {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
/* Standard syntax (future support) */
line-clamp: 3;
box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5; /* adjust if needed */
max-height: calc(1.5em * 3); /* 3 lines */
}
.result-description {
margin: 4px 0 0 0;
color: var(--font-fg);

View file

@ -158,7 +158,7 @@
<div class="error">{{ translate "error" }}: {{ .Error }}</div>
{{ else }}
<a id="link" href="{{ .URL }}">{{ .URL }}</a>
<a class="torrent" href="magnet:{{ .Magnet }}"><h3>{{ .Title }}</h3></a>
<a class="torrent" href="magnet:{{ .Magnet }}"><h3 class="single-line-ellipsis">{{ .Title }}</h3></a>
<p class="stats">{{ if .Views }}{{ .Views }} {{ translate "views" }} • {{ end }}{{ .Size }}</p>
<p class="publish__info">{{ translate "seeders" }}: <span class="seeders">{{ .Seeders }}</span> | {{ translate "leechers" }}: <span class="leechers">{{ .Leechers }}</span></p>
{{ end }}

View file

@ -143,9 +143,9 @@
{{if .Results}}
{{range .Results}}
<div class="result_item">
<a id="link" href="{{.URL}}">{{.URL}}</a>
<a href="{{.URL}}"><h3>{{.Header}}</h3></a>
<p>{{.Description}}</p>
<a id="link" class="single-line-ellipsis" href="{{.URL}}">{{.URL}}</a>
<a href="{{.URL}}"><h3 class="single-line-ellipsis">{{.Header}}</h3></a>
<p class="clamp-3-lines">{{.Description}}</p>
</div>
<br>
{{end}}

View file

@ -211,7 +211,7 @@
{{ end }}
<div class="resolution">{{ $result.Width }} × {{ $result.Height }}</div>
<div class="details">
<span class="img_title clickable">{{ $result.Title }}</span>
<span class="img_title clickable single-line-ellipsis">{{ $result.Title }}</span>
</div>
</div>
{{ end }}

View file

@ -51,7 +51,7 @@
{{ end }}
<div class="resolution">{{ $result.Width }} × {{ $result.Height }}</div>
<div class="details">
<span class="img_title clickable">{{ $result.Title }}</span>
<span class="img_title clickable single-line-ellipsis">{{ $result.Title }}</span>
</div>
</div>
{{ end }}

View file

@ -140,7 +140,7 @@
</a>
</div>
<div class="music-info">
<a href="{{.URL}}"><h3 class="video_title">{{.Title}}</h3></a>
<a href="{{.URL}}"><h3 class="video_title single-line-ellipsis">{{.Title}}</h3></a>
<div class="stats">
<span class="artist">{{.Artist}}</span>
<span class="pipe">|</span>

View file

@ -154,15 +154,15 @@
class="favicon placeholder-img"
/>
</div>
<div class="result-url">
<div class="result-url single-line-ellipsis">
{{ .PrettyLink.Domain }}
{{ if .PrettyLink.Path }}
{{ .PrettyLink.Path }}
{{ end }}
</div>
</div>
<a href="{{ .URL }}" class="result-title"><h3>{{ .Header }}</h3></a>
<p class="result-description">{{ .Description }}</p>
<a href="{{ .URL }}" class="result-title"><h3 class="single-line-ellipsis">{{ .Header }}</h3></a>
<p class="result-description clamp-3-lines">{{ .Description }}</p>
</div>
{{ end }}
{{ else if .NoResults }}

View file

@ -136,7 +136,7 @@
</a>
</div>
<div class="results video-results-margin">
<h3 class="video_title">
<h3 class="video_title single-line-ellipsis">
<a href="{{ .Href }}">{{ .Title }}</a>
</h3>
<p class="stats">{{ .Views }} <span class="pipe">|</span> {{ .Date }}</p>