ダッシュボードの新しいテーマを実装していきます。
記述追加 GemFile(75行目)
gem 'active_skin'
GemFile
source 'https://rubygems.org' git_source(:github) do |repo_name| repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/") "https://github.com/#{repo_name}.git" end # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 5.0.7', '>= 5.0.7.1' # Use postgresql as the database for Active Record gem 'pg', '>= 0.18', '< 2.0' # Use Puma as the app server gem 'puma', '~> 3.0' # Use SCSS for stylesheets gem 'sass-rails', '~> 5.0' # Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0' # Use CoffeeScript for .coffee assets and views gem 'coffee-rails', '~> 4.2' # See https://github.com/rails/execjs#readme for more supported runtimes # gem 'therubyracer', platforms: :ruby # Use jquery as the JavaScript library gem 'jquery-rails' # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.5' # Use Redis adapter to run Action Cable in production # gem 'redis', '~> 3.0' # Use ActiveModel has_secure_password # gem 'bcrypt', '~> 3.1.7' # Use Capistrano for deployment # gem 'capistrano-rails', group: :development group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug', platform: :mri end group :development do # Access an IRB console on exception pages or by using <%= console %> anywhere in the code. gem 'web-console', '>= 3.3.0' end # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] # bulma gem 'bulma-rails', '~> 0.7.4' gem 'bulma-extensions-rails', '~> 1.0.30' # デバイス gem 'devise', '~>4.2' # アバター gem 'gravtastic' # toastr gem 'toastr-rails', '~> 1.0' # 日本語化 gem 'rails-i18n' # google認証 gem 'omniauth' gem 'omniauth-google-oauth2' # 管理ダッシュボード gem 'activeadmin' # 管理ダッシュボードのテーマ gem 'active_skin'
コマンド
bundle
「app\assets\stylesheets\active_admin.scss」ファイルに以下の記述を追加します。
記述追加 app\assets\stylesheets\active_admin.scss(14行目)
$skinActiveColor: #08c0a1; $skinHeaderBck: #273585; $panelHeaderBck: #273585; $skinLogo: none; @import "active_skin";
app\assets\stylesheets\active_admin.scss
// SASS variable overrides must be declared before loading up Active Admin's styles. // // To view the variables that Active Admin provides, take a look at // `app/assets/stylesheets/active_admin/mixins/_variables.scss` in the // Active Admin source. // // For example, to change the sidebar width: // $sidebar-width: 242px; // Active Admin's got SASS! @import "active_admin/mixins"; @import "active_admin/base"; $skinActiveColor: #08c0a1; $skinHeaderBck: #273585; $panelHeaderBck: #273585; $skinLogo: none; @import "active_skin"; // Overriding any non-variable SASS must be done after the fact. // For example, to change the default status-tag color: // // .status_tag { background: #6090DB; }
ブラウザ確認
http://localhost:3000/admin/dashboard
管理ダッシュボードの見た目が変わりました。