Merge pull request #288 from City-of-Helsinki/UHF-10252

UHF-10252: Gin theme update

.stylelintrc.yaml

@@ -4,10 +4,8 @@ plugins:
   - stylelint-order
 rules:
   # scss/at-import-no-partial-leading-underscore: null
-  string-quotes: single # We use single quotes in SCSS
   declaration-block-no-redundant-longhand-properties: null # We prefer longhand properties for clarity in SCSS
-  selector-class-pattern: null # We're not too strict about selector class pattern
-  max-line-length: null # Let's not limit line length at this point
+  selector-class-pattern: "" # We're not too strict about selector class pattern
   declaration-empty-line-before: never # No need for empty line before declaration
   order/properties-alphabetical-order: true # We're following alphabetical order in properties
   custom-property-pattern: "^([a-z][a-z0-9]*)(--?[a-z0-9]+)*$" # kebab-case pattern with allowed bem-like double --

composer.json

@@ -10,7 +10,7 @@
         "drupal/admin_toolbar": "^3.0"
     },
     "conflict": {
-        "drupal/gin": ">3.0.0-rc10",
+        "drupal/gin": ">3.0.0-rc11",
         "drupal/helfi_platform_config": "<4.3"
     }
 }

hdbt_admin.theme

@@ -130,7 +130,7 @@ function hdbt_admin_form_node_form_alter(&$form, FormStateInterface $form_state)
 
   // Disable "Preview" button on new nodes and new translations.
   if ($node->isNew() || $node->isNewTranslation()) {
-    $form['gin_actions']['actions']['preview']['#access'] = FALSE;
+    $form['actions']['preview']['#access'] = FALSE;
   }
 
   $news_content_types = [
@@ -219,7 +219,7 @@ function hdbt_admin_apply_form_theme(array &$form): void {
   ) {
 
     // Create artificial status group.
-    $form['gin_actions']['tpr_entity_status'] = [
+    $form['actions']['tpr_entity_status'] = [
       '#type' => 'container',
       '#weight' => 0,
       '#attributes' => [
@@ -234,9 +234,9 @@ function hdbt_admin_apply_form_theme(array &$form): void {
     $form['content_translation']['status']['#disabled'] = FALSE;
 
     // Add content translation status gin_sticky actions.
-    $form['gin_actions']['actions']['preview'] = ($form['actions']['preview']) ?? [];
-    $form['gin_actions']['actions']['status'] = ($form['content_translation']['status']) ?? [];
-    $form['gin_actions']['actions']['status']['#attributes']['class'][] = 'tpr-entity-status';
+    $form['actions']['preview'] = ($form['actions']['preview']) ?? [];
+    $form['actions']['status'] = ($form['content_translation']['status']) ?? [];
+    $form['actions']['status']['#attributes']['class'][] = 'tpr-entity-status';
 
     // Move content translation fields to author information.
     $form['author_information']['uid'] = ($form['content_translation']['uid']) ?? [];
@@ -257,19 +257,21 @@ function hdbt_admin_apply_form_theme(array &$form): void {
     // Move taxonomy term overview button to sidebar.
     $form['gin_sidebar']['actions']['overview'] = ($form['actions']['overview']) ?? [];
     $form['gin_sidebar']['actions']['overview']['#weight'] = 0;
-    unset($form['gin_actions']['actions']['overview']);
+    unset($form['actions']['overview']);
   }
 
   // Alter submit button label to exclude "(this translation)" and move the
   // button to last.
-  if (isset($form['gin_actions']['actions']['submit'])) {
-    $form['gin_actions']['actions']['submit']['#value'] = t('Save');
-    $form['gin_actions']['actions']['submit']['#weight'] = '99';
+  if (isset($form['actions']['submit'])) {
+    $form['actions']['submit']['#value'] = t('Save');
+    $form['actions']['submit']['#weight'] = '99';
   }
 
   // Move unlock button right before submit.
-  if (isset($form['actions']['unlock'])) {
-    $form['gin_actions']['actions']['unlock']['#weight'] = '98';
+  if (isset($form['actions']['gin_more_actions']['gin_more_actions_items']['unlock'])) {
+    $form['actions']['unlock'] = $form['actions']['gin_more_actions']['gin_more_actions_items']['unlock'];
+    $form['actions']['unlock']['#weight'] = '98';
+    unset($form['actions']['gin_more_actions']['gin_more_actions_items']['unlock']);
   }
 
   // Move the promoted to front page checkbox to more

src/scss/06_components/_select2.scss

@@ -1,8 +1,3 @@
-//
-// @file
-// Styles for Select2.
-//
-
 // Select2 to look and feel more Gin-like.
 .select2.select2-container {
   min-height: 50px;
@@ -85,8 +80,29 @@
       }
     }
   }
+
+  .select2-selection.select2-selection--single .select2-selection__rendered {
+     padding-left: calc(1rem - 1px);
+   }
+
+  .select2-selection.select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
+    margin: -$spacing-half;
+    padding: calc(1rem - 1px);
+  }
+
+  .required + & {
+    .select2-selection.select2-selection--single .select2-selection__rendered {
+      padding: calc(1rem - 1px) calc(1rem - 1px) calc(1rem - 1px) calc(2rem - 1px) ;
+    }
+
+    .select2-selection.select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
+      margin: -15px;
+    }
+  }
 }
 
+
+
 // Select2 results.
 .select2-container .select2-results__options {
   .select2-results__option {

src/scss/06_components/layout/_header.scss

@@ -8,14 +8,17 @@
   .hdbt_admin--edit-form {
     .form-item--status,
     .field--name-status {
-      align-items: center;
-      display: flex;
-      margin-right: $spacing-and-half;
+      margin-right: $spacing !important; // Overrides gin more actions style.
+    }
+
+    .form-item--status .form-item__label,
+    .field--name-status .form-item__label {
+      font-size: remify(15px);
     }
   }
 
   // Add divider for sidebar when viewing it in tablet width.
-  @media (max-width: 1023px) {
+  @media (width <= 1023px) {
     .hdbt_admin--edit-form .layout-region-node-secondary {
       border-top: 2px solid $color-black-30;
       margin-top: $spacing-double;
@@ -32,17 +35,15 @@
       gap: $spacing-double;
       justify-items: center;
 
-      @media (min-width: 1024px) and (max-width: 1280px) {
+      @media (width >= 1024px) and (width <= 1280px) {
         .button {
-          font-size: remify(14px);
           padding: $spacing-half $spacing * 0.75;
         }
 
-        .form-item--status,
-        .field--name-status {
-          label {
-            font-size: remify(14px);
-          }
+        .button,
+        .form-item--status label,
+        .field--name-status label {
+          font-size: remify(14px);
         }
       }
     }

templates/page/page.html.twig

@@ -45,12 +45,13 @@
   <div class="region-sticky-watcher"></div>
 {% endif %}
 
-<header class="region region-sticky">
+<header class="region region-sticky {{ gin_form_actions_class }}">
   <div class="layout-container region-sticky__items">
     <div class="region-sticky__items__inner">
       {{ page.header[page_title_block] }}
       {{ page.header[language_switcher_admin] }}
       {{ page.content[local_actions_block] }}
+      {{ gin_form_actions }}
     </div>
   </div>
 </header>

templates/views/views-view-field--status.html.twig

@@ -0,0 +1 @@
+{{ output -}}