Moved x button to seperate div, changed up/down arrows during test solving to fancy arrows

This commit is contained in:
mrfry 2020-11-17 13:09:17 +01:00
parent b5d83569a0
commit 8ea6efec93

View file

@ -1851,6 +1851,25 @@
mainDiv.style.top = mousePosition.y + offset[1] + 'px' mainDiv.style.top = mousePosition.y + offset[1] + 'px'
} }
}) })
const xrow = document.createElement('div')
SetStyle(xrow, {
height: '20px',
display: 'flex',
justifyContent: 'flex-end',
})
mainDiv.appendChild(xrow)
const xButton = CreateNodeWithText(xrow, '❌', 'div')
SetStyle(xButton, {
margin: '5px',
cursor: 'pointer',
})
xButton.addEventListener('mousedown', e => {
e.stopPropagation()
mainDiv.parentNode.removeChild(mainDiv)
})
// ------------------------------------------------------------------ // ------------------------------------------------------------------
var matchPercent = msgItem[0][0].p var matchPercent = msgItem[0][0].p
if (isSimpleMessage) { if (isSimpleMessage) {
@ -1966,16 +1985,17 @@
percentTextBox.innerText = relevantQuestion.p + '%' percentTextBox.innerText = relevantQuestion.p + '%'
} }
const buttonStyle = {
color: 'white',
backgroundColor: 'transparent',
margin: buttonMargin,
border: 'none',
fontSize: '30px',
cursor: 'pointer',
userSelect: 'none',
}
var buttonMargin = '2px 2px 2px 2px' // uniform button margin var buttonMargin = '2px 2px 2px 2px' // uniform button margin
if (msgItem[currItem].length > 1) { if (msgItem[currItem].length > 1) {
const buttonStyle = {
color: 'white',
backgroundColor: 'transparent',
margin: buttonMargin,
border: 'none',
fontSize: '30px',
cursor: 'pointer',
}
// PREV SUGG BUTTON ------------------------------------------------------------------------------------------------------------ // PREV SUGG BUTTON ------------------------------------------------------------------------------------------------------------
var prevSuggButton = CreateNodeWithText( var prevSuggButton = CreateNodeWithText(
prevSuggestionCell, prevSuggestionCell,
@ -2009,8 +2029,8 @@
} else { } else {
// if there are multiple items to display // if there are multiple items to display
// PREV QUESTION BUTTON ------------------------------------------------------------------------------------------------------------ // PREV QUESTION BUTTON ------------------------------------------------------------------------------------------------------------
var prevButton = CreateNodeWithText(prevQuestionCell, '^', 'button') var prevButton = CreateNodeWithText(prevQuestionCell, '⬆️', 'div')
prevButton.style.margin = buttonMargin // fancy margin SetStyle(prevButton, buttonStyle)
// event listener // event listener
prevButton.addEventListener('click', function() { prevButton.addEventListener('click', function() {
@ -2018,8 +2038,8 @@
SetQuestionText() SetQuestionText()
}) })
// NEXT QUESTION BUTTON ------------------------------------------------------------------------------------------------------------ // NEXT QUESTION BUTTON ------------------------------------------------------------------------------------------------------------
var nextButton = CreateNodeWithText(nextQuestionCell, 'ˇ', 'button') var nextButton = CreateNodeWithText(nextQuestionCell, '⬇️', 'div')
nextButton.style.margin = buttonMargin // fancy margin SetStyle(nextButton, buttonStyle)
// event listener // event listener
nextButton.addEventListener('click', function() { nextButton.addEventListener('click', function() {
@ -2031,22 +2051,6 @@
} }
appedtTo.appendChild(mainDiv) // THE FINAL APPEND appedtTo.appendChild(mainDiv) // THE FINAL APPEND
const xButton = CreateNodeWithText(mainDiv, '❌', 'div')
const xButtonSize = 40
SetStyle(xButton, {
margin: '5px',
position: 'absolute',
height: xButtonSize + 'px',
top: 0,
width: xButtonSize + 'px',
left: width - xButtonSize + 'px',
cursor: 'pointer',
})
xButton.addEventListener('mousedown', e => {
e.stopPropagation()
mainDiv.parentNode.removeChild(mainDiv)
})
// setting some events // setting some events
// addEventListener(window, 'scroll', function () { // addEventListener(window, 'scroll', function () {
// mainDiv.style.top = (pageYOffset + startFromTop) + 'px'; // mainDiv.style.top = (pageYOffset + startFromTop) + 'px';