Browse Source
Tweaks for undocumented nag component, add indicators for incomplete components to menu, updating incomplete component docs
pull/1129/head
Tweaks for undocumented nag component, add indicators for incomplete components to menu, updating incomplete component docs
pull/1129/head
jlukic
10 years ago
17 changed files with 363 additions and 252 deletions
Split View
Diff Options
-
10server/documents/elements/flag.html.eco
-
10server/documents/elements/rail.html.eco
-
10server/documents/globals/reset.html.eco
-
10server/documents/globals/site.html.eco
-
78server/documents/modules/nag.html.eco
-
46server/documents/modules/search.html.eco
-
22server/documents/modules/sticky.html.eco
-
4server/documents/modules/tab.html.eco
-
23server/documents/modules/video.html.eco
-
4server/draft/api.html.eco
-
10server/files/stylesheets/semantic.css
-
60server/layouts/default.html.eco
-
5src/definitions/behaviors/visit.js
-
300src/definitions/modules/nag.js
-
17src/definitions/modules/search.js
-
4src/themes/packages/default/modules/nag.variables
-
2src/themes/packages/default/modules/progress.variables
@ -0,0 +1,78 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : '' |
|||
element : 'nag' |
|||
elementType : 'module' |
|||
|
|||
title : 'Nag' |
|||
description : 'A nag is an important message that persists until dismissed by a user' |
|||
type : 'UI Module' |
|||
|
|||
status : 'Undocumented' |
|||
--- |
|||
|
|||
<%- @partial('header', { tabs: { overview: 'Overview' } }) %> |
|||
|
|||
<div class="main container"> |
|||
|
|||
<div class="ui active tab" data-tab="overview"> |
|||
|
|||
<h2 class="ui dividing header">Current Progress</h2> |
|||
<div class="ui indicating progress"> |
|||
<div class="bar" style="width: 60%;"> |
|||
<div class="progress">60%</div> |
|||
</div> |
|||
<div class="label">Needs Documentation / Re-coding</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Usage</h2> |
|||
<div class="no example"> |
|||
<h4 class="ui header"></h4> |
|||
<p>Nags are used to present a user with a one time message which will persist until a user acknowledges the message. This can be used for providing notices like the site's use of cookies, or an importan change to a site like a security breach, or an important event.</p> |
|||
<p>Semantic's nag component provides built in options for ensuring a nag is only displayed once. You can trigger an API endpoint on dismissal, in order to store a value in your database, or you can use localstorage or cookie value to make sure that a particular computer does not receive the nag again.</p> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Example</h2> |
|||
|
|||
<div class="code" data-type="javascript" data-demo="true"> |
|||
// Wont re-appear unless cleared |
|||
$('.cookie.nag') |
|||
.nag('show') |
|||
; |
|||
</div> |
|||
<div class="code" data-type="javascript" data-demo="true"> |
|||
// Clears cookie so above example works again |
|||
$('.cookie.nag') |
|||
.nag('clear') |
|||
; |
|||
</div> |
|||
<div class="ui code" data-type="html" data-preview="true"> |
|||
<div class="ui inline cookie nag"> |
|||
<span class="title"> |
|||
We use cookies to ensure you get the best experience on our website |
|||
</span> |
|||
<i class="close icon"></i> |
|||
</div> |
|||
</div> |
|||
<div class="evaluated code" data-type="javascript"> |
|||
// Automatically shows on init if cookie isnt set |
|||
$('.cookie.nag') |
|||
.nag({ |
|||
key : 'accepts-cookies', |
|||
value : true |
|||
}) |
|||
; |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Support Development</h2> |
|||
<div class="no example"> |
|||
|
|||
<p>You can help support the future development of the Semantic UI project, and help boost the priority of this component by donating to Semantic UI development.</p> |
|||
|
|||
<p>Please be sure to leave a note in the comments to indicate that you are interested in the development of this particular component.</p> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
@ -0,0 +1,46 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : '' |
|||
element : 'search' |
|||
elementType : 'module' |
|||
|
|||
title : 'Search' |
|||
description : 'A search module is used to allow a user to query a large selection of values.' |
|||
type : 'UI Module' |
|||
|
|||
status : 'Undocumented' |
|||
--- |
|||
|
|||
<%- @partial('header', { tabs: { overview: 'Overview' } }) %> |
|||
|
|||
<div class="main container"> |
|||
|
|||
<div class="ui active tab" data-tab="overview"> |
|||
|
|||
<h2 class="ui dividing header">Current Progress</h2> |
|||
<div class="ui indicating progress"> |
|||
<div class="bar" style="width: 90%;"> |
|||
<div class="progress">90%</div> |
|||
</div> |
|||
<div class="label">Needs Documentation</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Usage</h2> |
|||
<div class="no example"> |
|||
<h4 class="ui header">Autocomplete Results</h4> |
|||
<p>Search allows you to query either remote endpoints, with the <b>API behavior</b> or local javascript objects for search results which are then presented in-place below the search prompt.</p> |
|||
<p>Semantic's search component can group displayed results by category, or as a simple list, and has built in keyboard support and custom error message routing, as well as support for navigating to full text results from within the autocomplete menu.</p> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Support Development</h2> |
|||
<div class="no example"> |
|||
|
|||
<p>You can help support the future development of the Semantic UI project, and help boost the priority of this component by donating to Semantic UI development.</p> |
|||
|
|||
<p>Please be sure to leave a note in the comments to indicate that you are interested in the development of this particular component.</p> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
Write
Preview
Loading…
Cancel
Save