Skip to content

Commit 22915a5

Browse files
LlGC-jopLlGC-jop
authored
Fix thumbnail panel search result display (resolves #1409) (#1413)
1 parent 191a323 commit 22915a5

2 files changed

Lines changed: 60 additions & 202 deletions

File tree

‎src/content-handlers/iiif/modules/uv-contentleftpanel-module/ThumbsView.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React, { useEffect, useRef } from "react";
2-
import { Thumb } from "manifesto.js";
31
import { ViewingDirection, ViewingHint } from "@iiif/vocabulary";
4-
import { useInView } from "react-intersection-observer";
52
import cx from "classnames";
3+
import { Thumb } from "manifesto.js";
4+
import React, { useEffect, useRef } from "react";
5+
import { useInView } from "react-intersection-observer";
66

77
const ThumbImage = ({
88
first,
@@ -63,7 +63,7 @@ const ThumbImage = ({
6363
</div>
6464
<div className="info">
6565
<span className="label" title={thumb.label}>
66-
{thumb.label}&nbsp;
66+
{thumb.label}
6767
</span>
6868
{thumb.data.searchResults && (
6969
<span className="searchResults">{thumb.data.searchResults}</span>
@@ -136,7 +136,11 @@ const Thumbnails = ({
136136
})}
137137
>
138138
{thumbs.map((thumb, index) => (
139-
<span key={`thumb-${index}`} id={`thumb-${index}`}>
139+
<span
140+
key={`thumb-${index}`}
141+
id={`thumb-${index}`}
142+
className="thumb-container"
143+
>
140144
<ThumbImage
141145
first={index === firstNonPagedIndex}
142146
onClick={onClick}

‎src/content-handlers/iiif/modules/uv-shared-module/css/thumbs-view.less‎

Lines changed: 51 additions & 197 deletions
Original file line numberDiff line numberDiff line change
@@ -96,14 +96,16 @@
9696

9797
.thumbsView .thumbs .thumb .info .searchResults {
9898
float: right;
99-
width: 35px;
10099
overflow-x: hidden;
101100
text-overflow: ellipsis;
102101
padding-left: 14px;
103-
/* background-image: data-uri("../img/search_result.png"); */
102+
103+
/* styles copied from gallery component css */
104+
color: #14a4c3;
105+
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAMAAACecocUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjIyODM1RTJCMEI5MTFFNkI5M0NGM0Q4NzkzMjRGNkQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjIyODM1RTNCMEI5MTFFNkI5M0NGM0Q4NzkzMjRGNkQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCMjI4MzVFMEIwQjkxMUU2QjkzQ0YzRDg3OTMyNEY2RCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCMjI4MzVFMUIwQjkxMUU2QjkzQ0YzRDg3OTMyNEY2RCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pmw6yDsAAAAtUExURRxicx5PXBp6kB82PBpyhxtqfReQqxaXsxiJoh1ZaBWduxmCmR9FTxSkwyEfH7Q9FxwAAAAPdFJOU///////////////////ANTcmKEAAABNSURBVHjaRM0LDsBABARQ+2mXZdz/uIs27SSShwTyPxQ1udvjsRGh8o3L28ZIg2MkmGUNN/TyjrVC0gTwAqxuSkizofePYX12Mz8CDABtXwWf4T3nAgAAAABJRU5ErkJggg==");
104106
background-repeat: no-repeat;
105107
background-position-x: 0px;
106-
background-position-y: 3px;
108+
background-position-y: 4px;
107109
}
108110

109111
.thumbsView .thumbs .thumb.placeholder .wrap {
@@ -131,6 +133,7 @@
131133
width: 105px;
132134
float: left;
133135
margin: 0 0 0 7px;
136+
padding-top: 2px;
134137
}
135138

136139
.thumbsView .thumbs .thumb.oneCol .info .searchResults {
@@ -139,17 +142,30 @@
139142
margin: 7px 0 0 0;
140143
}
141144

142-
.thumbsView .thumbs .thumb.twoCol {
143-
margin: 0 7px 7px 0;
144-
}
145-
146145
.thumbsView .thumbs .thumb.twoCol .label {
147-
width: 98px;
146+
max-width: 98px !important;
148147
}
149148

150149
.thumbsView .thumbs .thumb.twoCol .wrap {
151150
width: 98px;
152151
max-height: 182px;
152+
margin-bottom: -2px;
153+
}
154+
155+
.thumbsView .thumbs .thumb.twoCol.selected .wrap {
156+
margin-bottom: 0;
157+
}
158+
159+
.thumbsView .thumbs .thumb.twoCol .info {
160+
padding: 0 0 0 4px;
161+
display: flex;
162+
flex-wrap: wrap;
163+
justify-content: space-between;
164+
width: 94px;
165+
}
166+
167+
.thumbsView .thumbs .thumb.twoCol .info .searchResults {
168+
float: none;
153169
}
154170

155171
.thumbsView .thumbs .separator {
@@ -158,201 +174,39 @@
158174
border: none;
159175
}
160176

161-
.thumbsView .thumbs.left-to-right.paged .thumb.first {
162-
float: right;
177+
.thumbsView .thumbs.paged {
178+
display: grid;
179+
grid-template-columns: repeat(2, 98px);
180+
gap: 14px;
163181
}
164182

165-
.thumbsView .thumbs.left-to-right .thumb {
166-
float: left;
183+
.thumbsView .thumbs.paged .thumb-container:nth-child(1) {
184+
grid-column: 2;
185+
}
186+
187+
.thumbsView .thumbs.paged .thumb-container:nth-child(2n):not(:first-child) {
188+
grid-column: 1;
167189
}
168190

169-
.thumbsView .thumbs.right-to-left .thumb {
170-
float: right;
191+
.thumbsView .thumbs.paged .thumb-container:nth-child(2n+1):not(:first-child) {
192+
grid-column: 2;
193+
}
194+
195+
.thumbsView .thumbs.paged.right-to-left {
196+
grid-auto-flow: dense;
171197
}
172198

173-
// .thumbsView {
174-
175-
// overflow: auto;
176-
// height: 100%;
177-
178-
// .thumbs {
179-
// overflow: hidden;
180-
// width: 210px;
181-
// position: relative;
182-
183-
// .thumb {
184-
// cursor: pointer;
185-
186-
// .wrap {
187-
// border: 2px solid @panel-border-color;
188-
// padding: 2px;
189-
// overflow: hidden;
190-
// text-align: center;
191-
// background: @body-bg;
192-
193-
// &.loading {
194-
// .loading(@loader-black-bg);
195-
// }
196-
197-
// &.loadingFailed {
198-
// background-image: data-uri('../img/error.png');
199-
// background-repeat: no-repeat;
200-
// background-position-x: 50%;
201-
// background-position-y: 50%;
202-
// }
203-
204-
// &.audio {
205-
// background-image: data-uri('../img/audio.png');
206-
// }
207-
208-
// &.video {
209-
// background-image: data-uri('../img/video.png');
210-
// }
211-
212-
// &.hidden {
213-
// background-image: data-uri('../img/hidden_thumb.png');
214-
// background-repeat: no-repeat;
215-
// background-position-x: 50%;
216-
// background-position-y: 50%;
217-
// }
218-
219-
// img {
220-
// display: block;
221-
// max-width: 100%;
222-
// max-height: 100%;
223-
// //margin: 0 auto;
224-
// }
225-
// }
226-
227-
// &.selected {
228-
229-
// .wrap {
230-
// border: 2px solid #fff;
231-
// }
232-
// }
233-
234-
// &.searchpreview {
235-
236-
// .wrap {
237-
// border: 2px solid @link-color;
238-
// }
239-
// }
240-
241-
// .info {
242-
243-
// overflow: hidden;
244-
245-
// span {
246-
// font-size: @font-size-small;
247-
// color: #fff;
248-
// display: block;
249-
// padding: 2px 0 0 0;
250-
// }
251-
252-
// .index {
253-
// float: left;
254-
// }
255-
256-
// .label {
257-
// float: left;
258-
// overflow-x: hidden;
259-
// text-overflow: ellipsis;
260-
// white-space: nowrap;
261-
// }
262-
263-
// .searchResults {
264-
// float: right;
265-
// width: 35px;
266-
// overflow-x: hidden;
267-
// text-overflow: ellipsis;
268-
// color: @brand-primary;
269-
// padding-left: 14px;
270-
// background-image: data-uri('../img/search_result.png');
271-
// background-repeat: no-repeat;
272-
// background-position-x: 0px;
273-
// background-position-y: 3px;
274-
// }
275-
// }
276-
277-
// &.placeholder {
278-
// .wrap {
279-
// background-image: data-uri('../img/unavailable.png');
280-
// background-repeat: no-repeat;
281-
// background-position-x: 50%;
282-
// background-position-y: 50%;
283-
// }
284-
// }
285-
286-
// &.oneCol {
287-
288-
// margin: 0 0 7px 0;
289-
290-
// .label {
291-
// width: 178px;
292-
// }
293-
294-
// .wrap {
295-
// float: left;
296-
// width: 90px;
297-
// max-height: 90px;
298-
// //width: 208px; // full width
299-
// //max-height: 373px; // full height
300-
// }
301-
302-
// .info {
303-
// width: 113px;
304-
// float: left;
305-
// margin: 0 0 0 7px;
306-
307-
// .searchResults {
308-
// clear: left;
309-
// float: left;
310-
// margin: 7px 0 0 0;
311-
// }
312-
// }
313-
// }
314-
315-
// &.twoCol {
316-
// margin: 0 7px 7px 0;
317-
// .label {
318-
// width: 63px;
319-
// }
320-
// .wrap {
321-
// width: 98px;
322-
// max-height: 182px;
323-
// }
324-
// }
325-
// }
326-
327-
// .separator {
328-
// height: 1px;
329-
// clear: both;
330-
// border: none;
331-
// }
332-
333-
// &.left-to-right {
334-
// &.paged {
335-
// .thumb {
336-
// &.first {
337-
// float: right;
338-
// }
339-
// }
340-
// }
341-
// .thumb {
342-
// float: left;
343-
// }
344-
// }
345-
346-
// &.right-to-left {
347-
// .thumb {
348-
// &.first {
349-
// //float: left;
350-
// }
351-
// float: right;
352-
// }
353-
// }
354-
// }
355-
// }
199+
.thumbsView .thumbs.paged.right-to-left .thumb-container:nth-child(1) {
200+
grid-column: 1 / span 2
201+
}
202+
203+
.thumbsView .thumbs.paged.right-to-left .thumb-container:nth-child(2n):not(:first-child) {
204+
grid-column: 2;
205+
}
206+
207+
.thumbsView .thumbs.paged.right-to-left .thumb-container:nth-child(2n+1):not(:first-child) {
208+
grid-column: 1;
209+
}
356210
}
357211
}
358212
}

0 commit comments

Comments
 (0)