Discusión sobre el ancho de la página „tablero“ y „escena“

Hola a todos,

Tras la opinión de @Prof_Techno sobre el ancho de la vista « Escena », me gustaría proponer cambios en el ancho máximo de la vista « Escena » y del « Tablero de control », ya que estas pantallas no soportan muy bien las pantallas grandes :slight_smile:

La idea es permitir un uso más amplio de la pantalla en pantallas grandes (>1280px de ancho).

Me gustaría proponer los siguientes cambios (antes/después) :

Si usas Gladys Plus, puedes probarlo en casa con este enlace:

https://larger-container-scene-dashb.gladys-plus.pages.dev

La PR :

¿Qué os parece ?

Lo he probado y queda realmente bien en pantalla grande :slight_smile:
No he encontrado ningún error hasta ahora

¡Super noticia! ¡Así me evitaré tener que manipular el CSS cuando trabajo en las escenas!

Por mi parte acabo de probarlo y estoy bastante indeciso

En principio es genial porque se aprovecha bien el ancho de toda la pantalla, pero con una gran resolución (3440x1440) los widgets están aplanados y me parece que el resultado no es bueno, y francamente no me gusta

Aquí hay algunos ejemplos:

image

Si hacemos una comparación entre las dos versiones, perdemos en visualización en altura y perdemos la coherencia entre el menú y el alineamiento de los widgets

Bueno, después, es raro que Gladys esté en pantalla completa en mi PC, la mayor parte del tiempo cuando uso Gladys es en mi teléfono o en una tableta… pero si tuviera que elegir hoy, me quedaría con la versión antigua porque prefiero que todo esté bien alineado con buenas proporciones que ampliar los widgets solo para llenar el vacío

Efectivamente, en tu caso, no queda nada bien. Creo que debería haber un límite de ancho para que no parezca aplanado en las pantallas ultra-anchas.

Algo intermedio entre la configuración actual y el « ancho al 100% ».

Actualmente, el ancho máximo es de 1200px, creo que podríamos aumentar a 1600-2000px (para probar).

¿Puedes probar a partir de cuándo se ve realmente demasiado aplanado?

En tu navegador, al abrir el inspector, hay una herramienta para probar el diseño responsivo:

¡Me gustaría tu opinión sobre la vista de la escena también!

Lo miro esta noche cuando esté en casa

¿Sería posible diferenciar la parte de diseño de la escena del panel de control?

Y si la pantalla es muy ancha, ¿podríamos prever una cuarta columna, o incluso más si es necesario para los paneles de control?

Es posible, pero para las escenas podríamos tener incluso un botón « expandir pantalla » como hace Notion, por ejemplo.

Para las columnas en el panel de control, el problema es que si ponemos 4 columnas, se vuelve ilegible en una pantalla pequeña.

Aquí está el panel de control a 2000px

a 2200px

a 2400px

a 2600px

Para mí, 2000px está bastante bien.

También se puede ver que hay una diferencia en la alineación del texto a la izquierda

Para las escenas, aquí está el renderizado en toda la anchura

Personalmente, me parece que es demasiado grande en comparación con el tamaño del menú de arriba.
Los botones Duplicar / Eliminar en la parte superior derecha y los botones Iniciar / Guardar abajo quedarían mejor si los botones de abajo también estuvieran alineados a la derecha.

Un botón para expandir la visualización me parece bien

¡Excelente trabajo! Hablábamos de esto desde hace años, por lo que estoy completamente convencido de su necesidad.

  1. La barra superior también debería seguir el ensanchamiento, tal como está, el resultado es chocante.

  2. Para mí es perfecto, ya sea en 1920 o en 3440, lo encuentro mucho más agradable, y de hecho, algunos widgets quizá no estén aún adaptados, y quizá haya que revisar cada presentación de widget, pero es mucho mejor para la mayoría.

  3. Sin embargo, creo que debería dejarse una pequeña barra a la izquierda y a la derecha.

Por lo demás, muy contento de que te tomes el tiempo para este trabajo.

De mis investigaciones, no era la mejor práctica, pero puedo profundizar más.

Creo que voy a proponer una versión intermedia entre lo que tenemos actualmente en producción (max-width: 1200px) y mi propuesta al principio de este mensaje (max-width: 100%), por ejemplo, un max-width: 1800px o 2000px.

¡Será un primer paso!

Bueno, personalmente yo tengo esto

y solo he cambiado un parámetro:

image

en esta línea

image

He pasado al 90%, pero el 95% también funciona