inline_forms 8.1.21 → 8.1.42

data/app/assets/javascripts/inline_forms/inline_forms.js

@@ -1,8 +1,5 @@
 //= require jquery
-//= require jquery.ui.all
-//= require jquery.timepicker.js
 //= require foundation
-//= require autocomplete-rails
 
 // Turbo / Hotwire is intentionally NOT required into this Sprockets bundle.
 // `turbo-rails` ships only an ES-module build of turbo (`app/assets/javascripts/turbo.js`
@@ -13,13 +10,11 @@
 // (and `application.html.erb`) as `<script type="module">`. Inline flows use
 // `<turbo-frame>` + HTML responses; jquery-ujs / remotipart were removed in 7.8.0.
 
+// jQuery UI is gone (8.1.26): date/time/month inputs are native, the
+// dropdown_with_other combobox is an <input list> + <datalist>, and
+// slider_with_values is a native <input type="range">. jQuery itself stays
+// only because Foundation 6's JS requires it.
 $(function(){
-  $.datepicker.setDefaults({
-    changeMonth : true,
-    changeYear : true,
-    yearRange: '-100:+100',
-    dateFormat: 'dd-mm-yy'
-  });
   $(document).foundation();
   initInlineFormsWidgets(document);
 });
@@ -28,44 +23,36 @@ document.addEventListener("turbo:load", function() {
   initInlineFormsWidgets(document);
 });
 
-// jQuery UI date/time pickers: one init path for first paint and turbo:frame-load
-// (form element helpers emit class hooks only — no inline <script> tags).
+// Widget init: one path for first paint, turbo:load and turbo:frame-load.
+// Form element helpers emit class hooks only — no inline <script> tags.
+// Native inputs (date/time/month/range/datalist) and Trix 2 custom elements
+// need no re-init after frame swaps; only tooltips and the range-slider
+// label sync are wired here.
 function initInlineFormsWidgets(root) {
-  var $root = root instanceof jQuery ? root : $(root);
-
   initValidationHintTooltips(root);
+  initSliderValueLabels(root);
+}
 
-  $root.find("input.datepicker-month-year").each(function() {
-    var $el = $(this);
-    if ($el.hasClass("hasDatepicker")) { return; }
-    $el.datepicker({
-      changeMonth: true,
-      changeYear: true,
-      showButtonPanel: true,
-      dateFormat: "MM yy",
-      onClose: function() {
-        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
-        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
-        $(this).datepicker("setDate", new Date(year, month, 1));
-      }
-    });
-  });
-
-  $root.find("input.datepicker").not(".datepicker-month-year").each(function() {
-    var $el = $(this);
-    if (!$el.hasClass("hasDatepicker")) { $el.datepicker(); }
-  });
+// slider_with_values: keep the <output> label in sync with the range input.
+// Labels array rides in data-slider-values; the <output> id in
+// data-slider-output (both emitted by slider_with_values_edit).
+function initSliderValueLabels(root) {
+  var scope = (root && root.querySelectorAll) ? root : document;
+  scope.querySelectorAll("input[type=range].slider_with_values").forEach(function (el) {
+    if (el._ifSliderBound) { return; }
+    el._ifSliderBound = true;
 
-  $root.find("input.timepicker").each(function() {
-    var $el = $(this);
-    if (!$el.data("timepicker")) { $el.timepicker(); }
-  });
+    var labels = [];
+    try {
+      labels = JSON.parse(el.getAttribute("data-slider-values") || "[]");
+    } catch (e) { /* keep empty; label just won't update */ }
+    var output = document.getElementById(el.getAttribute("data-slider-output"));
+    if (!output || !labels.length) { return; }
 
-  $root.find("trix-editor").each(function() {
-    if (window.Trix && this.editor) { return; }
-    if (window.Trix && typeof Trix.Editor === "function") {
-      new Trix.Editor(this);
-    }
+    el.addEventListener("input", function () {
+      var label = labels[parseInt(el.value, 10)];
+      output.textContent = (label === undefined || label === null) ? "" : label;
+    });
   });
 }
 
@@ -109,7 +96,7 @@ $(document).ready(function() {
   });
 });
 
-// Re-bind jQuery UI widgets and Trix after Turbo Frame swaps (Step 3).
+// Re-bind widgets (tooltips) after Turbo Frame swaps.
 document.addEventListener("turbo:frame-load", function(event) {
   var root = event.target;
   if (!root || !root.querySelectorAll) { return; }

data/app/assets/stylesheets/inline_forms/_foundation_icons.scss

@@ -3,20 +3,14 @@
  * Made by ZURB 2013 http://zurb.com/playground/foundation-icon-fonts-3
  * MIT License
  *
- * Vendored into inline_forms (replaces foundation-icons-sass-rails): @font-face
- * uses plain url() for dartsass-rails. Font files live in app/assets/fonts/
- * (woff/ttf/svg; woff+ttf mirrored from cdnjs foundicons 3.0.0).
+ * Vendored into inline_forms (replaces foundation-icons-sass-rails). Font files
+ * live in app/assets/fonts/ (woff/ttf/svg; mirrored from cdnjs foundicons 3.0.0).
+ *
+ * The @font-face moved to inline_forms_fonts.css.erb (Sprockets ERB): from the
+ * Dart Sass build the relative url("foundation-icons.woff") resolved against
+ * /assets/inline_forms/ and 404'd. Only the fi-* glyph classes live here.
  */
 
-@font-face {
-  font-family: "foundation-icons";
-  src: url("foundation-icons.woff") format("woff"),
-       url("foundation-icons.ttf") format("truetype"),
-       url("foundation-icons.svg#fontcustom") format("svg");
-  font-weight: normal;
-  font-style: normal;
-}
-
 .fi-address-book:before,
 .fi-alert:before,
 .fi-align-center:before,

data/app/assets/stylesheets/inline_forms/_theme.scss

@@ -0,0 +1,134 @@
+// inline_forms theme bridge (8.1.24).
+//
+// Exposes the admin-chrome palette as CSS custom properties on :root so a
+// host app (or a future per-user preferences feature — see
+// stuff/user-preferences-and-theming.md) can re-theme the UI at runtime by
+// overriding variables, without recompiling the Sass build:
+//
+//   :root { --if-color-primary: #2563eb; }
+//   /* or per user: */
+//   body.theme-dark { --if-color-body-bg: #111; --if-color-body-text: #eee; }
+//
+// The values are computed at build time from the Sass palette below (hover
+// shades via lighten()), and every usage site keeps working with the same
+// visual result when nothing overrides the variables. Foundation's own
+// components still read the Sass settings at build time; only the
+// inline_forms chrome (bars, rows, buttons, flashes) is variable-driven.
+//
+// Import order matters: this partial reads Foundation's globals
+// ($body-background, $body-font-color, $anchor-color), so it must be
+// imported after `@import 'foundation'` (see foundation_and_overrides.scss).
+
+@use 'sass:color';
+
+// Palette (single source of truth for the classic inline_forms look).
+$if-primary: #A3381E !default;      // dark red: app top bar, devise chrome
+$if-accent: #B94C32 !default;       // brick red: buttons, borders, pagination
+$if-secondary: #E1C150 !default;    // gold: model top bar band
+$if-header-band: #EFCA4B !default;  // deep gold: section headers, footers
+$if-row-odd: #FBE38E !default;      // list zebra: odd rows
+$if-row-even: #FBEEC1 !default;     // list zebra: even rows
+$if-input-bg: #fff8e0 !default;     // selects / search input background
+$if-flash-accent: #fade7a !default; // flash border band
+$if-error-bg: #a70f0f !default;
+$if-success-bg: #4f8d0d !default;
+$if-on-dark: #FFFFFF !default;      // text/icons on primary/secondary bands
+
+:root {
+  --if-color-primary: #{$if-primary};
+  --if-color-accent: #{$if-accent};
+  --if-color-secondary: #{$if-secondary};
+  --if-color-header-band: #{$if-header-band};
+  --if-color-row-odd: #{$if-row-odd};
+  --if-color-row-even: #{$if-row-even};
+  --if-color-input-bg: #{$if-input-bg};
+  --if-color-input-bg-hover: #{color.adjust($if-input-bg, $lightness: 2%)};
+  --if-color-input-bg-focus: #{color.adjust($if-input-bg, $lightness: 5%)};
+  --if-color-flash-accent: #{$if-flash-accent};
+  --if-color-error-bg: #{$if-error-bg};
+  --if-color-success-bg: #{$if-success-bg};
+  --if-color-on-dark: #{$if-on-dark};
+  // Foundation globals, bridged so body/anchors can be re-themed too.
+  --if-color-body-bg: #{$body-background};
+  --if-color-body-text: #{$body-font-color};
+  --if-color-anchor: #{$anchor-color};
+}
+
+// Re-bind the document base styles to the bridge. Foundation's
+// foundation-global-styles emitted the same values from Sass; these rules
+// win by cascade order and change nothing until a variable is overridden.
+body {
+  background: var(--if-color-body-bg);
+  color: var(--if-color-body-text);
+}
+
+a {
+  color: var(--if-color-anchor);
+}
+
+// ---------------------------------------------------------------------------
+// Preset themes (Pattern 1, stuff/user-preferences-and-theming.md).
+// The engine layouts put `theme-<name>` on <body> via
+// inline_forms_body_theme_class; a host user model opts in by responding to
+// #inline_forms_theme (installer-generated user models store an integer
+// `theme` column and map it). `theme-default` is the :root palette above.
+// ---------------------------------------------------------------------------
+
+body.theme-dark {
+  --if-color-primary: #7d2a15;
+  --if-color-accent: #d0603f;
+  --if-color-secondary: #6b5a22;
+  --if-color-header-band: #7a6829;
+  --if-color-row-odd: #2e2a20;
+  --if-color-row-even: #262319;
+  --if-color-input-bg: #2c2820;
+  --if-color-input-bg-hover: #332e25;
+  --if-color-input-bg-focus: #3a352b;
+  --if-color-flash-accent: #7a6829;
+  --if-color-body-bg: #1c1a16;
+  --if-color-body-text: #e8e4da;
+  --if-color-anchor: #e0a179;
+
+  // Foundation's body/input styles are compiled from Sass (light palette);
+  // patch the pieces the chrome uses that are not variable-driven.
+  input, select, textarea, trix-editor {
+    background-color: var(--if-color-input-bg);
+    color: var(--if-color-body-text);
+  }
+}
+
+body.theme-sepia {
+  --if-color-primary: #8a4a2a;
+  --if-color-accent: #a35a32;
+  --if-color-secondary: #d4b45a;
+  --if-color-header-band: #dcc078;
+  --if-color-row-odd: #ece0c0;
+  --if-color-row-even: #f2ead2;
+  --if-color-input-bg: #fdf6e3;
+  --if-color-input-bg-hover: #fffaf0;
+  --if-color-input-bg-focus: #fffdf7;
+  --if-color-flash-accent: #dcc078;
+  --if-color-body-bg: #f4ecd8;
+  --if-color-body-text: #5b4636;
+  --if-color-anchor: #8b5e3c;
+}
+
+body.theme-high-contrast {
+  --if-color-primary: #000000;
+  --if-color-accent: #b30000;
+  --if-color-secondary: #ffd500;
+  --if-color-header-band: #ffe066;
+  --if-color-row-odd: #ffffff;
+  --if-color-row-even: #ededed;
+  --if-color-input-bg: #ffffff;
+  --if-color-input-bg-hover: #f5f5f5;
+  --if-color-input-bg-focus: #ffffff;
+  --if-color-flash-accent: #ffd500;
+  --if-color-body-bg: #ffffff;
+  --if-color-body-text: #000000;
+  --if-color-anchor: #0000d6;
+
+  a, .top-level a {
+    text-decoration: underline;
+  }
+}

data/app/assets/stylesheets/inline_forms/devise.scss

@@ -1,17 +1,18 @@
-@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic);
+// Open Sans @font-face lives in inline_forms_fonts.css.erb (self-hosted,
+// Sprockets-served; linked from the layouts) — no external font CDN.
 @import 'foundation_and_overrides';
 
 // Devise pages have only `.contain-to-grid` as the top-bar wrapper (no
 // `.fixed` variant), so constrain it directly to the F5 1000px row
 // width and center it. Matches the logged-in chrome's banner.
 .contain-to-grid {
-  background-color: $body-background !important;
+  background-color: var(--if-color-body-bg) !important;
   max-width: 62.5rem;
   margin: 0 auto;
 }
 
 #inline_forms_devise_outer_container a {
-  color: #A3381E;
+  color: var(--if-color-primary);
 }
 
 // Foundation 6's default `.top-bar` adds 0.5rem padding and gives every
@@ -23,13 +24,13 @@
   padding: 0;
   min-height: 0;
   height: 45px;
-  background-color: #A3381E;
+  background-color: var(--if-color-primary);
   .top-bar-left,
   .menu,
   .menu li,
   .menu a {
-    background-color: #A3381E;
-    color: #FFFFFF;
+    background-color: var(--if-color-primary);
+    color: var(--if-color-on-dark);
   }
   .menu-text {
     padding: 0 1rem;
@@ -44,15 +45,15 @@
 }
 
 #inline_forms_devise_top_nav_bar a {
-  color: #FFFFFF;
+  color: var(--if-color-on-dark);
 }
 
 #inline_forms_devise_flash_div {
-  border-top: 0.5em solid #fade7a;
+  border-top: 0.5em solid var(--if-color-flash-accent);
   .flash {
     margin-top: 0.2em;
     padding: 0.5em;
-    color: #A3381E;
+    color: var(--if-color-primary);
     font-size: 130%;
     font-weight: bold;
     line-height: 120%;
@@ -65,7 +66,7 @@
   h1 {
     text-align: center;
     margin: 30px 0;
-    color: #A3381E;
+    color: var(--if-color-primary);
   }
 }
 
@@ -91,9 +92,9 @@
     top: 15px;
   }
   #error_explanation {
-    color: #A3381E;
+    color: var(--if-color-primary);
     h2 {
-      color: #A3381E;
+      color: var(--if-color-primary);
       font-size: 120%;
       font-weight: bolder;
     }
@@ -112,7 +113,7 @@
   h1 {
     text-align: center;
     margin: 0 0 0.5em 0;
-    color: #A3381E;
+    color: var(--if-color-primary);
     font-weight: bolder;
   }
 

data/app/assets/stylesheets/inline_forms/foundation_and_overrides.scss

@@ -53,6 +53,10 @@ $body-font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Roboto, Arial, sans
 @include foundation-visibility-classes;
 @include foundation-float-classes;
 
+// Theme bridge: palette as CSS custom properties (must come after
+// 'foundation' so it can read $body-background / $anchor-color).
+@import 'theme';
+
 @import '../../../vendor/assets/stylesheets/tippy.css';
 
 .validation-hints-source[hidden] {

data/app/assets/stylesheets/inline_forms/inline_forms.scss

@@ -1,8 +1,19 @@
 // inline_forms
-@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic);
-@import 'inline_forms/foundation_icons';
-@import '../jquery_ui/themes/jquery.ui.sunny.css.scss';
-@import '../jquery_ui/jquery.ui.all.css.scss';
+// Open Sans @font-face lives in inline_forms_fonts.css.erb (self-hosted,
+// Sprockets-served; linked from the layouts) — no external font CDN.
+//
+// Module-system status (8.1.24): `foundation_icons` is a self-contained
+// partial and loads via @use. Everything else must stay on @import until
+// the Foundation question is settled: foundation-rails 6.9 is @import-only
+// internally and its settings globals ($body-background, rem-calc, ...)
+// flow into foundation_and_overrides/theme/devise, which @use cannot
+// replicate without a Foundation that ships a module API (it never will —
+// the framework is unmaintained). See stuff/improvement-plan.md §1.
+//
+// jQuery UI SCSS (sunny theme + widget styles) was dropped in 8.1.26 along
+// with the last jQuery UI widgets (native date/time/month/range/datalist
+// inputs replaced them).
+@use 'inline_forms/foundation_icons';
 @import 'foundation_and_overrides';
 
 // Foundation 6 makes `.row` a flex container (`display: flex`); a nested
@@ -20,7 +31,7 @@
 }
 
 .contain-to-grid {
-  background-color: $body-background !important;
+  background-color: var(--if-color-body-bg) !important;
 }
 
 // Foundation 5 used to position .contain-to-grid.fixed at the top of the
@@ -65,15 +76,15 @@
   .menu > li > a {
     line-height: 45px;
     padding: 0 1rem;
-    color: #FFFFFF;
+    color: var(--if-color-on-dark);
   }
   // 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;
+    border-top-color: var(--if-color-on-dark);
+    border-color: var(--if-color-on-dark) 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`
@@ -99,7 +110,7 @@
   .menu-text,
   .menu-text h1,
   .menu-text h1 a {
-    color: #FFFFFF;
+    color: var(--if-color-on-dark);
   }
   .menu-text h1 {
     margin: 0 !important;
@@ -135,38 +146,38 @@ input {
 }
 
 select {
-  background-color: #fff8e0 !important;
+  background-color: var(--if-color-input-bg) !important;
   border: 0 !important;
   margin: 2px 0 !important;
   padding: 0;
 
 }
 select:hover, select:focus {
-  background-color: lighten(#fff8e0, 2%) !important;
+  background-color: var(--if-color-input-bg-hover) !important;
   border: 0 !important;
 }
 
 #inline_forms_application_top_bar {
-  background-color: #A3381E;
-  color: #FFFFFF;
+  background-color: var(--if-color-primary);
+  color: var(--if-color-on-dark);
   &,
   .menu,
   .menu li,
   .menu a {
-    background-color: #A3381E;
-    color: #FFFFFF;
+    background-color: var(--if-color-primary);
+    color: var(--if-color-on-dark);
   }
 }
 
 #inline_forms_model_top_bar {
-  background-color: #E1C150;
+  background-color: var(--if-color-secondary);
   padding-top: 45px;
   height: 90px;
   .top-bar-right,
   .menu,
   .menu li,
   .menu > li > a {
-    background-color: #E1C150;
+    background-color: var(--if-color-secondary);
   }
   // F6 buttons (`.button`) and inputs (`input[type=text]`) ship with
   // different default heights -- buttons size to padding+line-height
@@ -192,8 +203,8 @@ select:hover, select:focus {
     margin: 0 !important;
   }
   .new_button {
-    background-color: #E1C150;
-    color: #B94C32;
+    background-color: var(--if-color-secondary);
+    color: var(--if-color-accent);
     font-size: 1.3rem;
     padding: 0 2rem 0 1rem;
   }
@@ -203,7 +214,7 @@ select:hover, select:focus {
     transition-property: color;
   }
   input[type=text]:hover, input[type=text]:focus {
-    background-color: lighten(#fff8e0, 5%);
+    background-color: var(--if-color-input-bg-focus);
     -webkit-transition-property: background-color;
     transition-property: background-color;
   }
@@ -240,10 +251,10 @@ turbo-frame {
     margin: 0 auto !important;
   }
   .odd {
-    background-color: #FBE38E;
+    background-color: var(--if-color-row-odd);
   }
   .even {
-    background-color: #FBEEC1;
+    background-color: var(--if-color-row-even);
   }
 }
 
@@ -253,8 +264,8 @@ turbo-frame {
     font-weight: normal !important;
   }
   .row.form_element_header {
-    border-top: 1px solid #B94C32;
-    background-color: rgb(239, 202, 75);
+    border-top: 1px solid var(--if-color-accent);
+    background-color: var(--if-color-header-band);
     font-weight: normal !important;
     font-size: 1.3rem !important;
   }
@@ -292,17 +303,17 @@ turbo-frame {
 }
 
 .object_presentation {
-  background-color: #B94C32;
+  background-color: var(--if-color-accent);
   color: white;
   .close_button  {
-    background-color: #B94C32;
+    background-color: var(--if-color-accent);
     font-size: 1.3rem;
     padding: 0 1rem 0 1rem;
     margin: 0;
   }
   .close_button:hover, .close_button:focus {
-    background-color: #B94C32;
-    color: #FBEEC1;
+    background-color: var(--if-color-accent);
+    color: var(--if-color-row-even);
     -webkit-transition-property: color;
     transition-property: color;
   }
@@ -314,8 +325,8 @@ turbo-frame {
     font-weight: normal !important;
   }
   .row.form_element_header {
-    border-top: 1px solid #B94C32;
-    background-color: rgb(239, 202, 75);
+    border-top: 1px solid var(--if-color-accent);
+    background-color: var(--if-color-header-band);
     font-weight: normal !important;
     font-size: 1.3rem !important;
   }
@@ -324,29 +335,29 @@ turbo-frame {
 
 
 .associated_auto_header {
-  border-top: 1px solid #B94C32;
+  border-top: 1px solid var(--if-color-accent);
   .new_button  {
-    background-color: rgb(239, 202, 75);
+    background-color: var(--if-color-header-band);
     font-size: 1.5rem;
-    color: #B94C32;
+    color: var(--if-color-accent);
     padding: 0 0.5rem 0 1rem;
     margin: 0;
   }
   .new_button:hover, .new_button:focus {
-    background-color: rgb(239, 202, 75);
+    background-color: var(--if-color-header-band);
     color: white;
     -webkit-transition-property: color;
     transition-property: color;
   }
   .close_button  {
-    background-color: rgb(239, 202, 75);
+    background-color: var(--if-color-header-band);
     font-size: 1.5rem;
-    color: #B94C32;
+    color: var(--if-color-accent);
     padding: 0 0.5rem 0 1rem;
     margin: 0;
   }
   .close_button:hover, .new_button:focus {
-    background-color: rgb(239, 202, 75);
+    background-color: var(--if-color-header-band);
     color: white;
     -webkit-transition-property: color;
     transition-property: color;
@@ -370,14 +381,14 @@ turbo-frame {
     display: inline-block;
   }
   a:hover {
-    color: #B94C32;
+    color: var(--if-color-accent);
     -webkit-transition-property: color;
     -webkit-transition-duration: 0.3s;
     transition-property: color;
     transition-duration: 0.3s;
   }
   em {
-    color: #B94C32;
+    color: var(--if-color-accent);
     font-weight: bold;
     font-style: normal;
   }
@@ -387,32 +398,12 @@ turbo-frame {
 }
 
 .record_footer {
-  background-color: rgb(239, 202, 75);
+  background-color: var(--if-color-header-band);
   height: 0.2em;
-  border-bottom: 1px solid #B94C32;
+  border-bottom: 1px solid var(--if-color-accent);
   margin-bottom: 1.5em;
 }
 
-  .custom-combobox {
-    position: relative;
-    display: inline-block;
-  }
-  .custom-combobox-toggle {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    margin-left: -1px;
-    padding: 0;
-    /* support: IE7 */
-    *height: 1.7em;
-    *top: 0.1em;
-  }
-  .custom-combobox-input {
-    margin: 0;
-    padding: 0.3em;
-  }
-
-
 .column {
     padding-right: 0 !important;
 }
@@ -443,31 +434,31 @@ turbo-frame {
 
 .flash {
   padding: 0.3em;
-  color: #A3381E;
+  color: var(--if-color-primary);
   font-size: 130%;
   font-weight: bold;
   line-height: 120%;
   background-color: white;
-  border-top: 0.3em solid #fade7a;
+  border-top: 0.3em solid var(--if-color-flash-accent);
 }
 
 .error {
-  color: #ffffff;
+  color: var(--if-color-on-dark);
   font-weight: bold;
-  background-color: #a70f0f;
+  background-color: var(--if-color-error-bg);
   padding: 0.3em;
   margin-bottom: 0.5em;
 }
 .success {
-  color: #ffffff;
+  color: var(--if-color-on-dark);
   font-weight: bold;
   border-bottom: 1px solid #cccccc;
-  background-color: #4f8d0d;
+  background-color: var(--if-color-success-bg);
   padding: 0.3em;
   margin-bottom: 0.5em;
 }
 
-/* jQuery ui Slider 8 */
+/* slider_with_values: native range/progress (8.1.26) */
 .slider {
     width: 300px;
     float: left;