I've got an app that's using JQueryMobile and it's using the awesome ActiveAdmin extensively as well. While I love the ease and simplicity of the ActiveAdmin interface, I'd really like consistency with the rest of my app.
Is it possible (i.e. using standard ActiveAdmin and not modifying its sources) to re-skin ActiveAdmin to use the JQuery-Mobile look and feel?
Its very possible to reskin ActiveAdmin, though it would be a bit of a job to do, and there would likely be quite a number of things that can't perfectly be built to match a mobile presentation, especially if you don't want to get into overriding markup rendering.
You can always simply start adding styles of your own to the active_admin.css file that is generated for you. If you'd like to start without any of ActiveAdmin's styles at all, you can comment out the two sass imports in that css file:
#import "active_admin/mixins";
#import "active_admin/base";
Or at least just the base file. It may be intriguing to you in itself, or informative about the organization of the markup, to view your current admin pages without the base css, or with css turned off in your browser altogether. From that vantage point, you could begin to think through how the bare markup could be restyled to match a mobile presentation.
Related
I just created a new static web project using the Bootstrap template. In my html files it is marking the names of Bootstrap css classes as typos. Surely the worlds smartest IDE is better than that? How do I make it aware of Bootstrap classes? I know I can disable spell checking but that seems like an awful solution.
Please follow WI-4762 for updates to be notified on any progress with it. For now, I can only suggest to either disable the spell checker or add the words shown as typos to dictionary
We are working on a React application (using Create React App without ejecting it) and we decided to use Ant as our base component library.
Now that we are near the end of the project, we discover that the application will be integrated into a corporate portal (WebSphere) as a "portlet", so we inherit all the CSS files from the main page.
Both frameworks seem to have their own reset styles, but they use different values.
So far, I have not been able to find a LESS variable in Ant that can be used for prefix all Ant's CSS rules.
Has anyone ever tried to make them live together?
We don't own the parent development, we can only make change on the React part, so only things related to Ant.
We finally go with a specific CSS patch file, and we add rules when needed.
Not really perfect, but none of the suggested path did the job we expected.
Here you can see some of the default antd variables.
One of them is #ant-prefix: ant;. I think you can change it and apply different styles.
That is a tough one, and at the end of development no less!
As #froston mentions, and which you seem to have tried the #ant-prefix: ant; in addition to this you will need to se prefixCls as a prop on every component instance you create, which will definitely be an exercise in self-flagellation.
Even if you set a global CONSTANT and import and use this with your components, you still have to thread it through to all the places, and will need to be appended with the component name.
By way of example, the defaultProps for an anchor is prefixCls: 'ant-anchor'.
Hope this helps and good luck!
I recently started to create custom theme for ExtJS 5 by Sencha.
Following http://docs.sencha.com/extjs/5.0.0/core_concepts/theming.html I managed to create ThemeDemoApp, inherit ext-theme-neptune, change $base-color to green and refresh/rebuild ThemeDemoApp with my-custom-theme. All ok.
My problem is, ThemeDemoApp is quite poor for testing a custom theme. A panel, tab, button and a modal window. That's it?
After bit of googling I bumped into http://dev.sencha.com/ext/5.0.0/examples/themes/index.html. (Why isn't this mentioned in the guide?!) Heading says: View and test every Ext component against bundled Ext Themes, or your own custom themes.
My question is: How? How do I test my own custom theme against this example? Do I have to dig into the source (themes.js) and build such page/application myself?
The examples - including the Theme tester - is included in the ExtJS download.
You can modify the list of themes available by editing the shared/options-toolbar.js file.
To get it to find your theme, you'll either need to name it similar to the others (ext-theme-name), or modify themes.js accordingly.
Or you could just hack the theme.js file to hardcode your theme.
(Ext JS 4 used to create an example page for themes automatically - it doesn't seem to do that now, though)
According to advice at How do I include a JavaScript file in another JavaScript file? I decided to load both options-toolbar.js and themes.js (with just minor modification - commenting out Ext.onReady(...) function in themes.js) and I used functions getBasicPanel(), getCollapsedPanel(), etc. in my own application to create the same testing page (absolute-layout container that fits the page).
Anyhow, I guess Robert's answer is the correct one - there is no prearranged, ready-to-use functionality from Sencha :-(
I'm using the best_in_place gem to do in-place editing in a Rails application. However, I need (X)HTML editing on some of the text areas, so I need a rich-text editor. TinyMCE is being used elsewhere on the site.
However, it's not trivial to add an editor to best_in_place. To grossly oversimplify, the gem uses jQuery to insert the textarea tag on the fly, and TinyMCE initializes at page load, replacing available textareas with an editor, so when best_in_place puts in its textarea, TinyMCE has already come and gone. I've tried re-initializing TinyMCE after best_in_place inserts its textarea, but I don't think I've found the correct place(s) in the code to do that, because so far it hasn't worked.
There's a rumor that this integration is possible, but no documentation was visible in my web searches, so pointers are welcome. (Likewise this answer is unhelpful, pointing to two broken links.) I think my preferred order of solutions would be something like
Here's how to integrate TinyMCE with best_in_place
It can't be done with TinyMCE but here's how to do it with another rich-text editor
It can't be done with best_in_place but here's another rich-text edit-in-place solution for Rails 3.2.x.
I gave up trying to do this with best_in_place, so this question as written is still open to a better answer. However, for those who might find this question later and wonder what I eventually came up with, here's what I did in the end:
Junked best_in_place.
Forked the jeditable-rails plugin to
get Jeditable as an in-place editor.
Adapted the plugin to provide Jeditable, jWYSIWYG, and the Jeditable-jWYSIWYG custom input as assets for the Rails asset pipeline (along with related CSS and images for jWYSIWYG).
Profit! (Not really.)
Anyway, if you're trying to do rich-text in-place editing in Rails 3.2, try the jeditable-wysiwyg-rails plugin. It's providing the assets for the markItUp editor as well, although because I'm not using it I'm not sure they're all there and/or arranged properly.
I'm using the twitter-bootstrap-rails gem for styles in my app.
At the moment, I'm writing all my style ruls inside bootstrap_and_overrides.css.less, and this turns messy and redundant as the application grows.
I'd like to split the less code to smaller files that will be required on a per page basis, but still be able to use the bootstrap colors and mixins. I found that after I split it into another file, I couldn't use these components anymore. I guess I'm probably not including it correctly or in the proper order - thoughts? thanks.
look at https://github.com/twitter/bootstrap/blob/master/less/bootstrap.less
you should be able to use #import "override-forms.less" in your bootstrap_and_overrides.css.less for example.