diff --git a/CHANGELOG.md b/CHANGELOG.md index cb583a8ae3..9c090ecd68 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Adding Drag to fill Cells Functionality in Game of Life #1150 - Undismissable palletes in Dollar street #1605 - Localization error in FoodChain #1608 +- Alignment issue in Abacus #1607 ## [1.8.0] - 2024-04-10 ### Added diff --git a/activities/Abacus.activity/js/custompalette.js b/activities/Abacus.activity/js/custompalette.js index 02534b8b3b..57f8f3d4bf 100644 --- a/activities/Abacus.activity/js/custompalette.js +++ b/activities/Abacus.activity/js/custompalette.js @@ -11,57 +11,80 @@ define(["sugar-web/graphics/palette"], function (palette) { palette.Palette.call(this, invoker, primaryText); var div = document.createElement('div'); + div.setAttribute("style", "padding: 5px 13px;") + var rodsdiv = document.createElement('div'); // + rodsdiv.setAttribute("style", "display: flex;justify-content:space-between;align-items: center;margin-top:10px;"); var lrods = document.createElement("label"); lrods.innerHTML = "Rods:"; lrods.setAttribute("for","rods"); var rods = document.createElement("INPUT"); rods.setAttribute("type", "number"); rods.setAttribute("min","1"); - rods.setAttribute("style","width:40px;margin:5px;"); + rods.setAttribute("style","width:40px;"); rods.setAttribute("id","rods"); rods.value=g.customarr[0]; + rodsdiv.append(lrods); + rodsdiv.append(rods); + var topdiv = document.createElement('div'); + topdiv.setAttribute("style", "display: flex;justify-content:space-between;align-items: center;margin-top:5px;"); var ltop = document.createElement("label"); ltop.innerHTML = "Top:"; ltop.setAttribute("for","top"); var top = document.createElement("INPUT"); top.setAttribute("type", "number"); top.setAttribute("min","1"); - top.setAttribute("style","width:40px;margin:5px;"); + top.setAttribute("style","width:40px;"); top.setAttribute("id","top"); top.value=g.customarr[1]; + topdiv.append(ltop); + topdiv.append(top); + var bottomdiv = document.createElement('div'); + bottomdiv.setAttribute("style", "display: flex;justify-content:space-between;align-items: center;margin-top:5px;"); var lbottom = document.createElement("label"); lbottom.innerHTML = "Bottom:"; lbottom.setAttribute("for","bottom"); var bottom = document.createElement("INPUT"); bottom.setAttribute("type", "number"); bottom.setAttribute("min","1"); - bottom.setAttribute("style","width:40px;margin:5px;"); + bottom.setAttribute("style","width:40px;"); bottom.setAttribute("id","bottom"); bottom.value=g.customarr[2]; + bottomdiv.append(lbottom); + bottomdiv.append(bottom); + var factordiv = document.createElement('div'); + factordiv.setAttribute("style", "display: flex;justify-content:space-between;align-items: center;margin-top:5px;"); var lfactor = document.createElement("label"); lfactor.innerHTML = "Factor:"; lfactor.setAttribute("for","factor"); var factor = document.createElement("INPUT"); factor.setAttribute("type", "number"); factor.setAttribute("min","1"); - factor.setAttribute("style","width:40px;margin:5px;"); + factor.setAttribute("style","width:40px;"); factor.setAttribute("id","factor"); factor.value=g.customarr[3]; + factordiv.append(lfactor); + factordiv.append(factor); + var basediv = document.createElement('div'); + basediv.setAttribute("style", "display: flex;justify-content:space-between;align-items: center;margin-top:5px;"); var lbase = document.createElement("label"); lbase.innerHTML = "Base:"; lbase.setAttribute("for","base"); var base = document.createElement("INPUT"); base.setAttribute("type", "number"); base.setAttribute("min","1"); - base.setAttribute("style","width:40px;margin:5px;"); + base.setAttribute("style","width:40px;"); base.setAttribute("id","base"); base.value=g.customarr[4]; + basediv.append(lbase); + basediv.append(base); + var submitdiv = document.createElement("div"); + submitdiv.setAttribute("style", "display: flex;justify-content:space-between;align-items: center;margin-top:5px;"); var submit = document.createElement('button'); submit.className = 'toolbutton'; submit.setAttribute('id','new-button'); @@ -69,6 +92,7 @@ define(["sugar-web/graphics/palette"], function (palette) { submit.onclick = function() { that.setAbacus(); } + submitdiv.append(submit); function isNormalInteger(str) { var n = Math.floor(Number(str)); @@ -83,17 +107,12 @@ define(["sugar-web/graphics/palette"], function (palette) { } } - div.appendChild(lrods); - div.appendChild(rods); - div.appendChild(ltop); - div.appendChild(top); - div.appendChild(lbottom); - div.appendChild(bottom); - div.appendChild(lfactor); - div.appendChild(factor); - div.appendChild(lbase); - div.appendChild(base); - div.appendChild(submit); + div.appendChild(rodsdiv); + div.appendChild(topdiv); + div.appendChild(bottomdiv); + div.appendChild(factordiv); + div.appendChild(basediv); + div.appendChild(submitdiv); this.setContent([div]); var that = this;