Skip to content

Commit

Permalink
Merge pull request #633 from cul-it/aug-2023-sprint
Browse files Browse the repository at this point in the history 
Joyce theme updates + accessibility improvements
  • Loading branch information
@chrisrlc
chrisrlc authored Aug 14, 2023
2 parents 9f30ad8 + d6e4624 commit 1439220
Show file tree
Hide file tree
Showing 20 changed files with 737 additions and 147 deletions.
245 changes: 124 additions & 121 deletions Gemfile.lock
View file

Large diffs are not rendered by default.

80 changes: 80 additions & 0 deletions app/assets/javascripts/spotlight/admin/blocks/solr_documents_base_block.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
// Replaces _itemPanel from https://github.com/projectblacklight/spotlight/blob/v3.5.0.2/app/assets/javascripts/spotlight/admin/blocks/resources_block.js
// Adds optional "Alt text" input for resource image display

SirTrevor.Blocks.SolrDocumentsBase = (function(){

return SirTrevor.Blocks.SolrDocumentsBase.extend({

_itemPanel: function(data) {
var index = "item_" + this.globalIndex++;
var checked;
if (data.display == "true") {
checked = "checked='checked'"
} else {
checked = "";
}
var resource_id = data.slug || data.id;

var altTextMarkup = '';
if (['solr_documents', 'solr_documents_grid', 'solr_documents_carousel', 'solr_documents_features'].includes(this.type)) {
altTextMarkup = [
'<div class="field row mr-3">',
'<label for="' + this.formId('alt_' + data.id) + '" class="col-form-label col-md-3"><%= i18n.t("blocks:resources:panel:alt") %></label>',
'<input type="text" class="form-control col" id="' + this.formId('alt_' + data.id) + '" name="item[' + index + '][alt]" data-field="alt"/>',
'</div>'
].join("\n");
}
var markup = [
'<li class="field form-inline dd-item dd3-item" data-resource-id="' + resource_id + '" data-id="' + index + '" id="' + this.formId("item_" + data.id) + '">',
'<input type="hidden" name="item[' + index + '][id]" value="' + resource_id + '" />',
'<input type="hidden" name="item[' + index + '][title]" value="' + data.title + '" />',
this._itemPanelIiifFields(index, data),
'<input data-property="weight" type="hidden" name="item[' + index + '][weight]" value="' + data.weight + '" />',
'<div class="card d-flex dd3-content">',
'<div class="dd-handle dd3-handle"><%= i18n.t("blocks:resources:panel:drag") %></div>',
'<div class="card-header item-grid">',
'<div class="d-flex">',
'<div class="checkbox">',
'<input name="item[' + index + '][display]" type="hidden" value="false" />',
'<input name="item[' + index + '][display]" id="'+ this.formId(this.display_checkbox + '_' + data.id) + '" type="checkbox" ' + checked + ' class="item-grid-checkbox" value="true" />',
'<label class="sr-only" for="'+ this.formId(this.display_checkbox + '_' + data.id) +'"><%= i18n.t("blocks:resources:panel:display") %></label>',
'</div>',
'<div class="pic">',
'<img class="img-thumbnail" src="' + (data.thumbnail_image_url || ((data.iiif_tilesource || "").replace("/info.json", "/full/!100,100/0/default.jpg"))) + '" />',
'</div>',

'<div class="main form-horizontal">',
'<div class="title card-title">' + data.title + '</div>',
'<div>' + (data.slug || data.id) + '</div>',
altTextMarkup,
'</div>',

'<div class="remove float-right">',
'<a data-item-grid-panel-remove="true" href="#"><%= i18n.t("blocks:resources:panel:remove") %></a>',
'</div>',
'</div>',
'<div data-panel-image-pagination="true"></div>',
'</div>',
'</div>',
'</li>'
].join("\n");

var panel = $(_.template(markup)(this));
panel.find('[data-field="alt"]').val(data.alt);
var context = this;

$('.remove a', panel).on('click', function(e) {
e.preventDefault();
$(this).closest('.field').remove();
context.afterPanelDelete();

});

this.afterPanelRender(data, panel);

return panel;
}

});

})();
10 changes: 10 additions & 0 deletions app/assets/javascripts/spotlight/admin/sir-trevor/locales.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
SirTrevor.Locales.en.blocks = $.extend(SirTrevor.Locales.en.blocks, {
resources: {
panel: {
drag: "Drag",
display: "Display?",
remove: "Remove",
alt: "Alt text"
}
},
});
192 changes: 188 additions & 4 deletions app/assets/stylesheets/application_joyce.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,19 @@
src: font-url('Mutable-SemiBold.otf');
}

// Background color
body, header {
background: #fcf9ee;
}

#exhibit-navbar, footer {
background: #ecbb35;
}

.navbar, #blacklight-modal {
background: white;
}

// Masthead
.masthead {
background-color: #dee78f;
Expand Down Expand Up @@ -98,10 +111,6 @@
}
}

#exhibit-navbar, footer {
background: #ecbb35;
}

// Hackily override col-lg-3 bootstrap styling set in html
// Roughly equivalent of col-lg-2
#sidebar.col-lg-3 {
Expand Down Expand Up @@ -147,6 +156,16 @@
flex: 0 0 66.66666667%;
max-width: 66.66666667%;
}

// 5, 6 or 9 items: creates rows of 3 instead of 4 on desktop
.box:first-child:nth-last-child(5),
.box:first-child:nth-last-child(5) ~ .box,
.box:first-child:nth-last-child(6),
.box:first-child:nth-last-child(6) ~ .box,
.box:first-child:nth-last-child(9),
.box:first-child:nth-last-child(9) ~ .box {
min-width: 200px;
}
}
}

Expand All @@ -159,6 +178,21 @@
background-position: 0% 0%;
padding-left: 2rem;
}

#sidebar::before {
@media (min-width: breakpoint-min('lg')) {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: calc(100% - 28em);
width: 100%;
opacity: 0.6;
// Change to repeat-y to create a repeating vertical border under sidebar menu
background: image-url('spotlight/themes/joyce/Case1.svg') no-repeat;
background-size: 80%;
}
}
}

#games-content {
Expand All @@ -168,6 +202,21 @@
background-position: 0% 0%;
padding-left: 2rem;
}

#sidebar::before {
@media (min-width: breakpoint-min('lg')) {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: calc(100% - 28em);
width: 100%;
opacity: 0.6;
// Change to repeat-y to create a repeating vertical border under sidebar menu
background: image-url('spotlight/themes/joyce/Case2.svg') no-repeat;
background-size: 80%;
}
}
}

#sports-content {
Expand All @@ -177,6 +226,21 @@
background-position: 0% 0%;
padding-left: 2rem;
}

#sidebar::before {
@media (min-width: breakpoint-min('lg')) {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: calc(100% - 28em);
width: 100%;
opacity: 0.6;
// Change to repeat-y to create a repeating vertical border under sidebar menu
background: image-url('spotlight/themes/joyce/Case3.svg') no-repeat;
background-size: 80%;
}
}
}

#radio-content {
Expand All @@ -186,6 +250,21 @@
background-position: 0% 0%;
padding-left: 2rem;
}

#sidebar::before {
@media (min-width: breakpoint-min('lg')) {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: calc(100% - 28em);
width: 100%;
opacity: 0.6;
// Change to repeat-y to create a repeating vertical border under sidebar menu
background: image-url('spotlight/themes/joyce/Case4.svg') no-repeat;
background-size: 80%;
}
}
}

#television-content {
Expand All @@ -195,6 +274,21 @@
background-position: 0% 0%;
padding-left: 2rem;
}

#sidebar::before {
@media (min-width: breakpoint-min('lg')) {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: calc(100% - 28em);
width: 100%;
opacity: 0.6;
// Change to repeat-y to create a repeating vertical border under sidebar menu
background: image-url('spotlight/themes/joyce/Case5.svg') no-repeat;
background-size: 80%;
}
}
}

#fashion-content {
Expand All @@ -204,6 +298,21 @@
background-position: 0% 0%;
padding-left: 2rem;
}

#sidebar::before {
@media (min-width: breakpoint-min('lg')) {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: calc(100% - 28em);
width: 100%;
opacity: 0.6;
// Change to repeat-y to create a repeating vertical border under sidebar menu
background: image-url('spotlight/themes/joyce/Case6.svg') no-repeat;
background-size: 80%;
}
}
}

#awards-content {
Expand All @@ -213,6 +322,21 @@
background-position: 0% 0%;
padding-left: 2rem;
}

#sidebar::before {
@media (min-width: breakpoint-min('lg')) {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: calc(100% - 28em);
width: 100%;
opacity: 0.6;
// Change to repeat-y to create a repeating vertical border under sidebar menu
background: image-url('spotlight/themes/joyce/Case7.svg') no-repeat;
background-size: 80%;
}
}
}

#books-content {
Expand All @@ -222,6 +346,21 @@
background-position: 0% 0%;
padding-left: 2rem;
}

#sidebar::before {
@media (min-width: breakpoint-min('lg')) {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: calc(100% - 28em);
width: 100%;
opacity: 0.6;
// Change to repeat-y to create a repeating vertical border under sidebar menu
background: image-url('spotlight/themes/joyce/Case8.svg') no-repeat;
background-size: 80%;
}
}
}

#publications-content {
Expand All @@ -231,6 +370,21 @@
background-position: 0% 0%;
padding-left: 2rem;
}

#sidebar::before {
@media (min-width: breakpoint-min('lg')) {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: calc(100% - 28em);
width: 100%;
opacity: 0.6;
// Change to repeat-y to create a repeating vertical border under sidebar menu
background: image-url('spotlight/themes/joyce/Case9.svg') no-repeat;
background-size: 80%;
}
}
}

#activities-content {
Expand All @@ -240,6 +394,21 @@
background-position: 0% 0%;
padding-left: 2rem;
}

#sidebar::before {
@media (min-width: breakpoint-min('lg')) {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: calc(100% - 28em);
width: 100%;
opacity: 0.6;
// Change to repeat-y to create a repeating vertical border under sidebar menu
background: image-url('spotlight/themes/joyce/Case10.svg') no-repeat;
background-size: 80%;
}
}
}

#legacy-content {
Expand All @@ -249,4 +418,19 @@
background-position: 0% 0%;
padding-left: 2rem;
}

#sidebar::before {
@media (min-width: breakpoint-min('lg')) {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: calc(100% - 28em);
width: 100%;
opacity: 0.6;
// Change to repeat-y to create a repeating vertical border under sidebar menu
background: image-url('spotlight/themes/joyce/Case11.svg') no-repeat;
background-size: 80%;
}
}
}
5 changes: 5 additions & 0 deletions app/assets/stylesheets/exhibits/_blocks.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,8 @@
.items-block .items-col button {
margin: 0.75em;
}

.carousel-block .carousel-caption .secondary {
padding-left: 1rem;
padding-right: 1rem;
}
Loading

0 comments on commit 1439220

Please sign in to comment.