From 89ffec2b87fcb96cd96c9aa8f9d5c80bae0a18a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 24 Mar 2024 17:02:53 +0100
Subject: [PATCH 1/8] Fix typo in investments stylesheets folder name

The styles were being loaded anyway because we use `budgets/**/*` to
load the stylesheets related to budgets.
---
 .../budgets/{investmentss => investments}/filters.scss            | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename app/assets/stylesheets/budgets/{investmentss => investments}/filters.scss (100%)

diff --git a/app/assets/stylesheets/budgets/investmentss/filters.scss b/app/assets/stylesheets/budgets/investments/filters.scss
similarity index 100%
rename from app/assets/stylesheets/budgets/investmentss/filters.scss
rename to app/assets/stylesheets/budgets/investments/filters.scss

From 0657749ead565087d30b40792b8e961f35a92360 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 24 Mar 2024 17:40:43 +0100
Subject: [PATCH 2/8] Remove unused CSS in admin stylesheet

* The `archived` class isn't used since commit cd982768f
* The `ignored` class isn't used since commit 343025872
* The `count-error` class isn't used since commit bddfee2b8
* The `edit-legislation-draft-version`, `edit-legislation-process` and
  `legislation-questions-answers` classes aren't used since commit
  d679c1eb7
* The `legislation-process-save`, `legislation-question-delete`,
  `legislation-process-version` and `legislation-process-question`
  classes aren't used since commit f8707a73cd
* The `is-featured` class isn't used since e60ffa3c0
* The `on-hover` and `on-hover-block` classes aren't used since commit
  d91388b2b
* The `total-price` class isn't used since commit d0b8fef6b
* The `login-as` class was never used in the first place
---
 app/assets/stylesheets/admin.scss | 117 +-----------------------------
 1 file changed, 1 insertion(+), 116 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 9b500b6af..c1ec1ee29 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -225,47 +225,12 @@ $table-header:   #ecf1f6;
       padding-top: 0;
     }
   }
-
-  .is-featured {
-    margin-top: rem-calc(36);
-  }
 }
 
 .for-print-only {
   display: none;
 }
 
-@include breakpoint(medium) {
-
-  tr {
-
-    .on-hover-block {
-      display: none;
-    }
-
-    &:hover .on-hover-block {
-      display: block;
-      margin: 0;
-      margin-top: calc(#{$line-height} / 2);
-      width: 100%;
-    }
-  }
-}
-
-@include breakpoint(medium) {
-
-  tr {
-
-    .on-hover {
-      display: none;
-    }
-
-    &:hover .on-hover {
-      display: inline;
-    }
-  }
-}
-
 .input-group {
 
   .input-group-button {
@@ -367,16 +332,6 @@ code {
   font-size: $base-font-size;
 }
 
-.archived {
-  color: $text-medium;
-  font-size: rem-calc(12);
-}
-
-.ignored {
-  color: $text-medium;
-  font-size: rem-calc(12);
-}
-
 .rejected {
   color: $delete;
 }
@@ -440,8 +395,7 @@ code {
 // 05. Management
 // --------------
 
-.account-info,
-.login-as {
+.account-info {
   background-color: $highlight;
   border-radius: rem-calc(3);
   font-size: rem-calc(16);
@@ -537,13 +491,6 @@ code {
   }
 }
 
-.investment-projects-summary {
-
-  .total-price {
-    white-space: nowrap;
-  }
-}
-
 .management-list {
   max-width: rem-calc(1200);
 }
@@ -551,12 +498,6 @@ code {
 // 06. Polls
 // -----------------
 
-.count-error {
-  background: $alert-bg !important;
-  color: $color-alert;
-  font-weight: bold;
-}
-
 table {
 
   .callout {
@@ -604,28 +545,12 @@ table {
   height: 99%;
 }
 
-.edit-legislation-draft-version .row {
-  margin-bottom: 2rem;
-}
-
 .legislation-admin {
   .menu .is-active > a {
     background: none;
   }
 }
 
-.legislation-process-save {
-  @include breakpoint(medium) {
-    float: right;
-  }
-}
-
-.legislation-question-delete {
-  @include breakpoint(medium) {
-    text-align: right;
-  }
-}
-
 // 08. CMS
 // --------------
 .cms-page-list {
@@ -636,38 +561,8 @@ table {
   }
 }
 
-.legislation-process-edit {
-
-  .edit-legislation-process {
-
-    small {
-      color: $text-medium;
-    }
-
-    .legislation-process-start,
-    .legislation-process-end {
-      @include breakpoint(medium) {
-        line-height: 3rem;
-      }
-    }
-
-    .legislation-process-end {
-      @include breakpoint(medium) {
-        text-align: right;
-      }
-    }
-  }
-}
-
 .legislation-draft-versions-index {
 
-  .legislation-process-question,
-  .legislation-process-version {
-    @include breakpoint(medium) {
-      text-align: right;
-    }
-  }
-
   table tr td {
     padding: 0.25rem 0.375rem;
   }
@@ -686,10 +581,6 @@ table {
   input::placeholder {
     font-style: italic;
   }
-
-  .legislation-questions-answers {
-    margin-bottom: 1rem;
-  }
 }
 
 .field {
@@ -795,12 +686,6 @@ table {
 
 .legislation-draft-versions-form {
 
-  .legislation-process-version {
-    @include breakpoint(medium) {
-      text-align: right;
-    }
-  }
-
   .control {
     cursor: pointer;
     margin-bottom: 1rem;

From 02aac86b04589e0b1b89cc2a226c85c422152102 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 24 Mar 2024 16:25:06 +0100
Subject: [PATCH 3/8] Move edit password manually view to a component

We're restructuring the CSS of the admin stylesheet, and there was a
rule that is only applied to this component.
---
 app/assets/stylesheets/admin.scss             |  4 ----
 .../account/edit_password_manually.scss       |  3 +++
 .../edit_password_manually_component.html.erb | 22 ++++++++++++++++++
 .../edit_password_manually_component.rb       |  7 ++++++
 .../account/edit_password_manually.html.erb   | 23 +------------------
 5 files changed, 33 insertions(+), 26 deletions(-)
 create mode 100644 app/assets/stylesheets/management/account/edit_password_manually.scss
 create mode 100644 app/components/management/account/edit_password_manually_component.html.erb
 create mode 100644 app/components/management/account/edit_password_manually_component.rb

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index c1ec1ee29..63451fa3b 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -244,10 +244,6 @@ $table-header:   #ecf1f6;
   text-decoration: underline;
 }
 
-.no-margin-bottom {
-  margin-bottom: 0 !important;
-}
-
 .enabled {
   color: $color-success;
 }
diff --git a/app/assets/stylesheets/management/account/edit_password_manually.scss b/app/assets/stylesheets/management/account/edit_password_manually.scss
new file mode 100644
index 000000000..c16816657
--- /dev/null
+++ b/app/assets/stylesheets/management/account/edit_password_manually.scss
@@ -0,0 +1,3 @@
+.no-margin-bottom {
+  margin-bottom: 0 !important;
+}
diff --git a/app/components/management/account/edit_password_manually_component.html.erb b/app/components/management/account/edit_password_manually_component.html.erb
new file mode 100644
index 000000000..d095757e1
--- /dev/null
+++ b/app/components/management/account/edit_password_manually_component.html.erb
@@ -0,0 +1,22 @@
+<h2 class="not-print"><%= t("management.account.menu.reset_password_manually") %></h2>
+
+<%= form_for user, url: change_password_management_account_path do |f| %>
+  <%= f.label :password %>
+  <p class="help-text"><%= t("management.account.edit.password.print_help") %></p>
+  <div class="small-12 medium-6">
+
+    <div class="input-group">
+      <%= f.password_field :password, class: "input-group-field no-margin-bottom", label: false, value: nil %>
+      <span class="input-group-label">
+        <a href="#" class="show-password"><span class="icon-eye"></span></a>
+      </span>
+    </div>
+
+    <%= link_to t("management.account.edit.password.random"),
+                "#",
+                class: "generate-random-value float-right",
+                data: { "password-complexity": User.password_complexity } %>
+  </div>
+
+  <%= f.submit t("management.account.edit.password.save"), class: "button success" %>
+<% end %>
diff --git a/app/components/management/account/edit_password_manually_component.rb b/app/components/management/account/edit_password_manually_component.rb
new file mode 100644
index 000000000..ab3bd1a99
--- /dev/null
+++ b/app/components/management/account/edit_password_manually_component.rb
@@ -0,0 +1,7 @@
+class Management::Account::EditPasswordManuallyComponent < ApplicationComponent
+  attr_reader :user
+
+  def initialize(user)
+    @user = user
+  end
+end
diff --git a/app/views/management/account/edit_password_manually.html.erb b/app/views/management/account/edit_password_manually.html.erb
index b86bafaa8..58b090529 100644
--- a/app/views/management/account/edit_password_manually.html.erb
+++ b/app/views/management/account/edit_password_manually.html.erb
@@ -1,22 +1 @@
-<h2 class="not-print"><%= t("management.account.menu.reset_password_manually") %></h2>
-
-<%= form_for managed_user, url: change_password_management_account_path do |f| %>
-  <%= f.label :password %>
-  <p class="help-text"><%= t("management.account.edit.password.print_help") %></p>
-  <div class="small-12 medium-6">
-
-    <div class="input-group">
-      <%= f.password_field :password, class: "input-group-field no-margin-bottom", label: false, value: nil %>
-      <span class="input-group-label">
-        <a href="#" class="show-password"><span class="icon-eye"></span></a>
-      </span>
-    </div>
-
-    <%= link_to t("management.account.edit.password.random"),
-                "#",
-                class: "generate-random-value float-right",
-                data: { "password-complexity": User.password_complexity } %>
-  </div>
-
-  <%= f.submit t("management.account.edit.password.save"), class: "button success" %>
-<% end %>
+<%= render Management::Account::EditPasswordManuallyComponent.new(managed_user) %>

From b3588b1865595554e72595b971d7b866306b0e78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 24 Mar 2024 16:50:24 +0100
Subject: [PATCH 4/8] Remove no-margin-bottom HTML class

It was only used once, and we can use a selector that makes it obvious
where it is used. Besides, the style for the no-margin-bottom class was
to remove the bottom margin, which was inconsistent with the style for
the no-margin-top class, which adds a negative margin to the element.

I'm not sure why we're removing the margin here, though, since it isn't
consistent with the rest of the forms in the application. For now, we're
keeping it the way it used to look.
---
 .../management/account/edit_password_manually.scss          | 6 ++++--
 .../account/edit_password_manually_component.html.erb       | 4 +++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/management/account/edit_password_manually.scss b/app/assets/stylesheets/management/account/edit_password_manually.scss
index c16816657..581fd2579 100644
--- a/app/assets/stylesheets/management/account/edit_password_manually.scss
+++ b/app/assets/stylesheets/management/account/edit_password_manually.scss
@@ -1,3 +1,5 @@
-.no-margin-bottom {
-  margin-bottom: 0 !important;
+.management-account-edit-password-manually {
+  [type=password] {
+    margin-bottom: 0 !important;
+  }
 }
diff --git a/app/components/management/account/edit_password_manually_component.html.erb b/app/components/management/account/edit_password_manually_component.html.erb
index d095757e1..484974695 100644
--- a/app/components/management/account/edit_password_manually_component.html.erb
+++ b/app/components/management/account/edit_password_manually_component.html.erb
@@ -1,3 +1,5 @@
+<% provide :main_class, "management-account-edit-password-manually" %>
+
 <h2 class="not-print"><%= t("management.account.menu.reset_password_manually") %></h2>
 
 <%= form_for user, url: change_password_management_account_path do |f| %>
@@ -6,7 +8,7 @@
   <div class="small-12 medium-6">
 
     <div class="input-group">
-      <%= f.password_field :password, class: "input-group-field no-margin-bottom", label: false, value: nil %>
+      <%= f.password_field :password, class: "input-group-field", label: false, value: nil %>
       <span class="input-group-label">
         <a href="#" class="show-password"><span class="icon-eye"></span></a>
       </span>

From 111516f66007de67864ac5d5c99967e07c8330fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 24 Mar 2024 17:56:14 +0100
Subject: [PATCH 5/8] Move stats styles to the stats stylesheet

These styles aren't only used in the admin section but also in the
public stats page.
---
 app/assets/stylesheets/admin.scss | 25 -------------------------
 app/assets/stylesheets/stats.scss | 21 +++++++++++++++++++++
 2 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 63451fa3b..2a1a2035a 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -5,7 +5,6 @@
 // 01. Global styles
 // 02. Sidebar
 // 03. List elements
-// 04. Stats
 // 05. Management
 // 06. Polls
 // 07. Legislation
@@ -364,30 +363,6 @@ code {
   }
 }
 
-// 04. Stats
-// ---------
-
-.stats-numbers {
-  p {
-    color: $text-medium;
-    font-size: rem-calc(13);
-    padding: rem-calc(6);
-    text-transform: uppercase;
-
-    &.featured {
-      background: $info-bg;
-      border: 1px solid $info-border;
-      font-weight: bold;
-    }
-
-    .number {
-      color: $body-font-color;
-      font-size: rem-calc(30);
-      font-weight: bold;
-    }
-  }
-}
-
 // 05. Management
 // --------------
 
diff --git a/app/assets/stylesheets/stats.scss b/app/assets/stylesheets/stats.scss
index 9dff64225..55a848fcf 100644
--- a/app/assets/stylesheets/stats.scss
+++ b/app/assets/stylesheets/stats.scss
@@ -173,6 +173,27 @@
   }
 }
 
+.stats-numbers {
+  p {
+    color: $text-medium;
+    font-size: rem-calc(13);
+    padding: rem-calc(6);
+    text-transform: uppercase;
+
+    &.featured {
+      background: $info-bg;
+      border: 1px solid $info-border;
+      font-weight: bold;
+    }
+
+    .number {
+      color: $body-font-color;
+      font-size: rem-calc(30);
+      font-weight: bold;
+    }
+  }
+}
+
 table {
 
   &.survey-districts {

From b6ffeeca62675cdc30b6f98fd44d5862555ad156 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 24 Mar 2024 16:55:45 +0100
Subject: [PATCH 6/8] Move styles from admin to layout

These styles are used in places other than the admin section. In
particular, the `.button.small.success` style is no longer used in the
admin section but only in the verified user form.

Note: I'm not sure whether the `table .callout` selector matches any
element, either in the admin or in the public section, so I'm leaving it
where it was.
---
 app/assets/stylesheets/admin.scss  | 116 ----------------------------
 app/assets/stylesheets/layout.scss | 117 +++++++++++++++++++++++++++++
 2 files changed, 117 insertions(+), 116 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 2a1a2035a..34fa86d32 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -9,7 +9,6 @@
 // 06. Polls
 // 07. Legislation
 // 08. CMS
-// 09. Map
 // 10. Budgets
 // 11. Newsletters
 //
@@ -230,14 +229,6 @@ $table-header:   #ecf1f6;
   display: none;
 }
 
-.input-group {
-
-  .input-group-button {
-    padding-bottom: rem-calc(16);
-    vertical-align: top;
-  }
-}
-
 .sortable thead th:hover {
   cursor: pointer;
   text-decoration: underline;
@@ -247,10 +238,6 @@ $table-header:   #ecf1f6;
   color: $color-success;
 }
 
-.disabled {
-  color: $text-medium;
-}
-
 .icon-sortable {
   font-family: "Font Awesome 5 Free";
   font-size: $small-font-size;
@@ -309,24 +296,6 @@ code {
 // 03. List elements
 // -----------------
 
-.delete {
-  border-bottom: 1px dotted;
-  color: $delete;
-  font-size: $small-font-size;
-
-  &:hover,
-  &:active,
-  &:focus {
-    border-bottom-color: transparent;
-    color: color.adjust($delete, $lightness: -10%);
-  }
-}
-
-[class^="icon-"].delete {
-  border: 0;
-  font-size: $base-font-size;
-}
-
 .rejected {
   color: $delete;
 }
@@ -344,14 +313,6 @@ code {
   padding: rem-calc(6) rem-calc(12);
 }
 
-.button.small.success {
-  margin-left: rem-calc(12);
-
-  &.no-margin {
-    margin-left: 0;
-  }
-}
-
 .moderation-description {
   max-height: rem-calc(65);
   max-width: rem-calc(700);
@@ -554,35 +515,6 @@ table {
   }
 }
 
-.field {
-  margin-bottom: 1rem;
-
-  @include breakpoint(medium) {
-    margin-bottom: 0;
-  }
-
-  a {
-    color: $delete;
-    line-height: 3rem;
-
-    span {
-      text-decoration: underline;
-    }
-
-    .icon-x {
-      line-height: 0;
-      text-decoration: none;
-      vertical-align: sub;
-    }
-
-    &:active,
-    &:focus,
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}
-
 .fullscreen-container {
 
   a {
@@ -761,54 +693,6 @@ table {
   }
 }
 
-// 09. Map
-// --------------
-
-.map {
-  height: 350px;
-  width: 100%;
-
-  .map-marker {
-    left: 50%;
-    margin-top: -5px;
-    position: absolute;
-    top: 50%;
-    visibility: visible;
-
-    .map-icon {
-      background: #00cae9;
-      border-radius: 50% 50% 50% 0;
-      height: 30px;
-      transform: rotate(-45deg);
-      width: 30px;
-    }
-
-    .map-icon::after {
-      background: #fff;
-      border-radius: 50%;
-      content: "";
-      height: 14px;
-      margin: 8px 0 0 8px;
-      position: absolute;
-      width: 14px;
-    }
-  }
-
-  .map-attributtion {
-    height: auto;
-    visibility: visible;
-  }
-}
-
-.map-marker {
-  visibility: hidden;
-}
-
-.map-attributtion {
-  height: 0;
-  visibility: hidden;
-}
-
 // 10. Budgets
 // -----------------
 
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 192baa5c2..6f3cd02e1 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -10,6 +10,7 @@
 // 06. Forms
 // 07. Callout
 // 08. User account
+// 09. Map
 // 10. Official levels
 // 11. Tables
 // 12. Social
@@ -487,6 +488,25 @@ button,
   }
 }
 
+.delete {
+  border-bottom: 1px dotted;
+  color: $delete;
+  font-size: $small-font-size;
+
+  &:hover,
+  &:active,
+  &:focus {
+    border-bottom-color: transparent;
+    color: color.adjust($delete, $lightness: -10%);
+  }
+}
+
+[class^="icon-"].delete {
+  border: 0;
+  font-size: $base-font-size;
+}
+
+
 // 02. Header
 // ----------
 
@@ -934,6 +954,55 @@ form {
   }
 }
 
+.input-group {
+
+  .input-group-button {
+    padding-bottom: rem-calc(16);
+    vertical-align: top;
+  }
+}
+
+.disabled {
+  color: $text-medium;
+}
+
+.button.small.success {
+  margin-left: rem-calc(12);
+
+  &.no-margin {
+    margin-left: 0;
+  }
+}
+
+.field {
+  margin-bottom: 1rem;
+
+  @include breakpoint(medium) {
+    margin-bottom: 0;
+  }
+
+  a {
+    color: $delete;
+    line-height: 3rem;
+
+    span {
+      text-decoration: underline;
+    }
+
+    .icon-x {
+      line-height: 0;
+      text-decoration: none;
+      vertical-align: sub;
+    }
+
+    &:active,
+    &:focus,
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+
 .translatable-fields {
 
   &.highlight {
@@ -1180,6 +1249,54 @@ form {
   }
 }
 
+// 09. Map
+// -------
+
+.map {
+  height: 350px;
+  width: 100%;
+
+  .map-marker {
+    left: 50%;
+    margin-top: -5px;
+    position: absolute;
+    top: 50%;
+    visibility: visible;
+
+    .map-icon {
+      background: #00cae9;
+      border-radius: 50% 50% 50% 0;
+      height: 30px;
+      transform: rotate(-45deg);
+      width: 30px;
+    }
+
+    .map-icon::after {
+      background: #fff;
+      border-radius: 50%;
+      content: "";
+      height: 14px;
+      margin: 8px 0 0 8px;
+      position: absolute;
+      width: 14px;
+    }
+  }
+
+  .map-attributtion {
+    height: auto;
+    visibility: visible;
+  }
+}
+
+.map-marker {
+  visibility: hidden;
+}
+
+.map-attributtion {
+  height: 0;
+  visibility: hidden;
+}
+
 // 10. Officials levels
 // --------------------
 

From 4646c056a7255c0bfe8dbc2cdf51af71dcb60383 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 24 Mar 2024 04:26:38 +0100
Subject: [PATCH 7/8] Compile vendored CSS in a different stylesheet

With this change, on my browser, reloading a page in development after
changing a CSS file is about 10%-15% faster.

On the minus side, this change results in an extra request when browsing
the page; AFAIK it isn't that big of a deal, even when the server isn't
using HTTP/2.
---
 app/assets/config/manifest.js                 |  2 +
 app/assets/stylesheets/application.scss       | 12 -----
 .../stylesheets/foundation_and_overrides.scss | 40 --------------
 app/assets/stylesheets/vendored-rtl.scss      |  3 ++
 app/assets/stylesheets/vendored.scss          | 53 +++++++++++++++++++
 app/views/layouts/_common_head.html.erb       |  2 +
 6 files changed, 60 insertions(+), 52 deletions(-)
 create mode 100644 app/assets/stylesheets/vendored-rtl.scss
 create mode 100644 app/assets/stylesheets/vendored.scss

diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
index 3bc6e3f23..f4b547003 100644
--- a/app/assets/config/manifest.js
+++ b/app/assets/config/manifest.js
@@ -4,6 +4,8 @@
 //= link_tree ../images
 //= link application.css
 //= link application-rtl.css
+//= link vendored.css
+//= link vendored-rtl.css
 //= link application.js
 //
 //= link ckeditor/config.js
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index e949d2e61..a6fdf6d98 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -1,20 +1,8 @@
-@import "amsify.suggestags";
-@import "annotator.min";
-@import "c3";
-@import "social-share-button";
 @import "font-awesome-sprockets";
 @import "font-awesome/variables";
 @import "font-awesome/path";
 @import "font-awesome/mixins";
 @import "font-awesome/core";
-@import "jquery-ui/themes/base/theme";
-@import "jquery-ui/themes/base/autocomplete";
-@import "jquery-ui/themes/base/datepicker";
-@import "jquery-ui/themes/base/sortable";
-@import "leaflet/dist/leaflet";
-@import "leaflet.markercluster/dist/MarkerCluster";
-@import "leaflet.markercluster/dist/MarkerCluster.Default";
-
 @import "foundation_and_overrides";
 @import "fonts";
 @import "icons";
diff --git a/app/assets/stylesheets/foundation_and_overrides.scss b/app/assets/stylesheets/foundation_and_overrides.scss
index 121b037ef..b60258b98 100644
--- a/app/assets/stylesheets/foundation_and_overrides.scss
+++ b/app/assets/stylesheets/foundation_and_overrides.scss
@@ -8,43 +8,3 @@
 @import "foundation-sites/scss/foundation";
 
 @import "motion-ui/motion-ui";
-
-@include foundation-global-styles;
-// @include foundation-xy-grid-classes;
-@include foundation-grid;
-// @include foundation-flex-grid;
-// @include foundation-flex-classes;
-@include foundation-typography;
-@include foundation-forms;
-@include foundation-button;
-@include foundation-accordion;
-@include foundation-accordion-menu;
-@include foundation-badge;
-@include foundation-breadcrumbs;
-@include foundation-button-group;
-@include foundation-callout;
-@include foundation-card;
-@include foundation-close-button;
-@include foundation-menu;
-@include foundation-menu-icon;
-@include foundation-drilldown-menu;
-@include foundation-dropdown;
-@include foundation-dropdown-menu;
-@include foundation-responsive-embed;
-@include foundation-label;
-@include foundation-media-object;
-@include foundation-orbit;
-@include foundation-pagination;
-@include foundation-progress-bar;
-@include foundation-slider;
-@include foundation-sticky;
-@include foundation-reveal;
-@include foundation-switch;
-@include foundation-table;
-@include foundation-tabs;
-@include foundation-thumbnail;
-@include foundation-tooltip;
-@include foundation-visibility-classes;
-@include foundation-float-classes;
-@include motion-ui-transitions;
-@include motion-ui-animations;
diff --git a/app/assets/stylesheets/vendored-rtl.scss b/app/assets/stylesheets/vendored-rtl.scss
new file mode 100644
index 000000000..7d9ecf666
--- /dev/null
+++ b/app/assets/stylesheets/vendored-rtl.scss
@@ -0,0 +1,3 @@
+$global-text-direction: rtl;
+
+@import "vendored";
diff --git a/app/assets/stylesheets/vendored.scss b/app/assets/stylesheets/vendored.scss
new file mode 100644
index 000000000..a581201e8
--- /dev/null
+++ b/app/assets/stylesheets/vendored.scss
@@ -0,0 +1,53 @@
+@import "amsify.suggestags";
+@import "annotator.min";
+@import "c3";
+@import "social-share-button";
+@import "jquery-ui/themes/base/theme";
+@import "jquery-ui/themes/base/autocomplete";
+@import "jquery-ui/themes/base/datepicker";
+@import "jquery-ui/themes/base/sortable";
+@import "leaflet/dist/leaflet";
+@import "leaflet.markercluster/dist/MarkerCluster";
+@import "leaflet.markercluster/dist/MarkerCluster.Default";
+
+@import "foundation_and_overrides";
+
+@include foundation-global-styles;
+// @include foundation-xy-grid-classes;
+@include foundation-grid;
+// @include foundation-flex-grid;
+// @include foundation-flex-classes;
+@include foundation-typography;
+@include foundation-forms;
+@include foundation-button;
+@include foundation-accordion;
+@include foundation-accordion-menu;
+@include foundation-badge;
+@include foundation-breadcrumbs;
+@include foundation-button-group;
+@include foundation-callout;
+@include foundation-card;
+@include foundation-close-button;
+@include foundation-menu;
+@include foundation-menu-icon;
+@include foundation-drilldown-menu;
+@include foundation-dropdown;
+@include foundation-dropdown-menu;
+@include foundation-responsive-embed;
+@include foundation-label;
+@include foundation-media-object;
+@include foundation-orbit;
+@include foundation-pagination;
+@include foundation-progress-bar;
+@include foundation-slider;
+@include foundation-sticky;
+@include foundation-reveal;
+@include foundation-switch;
+@include foundation-table;
+@include foundation-tabs;
+@include foundation-thumbnail;
+@include foundation-tooltip;
+@include foundation-visibility-classes;
+@include foundation-float-classes;
+@include motion-ui-transitions;
+@include motion-ui-animations;
diff --git a/app/views/layouts/_common_head.html.erb b/app/views/layouts/_common_head.html.erb
index f78fe6d8d..137e2a84e 100644
--- a/app/views/layouts/_common_head.html.erb
+++ b/app/views/layouts/_common_head.html.erb
@@ -4,8 +4,10 @@
 <meta name="generator" content="Zurb Foundation for Sites 6" class="foundation-mq">
 <title><%= content_for?(:title) ? yield(:title) : default_title %></title>
 <% if rtl? %>
+  <%= stylesheet_link_tag "vendored-rtl" %>
   <%= stylesheet_link_tag "application-rtl" %>
 <% else %>
+  <%= stylesheet_link_tag "vendored" %>
   <%= stylesheet_link_tag "application" %>
 <% end %>
 <%= javascript_include_tag "application", "data-turbolinks-track" => "reload" %>

From e5bfb92564935003943e8684133da2d83634915a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 24 Mar 2024 05:34:22 +0100
Subject: [PATCH 8/8] Compile admin CSS in a different stylesheet

With this change, on my browser, reloading a page in development after
changing a CSS file is about 25% faster than simply splitting the CSS
code between `application.css` and `vendored.css`. Compared to using
only one `application.css` file containing everything, reloading a page
in development is about 35% faster.

The combined size of all the generated stylesheets is now about 0.5%
bigger. Not sure why (maybe placeholder selectors?), but the difference
is negligible.

Note that we could load the `administration.css` file only in the admin
area, reducing the size of the page for people accessing the public
area. However, the size of this stylesheet (compressed) is 28K, which is
less than 3% of the overall size of a page and, on the other hand,
there's a risk of some styles no longer being applied because we might
have overlooked the fact that some styles in the `administration.css`
are also applied to the public area.

So, for now, we're still loading the administration styles in the public
area. We might reconsider in the future.
---
 app/assets/config/manifest.js                    |  2 ++
 app/assets/stylesheets/administration-rtl.scss   |  3 +++
 app/assets/stylesheets/administration.scss       |  3 +++
 app/assets/stylesheets/application.scss          | 11 +----------
 app/assets/stylesheets/dashboard_poster.scss     |  6 +-----
 app/assets/stylesheets/mixins_and_variables.scss |  8 ++++++++
 app/views/layouts/_common_head.html.erb          |  2 ++
 7 files changed, 20 insertions(+), 15 deletions(-)
 create mode 100644 app/assets/stylesheets/administration-rtl.scss
 create mode 100644 app/assets/stylesheets/administration.scss
 create mode 100644 app/assets/stylesheets/mixins_and_variables.scss

diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
index f4b547003..7c90a34ed 100644
--- a/app/assets/config/manifest.js
+++ b/app/assets/config/manifest.js
@@ -4,6 +4,8 @@
 //= link_tree ../images
 //= link application.css
 //= link application-rtl.css
+//= link administration.css
+//= link administration-rtl.css
 //= link vendored.css
 //= link vendored-rtl.css
 //= link application.js
diff --git a/app/assets/stylesheets/administration-rtl.scss b/app/assets/stylesheets/administration-rtl.scss
new file mode 100644
index 000000000..e839730bb
--- /dev/null
+++ b/app/assets/stylesheets/administration-rtl.scss
@@ -0,0 +1,3 @@
+$global-text-direction: rtl;
+
+@import "administration";
diff --git a/app/assets/stylesheets/administration.scss b/app/assets/stylesheets/administration.scss
new file mode 100644
index 000000000..f87ed692d
--- /dev/null
+++ b/app/assets/stylesheets/administration.scss
@@ -0,0 +1,3 @@
+@import "mixins_and_variables";
+@import "admin";
+@import "admin/**/*";
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index a6fdf6d98..202e903de 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -1,15 +1,7 @@
-@import "font-awesome-sprockets";
-@import "font-awesome/variables";
-@import "font-awesome/path";
-@import "font-awesome/mixins";
-@import "font-awesome/core";
-@import "foundation_and_overrides";
+@import "mixins_and_variables";
 @import "fonts";
 @import "icons";
-@import "functions/*";
-@import "mixins/*";
 
-@import "admin";
 @import "annotator_overrides";
 @import "autocomplete_overrides";
 @import "datepicker_overrides";
@@ -27,7 +19,6 @@
 @import "sticky_overrides";
 @import "tags";
 @import "account/**/*";
-@import "admin/**/*";
 @import "budgets/**/*";
 @import "comments/**/*";
 @import "debates/**/*";
diff --git a/app/assets/stylesheets/dashboard_poster.scss b/app/assets/stylesheets/dashboard_poster.scss
index 620458dbd..1c450d991 100644
--- a/app/assets/stylesheets/dashboard_poster.scss
+++ b/app/assets/stylesheets/dashboard_poster.scss
@@ -1,6 +1,2 @@
-@import "font-awesome/variables";
-@import "font-awesome/mixins";
-@import "font-awesome/core";
-@import "foundation_and_overrides";
-@import "mixins/*";
+@import "mixins_and_variables";
 @import "dashboard";
diff --git a/app/assets/stylesheets/mixins_and_variables.scss b/app/assets/stylesheets/mixins_and_variables.scss
new file mode 100644
index 000000000..2915aabef
--- /dev/null
+++ b/app/assets/stylesheets/mixins_and_variables.scss
@@ -0,0 +1,8 @@
+@import "font-awesome-sprockets";
+@import "font-awesome/variables";
+@import "font-awesome/path";
+@import "font-awesome/mixins";
+@import "font-awesome/core";
+@import "foundation_and_overrides";
+@import "functions/*";
+@import "mixins/*";
diff --git a/app/views/layouts/_common_head.html.erb b/app/views/layouts/_common_head.html.erb
index 137e2a84e..8e7dbf587 100644
--- a/app/views/layouts/_common_head.html.erb
+++ b/app/views/layouts/_common_head.html.erb
@@ -6,9 +6,11 @@
 <% if rtl? %>
   <%= stylesheet_link_tag "vendored-rtl" %>
   <%= stylesheet_link_tag "application-rtl" %>
+  <%= stylesheet_link_tag "administration-rtl" %>
 <% else %>
   <%= stylesheet_link_tag "vendored" %>
   <%= stylesheet_link_tag "application" %>
+  <%= stylesheet_link_tag "administration" %>
 <% end %>
 <%= javascript_include_tag "application", "data-turbolinks-track" => "reload" %>
 <%= csrf_meta_tags %>