sistema de diseño de rastrillo

Un resumen de todo lo que ofrece el sistema de diseño. Tema: signal. Idioma: Español.

Ruta

Las piezas que son una respuesta entera y no un trozo de una.

Elementos de interfaz ya hechos y coherentes entre sí, renderizados en el servidor.

El vocabulario del propio framework los llama partials: ui.Templates() devuelve partials, y docs/site/templates.md los documenta con ese nombre. La palabra de esta página cambió; la del código, no.

Los enlaces aquí no están activos

Enlaces inactivos; se facilita el código del ejemplo.

Cada ejemplo de abajo va en su propio marco.

El contenido de ejemplo está en inglés. Los armazones de ejemplo sí están traducidos.

error-page

El cuerpo completo de una respuesta de error: el estado, una frase honesta, una vía de vuelta y referencias de 500 que un administrador puede usar.

404 — no encontrado

Escritorio Móvil Código

<div rst-error>
  <p rst-error-status>404</p>
  <h1 rst-error-title>No encontramos esa página</h1>
  <p rst-error-body>Puede que el enlace esté desactualizado o que la página se haya movido. Comprueba la dirección o vuelve al inicio.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Página de inicio</a></p>
</div>

403 — prohibido

Escritorio Móvil Código

<div rst-error>
  <p rst-error-status>403</p>
  <h1 rst-error-title>No puedes ver esto</h1>
  <p rst-error-body>Tu cuenta no tiene acceso aquí. Si crees que debería tenerlo, pregunta a quien gestiona este sitio.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Página de inicio</a> <a rst-btn href="/posts">Volver</a></p>
</div>

422 — no procesable

Escritorio Móvil Código

<div rst-error>
  <p rst-error-status>422</p>
  <h1 rst-error-title>Eso no se ha enviado</h1>
  <p rst-error-body>Algo de lo que se envió no era correcto. Vuelve atrás e inténtalo de nuevo; no se ha guardado nada.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Página de inicio</a> <a rst-btn href="/posts/1/edit">Volver</a></p>
</div>

500 — error del servidor

Escritorio Móvil Código

<div rst-error>
  <p rst-error-status>500</p>
  <h1 rst-error-title>Algo ha fallado por nuestra parte</h1>
  <p rst-error-body>No es culpa tuya. El problema ha quedado registrado. Inténtalo de nuevo en un momento; si sigue ocurriendo, indica la referencia de abajo.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Página de inicio</a></p>
  <p class="rst-mono" rst-error-ref dir="auto">Referencia: k3f9tq</p>
</div>

El 500 es el único estado con referencia: quien opera el sistema puede buscarla con grep en los registros.

503 — no disponible

Escritorio Móvil Código

<div rst-error>
  <p rst-error-status>503</p>
  <h1 rst-error-title>No estamos disponibles temporalmente</h1>
  <p rst-error-body>El sitio se está actualizando o está ocupado. Inténtalo de nuevo en un minuto.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Página de inicio</a></p>
</div>

Cualquier otro caso: el par genérico

Escritorio Móvil Código

<div rst-error>
  <p rst-error-status>418</p>
  <h1 rst-error-title>Algo no va bien</h1>
  <p rst-error-body>No se ha podido completar esa solicitud. Vuelve atrás e inténtalo de nuevo.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Página de inicio</a></p>
</div>

Cinco estados están redactados en el catálogo del framework. Un sexto recurre al par genérico en vez de mostrarle a alguien el nombre de una clave que falta.

back-nav

El enlace para subir un nivel, encima de una pantalla de detalle o de edición.

Volver a un registro

Escritorio Móvil Código

<nav rst-back-nav><a href="/orders/1">← Order AB3PX</a></nav>

locale-menu

El selector de idioma: un menú details con formularios POST de un solo campo hacia /_locale, para que la elección quede en la cookie de idioma y quien lee se mantenga en la misma ruta.

Doce idiomas, con el actual resaltado.

Escritorio Móvil Código

<details rst-dropdown rst-locale name="rst-menus">
  <summary>Idioma<span rst-caret aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span></summary>
  <div rst-dropdown-menu>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="en"><input type="hidden" name="return" value="/"><button type="submit" lang="en">English</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ga"><input type="hidden" name="return" value="/"><button type="submit" lang="ga">Gaeilge</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="zh-Hans"><input type="hidden" name="return" value="/"><button type="submit" lang="zh-Hans">简体中文</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="es"><input type="hidden" name="return" value="/"><button type="submit" lang="es" aria-current="true">Español</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="hi"><input type="hidden" name="return" value="/"><button type="submit" lang="hi">हिन्दी</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="pt"><input type="hidden" name="return" value="/"><button type="submit" lang="pt">Português</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="bn"><input type="hidden" name="return" value="/"><button type="submit" lang="bn">বাংলা</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ru"><input type="hidden" name="return" value="/"><button type="submit" lang="ru">Русский</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ja"><input type="hidden" name="return" value="/"><button type="submit" lang="ja">日本語</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="yue"><input type="hidden" name="return" value="/"><button type="submit" lang="yue">廣東話</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="vi"><input type="hidden" name="return" value="/"><button type="submit" lang="vi">Tiếng Việt</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ar"><input type="hidden" name="return" value="/"><button type="submit" lang="ar">العربية</button></form>
  </div>
</details>

Este envía a /_locale, lo que exigiría un servidor. El selector de la cabecera de esta página es la versión hecha solo con enlaces.