From 6d0a1f391decbf216c7cc84e7772919b71d3b825 Mon Sep 17 00:00:00 2001 From: Pam Hiett Date: Thu, 7 Sep 2017 13:41:57 -0600 Subject: [PATCH] [Bootstrap cleanup] Get rid of old old styleguide Fixes: CNVS-39094 test plan: - navigate to http://localhost:3000/old_styleguide - it should no longer be accessible :D Change-Id: I6dc809d32656ee98822303eb174c00a6289a5e9d Reviewed-on: https://gerrit.instructure.com/125248 Tested-by: Jenkins Reviewed-by: Chris Hart Product-Review: Chris Hart QA-Review: Dan Sasaki --- app/views/info/old_styleguide.html.erb | 1394 ------------------------ config/routes.rb | 1 - 2 files changed, 1395 deletions(-) delete mode 100644 app/views/info/old_styleguide.html.erb diff --git a/app/views/info/old_styleguide.html.erb b/app/views/info/old_styleguide.html.erb deleted file mode 100644 index 1d28802b990..00000000000 --- a/app/views/info/old_styleguide.html.erb +++ /dev/null @@ -1,1394 +0,0 @@ -<% -# Copyright (C) 2012 - present Instructure, Inc. -# -# This file is part of Canvas. -# -# Canvas is free software: you can redistribute it and/or modify it under -# the terms of the GNU Affero General Public License as published by the Free -# Software Foundation, version 3 of the License. -# -# Canvas is distributed in the hope that it will be useful, but WITHOUT ANY -# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR -# A PARTICULAR PURPOSE. See the GNU Affero General Public License for more -# details. -# -# You should have received a copy of the GNU Affero General Public License along -# with this program. If not, see . -%> - -<% - js_bundle :styleguide - @body_classes << "right-side-optional" -%> - - - - -<% content_for :right_side do %> -

Page Action List

- -
- NOTE: it doesn't matter - if you use <ul> and <li> or - a flat list of <a>s -
- -<% end %> - - -
- - -

Canvas uses bootstrap!

-

Rather than copy/pasting all their docs here, We're just going to focus on a few - key things and the things we do different. Go Read the bootstrap docs to see what you can do.

-

There are a few parts of boostrap we dont use and here's why:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Bootstrap FileReason
navbarWe just don't use them yet. no reason we couldn't. They're commented out to just so we transfer less css over the wire. If you want them just uncomment it in app/stylesheets/bootstrap_parts/_main.scss
pager
sprites (aka glyphicons)We do our own font based icons.
button-groups - We use jqueryUI buttonsets instead. - They are more accessible (because they use aria stuff and are built on top of native checkbox and radios) -
modalsUse jqueryUI .dialog instead.
popoversYou can have popovers that look exactly like bootstrap ones, ours are just built off jqueryUI tooltips. see below.
progress-barsUse jqueryUI progressbarsinstead, they have aria stuff that reads back to the screenreader their progress.
accordionUse jqueryUI instead.
- -
-
-

Responsive design Grid Resize this page to see it in action

-

Since our interface is resizable you can only use a fluid grid. we just have the default bootstrap fluid grid. see their docs for more info. Use .spanX to have an element span 'X' number of columns.

-
-

span 2

-

span 2

-

span 8

-
-

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

-
    -
  • Modify the width of column in our grid
    • -
  • Stack elements instead of float wherever necessary
    • -
  • Resize headings and text to be more appropriate for devices
    • -
-

Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.

- -

Responsive utility classes

-

For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPhones 767px and belowTablets 979px to 768pxDesktops Default
.visible-phoneVisible
.visible-tabletVisible
.visible-desktopVisible
.hidden-phoneVisibleVisible
.hidden-tabletVisibleVisible
.hidden-desktopVisibleVisible
- -

Responsive utilities test case

-

Resize your browser or load on different devices to test the above classes.

-

Visible on...

-

Green checkmarks indicate that class is visible in your current viewport.

-
    -
  • Phone✔ Phone
    • -
  • Tablet✔ Tablet
    • -
  • Desktop✔ Desktop
    • -
-

Hidden on...

-

Here, green checkmarks indicate that class is hidden in your current viewport.

-
    -
  • Phone✔ Phone
    • -
  • Tablet✔ Tablet
    • -
  • Desktop✔ Desktop
    • -
- -
- -
-

Components we've made

- -
-
-

Content Box

-
-

The content-box doesn't do much on its own, sets a background color and some padding for direct children.

-

The borders aren't defined because border logic varies so much between designs. Use the border classes to define them.

-
-
- -
-

Content Box with Toolbar

-
-
-

Toolbar Header

-
-
-

- The first element of a this content box is a .toolbar. -

-

- It also has the classes border border-trbl border-round to make the borders. -

-
-
-
-
- -
-
-

List View

-
-
header
- - -
Foo bar
- -
-
- - -
-

Vertical Gutter

-

We've added v-gutter and v-gutter-large classes to add some vertical margin to an element equal to the grid's gutters (and * 1.5 for large).

-
-
- -

ImageBlock

-
-
-
- -
-
-

Image blocks float an image (or any content) to the left and keep the content from wrapping beneath it.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
-
-
-
- -
-
- -
-

Can you nest image blocks? Fer sure.

-

You can totally nest them like a champion for as long as you like, image-block don't care.

-
- -
-

You can totally nest them like a champion.

-
-
-
-
-
-
- - - - -

Admin Links testing

-
-
- - -
Manage (will be accessibly hidden)
- - -
-

This is an example of using .admin-links

-

here is what the code should look like:

- 
-      <div class="admin-link-hover-area">
-        <div class="admin-links">
-          <button class="al-trigger ui-button"><span class="al-trigger-inner">Manage (will be accessibly hidden)</span></button>
-          <ul class="al-options">
-            <li><a href="#"><span class="ui-icon ui-icon-pencil"></span>Edit</a></li>
-            <li><a href="#"><span class="ui-icon ui-icon-trash"></span>Delete (from database)</a></li>
-            <li><a href="#"><span class="ui-icon ui-icon-trash"></span>Hide from this screen</a></li>
-            <li><a href="#">an option with no icon</a></li>
-          </ul>
-        </div>
-        put all of the content here
-      </div>
-
-
- - -

Icons

-

The "icon-" classes below can only be added to the semantically neutral "i" element. The one exception is text links, to which you can apply the icon class directly (see below for more details).

-
-

icons on <a>s

-

you can use the same icon classes to add an icon to a plain link. Just add the icon-<whatever> class to the <a>

-

- examples: -
- Do this <a class="icon-add" href="#"></a> -
- NOT this <a href="#"><i class="icon-add"></i></a> <-- DONT USE THIS CODE -

- notice how the second, when you hover it, has an underline that creeps out too far to the left? -
- - icon-zipped - icon-paperclip - icon-media - icon-address-book - icon-announcement - icon-reset - icon-analytics - icon-stats - icon-student-view - icon-calendar-day - icon-trash - icon-speed-grader - icon-copy-course - icon-import-content - icon-export-content - icon-discussion - icon-peer-review - icon-discussion-reply - icon-discussion-new - icon-edit - icon-home - icon-settings - icon-compose - icon-flag - icon-video - icon-audio - icon-outdent - icon-indent - icon-outdent2 - icon-indent2 - icon-forward - icon-warning - icon-filmstrip - icon-rubric - icon-check-plus - icon-rss - icon-rss-add - icon-quiz - icon-question - icon-drop-down - icon-minimize - icon-end - icon-add - icon-info - icon-check - icon-clock - icon-calendar-month - icon-x - icon-refresh - icon-off - icon-updown - icon-user-add - icon-group - icon-star - icon-replied - icon-hour-glass - icon-assignment - icon-message - icon-note-dark - icon-note-light - icon-tag - icon-next-unread - icon-search - icon-lock - icon-unlock - icon-rubric-dark - icon-folder - icon-toggle-right - icon-toggle-left - icon-link - icon-lti - icon-text - icon-timer - icon-pin - icon-like - icon-collection-save - icon-collection - icon-group-new - icon-group-new-dark - icon-user - icon-standards - icon-search-address-book - icon-facebook - icon-facebook-boxed - icon-linkedin - icon-twitter - icon-twitter-boxed - icon-github - icon-skype - icon-wordpress - icon-pinterest - icon-gradebook - icon-document - icon-module - icon-arrow-up - icon-arrow-down - icon-arrow-left - icon-arrow-right - icon-mini-arrow-up - icon-mini-arrow-down - icon-mini-arrow-left - icon-mini-arrow-right - icon-email - icon-instructure - icon-ms-word - icon-ms-excel - icon-ms-ppt - icon-pdf - icon-apple - icon-windows - icon-android - icon-heart - icon-upload - icon-download - icon-text-left - icon-text-center - icon-text-right - icon-mature - icon-prerequisite - icon-educators - icon-materials-required - icon-not-graded - icon-peer-graded - icon-bookmark - icon-printer - icon-image - icon-expand - icon-collapse - icon-invitation - icon-muted - icon-unmuted - icon-plus - icon-publish - icon-draft - - - - - - - - -
-
-

Forms

-

TONZ more docs about forms can be found on the bootstrap docs

-

Bootstrap provides simple markup and styles for four styles of common web forms.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameClassDescription
Vertical (default).form-vertical (not required)Stacked, left-aligned labels over controls
Inline.form-inlineLeft-aligned label and inline-block controls for compact style
Search.form-searchExtra-rounded text input for a typical search aesthetic
Horizontal.form-horizontalFloat left, right-aligned labels on same line as controls
- - -

Example forms using just form controls, no extra markup

-
-
-

Basic form

-

Smart and lightweight defaults without extra markup.

-
- - -

Example block-level help text here.

- - -
- 
-  <form class="well bootstrap-form">
-    <label>Label name</label>
-    <input type="text" class="span3" placeholder="Type something…">
-    <span class="help-block">Example block-level help text here.</span>
-    <label class="checkbox">
-      <input type="checkbox"> Check me out
-    </label>
-    <button type="submit" class="btn">Submit</button>
-  </form>
-
-
-
-

Search form

-

Add .form-search to the form and .search-query to the input.

-
- - -
- 
-  <form class="well form-search">
-    <input type="text" class="input-medium search-query">
-    <button type="submit" class="btn">Search</button>
-  </form>
-
- -

Inline form

-

Add .form-inline to finesse the vertical alignment and spacing of form controls.

-
- - - - -
- 
-  <form class="well form-inline">
-    <input type="text" class="input-small" placeholder="Email">
-    <input type="password" class="input-small" placeholder="Password">
-    <label class="checkbox">
-      <input type="checkbox"> Remember me
-    </label>
-    <button type="submit" class="btn">Sign in</button>
-  </form>
-
-
-
- - -

Horizontal forms

-

This is the main type of form that we use in canvas

- -
-
-
- -
- -

In addition to freeform text, any HTML5 text-based input appears like so.

-
-
-
- -
- -

- to get an input like this with the little calendar button to the right,
- start with an <input type="text">, select it
- and call .datetime_field() on it. -

-
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- Some value here -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - - - - - -

Use the same .span* classes from the grid system for input sizes.

-
-
-
- -
- - - -

You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., input vs. select).

-
-
-
- -
-
- @ -
-

Here's some help text

-
-
-
- -
-
- .00 -
- Here's more help text -
-
-
- -
-
- $.00 -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
- - - -
-
-
- -
- - - -

Note: Labels surround all the options for much larger click areas and a more usable form.

-
-
-
- -
- - -
-
-
- - -
-
-
- - -

Example markup

-

Given the above example form layout, here's the markup associated with the first input and control group. The .control-group, .control-label, and .controls classes are all required for styling.

- 
-    <form class="form-horizontal">
-      <fieldset>
-        <legend>Legend text</legend>
-        <div class="control-group">
-          <label class="control-label" for="input01">Text input</label>
-          <div class="controls">
-            <input type="text" class="input-xlarge" id="input01">
-            <p class="help-block">Supporting help text</p>
-          </div>
-        </div>
-      </fieldset>
-    </form>
-
- -

Block level inputs

-

Make any <input> or <textarea> element behave like a block level element.

-
-
- -
-
- - - -
-
- - -
- -
-

jQuery UI

-

This page demonstrates all available components of our jQuery UI port.

- - -

Highlight / Error

-

-

-

- Hey! Sample ui-state-highlight style.

-
-

- - -

-

-

Ruh-roh: Sample ui-state-warning style.

-
-

- - -

-

-

- Alert: Sample ui-state-error style.

-
-

- - -

-

-

Ohai: Sample ui-state-success style.

-
-

- - -

-

-

- Hello: Sample ui-state-default style.

-
-

- - -
-

Simple toolbar

- - - - - - - - - - - -
- - - - - - -

Autocomplete

-
- - -
- - -

UI Button

-

- Heads up! Don't use .ui-button in your code - it still exists just because of the jqueryUI components that generate them as part of their markup. - This is just to make sure I didn't break that. -

-

- <A href="#"> .ui-button - - a.btn -

- -
.ui-button
-

- - - - - -

- -
.btn
-

- - - - - -

- - -

Icon Buttons

-
- To view all available icon classes, please see the Icons section above. -

To add an icon to a button, simply add an i element within the element with the .btn class. (Please note that icons will be suppressed when added to a button with the btn-mini class because they'd look so small as to be illegible at that size.)

-

- - button class="btn" --> i class="icon-stats" - -

- -
-

- - - - - - -

- - -

Button Toggle

-
- - - -
- - -

Accordion

-
- -
- -

Section 1

-
-

- Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer - ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit - amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut - odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. -

-
-

Section 2

-
-

- Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet - purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor - velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In - suscipit faucibus urna. -

-
-

Section 3

-
-

- Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. - Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero - ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis - lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. -

-
    -
  • List item one
    • -
  • List item two
    • -
  • List item three
    • -
-
-

Section 4

-
-

- Cras dictum. Pellentesque habitant morbi tristique senectus et netus - et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in - faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia - mauris vel est. -

-

- Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. - Class aptent taciti sociosqu ad litora torquent per conubia nostra, per - inceptos himenaeos. -

-
- -
- -
- - -

Tabs

-
- -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget diam nec urna hendrerit tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum aliquam ligula non nulla cursus volutpat. Aliquam malesuada felis nec turpis auctor interdum. Cras et lobortis dolor. Nam sodales, dolor eu cursus faucibus, justo leo vestibulum turpis, id malesuada erat ipsum et leo. Integer id aliquam augue. Proin quis risus magna. Vivamus eget accumsan mauris. Vivamus justo ligula, blandit et consequat nec, vulputate a elit. Morbi feugiat metus in ante scelerisque a pulvinar quam condimentum. Suspendisse potenti. Pellentesque convallis scelerisque nunc eget dapibus. Pellentesque ut enim justo. Fusce egestas urna sed nulla placerat iaculis. Cras dignissim tincidunt molestie. Suspendisse rutrum dignissim tortor quis mollis. Sed tempor feugiat ligula in imperdiet. Quisque molestie viverra erat in adipiscing.
-
Donec porta malesuada massa, at fermentum nunc tincidunt ac. Integer nisi ligula, sodales bibendum interdum id, sodales sit amet orci. In rhoncus libero in purus vestibulum consequat. Aenean vel purus molestie leo pharetra sagittis. In hac habitasse platea dictumst. Quisque bibendum, metus a egestas convallis, est orci dapibus odio, vel pretium ante erat quis ipsum. Praesent at est in odio rhoncus cursus in sollicitudin velit. Aenean auctor molestie hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat nisl eget nisi consequat pretium. Nullam dui purus, commodo a vestibulum nec, semper varius nulla.
-
Mauris tempor urna non quam tincidunt aliquam. Proin venenatis metus eu purus interdum a vehicula ipsum sollicitudin. Mauris sed dignissim odio. Nam id odio sed diam dapibus dignissim. Nulla vestibulum nisl ac magna scelerisque adipiscing. Nam pellentesque sapien vulputate nisi scelerisque ut vehicula orci luctus. Sed rhoncus tempor metus vitae egestas. Proin pharetra tristique justo ac rutrum. Vestibulum ac pharetra dolor. Cras nibh arcu, bibendum eget luctus id, rhoncus nec augue. Integer ornare rhoncus nulla, eu aliquam mi ornare ullamcorper. Praesent egestas auctor orci, non rhoncus sapien eleifend at. Quisque eget purus sem, ut dignissim ligula. Etiam sollicitudin dui libero, id ullamcorper metus.
-
- -

Minimal tabs, add class .ui-tabs-minimal

-
- -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget diam nec urna hendrerit tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum aliquam ligula non nulla cursus volutpat. Aliquam malesuada felis nec turpis auctor interdum. Cras et lobortis dolor. Nam sodales, dolor eu cursus faucibus, justo leo vestibulum turpis, id malesuada erat ipsum et leo. Integer id aliquam augue. Proin quis risus magna. Vivamus eget accumsan mauris. Vivamus justo ligula, blandit et consequat nec, vulputate a elit. Morbi feugiat metus in ante scelerisque a pulvinar quam condimentum. Suspendisse potenti. Pellentesque convallis scelerisque nunc eget dapibus. Pellentesque ut enim justo. Fusce egestas urna sed nulla placerat iaculis. Cras dignissim tincidunt molestie. Suspendisse rutrum dignissim tortor quis mollis. Sed tempor feugiat ligula in imperdiet. Quisque molestie viverra erat in adipiscing.
-
Donec porta malesuada massa, at fermentum nunc tincidunt ac. Integer nisi ligula, sodales bibendum interdum id, sodales sit amet orci. In rhoncus libero in purus vestibulum consequat. Aenean vel purus molestie leo pharetra sagittis. In hac habitasse platea dictumst. Quisque bibendum, metus a egestas convallis, est orci dapibus odio, vel pretium ante erat quis ipsum. Praesent at est in odio rhoncus cursus in sollicitudin velit. Aenean auctor molestie hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat nisl eget nisi consequat pretium. Nullam dui purus, commodo a vestibulum nec, semper varius nulla.
-
Mauris tempor urna non quam tincidunt aliquam. Proin venenatis metus eu purus interdum a vehicula ipsum sollicitudin. Mauris sed dignissim odio. Nam id odio sed diam dapibus dignissim. Nulla vestibulum nisl ac magna scelerisque adipiscing. Nam pellentesque sapien vulputate nisi scelerisque ut vehicula orci luctus. Sed rhoncus tempor metus vitae egestas. Proin pharetra tristique justo ac rutrum. Vestibulum ac pharetra dolor. Cras nibh arcu, bibendum eget luctus id, rhoncus nec augue. Integer ornare rhoncus nulla, eu aliquam mi ornare ullamcorper. Praesent egestas auctor orci, non rhoncus sapien eleifend at. Quisque eget purus sem, ut dignissim ligula. Etiam sollicitudin dui libero, id ullamcorper metus.
-
- - -

Modal Dialog

- - - - - -

Progress Bar

-

-

- Animate to random number -

- -

- DON'T USE Jquery UI Icons - Use one of the font based icons above. this is just to make sure we don't break - backward compatibility. -

-
    - -
    • -
    • -
    • - -
    • -
    • - -
    • -
    • -
    • -
    • -
    • -
    • -
    • - -
    • -
    • - -
    • -
    • -
    • -
    • -
    • -
    • -
    • - -
    • -
    • - -
    • -
    • -
    • -
    • -
    • -
    • -
    • - -
    • -
    • - -
    • -
    • -
    • -
    • -
    • -
    • -
    • - -
    • -
    • - -
    • -
    • -
    • -
    • -
    • -
    • -
    • - -
    • -
    • - -
    • -
    • -
    • -
    • -
    • -
    • -
    • - -
    • -
    • - -
    • -
    • -
    • -
    • -
    • -
    • -
    • - -
    • -
    • - -
    • -
    • -
    • -
    • -
    • -
    • -
    • - -
    • -
    • - -
    • -
    • -
    • -
    • -
    • -
    • -
    • - -
    • -
    • - -
    • -
    • -
    • -
    • -
    • -
    • -
    • - -
    • -
    • - -
    • -
    • -
    • -
    • -
    • -
    • -
    • - -
    • -
    • - -
    • -
    • -
    • -
    • -
    • -
    • -
    • - -
    • -
    • - -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • - -
    • - -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • - -
    • - -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • - -
    • - -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • - -
    • - -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • - -
    • - -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • - -
    • - -
    • -
    • -
    • -
    • -
    • -
- - -

Overlay and Shadow Classes (not currently used in UI widgets)

-
-

Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat.

Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci.

Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat.

Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam.

Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante.

Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi.

- - -
-
-
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-
-
- -
-
- -
-

Tooltips

- these links have tooltips: - default - top - right - bottom - left - -
- -
-

Popovers

- Popovers work exactly like tooltips, just add "tooltipClass":"popover" to the data-tooltip attribute
- - Text with popover - -
- - - - - diff --git a/config/routes.rb b/config/routes.rb index 2651f48d775..79b05df5a45 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -817,7 +817,6 @@ CanvasRails::Application.routes.draw do post 'users/toggle_hide_dashcard_color_overlays' => 'users#toggle_hide_dashcard_color_overlays' get 'styleguide' => 'info#styleguide' get 'accounts/:account_id/theme-preview' => 'brand_configs#show' - get 'old_styleguide' => 'info#old_styleguide' root to: 'users#user_dashboard', as: 'root', via: :get # backwards compatibility with the old /dashboard url get 'dashboard' => 'users#user_dashboard', as: :dashboard_redirect