From f344462f2f862ee2269dd7eb0963629f51afd7f6 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Wed, 24 Apr 2013 13:53:49 -0400 Subject: [PATCH] adds code samples to all ui currently defined --- docs/button.html | 311 ++++++++++++--------- docs/form.html | 509 ++++++++++++++++++----------------- docs/javascript/semantic.js | 47 +++- docs/stylesheets/example.css | 27 +- 4 files changed, 501 insertions(+), 393 deletions(-) diff --git a/docs/button.html b/docs/button.html index 04dfd1bd1..d60d3bbf5 100755 --- a/docs/button.html +++ b/docs/button.html @@ -19,6 +19,7 @@ + @@ -138,182 +139,232 @@

Standard

- -

Button:

-
Button
+ +
+

Button:

+

A standard button

+
Button
+

States

- + +

Hover

Changes when a user moves their cursor over it

Hovered Button
- +
+ +

Down

Changes when pressed using touch or mouse events

Pressed Button
- +
+ +

Active

Changes to show it is currently the selected user action

Active Button
- +
+ +

Disabled

Changes to show it is currently unable to be interacted with

Disabled Button
- +
+ +

Loading

Can show a loading indicator:

Loading Button
- +
+ +

Success

Can alert to a succesful action:

Successful Button
- +
+ +

Error

Can alert user of an error:

Error
- -

All together:

-
Normal
-
Hover
-
Down
-
Loading
-

-
Disabled
-
Active
-
Toggled
-
Error
-
Success
- -

Variations

- -

Sizes

-

Can have different sizes:

-
- Mini -
-
- Tiny
-
- Small + +
+

All together:

+
Normal
+
Hover
+
Down
+
Loading
+

+
Disabled
+
Active
+
Toggled
+
Error
+
Success
-
- Medium + +

Variations

+ +
+

Sizes

+

Can have different sizes:

+
+ Mini +
+
+ Tiny +
+
+ Small +
+
+ Medium +
+
+ Large +
+
+ Big +
+
+ Huge +
+
+ Massive +
+
+ Gigantic +
-
- Large + + +
+

Colors

+

Can have different colors:

+
Blue Button
+
Purple Button
-
- Big + +

Feedback

+
+

Can be positive or negative:

+
Positive Button
+
Negative Button
-
- Huge + +
+

Fluid

+

Can fit parent container:

+
Fits container
-
- Massive + +
+

Bubbly

+

Can be bubbly:

+
More bubbly
-
- Gigantic + +
+

Icon

+

Can be formatted as an icon toolbar:

+
+ +
- - -

Colors

-

Can have different colors:

-
Blue Button
-
Purple Button
-

Can be positive or negative:

-
Positive Button
-
Negative Button
- -

Fluid

-

Can fit parent container:

-
Fits container
- -

Bubbly

-

Can be bubbly:

-
More bubbly
- -

Icon

-

Can be formatted as an icon toolbar:

-
- +
+

Vertically Attached

+

Can be attached to the top or bottom of other content

+
Top
+
+
Bottom
- -

Attached

-

Can be attached to the top or bottom of other content

-
Top
-
-
Bottom
-

-

Can be attached to the left or right of other content

-
Left
-
-
Right
+
+

Horizontally Attached

+

Can be attached to the left or right of other content

+
Left
+
+
Right
+
-

-

Can be attached to an input field

-
- -
Search
-
+
+

Form Attached

+

Can be attached to an input field

+
+ +
Search
+
+

Group

- -

Buttons

-

Can exist together as groups

-
-
One
-
Two
-
Three
-
-

Conditionals

-

Groups can be separated by conditionals

-
-
Cancel
-
-
Save
+
+

Buttons

+

Can exist together as groups

+
+
One
+
Two
+
Three
+
+
+ +
+

Conditionals

+

Groups can be separated by conditionals

+
+
Cancel
+
+
Save
+

Plural Variations

Singular variations can be applied to groups to infer all elements share the same quality

- -

Icon

-

Groups can be formatted as icon toolbars

-
-
-
-
+ +
+

Icon

+

Groups can be formatted as icon toolbars

+
+
+
+
+
- -

Fluid

-

Groups can be divided evenly to fit parent

-
-
One
-
Two
-
Three
-
Four
-
Five
+ +
+

Fluid

+

Groups can be divided evenly to fit parent

+
+
One
+
Two
+
Three
+
Four
+
Five
+
- -

Colors

-

Groups can have a shared color

-
-
One
-
Two
-
Three
+ +
+

Colors

+

Groups can have a shared color

+
+
One
+
Two
+
Three
+
+
-
-
-

Sizes

-

Groups can have a shared size

-
-
One
-
Two
-
Three
+ +
+

Sizes

+

Groups can have a shared size

+
+
One
+
Two
+
Three
+
diff --git a/docs/form.html b/docs/form.html index 3f4eda99d..fb6ff947d 100755 --- a/docs/form.html +++ b/docs/form.html @@ -149,43 +149,41 @@

Standard

-

Form:

A form is a collection of user input elements, and has no stylings of its own.

-
-

Let's go ahead and get you signed up.

-
-
- - -
-
- - -
-
-
- - -
-
- - -
-
-
- - +
+

Let's go ahead and get you signed up.

+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+ +
+
Submit
- -
-
Submit
-

Types of Content

-

Field

A field is a form element containing a label and an input

@@ -194,44 +192,51 @@
- -

Text Area

-

A textarea uses the default form element

-
-
- - +
+ +
+

Text Area

+

A textarea uses the default form element

+
+
+ + +
-

Checkbox

-

Checkboxes are styled forms of standard form checkboxes.

-
-
- -
- - +
+

Checkbox

+

Checkboxes are styled forms of standard form checkboxes.

+
+
+ +
+ + +
-
-
- -
- - +
+ +
+ + +
-

Validation

-

Text blocks have special meaning inside a form tag. All message blocks are hidden by default.

-
-
-
We had some issues
-
    -
  • Please enter your first name
    • -
  • Please enter your last name
    • -
+
+

Validation

+

Text blocks have special meaning inside a form tag. All message blocks are hidden by default.

+
+
+
We had some issues
+
    +
  • Please enter your first name
    • +
  • Please enter your last name
    • +
+
@@ -239,142 +244,152 @@

Form

-

Loading

-

If a form is in loading state, it will automatically show a loading indicator:

- -
-
+
+

Loading

+

If a form is in loading state, it will automatically show a loading indicator:

+ +
+
+
+ + +
+
+ + +
+
- - + +
- - + +
-
-
- - -
-
- - -
-
-
- - +
+
+ + +
+
- +
Submit
-
Submit
-

Error

-

If form is in an error state, it will automatically show any error message blocks:

-
-
-
Action Forbidden
-

You can only sign up for an account once with a given e-mail address.

-
-
+
+

Error

+

If form is in an error state, it will automatically show any error message blocks:

+
+
+
Action Forbidden
+

You can only sign up for an account once with a given e-mail address.

+
+
+
+ + +
+
+ + +
+
- - + +
- - + +
-
-
- - -
-
- - -
-
-
- - +
+
+ + +
+
- +
Submit
-
Submit
-

Warning

-

If form is in warning state, it will automatically show any warning message block:

- -
-
-
Could you check something!
-
    -
  • You forgot your first name
    • -
  • And also your last name
    • -
-
-
+
+

Warning

+

If form is in warning state, it will automatically show any warning message block:

+ +
+
+
Could you check something!
+
    +
  • You forgot your first name
    • +
  • And also your last name
    • +
+
+
+
+ + +
+
+ + +
+
- - + +
- - + +
-
-
- - -
-
- - -
-
-
- - +
+
+ + +
+
- +
Submit
-
Submit

Form Fields

-

Error

-

Individual fields may contain an error state

- -
-
-
- - -
-
- - +
+

Error

+

Individual fields may contain an error state

+ +
+
+
+ + +
+
+ + +
-

Disabled

-

Individual fields may be disabled or read only

- -
-
-
- - -
-
- - +
+

Disabled

+

Individual fields may be disabled or read only

+ +
+
+
+ + +
+
+ + +
@@ -383,64 +398,26 @@

Forms

-

Size

-

A form can also be small or large

-
-
-
We had some issues
-
    -
  • Please enter your first name
    • -
  • Please enter your last name
    • -
-
-
-
- - -
-
- - -
-
-
Submit
-
-

-
-
-
We had some issues
-
    -
  • Please enter your first name
    • -
  • Please enter your last name
    • -
-
-
-
- - -
-
- - +
+

Size

+

A form can also be small or large

+
+
+
+ + +
+
+ + +
+
Submit
-
Submit
-
- -

Inverted

-

A form on a dark background may have to invert its color scheme

- -
-
-
-
We had some issues
-
    -
  • Please enter your first name
    • -
  • Please enter your last name
    • -
-
+

+
-
+
@@ -453,47 +430,81 @@
+
+

Inverted

+

A form on a dark background may have to invert its color scheme

+ +
+
+
+
We had some issues
+
    +
  • Please enter your first name
    • +
  • Please enter your last name
    • +
+
+
+
+ + +
+
+ + +
+
+
Submit
+
+
+
+

Fields

-

Inline

-

A field can have its label next to instead of above it.

-
-
-
- - +
+

Inline

+

A field can have its label next to instead of above it.

+
+
+
+ + +
-

Date

-

A field can let users know they are for dates

-
-
- - +
+

Date

+

A field can let users know they are for dates

+
+
+ + +

Groups

-

Field Groups

-

Fields can exist side by side to show relation

-
-
-
- - -
-
- - -
-
- - +
+

Field Groups

+

Fields can exist side by side to show relation

+
+
+
+ + +
+
+ + +
+
+ + +
diff --git a/docs/javascript/semantic.js b/docs/javascript/semantic.js index 1770e13e2..f9aaf8093 100755 --- a/docs/javascript/semantic.js +++ b/docs/javascript/semantic.js @@ -14,7 +14,7 @@ semantic.ready = function() { $demo = $('.demo'), $waypoints = $('h2'), - $exampleCode = $('.example i.code'), + $example = $('.example'), $peek = $('.peek'), $peekMenu = $peek.find('li'), @@ -27,14 +27,26 @@ semantic.ready = function() { // event handlers handler = { + createIcon: function() { + $example + .each(function(){ + $('') + .addClass('icon code') + .prependTo( $(this) ) + ; + }) + ; + }, + createCode: function() { var $example = $(this).closest('.example'), $shape = $example.find('.shape.module'), - $demo = $example.find('.demo'), + $demo = $example.children().slice(2).not('.annotated'), $annotated = $example.find('.annotated'), $code = $annotated.find('.code'), - code = $demo.get(0).innerHTML + whiteSpace = new RegExp('\\n\\s{4}', 'g'), + code = '' ; // add source if doesnt exist and initialize if($annotated.size() === 0) { @@ -44,8 +56,14 @@ semantic.ready = function() { ; } if( $code.size() === 0) { - code = code.replace('^(\s+)', '$1$1'); - console.log(code); + $demo + .each(function(){ + if($(this).hasClass('ui')) { + code += $(this).get(0).outerHTML + "\n"; + } + }) + ; + code = $.trim(code.replace(whiteSpace, '\n')); $code = $('
') .data('type', 'html') .addClass('code') @@ -54,13 +72,18 @@ semantic.ready = function() { ; $.proxy(handler.initializeCode, $code)(); } - if( $demo.is(':visible') ) { + if( $demo.first().is(':visible') ) { $demo.hide(); $annotated.fadeIn(500); } else { $annotated.hide(); - $demo.fadeIn(500); + if($demo.size() > 1) { + $demo.show(); + } + else { + $demo.fadeIn(500); + } } }, @@ -74,8 +97,8 @@ semantic.ready = function() { contentType = $code.data('type') || 'javascript', editor = ace.edit($code[0]), editorSession = editor.getSession(), - padding = 0, - codeHeight = editor.getSession().getScreenLength() * (editor.renderer.lineHeight + padding) + editor.renderer.scrollBar.getWidth() + padding = 4, + codeHeight = editor.getSession().getScreenLength() * (editor.renderer.lineHeight) + editor.renderer.scrollBar.getWidth() + padding ; editor.setTheme('ace/theme/github'); editor.setShowPrintMargin(false); @@ -157,8 +180,10 @@ semantic.ready = function() { ; } - $exampleCode - .on('click', handler.createCode) + handler.createIcon(); + $example + .find('i.code') + .on('click', handler.createCode) ; $swap diff --git a/docs/stylesheets/example.css b/docs/stylesheets/example.css index 0a66e34ab..7d149ab0a 100755 --- a/docs/stylesheets/example.css +++ b/docs/stylesheets/example.css @@ -278,13 +278,34 @@ a:hover { background-color: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.1); } +#example div.code .ace_line { + color: #555555; +} +#example div.code .ace_tag { + color: #7F6277; +} +#example div.code .ace_indent-guide { + position: relative; + background: none; +} +#example div.code .ace_indent-guide:after { + content: ''; + position: absolute; + top: 0px; + right: 0px; + height: 100%; + border-left: 1px solid #ECF5F3; +} +#example div.code .ace_attribute-name { + color: #934E4E; +} #example div.code .ace_scroller { margin: 14px 10px; } #example div.code .ace_content { } #example div.code .ace_string { - color: #e82d2d; + color: #00A59D; } #example div.code .ace_cursor { border-left: 1px solid #AAAAAA; @@ -296,7 +317,7 @@ a:hover { color: #555555; } #example div.code .ace_identifier { - color: #247992; + color: #555555; } #example div.code .ace_scrollbar { overflow: hidden; @@ -332,7 +353,7 @@ a:hover { width: auto; overflow: visible; opacity: 0.5; - top: 5px; + top: 0px; right: 5px; } #example .example:hover i.code:hover {