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

Dont initialize menu on mobile/tablet, fixes for responsive

pull/1129/head
jlukic 10 years ago
parent
70fe470fdd
commit
1767d93bc2
7 changed files with 409 additions and 377 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 601
      server/documents/modules/form.html.eco
  2. 97
      server/files/javascript/semantic.js
  3. 70
      server/files/stylesheets/semantic.css
  4. 4
      server/layouts/default.html.eco
  5. 10
      src/definitions/collections/grid.less
  6. 3
      src/definitions/modules/tab.js
  7. 1
      src/themes/packages/default/collections/grid.variables

601
server/documents/modules/form.html.eco
View File

@ -24,7 +24,7 @@ type : 'UI Behavior'
<h2 class="ui dividing header">Usage</h2>
<div class="example">
<h3 class="ui header">Validation Definitions</h3>
<h4 class="ui header">Validation Definitions</h4>
<p>Form validation requires passing in a validation object with the rules required to validate your form.</p>
<div class="ui info message">
<i class="help icon"></i>A validation object includes a list of form elements, and rules to validate each against. Fields are matched by either the <code>id</code> tag, <code>name</code> tag, or the <code>data-validate</code> metadata matching the identifier provided in the settings object.
@ -122,75 +122,79 @@ type : 'UI Behavior'
</div>
</div>
<h3 class="ui header">
Types of Validation Rules
<div class="sub header">Validation rules are a set of conditions required to validate a field</div>
</h3>
<div class="ui info message">Validation rules are found in <code>settings.rules</code>, to add new global validation rules, modify <code>$.fn.form.settings.rules</code> to include your function.</div>
<div class="in red message">To pass parameters to a rule, use bracket notation in your settings object. For example <code>type: 'not[dog]'</code></div>
<table class="ui teal celled sortable definition table">
<thead>
<th class="four wide">Name</th>
<th>Arguments</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>empty</td>
<td>value</td>
<td>Checks whether a field is empty</td>
</tr>
<tr>
<td>email</td>
<td>value</td>
<td>Checks whether a field is a valid email address</td>
</tr>
<tr>
<td>length</td>
<td>value</td>
<td>Checks whether a field is longer than a length</td>
</tr>
<tr>
<td>not</td>
<td>value, notValue</td>
<td>Checks whether a field is not a value</td>
</tr>
<tr>
<td>contains</td>
<td>value, text</td>
<td>Checks whether a field contains text</td>
</tr>
<tr>
<td>is</td>
<td>value, text</td>
<td>Checks whether a field matches a value</td>
</tr>
<tr>
<td>maxLength</td>
<td>value</td>
<td>Checks whether a field is less than a max length</td>
</tr>
<tr>
<td>match</td>
<td>value, fieldIdentifier</td>
<td>Checks whether a field matches another field</td>
</tr>
<tr>
<td>url</td>
<td>value</td>
<td>Checks whether a field is a url</td>
</tr>
<tr>
<td>checked</td>
<td>-</td>
<td>Checks whether a checkbox field is checked</td>
</tr>
</tbody>
</table>
<div class="no example">
<h4 class="ui header">
Validation Rules
</h4>
<p>Validation rules are a set of conditions required to validate a field</p>
<div class="ui info message">Validation rules are found in <code>$.fn.form.settings.rules</code>, to add new global validation rules, modify <code>$.fn.form.settings.rules</code> to include your function.</div>
<div class="in red message">To pass parameters to a rule, use bracket notation in your settings object. For example <code>type: 'not[dog]'</code></div>
<table class="ui teal celled sortable definition table">
<thead>
<th class="four wide">Name</th>
<th>Arguments</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>empty</td>
<td>value</td>
<td>Checks whether a field is empty</td>
</tr>
<tr>
<td>email</td>
<td>value</td>
<td>Checks whether a field is a valid email address</td>
</tr>
<tr>
<td>length</td>
<td>value</td>
<td>Checks whether a field is longer than a length</td>
</tr>
<tr>
<td>not</td>
<td>value, notValue</td>
<td>Checks whether a field is not a value</td>
</tr>
<tr>
<td>contains</td>
<td>value, text</td>
<td>Checks whether a field contains text</td>
</tr>
<tr>
<td>is</td>
<td>value, text</td>
<td>Checks whether a field matches a value</td>
</tr>
<tr>
<td>maxLength</td>
<td>value</td>
<td>Checks whether a field is less than a max length</td>
</tr>
<tr>
<td>match</td>
<td>value, fieldIdentifier</td>
<td>Checks whether a field matches another field</td>
</tr>
<tr>
<td>url</td>
<td>value</td>
<td>Checks whether a field is a url</td>
</tr>
<tr>
<td>checked</td>
<td>-</td>
<td>Checks whether a checkbox field is checked</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="ui tab" data-tab="examples">
<h2 class="ui dividing header">Examples</h2>
<div class="dropdown example">
<h3 class="ui header">Validating Dropdowns</h3>
<h4 class="ui header">Validating Dropdowns</h4>
<p><a href="/modules/dropdown.html">Dropdowns</a> can also be validated like other form fields. Simply match the validation rule to the hidden input associated with the dropdown</p>
<div class="ignored code">
$('.ui.dropdown')
@ -242,7 +246,7 @@ type : 'UI Behavior'
</div>
</div>
<div class="example">
<h3 class="ui header">Displaying Error Messages</h3>
<h4 class="ui header">Displaying Error Messages</h4>
<p>Forms that contain a <a href="/elements/message.html">ui message</a> error block will automatically be filled in with form validation information.</p>
<div class="ui ignored info message">The template for error messages can be modified by adjusting settings.template.error</div>
@ -278,7 +282,7 @@ type : 'UI Behavior'
</div>
<div class="inline example">
<h3 class="ui header">Validating on Blur and other Events</h3>
<h4 class="ui header">Validating on Blur and other Events</h4>
<p>Validation messages can also appear inline. UI Forms automatically format <a href="/elements/label.html">labels</a> with the class name <code>prompt</code>. These validation prompts are also set to appear on input change instead of form submission.</p>
<div class="ui ignored warning message">This example also uses a different validation event. Each element will be validated on input blur instead of the default form submit.</div>
<div class="code" data-type="javascript">
@ -320,7 +324,7 @@ type : 'UI Behavior'
</div>
<div class="dog example">
<h3 class="ui header">Creating Custom Validation</h3>
<h4 class="ui header">Creating Custom Validation</h4>
<p>You can use multiple arbitrary rules to validate a form</p>
<div class="ignore code">
$('.ui.form')
@ -361,7 +365,11 @@ type : 'UI Behavior'
<div class="ui tab" data-tab="settings">
<h2 class="ui dividing header">Behavior</h2>
All the following <a href="/module.html#/behavior">behaviors</a> can be called using the syntax <code>$('.foo').form('behavior name', argumentOne, argumentTwo)</code>
All the following <a href="/module.html#/behavior">behaviors</a> can be called using the syntax
<div class="code" data-type="javascript">
$('.foo').form('behavior name', argumentOne, argumentTwo)
</div>
<table class="ui definition celled table">
<tr>
@ -396,233 +404,232 @@ type : 'UI Behavior'
<h2 class="ui dividing header">Settings</h2>
<h3 class="ui header">
Form Settings
<div class="sub header">Form settings modify the form validation behavior</div>
</h3>
<table class="ui celled sortable definition table">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>keyboardShortcuts</td>
<td>true</td>
<td>Adds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively</td>
</tr>
<tr>
<td>on</td>
<td>submit</td>
<td>Event used to trigger validation. Can be either <b>submit</b>, <b>blur</b> or <b>change</b>.</td>
</tr>
<tr>
<td>revalidate</td>
<td>true</td>
<td>If set to true will revalidate fields with errors on input change</td>
</tr>
<tr>
<td>delay</td>
<td>true</td>
<td>Delay from last typed letter to validate a field when using <code>on: change</code> or when revalidating a field.</td>
</tr>
<tr>
<td>inline</td>
<td>false</td>
<td>Adds inline error on field validation error</td>
</tr>
<tr>
<td>transition</td>
<td>
scale
</td>
<td>Named transition to use when animating validation errors. Fade and slide down are available without including <a href="/modules/transition.html">ui transitions</a></td>
</tr>
<tr>
<td>duration</td>
<td>150</td>
<td>Animation speed for inline prompt</td>
</tr>
</tbody>
</table>
<div class="ui horizontal divider"><i class="icon setting"></i></div>
<h3 class="ui header">
Callbacks
<div class="sub header">Callbacks specify a function to occur after a specific behavior.</div>
</h3>
<table class="ui celled definition table">
<thead>
<th class="four wide">Setting</th>
<th>Context</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>onValid</td>
<td>field</td>
<td>Callback on each valid field</td>
</tr>
<tr>
<td>onInvalid</td>
<td>field</td>
<td>Callback on each invalid field</td>
</tr>
<tr>
<td>onSuccess</td>
<td>form</td>
<td>Callback if a form is all valid</td>
</tr>
<tr>
<td>onFailure</td>
<td>form</td>
<td>Callback if any form field is invalid</td>
</tr>
</tbody>
</table>
<div class="ui horizontal divider"><i class="icon setting"></i></div>
<h3 class="ui header">
Templates
<div class="sub header">Templates are used to construct elements</div>
</h3>
<div class="ui ignored info message">Templates are found in <code>settings.template</code>, to modify templates across all forms, modify <code>$.fn.form.settings.templates</code> to include your function. They must return html.</div>
<table class="ui celled definition table">
<thead>
<th class="four wide">Template</th>
<th>Arguments</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>error</td>
<td>Errors (Array)</td>
<td>Constructs the contents of an error message</td>
</tr>
<tr>
<td>prompt</td>
<td>Errors (Array)</td>
<td>Constructs an element to prompt the user to an invalid field</td>
</tr>
</tbody>
</table>
<div class="ui horizontal divider"><i class="icon setting"></i></div>
<h3 class="ui header">
DOM Settings
<div class="sub header">DOM settings specify how this module should interface with the DOM</div>
</h3>
<table class="ui celled definition table">
<thead>
<th>Setting</th>
<th class="six wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>namespace</td>
<td>form</td>
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
</tr>
<tr>
<td>selector</td>
<td>
<div class="code">
selector : {
message : '.error.message',
field : 'input, textarea, select',
group : '.field',
input : 'input',
prompt : '.prompt',
submit : '.submit'
}
</div>
</td>
<td>Selectors used to match functionality to DOM</td>
</tr>
<tr>
<td>metadata</td>
<td>
<div class="code">
metadata : {
validate: 'validate'
},
</div>
</td>
<td>
HTML5 metadata attributes
</td>
</tr>
<tr>
<td>className</td>
<td>
<div class="code">
className : {
active : 'active',
placeholder : 'default',
disabled : 'disabled',
visible : 'visible'
}
</div>
</td>
<td>Class names used to attach style to state</td>
</tr>
</tbody>
</table>
<div class="ui horizontal divider"><i class="icon setting"></i></div>
<h3 class="ui header">
Debug Settings
<div class="sub header">Debug settings controls debug output to the console</div>
</h3>
<div class="no example">
<h4 class="ui header">
Form Settings
</h4>
<p>Form settings modify the form validation behavior</p>
<table class="ui celled sortable definition table">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>keyboardShortcuts</td>
<td>true</td>
<td>Adds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively</td>
</tr>
<tr>
<td>on</td>
<td>submit</td>
<td>Event used to trigger validation. Can be either <b>submit</b>, <b>blur</b> or <b>change</b>.</td>
</tr>
<tr>
<td>revalidate</td>
<td>true</td>
<td>If set to true will revalidate fields with errors on input change</td>
</tr>
<tr>
<td>delay</td>
<td>true</td>
<td>Delay from last typed letter to validate a field when using <code>on: change</code> or when revalidating a field.</td>
</tr>
<tr>
<td>inline</td>
<td>false</td>
<td>Adds inline error on field validation error</td>
</tr>
<tr>
<td>transition</td>
<td>
scale
</td>
<td>Named transition to use when animating validation errors. Fade and slide down are available without including <a href="/modules/transition.html">ui transitions</a></td>
</tr>
<tr>
<td>duration</td>
<td>150</td>
<td>Animation speed for inline prompt</td>
</tr>
</tbody>
</table>
</div>
<div class="no example">
<h4 class="ui header">
Callbacks
</h4>
<p>Callbacks specify a function to occur after a specific behavior.</p>
<table class="ui celled sortable definition table">
<thead>
<th class="four wide">Setting</th>
<th>Context</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>onValid</td>
<td>field</td>
<td>Callback on each valid field</td>
</tr>
<tr>
<td>onInvalid</td>
<td>field</td>
<td>Callback on each invalid field</td>
</tr>
<tr>
<td>onSuccess</td>
<td>form</td>
<td>Callback if a form is all valid</td>
</tr>
<tr>
<td>onFailure</td>
<td>form</td>
<td>Callback if any form field is invalid</td>
</tr>
</tbody>
</table>
</div>
<div class="no example">
<h4 class="ui header">
Templates
</h4>
<p>Templates are used to construct elements</p>
<div class="ui ignored info message">Templates are found in <code>settings.template</code>, to modify templates across all forms, modify <code>$.fn.form.settings.templates</code> to include your function. They must return html.</div>
<table class="ui celled sortable definition table">
<thead>
<th class="four wide">Template</th>
<th>Arguments</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>error</td>
<td>Errors (Array)</td>
<td>Constructs the contents of an error message</td>
</tr>
<tr>
<td>prompt</td>
<td>Errors (Array)</td>
<td>Constructs an element to prompt the user to an invalid field</td>
</tr>
</tbody>
</table>
</div>
<table class="ui celled sortable definition table">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>name</td>
<td>Form</td>
<td>Name used in debug logs</td>
</tr>
<tr>
<td>debug</td>
<td>True</td>
<td>Provides standard debug output to console</td>
</tr>
<tr>
<td>performance</td>
<td>True</td>
<td>Provides standard debug output to console</td>
</tr>
<tr>
<td>verbose</td>
<td>True</td>
<td>Provides ancillary debug output to console</td>
</tr>
<tr>
<td>errors</td>
<td colspan="2">
<div class="code">
errors : {
method : 'The method you called is not defined.'
}
</div>
</td>
</tr>
</tbody>
</table>
<div class="no example">
<h4 class="ui header">
DOM Settings
</h4>
<p>DOM settings specify how this module should interface with the DOM</p>
<table class="ui celled sortable definition table">
<thead>
<th>Setting</th>
<th class="six wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>namespace</td>
<td>form</td>
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
</tr>
<tr>
<td>selector</td>
<td>
<div class="code">
selector : {
message : '.error.message',
field : 'input, textarea, select',
group : '.field',
input : 'input',
prompt : '.prompt',
submit : '.submit'
}
</div>
</td>
<td>Selectors used to match functionality to DOM</td>
</tr>
<tr>
<td>metadata</td>
<td>
<div class="code">
metadata : {
validate: 'validate'
},
</div>
</td>
<td>
HTML5 metadata attributes
</td>
</tr>
<tr>
<td>className</td>
<td>
<div class="code">
className : {
active : 'active',
placeholder : 'default',
disabled : 'disabled',
visible : 'visible'
}
</div>
</td>
<td>Class names used to attach style to state</td>
</tr>
</tbody>
</table>
</div>
<div class="no example">
<h4 class="ui header">
Debug Settings
</h4>
<p>Debug settings controls debug output to the console</p>
<table class="ui celled sortable definition table">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>name</td>
<td>Form</td>
<td>Name used in debug logs</td>
</tr>
<tr>
<td>debug</td>
<td>True</td>
<td>Provides standard debug output to console</td>
</tr>
<tr>
<td>performance</td>
<td>True</td>
<td>Provides standard debug output to console</td>
</tr>
<tr>
<td>verbose</td>
<td>True</td>
<td>Provides ancillary debug output to console</td>
</tr>
<tr>
<td>errors</td>
<td colspan="2">
<div class="code">
errors : {
method : 'The method you called is not defined.'
}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

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

@ -40,6 +40,7 @@ semantic.ready = function() {
$demo = $('.demo'),
$container = $('.main.container'),
$allHeaders = $('.main.container > h2, .main.container > .tab > h2, .main.container > .tab > .examples h2'),
$sectionHeaders = $container.children('h2'),
$followMenu = $container.find('.following.menu'),
$sectionExample = $container.find('.example'),
@ -84,27 +85,13 @@ semantic.ready = function() {
;
},
getSpecification: function(callback) {
var
url = $(this).data('url') || false
;
callback = callback || function(){};
if(url) {
$.ajax({
method : 'get',
url : url,
type : 'json',
complete : callback
});
}
},
createWaypoints: function() {
$sectionHeaders
.visibility({
offset: 70,
once: false,
offset: 70,
onTopPassed: handler.activate.section,
onBottomPassed: handler.activate.section,
onTopPassedReverse: handler.activate.previous
})
;
@ -172,6 +159,46 @@ semantic.ready = function() {
}
},
tryCreateMenu: function(event) {
if($(window).width() > 1000) {
if($container.find('.following.menu').size() === 0) {
handler.createMenu();
handler.createWaypoints();
$(window).off('resize.menu');
}
}
},
createAnchors: function() {
$allHeaders
.each(function() {
var
$section = $(this),
safeName = $section.text().trim().replace(/\s+/g, '-').toLowerCase(),
id = window.escape(safeName),
$anchor = $('<a />').addClass('anchor').attr('id', id)
;
$section
.append($anchor)
;
})
;
$example
.each(function() {
var
$title = $(this).children('h4').eq(0),
safeName = $title.text().trim().replace(/\s+/g, '-').toLowerCase(),
id = window.escape(safeName),
$anchor = $('<a />').addClass('anchor').attr('id', id)
;
if($title.size() > 0) {
$title.prepend($anchor);
}
})
;
},
createMenu: function() {
// grab each h3
var
@ -188,13 +215,10 @@ semantic.ready = function() {
activeClass = (index === 0)
? 'active '
: '',
safeName = $currentHeader.text().replace(/\s+/g, '-').toLowerCase(),
safeName = $currentHeader.text().trim().replace(/\s+/g, '-').toLowerCase(),
id = window.escape(safeName),
$anchor = $('<a />').addClass('anchor').attr('id', id)
;
$currentHeader
.append($anchor)
;
html += '<div class="item">';
if($examples.size() === 0) {
html += '<a class="'+activeClass+'title" href="'+id+'"><b>' + $(this).text() + '</b></a>';
@ -208,13 +232,10 @@ semantic.ready = function() {
.each(function() {
var
$title = $(this).children('h4').eq(0),
safeName = $title.text().replace(/\s+/g, '-').toLowerCase(),
safeName = $title.text().trim().replace(/\s+/g, '-').toLowerCase(),
id = window.escape(safeName),
$anchor = $('<a />').addClass('anchor').attr('id', id)
;
$title
.after($anchor)
;
if($title.size() > 0) {
html += '<a class="item" href="#'+id+'">' + $(this).children('h4').text() + '</a>';
}
@ -264,21 +285,13 @@ semantic.ready = function() {
$element = $('#'+id),
position = $element.offset().top
;
$followMenu
.find('.menu .item.active')
.removeClass('active')
;
$element
.addClass('active')
;
$('html, body')
.animate({
scrollTop: position
}, 500, function() {
$element
.addClass('active')
;
})
}, 500)
;
location.hash = '#' + id;
event.stopImmediatePropagation();
@ -746,6 +759,7 @@ semantic.ready = function() {
};
handler.createAnchors();
if( $pageTabs.size() > 0 ) {
$pageTabs
@ -754,9 +768,8 @@ semantic.ready = function() {
childrenOnly : true,
history : true,
onTabInit : function() {
// create code
handler.makeCode();
// create follow menu
$container = ($('.fixed.column').size() > 0 )
? $(this).find('.examples')
: $(this)
@ -764,13 +777,13 @@ semantic.ready = function() {
$sectionHeaders = $container.children('h2');
$sectionExample = $container.find('.example');
$exampleHeaders = $sectionExample.children('h4');
handler.createMenu();
$followMenu = $container.find('.following.menu');
handler.createWaypoints();
// create code
handler.tryCreateMenu();
$(window).on('resize.menu', function() {
handler.tryCreateMenu();
});
},
onTabLoad : function() {
onTabLoad : function() {
$sticky.filter(':visible').sticky('refresh');
}
})
@ -781,6 +794,8 @@ semantic.ready = function() {
handler.createMenu();
handler.createWaypoints();
}
$sticky
.sticky({
context : '.main.container',

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

@ -730,7 +730,7 @@ body#example.hide {
#example .page > .footer {
margin-top: 5em;
padding: 5em 0em 8em;
padding: 5em 0em 6em;
}
/*----------------
@ -1448,48 +1448,57 @@ body.progress .ui.progress .bar {
}
@media only screen and (max-width : 600px) {
#example .page > .footer {
margin-top: 3em;
padding: 2em 0em;
}
#example .container {
width: auto;
margin: 0em 1rem;
}
}
@media only screen and (min-width : 600px) and (max-width : 1000px) {
@media only screen and (min-width : 600px) and (max-width : 998px) {
#example .container {
width: auto;
margin: 0em 3rem;
}
}
@media only screen and (min-width : 1000px) and (max-width: 1355px) {
#example .container {
width: auto;
margin-right: auto;
margin-left: auto;
max-width: 700px;
}
}
@media only screen and (max-width : 1355px) {
@media only screen and (max-width : 998px) {
#example .following.menu {
display: none;
}
}
@media only screen and (min-width : 1355px) {
@media only screen and (min-width : 998px) {
#example .following.menu {
display: block;
}
#example .container {
right: 100px;
}
#example .following.menu {
display: block;
}
@media only screen and (min-width : 998px) and (max-width: 1200px) {
#example .container {
width: 650px;
margin: 0em auto;
}
#example .container .right.rail {
width: 200px;
}
}
@media only screen and (min-width : 1200px) and (max-width: 1355px) {
#example .container {
width: 850px;
width: 700px;
margin: 0em auto;
}
#example.item .container,
#example.card .container {
width: 1100px;
}
@media only screen and (min-width : 1355px) {
#example .container {
width: 850px;
}
}
/* Homepage */
@media only screen and (max-width : 780px) {
#example.index .container {
@ -1534,20 +1543,7 @@ body.progress .ui.progress .bar {
Responsive
*******************************/
@media only screen and (max-width : 1365px) {
#example .sticky-wrapper.stuck .peek {
margin-left: 0px;
left: 95px;
}
}
@media only screen and (max-width : 1500px) {
#example.index .icon.header .icon {
font-size: 3em;
}
}
@media only screen and (max-width : 1050px) {
@media only screen and (max-width : 998px) {
#example .fixed .section,
#example .fixed .title b {
display: none;
@ -1566,10 +1562,14 @@ body.progress .ui.progress .bar {
#example .fixed .launch {
display: inline-block;
}
#example .sticky-wrapper {
display: none;
}
@media only screen and (max-width : 1500px) {
#example.index .icon.header .icon {
font-size: 3em;
}
}
@media only screen and (max-width : 780px) {
pre.console {
height: 150px;

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

@ -260,12 +260,12 @@
<div class="container">
<div class="ui stackable inverted divided relaxed grid">
<div class="eight wide column">
<h3 class="ui inverted header">We Need Your Help</h3>
<h3 class="ui inverted header">Help Keep Semantic UI Alive</h3>
<p>Maintaining an open source UI library is no small task. Support for the continued development of Semantic UI comes directly from the community.</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="7ZAF2Q8DBZAQL">
<button type="submit" class="ui red button">Donate Today</button>
<button type="submit" class="ui teal button">Donate Today</button>
</form>
</div>
<div class="four wide column">

10
src/definitions/collections/grid.less
View File

@ -1034,10 +1034,18 @@
box-shadow: none !important;
}
.ui.stackable.celled.grid > .column,
.ui.stackable.celled.grid > .row > .column,
.ui.stackable.divided.grid > .column,
.ui.stackable.celled.grid > .row > .column {
.ui.stackable.divided.grid > .row > .column {
border-top: @stackableMobileBorder;
}
.ui.inverted.stackable.celled.grid > .column,
.ui.inverted.stackable.celled.grid > .row > .column,
.ui.inverted.stackable.divided.grid > .column,
.ui.inverted.stackable.divided.grid > .row > .column {
border-top: @stackableInvertedMobileBorder;
}
.ui.stackable.grid > .row:first-child > .column:first-child,
.ui.stackable.grid > .column:first-child {
margin-top: 0em !important;

3
src/definitions/modules/tab.js
View File

@ -312,7 +312,8 @@ $.tab = $.fn.tab = function(parameters) {
// look for in page anchor
$anchor = $('#' + tabPath + ', a[name="' + tabPath + '"]');
currentPath = $anchor.closest('[data-tab]').data('tab');
$tab = module.get.tabElement(currentPath);
// if anchor exists use parent tab
if($anchor.size() > 0 && currentPath) {
module.debug('No tab found, but deep anchor link present, opening parent tab');
module.activate.all(currentPath);

1
src/themes/packages/default/collections/grid.variables
View File

@ -92,5 +92,6 @@
@stackableRowSpacing: @rowSpacing;
@stackableGutterWidth: 1.5em;
@stackableMobileBorder: 1px solid @borderColor;
@stackableInvertedMobileBorder: 1px solid @whiteBorderColor;
@doublingRowSpacing: @rowSpacing;
Write Preview
Loading…
Cancel
Save