SWAMPy

✎ CARVE FLESH

EDITING: show.html.erb

<%
# Copyright (C) 2015 - 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 <http://www.gnu.org/licenses/>.
%>

<%
  js_bundle :theme_preview
  css_bundle :theme_preview
%>

<h1 class="theme-preview__page-header"><%= t('Welcome to the Canvas Theme Editor') %></h1>
<p>
  <%= t do %>
    This sample page includes common UI elements in Canvas to help you build your custom branding. Once you start making changes to color values and images, you will see a <b>Preview Your Changes</b> button. Click it to refresh this page and see how your changes look.
    <% end %>
</p>
<p>
  <%= t do %>
    <em>Important note: Educational institutions have an obligation to make their content as accessible as possible. Instructure recommends at least a 4.5:1 text-to-background-color ratio to keep your text readable. Easily test your contrast ratios with the
    <%= link_to "WebAIM Color Contrast Checker", "http://webaim.org/resources/contrastchecker/" %></em>.
  <% end %>
</p>
<br />
<div class="content-box">
  <div class="grid-row">
    <div class="col-xs-12 col-md-7">
      <p style="margin-top: 0;">Set Canvas' default text color using the <b>Main Text Color</b> field in Theme Editor. Check this text after you change it to see your edits.</p>
      <div class="ic-Form-group">
        <div class="ic-Form-control">
          <label for="theme-preview-input-1" class="ic-Label"><%= t('Text input') %></label>
          <input type="text" id="theme-preview-input-1" class="ic-Input" ></input>
        </div>
        <div class="ic-Form-control">
          <label for="theme-preview-input-3" class="ic-Label"><%= t('Select input') %></label>
          <select id="theme-preview-input-3" class="ic-Input">
            <option><%= t('Option 1') %></option>
            <option><%= t('Option 2') %></option>
            <option><%= t('Option 3') %></option>
            <option><%= t('Option 4') %></option>
          </select>
        </div>
        <div class="ic-Form-control">
          <label class="ic-Label"><%= t('Progress/loading bar') %></label>
          <div class="progress-bar__bar-container">
            <div class="progress-bar__bar" style="width: 70%;"></div>
          </div>
        </div>
        <div class="ic-Form-control">
          
          <label class="ic-Super-toggle--ui-switch" for="theme-preview-input-8">
            <div class="ic-Label"><%= t('Switch-style checkbox') %></div>
            <input type="checkbox" id="theme-preview-input-8" class="ic-Super-toggle__input">
            <div class="ic-Super-toggle__container" aria-hidden="true" data-checked="Option A is selected" data-unchecked="Option B is selected">
              <div class="ic-Super-toggle__option--LEFT">
                <i class="icon-muted"></i>
              </div>
              <div class="ic-Super-toggle__switch"></div>
              <div class="ic-Super-toggle__option--RIGHT">
                <i class="icon-unmuted"></i>
              </div>
             </div>
           </label>
          
        </div>
        <div class="ic-Checkbox-group">
          <div class="ic-Form-control ic-Form-control--checkbox">
            <input type="checkbox" id="theme-preview-input-4" checked>
            <label class="ic-Label" for="theme-preview-input-4"><%= t('Regular-style checkbox') %></label>
          </div>
        </div>
        <div class="ic-Form-control ic-Form-control--radio">
          <div class="ic-Radio">
            <input id="theme-preview-input-5" type="radio" value="hoodie" name="demo-radio-horiz-group-2" checked>
            <label for="theme-preview-input-5" class="ic-Label"><%= t('Radio button option 1') %></label>
          </div>
          <div class="ic-Radio">
            <input id="theme-preview-input-6" type="radio" value="frisbee" name="demo-radio-horiz-group-2">
            <label for="theme-preview-input-6" class="ic-Label"><%= t('Radio button option 2') %></label>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-md-4 off-md-1">
      <div>
        <button type="button" class="Button Button--primary Button--block"><%= t('Primary color button') %></button>
        <div class="content-box-mini">
          <button type="button" class="Button Button--primary Button--block" disabled><%= t('Primary color button disabled') %></button>
        </div>
        <div class="content-box-mini">
          <button type="button" class="Button Button--secondary Button--block"><%= t('Secondary color button') %></button>
        </div>
        <div class="content-box-mini">
          <button type="button" class="Button Button--secondary Button--block" disabled><%= t('Secondary color button disabled') %></button>
        </div>
        <div class="al-dropdown__container">
          <a class="al-trigger Button Button--block" role="button" href="#">
            <%= t('Click to test dropdown') %>
            <i class="icon-mini-arrow-down"></i>
          </a>
          <ul class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false">
            <li>
              <a href="#" class="icon-edit" tabindex="-1" role="menuitem"><%= t('Dropdown option 1') %></a>
            </li>
            <li>
              <a href="#" class="icon-trash" tabindex="-1" role="menuitem"><%= t('Dropdown option 2') %></a>
            </li>
          </ul>
        </div>
        <div class="content-box">
          <ul>
            <li><a href="#"><%= t('Link number 1') %></a></li>
            <li><a href="#"><%= t('Link number 2') %></a></li>
            <li><a href="#"><%= t('Link number 3') %></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<ul class="ig-list" id="cond_group_1">
  <li>
    <div class="ig-row">
      <div class="ig-row__layout">
        <div class="ig-type-icon" aria-hidden="true">
          <i class="icon-assignment"></i>
        </div>
        <div class="ig-info">
          <a href="#" class="ig-title">
            <%= t('An Assignment Name') %>
          </a>
          <div class="ig-details">
            <div class="ig-details__item"><b>Due</b> Nov 4</div>
            <div class="ig-details__item"><b>Available</b> Nov 1</div>
            <div class="ig-details__item">10 pts</div>
          </div>
        </div>
        <div class="ig-admin">
          <span
            class="publish-icon publish-icon-publish"
            data-tooltip=""
            title="Publish"
            role="button"
            tabindex="0">
            <i class="icon-unpublish"></i>
            <span class="publish-text" tabindex="-1">
              &nbsp;<%= t('Publish') %>
            </span>
            <span class="screenreader-only accessible_label">
              <%= t('Unpublished. Click to publish.') %>
            </span>
          </span>
          <div class="inline-block">
            <a class="al-trigger al-trigger-gray" href="#" role="button">
              <i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
              <span class="screenreader-only"><%= t('Manage') %></span>
            </a>
            <ul class="al-options">
              <li><a href="#"><%= t('Edit') %></a></li>
              <li><a href="#"><%= t('Delete') %></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="ig-row ig-published">
      <div class="ig-row__layout">
        <div class="ig-type-icon" aria-hidden="true">
          <i class="icon-assignment"></i>
        </div>
        <div class="ig-info">
          <a href="#" class="ig-title">
            <%= t('Another Assignment Name') %>
          </a>
          <div class="ig-details">
            <div class="ig-details__item"><b>Due</b> June 20</div>
            <div class="ig-details__item"><b>Available</b> May 1</div>
            <div class="ig-details__item">100 pts</div>
          </div>
        </div>
        <div class="ig-admin">
          <span
            class="publish-icon publish-icon-publish"
            data-tooltip=""
            title="Publish"
            role="button"
            tabindex="0">
              <i class="icon-unpublish"></i>
              <span class="publish-text" tabindex="-1">
                &nbsp;<%= t('Publish') %>
              </span>
              <span class="screenreader-only accessible_label">
                <%= t('Unpublished. Click to publish.') %>
              </span>
            </span>
          <div class="inline-block">
            <a class="al-trigger al-trigger-gray" href="#" role="button">
              <i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
              <span class="screenreader-only"><%= t('Manage') %></span>
            </a>
            <ul class="al-options">
              <li><a href="#"><%= t('Edit') %></a></li>
              <li><a href="#"><%= t('Delete') %></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>
<div class="content-box">
  <div class="ic-app-nav-toggle-and-crumbs ic-app-nav-toggle-and-crumbs--theme-preview">
    <button type="button" aria-hidden="true" class="Button Button--link ic-app-course-nav-toggle">
      <i class="icon-hamburger"></i>
    </button>
    <div class="ic-app-crumbs">
      <nav aria-label="breadcrumbs" id="breadcrumbs" role="navigation">
        <ul>
          <li class="home">
            <a href="#">
              <span class="ellipsible">
                <i class="icon-home" title="My Dashboard"></i>
              </span>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="ellipsible"><%= t('Breadcrumb 1') %></span>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="ellipsible"><%= t('Breadcrumb 2') %></span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="content-box">
    <div class="grid-row">
      <div class="col-xs-12 col-md-3">
        <div class="list-view">
          <nav class="theme-preview" aria-label="context" role="navigation">
            <ul>
              <li><a href="#"><%= t('Context nav link') %></a></li>
              <li><a class="active" href="#"><%= t('Context nav link active') %></a></li>
              <li><a href="#"><%= t('Context nav link') %></a></li>
              <li><a href="#"><%= t('Context nav link') %></a></li>
              <li><a href="#"><%= t('Context nav link') %></a></li>
            </ul>
          </nav>
        </div>
      </div>
      <div class="col-xs-12 col-md-8 off-md-1">
        <table class="ic-Table ic-Table--hover-row">
          <thead>
            <tr>
              <th><%= t('Name') %></th>
              <th><%= t('Email address') %></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><a href="#">Joe Bloggs</a></td>
              <td>jbloggs1980@gmail.com</td>
            </tr>
            <tr>
              <td><a href="#">Jane Doe</a></td>
              <td>jane-doe-11@hotmail.com</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<div class="grid-row">
  <div class="col-xs-12 col-lg-7">
    <div class="content-box-mini">
      <div id="theme-preview-tabs">
        <ul>
          <li><a href="#tabs-1"><%= t('Tab 1') %></a></li>
          <li><a href="#tabs-2"><%= t('Tab 2') %></a></li>
          <li><a href="#tabs-3"><%= t('Tab 3') %></a></li>
        </ul>
        <div id="tabs-1"><%= t('Tab 1 content') %></div>
        <div id="tabs-2"><%= t('Tab 2 content') %></div>
        <div id="tabs-3"><%= t('Tab 3 content') %></div>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-lg-4 off-lg-1">
    <div class="content-box-mini">
      <div class="accordion ui-accordion--mini" id="theme-preview-accordion">
        <h3><a href="#"><%= t('Accordion Section 1') %></a></h3>
        <div>
          <div class="pad-box-mini">
            <%= t('Content for Section 1') %>
          </div>
        </div>
        <h3><a href="#"><%= t('Accordion Section 2') %></a></h3>
        <div>
          <div class="pad-box-mini">
            <%= t('Content for Section 2') %>
          </div>
        </div>
        <h3><a href="#"><%= t('Accordion Section 3') %></a></h3>
        <div>
          <div class="pad-box-mini">
            <%= t('Content for Section 3') %>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="content-box theme-preview__login">
  <h3 id="login-preview">
    <%= t('Login') %>
  </h3>
  <div class="ic-login--theme-preview">
    <iframe id="login-preview-iframe" src="<%= canvas_login_url(previewing_from_themeeditor: true) %>" title="<%= t('Login') %>" ></iframe>
  </div>
</div>

CANCEL

Name	Type	Size	Modified	Actions
↩ ..	DIR	—	—
📄 show.html.erb	ERB	13.1 KB	2023-09-24 03:36	EDIT