bohman

Godot Responsive UI

When porting my Godot game You're a dad to mobile I had to make UI adjustments. I didn't find any good strategies for this online, so I had to put together my own solution. I initially aimed to do something inspired by web media queries. I don't feel like I got close to that, but at least it's a workable solution.

The setup

• Responsive.gd should be autoloaded. It's the engine behind most of this.
• responsive_scene.gd will be inherited by individual scene implementations. It keeps track of original values and when things should be applied.
• main_menu_layout.gd is an example of an inherited node.

bohman

extends Node


###
#
# Input Controller
#
# Register this script as an autoloader and use it to
# keep track of global inputs and input types.
#

bohman

Valet is awesome, but I got seemingly random 502 bad gateway issues on larger sites. After looking in the logs (~/.config/valet/Log) I discovered the error was upstream sent too big header. Googling led me to laravel/valet#290 where the following solution fixed it:

1. Create ~/.config/valet/Nginx/all.conf with this:

proxy_buffer_size   4096k;
proxy_buffers   128 4096k;
proxy_busy_buffers_size   4096k;

2. Append this to /usr/local/etc/nginx/fastcgi_params

bohman

[class*=columns-] {
  --columns: 2;
  --columns-gutter: 40px;
  --columns-width: calc(100% / var(--columns) - var(--columns-gutter));

  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  margin-bottom: calc(var(--columns-gutter) * -1);

bohman

.placeholder {
  background-color: #222;
  padding: 80px 0;
  text-align: center;
  color: rgba(255, 255, 255, .4);
  font-weight: bold;
  text-transform: uppercase;
}

.placeholder:after {

bohman

(function ($) {

  window.sw_ga = {};

  //
  // Events
  //
  sw_ga.events = [

    // Menu toggle

bohman

# Compiled source #
###################
*.class
*.dll
*.exe
*.o
*.so

# Packages #
############

bohman

/* This is a shorter way to do it with css */
[class*="btn"] {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
}
.btn--twitter {
  color: #fff;
  background: #55acee;
}

bohman

/**
 *
 * When you need to use the hash to imitate query parameters,
 * like so:
 *
 * http://whatever.man/#key=value&another_key=another_value
 *
 **/

// Set URL to a specific hash. It overrides any existing hash.

bohman

input[data-onoff]:empty {
  margin-left: -9999px;
}

input[data-onoff]:empty ~ label {
  position: relative;
  float: left;
  height: 22px;
  line-height: 22px;
  text-indent: 50px;