Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

how to override default assets? #27

Open
TangMonk opened this issue Aug 27, 2015 · 12 comments
Open

how to override default assets? #27

TangMonk opened this issue Aug 27, 2015 · 12 comments
Labels
new feature question

Comments

@TangMonk
Copy link

I wanna to custom style for swagger,

I copy application.css from grape-swagger-rails and place into myapp/app/assets/stylesheets/grape_swagger_rails.

/*
*= require reset
*= require screen
*= require_self
*/

ul {
  margin-left: 10px;
}

but it throw error:

couldn't find file 'reset'
@dblock
Copy link
Member

dblock commented Aug 27, 2015

I am not familiar with where Rails looks for these files, but I suspect that this require is relative, so it works when with other grape-swagger-rails assets. Maybe you need to tell Rails to add a CSS path from the gem? If you find out it would be great to document how to properly customize this.

Also, maybe you don't need to copy all this. Just add a stylesheet to your app and make sure it loads with the grape-swagger UI and override whatever styles you need?

@calfzhou
Copy link
Contributor

I put a custom CSS file into app/assets/stylesheets/grape_swagger_rails, and also have a copy of grape-swagger-rails's index.html.erb in app/views/grape_swagger_rails/application. In my own index.html.erb, I add a css link tag to include the custom CSS file.

/app/assets/stylesheets/grape_swagger_rails/custom.css.scss

ul {
  margin-left: 10px;
}

/app/views/grape_swagger_rails/index.html.erb

...
<head>
  <title>...</title>
  <%= stylesheet_link_tag 'grape_swagger_rails/application.css' %>
  <%= stylesheet_link_tag 'grape_swagger_rails/custom.css' %>
  ...
</head>
...

/config/initializers/assets.rb

Rails.application.config.assets.precompile += %w(
  grape_swagger_rails/custom.css
  # other assets...
)

@abarre
Copy link

abarre commented Sep 26, 2015

@calfzhou, is your solution working ?
I can't make it work for me.

@calfzhou
Copy link
Contributor

@abarre, yes, it works well for me. By the way, I'm using master branch, latest commit.

@dblock dblock mentioned this issue Feb 24, 2016
Closed
@aschuster3
Copy link

The idea of being able to customize the layout that the UI renders inside of seems like it would be a nice addition and within the scope of the gem. Maybe using some content_for statements within the index.html.erb in this project would allow dropping in a layout without without breaking any compatibility.

I'll leave this issue open as a reminder. If anybody would like to attempt a solution, feel free to take a whack at it.

@aschuster3 aschuster3 mentioned this issue May 24, 2016
Closed
@SimonDKnight
Copy link

SimonDKnight commented May 24, 2016 •
edited
Loading

@calfzhou Thanks so much for this solution, however this is a small mistake which might trip some people up. For the location of the index.html.erb the file path should be

/app/views/grape_swagger_rails/application/index.html.erb

@aschuster3
Copy link

aschuster3 commented May 27, 2016 •
edited
Loading

Hey everyone, I just pushed a new test branch that splits out layout components so that you simply need to have a different layout file that contains a yield :head and yield statement, meaning that you're left with an essentially clean slate to impose your own style.

To change the default layout, simply overwrite the GrapeSwaggerRails.options.swagger_ui_layout with the location of your custom layout.

If you want to test out the gem locally, you can replace

gem 'grape-swagger-rails'

with

gem 'grape-swagger-rails', github: 'ruby-grape/grape-swagger-rails', branch: 'change-layout-test-branch'

and then run bundle update grape-swagger-rails.

Currently the features are undocumented and have no tests. If anybody has any recommendations or preferences, please share them here and I'll take them into consideration as I work on it. If you run into compatibility issues, please let me know.

@pezholio
Copy link
Contributor

pezholio commented Aug 5, 2016 •
edited
Loading

This is awesome - thanks! 👍 Only issue I have is being able to access url helpers and things I've set up in my ApplicationController (like current_user) etc, but I can probably work round that for now. Any tips would be appreciated if there's anything obvious I can do though.

@rachelwilson rachelwilson mentioned this issue Jul 25, 2018
Merged
@hubertjakubiak
Copy link

@TangMonk

It should be:

/*
*= require grape_swagger_rails/reset
*= require grape_swagger_rails/screen
*= require_self
*/

not

/*
*= require reset
*= require screen
*= require_self
*/

@jwigal
Copy link

jwigal commented Dec 9, 2020

We wanted to keep most of what was there, so we forked the original repo and just added an option for pulling in our own stylesheet.

https://github.com/assignr/grape-swagger-rails

@dblock
Copy link
Member

dblock commented Dec 10, 2020

Why don't you PR this upstream @jwigal ?

@jwigal
Copy link

jwigal commented Dec 10, 2020

Sure thing! See #103

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
new feature question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@jwigal @pezholio @dblock @abarre @aschuster3 @TangMonk @calfzhou @SimonDKnight @hubertjakubiak