Fixed overflow of titles and descriptions on search results pages
Some checks failed
Run Integration Tests / test (push) Failing after 2m50s
Some checks failed
Run Integration Tests / test (push) Failing after 2m50s
This commit is contained in:
parent
3407ed5f4b
commit
4867b3b932
8 changed files with 33 additions and 11 deletions
|
@ -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);
|
||||
|
|
|
@ -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 }}
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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 }}
|
||||
|
|
|
@ -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 }}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 }}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue