express_ui 0.5.0 → 0.5.1

data/app/views/express_ui/scripts/_popup.html.et

@@ -1,58 +0,0 @@
-para {
-  text_node 'ExpressUI uses Magnific Pop-up.'
-  a(href: 'http://dimsemenov.com/plugins/magnific-popup/documentation.html', title: 'Magnific Pop-up documentation') { 'See documentation' }
-  text_node 'and usage guidelines.'
-}
-
-para {
-  text_node 'To add a header and footer/pop-up actions to the pop-up, you may use the '
-  link_to '<code>popup()</code> component'.html_safe, uicomponents_path(anchor: "pop-up")
-}
-
-table {
-  thead {
-    th { "Class" }
-    th { "Notes" }
-  }
-  tbody {
-    tr {
-      td {
-        code { ".ae-popup-link" }
-        text_node '+ href'
-        code { "#sample-popup" }
-      }
-      td { "Required. This link triggers the pop-up" }
-    }
-    tr {
-      td {
-        code { ".ae-popup" }
-        text_node '+ ID'
-        code { "sample-popup" }
-      }
-      td { "Required. Pop-up contents" }
-    }
-    tr {
-      td {
-        code { ".ae-popup" }
-        text_node '+'
-        code { ".ae-popup-sm" }
-        code { ".ae-popup-md" }
-        code { ".ae-popup-lg" }
-      }
-      td { "Optional. Specify pop-up size" }
-    }
-  }
-}
-
-
-code_demo {
-  %Q{
-    a(href: "#sample-popup", class: "ae-popup-link ae-btn ae-btn-primary ae-btn-md") { 'Open Popup' }
-
-    div(id: "sample-popup", class: "mfp-hide ae-popup ae-popup-sm") {
-      para { 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet vestibulum enim, eu malesuada dolor mollis a. Quisque mollis pulvinar enim id malesuada. Sed sit amet libero libero. Nullam velit erat, fringilla sit amet porttitor et, facilisis vitae lectus. Fusce eget nisl sagittis metus faucibus placerat et eget ligula. Duis eget augue maximus, fermentum velit at, bibendum nulla. Cras a libero mi. Sed ac feugiat justo. Maecenas euismod ex enim, eget auctor velit sollicitudin scelerisque. Suspendisse placerat pellentesque mauris nec accumsan. Quisque volutpat, sapien eget interdum fringilla, ex lectus aliquam elit, eget faucibus libero lectus a sem.'
-      }
-    }
-  }
-}
-

data/app/views/express_ui/scripts/_select.html.et

@@ -1,27 +0,0 @@
-para {
-  text_node 'AppExpress uses select2 dropdown to style select inputs.'
-  a(href: 'https://select2.github.io/examples.html', title: 'select2 documentation') { 'See documentation' }
-  text_node 'and usage guidelines.'
-}
-
-table {
-  thead {
-    th { "Class" }
-    th { "Notes" }
-  }
-  tbody {
-    tr {
-      td {
-        code { ".ae-select" }
-      }
-      td { "Required. This div class inserts the select2 dropdown." }
-    }
-    tr {
-      td {
-        code { "<select><option></option>
-        </select>" }
-      }
-      td { "Required. Select2 transforms this select into a dropdown list." }
-    }
-  }
-}

data/app/views/express_ui/scripts/_slider.html.et

@@ -1,58 +0,0 @@
-para {
-  text_node 'ExpressUI uses ionRangeSlider to render single and double-range sliders. A single slider uses one knob that users can move to select a value within a range, while a double slider lets users move two knobs to select minimum and maximum values within a range.'
-  a(href: 'https://github.com/IonDen/ion.rangeSlider', title: 'ionRangeSlider documentation') { 'See documentation' }
-  text_node 'and usage guidelines.'
-}
-
-table {
-  thead {
-    th { "Code" }
-    th { "Notes" }
-  }
-  tbody {
-    tr {
-      td {
-        code { "$('#ae-single-slider').ionRangeSlider();" }
-      }
-      td { "Required Javascript. This script initializes the default, single range slider." }
-    }
-
-    tr {
-      td {
-        code {
-          "$('#ae-double-slider').ionRangeSlider({
-         		type: 'double',
-						min: 0,
-						max: 5000,
-						from: 1000,
-						to: 4000,
-        	});"
-        }
-      }
-      td { "Required Javascript. This script initializes the double range slider, sets the minimum and maximum values and other customization values." }
-    }
-
-
-    tr {
-      td {
-        code { '<input id="ae-single-slider" type="text"></input>' }
-      }
-      td { "Required mark-up. The Javascript inserts the single slider through this ID." }
-    }
-
-    tr {
-      td {
-        code { '<input id="ae-double-slider" type="text"></input>' }
-      }
-      td { "Required mark-up. The Javascript inserts the double slider through this ID." }
-    }
-  }
-}
-
-code_demo {
-  %Q{
-  	input(id: 'ae-double-slider', type: 'text')
-  	input(id: 'ae-single-slider', type: 'text')
-  }
-}
-

data/app/views/express_ui/scripts/_tabs.html.et

@@ -1,17 +0,0 @@
-code_demo {
-  %Q{
-    ul(class: 'ae-tabs') {
-      li(class: 'ae-tab active-tab', 'data-tab' => 'ae-tab-content1') {
-        'Tab content 1'
-      }
-      li(class: 'ae-tab', 'data-tab' => 'ae-tab-content1') {
-        'Tab content 2'
-      }
-    }
-
-    div(id: 'ae-tab-content1', class: 'ae-tab-content  active-tab') { 'Tab content 2' }
-
-    div(id: 'ae-tab-content2', class: 'ae-tab-content') { 'Tab content 2' }
-  }
-}
-

data/app/views/express_ui/scripts/index.html.erb

@@ -1,46 +0,0 @@
-<%= render "express_ui/shared/header" %>
-<div class="ae-template-content-sidebar-fixed">
-  <%= render "express_ui/shared/sidebar_left" %>
-
-  <div class="ae-content content">
-    <%= render "express_ui/shared/search_box" %>
-    <h1>Scripts</h1>
-    <div class="js-anchorific-content">
-      <h2>Accordion</h2>
-      <section>
-        <%= render "express_ui/scripts/accordion" %>
-      </section>
-      <h2>Calendar</h2>
-      <section>
-        <%= render "express_ui/scripts/calendar" %>
-      </section>
-      <h2>Carousel</h2>
-      <section>
-        <%= render "express_ui/scripts/carousel" %>
-      </section>
-      <h2>Datepicker</h2>
-      <section>
-        <%= render "express_ui/scripts/datepicker" %>
-      </section>
-      <h2>Pop-up</h2>
-      <section>
-        <%= render "express_ui/scripts/popup" %>
-      </section>
-
-      <h2>Select</h2>
-      <section>
-        <%#= render "express_ui/scripts/select" %>
-      </section>
-
-      <h2>Slider</h2>
-      <section>
-        <%= render "express_ui/scripts/slider" %>
-      </section>
-
-      <h2>Tabs</h2>
-      <section>
-        <%= render "express_ui/scripts/tabs" %>
-      </section>
-    </div>
-  </div>
-</div>

data/app/views/express_ui/uicomponents/_buttons.html.et

@@ -1,10 +0,0 @@
-
-h3 { 'command_button()'}
-section {
-  code_demo {
-    %Q{
-      command_button() {
-      }
-    }
-  }
-}

data/app/views/express_ui/uicomponents/_flash_message.html.et

@@ -1,19 +0,0 @@
-h3 { 'flash_message' }
-section {
-  code_demo {
-    %Q{
-      flash_message()
-    }
-  }
-}
-
-
-h3 { 'error_message()' }
-section {
-  code_demo {
-    %Q{
-      error_message()
-    }
-  }
-}
-

data/app/views/express_ui/uicomponents/_forms.html.et

@@ -1,118 +0,0 @@
-h3 { "input()" }
-section {
-  code_demo {
-    %Q{
-      input(
-        class: 'ae-text-field ae-input-sm',
-        type: "text",
-        name: "text",
-        value: "Enter a word",
-        placeholder: "Enter some text"
-      )
-    }
-  }
-}
-
-h3 { "smart_form()" }
-section {
-  code_demo {
-    %Q{
-      smart_form(){
-      }
-    }
-  }
-}
-
-h3 { 'express_form()'}
-section {
-  code_demo {
-    %Q{
-      express_form() {
-      }
-    }
-  }
-}
-
-
-h3 { "Search" }
-section {
-
-  para {
-    "A search form always contains a search field and reset search field button. Search button is optional. Search on \"enter\" key is always enabled."
-  }
-
-  table {
-    thead {
-      th { "Properties" }
-      th { "Notes" }
-    }
-    tbody {
-      tr {
-        td { code { "maxLength" } }
-        td { "auto or string" }
-      }
-
-      tr {
-        td { code { "grouping" } }
-        td { "inline, horizontal, or single_line" }
-      }
-
-      tr {
-        td { code { "button"} }
-        td { "true or false" }
-      }
-    }
-  }
-
-  code_demo {
-    %Q{
-      search_form(
-        name: "",
-        maxlength: "",
-        class: "",
-        placeholder: "Enter a keyword and hit enter",
-        value: "",
-        grouping: "single_line",
-        button: true,
-        button_text: "Search"){
-      }
-    }
-  }
-}
-
-h3 { "Express Billing" }
-section {
-  para { "Credit card form, coupon code" }
-}
-
-h3 { 'code_editor()'}
-section {
-  code_demo {
-    %Q{
-      express_form() {
-        code_editor()
-      }
-    }
-  }
-}
-
-
-h3 { 'country_select()'}
-section {
-  code_demo {
-    %Q{
-      express_form() {
-        country_select :country_code, label: "Country", class: form_field_class(:country)
-      }
-    }
-  }
-}
-
-h3 { "media_form()" }
-section {
-  code_demo {
-    %Q{
-      media_form()
-    }
-  }
-}

data/app/views/express_ui/uicomponents/_heading.html.et

@@ -1,24 +0,0 @@
-section {
-  para {
-    text_node "Heading blocks ("
-    code { "<h1>" }
-    text_node "to"
-    code { "<h6>" }
-    text_node ") can have optional icon and extra text."
-  }
-
-  para {
-    text_node "To use icons inside headers, see the"
-    code { "fa_icon" }
-    text_node "component guide."
-  }
-
-  code_demo {
-    %Q{
-      heading(){
-        text_node "Heading"
-        fa_icon "class"
-      }
-    }
-  }
-}

data/app/views/express_ui/uicomponents/_icons.html.et

@@ -1,35 +0,0 @@
-h3 { 'icon()' }
-
-section {
-  para {
-    text_node "Font Awesome (FA) has over 600 icons for commercial use. To use FA icons in ExpressUI, use the"
-    code { "icon" }
-    text_node "component. Simply look for the FA class and append it as a value. No need to prepend the"
-    code { ".fa-" }
-    text_node "icon class as instructed in the FA document because ExpressUI already automatically prepends it. To know which classes to use, see the"
-    a(href: 'http://fontawesome.io/icons/') { "Font Awesome documentation" }
-    text_node "."
-  }
-
-  code_demo {
-    %Q{
-      icon 'close'
-      icon 'check'
-    }
-  }
-}
-
-h3 { 'icon_link()' }
-section {
-  code_demo {
-    %Q{
-      icon_link(
-        'cancel',
-        text: 'View Site',
-        href: '/',
-        target: '_blank'
-      )
-    }
-  }
-
-}

data/app/views/express_ui/uicomponents/_layout.html.et

@@ -1,47 +0,0 @@
-h3 { "header()" }
-section {
-  para { "The header consists of a logo and main nav on the left. A secondary nav on the right is optional." }
-
-code_demo {
-"header() {
-  'Header contents here'
-}"
-}
-}
-
-h3 { "sidebar_region()" }
-section {
-  div(class: 'demo-container') {
-    render 'express_ui/uicomponents/sidebar'
-  }
-}
-
-h3 { "main_region()" }
-section {
-code_demo {
-"main_region() {
-  p 'This block of text goes right into the contents.'
-}"
-}
-}
-
-h3 { "page_header()" }
-section {
-code_demo {
-"content_for(:page_header) {
-  h1 'Welcome to Express UI'
-  p 'This block of text goes right into the page header.'
-}"
-}
-}
-
-h3 { "footer()" }
-section {
-  para { "(Nav, logo, social media inks)" }
-
-  code_demo {
-    "footer() {
-      'Footer contents here'
-    }"
-  }
-}