Improve Docker add/update UI

[libook]

Basic part:

In the current UI for adding or updating containers, the field names and input boxes are far apart, making it difficult to correctly correspond the field name to the input box.

Current UI:

Suggestion：Put all filed names right. For example:

I just added CSS codes like:

dt {
  text-align: right;
  margin-right: 1em;
  padding-top: 4px;
}

I'm sure your front-end engineers will have a better solution.

Additional Part:

1. Enhanced differentiation between Path, Port, Variable, Label, Device fields.

Currently there is yellow text below each field value that suggests the type of the field, but it seems to be rather weak ( to me), eyes always see the field name before the field value, so it's not sure of the type of the field at least until you see the value area.

Improvement options for this problem are open, such as the possibility of placing enhanced type identifiers in the field name area. For example:

Another option could be to put fields of the same type together and reinforce the type attribute of that area. You can refer to Portainer. (No example this time.)

2. Consider showing a dialog box for selecting a type first when adding Path, Port, Variable, Label or Device.

Not most cases prioritize the addition of the Path attribute, so the odds are that the user will always select another type first and then fill it in. It would be possible to add a dialog box that lists all the buttons of the type. Rather than clicking on a dropdown box and then clicking on the type, this would allow the user to select the type with just one click. It also reduces the chances of clicking on the wrong option due to the dense arrangement of options in the dropdown box.

 

 

 

[bonienl]

Thanks for the recommendations.

 

I made some updates for Unraid 6.13.