richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fixes up dimmer demos, more module demos

pull/1177/head
jlukic 10 years ago
parent
88a82e5537
commit
90f0794e07
8 changed files with 102 additions and 64 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 79
      server/documents/modules/dimmer.html.eco
  2. 5
      server/documents/modules/transition.html.eco
  3. 13
      server/files/javascript/dimmer.js
  4. 1
      server/files/javascript/semantic.js
  5. 3
      server/files/stylesheets/semantic.css
  6. 29
      server/layouts/default.html.eco
  7. 11
      server/partials/dimmer-demo.html
  8. 25
      server/partials/language-modal.html

79
server/documents/modules/dimmer.html.eco
View File

@ -1,6 +1,6 @@
---
layout : 'default'
css : ''
css : 'dim'
element : 'dimmer'
elementType : 'module'
@ -14,17 +14,6 @@ themes : ['Default']
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/dimmer.less" />
<script src="/javascript/dimmer.js"></script>
<div class="ui page dimmer">
<div class="content">
<div class="center">
<h2 class="ui inverted icon header">
<i class="icon circular inverted emphasized green mail"></i>
You're all signed up for the weekly dog tips newsletter!
<div class="sub header">Your first edition will be sent on January 22</div>
</h2>
</div>
</div>
</div>
<%- @partial('header', { tabs: 'module' }) %>
@ -34,6 +23,34 @@ themes : ['Default']
<h2 class="ui dividing header">Types</h2>
<div class="example">
<h4 class="ui header">Simple Dimmer</h4>
<p>A simple dimmer displays no content</p>
<div class="code">
// left button
$('.segment').dimmer('show');
// right button
$('.segment').dimmer('hide');
</div>
<div class="ui ignored info message">A dimmer will automatically be created when a dimming behavior is triggered on an element.
</div>
<div class="ui segment">
<h3 class="ui header">
Overlayable Section
</h3>
<div class="ui small images">
<img src="/images/wireframe/image.png">
<img src="/images/wireframe/image.png">
<img src="/images/wireframe/image.png">
</div>
<img class="ui medium wireframe image" src="/images/wireframe/media-paragraph.png">
</div>
<div class="ui ignored icon buttons">
<div class="ui show button"><i class="plus icon"></i></div>
<div class="ui hide button"><i class="minus icon"></i></div>
</div>
</div>
<div class="example">
<h4 class="ui header">Content Dimmer</h4>
<p>A dimmer can display content</p>
@ -42,13 +59,17 @@ themes : ['Default']
<h3 class="ui header">
Overlayable Section
</h3>
<img src="/images/wireframe/text-image.png">
<img src="/images/wireframe/text-image.png">
<div class="ui small images">
<img src="/images/wireframe/image.png">
<img src="/images/wireframe/image.png">
<img src="/images/wireframe/image.png">
</div>
<img class="ui medium wireframe image" src="/images/wireframe/media-paragraph.png">
<div class="ui dimmer">
<div class="content">
<div class="center">
<h2 class="ui inverted icon header">
<i class="circular red heart icon"></i>
<i class="heart icon"></i>
Dimmed Message!
</h2>
</div>
@ -59,31 +80,21 @@ themes : ['Default']
<div class="ui show button"><i class="plus icon"></i></div>
<div class="ui hide button"><i class="minus icon"></i></div>
</div>
<div class="existing code">
<div class="ui dimmer">
<div class="content">
<div class="center">
<h2 class="ui inverted icon header">
<i class="icon circular inverted emphasized red heart"></i>
Your poodle photo uploaded successfully!
</h2>
</div>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Page Dimmer</h4>
<p>A dimmer can be formatted to be fixed to the page</p>
<div class="existing code">
<div class="ui page dimmer">
<div class="content">
<div class="center">Hello</div>
<div class="existing code" data-preview="true">
<div class="ui page dimmer">
<div class="content">
<div class="center">Hello</div>
</div>
</div>
</div>
<div class="ui page button">
<i class="plus icon"></i>Show
</div>
<div class="ui page button"><i class="plus icon"></i> Show</div>
</div>
@ -357,8 +368,8 @@ themes : ['Default']
<tbody>
<tr>
<td>closable</td>
<td class="six wide">true</td>
<td>Whether clicking on the dimmer should close it automatically</td>
<td class="six wide">auto</td>
<td>Whether clicking on the dimmer should hide the dimmer (Defaults to true when <code>settings.on</code> is not <code>hover</code></td>
</tr>
<tr>
<td>on</td>

5
server/documents/modules/transition.html.eco
View File

@ -439,6 +439,11 @@ type : 'UI Module'
<td>transitioned element</td>
<td>Callback on each transition that changes visibility to hidden</td>
</tr>
<tr>
<td>start</td>
<td>transitioned element</td>
<td>Callback on animation start, useful for queued animations</td>
</tr>
<tr>
<td>complete</td>
<td>transitioned element</td>

13
server/files/javascript/dimmer.js
View File

@ -5,6 +5,7 @@ semantic.dimmer.ready = function() {
// selector cache
var
$pageDimmer = $('.demo.page.dimmer'),
$examples = $('.example'),
$showButton = $examples.find('.show.button'),
$pageButton = $examples.find('.page.button'),
@ -18,24 +19,28 @@ semantic.dimmer.ready = function() {
show: function() {
$(this)
.closest('.example')
.find('.segment')
.children('.segment:not(.instructive)')
.dimmer('show')
;
},
hide: function() {
$(this)
.closest('.example')
.find('.segment')
.children('.segment:not(.instructive)')
.dimmer('hide')
;
},
page: function() {
$('body > .page')
$('body > .demo.page.dimmer')
.dimmer('show')
;
}
};
$pageDimmer
.dimmer()
;
$pageButton
.on('click', handler.page)
;

1
server/files/javascript/semantic.js
View File

@ -795,7 +795,6 @@ semantic.ready = function() {
;
$code = $codeTag;
console.log($code, formattedCode);
$code
.html(formattedCode)
;

3
server/files/stylesheets/semantic.css
View File

@ -237,6 +237,9 @@ a:hover {
#example.divider .ui.grid {
position: relative;
}
#example.dim .segment .wireframe.image {
margin-bottom: 0em;
}
#example .download.menu {

29
server/layouts/default.html.eco
View File

@ -357,31 +357,10 @@
</div>
</div>
</div>
<div class="ui basic language modal">
<i class="close icon"></i>
<div class="header">The <span class="name"></span> Translation Needs Your Help</div>
<div class="content">
<div class="middle aligned image">
<i class="world icon"></i>
</div>
<div class="description">
<p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
<div class="ui inverted indicating progress">
<div class="bar"></div>
</div>
<p>We need your help to make Semantic available to people who speak your language.</p>
<p>Our translation tools are easy to use and allow you to translate text without having to leave the site. If you are interested in joining our translation team please <a href="mailto:jack@semantic-ui.com?subject=Localization%20Help">e-mail me</a> for access to our translation hub.
</p>
</div>
</div>
<div class="actions">
<div class="ui inverted cancel button">No Thanks</div>
<a href="mailto:jack@semantic-ui.com?subject=Localization%20Help" target="_blank" class="ui inverted approve teal button">
<i class="mail icon"></i>
Help Translate
</a>
</div>
</div>
<%- @partial('language-modal') %>
<%- @partial('dimmer-demo') %>
<script src="/javascript/library/less.js"></script>
</body>

11
server/partials/dimmer-demo.html
View File

@ -0,0 +1,11 @@
<div class="ui demo page dimmer">
<div class="content">
<div class="center">
<h2 class="ui inverted icon header">
<i class="mail icon"></i>
Dimmer Message
<div class="sub header">Dimmer sub-header</div>
</h2>
</div>
</div>
</div>

25
server/partials/language-modal.html
View File

@ -0,0 +1,25 @@
<div class="ui basic language modal">
<i class="close icon"></i>
<div class="header">The <span class="name"></span> Translation Needs Your Help</div>
<div class="content">
<div class="middle aligned image">
<i class="world icon"></i>
</div>
<div class="description">
<p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
<div class="ui inverted indicating progress">
<div class="bar"></div>
</div>
<p>We need your help to make Semantic available to people who speak your language.</p>
<p>Our translation tools are easy to use and allow you to translate text without having to leave the site. If you are interested in joining our translation team please <a href="mailto:jack@semantic-ui.com?subject=Localization%20Help">e-mail me</a> for access to our translation hub.
</p>
</div>
</div>
<div class="actions">
<div class="ui inverted cancel button">No Thanks</div>
<a href="mailto:jack@semantic-ui.com?subject=Localization%20Help" target="_blank" class="ui inverted approve teal button">
<i class="mail icon"></i>
Help Translate
</a>
</div>
</div>
Write Preview
Loading…
Cancel
Save