diff --git a/css/general/layout.css b/css/general/layout.css index 73a73efdb577c102b695f6617fbc829108417dbd..73ff33591685d87187339d0524a6c53356a62d31 100644 --- a/css/general/layout.css +++ b/css/general/layout.css @@ -75,3 +75,11 @@ div.grid-2columns-auto { margin-top: 1em; margin-bottom: 1em; } + +.space-evenly { + justify-content: space-evenly; +} + +.absolute { + position: absolute; +} diff --git a/src/interaction/siNavigation.js b/src/interaction/siNavigation.js index f36762e561f29d0e0c6f1ff5fcf1ea273feba0ec..c20b9097c6b5127f2c0433c92974cbfe84c27556 100644 --- a/src/interaction/siNavigation.js +++ b/src/interaction/siNavigation.js @@ -17,24 +17,33 @@ App.UI.SlaveInteract.navigation = function(slave) { } const placeInLine = App.UI.SlaveInteract.placeInLine(slave); - const controls = App.UI.DOM.appendNewElement("div", p); - const previous = App.UI.DOM.makeElement("span", App.UI.DOM.passageLink(" Prev ", "Slave Interact", - () => { V.AS = placeInLine[0]; }), ["adjacent-slave"]); - const next = App.UI.DOM.makeElement("span", App.UI.DOM.passageLink(" Next ", "Slave Interact", - () => { V.AS = placeInLine[1]; }), ["adjacent-slave"]); + const div = App.UI.DOM.appendNewElement("div", p, null); + const previous = App.UI.DOM.makeElement("span", null, ['adjacent-slave', 'margin-right']); + const next = App.UI.DOM.makeElement("span", null, ['adjacent-slave', 'margin-left']); + const name = App.UI.DOM.makeElement("h1", SlaveFullName(slave), ['slave-name']); + name.style.display = 'inline-block'; previous.id = "prev-slave"; next.id = "next-slave"; - controls.append( + previous.append( App.UI.DOM.makeElement("span", App.UI.Hotkeys.hotkeys("prev-slave"), ['hotkey']), - previous, - App.UI.DOM.makeElement("span", App.UI.favoriteToggle(slave)), - next, + App.UI.DOM.makeElement("span", App.UI.DOM.passageLink(" Prev ", "Slave Interact", + () => { V.AS = placeInLine[0]; }), + ), + ); + next.append( + App.UI.DOM.makeElement("span", App.UI.DOM.passageLink(" Next ", "Slave Interact", + () => { V.AS = placeInLine[1]; }), ["adjacent-slave"]), App.UI.DOM.makeElement("span", App.UI.Hotkeys.hotkeys("next-slave"), ['hotkey']), ); + name.append(` `, App.UI.DOM.makeElement("span", App.UI.favoriteToggle(slave))); - App.UI.DOM.appendNewElement("h1", p, SlaveFullName(slave), ['slave-name']); + div.append( + previous, + name, + next, + ); return p; };