Skip to content

Commit

Permalink
Updated thumbnail viewer page so that the thumbnail looks more like m…
Browse files Browse the repository at this point in the history 
…ultiple perspectives page and uses Font Awesome icons instead of image buttons
  • Loading branch information
@FayCross
FayCross committed Dec 1, 2022
1 parent 4578a17 commit de623f9
Show file tree
Hide file tree
Showing 13 changed files with 148 additions and 37 deletions.
51 changes: 26 additions & 25 deletions modules/xerte/parent_templates/Nottingham/models_html5/thumbnailViewer.css
View file
Expand Up @@ -6,36 +6,21 @@
left: 0px;
width: 100%;
height: 110px;
background: #434343;
}

#thumbOverlayLeft, #thumbOverlayRight {
position: absolute;
width: 40px;
width: 6em;
height: 100%;
}

#thumbOverlayLeft {
background: #434343; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#010101', endColorstr='#00010101',GradientType=1 ); /* IE */
background: -moz-linear-gradient(left, rgba(1,1,1,1) 0%, rgba(1,1,1,1) 20%, rgba(1,1,1,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(1,1,1,1)), color-stop(20%,rgba(1,1,1,1)), color-stop(100%,rgba(1,1,1,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(1,1,1,1) 0%,rgba(1,1,1,1) 20%,rgba(1,1,1,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(1,1,1,1) 0%,rgba(1,1,1,1) 20%,rgba(1,1,1,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(1,1,1,1) 0%,rgba(1,1,1,1) 20%,rgba(1,1,1,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(1,1,1,1) 0%,rgba(1,1,1,1) 20%,rgba(1,1,1,0) 100%); /* W3C */
background: white;
}

#thumbOverlayRight {
right: 0;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00010101', endColorstr='#010101',GradientType=1 ); /* IE */
background: #434343; /* for non-css3 browsers */
background: -moz-linear-gradient(left, rgba(1,1,1,0) 0%, rgba(1,1,1,1) 80%, rgba(1,1,1,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(1,1,1,0)), color-stop(80%,rgba(1,1,1,1)), color-stop(100%,rgba(1,1,1,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(1,1,1,0) 0%,rgba(1,1,1,1) 80%,rgba(1,1,1,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(1,1,1,0) 0%,rgba(1,1,1,1) 80%,rgba(1,1,1,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(1,1,1,0) 0%,rgba(1,1,1,1) 80%,rgba(1,1,1,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(1,1,1,0) 0%,rgba(1,1,1,1) 80%,rgba(1,1,1,1) 100%); /* W3C */
background: white;
}

#thumbHolder {
Expand Down Expand Up @@ -88,25 +73,41 @@
#thumbBar button {
background: none;
border: none;
width: 40px;
width: 6em;
height: 100%;
margin-right: 0;
}

#thumbBar button .ui-icon {
width: 100%;
height: 100%;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
top: 0.85em;
left: 0.5em;
margin: 0px;
background-position: 0px 0px;
background: none;
text-indent: 0;
font-size: 3em;
font-family: "Font Awesome 5 Free";
font-weight: 900;
overflow: visible;
}

#thumbBar button { color: #434343; }
#thumbBar button:hover, #thumbBar button:focus { color: #666666; }
#thumbBar button:active { color: #FF9900; }

#thumbBar button.ui-state-hover .ui-icon, #thumbBar button.ui-state-focus .ui-icon, #thumbBar button.ui-state-active .ui-icon {
background-position: -40px 0px;
background-position: -6em 0px;
}

#thumbBar .ui-icon.prev:before {
content: "\f137";
}

#thumbBar .ui-icon.next:before {
content: "\f138";
}

#mainInfoHolder, #mainTxt {
margin-top: 130px;
Expand Down
12 changes: 4 additions & 8 deletions modules/xerte/parent_templates/Nottingham/models_html5/thumbnailViewer.html
View file
Expand Up @@ -74,8 +74,7 @@
})
.click(function() {
$thumbHolder.animate({scrollLeft: $thumbHolder.scrollLeft() - $thumbHolder.find(".thumbBox:eq(0)").width() - 10}, 800, "easeInOutCubic");
})
.find(".ui-icon").css("background-image", 'url("' + x_templateLocation + 'common_html5/small_prev.png")');
});


btnText = x_currentPageXML.getAttribute("nextBtnTip");
Expand All @@ -91,8 +90,7 @@
})
.click(function() {
$thumbHolder.animate({scrollLeft: $thumbHolder.scrollLeft() + $thumbHolder.find(".thumbBox:eq(0)").width() + 10}, 800, "easeInOutCubic");
})
.find(".ui-icon").css("background-image", 'url("' + x_templateLocation + 'common_html5/small_next.png")');
});

if (x_browserInfo.touchScreen == true) {
$thumbHolder.css("overflow-x", "auto");
Expand Down Expand Up @@ -255,10 +253,8 @@
}
});


// have to add this css using jQuery rather than in styles below as some browsers (IE) don't support first-child/last-child
$("#thumbHolder .thumbBox:eq(0)").css("margin-left", "40px");
$("#thumbHolder .thumbBox:last-child").css("margin-right", "40px");
$("#thumbHolder .thumbBox:eq(0)").css("margin-left", $("#thumbBar button").width());
$("#thumbHolder .thumbBox:last-child").css("margin-right", $("#thumbBar button").width());

x_pageLoaded();
}
Expand Down
21 changes: 21 additions & 0 deletions themes/Nottingham/blackonyellow/blackonyellow.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion themes/Nottingham/blackonyellow/blackonyellow.css.map
View file

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions themes/Nottingham/blackonyellow/scss/_pagetypes.scss
View file
Expand Up @@ -34,6 +34,15 @@ table.glossary tr.shaded {
.x_transcriptReader_page .highlight {
background:transparentize($whiteorlightest, .6);
}
//*****thumbnailViewer******/
.x_thumbnailViewer_page #thumbOverlayLeft,
.x_thumbnailViewer_page #thumbOverlayRight {
background: $bodybackgroundcolor;
}
.x_thumbnailViewer_page #thumbBar button { color: $blackordarkest; }
.x_thumbnailViewer_page #thumbBar button.ui-state-hover { color: lighten($blackordarkest,10%); }
.x_thumbnailViewer_page #thumbBar button.ui-state-focus { color: lighten($blackordarkest,10%); }
.x_thumbnailViewer_page #thumbBar button.ui-state-active { color: lighten($blackordarkest,10%); }
//***********************************Navigators*************************************/
//*****Accordion page*******/
.ui-accordion .ui-accordion-content {
Expand Down
21 changes: 21 additions & 0 deletions themes/Nottingham/darkbluegrey/darkbluegrey.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion themes/Nottingham/darkbluegrey/darkbluegrey.css.map
View file

Large diffs are not rendered by default.

10 changes: 10 additions & 0 deletions themes/Nottingham/darkbluegrey/scss/_pagetypes.scss
View file
Expand Up @@ -32,6 +32,16 @@ a.x_glossary:link, a.x_glossary:visited, a.x_glossary:hover, a.x_glossary:active
.x_transcriptReader_page .highlight {
background:transparentize($brightcolor, .2);
}
//*****thumbnailViewer******/
.x_thumbnailViewer_page #thumbOverlayLeft,
.x_thumbnailViewer_page #thumbOverlayRight {
background: $bodybackgroundcolor;
}
.x_thumbnailViewer_page #thumbBar button { color: $whiteorlightest; }
.x_thumbnailViewer_page #thumbBar button.ui-state-hover { color: $lightestcolor; }
.x_thumbnailViewer_page #thumbBar button.ui-state-focus { color: $lightestcolor; }
.x_thumbnailViewer_page #thumbBar button.ui-state-active { color: $darkestcolor; }

//***********************************Navigators*************************************/

.ui-tabs-panel a:visited, .ui-accordion-content a:visited {
Expand Down
13 changes: 12 additions & 1 deletion themes/Nottingham/darkgrey/darkgrey.css
View file
Expand Up @@ -218,7 +218,18 @@ background-image: none;
}


//***********************************Tables*************************************/
/*****thumbnailViewer******/
.x_thumbnailViewer_page #thumbOverlayLeft,
.x_thumbnailViewer_page #thumbOverlayRight {
background: #1c1c1c;
}
.x_thumbnailViewer_page #thumbBar button { color: #CFCFCF; }
.x_thumbnailViewer_page #thumbBar button.ui-state-hover { color: #FFFFFF; }
.x_thumbnailViewer_page #thumbBar button.ui-state-focus { color: #FFFFFF; }
.x_thumbnailViewer_page #thumbBar button.ui-state-active { color: #FFFFFF; }


/***********************************Tables*************************************/
/*default background of table rows*/
.x_grid_page table tr,
.x_table_page table tr,
Expand Down
21 changes: 21 additions & 0 deletions themes/Nottingham/highcontrast/highcontrast.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit de623f9

Please sign in to comment.