estructura a dos columnas y esquema de colores

app/assets/stylesheets/application.scss

@@ -1,19 +1,33 @@
 //= require_tree .
 
+@import "bootstrap";
+
 $black: black;
 $white: white;
 $grey: grey;
 $cyan: #13fefe;
 $magenta: #f206f9;
 
+:root {
+  --foreground: #{$black};
+  --background: #{$white};
+  --color: #{$magenta};
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground: #{$white};
+    --background: #{$black};
+    --color: #{$cyan};
+  }
+}
+
 // TODO: Encontrar la forma de generar esto desde los locales de Rails
 $custom-file-text: (
   en: 'Browse',
   es: 'Buscar archivo'
 );
 
-@import "bootstrap";
-
 @font-face {
   font-family: 'Saira';
   font-style: normal;
@@ -34,9 +48,17 @@ $custom-file-text: (
 
 body {
   font-family: Saira, sans-serif;
+  background-color: var(--background);
+  color: var(--foreground);
 }
 
 a {
+  color: var(--color);
+
+  &:hover {
+    color: var(--color);
+  }
+
   &[target=_blank] {
     /* TODO: Convertir a base64 para no hacer peticiones extra */
     &:after {
@@ -145,52 +167,6 @@ textarea.post-content {
   transition: all 3s;
 }
 
-/* Select2 Bootstrap4 Validation */
-
-.was-validated {
-  .form-control {
-    &:invalid {
-      ~ .select2-container--bootstrap {
-        border: 1px solid #dc3545;
-        border-radius: 0.25rem;
-
-        .select2-dropdown {
-          border: 1px solid #dc3545;
-          border-radius: 0.25rem;
-        }
-      }
-    }
-    &:valid {
-      ~ .select2-container--bootstrap {
-        border: 1px solid #28a745;
-        border-radius: 0.25rem;
-
-        .select2-dropdown {
-          border: 1px solid #28a745;
-          border-radius: 0.25rem;
-        }
-      }
-    }
-  }
-}
-
-.field-groups {
-  .field-group {
-    .remove-group {
-      display: none
-    }
-  }
-
-  .extra {
-    border-top: 1px solid lightgray;
-    padding-top: 1rem;
-
-    .remove-group {
-      display: inline-block;
-    }
-  }
-}
-
 .taggable {
   .input-tag {
     legend {
@@ -223,27 +199,27 @@ textarea.post-content {
 
 svg {
   .is-path-magenta {
-    fill: $black
+    fill: var(--foreground);
   }
 }
 
 .btn {
-  background-color: $black;
+  background-color: var(--foreground);
-  color: $white;
+  color: var(--background);
   border: none;
   border-radius: 0;
 
   &:hover {
-    color: $white;
+    color: var(--background);
-    background-color: $magenta;
+    background-color: var(--color);
   }
 
   &:active {
-    background-color: $magenta;
+    background-color: var(--color);
   }
 
   &:focus {
-    box-shadow: 0 0 0 0.2rem $magenta;
+    box-shadow: 0 0 0 0.2rem var(--color);
   }
 }
 

app/models/site.rb

@@ -60,6 +60,18 @@ class Site < ApplicationRecord
     @repository ||= Site::Repository.new path
   end
 
+  def hostname
+    if name.ends_with? '.'
+      name.gsub(/\.\Z/, '')
+    else
+      "#{name}.#{Site.domain}"
+    end
+  end
+
+  def url
+    "https://#{hostname}/"
+  end
+
   # TODO: Mover esta consulta a la base de datos para no traer un montón
   # de cosas a la memoria
   def invitade?(usuarie)

app/views/layouts/_breadcrumb.haml

@@ -22,7 +22,8 @@
   - if current_usuarie
     %ul.navbar-nav
       %li.nav-item
-        = link_to t('.mutual_aid'), mutual_aid_url(local_channel)
+        = link_to t('.mutual_aid'), mutual_aid_url(local_channel),
+          class: 'btn'
       %li.nav-item
         = link_to t('.logout'), destroy_usuarie_session_path,
           method: :delete, role: 'button', class: 'btn'

app/views/layouts/application.html.haml

@@ -1,8 +1,12 @@
 !!!
 %html{ lang: I18n.locale, dir: t('dir') }
   %head
+    %meta{ charset: 'UTF-8' }/
     %meta{ content: 'text/html; charset=UTF-8',
            'http-equiv': 'Content-Type' }/
+    %meta{ name: 'color-scheme', content: 'light dark' }/
+    %meta{ name: 'viewport',
+           content: 'width=device-width, initial-scale=1.0' }/
     %title Sutty
 
     = csrf_meta_tags

app/views/posts/index.haml

@@ -5,18 +5,22 @@
     site_posts_path(@site)),
     @category]
 
-.row
+%main.row
-  .col
+  %aside.col-md-3
-    %h1= @site.title
+    %h1
+      = link_to @site.title, @site.url
+    %p.lead= @site.description
 
-.row
+    = link_to t('posts.new'), new_site_post_path(@site),
-  .col
+      class: 'btn'
-    .btn-group
-      = link_to t('posts.new'), new_site_post_path(@site),
-        class: 'btn'
 
-.row
+    - if policy(@site).edit?
-  .col
+      = link_to t('sites.edit.btn', site: @site.title),
+        edit_site_path(@site), class: 'btn'
+
+    = render 'sites/build', site: @site
+
+  %section.col
     = render 'layouts/flash'
     - if @posts.present?
       .row

app/views/sites/_build.haml

@@ -0,0 +1,15 @@
+- if policy(site).build?
+  - if site.enqueued?
+    = render 'layouts/btn_with_tooltip',
+      tooltip: t('help.sites.enqueued'),
+      text: t('.enqueued'),
+      type: 'secondary',
+      link: nil
+  - else
+    = form_tag site_enqueue_path(site),
+      method: :post, class: 'form-inline' do
+      = button_tag type: 'submit',
+        class: 'btn no-border-radius',
+        title: t('help.sites.enqueue'),
+        data: { toggle: 'tooltip' } do
+        = t('sites.enqueue')

app/views/sites/index.haml

@@ -1,13 +1,14 @@
 = render 'layouts/breadcrumb', crumbs: [t('sites.index.title')]
 
-.row
+%main.row
-  .col
+  %aside.col-md-3
-    %h1
+    %h1= t('.title')
-      = t('.title')
+    %p.lead= t('.help')
-      - if policy(Site).new?
+    - if policy(Site).new?
-        = link_to t('sites.new.title'), new_site_path,
+      = link_to t('sites.new.title'), new_site_path,
-          class: 'btn'
+        class: 'btn'
 
+  %section.col
     %table.table.table-condensed
       %tbody
         - @sites.each do |site|
@@ -18,63 +19,43 @@
                   = link_to site.name, site_path(site)
                 - else
                   = site.name
-                - if site.invitade? current_usuarie
-                  %span.badge.badge-warning{ data: { toggle: 'tooltip' },
-                    title: t('help.sites.invitade') }
-                    = t('.invitade')
               %br
-                .btn-group{ role: 'group',
+              - if current_usuarie.rol_for_site(site).temporal
-                  'aria-label': t('sites.actions') }
+                = button_to t('sites.invitations.accept'),
-                  - if current_usuarie.rol_for_site(site).temporal
+                  site_usuaries_accept_invitation_path(site),
-                    = button_to t('sites.invitations.accept'),
+                  data: { toggle: 'tooltip' },
-                      site_usuaries_accept_invitation_path(site),
+                  title: t('help.sites.invitations.accept'),
-                      data: { toggle: 'tooltip' },
+                  method: :patch,
-                      title: t('help.sites.invitations.accept'),
+                  class: 'btn'
-                      method: :patch,
+                = button_to t('sites.invitations.reject'),
-                      class: 'btn'
+                  site_usuaries_reject_invitation_path(site),
-                    = button_to t('sites.invitations.reject'),
+                  data: { toggle: 'tooltip' },
-                      site_usuaries_reject_invitation_path(site),
+                  title: t('help.sites.invitations.reject'),
-                      data: { toggle: 'tooltip' },
+                  method: :patch,
-                      title: t('help.sites.invitations.reject'),
+                  class: 'btn'
-                      method: :patch,
+              - else
-                      class: 'btn'
+                - if policy(site).show?
-                  - else
+                  = render 'layouts/btn_with_tooltip',
-                    - if policy(site).show?
+                    tooltip: t('help.sites.edit_posts'),
-                      = render 'layouts/btn_with_tooltip',
+                    type: 'success',
-                        tooltip: t('help.sites.edit_posts'),
+                    link: site_path(site),
-                        type: 'success',
+                    text: t('sites.posts')
-                        link: site_path(site),
+                - if policy(SiteTranslation.new(site)).edit?
-                        text: t('sites.posts')
+                  = render 'layouts/btn_with_tooltip',
-                    - if policy(SiteTranslation.new(site)).edit?
+                    tooltip: t('help.sites.edit_translations'),
-                      = render 'layouts/btn_with_tooltip',
+                    text: t('i18n.edit'),
-                        tooltip: t('help.sites.edit_translations'),
+                    type: 'info',
-                        text: t('i18n.edit'),
+                    link: site_i18n_edit_path(site)
-                        type: 'info',
+                - if policy(SiteUsuarie.new(site, current_usuarie)).index?
-                        link: site_i18n_edit_path(site)
+                  = render 'layouts/btn_with_tooltip',
-                    - if policy(SiteUsuarie.new(site, current_usuarie)).index?
+                    tooltip: t('usuaries.index.help.self'),
-                      = render 'layouts/btn_with_tooltip',
+                    text: t('usuaries.index.title'),
-                        tooltip: t('usuaries.index.help.self'),
+                    type: 'info',
-                        text: t('usuaries.index.title'),
+                    link: site_usuaries_path(site)
-                        type: 'info',
+                - if policy(site).pull? && site.repository.needs_pull?
-                        link: site_usuaries_path(site)
+                  = render 'layouts/btn_with_tooltip',
-                    - if policy(site).pull? && site.repository.needs_pull?
+                    tooltip: t('help.sites.pull'),
-                      = render 'layouts/btn_with_tooltip',
+                    text: t('.pull'),
-                        tooltip: t('help.sites.pull'),
+                    type: 'info',
-                        text: t('.pull'),
+                    link: site_pull_path(site)
-                        type: 'info',
+                = render 'sites/build', site: site
-                        link: site_pull_path(site)
-                    - if policy(site).build?
-                      - if site.enqueued?
-                        = render 'layouts/btn_with_tooltip',
-                          tooltip: t('help.sites.enqueued'),
-                          text: t('.enqueued'),
-                          type: 'secondary',
-                          link: nil
-                      - else
-                        = form_tag site_enqueue_path(site),
-                          method: :post, class: 'form-inline' do
-                          = button_tag type: 'submit',
-                            class: 'btn no-border-radius',
-                            title: t('help.sites.enqueue'),
-                            data: { toggle: 'tooltip' } do
-                            = t('sites.enqueue')

config/locales/es.yml

@@ -161,6 +161,7 @@ es:
       invitations:
         accept: 'Alguien te invitó a colaborar en su sitio.  Si aceptas la invitación, tendrás acceso a este sitio.'
         reject: 'Si rechazas la invitación, no tendrás acceso.'
+      pull: 'Tienes actualizaciones pendientes :)'
     close: 'Cerrar ayuda'
     markdown:
       intro: 'El formato del texto se llama Markdown.  Es un formato
@@ -234,13 +235,14 @@ es:
     index:
       title: 'Sitios'
       pull: 'Actualizar'
+      help: 'Este es el listado de sitios que puedes editar'
     repository:
       config: 'Cambios en la configuración'
     actions: 'Acciones'
     posts: 'Ver y editar artículos'
     title: 'Sitios'
-    enqueued: 'Esperando compilación'
+    enqueued: 'Esperando publicación'
-    enqueue: 'Compilar'
+    enqueue: 'Publicar todos los cambios'
     failed: '¡Falló!'
     build_log: 'Ver registro'
     invitations:
@@ -252,6 +254,7 @@ es:
     edit:
       title: 'Editar %{site}'
       submit: 'Guardar cambios'
+      btn: 'Configuración'
     form:
       errors:
         title: Hay errores y no pudimos guardar tus cambios :(