From 4b274f8001bd2ce3a4abe50f392ef8961138bb92 Mon Sep 17 00:00:00 2001 From: Lily2point0 Date: Fri, 19 May 2017 11:29:05 +0100 Subject: [PATCH 01/10] add partial answer containers --- src/js/oCrossword.js | 22 ++++++++++++++++++++++ src/scss/_base.scss | 20 ++++++++++++++++++++ 2 files changed, 42 insertions(+) diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index a5d3127..c63f4d1 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -101,27 +101,49 @@ function buildGrid( clues.across.forEach(function acrossForEach(across, index) { const tempLi = document.createElement('li'); const tempSpan = document.createElement('span'); + const tempPartial = document.createElement('div'); + tempPartial.classList.add('o-crossword-user-answer'); + const answerLength = across[2].filter(isFinite).filter(isFinite).reduce((a,b)=>a+b,0); tempSpan.textContent = across[0] + '. ' + across[1]; tempLi.dataset.oCrosswordNumber = across[0]; tempLi.dataset.oCrosswordAnswerLength = answerLength; tempLi.dataset.oCrosswordDirection = 'across'; tempLi.dataset.oCrosswordClueId = index; + + for(var i = 0; i < answerLength; ++i) { + let tempInput = document.createElement('input'); + tempInput.setAttribute('maxlength', 1); + tempPartial.appendChild(tempInput); + } + acrossEl.appendChild(tempLi); tempLi.appendChild(tempSpan); + tempLi.appendChild(tempPartial); }); clues.down.forEach(function acrossForEach(down, index) { const tempLi = document.createElement('li'); const tempSpan = document.createElement('span'); + const tempPartial = document.createElement('div'); + tempPartial.classList.add('o-crossword-user-answer'); + const answerLength = down[2].filter(isFinite).filter(isFinite).reduce((a,b)=>a+b,0); tempSpan.textContent = down[0] + '. ' + down[1]; tempLi.dataset.oCrosswordNumber = down[0]; tempLi.dataset.oCrosswordAnswerLength = answerLength; tempLi.dataset.oCrosswordDirection = 'down'; tempLi.dataset.oCrosswordClueId = clues.across.length + index; + + for(var i = 0; i < answerLength; ++i) { + let tempInput = document.createElement('input'); + tempInput.setAttribute('maxlength', 1); + tempPartial.appendChild(tempInput); + } + downEl.appendChild(tempLi); tempLi.appendChild(tempSpan); + tempLi.appendChild(tempPartial); }); } diff --git a/src/scss/_base.scss b/src/scss/_base.scss index a573383..09e7cdd 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -234,6 +234,26 @@ } } + .o-crossword-user-answer { + input { + border:0; + display: inline-block; + border-bottom: 1px solid #000; + margin-right: 2px; + width: 25px; + height: 25px; + text-transform: uppercase; + font-family: monospace; + font-size: 1.5rem; + text-align: center; + + &:focus { + outline: none; + border-bottom: 2px solid rgb(158, 47, 80); + } + } + } + .o-crossword-clues-down:before { content: 'Down'; line-height: 1.3em; From d1356f1071e28789bda69e3440aef48bf1b28ccb Mon Sep 17 00:00:00 2001 From: Lily2point0 Date: Fri, 19 May 2017 17:51:38 +0100 Subject: [PATCH 02/10] update partial answer from grid input --- src/js/oCrossword.js | 33 ++++++++++++++++++++++++++++++--- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index c63f4d1..01ef83a 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -43,8 +43,6 @@ function writeErrorsAsClues(rootEl, json) { cluesEl.appendChild(textList); } -const HORIZ_PAN_SPRING = 0.2; - function buildGrid( rootEl, { @@ -114,6 +112,7 @@ function buildGrid( for(var i = 0; i < answerLength; ++i) { let tempInput = document.createElement('input'); tempInput.setAttribute('maxlength', 1); + tempInput.setAttribute('data-link-identifier', 'A' + across[0] + '-' + i); tempPartial.appendChild(tempInput); } @@ -138,6 +137,7 @@ function buildGrid( for(var i = 0; i < answerLength; ++i) { let tempInput = document.createElement('input'); tempInput.setAttribute('maxlength', 1); + tempInput.setAttribute('data-link-identifier', 'D' + down[0] + '-' + i); tempPartial.appendChild(tempInput); } @@ -249,6 +249,16 @@ function getGridCellsByNumber(gridEl, number, direction, length) { return out; } +function getLetterIndex(gridEl, cell, number, direction) { + let el = gridEl.querySelector(`td[data-o-crossword-number="${number}"]`); + + if(direction === 'across') { + return cell.cellIndex - el.cellIndex; + } else { + return cell.parentNode.rowIndex - el.parentNode.rowIndex; + } +} + OCrossword.prototype.assemble = function assemble() { const gridEl = this.rootEl.querySelector('table'); const cluesEl = this.rootEl.querySelector('ul.o-crossword-clues'); @@ -261,11 +271,13 @@ OCrossword.prototype.assemble = function assemble() { arr.push({ number: el.dataset.oCrosswordNumber, direction: el.dataset.oCrosswordDirection, - answerLength: el.dataset.oCrosswordAnswerLength + answerLength: el.dataset.oCrosswordAnswerLength, + answerPos: getLetterIndex(gridEl, cell, el.dataset.oCrosswordNumber, el.dataset.oCrosswordDirection) }); gridMap.set(cell, arr); }); } + if (cluesEl) { let currentClue = -1; @@ -386,6 +398,7 @@ OCrossword.prototype.assemble = function assemble() { if (magicInputNextEls) { const index = magicInputNextEls.indexOf(oldMagicInputEl); + syncPartialClue(magicInput.value, magicInputNextEls, index); if (magicInputNextEls[index + direction]) { return takeInput(magicInputNextEls[index + direction], magicInputNextEls); } @@ -566,6 +579,20 @@ OCrossword.prototype.assemble = function assemble() { magicInput.style.display = 'none'; } + function syncPartialClue(letter, src, index) { + const gridItems = gridMap.get(src[index]); + let targets = []; + + for(let i = 0; i < gridItems.length; ++i) { + let linkName = gridItems[i].direction[0].toUpperCase() + gridItems[i].number + '-' + gridItems[i].answerPos; + targets.push(cluesEl.querySelector('input[data-link-identifier="'+linkName+'"]')); + } + + targets.forEach((target) => { + target.value = letter; + }); + } + let previousClueSelection = null; function isEquivalent(a, b) { From ceee2685b1c7726ecb6380d83d62f6758b623fee Mon Sep 17 00:00:00 2001 From: Lily2point0 Date: Mon, 22 May 2017 16:42:07 +0100 Subject: [PATCH 03/10] update grid and other definitions from clueList input --- src/js/oCrossword.js | 124 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 124 insertions(+) diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index 01ef83a..0af07c2 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -383,6 +383,130 @@ OCrossword.prototype.assemble = function assemble() { progress(); }); + this.addEventListener(cluesEl, 'keydown', function(e){ + if (!isAndroid()) { + e.preventDefault(); + } + + if (e.keyCode === 13) { //enter + magicInputNextEls = null; + return; + // return progress(); + } + if ( + e.keyCode === 9 || //tab + e.keyCode === 40 ||//down + e.keyCode === 39 ||//right + e.keyCode === 32 //space + ) { + return; + // return progress(); + } + if ( + e.keyCode === 37 || //left + e.keyCode === 38 //up + ) { + return; + // return progress(-1); + } + if ( + e.keyCode === 8 //backspace + ) { + magicInput.value = ''; + return; + // return progress(-1); + } + + if( e.keyCode === 16 || //shift + e.keyCode === 20 || //caps lock + e.keyCode === 91 //Command + ) { + e.target.value = ''; + return; + } + + if(!isAndroid()) { + e.target.value = String.fromCharCode(e.keyCode); + + if( e.keyCode === 229) { + //fix safari press down + e.target.value = ''; + return; + } + } + + let gridSync = getCellFromClue(e.target); + gridSync.grid.textContent = e.target.value; + + if(gridSync.defSync) { + let defSync = cluesEl.querySelector('input[data-link-identifier="' + gridSync.defSyncInput +'"]'); + defSync.value = e.target.value; + } + + + nextInput(e.target); + }); + + function nextInput(source) { + let inputID = source.getAttribute('data-link-identifier'); + let inputGroup = document.querySelectorAll('input[data-link-identifier^="' + inputID.split('-')[0] +'-"]'); + let currentInput = inputID.split('-')[1]; + let newInput = ++currentInput; + + if(newInput < inputGroup.length) { + let next = cluesEl.querySelector('input[data-link-identifier="' + inputID.split('-')[0] +'-'+ newInput+'"]'); + next.focus(); + next.select(); + } else { + source.blur(); + } + } + + function getCellFromClue(clue) { + let inputIdentifier = clue.getAttribute('data-link-identifier'); + let defDirection = (inputIdentifier.slice(0,1) === 'A')?'across':'down'; + let defNum = inputIdentifier.slice(1,inputIdentifier.length).split('-')[0]; + let defIndex = parseInt(inputIdentifier.split('-')[1]); + + let cells = gridEl.querySelectorAll('td:not(.empty)'); + let selectedCell = {}; + + cells.forEach(cell => { + let cellData = gridMap.get(cell); + for(let i = 0; i < cellData.length; ++i) { + if( + cellData[i].direction === defDirection && + parseInt(cellData[i].number) === parseInt(defNum) && + parseInt(cellData[i].answerPos) === parseInt(defIndex) + ) { + selectedCell.grid = cell; + if(cellData.length > 1) { + selectedCell.defSync = true; + + selectedCell.defSyncInput = constructInputIdentifier(cellData, defDirection); + } + } + } + }); + + return selectedCell; + } + + function constructInputIdentifier(data, direction) { + let identifier; + + for(let i = 0; i < data.length; ++i) { + if(data[i].direction !== direction) { + identifier = data[i].direction.slice(0,1).toUpperCase(); + identifier += data[i].number; + identifier += '-'; + identifier += data[i].answerPos; + } + } + + return identifier; + } + const progress = debounce(function progress(direction) { direction = direction === -1 ? -1 : 1; const oldMagicInputEl = magicInputTargetEl; From 6aef84f7f913530814c0c6126be3680ff0dffc97 Mon Sep 17 00:00:00 2001 From: Lily2point0 Date: Mon, 22 May 2017 17:10:25 +0100 Subject: [PATCH 04/10] reset input styling on iOS --- src/js/oCrossword.js | 8 +++++--- src/scss/_base.scss | 4 ++++ 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index 0af07c2..e206d76 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -388,8 +388,11 @@ OCrossword.prototype.assemble = function assemble() { e.preventDefault(); } + magicInput.value =''; + magicInput.style.display = 'none'; + if (e.keyCode === 13) { //enter - magicInputNextEls = null; + e.target.blur(); return; // return progress(); } @@ -412,7 +415,7 @@ OCrossword.prototype.assemble = function assemble() { if ( e.keyCode === 8 //backspace ) { - magicInput.value = ''; + e.target.value = ''; return; // return progress(-1); } @@ -443,7 +446,6 @@ OCrossword.prototype.assemble = function assemble() { defSync.value = e.target.value; } - nextInput(e.target); }); diff --git a/src/scss/_base.scss b/src/scss/_base.scss index 09e7cdd..6b10277 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -143,6 +143,8 @@ font-size: inherit; text-transform: inherit; max-width: none!important; + border-radius: 0; + padding: 0; } } @@ -246,6 +248,8 @@ font-family: monospace; font-size: 1.5rem; text-align: center; + border-radius: 0; + padding: 0; &:focus { outline: none; From b323a6d5366459ccbdea80a8ba0c473b4dc1ee4d Mon Sep 17 00:00:00 2001 From: Lily2point0 Date: Tue, 23 May 2017 10:58:22 +0100 Subject: [PATCH 05/10] implement keyboard navigation + delete --- src/js/oCrossword.js | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index e206d76..bf20500 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -390,6 +390,9 @@ OCrossword.prototype.assemble = function assemble() { magicInput.value =''; magicInput.style.display = 'none'; + + let gridSync = getCellFromClue(e.target); + if (e.keyCode === 13) { //enter e.target.blur(); @@ -402,21 +405,28 @@ OCrossword.prototype.assemble = function assemble() { e.keyCode === 39 ||//right e.keyCode === 32 //space ) { - return; + return nextInput(e.target, 1); // return progress(); } if ( e.keyCode === 37 || //left e.keyCode === 38 //up ) { - return; + return nextInput(e.target, -1); // return progress(-1); } if ( e.keyCode === 8 //backspace ) { e.target.value = ''; - return; + + gridSync.grid.textContent = e.target.value; + + if(gridSync.defSync) { + let defSync = cluesEl.querySelector('input[data-link-identifier="' + gridSync.defSyncInput +'"]'); + defSync.value = e.target.value; + } + return nextInput(e.target, -1); // return progress(-1); } @@ -438,24 +448,23 @@ OCrossword.prototype.assemble = function assemble() { } } - let gridSync = getCellFromClue(e.target); gridSync.grid.textContent = e.target.value; - + if(gridSync.defSync) { let defSync = cluesEl.querySelector('input[data-link-identifier="' + gridSync.defSyncInput +'"]'); defSync.value = e.target.value; } - nextInput(e.target); + nextInput(e.target, 1); }); - function nextInput(source) { + function nextInput(source, direction) { let inputID = source.getAttribute('data-link-identifier'); let inputGroup = document.querySelectorAll('input[data-link-identifier^="' + inputID.split('-')[0] +'-"]'); let currentInput = inputID.split('-')[1]; - let newInput = ++currentInput; + let newInput = (direction === 1)?++currentInput:--currentInput; - if(newInput < inputGroup.length) { + if(newInput >= 0 && newInput < inputGroup.length) { let next = cluesEl.querySelector('input[data-link-identifier="' + inputID.split('-')[0] +'-'+ newInput+'"]'); next.focus(); next.select(); From 1d202b295b403b2bbe44610922efbd9ebfb5265c Mon Sep 17 00:00:00 2001 From: Lily2point0 Date: Tue, 23 May 2017 12:21:41 +0100 Subject: [PATCH 06/10] fix character skip on Android --- src/js/oCrossword.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index bf20500..71afaf1 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -397,7 +397,6 @@ OCrossword.prototype.assemble = function assemble() { if (e.keyCode === 13) { //enter e.target.blur(); return; - // return progress(); } if ( e.keyCode === 9 || //tab @@ -406,20 +405,17 @@ OCrossword.prototype.assemble = function assemble() { e.keyCode === 32 //space ) { return nextInput(e.target, 1); - // return progress(); } if ( e.keyCode === 37 || //left e.keyCode === 38 //up ) { return nextInput(e.target, -1); - // return progress(-1); } if ( e.keyCode === 8 //backspace ) { e.target.value = ''; - gridSync.grid.textContent = e.target.value; if(gridSync.defSync) { @@ -427,7 +423,6 @@ OCrossword.prototype.assemble = function assemble() { defSync.value = e.target.value; } return nextInput(e.target, -1); - // return progress(-1); } if( e.keyCode === 16 || //shift @@ -448,14 +443,16 @@ OCrossword.prototype.assemble = function assemble() { } } - gridSync.grid.textContent = e.target.value; + setTimeout(function(){ //debounce not working on Android + gridSync.grid.textContent = e.target.value; - if(gridSync.defSync) { - let defSync = cluesEl.querySelector('input[data-link-identifier="' + gridSync.defSyncInput +'"]'); - defSync.value = e.target.value; - } + if(gridSync.defSync) { + let defSync = cluesEl.querySelector('input[data-link-identifier="' + gridSync.defSyncInput +'"]'); + defSync.value = e.target.value; + } - nextInput(e.target, 1); + nextInput(e.target, 1); + }, 10); }); function nextInput(source, direction) { From d708c1c3c8de514c2e5048f845b15a053e95e62f Mon Sep 17 00:00:00 2001 From: Lily2point0 Date: Tue, 23 May 2017 14:58:34 +0100 Subject: [PATCH 07/10] fix iOS --- src/js/oCrossword.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index 71afaf1..7129ab6 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -332,6 +332,7 @@ OCrossword.prototype.assemble = function assemble() { let blockHighlight = false; + this.addEventListener(magicInput, 'keydown', function (e) { if (!isAndroid()) { e.preventDefault(); @@ -443,7 +444,7 @@ OCrossword.prototype.assemble = function assemble() { } } - setTimeout(function(){ //debounce not working on Android + setTimeout(function(){ gridSync.grid.textContent = e.target.value; if(gridSync.defSync) { @@ -479,7 +480,7 @@ OCrossword.prototype.assemble = function assemble() { let cells = gridEl.querySelectorAll('td:not(.empty)'); let selectedCell = {}; - cells.forEach(cell => { + Array.from(cells).forEach(cell => { let cellData = gridMap.get(cell); for(let i = 0; i < cellData.length; ++i) { if( @@ -574,7 +575,7 @@ OCrossword.prototype.assemble = function assemble() { magicInput.focus(); magicInput.select(); - debounce(function(){ + setTimeout(function(){ magicInput.focus(); magicInput.select(); }, 100); From 5cc1940757f2c0020caed07221b27c16e71b06ca Mon Sep 17 00:00:00 2001 From: Lily2point0 Date: Tue, 23 May 2017 17:57:18 +0100 Subject: [PATCH 08/10] add clue highight on input selection --- src/js/oCrossword.js | 67 +++++++++++++++++++++++++++++++------------- 1 file changed, 48 insertions(+), 19 deletions(-) diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index 7129ab6..d537efc 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -331,7 +331,7 @@ OCrossword.prototype.assemble = function assemble() { magicInput.style.display = 'none'; let blockHighlight = false; - + let previousClueSelection = null; this.addEventListener(magicInput, 'keydown', function (e) { if (!isAndroid()) { @@ -388,9 +388,6 @@ OCrossword.prototype.assemble = function assemble() { if (!isAndroid()) { e.preventDefault(); } - - magicInput.value =''; - magicInput.style.display = 'none'; let gridSync = getCellFromClue(e.target); @@ -416,14 +413,19 @@ OCrossword.prototype.assemble = function assemble() { if ( e.keyCode === 8 //backspace ) { - e.target.value = ''; - gridSync.grid.textContent = e.target.value; + setTimeout(function(){ + e.target.value = ''; + gridSync.grid.textContent = e.target.value; + + if(gridSync.defSync) { + let defSync = cluesEl.querySelector('input[data-link-identifier="' + gridSync.defSyncInput +'"]'); + defSync.value = e.target.value; + } + + nextInput(e.target, -1); + }, 5); - if(gridSync.defSync) { - let defSync = cluesEl.querySelector('input[data-link-identifier="' + gridSync.defSyncInput +'"]'); - defSync.value = e.target.value; - } - return nextInput(e.target, -1); + return; } if( e.keyCode === 16 || //shift @@ -453,7 +455,7 @@ OCrossword.prototype.assemble = function assemble() { } nextInput(e.target, 1); - }, 10); + }, 5); }); function nextInput(source, direction) { @@ -468,6 +470,8 @@ OCrossword.prototype.assemble = function assemble() { next.select(); } else { source.blur(); + let def = source.parentElement.parentElement; + def.click(); } } @@ -545,6 +549,27 @@ OCrossword.prototype.assemble = function assemble() { this.addEventListener(magicInput, 'focus', magicInput.select()); + const clueInputs = cluesEl.querySelectorAll('input'); + this.addEventListener(clueInputs, 'focus', function(e){ + magicInput.value =''; + magicInput.style.display = 'none'; + + let def = e.target.parentElement.parentElement; + let targetClue = { + 'number': def.getAttribute('data-o-crossword-number'), + 'direction': def.getAttribute('data-o-crossword-direction'), + 'answerLength': def.getAttribute('data-o-crossword-answer-length') + + }; + + previousClueSelection = targetClue; + + if(!def.classList.contains('has-hover')) { + highlightGridByNumber(targetClue.number, targetClue.direction, targetClue.answerLength); + } + + }); + function takeInput(el, nextEls) { if ( magicInputTargetEl && @@ -578,7 +603,7 @@ OCrossword.prototype.assemble = function assemble() { setTimeout(function(){ magicInput.focus(); magicInput.select(); - }, 100); + }, 5); } const onResize = function onResize(init) { @@ -726,8 +751,6 @@ OCrossword.prototype.assemble = function assemble() { }); } - let previousClueSelection = null; - function isEquivalent(a, b) { var aProps = Object.getOwnPropertyNames(a); var bProps = Object.getOwnPropertyNames(b); @@ -779,9 +802,8 @@ OCrossword.prototype.assemble = function assemble() { defEl = (e.target.nodeName === 'SPAN')?e.target.parentElement:e.target; } - const num = defEl.getAttribute('data-o-crossword-number'); clueDetails = {}; - clueDetails.number = num; + clueDetails.number = defEl.getAttribute('data-o-crossword-number');; clueDetails.direction = defEl.getAttribute('data-o-crossword-direction'); clueDetails.answerLength = defEl.getAttribute('data-o-crossword-answer-length'); @@ -789,7 +811,7 @@ OCrossword.prototype.assemble = function assemble() { return; } - const el = gridEl.querySelector(`td[data-o-crossword-number="${num}"]`); + const el = gridEl.querySelector(`td[data-o-crossword-number="${clueDetails.number}"]`); target = el; } @@ -896,7 +918,14 @@ OCrossword.prototype.addEventListener = function(el, type, callback) { } this.listeners.push({el, type, callback}); - el.addEventListener(type, callback); + + if(Object.prototype.toString.call(el) === '[object NodeList]') { + Array.from(el).forEach(function(element) { + element.addEventListener(type, callback); + }); + } else { + el.addEventListener(type, callback); + } }; OCrossword.prototype.removeAllEventListeners = function() { From 9782825132797d593a327277a7f4cb35c1d4dc71 Mon Sep 17 00:00:00 2001 From: Lily2point0 Date: Wed, 24 May 2017 10:55:18 +0100 Subject: [PATCH 09/10] fix iOS Safari rowIndex issue --- src/js/oCrossword.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index d537efc..e115aa1 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -60,6 +60,7 @@ function buildGrid( for (let i=0; i { + + Array.from(targets).forEach((target) => { target.value = letter; }); } From a00965710dfb08e10865974048ee772fa1bb92c3 Mon Sep 17 00:00:00 2001 From: Lily2point0 Date: Wed, 24 May 2017 11:26:01 +0100 Subject: [PATCH 10/10] update print layout --- src/scss/_print.scss | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/scss/_print.scss b/src/scss/_print.scss index 8f2cdd5..97b569a 100644 --- a/src/scss/_print.scss +++ b/src/scss/_print.scss @@ -1,14 +1,13 @@ @media print { @page { - margin: 1cm 0.5cm 2cm 0.5cm; + margin: 1cm 0.5cm 1cm 0.5cm; } body { -webkit-print-color-adjust: exact; - // height: 100%; + height: 100%; & >div { height: auto; - // overflow: hidden; page-break-after:avoid; position: relative; width: 100%; @@ -40,7 +39,7 @@ } .o-crossword-clue-displayer { - display: none; + display: none!important; } .o-crossword table td[data-o-crossword-number]:before { @@ -83,6 +82,11 @@ font-size: 14px!important; } + .o-crossword .o-crossword-clues ul li .o-crossword-user-answer, + .o-crossword .o-crossword-clues ul .o-crossword-user-answer { + display: none!important; + } + .o-crossword:not([data-o-crossword-force-compact]) { display: block;