Topic: A UserScript that moves the parent/child boxes and pool navigation bar to above the search bar on post pages

This is JavaScript that can be used with Tampermonkey/Greasemonkey

Screenshot: https://i.imgur.com/STLkXMQ.png

var searchSelect = document.getElementById("search-box");

// move pool navigation to above search box
var poolSelect = document.getElementById("pool-nav");
if (poolSelect != null) {   //only moves elements if they exist, to prevent null error
  searchSelect.before(poolSelect);
}

// more compact navigation arrows to make room for pool name
var getFirst = document.querySelectorAll("#pool-nav .first");
var getPrev = document.querySelectorAll("#pool-nav .prev");
var getNext = document.querySelectorAll("#pool-nav .next");
var getLast = document.querySelectorAll("#pool-nav .last");

var i;
for (i = 0; i < getPrev.length; i++) {  //loop for if a post is in more than one pool
  getFirst[i].innerHTML = "«";
  getPrev[i].innerHTML = "‹";
  getNext[i].innerHTML = "›";
  getLast[i].innerHTML = "»";
}

// adds class name to pool for CSS styling
if (poolSelect != null) {
poolSelect.className = "ui-corner-all nav-notice";
}

// move parent/child notices to above search box
var childSelect = document.getElementsByClassName("bottom-notices")[0];
if (childSelect != null) {
if (childSelect.children.length > 0) {   //only moves elements if they exist, to prevent null error
  searchSelect.before(childSelect);
}}

// fixes situation where empty container displays when viewing a pool without an active search
var navSelect = document.getElementById("nav-links");
if (navSelect != null) {
if (navSelect.children.length == 0) {
  navSelect.style.display = "none";
}}

Corresponding CSS:

#has-children-relationship-preview {
    white-space: normal;
}

#has-parent-relationship-preview-link {
    float: right;
}

#has-children-relationship-preview-link {
    float: right;
}

.bottom-notices {
    flex-direction: column;
    margin-top: 0 !important;
    font-size: .8em;
}

.parent-children {
    flex-direction: column;
}

#pool-nav li {
  display: flex;
  padding: 0 !important;
  position: inherit !important;
  height: inherit !important;
}

#pool-nav a {
  position:  inherit !important;
}

#pool-nav span {
  position:  inherit !important;
  line-height: 1.25em;
}

.pool-name {
  font-size: 80%;
  font-weight: 700;
  margin:auto;
  padding: 0 5px !important;
}

#pool-nav .prev {
  margin: 0 .1em;
  font-size: 150%;
  font-weight:normal;
}

#pool-nav .next {
  margin: 0 .1em;
  font-size: 150%;
  font-weight:normal;
}

#pool-nav .first {
  font-size: 150%;
  font-weight:normal;
}

#pool-nav .last {
  font-size: 150%;
  font-weight:normal;
}

I am a novice coder so if anything is broken let me know

Edit: better null handling

4/5/2020 Now works with latest theme