lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fixes for code generation, begin grid/container changes

mobile
jlukic 10 years ago
parent
412294d720
commit
18f9fd06aa
8 changed files with 79 additions and 155 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      server/documents/collections/grid.html.eco
  2. 32
      server/documents/elements/container.html.eco
  3. 54
      server/documents/hotfix.html
  4. 4
      server/documents/modules/popup.html.eco
  5. 12
      server/documents/modules/rating.html.eco
  6. 107
      server/files/javascript/docs.js
  7. 3
      server/files/stylesheets/docs.css
  8. 2
      server/partials/transifex.html.eco

20
server/documents/collections/grid.html.eco
View File

@ -226,14 +226,14 @@ themes : ['Default']
</div>
<div class="ui right aligned grid">
<div class="right floated left aligned six wide column">
<div class="left floated right aligned six wide column">
<div class="ui segment">
Right floated left aligned column
Left floated right aligned column
</div>
</div>
<div class="left floated right aligned six wide column">
<div class="right floated left aligned six wide column">
<div class="ui segment">
Left floated right aligned column
Right floated left aligned column
</div>
</div>
<div class="center aligned two column row">
@ -268,10 +268,10 @@ themes : ['Default']
</div>
</div>
<div class="ui grid">
<div class="twelve wide column"></div>
<div class="eight wide column"></div>
<div class="four column row">
<div class="right floated column"></div>
<div class="left floated column"></div>
<div class="right floated column"></div>
</div>
<div class="row">
<div class="three wide column"></div>
@ -287,6 +287,8 @@ themes : ['Default']
<div class="highlighted example">
<h4 class="ui header">Using Containers</h4>
<p>a <a href="/elements/container.html">container</a> can be used alongside a grid to provide a responsive, fixed width container for wrapping the entire contents of your page.</p>
<div class="ui ignored info message"><code>page grid</code>, which used percentage based gutters have been deprecated to allow for a single, simple fixed size container for ui.
</div>
<div class="ui grid container">
<div class="four wide column"></div>
<div class="four wide column"></div>
@ -301,14 +303,14 @@ themes : ['Default']
<div class="no example">
<h4 class="ui header">Container Breakpoints</h4>
<p>Containers . This means your page container will <b>constantly adjust</b> as the browser width changes, giving you the largest possible space for each breakpoint.</p>
<p>Containers are fixed widths for each breakpoint.</p>
<p>Grids, rows, and columns can receive responsive classes to make them appear only on a particular device.</p>
<table class="ui celled definition table">
<thead>
<tr>
<th>Name</th>
<th>Breakpoint</th>
<th>Page Gutter</th>
<th>Container Width</th>
<th>Responsive Class</th>
<th>Variable</th>
</tr>
@ -317,7 +319,7 @@ themes : ['Default']
<tr>
<td>Mobile</td>
<td>Below 768px</td>
<td>1rem</td>
<td>100% + <code>1rem</code> gutters</td>
<td>mobile only, (x) wide mobile</td>
<td>$mobileBreakpoint</td>
</tr>

32
server/documents/elements/container.html.eco
View File

@ -236,7 +236,7 @@ themes : ['Default']
<h4 class="ui header">Text Container</h4>
<p>A container can reduce its maximum width to more naturally accomodate a single column of text</p>
<div class="ui info message">
A text container is a simpler markup alternative to using a grid with a single column.
A text container is a simpler markup alternative to using a grid with a single column, and is designed specifically
</div>
</div>
@ -291,10 +291,9 @@ themes : ['Default']
<h2 class="ui dividing header">Variations</h2>
<h4 class="ui header">Text Alignment</h4>
<p>A container can specify its text alignment</p>
<div class="ui ignored code">
<div class="example">
<h4 class="ui header">Text Alignment</h4>
<p>A container can specify its text alignment</p>
<div class="ui left aligned container">
Left Aligned
</div>
@ -306,19 +305,24 @@ themes : ['Default']
</div>
</div>
<h4 class="ui header">Fluid</h4>
<p>A fluid container has no maximum width</p>
<div class="example">
<h4 class="ui header">Fluid</h4>
<p>A fluid container has no maximum width</p>
<div class="ui info message">Fluid containers are useful for setting text alignment, or other variations on unstyled content</div>
<div class="ui ignored code">
<div class="ui fluid container">
Fluid
<div class="ui ignored code">
<div class="ui fluid container">
Fluid
</div>
</div>
</div>
</div>
<div class="ui fluid container">
Fluid
<h2 class="ui header">Dogs Roles with Humans</h2>
<p>Domestic dogs inherited complex behaviors, such as bite inhibition, from their wolf ancestors, which would have been pack hunters with complex body language. These sophisticated forms of social cognition and communication may account for their trainability, playfulness, and ability to fit into human households and social situations, and these attributes have given dogs a relationship with humans that has enabled them to become one of the most successful species on the planet today.</p>
<p>The dogs' value to early human hunter-gatherers led to them quickly becoming ubiquitous across world cultures. Dogs perform many roles for people, such as hunting, herding, pulling loads, protection, assisting police and military, companionship, and, more recently, aiding handicapped individuals. This impact on human society has given them the nickname "man's best friend" in the Western world. In some cultures, however, dogs are also a source of meat.</p>
</div>
<div class="ui main container"></div>
@ -487,10 +491,8 @@ themes : ['Default']
<a class="item"><i class="settings icon"></i> Account Settings</a>
</div>
</div>
<div class="right menu">
<div class="item">
<div class="ui input"><input type="text" placeholder="Search..."></div>
</div>
<div class="item">
<div class="ui input"><input type="text" placeholder="Search..."></div>
</div>
</div>
</div>

54
server/documents/hotfix.html
View File

@ -9,28 +9,23 @@ type : 'Library'
<!-- TEST JS HERE !-->
<script type="text/javascript">
$(document).ready(function() {
$('.ui.dropdown').dropdown();
$('#bt1').on('click', function () {
$('.ui.dropdown').dropdown('set selected', 'normal');
});
$('#bt2').on('click', function () {
$('.ui.dropdown').dropdown('set selected', 'true');
});
$('#bt3').on('click', function () {
$('.ui.dropdown').dropdown('set selected', 1);
});
$('#bt4').on('click', function () {
$('.ui.dropdown').dropdown('clear');
});
$('#bt5').on('click', function () {
$('.ui.dropdown').dropdown('restore defaults');
});
$('#bt6').on('click', function () {
$('.ui.dropdown').dropdown('set text', 'Arbitrary Text');
});
$('.trigger')
.popup({
onHide: function() {
return false;
}
})
;
$('.ui.button')
.state({
onActivate: function() {
$('.trigger').attr('data-html', 'Zoo Zoo');
},
onDeactivate: function() {
$('.trigger').attr('data-html', 'Woo Woo');
}
})
;
});
</script>
@ -40,17 +35,8 @@ $(document).ready(function() {
</style>
<div class="ui container" style="padding-top:300px;">
<div class="ui two column middle aligned very relaxed fitted stackable grid">
<div class="column">
<a class="ui green button">Upload a document</a>
<input type="file" name="documents" multiple="multiple" class="ui input hidden"/>
</div>
<div class="ui vertical divider">
Or
</div>
<div class="center aligned column">
<a class="ui green button">Enter your text</a>
<textarea class="ui input hidden"></textarea>
<div class="trigger ui label" data-html="Woo Woo">Hover me</div>
<div class="ui button">
Change
</div>
</div>
</div>

4
server/documents/modules/popup.html.eco
View File

@ -708,7 +708,7 @@ themes : ['Default']
<td>onShow</td>
<td>$module</td>
<td>$popup</td>
<td>Callback before popup is shown</td>
<td>Callback before popup is shown. Returning <code>false</code> from this callback will cancel the popup from showing.</td>
</tr>
<tr>
<td>onVisible</td>
@ -720,7 +720,7 @@ themes : ['Default']
<td>onHide</td>
<td>$module</td>
<td>$popup</td>
<td>Callback before popup is hidden</td>
<td>Callback before popup is hidden. Returning <code>false</code> from this callback will cancel the popup from hiding.</td>
</tr>
<tr>
<td>onHidden</td>

12
server/documents/modules/rating.html.eco
View File

@ -50,17 +50,17 @@ themes : ['Default']
<h4 class="ui header">Size</h4>
<p>A rating can vary in size</p>
<div class="ui mini star rating"></div>
<div class="ignored hidden ui divider"></div>
<br><br>
<div class="ui tiny star rating"></div>
<div class="ignored hidden ui divider"></div>
<br><br>
<div class="ui small star rating"></div>
<div class="ignored hidden ui divider"></div>
<br><br>
<div class="ui star rating"></div>
<div class="ignored hidden ui divider"></div>
<br><br>
<div class="ui large star rating"></div>
<div class="ignored hidden ui divider"></div>
<br><br>
<div class="ui huge star rating"></div>
<div class="ignored hidden ui divider"></div>
<br><br>
<div class="ui massive star rating"></div>
</div>
</div>

107
server/files/javascript/docs.js
View File

@ -73,9 +73,6 @@ semantic.ready = function() {
$shownExample = $example.filter('.shown'),
$prerenderedExample = $example.has('.ui.dropdown, .ui.rating, .ui.embed'),
$overview = $('.masthead.segment .overview'),
//$developer = $('.header .developer.item'),
//$designer = $('.header .designer.item'),
$sidebarButton = $('.fixed.launch.button'),
$code = $('div.code').not('.existing'),
@ -636,71 +633,6 @@ semantic.ready = function() {
return $element;
}
},
changeMode: function(value) {
if(value == 'overview') {
handler.showOverview();
}
else {
handler.hideOverview();
if(value == 'design') {
handler.designerMode();
}
if(value == 'code') {
handler.developerMode();
}
}
$sectionHeaders.visibility('refresh');
$sectionExample.visibility('refresh');
$footer.visibility('refresh');
},
showOverview: function() {
var
$body = $('body'),
$example = $('.example')
;
$body.addClass('overview');
$example.each(function() {
$(this).children().not('.ui.header:eq(0), .example p:eq(0)').hide();
});
$example.filter('.another').css('display', 'none');
$('.sticky').sticky('refresh');
},
hideOverview: function() {
var
$body = $('body'),
$example = $('.example')
;
$body.removeClass('overview');
$example.each(function() {
$(this).children().not('.ui.header:eq(0), .example p:eq(0)').css('display', '');
});
$example.filter('.another').removeAttr('style');
$('.sticky').sticky('refresh');
},
developerMode: function() {
var
$body = $('body'),
$example = $('.example').not('.no')
;
$example
.each(function() {
$.proxy(handler.createCode, $(this))('developer');
})
;
$('.sticky').sticky('refresh');
},
designerMode: function() {
var
$body = $('body'),
$example = $('.example').not('.no')
;
$example
.each(function() {
$.proxy(handler.createCode, $(this))('designer');
})
;
$('.sticky').sticky('refresh');
},
openMusic: function() {
var
@ -725,7 +657,10 @@ semantic.ready = function() {
indent
;
if(!leadingSpaces) {
return 4;
return ($pageTabs.length > 0)
? 6
: 4
;
}
if(leadingSpaces !== 0) {
indent = leadingSpaces;
@ -748,9 +683,9 @@ semantic.ready = function() {
$example = $(this).closest('.example'),
$annotation = $example.find('.annotation'),
$code = $annotation.find('.code'),
$header = $example.not('.another').children('.ui.header:first-of-type').eq(0).add('p:first-of-type'),
$intro = $example.children().not('.ignored, h4:first-child').filter('.ui').eq(0).prevAll(),
$ignored = $('i.code:last-child, .wireframe, .anchor, .code, .existing, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
$demo = $example.children().not($header).not($ignored),
$demo = $example.children().not($intro).not($ignored),
code = ''
;
if( $code.size() === 0) {
@ -797,12 +732,12 @@ semantic.ready = function() {
createCode: function(type) {
var
$example = $(this).closest('.example'),
$header = $example.not('.another').children('.ui.header:first-of-type').eq(0).add('p:first-of-type'),
$intro = $example.children().not('.ignored, h4:first-child').filter('.ui').eq(0).prevAll(),
$annotation = $example.find('.annotation'),
$code = $annotation.find('.code'),
$html = $example.children('.html'),
$ignoredContent = $('.ui.popup, i.code:last-child, .anchor, .code, .existing.segment, .instructive, .language.label, .annotation, br, .ignore, style, script, .ignored'),
$demo = $example.children().not($header).not($ignoredContent),
$ignoredContent = $('.ui.popup, i.code:last-child, .anchor, .code, .existing.segment, .instructive, .language.label, .annotation, .ignore, style, script, .ignored'),
$demo = $example.children().not($intro).not($ignoredContent),
code = $example.data('code') || $.proxy(handler.generateCode, this)(),
$label
;
@ -846,20 +781,22 @@ semantic.ready = function() {
if( ($annotation.eq(0).is(':visible') || type == 'designer') && type != 'developer' ) {
$annotation.transition('hide');
$html.removeClass('ui top attached segment');
handler.refreshSticky();
}
else {
$html.addClass('ui top attached segment');
$header.css('display', '');
$annotation.transition('fade');
}
// content position changed
if(type === undefined) {
$sectionHeaders.visibility('refresh');
$sectionExample.visibility('refresh');
$footer.visibility('refresh');
$intro.css('display', '');
$annotation.transition('fade', handler.refreshSticky);
}
},
refreshSticky: function() {
$sectionHeaders.visibility('refresh');
$sectionExample.visibility('refresh');
$sticky.sticky('refresh');
$footer.visibility('refresh');
},
createAnnotation: function() {
if(!$(this).data('type')) {
$(this).data('type', 'html');
@ -1280,12 +1217,6 @@ semantic.ready = function() {
.on('click', handler.swapStyle)
;
$overview
.dropdown({
action: 'select',
onChange: handler.changeMode
})
;
$menuPopup
.add($languageDropdown)

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

@ -933,6 +933,9 @@ p:last-child {
#example .example > .html.segment > .attached.label {
display: block;
}
#example .example > .html.segment > .attached.label .copy {
float: right;
}
#example .example > .html.segment {
padding: 3.5em 1em 1em;
}

2
server/partials/transifex.html.eco
View File

@ -1,4 +1,4 @@
<% if ('developments' in @getEnvironments()) or (@document.title? and @document.title is 'Page Not Found'): %>
<% if ('development' in @getEnvironments()) or (@document.title? and @document.title is 'Page Not Found'): %>
<% else: %>
<script type="text/javascript">
window.liveSettings = {

Write Preview
Loading…
Cancel
Save