From 90f0794e0749f81dee55c4089797f774a1a20445 Mon Sep 17 00:00:00 2001 From: jlukic Date: Mon, 13 Oct 2014 17:53:10 -0400 Subject: [PATCH] Fixes up dimmer demos, more module demos --- server/documents/modules/dimmer.html.eco | 79 +++++++++++--------- server/documents/modules/transition.html.eco | 5 ++ server/files/javascript/dimmer.js | 13 +++- server/files/javascript/semantic.js | 1 - server/files/stylesheets/semantic.css | 3 + server/layouts/default.html.eco | 29 +------ server/partials/dimmer-demo.html | 11 +++ server/partials/language-modal.html | 25 +++++++ 8 files changed, 102 insertions(+), 64 deletions(-) create mode 100644 server/partials/dimmer-demo.html create mode 100644 server/partials/language-modal.html diff --git a/server/documents/modules/dimmer.html.eco b/server/documents/modules/dimmer.html.eco index c024066ad..8edc55b16 100755 --- a/server/documents/modules/dimmer.html.eco +++ b/server/documents/modules/dimmer.html.eco @@ -1,6 +1,6 @@ --- layout : 'default' -css : '' +css : 'dim' element : 'dimmer' elementType : 'module' @@ -14,17 +14,6 @@ themes : ['Default'] -
-
-
-

- - You're all signed up for the weekly dog tips newsletter! -
Your first edition will be sent on January 22
-

-
-
-
<%- @partial('header', { tabs: 'module' }) %> @@ -34,6 +23,34 @@ themes : ['Default']

Types

+
+

Simple Dimmer

+

A simple dimmer displays no content

+
+ // left button + $('.segment').dimmer('show'); + // right button + $('.segment').dimmer('hide'); +
+
A dimmer will automatically be created when a dimming behavior is triggered on an element. +
+
+

+ Overlayable Section +

+
+ + + +
+ +
+
+
+
+
+
+

Content Dimmer

A dimmer can display content

@@ -42,13 +59,17 @@ themes : ['Default']

Overlayable Section

- - +
+ + + +
+

- + Dimmed Message!

@@ -59,31 +80,21 @@ themes : ['Default']
-
-
-
-
-

- - Your poodle photo uploaded successfully! -

-
-
-
-

Page Dimmer

A dimmer can be formatted to be fixed to the page

-
-
-
-
Hello
+
+
+
+
Hello
+
+
+ Show
-
Show
@@ -357,8 +368,8 @@ themes : ['Default'] closable - true - Whether clicking on the dimmer should close it automatically + auto + Whether clicking on the dimmer should hide the dimmer (Defaults to true when settings.on is not hover on diff --git a/server/documents/modules/transition.html.eco b/server/documents/modules/transition.html.eco index 6565d5aa7..96df21f16 100755 --- a/server/documents/modules/transition.html.eco +++ b/server/documents/modules/transition.html.eco @@ -439,6 +439,11 @@ type : 'UI Module' transitioned element Callback on each transition that changes visibility to hidden + + start + transitioned element + Callback on animation start, useful for queued animations + complete transitioned element diff --git a/server/files/javascript/dimmer.js b/server/files/javascript/dimmer.js index eb88ef1cc..b53a26d02 100755 --- a/server/files/javascript/dimmer.js +++ b/server/files/javascript/dimmer.js @@ -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) ; diff --git a/server/files/javascript/semantic.js b/server/files/javascript/semantic.js index 0ef27c68b..4faff91da 100755 --- a/server/files/javascript/semantic.js +++ b/server/files/javascript/semantic.js @@ -795,7 +795,6 @@ semantic.ready = function() { ; $code = $codeTag; - console.log($code, formattedCode); $code .html(formattedCode) ; diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index db547209b..6d00c6caf 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -237,6 +237,9 @@ a:hover { #example.divider .ui.grid { position: relative; } +#example.dim .segment .wireframe.image { + margin-bottom: 0em; +} #example .download.menu { diff --git a/server/layouts/default.html.eco b/server/layouts/default.html.eco index 96484334b..41d19605c 100755 --- a/server/layouts/default.html.eco +++ b/server/layouts/default.html.eco @@ -357,31 +357,10 @@
-
- -
The Translation Needs Your Help
-
-
- -
-
-

This translation is only % complete!

-
-
-
-

We need your help to make Semantic available to people who speak your language.

-

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 e-mail me for access to our translation hub. -

-
-
-
-
No Thanks
- - - Help Translate - -
-
+ + <%- @partial('language-modal') %> + <%- @partial('dimmer-demo') %> + diff --git a/server/partials/dimmer-demo.html b/server/partials/dimmer-demo.html new file mode 100644 index 000000000..f14ab6bee --- /dev/null +++ b/server/partials/dimmer-demo.html @@ -0,0 +1,11 @@ +
+
+
+

+ + Dimmer Message +
Dimmer sub-header
+

+
+
+
\ No newline at end of file diff --git a/server/partials/language-modal.html b/server/partials/language-modal.html new file mode 100644 index 000000000..6f5e73d7f --- /dev/null +++ b/server/partials/language-modal.html @@ -0,0 +1,25 @@ +
+ +
The Translation Needs Your Help
+
+
+ +
+
+

This translation is only % complete!

+
+
+
+

We need your help to make Semantic available to people who speak your language.

+

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 e-mail me for access to our translation hub. +

+
+
+
+
No Thanks
+ + + Help Translate + +
+
\ No newline at end of file