feisworx.com mobile-friendlier (tampermonkey user script)

README.md

Feisworx Mobile Mode

This fiddles around with FeisWorx pages to make them a little more usable on mobile devices like phones and tablets.

Danger Will Robinson

Loading things like TamperMonkey allows scripts to mess with your web pages. This is almost always a bad idea. If you aren't a developer who can read JavaScript, or know one who can look this over to make sure I'm not doing something awful, you should steer clear of this and all other user scripts.

How To Install

1. Install the Firefox browser for your phone/tablet, then open this page in it. Android / iOS
2. Install TamperMonkey
3. Load the Raw View of this page
4. Load up feisworx

You're all set! All future views of FiesWorx will render in mobile mode.

phoneworx.user.js

// ==UserScript==
// @name         PhoneWorx
// @namespace    https://gist.githubusercontent.com/nealey/3af026cc34ddf502419aa16eee3a4caa/
// @version      0.4
// @description  Subtly change Feisworks for narrow screens
// @author       Neale Pickett <neale@woozle.org>
// @match        http*://*.feisworx.com/*
// @match        http*://feisworx.com/*
// @grant        none
// ==/UserScript==

// Most of what we're doing here is trying to make content flow.
// Quite a lot of pages are set up to do this pretty well already,
// they just need some hints removed.

function phoneworx() {
    let viewport = document.createElement("meta")
    viewport.name = "viewport"
    viewport.content = "width=device-width, initial-scale=1"
    document.head.appendChild(viewport)
    console.log(viewport)

    // Remove forced width on anything that forces it
    for (let e of document.querySelectorAll("[width]")) {
        e.width = undefined
    }

    // Tag some things to make CSS more readable
    document.querySelector("body > table:first-child [align='left']").id = "pw-logo"
    document.querySelector("body > table:first-child [align='center']").id = "pw-title"
    document.querySelector("body > table:first-child [align='right']").id = "pw-contact"
    document.querySelector("table[align='center']").id = "pw-nav"

    // Move "contact us" links to the bottom of the page
    document.querySelector(".copyright").insertAdjacentElement("beforebegin", document.querySelector("#pw-contact"))

    let style = document.createElement("style")
    style.textContent = `
body {
  background: rgb(127,216,192);
  background: linear-gradient(0deg, #1fc6f4 0%, #7fd8c0 100%);
}

#pw-contact {
  float: right;
  padding: 0 1em;
}

@media (max-width: 768px) {
  body {
    margin: 0;
  }
  h1, h2, h3, p {
    margin: 0.5em;
  }
  #pw-title h1 {
    margin: 0em 0.5em;
  }
  body > table:nth-of-type(1) tr {
    display: flex;
    flex-wrap: wrap;
  }
  #pw-nav tr {
    display: flex;
  }
  a.sel {
    padding: 0.5em;
    margin: 0.1em;
  }
  form > table:nth-of-type(1) tr {
    display: flex;
    flex-wrap: wrap;
  }
  form > table:nth-of-type(1) td {
    display: block;
  }
}
`
    document.head.appendChild(style)
}

phoneworx()