From 95b0f6164788a5427081e06c58dbffe2ed9115bf Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 26 Sep 2013 16:55:20 -0400 Subject: [PATCH] fixes menu from being too large on mobile devices causing formatting issues. Fixes #86 --- build/less/modules/behavior/form.js | 8 +- build/minified/modules/behavior/form.js | 8 +- build/uncompressed/modules/behavior/form.js | 8 +- node/src/documents/collections/form.html.eco | 3 + .../files/build/less/modules/behavior/form.js | 8 +- .../build/minified/modules/behavior/form.js | 8 +- .../uncompressed/modules/behavior/form.js | 8 +- node/src/files/stylesheets/semantic.css | 150 ++++++++---------- node/src/layouts/default.html.eco | 2 +- src/modules/behavior/form.js | 8 +- 10 files changed, 101 insertions(+), 110 deletions(-) diff --git a/build/less/modules/behavior/form.js b/build/less/modules/behavior/form.js index 31f953440..4b99faa7f 100644 --- a/build/less/modules/behavior/form.js +++ b/build/less/modules/behavior/form.js @@ -376,10 +376,7 @@ $.fn.form = function(fields, parameters) { } // normal notation else { - isValid = (type == 'checked') - ? $field.filter(':checked').size() > 0 - : settings.rules[type](value) - ; + isValid = $.proxy(settings.rules[type], $field)(value); } return isValid; } @@ -639,6 +636,9 @@ $.fn.form.settings = { }, rules: { + checked: function() { + return ($(this).filter(':checked').size() > 0); + }, empty: function(value) { return !(value === undefined || '' === value); }, diff --git a/build/minified/modules/behavior/form.js b/build/minified/modules/behavior/form.js index 31f953440..4b99faa7f 100644 --- a/build/minified/modules/behavior/form.js +++ b/build/minified/modules/behavior/form.js @@ -376,10 +376,7 @@ $.fn.form = function(fields, parameters) { } // normal notation else { - isValid = (type == 'checked') - ? $field.filter(':checked').size() > 0 - : settings.rules[type](value) - ; + isValid = $.proxy(settings.rules[type], $field)(value); } return isValid; } @@ -639,6 +636,9 @@ $.fn.form.settings = { }, rules: { + checked: function() { + return ($(this).filter(':checked').size() > 0); + }, empty: function(value) { return !(value === undefined || '' === value); }, diff --git a/build/uncompressed/modules/behavior/form.js b/build/uncompressed/modules/behavior/form.js index 31f953440..4b99faa7f 100644 --- a/build/uncompressed/modules/behavior/form.js +++ b/build/uncompressed/modules/behavior/form.js @@ -376,10 +376,7 @@ $.fn.form = function(fields, parameters) { } // normal notation else { - isValid = (type == 'checked') - ? $field.filter(':checked').size() > 0 - : settings.rules[type](value) - ; + isValid = $.proxy(settings.rules[type], $field)(value); } return isValid; } @@ -639,6 +636,9 @@ $.fn.form.settings = { }, rules: { + checked: function() { + return ($(this).filter(':checked').size() > 0); + }, empty: function(value) { return !(value === undefined || '' === value); }, diff --git a/node/src/documents/collections/form.html.eco b/node/src/documents/collections/form.html.eco index b4b4a52b9..f6b0be1d2 100755 --- a/node/src/documents/collections/form.html.eco +++ b/node/src/documents/collections/form.html.eco @@ -29,6 +29,9 @@ type : 'UI Collection' checkboxes, and message blocks.

Validation messages use messages which are formatted for use inside forms.

+
+

If you are looking for form validation, you should check out form validation.

+

This example uses a ui segment to add the padding and background color. This is not required.

diff --git a/node/src/files/build/less/modules/behavior/form.js b/node/src/files/build/less/modules/behavior/form.js index 31f953440..4b99faa7f 100644 --- a/node/src/files/build/less/modules/behavior/form.js +++ b/node/src/files/build/less/modules/behavior/form.js @@ -376,10 +376,7 @@ $.fn.form = function(fields, parameters) { } // normal notation else { - isValid = (type == 'checked') - ? $field.filter(':checked').size() > 0 - : settings.rules[type](value) - ; + isValid = $.proxy(settings.rules[type], $field)(value); } return isValid; } @@ -639,6 +636,9 @@ $.fn.form.settings = { }, rules: { + checked: function() { + return ($(this).filter(':checked').size() > 0); + }, empty: function(value) { return !(value === undefined || '' === value); }, diff --git a/node/src/files/build/minified/modules/behavior/form.js b/node/src/files/build/minified/modules/behavior/form.js index 31f953440..4b99faa7f 100644 --- a/node/src/files/build/minified/modules/behavior/form.js +++ b/node/src/files/build/minified/modules/behavior/form.js @@ -376,10 +376,7 @@ $.fn.form = function(fields, parameters) { } // normal notation else { - isValid = (type == 'checked') - ? $field.filter(':checked').size() > 0 - : settings.rules[type](value) - ; + isValid = $.proxy(settings.rules[type], $field)(value); } return isValid; } @@ -639,6 +636,9 @@ $.fn.form.settings = { }, rules: { + checked: function() { + return ($(this).filter(':checked').size() > 0); + }, empty: function(value) { return !(value === undefined || '' === value); }, diff --git a/node/src/files/build/uncompressed/modules/behavior/form.js b/node/src/files/build/uncompressed/modules/behavior/form.js index 31f953440..4b99faa7f 100644 --- a/node/src/files/build/uncompressed/modules/behavior/form.js +++ b/node/src/files/build/uncompressed/modules/behavior/form.js @@ -376,10 +376,7 @@ $.fn.form = function(fields, parameters) { } // normal notation else { - isValid = (type == 'checked') - ? $field.filter(':checked').size() > 0 - : settings.rules[type](value) - ; + isValid = $.proxy(settings.rules[type], $field)(value); } return isValid; } @@ -639,6 +636,9 @@ $.fn.form.settings = { }, rules: { + checked: function() { + return ($(this).filter(':checked').size() > 0); + }, empty: function(value) { return !(value === undefined || '' === value); }, diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index f8e5191ab..dcfc1e1ee 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -163,7 +163,7 @@ a:hover { #example .main.menu { top: 0px; - min-width: 380px; + min-width: 320px; z-index: 900; -webkit-box-sizing: border-box; @@ -1165,39 +1165,24 @@ body.progress .ui.progress .bar { transform-style: preserve-3d; } - -@media only screen and (max-width : 1725px) { - #example .container { - width: auto; - margin-right: 100px; - margin-left: 325px; - } - #example.index .container { - margin-left: 8em; - margin-right: 8em; +@media only screen and (max-width : 450px) { + #example .main.menu .icon.item { + display: none; } - #example .sticky-wrapper.stuck .peek { - margin-left: 0px; - left: 95px; + #example .main.menu .github.item { + display: block; } - #example.left.pushed .sticky-wrapper .peek { - padding-left: 275px; - margin-left: -275px; + #example .carbonad { + height: 135px; } - #example.left.pushed .sticky-wrapper.stuck .peek { - margin-left: 0px; - padding-left: 275px; + #example .carbonad .carbonad-text { + width: 90px; } } - @media only screen and (max-width : 600px) { #example .main.menu .borderless.item { display: none; } - #example .fixed .right.menu { - display: inline-block; - float: none; - } #example .fixed .developer, #example .fixed .designer, #example .fixed .previous, @@ -1205,60 +1190,6 @@ body.progress .ui.progress .bar { display: none; } } -@media only screen and (max-width : 1050px) { - #example .fixed .section, - #example .fixed .title b { - display: none; - } - #example .stripe .header .code.icon { - display: none; - } - #example .fixed .container { - width: auto; - margin: 0px auto; - } - #example .attached.launch.button { - display: none; - } - #example .fixed .launch { - display: inline-block; - } - #example .sticky-wrapper { - display: none; - } - #example .container { - width: auto; - margin: 0% 30px 0px; - } - #example - #example .right.attached.launch { - display: none; - } -} - -@media only screen and (min-width : 1725px) { - #example .container { - width: 1100px; - } - #example .sticky-wrapper.stuck .peek { - margin-left: -780px; - } - #example.left.pushed .main.menu { - margin-left: -132px; - } -} - - -@media only screen and (min-width : 2300px) { - #example .container { - width: 1320px; - } - #example .sticky-wrapper.stuck .peek { - margin-left: -890px; - } -} - - @media only screen and (max-width : 780px) { #example.index .masthead { text-align: center; @@ -1299,6 +1230,9 @@ body.progress .ui.progress .bar { #example #menu .hide.item { display: block; } + #example #menu .item > .icon { + font-size: 1em !important; + } #example .inverted.advertisement .carbonad { height: 109px; } @@ -1319,8 +1253,62 @@ body.progress .ui.progress .bar { margin-left: 160px; width: 170px; } - - +} +@media only screen and (max-width : 1050px) { + #example .fixed .section, + #example .fixed .title b { + display: none; + } + #example .stripe .header .code.icon { + display: none; + } + #example .fixed .container { + width: auto; + margin: 0px auto; + } + #example .attached.launch.button { + display: none; + } + #example .fixed .launch { + display: inline-block; + } + #example .sticky-wrapper { + display: none; + } + #example .container { + width: auto; + margin: 0% 30px 0px; + } + #example + #example .right.attached.launch { + display: none; + } +} +@media only screen and (min-width : 1725px) { + #example.index .container { + margin-left: 8em; + margin-right: 8em; + } + #example .sticky-wrapper.stuck .peek { + margin-left: 0px; + left: 95px; + } + #example.left.pushed .sticky-wrapper .peek { + padding-left: 275px; + margin-left: -275px; + } + #example.left.pushed .sticky-wrapper.stuck .peek { + margin-left: 0px; + padding-left: 275px; + } +} +@media only screen and (min-width : 2300px) { + #example .container { + width: 1320px; + } + #example .sticky-wrapper.stuck .peek { + margin-left: -890px; + } } @media only screen and (max-width : 1500px) { #example.index .icon.header .icon { diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco index ecb890e72..70bb22425 100755 --- a/node/src/layouts/default.html.eco +++ b/node/src/layouts/default.html.eco @@ -228,7 +228,7 @@ <% end %> - +