From 7567068747a429fd64a7a397236272b1e6106e13 Mon Sep 17 00:00:00 2001 From: Mehdi Lahmam Date: Fri, 10 Apr 2015 02:30:46 +0200 Subject: [PATCH] Add a dummy style guide view, based ons Foundation docs' Kitchen Sink This help us to quickly verify everything is Ok inside a Rails app. We were relying before on `foundation-rails` style guide as a mounted engine, which was causing problems. --- .../app/controllers/styleguide_controller.rb | 2 + .../app/views/layouts/application.html.erb | 8 +- test/dummy/app/views/styleguide/show.html.erb | 1512 +++++++++++++++++ test/dummy/config/routes.rb | 55 +- 4 files changed, 1520 insertions(+), 57 deletions(-) create mode 100644 test/dummy/app/controllers/styleguide_controller.rb create mode 100644 test/dummy/app/views/styleguide/show.html.erb diff --git a/test/dummy/app/controllers/styleguide_controller.rb b/test/dummy/app/controllers/styleguide_controller.rb new file mode 100644 index 00000000..48ed997f --- /dev/null +++ b/test/dummy/app/controllers/styleguide_controller.rb @@ -0,0 +1,2 @@ +class StyleguideController < ApplicationController +end diff --git a/test/dummy/app/views/layouts/application.html.erb b/test/dummy/app/views/layouts/application.html.erb index d6ccc243..104ea1ce 100644 --- a/test/dummy/app/views/layouts/application.html.erb +++ b/test/dummy/app/views/layouts/application.html.erb @@ -13,8 +13,10 @@ - - <%= yield %> - +
+
+ <%= yield %> +
+
diff --git a/test/dummy/app/views/styleguide/show.html.erb b/test/dummy/app/views/styleguide/show.html.erb new file mode 100644 index 00000000..7c8aaf48 --- /dev/null +++ b/test/dummy/app/views/styleguide/show.html.erb @@ -0,0 +1,1512 @@ +

+ Kitchen sink +

+

+ This page includes every single Foundation element so that we can make sure things work together smoothly. +

+

+ Joyride +

+
+ + Start Joyride + +
+ Build Joyride with HTML +
+

+ Stop Number 2 for You! +

+ +
    +
  1. +

    + Stop #1 +

    +

    + You can control all the details for your tour stop. Any valid HTML will work inside of Joyride. +

    +
    2. +
  2. +

    + Stop #2 +

    +

    + Get the details right by styling Joyride with a custom stylesheet! +

    +
    3. +
  3. +

    + Stop #3 +

    +

    + It works as a modal too! +

    +
    4. +
+
+ + +
+ +

+ Alert Boxes +

+
+ This is a standard alert (div.alert-box.radius). + + × + +
+
+ This is a success alert (div.alert-box.success). + + × + +
+
+ This is an alert (div.alert-box.alert.round). + + × + +
+
+ This is a secondary alert (div.alert-box.secondary). + + × + +
+
+ + + +
+ +

+ Buttons +

+
+
+ + .tiny.button + +
+ + .small.button + +
+ + .button + +
+ + .expand + +
+
+
+ + .tiny.secondary + +
+ + .small.success.radius + +
+ + .round.disabled + +
+
+
+
+ +

+ Button Groups +

+ + + + +
+ + + +

+ +
+ +
+ +
+ +
+ +

+
+ +

+ Split Buttons +

+

+ + + Tiny Split Button + + +
+ + Small Secondary Radius Split Button + + +
+ + Round Alert Split Button + + +
+ + Large Success Split Button + + +

+
+ +

+ Switches +

+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ +

+ Forms +

+
+
+ + Fieldset + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ +
+ +
+
+ + .com + +
+
+
+
+
+
+ + +
+
+
+
+
+ + +

+ + Link Dropdown » + + + Content Dropdown » + + +

+ +
+

+ Title +

+

+ Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome! +

+ +

+ Launching a Discovery Mission +

+ + Button + +
+
+ +

+ Inline Lists +

+ +
+ +

+ Keystroke +

+

+ To make something pretty, press and hold + + cmd + alt + shift + w + a + ! + +

+
+ +

+ Labels +

+

+ + Regular Label + +
+ + Radius Secondary Label + +
+ + Round Alert Label + +
+ + Success Label + +
+

+
+ +

+ Magellan +

+
+
+
+ + Build with HTML + +
+
+ + Using Javascript + +
+
+
+

+ + +

+

+

+
+ Build With Predefined HTML Structure +
+

+

+

+ Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. +

+

+ + +

+

+

+
+ Awesome JS Goodness +
+

+

+

+ Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. +

+
+ +

+ Orbit +

+
+
+
+
    +
  • + +
    + Caption One. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. +
    +
    • +
  • + +
    + Caption Two. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. +
    +
    • +
  • + +
    + Caption Three. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. +
    +
    • +
+ + + + + + + + +
+ + +
+
+
+
+ + 3 + + of + + 3 + +
+
+
    +
  1. +
    2. +
  2. +
    3. +
  3. +
    4. +
+
+
+
+
+
+ +

+ Pagination +

+ +
+ +

+ Panels +

+
+
+
+
+ This is a regular panel. +
+

+ It has an easy to override visual style, and is appropriately subdued. +

+
+
+
+
+
+ This is a radius callout panel. +
+

+ It's a little ostentatious, but useful for important content. +

+
+
+

+

+
+

+

+

+ Pricing Tables +

+
+
+
    +
  • + Standard +
    • +
  • + $99.99 +
    • +
  • + An awesome description +
    • +
  • + 1 Database +
    • +
  • + 5GB Storage +
    • +
  • + 20 Users +
    • +
  • + + Buy Now + +
    • +
+
+
+
+ +

+ Progress Bars +

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +

+ Reveal +

+

+ + Example Modal… + + + Example Video Modal… + +

+ +
+

+ This is a modal. +

+

+ Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of + + close-reveal-modal + + . Clicking anywhere outside the modal will also dismiss it. +

+

+ Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully. +

+

+ + Second Modal… + +

+ + × + +
+
+

+ This is a second modal. +

+

+ See? It just slides into place after the first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision. +

+ + × + +
+
+

+ This modal has video +

+
+ +
+ + × + +
+ +
+ +

+ Sliders +

+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ +

+ Accordion +

+ +
+ +

+ Tabs +

+
+
+ + Tab 1 + +
+
+ + Tab 2 + +
+
+ + Tab 3 + +
+
+ + Tab 4 + +
+
+
+
+

+ First panel content goes here... +

+
+
+

+ Second panel content goes here... +

+
+
+

+ Third panel content goes here... +

+
+
+

+ Fourth panel content goes here... +

+
+
+
+
+ + Tab 1 + +
+
+ + Tab 2 + +
+
+ + Tab 3 + +
+
+ + Tab 4 + +
+
+
+
+

+ Panel 1 content goes here. +

+
+
+

+ Panel 2 content goes here. +

+
+
+

+ Panel 3 content goes here. +

+
+
+

+ Panel 4 content goes here. +

+
+
+
+ +

+ Side Nav +

+
+
+ +
+
+
+ + +
+
+ Filter: +
+
+ + All + +
+
+ + Active + +
+
+ + Pending + +
+
+ + Suspended + +
+
+
+ +

+ Tables +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Table Header + + Table Header + + Table Header + + Table Header +
+ Content Goes Here + + This is longer content Donec id elit non mi porta gravida at eget metus. + + Content Goes Here + + Content Goes Here +
+ Content Goes Here + + This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. + + Content Goes Here + + Content Goes Here +
+ Content Goes Here + + This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. + + Content Goes Here + + Content Goes Here +
+
+ +

+ Thumbnails +

+

+ + +

+
+ +

+ Tooltips +

+

+ The tooltips can be positioned on the + + "tip-bottom" + + , which is the default position, + + "tip-top" (hehe) + + , + + "tip-left" + + , or + + "tip-right" + + of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full width and bottom aligned. +

+
+ +

+ Top Bar +

+ + +
+ +

+ Type +

+
+

+ h1. This is a very large header. +

+

+ h2. This is a large header. +

+

+ h3. This is a medium header. +

+

+ h4. This is a moderate header. +

+
+ h5. This is a small header. +
+
+ h6. This is a tiny header. +
+
+

+ h1. subheader +

+

+ h2. subheader +

+

+ h3. subheader +

+

+ h4. subheader +

+
+ h5. subheader +
+
+ h6. subheader +
+
+ +

+ Definition List +

+
+ Definition lists are great for small block of copy that describe the header +
+
+
+ Lower cost +
+
+ The new version of this product costs significantly less than the previous one! +
+
+ Easier to use +
+
+ We've changed the product so that it's much easier to use! +
+
+ Safe for kids +
+
+ You can leave your kids alone in a room with this product and they won't get hurt (not a guarantee). +
+
+
+ +
+ Un-ordered lists are great for making quick outlines bulleted. +
+ +
+ Ordered lists are great for lists that need order, duh. +
+
    +
  1. + List Item 1 +
    2. +
  2. + List Item 2 +
    3. +
  3. + List Item 3 +
    4. +
+
+
+ Blockquote +
+
+ I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. + + Isaac Asimov + +
+
+
+ Vcard +
+ +
diff --git a/test/dummy/config/routes.rb b/test/dummy/config/routes.rb index 3f66539d..c2c5ff26 100644 --- a/test/dummy/config/routes.rb +++ b/test/dummy/config/routes.rb @@ -1,56 +1,3 @@ Rails.application.routes.draw do - # The priority is based upon order of creation: first created -> highest priority. - # See how all your routes lay out with "rake routes". - - # You can have the root of your site routed with "root" - # root 'welcome#index' - - # Example of regular route: - # get 'products/:id' => 'catalog#view' - - # Example of named route that can be invoked with purchase_url(id: product.id) - # get 'products/:id/purchase' => 'catalog#purchase', as: :purchase - - # Example resource route (maps HTTP verbs to controller actions automatically): - # resources :products - - # Example resource route with options: - # resources :products do - # member do - # get 'short' - # post 'toggle' - # end - # - # collection do - # get 'sold' - # end - # end - - # Example resource route with sub-resources: - # resources :products do - # resources :comments, :sales - # resource :seller - # end - - # Example resource route with more complex sub-resources: - # resources :products do - # resources :comments - # resources :sales do - # get 'recent', on: :collection - # end - # end - - # Example resource route with concerns: - # concern :toggleable do - # post 'toggle' - # end - # resources :posts, concerns: :toggleable - # resources :photos, concerns: :toggleable - - # Example resource route within a namespace: - # namespace :admin do - # # Directs /admin/products/* to Admin::ProductsController - # # (app/controllers/admin/products_controller.rb) - # resources :products - # end + root to: "styleguide#show" end