From 52f1a87114abad01065ba111542f9470aa72b845 Mon Sep 17 00:00:00 2001 From: jlukic Date: Fri, 18 Oct 2013 13:34:56 -0400 Subject: [PATCH] Updates docs to include new tab layout, adds sortable tables --- server/documents/collection.html.eco | 2 +- server/documents/collections/table.html.eco | 10 +- .../introduction/definitions.html.eco | 2 +- server/documents/module.html.eco | 170 ++++- server/documents/modules/accordion.html.eco | 709 +++++++++--------- server/documents/modules/checkbox.html.eco | 6 +- server/documents/modules/dropdown.html.eco | 8 +- server/documents/modules/form.html.eco | 6 +- server/documents/modules/modal.html.eco | 8 +- server/documents/modules/popup.html.eco | 115 ++- server/documents/modules/rating.html.eco | 8 +- server/documents/modules/shape.html.eco | 6 +- server/documents/modules/sidebar.html.eco | 4 +- server/documents/modules/transition.html.eco | 4 +- server/draft/chat.html | 8 +- server/draft/tab.html.eco | 4 +- server/files/javascript/popup.js | 2 +- server/files/javascript/semantic.js | 6 +- server/files/javascript/table.js | 8 +- server/files/stylesheets/semantic.css | 19 +- server/layouts/default.html.eco | 3 +- server/partials/header.html.eco | 37 +- 22 files changed, 647 insertions(+), 498 deletions(-) diff --git a/server/documents/collection.html.eco b/server/documents/collection.html.eco index bc421f540..d921e0046 100755 --- a/server/documents/collection.html.eco +++ b/server/documents/collection.html.eco @@ -107,7 +107,7 @@ type : 'Semantic'
- +
diff --git a/server/documents/collections/table.html.eco b/server/documents/collections/table.html.eco index 8a8cd4399..a2f9e9371 100755 --- a/server/documents/collections/table.html.eco +++ b/server/documents/collections/table.html.eco @@ -6,7 +6,6 @@ title : 'Table' description : 'Tables display collections of data grouped into rows' type : 'UI Collection' --- - <%- @partial('header') %> @@ -25,7 +24,14 @@ type : 'UI Collection'

Table

A standard table

-
+
+ +
+

Responsive Element

+

Tables are designed to be responsive. Table cells will stack when a mobile viewport size is reached.

+
+
+

This example uses a segment to add padding and a background color.

Name Status
diff --git a/server/documents/introduction/definitions.html.eco b/server/documents/introduction/definitions.html.eco index f2cd59c7f..22d411eed 100755 --- a/server/documents/introduction/definitions.html.eco +++ b/server/documents/introduction/definitions.html.eco @@ -49,7 +49,7 @@ type : 'UI Introduction'

Definition Sections

All UI components of a single type are defined similarly.

-
+
All UI diff --git a/server/documents/module.html.eco b/server/documents/module.html.eco index f5a8dfc92..c230a3971 100755 --- a/server/documents/module.html.eco +++ b/server/documents/module.html.eco @@ -13,19 +13,133 @@ type : 'Semantic'
- Settings + Design Pattern + Behaviors + Settings
+

Design Pattern

+

All official javascript modules in Semantic are designed using a singular design pattern. This pattern allows several useful features common to all javascript components

+ + + View Commented Example + +
+
+ +
+
Run-time Performance Analysis
+

Semantic modules all provide the ability to log performance traces to the console, allowing you to see which aspects of the module are more or less performant and to track total init time onDomReady

+
+
+
+ +
+
Human Readable Traces
+

Unlike other component libraries which hides explanations of behavior in inline comments which can only be read by combing the source, semantic modules provide run-time debug output to the javascript console telling you what each component is doing as it is doing it.

+
+
+
+ +
+
Settings can be overwritten after initialization
+

Semantic provides methods to set default settings, set settings at initialization, and set settings after initialization, allowing complete flexibility over component behaviors.

+
+
+
+ +
+
All modules include an initialize and destroy method
+

All events and metadata are namespaced and can be removed after initialization, modules automatically handle destroy/init events to allow users to lazy-initialize a plugin multiple times with no issues.

+
+
+
+ +
+
Instance available in metadata
+

Modules store their instance in metadata meaning that, in a pinch, you can directly modify the instance of a UI element by modifying its properties.

+
+
+
+

Behaviors

+

Behaviors are an elements API. These can be invoke functionality or return aspects of the current state for an element

+ +

Triggering a Behavior

+

Behaviors are triggered in Semantic using a familiar syntax. API behaviors can be called using spaced words, camelcase or dot notation. The preferred method however is spaced words. Method lookup is done internally.

+
+ // generically + $('.ui.element') + .module('method', valueOne, valueTwo) + ; + // Sets a popup to top left position with an offset of negative five + $('.ui.popup') + .popup('set position', 'top left', -5) + ; +
+ +

Common Behaviors

+

All modules have a set of core behaviors which allow you to configure the component

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameUsage
initializeInitializes an element, adding page event handlers and init data
destroyRemoves all changes to the page made by initialization
refreshRefreshes cached values for a component
setting(setting, value)Allows you to modify or read a component setting
invoke(query, passedArguments, instance)Internal method used for translating sentence case method into an internal method
log(comment, values)Displays a log if a user has logging enabled
verbose(comment, values)Displays a log if a user has verbose logging enabled
error(name)Displays a name error message from the component's settings
performance log(comment, value)Adds a performance trace for an element
performance displayDisplays current element performance trace

Settings

-

Settings in UI widgets are any part of a widget definition which is mutable. Most UI widgets have a set of common settings which are useful across all plugins. +

Unlike many javascript components, anything arbitrary in Semantic is a setting. This means no need to dig inside the internals of the component to alter an expected css selector or class name, simply alter the settings object

Common Settings

- - - - - +

That means class names, selectors, error output, dom metadata etc can all be controlled by altering the settings object.

+

The following is a list of common settings usually found in each javascript module. +

NameUsage
+ + + + + @@ -67,38 +181,50 @@ type : 'Semantic'
NameUsage
name Name used in debug logs to differentiate this widget from other debug statements.

Changing Settings

-
    -
  1. A settings object can be passed in when initializing the plugin +

    The following examples use popup as an example for how to modify settings

    +
    +
    +
    Setting module defaults
    + Default settings for the module can be overridden by modifying $.fn.module.settings. +
    $.fn.popup.settings.moduleName = 'Godzilla';
    +
    +
    +
    At initialization
    + A settings object can be passed in when initializing the plugin
    $('.foo') - .module({ - moduleName: 'Godzilla', - verbose: true + .popup({ + moduleName : 'Godzilla', + verbose : true }) ;
    -
    2. -
  2. Default settings for the module can be overridden by modifying $.fn.module.settings. -
    $.fn.module.settings.moduleName = 'Godzilla';
    -
    3. -
  3. Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair. + +
    +
    After initialization
    + Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair.
    $('.foo') // lets initialize that! - .module() + .popup() // oh wait forgot something - .module('setting', 'moduleName', 'Godzilla') + .popup('setting', 'moduleName', 'Godzilla') + // and some more things + .popup('setting', { + debug : true, + verbose : true + }) ;
    -
    4. -
+ +

Reading Settings

Settings can also be read programmatically:

- $('.foo').module('setting', 'moduleName'); // outputs godzilla + $('.foo').popup('setting', 'moduleName');
diff --git a/server/documents/modules/accordion.html.eco b/server/documents/modules/accordion.html.eco index 2ae4d34e4..e17c9b397 100755 --- a/server/documents/modules/accordion.html.eco +++ b/server/documents/modules/accordion.html.eco @@ -8,187 +8,238 @@ type : 'UI Module' --- -<%- @partial('header') %> +<%- @partial('header', { tabs: 'module' }) %>
-
-
- Types - Examples - Variations - Usage - Behavior - Settings -
-
+
-

Types

-
-

Accordion

-

A standard accordion

-
-
- - What is a dog? -
-
-

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

-
-
- - What kinds of dogs are there? -
-
-

There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.

-
-
- - How do you acquire a dog? -
-
-

Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.

-

A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.

+
+
+ Types + Variations + Behaviors
-
-
-

Basic

-

A basic accordion does not add any extra formatting

-
-
- - What is a dog? -
-
-

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

-
-
- - What kinds of dogs are there? -
-
-

There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.

+

Types

+
+

Accordion

+

A standard accordion

+
+
+ + What is a dog? +
+
+

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

+
+
+ + What kinds of dogs are there? +
+
+

There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.

+
+
+ + How do you acquire a dog? +
+
+

Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.

+

A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.

+
-
- - How do you acquire a dog? +
+ +
+

Basic

+

A basic accordion does not add any extra formatting

+
+
+ + What is a dog? +
+
+

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

+
+
+ + What kinds of dogs are there? +
+
+

There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.

+
+
+ + How do you acquire a dog? +
+
+

Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.

+

A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.

+
-
-

Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.

-

A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.

+
+ +

Variations

+
+

Fluid

+

An accordion can take up the width of its container

+
+
+ + What is a dog? +
+
+

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

+
+
+ + What kinds of dogs are there? +
+
+

There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.

+
+
+ + How do you acquire a dog? +
+
+

Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.

+

A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.

+
+ +

Behavior

+ + All the following behaviors can be called using the syntax $('.foo').accordion('behavior name', argumentOne, argumentTwo) + + + + + + + + + + + + + + +
open (index)Opens accordion content at index
close (index)Closes accordion content at index
toggle (index)Closes accordion content at index
+
-

Examples

+
-
-

Form

-

An accordion can be used anywhere where content can be shown or hidden. For example, to show optional form fields.

-
-
-
- - +
+

Form

+

An accordion can be used anywhere where content can be shown or hidden. For example, to show optional form fields.

+
+
+
+ + +
+
+ + +
-
- - +
+ + Optional Details
-
-
- - Optional Details -
-
-
- - +
+
+ + +
-
-
-

Menu

-

An accordion can be used to create content drawers inside a menu

-
-
- - - Size - -
-
-
-
-
- - +
+

Menu

+

An accordion can be used to create content drawers inside a menu

+
+
+ + + Size + +
+
+
+
+
+ + +
+
- -
-
-
- - +
+
+ + +
+
- -
-
-
- - +
+
+ + +
+
- -
-
-
- - +
+
+ + +
+
-
-
-
- - - Colors - -
-
-
-
-
- - +
+ + + Colors + +
+
+
+
+
+ + +
+
- -
-
-
- - +
+
+ + +
+
- -
-
-
- - +
+
+ + +
+
- -
-
-
- - +
+
+ + +
+
-
@@ -196,225 +247,169 @@ type : 'UI Module'
-

Variations

- -
-

Fluid

-

An accordion can take up the width of its container

-
-
- - What is a dog? -
-
-

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

-
-
- - What kinds of dogs are there? -
-
-

There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.

-
-
- - How do you acquire a dog? -
-
-

Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.

-

A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.

-
-
-
- - +
-

Usage

- -

Initializing an accordion

-
+

Initializing an accordion

+
$('.ui.accordion') .accordion() ; +
-

Behavior

+
- All the following behaviors can be called using the syntax $('.foo').accordion('behavior name', argumentOne, argumentTwo) +

+ Accordion Settings +
Accordion settings modify its behavior
+

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SettingDefaultDescription
exclusivetrueSet to false to allow multiple sections to be open at the same time
collapsibletrueSet to false to require an accordion to always have a section open
duration500Duration in ms of opening animation
easingeaseInOutQuintEaseInOutQuint is included with accordion, for additional options consider jQuery easing)
- - - - - - - - - - - - - -
open (index)Opens accordion content at index
close (index)Closes accordion content at index
toggle (index)Closes accordion content at index
+

+ Callbacks +
Callback settings specify a function to occur after a specific behavior.
+

-

Settings

+ + + + + + + + + + + + + + + + + + + + + + + +
SettingContextDescription
onOpenactive contentCallback on element open
onCloseactive contentCallback on element close
onChangeactive contentCallback on element open or close
-

- Accordion Settings -
Accordion settings modify its behavior
-

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SettingDefaultDescription
exclusivetrueSet to false to allow multiple sections to be open at the same time
collapsibletrueSet to false to require an accordion to always have a section open
duration500Duration in ms of opening animation
easingeaseInOutQuintEaseInOutQuint is included with accordion, for additional options consider jQuery easing)
- -
- -

- Callbacks -
Callback settings specify a function to occur after a specific behavior.
-

- - - - - - - - - - - - - - - - - - - - - - - - -
SettingContextDescription
onOpenactive contentCallback on element open
onCloseactive contentCallback on element close
onChangeactive contentCallback on element open or close
- -
- -

- DOM Settings -
DOM settings specify how this module should interface with the DOM
-

- - - - - - - - - - - - - - - - - - - - - - - -
SettingDefaultDescription
namespaceaccordionEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector -
{ - title : '.title', - content : '.content' - } -
- 		Object containing selectors used by module.
className -
- className : { - active : 'active' - }, -
- 		Class names used to attach style to state
- -
+

+ DOM Settings +
DOM settings specify how this module should interface with the DOM
+

+ + + + + + + + + + + + + + + + + + + + + + + +
SettingDefaultDescription
namespaceaccordionEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector +
{ + title : '.title', + content : '.content' + } +
+ 		Object containing selectors used by module.
className +
+ className : { + active : 'active' + }, +
+ 		Class names used to attach style to state
-

- Debug Settings -
Debug settings controls debug output to the console
-

+

+ Debug Settings +
Debug settings controls debug output to the console
+

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SettingDefaultDescription
nameAccordionName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors -
- error : { - method : 'The method you called is not defined.', - notFound : 'There were no elements that matched the specified selector' - } -
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SettingDefaultDescription
nameAccordionName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors +
+ error : { + method : 'The method you called is not defined.', + notFound : 'There were no elements that matched the specified selector' + } +
+
+
diff --git a/server/documents/modules/checkbox.html.eco b/server/documents/modules/checkbox.html.eco index 18fafb94a..5f660c44c 100755 --- a/server/documents/modules/checkbox.html.eco +++ b/server/documents/modules/checkbox.html.eco @@ -238,7 +238,7 @@ type : 'UI Module'

Settings

- +
@@ -256,7 +256,7 @@ type : 'UI Module'
Checkbox Settings
- +
@@ -281,7 +281,7 @@ type : 'UI Module'

DOM Settings

DOM settings specify how this module should interface with the DOM

-
Callbacks
+
diff --git a/server/documents/modules/dropdown.html.eco b/server/documents/modules/dropdown.html.eco index 8703a7a23..e7b73227f 100755 --- a/server/documents/modules/dropdown.html.eco +++ b/server/documents/modules/dropdown.html.eco @@ -454,7 +454,7 @@ type : 'UI Module'

Dropdown Settings

Dropdown settings modify the dropdown's behavior

-
Setting Default
+
@@ -526,7 +526,7 @@ type : 'UI Module'

Callbacks

Callback settings specify a function to occur after a specific behavior.

-
Setting Default
+
@@ -557,7 +557,7 @@ type : 'UI Module'

DOM Settings

DOM settings specify how this module should interface with the DOM

-
Setting Context
+
@@ -615,7 +615,7 @@ type : 'UI Module'

Debug Settings

Debug settings controls debug output to the console

-
Setting Default
+
diff --git a/server/documents/modules/form.html.eco b/server/documents/modules/form.html.eco index a6e6eeb7b..973906466 100755 --- a/server/documents/modules/form.html.eco +++ b/server/documents/modules/form.html.eco @@ -271,7 +271,7 @@ type : 'UI Behavior'
Form settings modify the form validation behavior
-
Setting Default
+
@@ -315,7 +315,7 @@ type : 'UI Behavior'
Validation rules are a set of conditions required to validate a field
Validation rules are found in settings.rules, to add new global validation rules, modify $.fn.form.settings.rules to include your function.
-
Setting Default
+
@@ -506,7 +506,7 @@ type : 'UI Behavior'
Debug settings controls debug output to the console
-
Name Arguments
+
diff --git a/server/documents/modules/modal.html.eco b/server/documents/modules/modal.html.eco index de30219d9..d93a9b697 100755 --- a/server/documents/modules/modal.html.eco +++ b/server/documents/modules/modal.html.eco @@ -338,7 +338,7 @@ type : 'UI Module'

Modal Settings

Modal settings modify the modal's behavior

-
Setting Default
+
@@ -392,7 +392,7 @@ type : 'UI Module'

Callbacks

Callback settings specify a function to occur after a specific behavior.

-
Setting Default
+
@@ -424,7 +424,7 @@ type : 'UI Module'

DOM Settings

DOM settings specify how this module should interface with the DOM

-
Setting Context
+
@@ -464,7 +464,7 @@ type : 'UI Module'

Debug Settings

Debug settings controls debug output to the console

-
Setting Default
+
diff --git a/server/documents/modules/popup.html.eco b/server/documents/modules/popup.html.eco index 72575cf45..5a16c42d1 100755 --- a/server/documents/modules/popup.html.eco +++ b/server/documents/modules/popup.html.eco @@ -18,26 +18,30 @@ type : 'UI Module'
Types Variations + Behaviors
-

Types

+

+ Types +

+

Popup

A standard popup

- +

Title

A popup can be formatted with a title

- + PonyDog22

HTML

A popup can be formatted with html

- +

Variations

@@ -54,6 +58,47 @@ type : 'UI Module'

A popup can have its colors inverted

+ +

Behavior

+ All the following behaviors can be called using the syntax $('.foo').sidebar('behavior name', argumentOne, argumentTwo) +
Setting Default
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
showShows popup
hideHides popup
hide allHides all visible pop ups on the page
toggleToggles visibility of popup
is visibleReturns whether popup is visible
is hiddenReturns whether popup is hidden
existsReturns whether popup is created and inserted into the page
set position(position)Repositions a popup
removeRemoves popup from the page
@@ -91,12 +136,12 @@ type : 'UI Module'
-

Initializing with javascript content

+

Initializing with metadata

Or
-

Initializing with metadata

+

Initializing with javascript content

$('.ui.popup') .popup({ @@ -193,7 +238,7 @@ type : 'UI Module'

Specifying an offset

-

A popup position can be adjusted manually by specifying an offset propery using data-offset="value"

+

A popup position can be adjusted manually by specifying an offset property using data-offset="value"

@@ -236,54 +281,6 @@ type : 'UI Module'
-
- -

Behavior

- All the following behaviors can be called using the syntax $('.foo').sidebar('behavior name', argumentOne, argumentTwo) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
attach events(selector, event)Attaches sidebar action to given selector. Default event if none specified is toggle
showShows popup
hideHides popup
hide allHides all visible pop ups on the page
toggleToggles visibility of popup
is visibleReturns whether popup is visible
is hiddenReturns whether popup is hidden
existsReturns whether popup is created and inserted into the page
set positionRepositions a popup
removeRemoves popup from the page
-
-

Settings

@@ -292,7 +289,7 @@ type : 'UI Module' Popup Settings
Settings to configure popup behavior
- +
@@ -370,7 +367,7 @@ type : 'UI Module' Content Settings
Settings to specify popup contents
-
Setting Default
+
@@ -399,7 +396,7 @@ type : 'UI Module' DOM Settings
DOM settings specify how this module should interface with the DOM
-
Setting Description
+
@@ -462,7 +459,7 @@ type : 'UI Module'
Debug settings controls debug output to the console
-
Setting Default
+
diff --git a/server/documents/modules/rating.html.eco b/server/documents/modules/rating.html.eco index 99a7cab6a..ee23a3f71 100755 --- a/server/documents/modules/rating.html.eco +++ b/server/documents/modules/rating.html.eco @@ -262,7 +262,7 @@ type : 'UI Module'

Rating Settings

Rating settings modify the rating's behavior

-
Setting Default
+
@@ -291,7 +291,7 @@ type : 'UI Module'

Callbacks

Callback settings specify a function to occur after a specific behavior.

-
Setting Default
+
@@ -312,7 +312,7 @@ type : 'UI Module'

DOM Settings

DOM settings specify how this module should interface with the DOM

-
Setting Context
+
@@ -355,7 +355,7 @@ type : 'UI Module'

Debug Settings

Debug settings controls debug output to the console

-
Setting Default
+
diff --git a/server/documents/modules/shape.html.eco b/server/documents/modules/shape.html.eco index 0f570dd6d..f0efb8ac9 100755 --- a/server/documents/modules/shape.html.eco +++ b/server/documents/modules/shape.html.eco @@ -222,7 +222,7 @@ type : 'UI Module' ;

Defaults

-
Setting Default
+
@@ -260,7 +260,7 @@ type : 'UI Module'
Shape Settings
Object containing class names used by module.
- +
@@ -275,7 +275,7 @@ type : 'UI Module'
Callbacks
Callback after side is changed. This context is new side.
- +
diff --git a/server/documents/modules/sidebar.html.eco b/server/documents/modules/sidebar.html.eco index f17aab277..8372f40fd 100755 --- a/server/documents/modules/sidebar.html.eco +++ b/server/documents/modules/sidebar.html.eco @@ -272,7 +272,7 @@ type : 'UI Module' Transition Settings
Form settings modify the transition behavior
-
UI Module Settings
+
@@ -339,7 +339,7 @@ type : 'UI Module'
Debug settings controls debug output to the console
-
Setting Default
+
diff --git a/server/documents/modules/transition.html.eco b/server/documents/modules/transition.html.eco index 7f9e50cf1..055889a0a 100755 --- a/server/documents/modules/transition.html.eco +++ b/server/documents/modules/transition.html.eco @@ -277,7 +277,7 @@ type : 'UI Module' Transition Settings
Form settings modify the transition behavior
-
Setting Default
+
@@ -371,7 +371,7 @@ type : 'UI Module'
Debug settings controls debug output to the console
-
Setting Default
+
diff --git a/server/draft/chat.html b/server/draft/chat.html index b6e63ea34..700028059 100755 --- a/server/draft/chat.html +++ b/server/draft/chat.html @@ -83,7 +83,7 @@ type : 'UI Module'

Chatroom Settings

Chatroom settings modify the chatroom's behavior

-
Setting Default
+
@@ -139,7 +139,7 @@ type : 'UI Module'

Callbacks

Callback settings specify a function to occur after a specific behavior.

-
Setting Default
+
@@ -160,7 +160,7 @@ type : 'UI Module'

DOM Settings

DOM settings specify how this module should interface with the DOM

-
Setting Context
+
@@ -203,7 +203,7 @@ type : 'UI Module'

Debug Settings

Debug settings controls debug output to the console

-
Setting Default
+
diff --git a/server/draft/tab.html.eco b/server/draft/tab.html.eco index 6a8bca410..e1b56c43d 100755 --- a/server/draft/tab.html.eco +++ b/server/draft/tab.html.eco @@ -273,7 +273,7 @@ type : 'UI Module' Transition Settings
Form settings modify the transition behavior
-
Setting Default
+
@@ -340,7 +340,7 @@ type : 'UI Module'
Debug settings controls debug output to the console
-
Setting Default
+
diff --git a/server/files/javascript/popup.js b/server/files/javascript/popup.js index bb9da2c4c..fbdbf6b97 100755 --- a/server/files/javascript/popup.js +++ b/server/files/javascript/popup.js @@ -5,7 +5,7 @@ semantic.accordion.ready = function() { // selector cache var - $popup = $('.example .heart.icon'), + $popup = $('.main .ui[data-content], .main .ui[data-html], .main i[data-content], .main i[data-html]'), // alias handler ; diff --git a/server/files/javascript/semantic.js b/server/files/javascript/semantic.js index 39eaf912f..8bff70415 100755 --- a/server/files/javascript/semantic.js +++ b/server/files/javascript/semantic.js @@ -30,6 +30,7 @@ semantic.ready = function() { $peek = $('.peek'), $peekItem = $peek.children('.menu').children('a.item'), $peekSubItem = $peek.find('.item .menu .item'), + $sortableTables = $('.sortable.table'), $ui = $('.ui').not('.hover, .down'), $swap = $('.theme.menu .item'), @@ -41,7 +42,7 @@ semantic.ready = function() { $menuPopup = $('.ui.main.menu .popup.item'), $menuDropdown = $('.ui.main.menu .dropdown'), - $pageTabs = $('.tab.segment .tabular.menu .item'), + $pageTabs = $('.tab.segment .menu .item'), $downloadDropdown = $('.download.buttons .dropdown'), @@ -672,6 +673,9 @@ semantic.ready = function() { } }) ; + $sortableTables + .tablesort() + ; $menuDropdown .dropdown({ diff --git a/server/files/javascript/table.js b/server/files/javascript/table.js index 7f13d705a..66e09597f 100755 --- a/server/files/javascript/table.js +++ b/server/files/javascript/table.js @@ -4,16 +4,12 @@ semantic.table = {}; semantic.table.ready = function() { // selector cache - var - $sortTable = $('.sortable.table'), + var // alias handler ; - $sortTable - .tablesort() - ; - + }; diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index a48f7b7f8..7047b1124 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -94,13 +94,13 @@ pre { background-color: #F0F0F0; } code { - background-color: rgba(0, 0, 0, 0.07); + background-color: rgba(0, 0, 0, 0.02); border: 1px solid rgba(0, 0, 0, 0.1); display: inline-block; font-family: Courier New; font-size: 14px; margin: 0.25em; - padding: 0.125em 0.25em; + padding: 0.125em 0.5em; vertical-align: middle; } pre code { @@ -160,12 +160,17 @@ a:hover { #example > .tab.segment { padding-bottom: 0em; } +#example > .tab.segment .vertical.menu { + display: none; + margin: 2rem 0em 1rem; +} #example > .tab.segment .tabular.menu { margin: 2rem 0em 0em; border-bottom: none; } #example > .tab.segment .tabular.menu .active.item { background-color: #FAFAFA; + border-bottom-color: #FAFAFA; } @@ -396,7 +401,7 @@ body.guide .main.container > * { #example .advertisement { float: none; display: table-cell; - vertical-align: middle; + vertical-align: top; padding-left: 2em; } #example #carbonads-container { @@ -1013,6 +1018,7 @@ body.guide .main.container > * { display: none; } +#example .example:first-child, #example h2 + .example, #example h3 + .example, #example h4 + .example { @@ -1374,6 +1380,13 @@ body.progress .ui.progress .bar { #example .fixed .next { display: none; } + #example > .tab.segment .tabular.menu { + display: none; + } + + #example > .tab.segment .vertical.menu { + display: block; + } } @media only screen and (max-width : 450px) { #example .main.menu .icon.item { diff --git a/server/layouts/default.html.eco b/server/layouts/default.html.eco index fdda9b015..af18bf3b9 100755 --- a/server/layouts/default.html.eco +++ b/server/layouts/default.html.eco @@ -77,6 +77,7 @@ + @@ -155,7 +156,7 @@
- Modules + Modules
<% for element in uiModules: %> <%= element.title %> diff --git a/server/partials/header.html.eco b/server/partials/header.html.eco index 0c8f82ecf..f51645271 100755 --- a/server/partials/header.html.eco +++ b/server/partials/header.html.eco @@ -1,4 +1,4 @@ -<% @tabs = { definition: 'Definition', usage: 'Usage', examples: 'Examples', behaviors: 'Behaviors', settings: 'Settings' } if @tabs == 'module' %> +<% @tabs = { definition: 'Definition', usage: 'Usage', examples: 'Examples', settings: 'Settings' } if @tabs == 'module' %>
@@ -12,24 +12,35 @@

<%=@document.description %>

<% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
- Definition + Overview
<% end %> - - <% index = 0 %> - <% if @tabs?: %> -
- <% for id, name of @tabs: %> - <%= name %> - <% index++ %> - <% end %> -
- <% end %> -
+ <% if @tabs?: %> + <% index = 0 %> + <% tabCount = 0 %> + <% numbers = ['zero', 'one', 'two', 'three', 'four', 'five', 'six'] %> + <% colors = ['red', 'teal', 'blue', 'purple', 'black', 'orange'] %> + <% for id, name of @tabs: %> + <% tabCount++ %> + <% end %> +
+ <% for id, name of @tabs: %> + <%= name %> + <% index++ %> + <% end %> +
+ <% index = 0 %> +
+ <% for id, name of @tabs: %> + <%= name %> + <% index++ %> + <% end %> +
+ <% end %>
\ No newline at end of file
Setting Default