inline_forms 7.0.4 → 7.2.10

data/lib/generators/assets/stylesheets/inline_forms.scss

@@ -1,12 +1,133 @@
 // inline_forms
 @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic);
-@import 'foundation-icons';
+@import 'inline_forms/foundation_icons';
 @import 'themes/jquery.ui.sunny';
 @import 'jquery.ui.all';
 @import 'foundation_and_overrides';
 
+// Foundation 6 makes `.row` a flex container (`display: flex`); a nested
+// `.row` is therefore a flex item and shrinks to its content's intrinsic
+// width unless we tell it otherwise. Foundation 5's float-based `.row`
+// was a block element that filled its parent's width by default. The
+// inline-edit UJS swap (`show.js.erb`) inserts `_show.html.erb`'s outer
+// `<div class="row">` directly inside the list's `<div class="row top-level">`,
+// so without this override the inline-edit panel collapses to ~340px wide
+// and right-aligns inside the gold band instead of filling the row.
+.row .row {
+  flex: 1 1 100%;
+  width: 100%;
+  max-width: 100%;
+}
+
 .contain-to-grid {
-  background-color: $body-bg !important;
+  background-color: $body-background !important;
+}
+
+// Foundation 5 used to position .contain-to-grid.fixed at the top of the
+// viewport. Foundation 6 doesn't style that legacy class, so we reproduce
+// the stacking explicitly: the application top bar floats on top (z-index
+// 99, 45px tall) and the model top bar sits beneath it starting at top:0
+// with a 45px top-padding so its visible band runs 45..90px. Body content
+// is then positioned absolute at top:90px (see #outer_container).
+.contain-to-grid.fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 62.5rem; // F5 $row-width (1000px); F6 $global-width is 1200px
+  width: 100%;
+  z-index: 99;
+}
+
+#inline_forms_model_top_bar_container.contain-to-grid.fixed {
+  z-index: 9;
+}
+
+// Compact the Foundation 6 `.top-bar` (default uses flex + 0.5rem padding +
+// natural line-height on the inner <h1>, which produces an ~80px tall bar)
+// so the application top bar matches the original 45px row.
+#inline_forms_application_top_bar.top-bar {
+  padding: 0;
+  min-height: 0;
+  height: 45px;
+  .menu-text {
+    padding: 0 1rem;
+  }
+  .menu-text h1 {
+    margin: 0 !important;
+    padding: 0;
+    font-size: 1rem;
+    line-height: 45px;
+    font-weight: normal;
+  }
+  .menu > li > a {
+    line-height: 45px;
+    padding: 0 1rem;
+    color: #FFFFFF;
+  }
+  // F6 dropdown-menu paints the `::after` triangle indicator with
+  // `border-color: $primary-color transparent ...` (default blue). The
+  // app top bar is dark red, so the blue arrow next to "More" / "Admin"
+  // looks broken; force the triangle to white to match the link text.
+  .is-dropdown-submenu-parent > a::after {
+    border-top-color: #FFFFFF;
+    border-color: #FFFFFF transparent transparent;
+  }
+  // F6 ships `.is-dropdown-submenu-parent > a { padding-right: 1.5rem }`
+  // to reserve space for the `::after` triangle, but our `.menu > li > a`
+  // override above clamps padding to `0 1rem` for ALL links and wins on
+  // specificity (id + 4 classes/elements). That leaves the triangle
+  // overlapping the text. Restore the extra right-padding for dropdown
+  // parents so there is a clear gap (>= 3px) between "More"/"Admin"
+  // and the triangle indicator.
+  .menu > li.is-dropdown-submenu-parent > a {
+    padding-right: 1.5rem;
+  }
+}
+
+// Match: model top bar is the wider gold band (height 90px, padded so its
+// usable area is in the lower 45px). Override Foundation 6's default
+// `.top-bar { padding: 0.5rem }` so our 45/90px math holds.
+#inline_forms_model_top_bar.top-bar {
+  padding: 45px 0 0 0;
+  min-height: 0;
+  .menu-text {
+    padding: 0 1rem;
+  }
+  .menu-text,
+  .menu-text h1,
+  .menu-text h1 a {
+    color: #FFFFFF;
+  }
+  .menu-text h1 {
+    margin: 0 !important;
+    padding: 0;
+    font-size: 1rem;
+    line-height: 45px;
+    font-weight: normal;
+  }
+  .menu > li > a {
+    line-height: 45px;
+    padding: 0 1rem;
+  }
+  // F6's `.menu` is `display: flex` with default `align-items: stretch`,
+  // which makes every <li> fill the bar's 45px content band. The search
+  // form's <li> contains a `.row.collapse` whose columns/buttons/input
+  // then sit at the top of the band, so the [x] / [zoek op naam...] /
+  // [zoek] trio looks 5..7px higher than "Apartments" (line-height 45px,
+  // centered) and the "+" new-record button (visually centered via its
+  // own padding). Center every <li> vertically and let the search row
+  // also center its column children, so the form chrome aligns with the
+  // rest of the bar without resorting to per-element `top: Npx` shims.
+  .top-bar-right > .menu {
+    align-items: center;
+  }
+  .top-bar-right > .menu > li > .row,
+  .top-bar-right > .menu > li form > .row {
+    align-items: center;
+  }
 }
 
 input {
@@ -26,42 +147,65 @@ select:hover, select:focus {
 }
 
 #inline_forms_application_top_bar {
+  background-color: #A3381E;
+  color: #FFFFFF;
+  &,
+  .menu,
+  .menu li,
+  .menu a {
     background-color: #A3381E;
     color: #FFFFFF;
-    .top-bar-section li a {
-      background-color: #A3381E;
-    }
+  }
 }
 
 #inline_forms_model_top_bar {
   background-color: #E1C150;
   padding-top: 45px;
   height: 90px;
-  .top-bar-section {
-    .right, li, .has-form {
-      background-color: #E1C150;
-    }
-    .inline_forms_model_top_bar_buttons {
-      top: 4px !important;
-      padding: 7px 0 7px 0 !important;
-      margin: 0 !important;
-    }
-    .new_button  {
-      background-color: #E1C150;
-      color: #B94C32;
-      font-size: 1.3rem;
-      padding: 0 2rem 0 1rem;
-    }
-    .new_button:hover, .new_button:focus {
-      color: white;
-      -webkit-transition-property: color;
-      transition-property: color;
-    }
-    input[type=text]:hover, input[type=text]:focus {
-      background-color: lighten(#fff8e0, 5%);
-      -webkit-transition-property: background-color;
-      transition-property: background-color;
-    }
+  .top-bar-right,
+  .menu,
+  .menu li,
+  .menu > li > a {
+    background-color: #E1C150;
+  }
+  // F6 buttons (`.button`) and inputs (`input[type=text]`) ship with
+  // different default heights -- buttons size to padding+line-height
+  // (~30px), inputs to F6's `$input-height` (default 2.4375rem ≈ 39px).
+  // In the search row that puts `[x]` and `[zoek]` shorter than the
+  // `zoek op naam...` input. Pin all three to the same 32px box so they
+  // line up like the F5 chrome did when `$topbar-height` was 45px.
+  // The vertical centering is handled by `align-items: center` above, so
+  // explicitly clear the legacy `top: 4px / 6px` shims that used to
+  // approximate centering on the F5 float-based bar.
+  .inline_forms_model_top_bar_buttons {
+    top: 0 !important;
+    height: 32px;
+    line-height: 32px;
+    padding: 0 0.5rem !important;
+    margin: 0 !important;
+  }
+  #input_search {
+    top: 0 !important;
+    height: 32px;
+    line-height: 32px;
+    padding: 0 0.5rem;
+    margin: 0 !important;
+  }
+  .new_button {
+    background-color: #E1C150;
+    color: #B94C32;
+    font-size: 1.3rem;
+    padding: 0 2rem 0 1rem;
+  }
+  .new_button:hover, .new_button:focus {
+    color: white;
+    -webkit-transition-property: color;
+    transition-property: color;
+  }
+  input[type=text]:hover, input[type=text]:focus {
+    background-color: lighten(#fff8e0, 5%);
+    -webkit-transition-property: background-color;
+    transition-property: background-color;
   }
 }
 
@@ -179,6 +323,19 @@ select:hover, select:focus {
 .pagination {
   font-weight: normal;
   font-size: 0.9em;
+  // Foundation 6's `_pagination.scss` (line 120) sets `.pagination a,
+  // .pagination button { display: block }` because it expects the
+  // canonical `<ul class="pagination"><li><a>...</a></li>...</ul>`
+  // markup, where the `<li>` is `display: inline-block` and the inner
+  // `<a>` fills it. will_paginate (used by `_list.html.erb` for nested
+  // has_many lists) emits flat `<a>`/`<span>`/`<em>` directly under
+  // `<div class="pagination">`, with no surrounding `<li>` to control
+  // layout, so F6's `display: block` makes every page link stack
+  // vertically -- in F5 (where the equivalent rule did not exist) they
+  // sat horizontally. Force inline-block here to match the F5 visuals.
+  a, span, em, button {
+    display: inline-block;
+  }
   a:hover {
     color: #B94C32;
     -webkit-transition-property: color;
@@ -203,17 +360,6 @@ select:hover, select:focus {
   margin-bottom: 1.5em;
 }
 
-.flash {
-  margin-top: 1em;
-  padding: 0.5em;
-  color: #A3381E;
-  font-size: 130%;
-  font-weight: bold;
-  line-height: 120%;
-  background-color: white;
-  border-top: 0.5em solid #fade7a;
-}
-
   .custom-combobox {
     position: relative;
     display: inline-block;
@@ -238,11 +384,18 @@ select:hover, select:focus {
     padding-right: 0 !important;
 }
 
+// Legacy F5 vertical-centering hack: `.top-bar` was 45px tall and floats
+// pushed inputs/buttons against the top, so this `top: 4px` shim nudged
+// them down. The F6 model top bar centers its menu items via flex
+// (`align-items: center` on `.top-bar-right > .menu`), so this rule is
+// no longer needed; we keep `top: 0` to defuse any other site CSS that
+// might still reach in with a `top` shift.
 .top-bar input, .top-bar .button {
-  top: 4px !important;
+  top: 0 !important;
 }
 
-.top-bar-section {
+#inline_forms_model_top_bar .top-bar-right,
+#inline_forms_application_top_bar .top-bar-right {
   padding-left: rem-calc(12) !important;
   padding-right: rem-calc(12) !important;
 }
@@ -255,39 +408,30 @@ select:hover, select:focus {
   margin-bottom: 0 !important;
 }
 
-#switch_user_identifier {
-  font-size: smaller;
-  select {
-    width: 5em;
-  }
+.flash {
+  padding: 0.3em;
+  color: #A3381E;
+  font-size: 130%;
+  font-weight: bold;
+  line-height: 120%;
+  background-color: white;
+  border-top: 0.3em solid #fade7a;
 }
 
-
 .error {
-    color: #ffffff;
-    font-weight: bold;
-    -moz-border-radius: 10px;
-    -webkit-border-radius: 10px;
-    -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .1);
-    -moz-box-shadow: 0 1px 1px rgba(0,0,0, .1);
-    background-color: #a70f0f;
-    background-image: -moz-linear-gradient(100% 100% 90deg, #a70f0f, #c01313);
-    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c01313), to(#a70f0f));
-    padding: 0.7em;
+  color: #ffffff;
+  font-weight: bold;
+  background-color: #a70f0f;
+  padding: 0.3em;
+  margin-bottom: 0.5em;
 }
 .success {
-    color: #ffffff;
-    font-weight: bold;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-    border-bottom: 1px solid #cccccc;
-    background-color: #4f8d0d;
-    background-image: -moz-linear-gradient(100% 100% 90deg, #4f8d0d, #5ba210);
-    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5ba210), to(#4f8d0d));
-    padding: 0.7em;
-    margin-bottom: 0.5em;
+  color: #ffffff;
+  font-weight: bold;
+  border-bottom: 1px solid #cccccc;
+  background-color: #4f8d0d;
+  padding: 0.3em;
+  margin-bottom: 0.5em;
 }
 
 .ckeditor_area {
@@ -327,9 +471,4 @@ select:hover, select:focus {
 
 #input_search {
   border: none !important;
-  margin-top: -2px;
-}
-
-#inline_forms_model_top_bar .top-bar-section .inline_forms_model_top_bar_buttons {
-  top: 6px !important;
 }

data/lib/generators/templates/_inline_forms_tabs.html.erb

@@ -1,41 +1,40 @@
 <div class="contain-to-grid fixed" id="inline_forms_model_top_bar_container">
-  <nav id="inline_forms_model_top_bar" class="top-bar" data-topbar>
-  <ul class="title-area">
-    <li class="name" id="inline_forms_menu">
-      <h1>
-        <a>
-          <%= t(controller_name) %>
-        </a>
-      </h1>
-    </li>
-    <li class="toggle-topbar menu-icon">
-      <a href="#"><span></span></a>
-    </li>
-  </ul>
-  <section class="top-bar-section">
-    <ul class="right">
-      <li class="has-form">
-        <%= form_tag request.path, :method => 'get' do %>
-          <div class="row collapse">
-            <div class="large-1 small-1 columns">
-              <%= link_to "<i class='fi-x'></i>".html_safe, request.path, :title => 'reset', :class => "button expand inline_forms_model_top_bar_buttons" %>
+  <nav id="inline_forms_model_top_bar" class="top-bar">
+    <div class="top-bar-left">
+      <ul class="menu">
+        <li class="menu-text" id="inline_forms_menu">
+          <h1 style="margin: 0; font-size: inherit;">
+            <a>
+              <%= t(controller_name) %>
+            </a>
+          </h1>
+        </li>
+      </ul>
+    </div>
+    <div class="top-bar-right">
+      <ul class="menu">
+        <li>
+          <%= form_tag request.path, :method => 'get' do %>
+            <div class="row collapse">
+              <div class="large-1 small-1 columns">
+                <%= link_to "<i class='fi-x'></i>".html_safe, request.path, :title => 'reset', :class => "button expanded inline_forms_model_top_bar_buttons" %>
+              </div>
+              <div class="large-6 small-6 columns">
+                <%= text_field_tag :search,  params[:search], :placeholder => 'zoek op naam...', :id => 'input_search' %>
+              </div>
+              <div class="large-3 small-3 columns">
+                <%= submit_tag 'zoek', :class => "button expanded inline_forms_model_top_bar_buttons" %>
+              </div>
+              <div class="large-2 small-2 columns">
+                &nbsp;
+              </div>
             </div>
-            <div class="large-6 small-6 columns">
-              <%= text_field_tag :search,  params[:search], :placeholder => 'zoek op naam...', :id => 'input_search' %>
-            </div>
-            <div class="large-3 small-3 columns">
-              <%= submit_tag 'zoek', :class => "button expand inline_forms_model_top_bar_buttons" %>
-            </div>
-            <div class="large-2 small-2 columns">
-              &nbsp;
-            </div>
-          </div>
-        <% end %>
-      </li>
-      <li>
-      <%= link_to_new_record(@Klass, "new_#{@Klass.to_s.singularize.underscore}_path", @Klass.to_s.pluralize.downcase + '_list') %>
-      </li>
-    </ul>
-  </section>
-</nav>
-</div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to_new_record(@Klass, "new_#{@Klass.to_s.singularize.underscore}_path", @Klass.to_s.pluralize.downcase + '_list') %>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</div>

data/lib/inline_forms/version.rb

@@ -1,4 +1,4 @@
 # -*- encoding : utf-8 -*-
 module InlineForms
-  VERSION = "7.0.4"
+  VERSION = "7.2.10"
 end

data/lib/inline_forms.rb

@@ -149,6 +149,16 @@ module InlineForms
       )
     end
 
+    # Vendored jQuery UI SCSS lives under stylesheets/jquery_ui/ and uses @import
+    # "jquery.ui.core" etc. Dart Sass (dartsass-rails) only adds --load-path entries
+    # from config.assets.paths, not config.dartsass.extra_load_paths.
+    initializer "inline_forms.jquery_ui_stylesheet_path" do |app|
+      path = root.join("app", "assets", "stylesheets", "jquery_ui")
+      next unless path.directory?
+
+      app.config.assets.paths << path unless app.config.assets.paths.include?(path)
+    end
+
     I18n.load_path << Dir[File.join(File.expand_path(File.dirname(__FILE__) + '/locales'), '*.yml')]
     I18n.load_path.flatten!
   end

data/lib/installer_templates/dartsass/devise_main.scss

@@ -0,0 +1,2 @@
+// Entry for dartsass (see config/initializers/inline_forms_dartsass_builds.rb).
+@use "inline_forms/devise" as *;

data/lib/installer_templates/dartsass/inline_forms_dartsass_builds.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+# Dart Sass entrypoints for this app (see dartsass-rails). Output lives under
+# app/assets/builds/; Sprockets must not link any .scss (only compiled .css).
+#
+# Visual reference (chrome widths, bars, jQuery UI sunny, Foundation Icons):
+#   foundation-rails ~> 6.6.2 + sass-rails (sassc) — last stack verified in-repo.
+# Upgraded stack (this file):
+#   foundation-rails ~> 6.9 (RubyGems 6.9.0.x) + dartsass-rails (Dart Sass).
+Rails.application.config.dartsass.builds = {
+  "application.scss" => "application.css",
+  "inline_forms_install/inline_forms_main.scss" => "inline_forms/inline_forms.css",
+  "inline_forms_install/devise_main.scss" => "inline_forms/devise.css"
+}

data/lib/installer_templates/dartsass/inline_forms_main.scss

@@ -0,0 +1,2 @@
+// Entry for dartsass (see config/initializers/inline_forms_dartsass_builds.rb).
+@use "inline_forms/inline_forms" as *;