{"id":14955568,"url":"https://github.com/blocknotes/activeadmin_blaze_theme","last_synced_at":"2025-04-13T10:44:17.084Z","repository":{"id":20918020,"uuid":"91257434","full_name":"blocknotes/activeadmin_blaze_theme","owner":"blocknotes","description":"A theme for Active Admin based on Blaze CSS 3.x","archived":false,"fork":false,"pushed_at":"2023-10-05T11:37:02.000Z","size":1185,"stargazers_count":46,"open_issues_count":3,"forks_count":13,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-27T02:09:40.420Z","etag":null,"topics":["activeadmin","activeadmin-themes","rails","rails5","ruby"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/blocknotes.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["blocknotes"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2017-05-14T16:43:36.000Z","updated_at":"2024-09-11T15:30:06.000Z","dependencies_parsed_at":"2024-06-21T04:42:46.535Z","dependency_job_id":null,"html_url":"https://github.com/blocknotes/activeadmin_blaze_theme","commit_stats":{"total_commits":95,"total_committers":9,"mean_commits":"10.555555555555555","dds":0.6105263157894737,"last_synced_commit":"d729757f66b22246fc10b98a29c6eebe2ca41da6"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blocknotes%2Factiveadmin_blaze_theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blocknotes%2Factiveadmin_blaze_theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blocknotes%2Factiveadmin_blaze_theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blocknotes%2Factiveadmin_blaze_theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blocknotes","download_url":"https://codeload.github.com/blocknotes/activeadmin_blaze_theme/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248702086,"owners_count":21148114,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["activeadmin","activeadmin-themes","rails","rails5","ruby"],"created_at":"2024-09-24T13:11:23.036Z","updated_at":"2025-04-13T10:44:17.065Z","avatar_url":"https://github.com/blocknotes.png","language":"SCSS","readme":"# Active Admin Blaze Theme\n[![gem version](https://badge.fury.io/rb/activeadmin_blaze_theme.svg)](https://badge.fury.io/rb/activeadmin_blaze_theme)\n[![gem downloads](https://badgen.net/rubygems/dt/activeadmin_blaze_theme)](https://rubygems.org/gems/activeadmin_blaze_theme)\n[![linters](https://github.com/blocknotes/activeadmin_blaze_theme/actions/workflows/linters.yml/badge.svg)](https://github.com/blocknotes/activeadmin_blaze_theme/actions/workflows/linters.yml)\n[![specs Rails 6.1](https://github.com/blocknotes/activeadmin_blaze_theme/actions/workflows/specs_rails6.1.yml/badge.svg)](https://github.com/blocknotes/activeadmin_blaze_theme/actions/workflows/specs_rails6.1.yml)\n[![specs Rails 7.0](https://github.com/blocknotes/activeadmin_blaze_theme/actions/workflows/specs_rails7.0.yml/badge.svg)](https://github.com/blocknotes/activeadmin_blaze_theme/actions/workflows/specs_rails7.0.yml)\n\nA theme for Active Admin based on [Blaze CSS](http://blazecss.com) 3.x\n\nFeatures:\n\n- CSS only theme with clean UI\n- compact nested forms\n- [customizable](#customize) options: colors, sidebar position, squared style, scroll on cells\n- custom controls / components: [toggle](#toggle), [Sidebar menu](#sidebar-menu), [Accordion](#accordion), [Readonly field](#readonly-field), [Styled table](#styled-table)\n- Blaze CSS [widgets](#blaze-widgets)\n\nSee some [screenshots](#screenshots).\n\nPlease :star: if you like it.\n\n## Install\n\nFirst, add to your Gemfile: `gem 'activeadmin_blaze_theme'` (and execute `bundle`)\n\nThen, if you installed Active Admin **without Webpacker** support (so using Sprockets):\n\n- Add a SASS/SCSS gem to your Gemfile (ex. `gem 'sassc'`)\n- Add at the end of your Active Admin styles (_app/assets/stylesheets/active_admin.scss_):\n\n```scss\n@import \"activeadmin_blaze_theme/theme\";\n```\n\nOtherwise, **with Webpacker**:\n\n- Add the component to the _package.json_: `yarn add blocknotes/activeadmin_blaze_theme`\n- Add at the end of your Active Admin javascript pack (_app/javascript/packs/active_admin.js_):\n\n```js\nrequire('activeadmin_blaze_theme');\n```\n\n- Another option is appending to _app/javascript/stylesheets/active_admin.scss_ (in this case the JS require line is not needed):\n\n```scss\n// ...\n// optionally add custom colors variables here\n@import \"~activeadmin_blaze_theme/app/assets/stylesheets/activeadmin_blaze_theme/theme\";\n```\n\n- Sometimes it could be necessary to remove the _node_modules_ path and recreate it (using `yarn install --check-files`) or to clean the tmp path: `bin/rails tmp:clear`\n\n## Customize\n\n- Colors customization is available using some Sass variables;\n- With Sprockets: you need to update your Active Admin styles (before **activeadmin_blaze_theme/theme** import line);\n- With Webpacker: you need to import the theme using the Sass/Scss option as described above.\n\n```scss\n// blaze colors\n$color-brand: #2c3e50;\n$color-info: #4dabf5;\n$color-warning: #ff9800;\n$color-success: #4caf50;\n$color-error: #f44336;\n// main variables\n$bg-footer: #dfdfdf;               // bg footer bar\n$bg-form1: #f4f4f4;                // bg 1st level forms\n$bg-form2: darken($bg-form1, 3%);  // bg 2nd level forms (nested)\n$bg-form3: darken($bg-form1, 6%);  // bg 3rd level forms (nested)\n$bg-form4: darken($bg-form1, 9%);  // bg 4th level forms (nested)\n$bg-form-sub-headings: lighten($color-brand, 64%);  // bg nested forms title\n$bg-header: $color-brand;          // bg header bar\n$bg-inputs: #fff;                  // bg forms inputs\n$bg-menu-active: #7b929e;          // bg menu item current / hover\n$bg-sidebar: #efefef;              // bg sidebar\n$fg-box-title: #fff;\n$fg-button-link: #fff;\n$fg-menu-items: #f8f8f8;\n$fg-table-borders: #e4e4e4;\n$fg-table-link: #eee;\n// other variables\n$form-padding: 10px;\n$inputs-spacing: 10px;\n$height-inputs: 26px;\n$height-topbar: 40px;\n$height-titlebar: 38px;\n$text-shadow: #000;\n```\n\n- To move sidebar on the left add to your Active Admin styles (after blaze theme import):\n\n```scss\n#active_admin_content.with_sidebar {\n  @extend .sidebar_left;\n}\n```\n\n- Squared style (no rounded borders):\n\n```scss\n#active_admin_content, .active_admin #title_bar {\n  @extend .no_rounded;\n}\n```\n\n- More options:\n\n```scss\n// scrollable table cells\nbody.active_admin .index_content table {\n  @extend .scrollable_cells;\n}\n```\n\n```scss\n// fix ckeditor width\nbody.active_admin .cke {\n  @extend .ckeditor_width_fix\n}\n```\n\n## Custom fields / components\n\n### Toggle\n\nIn *form* \\ *inputs* block:\n\n```ruby\nf.input :boolean, as: :blaze_toggle\n```\n\nTo change toggle color:\n\n```ruby\nf.input :boolean, as: :blaze_toggle, input_html: { toggle_class: 'c-toggle--brand' }\n```\n\nAvailable: `c-toggle--brand, c-toggle--info, c-toggle--warning, c-toggle--success, c-toggle--error`\n\nStandard checkbox with label on the left:\n\n```ruby\nf.input :boolean, as: :blaze_toggle, input_html: { simple_checkbox: true }\n```\n\n### Sidebar menu\n\nA sidebar menu (*priority* option permit to put the sidebar above the filters):\n\n```ruby\nsidebar :help, priority: 0 do\n  ul class: 'blaze-menu' do\n    li do\n      link_to 'Menu item 1', admin_root_path\n    end\n    li do\n      link_to 'Menu item 2', admin_root_path\n    end\n    li do\n      link_to 'Menu item 3', admin_root_path\n    end\n  end\nend\n```\n\n### Accordion\n\nAn accordion group in a form:\n\n```ruby\nf.accordion_group do\n  f.accordion 'First accordion' do\n    f.inputs for: [:detail, f.object.detail || Detail.new] do |f2|\n      f2.input :meta_title\n      f2.input :meta_keywords\n    end\n  end\n  f.accordion 'Second accordion' do\n    f.inputs for: [:more_detail, f.object.morel_detail || Detail.new] do |f2|\n      f2.input :meta_title\n      f2.input :meta_keywords\n    end\n  end\nend\n```\n\n### Readonly field\n\nSome readonly fields in a form:\n\n```ruby\nf.readonly :position\n```\n\n```ruby\nf.readonly :position, f.object.position * 2\n```\n\n```ruby\nf.readonly 'Code', 'Automatically set after save', class: 'a-wrapper-class'\n```\n\n```ruby\nf.readonly nil, 'Value only, no label'\n```\n\n### Styled table\nTable styles:\n\n```ruby\ntable_for User.all, class: 'blaze-table table-rows table-striped' do\n  # ...\nend\n```\n\n## Blaze widgets\n\nSee components available in Blaze CSS [docs](http://blazecss.com/components/buttons/).\n\nBadge example:\n\n```ruby\nf.input :price, label: raw( 'Price \u003cspan class=\"c-badge c-badge--warning\" style=\"position: relative; top: -5px\"\u003ein $\u003c/span\u003e' )\n```\n\nButton example:\n\n```ruby\na 'clear form', href: '#', class: 'c-button c-button--error', onclick: 'event.preventDefault();document.forms[0].reset();'\n```\n\nProgress bar example:\n\n```ruby\ndiv class: 'c-progress' do\n  div class: 'c-progress__bar c-progress__bar--success', style: \"width: #{f.object.a_field}%;\"\nend\n```\n\n## Notes\n\n- To use this plugins with Active Admin 1.x please use the version [0.5.12](https://github.com/blocknotes/activeadmin_blaze_theme/releases/tag/v0.5.12)\n\n## Screenshots\n\nIndex:\n![index](extra/index.png)\n\nEdit:\n![edit](extra/edit.png)\n\n## Changelog\n\nThe changelog is available [here](CHANGELOG.md).\n\n## Do you like it? Star it!\n\nIf you use this component just star it. A developer is more motivated to improve a project when there is some interest. My other [Active Admin components](https://github.com/blocknotes?utf8=✓\u0026tab=repositories\u0026q=activeadmin\u0026type=source).\n\nOr consider offering me a coffee, it's a small thing but it is greatly appreciated: [about me](https://www.blocknot.es/about-me).\n\n## Contributors\n\n- [Mattia Roccoberton](http://blocknot.es): author\n- The good guys that opened issues and pull requests from time to time\n\n## License\n\nThe gem is available as open-source under the terms of the [MIT](LICENSE.txt).\n","funding_links":["https://github.com/sponsors/blocknotes"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblocknotes%2Factiveadmin_blaze_theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblocknotes%2Factiveadmin_blaze_theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblocknotes%2Factiveadmin_blaze_theme/lists"}