diff --git a/.gitignore b/.gitignore index bc0f10a6..c6649938 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ bundle.js node_modules css node_modules-2018-11-27 +.idea diff --git a/index.html b/index.html index ec4a7df2..9ec5b587 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/package.json b/package.json index f777ea61..70484480 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,8 @@ "watch": "watchify index.js -p livereactload -o bundle.js -dv", "watchServer": "node-supervisor --watch server.js,src server.babel.js", "serve": "PORT=1314 node server.babel.js", + "build-css": "sass ./sass/main.scss ./css/main.css", + "build-css:watch": "sass --watch ./sass/main.scss ./css/main.css", "build": "NODE_ENV=production browserify index.js | uglifyjs -c -m | sed 's|http://localhost:4680|https://search.artsmia.org|'> bundle.js" }, "author": "", @@ -37,6 +39,7 @@ "watchify": "^3.9.0" }, "dependencies": { + "sass": "^1.24.0", "@mapbox/react-click-to-select": "^1.1.1", "babel-polyfill": "^6.23.0", "babel-preset-es2015": "^6.22.0", diff --git a/readme.md b/readme.md index b35ffe75..7eb7a372 100644 --- a/readme.md +++ b/readme.md @@ -7,6 +7,11 @@ To start the server locally, you (1) need passing familiarity with (3) `npm start` should start the webserver and begin to update the javascript bundle. +## Building SCSS/CSS + +To build the css files run `npm run build-css` or alternatively `npm run build-css:watch` to have it watch for changes +and rebuild. + # Companion code It pulls information from many different places: diff --git a/sass/main.scss b/sass/main.scss index 81caf560..65166552 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -44,6 +44,28 @@ a:hover { font-weight: 500; } +a.skip-main { + left:-999px; + position: fixed; + top:auto; + width:1px; + height:1px; + overflow:hidden; + z-index:-999; +} +a.skip-main:focus, a.skip-main:active { + background-color: white; + position:fixed; + left: 50%; + top: 5px; + width: 200px; + height: 23px; + margin: 10px -100px; + padding:5px; + text-align:center; + z-index:999; +} + #search { /*margin: 8px;*/ } @@ -80,12 +102,19 @@ header{ .quilt-wrap a:hover { overflow: visible !important; // z-index: 100; - + img { overflow: visible !important; } } +// The regular focus style with the dotted red outline doesn't look very good on the quilt images. A white solid border +// seems to be more visible and doesn't clash as much with the images. +.quilt-wrap a:focus { + outline: 0; + border: 2px solid white; +} + .logo-container{ background-image: url("../images/MIA_LOGO_MARK.svg"); background-repeat: no-repeat; diff --git a/sass/reset.scss b/sass/reset.scss index c299c744..99a1e40f 100644 --- a/sass/reset.scss +++ b/sass/reset.scss @@ -1,4 +1,10 @@ -/* reset & clearfix */ +/* reset & clearfix + +Modifications have been to Eric Meyer's Reset: + +1. Outline resets have been removed. This is more consistent with artsmia.org website and encourages better accessibility + +*/ .clearfix:after { visibility: hidden; @@ -25,7 +31,6 @@ table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; - outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; @@ -39,10 +44,7 @@ ol, ul { blockquote, q { quotes: none; } -/* remember to define focus styles! */ -:focus { - outline: 0; -} + /* remember to highlight inserts somehow! */ ins { text-decoration: none; @@ -62,4 +64,4 @@ html { } *, *:before, *:after { box-sizing: inherit; -} \ No newline at end of file +} diff --git a/server.js b/server.js index 111dec20..5ef20457 100644 --- a/server.js +++ b/server.js @@ -44,7 +44,7 @@ var html = ({ title, meta, link }, data, body) => { app.use((req, res, next) => { var actingUrl = req.url.replace(/\/(.*)\/$/, '/$1') - const internalIPs = process.env.PRIVILEGED_IP_LIST + const internalIPs = process.env.PRIVILEGED_IP_LIST || ''; var privilegedClientIP = internalIPs.split(' ').indexOf(req.ip) > -1 window.privilegedClientIP = privilegedClientIP // FIXME how to pass this other than as a global? diff --git a/src/app.js b/src/app.js index f42fc565..6a346ab8 100644 --- a/src/app.js +++ b/src/app.js @@ -7,15 +7,19 @@ var {pathSatisfies} = require('ramda') var LiveSearch = require('./live-search') var GlobalNavigation = require('./navigation') var consoleWelcomeMessage = require('./console-welcome-message') +var SkipToMainContentLink = require('./skip-to-main-content-link'); + var App = React.createClass({ render() { var logo = this.makeLogo() - var canonicalURL = "https://collections.artsmia.org"+this.props.path + var path = this.props.path + var canonicalURL = "https://collections.artsmia.org" + path return (
- {this.state.hideHeader ||
+ + {this.state.hideHeader ||
{logo} {this.globalToolBar()}
} @@ -131,7 +135,7 @@ var App = React.createClass({ return showMenu ? {logo} : - {logo} + {logo} }, noIndex() { diff --git a/src/department.js b/src/department.js index 6a94cbf8..15d6d5dc 100644 --- a/src/department.js +++ b/src/department.js @@ -38,12 +38,17 @@ var Department = React.createClass({ {...this.props} hideInput={true} hideResults={true} /> -
- -
- - - +
+ + + + +
} }) diff --git a/src/departments.js b/src/departments.js index f5831b21..a926b0ce 100644 --- a/src/departments.js +++ b/src/departments.js @@ -41,7 +41,7 @@ var Departments = React.createClass({ return (
-

Departments

+

Departments

{this.departments.map(dept => { var name = index => findDepartment(dept)[index] var isActive = active === dept @@ -52,7 +52,7 @@ var Departments = React.createClass({ key={name(1)} params={{ dept: name(2) }} className={`departmentLink mdl-cell mdl-cell--3-col ${isActive && - 'isActive'}`} + 'isActive'}`} >

{dept}

diff --git a/src/home.js b/src/home.js index f7f7e453..e4fd8ba3 100644 --- a/src/home.js +++ b/src/home.js @@ -61,7 +61,7 @@ var HomeDepartmentsAndPages = React.createClass({ pages: ['Purcell-Cutts House', 'Provenance Research', 'Deaccessions', 'Conservation'], render() { - return
+ return
  • @@ -97,6 +97,6 @@ var HomeDepartmentsAndPages = React.createClass({ })}
-
+ }, }) diff --git a/src/image-quilt.js b/src/image-quilt.js index 2749b94b..a33b3f39 100644 --- a/src/image-quilt.js +++ b/src/image-quilt.js @@ -9,6 +9,8 @@ var linearPartition = require('linear-partitioning') var ArtworkImage = require('./artwork-image') var Image = require('./image') +const ENTER_KEY_CODE = 13; + const ImageQuilt = React.createClass({ mixins: [PureRenderMixin], @@ -38,7 +40,6 @@ const ImageQuilt = React.createClass({ componentWillUnmount: function() { window.removeEventListener('resize', this.handleResize) }, - render() { if(this.hideDarkenedQuilt()) return this.emptyQuiltToggleControl() @@ -89,7 +90,7 @@ const ImageQuilt = React.createClass({ onImageInvalidation={this.forceUpdate.bind(this)} key={_art.id} lazyLoad={this.props.lazyLoad} - /> + /> }) // centered doesn't work on the first row because the search box is in the way @@ -207,7 +208,7 @@ module.exports = ImageQuilt var QuiltPatch = React.createClass({ render() { - var {art, width, ...other} = this.props + var {art, width, onClick, ...other} = this.props var id = art.id var style = { @@ -228,6 +229,7 @@ var QuiltPatch = React.createClass({ } var image = {art.title_short}

+ const handleKeyDown = function(event){ + if(event.keyCode === ENTER_KEY_CODE){ + onClick() + } + }; + return diff --git a/src/navigation.js b/src/navigation.js index 877d13cf..20668dfe 100644 --- a/src/navigation.js +++ b/src/navigation.js @@ -26,7 +26,7 @@ var GlobalNavigation = React.createClass({ if(smallViewport){ return ( -
+
+ ) } else { return ( diff --git a/src/rights-types.js b/src/rights-types.js index d69ba739..02293957 100644 --- a/src/rights-types.js +++ b/src/rights-types.js @@ -11,8 +11,14 @@ const publicDomainMark = { definition: 'This work has been identified as being free of known restrictions under copyright law, including all related and neighboring rights.\n\nYou can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission. See Other Information below.', } +// TODO: It appears that this module is installed locally. For now I'm just going to comment this out and replace it +// with an empty array so I can get to the accessibility fixes. +// const importedRightsStatements = require('rightsstatements'); + +const importedRightsStatements = []; + const rightsstatements = [ - ...require('rightsstatements').map(rs => { + ...importedRightsStatements.map(rs => { rs.definition = rs.definition .replace('The copyright and related rights status of this Item has not been evaluated', 'The copyright and related rights status of this Item has not been evaluated by the Minneapolis Institute of Art (Mia)') .replace('Please refer to the organization that has made the Item available for more information.', 'Please contact us for more information.') @@ -46,7 +52,7 @@ const legacyToStandardizedStmt = { "Full Permission": "In Copyright - Non-Commercial Use Permitted", "Orphaned Work": "In Copyright - Rights-holder(s) Unlocatable or Unidentifiable", "Permission Denied": "In Copyright", // TODO what goes here? Empty in Heidi's mapping - "Public Domain": "Public Domain", + "Public Domain": "Public Domain", "No Known Copyright Restrictions": "No Known Copyright", "Need Permission": "Copyright Not Evaluated", } @@ -97,10 +103,10 @@ function RightsStatementIcon({statement, color, style, ...props}) { if(!statement) return var shortId = statement.identifier.split('-')[0] - var iconURL = statement.identifier === 'CC-PDM' ? + var iconURL = statement.identifier === 'CC-PDM' ? `https://upload.wikimedia.org/wikipedia/commons/a/af/Cc-public_domain_mark.svg` : `https://rightsstatements.org/files/icons/${shortId}.Icon-Only.${color || 'white'}.svg` - var fullIconURL = statement.identifier === 'CC-PDM' ? + var fullIconURL = statement.identifier === 'CC-PDM' ? `https://upload.wikimedia.org/wikipedia/commons/a/af/Cc-public_domain_mark.svg` : `https://rightsstatements.org/files/buttons/${statement.identifier}.${color || 'white'}.svg` diff --git a/src/search.js b/src/search.js index eeea063c..598e1f4b 100644 --- a/src/search.js +++ b/src/search.js @@ -11,7 +11,6 @@ var SearchResults = require('./search-results') var Suggest = require('./suggest') var searchLanguageMap = require('./search-language') - var Search = React.createClass({ mixins: [Router.State, Router.Navigation], @@ -51,7 +50,14 @@ var Search = React.createClass({ const idealSearchBoxWidth = Math.max(17, this.state.terms && this.state.terms.length*1.1 || 0) const formProps = universal ? {action: "/search/", method: "get"} : {action: ''} const simpleSearchBox =
-
+ + +
+ /> +
const hideInput = this.props.hideInput && !this.state.activateSearch @@ -74,7 +81,7 @@ var Search = React.createClass({ pointerEvents: 'none', display: hideInput ? 'none' : 'inherit', padding: this.props.bumpSearchBox ? '0.5em' : '0', - position: 'relative', + position: 'relative', zIndex: 4, } @@ -111,7 +118,7 @@ var Search = React.createClass({ var hideSearch = embed return ( -