administrate-bootstrap-theme 0.1.0 → 0.1.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c0396fa4e9ab92f78876de55aa3ccf3af5ebbe66a014a746dbed2f97554c2ffb
-  data.tar.gz: 05f582a06a3b2861dc395104c6b62e6e092031d7d185167fba1bf07a65f20ea7
+  metadata.gz: c179fa187eba0bd5d2a559db05a527b1cdde088000608bee63f9eed413aa8288
+  data.tar.gz: f0b2b078a5f189eb914dc8d0f70affc23fc91bf7b05fffa11ad6aee35ed064c3
 SHA512:
-  metadata.gz: 1b6fdd711e9935f557014cd8f82d53578d360c96efc76c076ad768e093ac6014247b26b669156cac266ee01dd06b2a0cc0377454b5a65fbb527feedb25bd06db
-  data.tar.gz: 108fe161bd0edf8113c4d62954af9c66c623cac765950f7121f0cbacf566ff7fc3e744aaf5c3c73de85fe6ae34b06da23c6411ad66f15971342f564210eea0e5
+  metadata.gz: 89a9486a51c81bf5a59b5866ced85fb658e6bdc1da5105f7a4876266f75d27f066e2c3aad3523c6177e2ab4b82b3d6e0aab0b6971565b238ef36dc6a5949f973
+  data.tar.gz: 52526a552b243d3d72a0eba83d321e23fe7a7f3af3f88e9e70a291a09d31211e4a357a8ed250ae00cda75371f9bb62fb5ed8a856ab202f31343f235e6ea82354

data/README.md

@@ -1,29 +1,35 @@
-# Administrate Bootstrap Theme [![Gem Version](https://badge.fury.io/rb/administrate-bootstrap-theme.svg)](https://badge.fury.io/rb/administrate-bootstrap-theme)
+# Administrate Bootstrap Theme [![Gem Version](https://badge.fury.io/rb/administrate-bootstrap-theme.svg)](https://badge.fury.io/rb/administrate-bootstrap-theme) ![specs](https://github.com/blocknotes/administrate-bootstrap-theme/actions/workflows/ruby.yml/badge.svg)
 A Bootstrap 5 (_beta_) theme for [Administrate](https://github.com/thoughtbot/administrate).
 
 Features:
-- easy to install, just include CSS to apply the theme to a default Administrate structure;
+- easy to install, just include CSS/JS to apply the theme to a default Administrate structure;
 - customizable via SASS variables;
 - allow to use *Bootstrap* components in the admin.
 
-![screenshot](screenshot.png)
+See some [screenshots](#screenshots).
 
 ## Installation
-- Add to the *Gemfile* (of an Administrate project): `gem 'administrate-bootstrap-theme'` (and execute `bundle`)
-- Modify *app/assets/config/manifest.js*, replacing the administrate assets with:
+- Add to *Gemfile* (of an Administrate project): `gem 'administrate-bootstrap-theme'` (and execute `bundle`)
+- Add to *app/assets/config/manifest.js*:
 
 ```js
 //= link administrate-bootstrap-theme/theme.css
-
-// OFF link administrate/application.css
-// OFF link administrate/application.js
+//= link administrate-bootstrap-theme/theme.js
 ```
 
-- Edit *app/views/layouts/admin/application.html.erb* (you can generate it using `rails generate administrate:views:layout`),
-  adding before head closing tag:
+- Generate the layout views if they are missing: `rails generate administrate:views:layout` (only **_stylesheet** and **_javascript** partials are needed)
+- Update *app/views/admin/application/_stylesheet.html.erb*, leaving only:
 
-```html
+```erb
 <%= stylesheet_link_tag 'administrate-bootstrap-theme/theme', media: 'all' %>
+<%= yield :stylesheet %>
+```
+
+- Update *app/views/admin/application/_javascript.html.erb*, leaving only:
+
+```erb
+<%= javascript_include_tag 'administrate-bootstrap-theme/theme' %>
+<%= yield :javascript %>
 ```
 
 ## Customizations
@@ -39,6 +45,14 @@ And replace the link tag in the *application.html.erb* with: `<%= stylesheet_lin
 
 For the complete list of options take a look [here](app/assets/stylesheets/administrate-bootstrap-theme/_variables.scss).
 
+## Screenshots
+- Index page:
+![screenshot_index](screenshot_index.png)
+- Show page:
+![screenshot_show](screenshot_show.png)
+- Form page:
+![screenshot_form](screenshot_form.png)
+
 ## Do you like it? Star it!
 If you use this component just star it. A developer is more motivated to improve a project when there is some interest.
 

data/Rakefile

@@ -1,20 +1,16 @@
 # frozen_string_literal: true
 
-require "bundler/setup"
+require 'bundler/gem_tasks'
 
-APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
-load "rails/tasks/engine.rake"
+begin
+  require 'rspec/core/rake_task'
 
-load "rails/tasks/statistics.rake"
+  RSpec::Core::RakeTask.new(:spec) do |t|
+    # t.ruby_opts = %w[-w]
+    t.rspec_opts = ['--color', '--format documentation']
+  end
 
-require "bundler/gem_tasks"
-
-require "rake/testtask"
-
-Rake::TestTask.new(:test) do |t|
-  t.libs << 'test'
-  t.pattern = 'test/**/*_test.rb'
-  t.verbose = false
+  task default: :spec
+rescue LoadError
+  puts '! LoadError: no RSpec available'
 end
-
-task default: :test

data/app/assets/config/administrate-bootstrap-theme_manifest.js

@@ -1 +1,2 @@
 //= link_directory ../stylesheets/administrate-bootstrap-theme .css
+//= link_directory ../javascripts/administrate-bootstrap-theme .js

data/app/assets/javascripts/administrate-bootstrap-theme/theme.js

@@ -0,0 +1,2 @@
+//= require bootstrap/dist/js/bootstrap.bundle
+

data/app/assets/stylesheets/administrate-bootstrap-theme/_base.scss

@@ -1,10 +1,11 @@
-@import "../../../node_modules/bootstrap/scss/bootstrap";
+@import "bootstrap/scss/bootstrap";
 
 @import "variables";
 
 @import "components/navigation";
 @import "components/content_header";
 @import "components/content_body";
+@import "components/form";
 @import "components/pagination";
 
 .app-container {
@@ -13,6 +14,21 @@
   height: 100vh;
 }
 
+.flashes {
+  pointer-events: none;
+  position: fixed;
+  text-align: center;
+  width: calc(100% - #{$navigation-width});
+
+  > .flash {
+    @extend .alert, .d-inline-block;
+
+    &.flash-notice {
+      @extend .alert-info;
+    }
+  }
+}
+
 .main-content {
   @extend .d-flex, .flex-column;
 

data/app/assets/stylesheets/administrate-bootstrap-theme/components/_content_body.scss

@@ -1,13 +1,13 @@
 .main-content__body {
-  @extend .container-fluid;
-
-  @import "form";
+  @extend .container-fluid, .mb-3;
 
   > dl {
     @extend .row;
 
     dt {
       @extend .col-2, .text-end;
+
+      min-height: 32px;
     }
 
     dd {
@@ -23,6 +23,20 @@
     @extend .table;
   }
 
+  .attribute--nested {
+    > div {
+      display: flex;
+    }
+
+    legend {
+      @extend .fs-5, .border-bottom;
+    }
+
+    .attribute-data {
+      @extend .ps-4;
+    }
+  }
+
   .cell-label__sort-indicator > svg {
     height: 20px;
     width: 20px;

data/app/assets/stylesheets/administrate-bootstrap-theme/components/_form.scss

@@ -1,25 +1,61 @@
-// Imported in content_body
+.main-content__body {
+  legend {
+    @extend .fs-4, .my-2;
+  }
 
-.form-actions > input {
-  @extend .btn;
-}
+  .field_with_errors {
+    @extend .text-danger;
+  }
 
-.field-unit {
-  @extend .row;
-}
+  .form-actions > input {
+    @extend .btn;
+  }
+
+  .field-unit {
+    @extend .row, .mb-3;
+  }
+
+  .field-unit__field {
+    @extend .col-10;
 
-.field-unit__field {
-  @extend .col-10;
+    > input:not([type="checkbox"]) {
+      @extend .form-control;
+    }
 
-  > input[type="text"], > textarea {
-    @extend .form-control;
+    > input[type="checkbox"] {
+      @extend .form-check-input
+    }
+
+    > select {
+      @extend .form-select;
+    }
+
+    > textarea {
+      @extend .form-control;
+      min-height: 150px;
+    }
   }
-}
 
-.field-unit__label {
-  @extend .col-2;
+  .field-unit__label {
+    @extend .col-2;
+
+    > label {
+      @extend .col-form-label;
+      border-bottom: 1px dashed #ccc;
+      padding-bottom: 0;
+      width: 100%;
+    }
+  }
+
+  #error_explanation {
+    @extend .alert, .alert-danger;
+
+    > h2 {
+      @extend .h4, .alert-heading;
+    }
 
-  > label {
-    @extend .col-form-label;
+    > ul {
+      @extend .mb-0;
+    }
   }
 }

data/app/assets/stylesheets/administrate-bootstrap-theme/theme.scss

@@ -21,11 +21,23 @@ nav.pagination {
 }
 
 .main-content__body {
+  table {
+    @extend .table-striped;
+  }
+
+  .attribute-data > table {
+    @extend .table-bordered;
+  }
+
   .form-actions > input {
     @extend .btn-primary;
   }
 
   .js-table-row {
+    .action-show {
+      @extend .link-secondary;
+    }
+
     .action-edit {
       @extend .btn-secondary;
     }

data/lib/administrate-bootstrap-theme/engine.rb

@@ -3,5 +3,7 @@
 module AdministrateBootstrapTheme
   class Engine < ::Rails::Engine
     isolate_namespace AdministrateBootstrapTheme
+
+    config.assets.paths << File.expand_path('../../node_modules', __dir__)
   end
 end

data/lib/administrate-bootstrap-theme/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module AdministrateBootstrapTheme
-  VERSION = '0.1.0'
+  VERSION = '0.1.9'
 end

data/node_modules/bootstrap/js/src/alert.js

@@ -0,0 +1,141 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.0.0-beta3): alert.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import {
+  defineJQueryPlugin,
+  emulateTransitionEnd,
+  getElementFromSelector,
+  getTransitionDurationFromElement
+} from './util/index'
+import Data from './dom/data'
+import EventHandler from './dom/event-handler'
+import BaseComponent from './base-component'
+
+/**
+ * ------------------------------------------------------------------------
+ * Constants
+ * ------------------------------------------------------------------------
+ */
+
+const NAME = 'alert'
+const DATA_KEY = 'bs.alert'
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = '.data-api'
+
+const SELECTOR_DISMISS = '[data-bs-dismiss="alert"]'
+
+const EVENT_CLOSE = `close${EVENT_KEY}`
+const EVENT_CLOSED = `closed${EVENT_KEY}`
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+
+const CLASS_NAME_ALERT = 'alert'
+const CLASS_NAME_FADE = 'fade'
+const CLASS_NAME_SHOW = 'show'
+
+/**
+ * ------------------------------------------------------------------------
+ * Class Definition
+ * ------------------------------------------------------------------------
+ */
+
+class Alert extends BaseComponent {
+  // Getters
+
+  static get DATA_KEY() {
+    return DATA_KEY
+  }
+
+  // Public
+
+  close(element) {
+    const rootElement = element ? this._getRootElement(element) : this._element
+    const customEvent = this._triggerCloseEvent(rootElement)
+
+    if (customEvent === null || customEvent.defaultPrevented) {
+      return
+    }
+
+    this._removeElement(rootElement)
+  }
+
+  // Private
+
+  _getRootElement(element) {
+    return getElementFromSelector(element) || element.closest(`.${CLASS_NAME_ALERT}`)
+  }
+
+  _triggerCloseEvent(element) {
+    return EventHandler.trigger(element, EVENT_CLOSE)
+  }
+
+  _removeElement(element) {
+    element.classList.remove(CLASS_NAME_SHOW)
+
+    if (!element.classList.contains(CLASS_NAME_FADE)) {
+      this._destroyElement(element)
+      return
+    }
+
+    const transitionDuration = getTransitionDurationFromElement(element)
+
+    EventHandler.one(element, 'transitionend', () => this._destroyElement(element))
+    emulateTransitionEnd(element, transitionDuration)
+  }
+
+  _destroyElement(element) {
+    if (element.parentNode) {
+      element.parentNode.removeChild(element)
+    }
+
+    EventHandler.trigger(element, EVENT_CLOSED)
+  }
+
+  // Static
+
+  static jQueryInterface(config) {
+    return this.each(function () {
+      let data = Data.get(this, DATA_KEY)
+
+      if (!data) {
+        data = new Alert(this)
+      }
+
+      if (config === 'close') {
+        data[config](this)
+      }
+    })
+  }
+
+  static handleDismiss(alertInstance) {
+    return function (event) {
+      if (event) {
+        event.preventDefault()
+      }
+
+      alertInstance.close(this)
+    }
+  }
+}
+
+/**
+ * ------------------------------------------------------------------------
+ * Data Api implementation
+ * ------------------------------------------------------------------------
+ */
+
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DISMISS, Alert.handleDismiss(new Alert()))
+
+/**
+ * ------------------------------------------------------------------------
+ * jQuery
+ * ------------------------------------------------------------------------
+ * add .Alert to jQuery only if jQuery is present
+ */
+
+defineJQueryPlugin(NAME, Alert)
+
+export default Alert