consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #5818 from consuldemocracy/split_vendored_css

Browse Source 
Extract CSS files for vendored and admin styles
This commit is contained in:
Javi Martín
2025-01-08 20:35:08 +01:00
committed by GitHub
parent ed1713d5e2 e5bfb92564
commit 7204b8bbec
18 changed files with 256 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/config/manifest.js
View File

@@ -4,6 +4,10 @@
//= 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
//
//= link ckeditor/config.js

262
app/assets/stylesheets/admin.scss
View File

@@ -5,12 +5,10 @@
// 01. Global styles
// 02. Sidebar
// 03. List elements
// 04. Stats
// 05. Management
// 06. Polls
// 07. Legislation
// 08. CMS
// 09. Map
// 10. Budgets
// 11. Newsletters
//
@@ -225,72 +223,21 @@ $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 {
padding-bottom: rem-calc(16);
vertical-align: top;
}
}
.sortable thead th:hover {
cursor: pointer;
text-decoration: underline;
}
.no-margin-bottom {
margin-bottom: 0 !important;
}
.enabled {
color: $color-success;
}
.disabled {
color: $text-medium;
}
.icon-sortable {
font-family: "Font Awesome 5 Free";
font-size: $small-font-size;
@@ -349,34 +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;
}
.archived {
color: $text-medium;
font-size: rem-calc(12);
}
.ignored {
color: $text-medium;
font-size: rem-calc(12);
}
.rejected {
color: $delete;
}
@@ -394,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);
@@ -413,35 +324,10 @@ 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
// --------------
.account-info,
.login-as {
.account-info {
background-color: $highlight;
border-radius: rem-calc(3);
font-size: rem-calc(16);
@@ -537,13 +423,6 @@ code {
}
}
.investment-projects-summary {
.total-price {
white-space: nowrap;
}
}
.management-list {
max-width: rem-calc(1200);
}
@@ -551,12 +430,6 @@ code {
// 06. Polls
// -----------------
.count-error {
background: $alert-bg !important;
color: $color-alert;
font-weight: bold;
}
table {
.callout {
@@ -604,28 +477,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 +493,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,39 +513,6 @@ table {
input::placeholder {
font-style: italic;
}
.legislation-questions-answers {
margin-bottom: 1rem;
}
}
.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 {
@@ -795,12 +589,6 @@ table {
.legislation-draft-versions-form {
.legislation-process-version {
@include breakpoint(medium) {
text-align: right;
}
}
.control {
cursor: pointer;
margin-bottom: 1rem;
@@ -905,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
// -----------------

3
app/assets/stylesheets/administration-rtl.scss Normal file
View File

@@ -0,0 +1,3 @@
$global-text-direction: rtl;
@import "administration";

3
app/assets/stylesheets/administration.scss Normal file
View File

@@ -0,0 +1,3 @@
@import "mixins_and_variables";
@import "admin";
@import "admin/**/*";

23
app/assets/stylesheets/application.scss
View File

@@ -1,27 +1,7 @@
@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 "mixins_and_variables";
@import "fonts";
@import "icons";
@import "functions/*";
@import "mixins/*";
@import "admin";
@import "annotator_overrides";
@import "autocomplete_overrides";
@import "datepicker_overrides";
@@ -39,7 +19,6 @@
@import "sticky_overrides";
@import "tags";
@import "account/**/*";
@import "admin/**/*";
@import "budgets/**/*";
@import "comments/**/*";
@import "debates/**/*";

0
app/assets/stylesheets/budgets/investmentss/filters.scss → app/assets/stylesheets/budgets/investments/filters.scss
View File

6
app/assets/stylesheets/dashboard_poster.scss
View File

@@ -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";

40
app/assets/stylesheets/foundation_and_overrides.scss
View File

@@ -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;

117
app/assets/stylesheets/layout.scss
View File

@@ -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
// --------------------

5
app/assets/stylesheets/management/account/edit_password_manually.scss Normal file
View File

@@ -0,0 +1,5 @@
.management-account-edit-password-manually {
[type=password] {
margin-bottom: 0 !important;
}
}

8
app/assets/stylesheets/mixins_and_variables.scss Normal file
View File

@@ -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/*";

21
app/assets/stylesheets/stats.scss
View File

@@ -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 {

3
app/assets/stylesheets/vendored-rtl.scss Normal file
View File

@@ -0,0 +1,3 @@
$global-text-direction: rtl;
@import "vendored";

53
app/assets/stylesheets/vendored.scss Normal file
View File

@@ -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;

24
app/components/management/account/edit_password_manually_component.html.erb Normal file
View File

@@ -0,0 +1,24 @@
<% 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| %>
<%= 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", 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 %>

7
app/components/management/account/edit_password_manually_component.rb Normal file
View File

@@ -0,0 +1,7 @@
class Management::Account::EditPasswordManuallyComponent < ApplicationComponent
attr_reader :user
def initialize(user)
@user = user
end
end

4
app/views/layouts/_common_head.html.erb
View File

@@ -4,9 +4,13 @@
<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" %>
<%= 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 %>

23
app/views/management/account/edit_password_manually.html.erb
View File

@@ -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) %>