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 mediaqueries once and for all, adds stacking demos to items, grid

pull/13/head
Jack Lukic 12 years ago
parent
33ceace514
commit
341e0ddec7
29 changed files with 1470 additions and 146 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      build/minified/collections/grid.min.css
  2. 2
      build/minified/elements/header.min.css
  3. 287
      build/minified/modules/dropdown.js
  4. 1
      build/minified/modules/dropdown.min.js
  5. 2
      build/minified/views/feed.min.css
  6. 2
      build/minified/views/items.min.css
  7. 287
      build/packaged/modules/dropdown.js
  8. 2
      build/packaged/semantic.min.css
  9. 7
      build/uncompressed/collections/grid.css
  10. 18
      build/uncompressed/elements/header.css
  11. 287
      build/uncompressed/modules/dropdown.js
  12. 7
      build/uncompressed/views/feed.css
  13. 20
      build/uncompressed/views/items.css
  14. 18
      node/src/documents/collections/grid.html
  15. 181
      node/src/documents/views/feed.html
  16. 38
      node/src/documents/views/items.html
  17. 7
      node/src/files/components/semantic/collections/grid.css
  18. 18
      node/src/files/components/semantic/elements/header.css
  19. 287
      node/src/files/components/semantic/modules/dropdown.js
  20. 7
      node/src/files/components/semantic/views/feed.css
  21. 20
      node/src/files/components/semantic/views/items.css
  22. 15
      node/src/files/javascript/semantic.js
  23. 48
      node/src/files/stylesheets/semantic.css
  24. 3
      node/src/layouts/default.html.eco
  25. 7
      src/collections/grid.less
  26. 12
      src/elements/header.less
  27. 1
      src/elements/icons.less
  28. 7
      src/views/feed.less
  29. 23
      src/views/items.less

2
build/minified/collections/grid.min.css
View File

@ -1 +1 @@
.ui.grid{width:100%;display:block;text-align:center;font-size:0;margin:0 -1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.grid:after,.ui.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.grid>.column,.ui.grid>.row>.column{display:inline-block;text-align:left;font-size:1rem;padding-left:1.33%;padding-right:1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;vertical-align:top}.ui.grid>.row{display:block;width:100%}.ui.grid>.row{margin-top:2%;padding-top:2%}.ui.grid>.row:first-child{padding-top:0rem;margin-top:0rem}.ui.grid>.row>img,.ui.grid>.row>.column>img{max-width:100%}.ui.grid .column>.ui.segment:only-child{margin:0}.ui.grid .column>.grid{margin-left:-1.333%;margin-right:-1.333%}.ui.page.grid{padding:0 2%}@media only screen and (max-width:1000px){.ui.responsive.grid{padding:0 5.55%}}@media only screen and (min-width:1000px){.ui.responsive.grid{padding:0 8%}}@media only screen and (min-width:1500px){.ui.responsive.grid{padding:0 13%}}@media only screen and (min-width:1750px){.ui.responsive.grid{padding:0 18%}}@media only screen and (min-width:2000px){.ui.responsive.grid{padding:0 20%}}.ui.grid .one.wide.column{width:8.3333%}.ui.grid .two.wide.column{width:16.66667%}.ui.grid .three.wide.column{width:25%}.ui.grid .four.wide.column{width:33.3333%}.ui.grid .five.wide.column{width:41.6666%}.ui.grid .six.wide.column{width:50%}.ui.grid .seven.wide.column{width:58.3333%}.ui.grid .eight.wide.column{width:66.6666%}.ui.grid .nine.wide.column{width:75%}.ui.grid .ten.wide.column{width:83.3333%}.ui.grid .eleven.wide.column{width:91.666%}.ui.grid .twelve.wide.column{width:100%}.ui.grid>.column,.ui.grid>.row>.column{width:8.3333%}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui.two.column.grid .column{width:50%}.ui.three.column.grid .column{width:33.3333%}.ui.four.column.grid .column{width:25%}.ui.five.column.grid .column{width:20%}.ui.six.column.grid .column{width:16.66667%}.ui.seven.column.grid .column{width:14.2857%}.ui.eight.column.grid .column{width:12.5%}.ui.nine.column.grid .column{width:11.1111%}.ui.ten.column.grid .column{width:10%}.ui.eleven.column.grid .column{width:9.0909%}.ui.padded.grid{margin-left:0;margin-right:0}.ui.grid .left.floated.column{float:left}.ui.grid .right.floated.column{float:right}.ui.divided.grid>.row{display:table}.ui.divided.grid>.column,.ui.divided.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);-moz-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9)}.ui.divided.grid>.column:first-child,.ui.divided.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.celled.grid{-webkit-box-shadow:0 0 0 1px #DFDFDF;-moz-box-shadow:0 0 0 1px #DFDFDF;box-shadow:0 0 0 1px #DFDFDF}.ui.celled.grid>.row{display:table;margin-top:0;padding-top:0;-webkit-box-shadow:0 -1px 0 0 #dfdfdf;-moz-box-shadow:0 -1px 0 0 #dfdfdf;box-shadow:0 -1px 0 0 #dfdfdf}.ui.celled.grid>.column,.ui.celled.grid>.row>.column{display:table-cell;padding:2%;-webkit-box-shadow:-1px 0 0 0 #dfdfdf;-moz-box-shadow:-1px 0 0 0 #dfdfdf;box-shadow:-1px 0 0 0 #dfdfdf}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.left.aligned.grid,.ui.left.aligned.grid .column,.ui.grid .left.aligned.column,.ui.grid>.left.aligned.row .column{text-align:left}.ui.center.aligned.grid,.ui.center.aligned.grid .column,.ui.grid .center.aligned.column,.ui.grid>.center.aligned.row .column{text-align:center}.ui.right.aligned.grid,.ui.right.aligned.grid .column,.ui.grid .right.aligned.column,.ui.grid>.right.aligned.row .column{text-align:right}.ui.top.aligned.grid .column,.ui.grid .top.aligned.column,.ui.grid>.top.aligned.row .column{vertical-align:top}.ui.middle.aligned.grid .column,.ui.grid .middle.aligned.column,.ui.grid>.middle.aligned.row .column{vertical-align:middle}.ui.bottom.aligned.grid .column,.ui.grid .bottom.aligned.column,.ui.grid>.bottom.aligned.row .column{vertical-align:bottom}.ui.grid .equal.row .column{display:table-cell}@media only screen and (max-width:1000px){.ui.folding.grid{display:block!important}.ui.folding.grid .column{display:block!important;width:100%!important;padding:0!important}}
.ui.grid{width:100%;display:block;text-align:center;font-size:0;margin:0 -1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.grid:after,.ui.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.grid>.column,.ui.grid>.row>.column{display:inline-block;text-align:left;font-size:1rem;padding-left:1.33%;padding-right:1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;vertical-align:top}.ui.grid>.row{display:block;width:100%}.ui.grid>.row{margin-top:2%;padding-top:2%}.ui.grid>.row:first-child{padding-top:0rem;margin-top:0rem}.ui.grid>.row>img,.ui.grid>.row>.column>img{max-width:100%}.ui.grid .column>.ui.segment:only-child{margin:0}.ui.grid .column>.grid{margin-left:-1.333%;margin-right:-1.333%}.ui.page.grid{padding:0 2%}@media only screen and (max-width:1000px){.ui.responsive.grid{padding:0 5.55%}}@media only screen and (min-width:1000px){.ui.responsive.grid{padding:0 8%}}@media only screen and (min-width:1500px){.ui.responsive.grid{padding:0 13%}}@media only screen and (min-width:1750px){.ui.responsive.grid{padding:0 18%}}@media only screen and (min-width:2000px){.ui.responsive.grid{padding:0 20%}}.ui.grid .one.wide.column{width:8.3333%}.ui.grid .two.wide.column{width:16.66667%}.ui.grid .three.wide.column{width:25%}.ui.grid .four.wide.column{width:33.3333%}.ui.grid .five.wide.column{width:41.6666%}.ui.grid .six.wide.column{width:50%}.ui.grid .seven.wide.column{width:58.3333%}.ui.grid .eight.wide.column{width:66.6666%}.ui.grid .nine.wide.column{width:75%}.ui.grid .ten.wide.column{width:83.3333%}.ui.grid .eleven.wide.column{width:91.666%}.ui.grid .twelve.wide.column{width:100%}.ui.grid>.column,.ui.grid>.row>.column{width:8.3333%}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui.two.column.grid .column{width:50%}.ui.three.column.grid .column{width:33.3333%}.ui.four.column.grid .column{width:25%}.ui.five.column.grid .column{width:20%}.ui.six.column.grid .column{width:16.66667%}.ui.seven.column.grid .column{width:14.2857%}.ui.eight.column.grid .column{width:12.5%}.ui.nine.column.grid .column{width:11.1111%}.ui.ten.column.grid .column{width:10%}.ui.eleven.column.grid .column{width:9.0909%}.ui.padded.grid{margin-left:0;margin-right:0}.ui.grid .left.floated.column{float:left}.ui.grid .right.floated.column{float:right}.ui.divided.grid>.row{display:table}.ui.divided.grid>.column,.ui.divided.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);-moz-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9)}.ui.divided.grid>.column:first-child,.ui.divided.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.celled.grid{-webkit-box-shadow:0 0 0 1px #DFDFDF;-moz-box-shadow:0 0 0 1px #DFDFDF;box-shadow:0 0 0 1px #DFDFDF}.ui.celled.grid>.row{display:table;margin-top:0;padding-top:0;-webkit-box-shadow:0 -1px 0 0 #dfdfdf;-moz-box-shadow:0 -1px 0 0 #dfdfdf;box-shadow:0 -1px 0 0 #dfdfdf}.ui.celled.grid>.column,.ui.celled.grid>.row>.column{display:table-cell;padding:1.33%;-webkit-box-shadow:-1px 0 0 0 #dfdfdf;-moz-box-shadow:-1px 0 0 0 #dfdfdf;box-shadow:-1px 0 0 0 #dfdfdf}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.left.aligned.grid,.ui.left.aligned.grid .column,.ui.grid .left.aligned.column,.ui.grid>.left.aligned.row .column{text-align:left}.ui.center.aligned.grid,.ui.center.aligned.grid .column,.ui.grid .center.aligned.column,.ui.grid>.center.aligned.row .column{text-align:center}.ui.right.aligned.grid,.ui.right.aligned.grid .column,.ui.grid .right.aligned.column,.ui.grid>.right.aligned.row .column{text-align:right}.ui.top.aligned.grid .column,.ui.grid .top.aligned.column,.ui.grid>.top.aligned.row .column{vertical-align:top}.ui.middle.aligned.grid .column,.ui.grid .middle.aligned.column,.ui.grid>.middle.aligned.row .column{vertical-align:middle}.ui.bottom.aligned.grid .column,.ui.grid .bottom.aligned.column,.ui.grid>.bottom.aligned.row .column{vertical-align:bottom}.ui.grid .equal.row .column{display:table-cell}@media only screen and (max-width:1000px){.ui.stackable.grid{display:block!important}.ui.stackable.grid .column{margin-bottom:0 2em 1em!important;display:block!important;width:100%!important;padding:0!important}}

2
build/minified/elements/header.min.css
View File

@ -1 +1 @@
.ui.header{border:0;margin:1em 0 1rem;padding:0;font-size:1.33em;font-weight:700;line-height:1.33}.ui.header .ui.sub.header,.ui.header .sub.header{font-size:1rem;font-weight:400;margin:0;padding:0;line-height:1.2;color:rgba(0,0,0,.5)}.ui.header:first-child{margin-top:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;line-height:1.33;font-size:2rem}h2.ui.header{line-height:1.33;font-size:1.75rem}h3.ui.header{line-height:1.33;font-size:1.33rem}h4.ui.header{line-height:1.33;font-size:1.1rem}h5.ui.header{line-height:1.2;font-size:1rem}.ui.huge.header{min-height:1em;font-size:2em}.ui.large.header{font-size:1.75em}.ui.medium.header{font-size:1.33em}.ui.small.header{font-size:1.1em}.ui.tiny.header{font-size:1em}.ui.disabled.header{opacity:.5}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.blue.block.header{background-color:#E6EEF1;border-left:.2em solid #6ECFF5}.ui.black.block.header{background-color:#EAEAEA;border-left:.2em solid #5C6166}.ui.green.block.header{background-color:#EFF8E4;border-left:.2em solid #A1CF64}.ui.red.block.header{background-color:#F6E5E8;border-left:.2em solid #EF4D6D}.ui.purple.block.header{background-color:#EFEDF8;border-left:.2em solid #564F8A}.ui.teal.block.header{background-color:#E9F7F6;border-left:.2em solid #00B5AD}.ui.inverted.header{background-color:#222;color:#FFF}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.inverted.block.header{border-left:0}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left}.ui.right.floated.header{float:right}.ui.fitted.header{padding:0}.ui.block.header{background-color:#F5F5F5;padding:.5em 1em}.ui.dividing.header{padding-bottom:.2rem;border-bottom:1px solid rgba(0,0,0,.1)}.ui.attached.header{padding:.7em 1rem;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.header.icon{display:inline-block;text-align:center}.ui.header.icon .icon{display:block;font-size:4em;margin:0rem auto 2rem}
.ui.header{border:0;margin:1em 0 1rem;padding:0;font-size:1.33em;font-weight:700;line-height:1.33}.ui.header .ui.sub.header,.ui.header .sub.header{font-size:1rem;font-weight:400;margin:0;padding:0;line-height:1.2;color:rgba(0,0,0,.5)}.ui.header:first-child{margin-top:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;line-height:1.33;font-size:2rem}h2.ui.header{line-height:1.33;font-size:1.75rem}h3.ui.header{line-height:1.33;font-size:1.33rem}h4.ui.header{line-height:1.33;font-size:1.1rem}h5.ui.header{line-height:1.2;font-size:1rem}.ui.huge.header{min-height:1em;font-size:2em}.ui.large.header{font-size:1.75em}.ui.medium.header{font-size:1.33em}.ui.small.header{font-size:1.1em}.ui.tiny.header{font-size:1em}.ui.disabled.header{opacity:.5}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.blue.block.header{border-left:.2em solid #6ECFF5}.ui.black.block.header{border-left:.2em solid #5C6166}.ui.green.block.header{border-left:.2em solid #A1CF64}.ui.red.block.header{border-left:.2em solid #EF4D6D}.ui.purple.block.header{border-left:.2em solid #564F8A}.ui.teal.block.header{border-left:.2em solid #00B5AD}.ui.inverted.header{background-color:#222;color:#FFF}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.inverted.block.header{border-left:0}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left}.ui.right.floated.header{float:right}.ui.fitted.header{padding:0}.ui.block.header{background-color:#F5F5F5;padding:.5em 1em}.ui.dividing.header{padding-bottom:.2rem;border-bottom:1px solid rgba(0,0,0,.1)}.ui.attached.header{padding:.7em 1rem;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.header.icon{display:inline-block;text-align:center}.ui.header.icon .icon{display:block;font-size:4em;margin:0rem auto 2rem}

287
build/minified/modules/dropdown.js
View File

@ -0,0 +1,287 @@
/* ******************************
Semantic Module: Checkbox
Author: Jack Lukic
Notes: First Commit MAy 25, 2013
Simple plug-in which maintains the state for ui dropdown
****************************** */
;(function ( $, window, document, undefined ) {
$.fn.dropdown = function(parameters) {
var
$allModules = $(this),
settings = $.extend(true, {}, $.fn.dropdown.settings, parameters),
eventNamespace = '.' + settings.namespace,
moduleNamespace = 'module-' + settings.namespace,
selector = $allModules.selector || '',
time = new Date().getTime(),
performance = [],
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
invokedResponse
;
$allModules
.each(function() {
var
$module = $(this),
$menu = $(this).find(settings.selector.menu),
selector = $module.selector || '',
element = this,
instance = $module.data('module-' + settings.namespace),
className = settings.className,
namespace = settings.namespace,
errors = settings.errors,
module
;
module = {
initialize: function() {
if(settings.context && selector !== '') {
module.verbose('Initializing dropdown with delegated events', $module);
$(element, settings.context)
.on(selector, 'click' + eventNamespace, module.toggle)
.data(moduleNamespace, module)
;
}
else {
module.verbose('Initializing dropdown with bound events', $module);
$module
.on('click' + eventNamespace, module.toggle)
.data(moduleNamespace, module)
;
}
},
can: {
show: function() {
return $module.hasClass(className.disabled);
}
},
destroy: function() {
module.verbose('Destroying previous dropdown for', $module);
$module
.off(namespace)
;
},
enable: function() {
module.debug('Enabling dropdown');
$module
.addClass(className.active)
;
$menu
.show()
;
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onShow, $menu.get())();
},
disable: function() {
module.debug('Disabling dropdown');
$module
.removeClass(className.active)
;
$menu
.hide()
;
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onHide, $menu.get())();
},
toggle: function() {
if(module.can.show()) {
module.show();
}
else {
module.hide();
}
},
setting: function(name, value) {
if(value !== undefined) {
if( $.isPlainObject(name) ) {
$.extend(true, settings, name);
}
else {
settings[name] = value;
}
}
else {
return settings[name];
}
},
internal: function(name, value) {
if(value !== undefined) {
if( $.isPlainObject(name) ) {
$.extend(true, module, name);
}
else {
module[name] = value;
}
}
else {
return module[name];
}
},
debug: function() {
if(settings.debug) {
module.performance.log(arguments[0]);
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
}
},
verbose: function() {
if(settings.verbose && settings.debug) {
module.performance.log(arguments[0]);
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
}
},
error: function() {
if(console.log !== undefined) {
module.error = Function.prototype.bind.call(console.log, console, settings.moduleName + ':');
}
},
performance: {
log: function(message) {
var
currentTime,
executionTime,
previousTime
;
if(settings.performance) {
currentTime = new Date().getTime();
previousTime = time || currentTime,
executionTime = currentTime - previousTime;
time = currentTime;
performance.push({
'Element' : element,
'Name' : message,
'Execution Time' : executionTime
});
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
}
},
display: function() {
var
title = settings.moduleName,
caption = settings.moduleName + ': ' + selector + '(' + $allModules.size() + ' elements)',
totalExecutionTime = 0
;
if(selector) {
title += 'Performance (' + selector + ')';
}
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title);
if(console.table) {
$.each(performance, function(index, data) {
totalExecutionTime += data['Execution Time'];
});
console.table(performance);
}
else {
$.each(performance, function(index, data) {
totalExecutionTime += data['Execution Time'];
});
}
console.log('Total Execution Time:', totalExecutionTime +'ms');
console.groupEnd();
performance = [];
time = false;
}
}
},
invoke: function(query, passedArguments, context) {
var
maxDepth,
found
;
passedArguments = passedArguments || queryArguments;
context = element || context;
if(typeof query == 'string' && instance !== undefined) {
query = query.split('.');
maxDepth = query.length - 1;
$.each(query, function(depth, value) {
if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
instance = instance[value];
return true;
}
else if( instance[value] !== undefined ) {
found = instance[value];
return true;
}
module.error(errors.method);
return false;
});
}
if ( $.isFunction( found ) ) {
module.verbose('Executing invoked function', found);
return found.apply(context, passedArguments);
}
return found || false;
}
};
if(methodInvoked) {
if(instance === undefined) {
module.initialize();
}
invokedResponse = module.invoke(query);
}
else {
if(instance !== undefined) {
module.destroy();
}
module.initialize();
}
})
;
return (invokedResponse)
? invokedResponse
: this
;
};
$.fn.dropdown.settings = {
moduleName : 'Dropdown Module',
namespace : 'dropdown',
verbose : true,
debug : true,
performance : false,
// delegated event context
context : false,
required : 'auto',
onChange : function(){},
onShow : function(){},
onHide : function(){},
errors : {
method : 'The method you called is not defined.'
},
selector : {
menu : '.menu'
},
className : {
active : 'visible'
}
};
})( jQuery, window , document );

1
build/minified/modules/dropdown.min.js
View File

@ -0,0 +1 @@
(function(e,t,n,o){e.fn.dropdown=function(t){var n,a=e(this),i=e.extend(!0,{},e.fn.dropdown.settings,t),s="."+i.namespace,r="module-"+i.namespace,c=(a.selector||"",(new Date).getTime()),l=[],u=arguments[0],d="string"==typeof u,f=[].slice.call(arguments,1);return a.each(function(){var t,m=e(this),p=e(this).find(i.selector.menu),g=m.selector||"",h=this,v=m.data("module-"+i.namespace),b=i.className,y=i.namespace,x=i.errors;t={initialize:function(){i.context&&""!==g?(t.verbose("Initializing dropdown with delegated events",m),e(h,i.context).on(g,"click"+s,t.toggle).data(r,t)):(t.verbose("Initializing dropdown with bound events",m),m.on("click"+s,t.toggle).data(r,t))},can:{show:function(){return m.hasClass(b.disabled)}},destroy:function(){t.verbose("Destroying previous dropdown for",m),m.off(y)},enable:function(){t.debug("Enabling dropdown"),m.addClass(b.active),p.show(),e.proxy(i.onChange,p.get())(),e.proxy(i.onShow,p.get())()},disable:function(){t.debug("Disabling dropdown"),m.removeClass(b.active),p.hide(),e.proxy(i.onChange,p.get())(),e.proxy(i.onHide,p.get())()},toggle:function(){t.can.show()?t.show():t.hide()},setting:function(t,n){return n===o?i[t]:(e.isPlainObject(t)?e.extend(!0,i,t):i[t]=n,o)},internal:function(n,a){return a===o?t[n]:(e.isPlainObject(n)?e.extend(!0,t,n):t[n]=a,o)},debug:function(){i.debug&&(t.performance.log(arguments[0]),t.verbose=Function.prototype.bind.call(console.info,console,i.moduleName+":"))},verbose:function(){i.verbose&&i.debug&&(t.performance.log(arguments[0]),t.verbose=Function.prototype.bind.call(console.info,console,i.moduleName+":"))},error:function(){console.log!==o&&(t.error=Function.prototype.bind.call(console.log,console,i.moduleName+":"))},performance:{log:function(e){var n,o,a;i.performance&&(n=(new Date).getTime(),a=c||n,o=n-a,c=n,l.push({Element:h,Name:e,"Execution Time":o}),clearTimeout(t.performance.timer),t.performance.timer=setTimeout(t.performance.display,100))},display:function(){var t=i.moduleName,n=(i.moduleName+": "+g+"("+a.size()+" elements)",0);g&&(t+="Performance ("+g+")"),(console.group!==o||console.table!==o)&&l.length>0&&(console.groupCollapsed(t),console.table?(e.each(l,function(e,t){n+=t["Execution Time"]}),console.table(l)):e.each(l,function(e,t){n+=t["Execution Time"]}),console.log("Total Execution Time:",n+"ms"),console.groupEnd(),l=[],c=!1)}},invoke:function(n,a,i){var s,r;return a=a||f,i=h||i,"string"==typeof n&&v!==o&&(n=n.split("."),s=n.length-1,e.each(n,function(n,a){return e.isPlainObject(v[a])&&n!=s?(v=v[a],!0):v[a]!==o?(r=v[a],!0):(t.error(x.method),!1)})),e.isFunction(r)?(t.verbose("Executing invoked function",r),r.apply(i,a)):r||!1}},d?(v===o&&t.initialize(),n=t.invoke(u)):(v!==o&&t.destroy(),t.initialize())}),n?n:this},e.fn.dropdown.settings={moduleName:"Dropdown Module",namespace:"dropdown",verbose:!0,debug:!0,performance:!1,context:!1,required:"auto",onChange:function(){},onShow:function(){},onHide:function(){},errors:{method:"The method you called is not defined."},selector:{menu:".menu"},className:{active:"visible"}}})(jQuery,window,document);

2
build/minified/views/feed.min.css
View File

@ -1 +1 @@
.ui.feed a{cursor:pointer}.ui.feed .event{width:100%;display:table;padding:1em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.feed .event:first-child{border-top:0}.ui.feed .event:last-child{margin-bottom:2em}.ui.feed .label{width:3em;display:table-cell;vertical-align:top;text-align:left}.ui.feed .label .icon{font-size:1.5em;margin:0}.ui.feed .label img{width:3em;margin:0;border-radius:50em}.ui.feed .content{display:table-cell;vertical-align:top;text-align:left;padding:1em 1em 0}.ui.feed .content .date{float:right;color:rgba(0,0,0,.4)}.ui.feed .content .summary{color:rgba(0,0,0,.75)}.ui.feed .content .summary img{display:inline-block;margin-right:.25em;width:4em;border-radius:500px}.ui.feed .content .extra{margin:1em 0 0;padding:.5em 0 0;color:rgba(0,0,0,.5)}.ui.feed .content .extra.images img{display:inline-block;margin-right:.25em;width:6em}.ui.feed .content .extra.text{padding:.5em 1em;border-left:.2em solid rgba(0,0,0,.1)}.ui.small.feed .label img{width:2.5em}.ui.small.feed .label .icon{font-size:1.25em}.ui.feed .event{padding:.75em 0}.ui.small.feed .content{padding:.5em .5em 0}.ui.small.feed .content .extra.images img{width:5em}.ui.small.feed .content .extra{margin:.5em 0 0}.ui.feed .content .extra.text{padding:.25em .5em}
.ui.feed a{cursor:pointer}.ui.feed .event{width:100%;display:table;padding:1em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.feed .event:first-child{border-top:0}.ui.feed .event:last-child{margin-bottom:2em}.ui.feed .label{width:3em;display:table-cell;vertical-align:top;text-align:left}.ui.feed .label .icon{font-size:1.5em;margin:0}.ui.feed .label img{width:3em;margin:0;border-radius:50em}.ui.feed .label+.content{padding:1em 1em 0}.ui.feed .content{display:table-cell;vertical-align:top;text-align:left}.ui.feed .content .date{float:right;padding-left:1em;color:rgba(0,0,0,.4)}.ui.feed .content .summary{color:rgba(0,0,0,.75)}.ui.feed .content .summary img{display:inline-block;margin-right:.25em;width:4em;border-radius:500px}.ui.feed .content .extra{margin:1em 0 0;padding:.5em 0 0;color:rgba(0,0,0,.5)}.ui.feed .content .extra.images img{display:inline-block;margin-right:.25em;width:6em}.ui.feed .content .extra.text{padding:.5em 1em;border-left:.2em solid rgba(0,0,0,.1)}.ui.small.feed .label img{width:2.5em}.ui.small.feed .label .icon{font-size:1.25em}.ui.feed .event{padding:.75em 0}.ui.small.feed .label+.content{padding:.5em .5em 0}.ui.small.feed .content .extra.images img{width:5em}.ui.small.feed .content .extra{margin:.5em 0 0}.ui.feed .content .extra.text{padding:.25em .5em}

2
build/minified/views/items.min.css
File diff suppressed because it is too large
View File

287
build/packaged/modules/dropdown.js
View File

@ -0,0 +1,287 @@
/* ******************************
Semantic Module: Checkbox
Author: Jack Lukic
Notes: First Commit MAy 25, 2013
Simple plug-in which maintains the state for ui dropdown
****************************** */
;(function ( $, window, document, undefined ) {
$.fn.dropdown = function(parameters) {
var
$allModules = $(this),
settings = $.extend(true, {}, $.fn.dropdown.settings, parameters),
eventNamespace = '.' + settings.namespace,
moduleNamespace = 'module-' + settings.namespace,
selector = $allModules.selector || '',
time = new Date().getTime(),
performance = [],
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
invokedResponse
;
$allModules
.each(function() {
var
$module = $(this),
$menu = $(this).find(settings.selector.menu),
selector = $module.selector || '',
element = this,
instance = $module.data('module-' + settings.namespace),
className = settings.className,
namespace = settings.namespace,
errors = settings.errors,
module
;
module = {
initialize: function() {
if(settings.context && selector !== '') {
module.verbose('Initializing dropdown with delegated events', $module);
$(element, settings.context)
.on(selector, 'click' + eventNamespace, module.toggle)
.data(moduleNamespace, module)
;
}
else {
module.verbose('Initializing dropdown with bound events', $module);
$module
.on('click' + eventNamespace, module.toggle)
.data(moduleNamespace, module)
;
}
},
can: {
show: function() {
return $module.hasClass(className.disabled);
}
},
destroy: function() {
module.verbose('Destroying previous dropdown for', $module);
$module
.off(namespace)
;
},
enable: function() {
module.debug('Enabling dropdown');
$module
.addClass(className.active)
;
$menu
.show()
;
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onShow, $menu.get())();
},
disable: function() {
module.debug('Disabling dropdown');
$module
.removeClass(className.active)
;
$menu
.hide()
;
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onHide, $menu.get())();
},
toggle: function() {
if(module.can.show()) {
module.show();
}
else {
module.hide();
}
},
setting: function(name, value) {
if(value !== undefined) {
if( $.isPlainObject(name) ) {
$.extend(true, settings, name);
}
else {
settings[name] = value;
}
}
else {
return settings[name];
}
},
internal: function(name, value) {
if(value !== undefined) {
if( $.isPlainObject(name) ) {
$.extend(true, module, name);
}
else {
module[name] = value;
}
}
else {
return module[name];
}
},
debug: function() {
if(settings.debug) {
module.performance.log(arguments[0]);
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
}
},
verbose: function() {
if(settings.verbose && settings.debug) {
module.performance.log(arguments[0]);
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
}
},
error: function() {
if(console.log !== undefined) {
module.error = Function.prototype.bind.call(console.log, console, settings.moduleName + ':');
}
},
performance: {
log: function(message) {
var
currentTime,
executionTime,
previousTime
;
if(settings.performance) {
currentTime = new Date().getTime();
previousTime = time || currentTime,
executionTime = currentTime - previousTime;
time = currentTime;
performance.push({
'Element' : element,
'Name' : message,
'Execution Time' : executionTime
});
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
}
},
display: function() {
var
title = settings.moduleName,
caption = settings.moduleName + ': ' + selector + '(' + $allModules.size() + ' elements)',
totalExecutionTime = 0
;
if(selector) {
title += 'Performance (' + selector + ')';
}
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title);
if(console.table) {
$.each(performance, function(index, data) {
totalExecutionTime += data['Execution Time'];
});
console.table(performance);
}
else {
$.each(performance, function(index, data) {
totalExecutionTime += data['Execution Time'];
});
}
console.log('Total Execution Time:', totalExecutionTime +'ms');
console.groupEnd();
performance = [];
time = false;
}
}
},
invoke: function(query, passedArguments, context) {
var
maxDepth,
found
;
passedArguments = passedArguments || queryArguments;
context = element || context;
if(typeof query == 'string' && instance !== undefined) {
query = query.split('.');
maxDepth = query.length - 1;
$.each(query, function(depth, value) {
if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
instance = instance[value];
return true;
}
else if( instance[value] !== undefined ) {
found = instance[value];
return true;
}
module.error(errors.method);
return false;
});
}
if ( $.isFunction( found ) ) {
module.verbose('Executing invoked function', found);
return found.apply(context, passedArguments);
}
return found || false;
}
};
if(methodInvoked) {
if(instance === undefined) {
module.initialize();
}
invokedResponse = module.invoke(query);
}
else {
if(instance !== undefined) {
module.destroy();
}
module.initialize();
}
})
;
return (invokedResponse)
? invokedResponse
: this
;
};
$.fn.dropdown.settings = {
moduleName : 'Dropdown Module',
namespace : 'dropdown',
verbose : true,
debug : true,
performance : false,
// delegated event context
context : false,
required : 'auto',
onChange : function(){},
onShow : function(){},
onHide : function(){},
errors : {
method : 'The method you called is not defined.'
},
selector : {
menu : '.menu'
},
className : {
active : 'visible'
}
};
})( jQuery, window , document );

2
build/packaged/semantic.min.css
File diff suppressed because it is too large
View File

7
build/uncompressed/collections/grid.css
View File

@ -253,7 +253,7 @@
.ui.celled.grid > .column,
.ui.celled.grid > .row > .column {
display: table-cell;
padding: 2%;
padding: 1.33%;
-webkit-box-shadow: -1px 0px 0px 0px #dfdfdf;
-moz-box-shadow: -1px 0px 0px 0px #dfdfdf;
box-shadow: -1px 0px 0px 0px #dfdfdf;
@ -315,10 +315,11 @@
Folding
--------------------*/
@media only screen and (max-width: 1000px) {
.ui.folding.grid {
.ui.stackable.grid {
display: block !important;
}
.ui.folding.grid .column {
.ui.stackable.grid .column {
margin-bottom: 0em 2em 1em !important;
display: block !important;
width: 100% !important;
padding: 0% !important;

18
build/uncompressed/elements/header.css
View File

@ -111,27 +111,33 @@ h5.ui.header {
color: #00B5AD !important;
}
.ui.blue.block.header {
background-color: #E6EEF1;
/* background-color: #E6EEF1; */
border-left: 0.2em solid #6ECFF5;
}
.ui.black.block.header {
background-color: #EAEAEA;
/* background-color: #EAEAEA; */
border-left: 0.2em solid #5C6166;
}
.ui.green.block.header {
background-color: #EFF8E4;
/* background-color: #EFF8E4; */
border-left: 0.2em solid #A1CF64;
}
.ui.red.block.header {
background-color: #F6E5E8;
/* background-color: #F6E5E8; */
border-left: 0.2em solid #EF4D6D;
}
.ui.purple.block.header {
background-color: #EFEDF8;
/* background-color: #EFEDF8; */
border-left: 0.2em solid #564F8A;
}
.ui.teal.block.header {
background-color: #E9F7F6;
/* background-color: #E9F7F6; */
border-left: 0.2em solid #00B5AD;
}
/*-------------------

287
build/uncompressed/modules/dropdown.js
View File

@ -0,0 +1,287 @@
/* ******************************
Semantic Module: Checkbox
Author: Jack Lukic
Notes: First Commit MAy 25, 2013
Simple plug-in which maintains the state for ui dropdown
****************************** */
;(function ( $, window, document, undefined ) {
$.fn.dropdown = function(parameters) {
var
$allModules = $(this),
settings = $.extend(true, {}, $.fn.dropdown.settings, parameters),
eventNamespace = '.' + settings.namespace,
moduleNamespace = 'module-' + settings.namespace,
selector = $allModules.selector || '',
time = new Date().getTime(),
performance = [],
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
invokedResponse
;
$allModules
.each(function() {
var
$module = $(this),
$menu = $(this).find(settings.selector.menu),
selector = $module.selector || '',
element = this,
instance = $module.data('module-' + settings.namespace),
className = settings.className,
namespace = settings.namespace,
errors = settings.errors,
module
;
module = {
initialize: function() {
if(settings.context && selector !== '') {
module.verbose('Initializing dropdown with delegated events', $module);
$(element, settings.context)
.on(selector, 'click' + eventNamespace, module.toggle)
.data(moduleNamespace, module)
;
}
else {
module.verbose('Initializing dropdown with bound events', $module);
$module
.on('click' + eventNamespace, module.toggle)
.data(moduleNamespace, module)
;
}
},
can: {
show: function() {
return $module.hasClass(className.disabled);
}
},
destroy: function() {
module.verbose('Destroying previous dropdown for', $module);
$module
.off(namespace)
;
},
enable: function() {
module.debug('Enabling dropdown');
$module
.addClass(className.active)
;
$menu
.show()
;
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onShow, $menu.get())();
},
disable: function() {
module.debug('Disabling dropdown');
$module
.removeClass(className.active)
;
$menu
.hide()
;
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onHide, $menu.get())();
},
toggle: function() {
if(module.can.show()) {
module.show();
}
else {
module.hide();
}
},
setting: function(name, value) {
if(value !== undefined) {
if( $.isPlainObject(name) ) {
$.extend(true, settings, name);
}
else {
settings[name] = value;
}
}
else {
return settings[name];
}
},
internal: function(name, value) {
if(value !== undefined) {
if( $.isPlainObject(name) ) {
$.extend(true, module, name);
}
else {
module[name] = value;
}
}
else {
return module[name];
}
},
debug: function() {
if(settings.debug) {
module.performance.log(arguments[0]);
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
}
},
verbose: function() {
if(settings.verbose && settings.debug) {
module.performance.log(arguments[0]);
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
}
},
error: function() {
if(console.log !== undefined) {
module.error = Function.prototype.bind.call(console.log, console, settings.moduleName + ':');
}
},
performance: {
log: function(message) {
var
currentTime,
executionTime,
previousTime
;
if(settings.performance) {
currentTime = new Date().getTime();
previousTime = time || currentTime,
executionTime = currentTime - previousTime;
time = currentTime;
performance.push({
'Element' : element,
'Name' : message,
'Execution Time' : executionTime
});
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
}
},
display: function() {
var
title = settings.moduleName,
caption = settings.moduleName + ': ' + selector + '(' + $allModules.size() + ' elements)',
totalExecutionTime = 0
;
if(selector) {
title += 'Performance (' + selector + ')';
}
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title);
if(console.table) {
$.each(performance, function(index, data) {
totalExecutionTime += data['Execution Time'];
});
console.table(performance);
}
else {
$.each(performance, function(index, data) {
totalExecutionTime += data['Execution Time'];
});
}
console.log('Total Execution Time:', totalExecutionTime +'ms');
console.groupEnd();
performance = [];
time = false;
}
}
},
invoke: function(query, passedArguments, context) {
var
maxDepth,
found
;
passedArguments = passedArguments || queryArguments;
context = element || context;
if(typeof query == 'string' && instance !== undefined) {
query = query.split('.');
maxDepth = query.length - 1;
$.each(query, function(depth, value) {
if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
instance = instance[value];
return true;
}
else if( instance[value] !== undefined ) {
found = instance[value];
return true;
}
module.error(errors.method);
return false;
});
}
if ( $.isFunction( found ) ) {
module.verbose('Executing invoked function', found);
return found.apply(context, passedArguments);
}
return found || false;
}
};
if(methodInvoked) {
if(instance === undefined) {
module.initialize();
}
invokedResponse = module.invoke(query);
}
else {
if(instance !== undefined) {
module.destroy();
}
module.initialize();
}
})
;
return (invokedResponse)
? invokedResponse
: this
;
};
$.fn.dropdown.settings = {
moduleName : 'Dropdown Module',
namespace : 'dropdown',
verbose : true,
debug : true,
performance : false,
// delegated event context
context : false,
required : 'auto',
onChange : function(){},
onShow : function(){},
onHide : function(){},
errors : {
method : 'The method you called is not defined.'
},
selector : {
menu : '.menu'
},
className : {
active : 'visible'
}
};
})( jQuery, window , document );

7
build/uncompressed/views/feed.css
View File

@ -50,16 +50,19 @@
margin: 0em;
border-radius: 50em;
}
.ui.feed .label + .content {
padding: 1em 1em 0em;
}
/* Content */
.ui.feed .content {
display: table-cell;
vertical-align: top;
text-align: left;
padding: 1em 1em 0em;
}
/* Date */
.ui.feed .content .date {
float: right;
padding-left: 1em;
color: rgba(0, 0, 0, 0.4);
}
/* Summary */
@ -99,7 +102,7 @@
.ui.feed .event {
padding: 0.75em 0em;
}
.ui.small.feed .content {
.ui.small.feed .label + .content {
padding: 0.5em 0.5em 0;
}
.ui.small.feed .content .extra.images img {

20
build/uncompressed/views/items.css
View File

@ -381,9 +381,23 @@
padding-left: 0.1%;
padding-right: 0.1%;
}
/*--------------
Horizontal
---------------*/
/*-------------------
Responsive
--------------------*/
@media only screen and (max-width: 600px) {
.ui.stackable.items {
display: block !important;
}
.ui.stackable.items .item {
margin-bottom: 1.5em !important;
display: block !important;
width: 100% !important;
padding: 0% !important;
}
}
/*--------------------
Horizontal
---------------------*/
.ui.horizontal.items > .item,
.ui.items > .horizontal.item {
display: table;

18
node/src/documents/collections/grid.html
View File

@ -393,6 +393,24 @@ type : 'UI Collection'
</div>
</div>
</div>
<div class="example">
<h4>Stackable Grid<h4>
<p>A grid can have its columns take a full column width when below a threshold to allow for content to display properly at small sizes</p>
<div class="two column stackable ui grid">
<div class="column">
<div class="ui segment">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<div class="ui segment">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Divided</h4>

181
node/src/documents/views/feed.html
View File

@ -8,7 +8,7 @@ type : 'UI View'
<div class="segment">
<div class="container">
<h1 class="ui dividing header">Feed</h1>
<p>An item view is a generic list of site content, and can be useful for displaying a wide variety of named image content.</p>
<p>A feed is a collection of events that have occured in series</p>
</div>
</div>
<div class="main container">
@ -24,6 +24,8 @@ type : 'UI View'
<h2 class="ui dividing header">Standard</h2>
<div class="example">
<h4>Feed</h4>
<p>A standard feed with no additonal elements</p>
<div class="ui red feed segment">
<h3 class="ui header">Recent Activity</h3>
<div class="event">
@ -174,86 +176,119 @@ type : 'UI View'
<h4 class="ui header">Sizes</h4>
<p>A feed can have different sizes</p>
<div class="ui small blue feed segment" style="width: 540px;">
<h4 class="ui header">Recent Activity</h4>
<div class="event">
<div class="label">
<img src="/images/demo/avatar2.jpg">
</div>
<div class="content">
<div class="date">
Just moments ago
</div>
<div class="summary">
<a>Sally Poodle</a> added you as a friend
</div>
</div>
</div>
<div class="event">
<div class="label">
<i class="icon circular idea"></i>
</div>
<div class="content">
<div class="date">
3 days ago
</div>
<div class="summary">
You submitted a new post to the page
</div>
<div class="extra text">
I am a dog and I do not know how to make a post
</div>
</div>
</div>
<div class="event">
<div class="label">
<i class="icon circular photos"></i>
</div>
<div class="content">
<div class="date">
3 days ago
</div>
<div class="summary">
<a>Sally Poodle</a> added <a>2 new photos</a> of you
</div>
<div class="extra images">
<img src="/images/demo/item1.jpg">
<img src="/images/demo/item2.jpg">
<div class="ui grid">
<div class="seven wide column">
<div class="ui small red feed segment">
<h4 class="ui header">My Activity</h4>
<div class="event">
<div class="content">
<div class="date">
Just moments ago
</div>
<div class="summary">
<a>Sally Poodle</a> added you as a friend
</div>
</div>
</div>
<div class="event">
<div class="content">
<div class="date">
3 days ago
</div>
<div class="summary">
You submitted a new post to the page
</div>
<div class="extra text">
I am a dog and I do not know how to make a post
</div>
</div>
</div>
<div class="event">
<div class="content">
<div class="date">
3 days ago
</div>
<div class="summary">
<a>Sally Poodle</a> added <a>2 new photos</a> of you
</div>
<div class="extra images">
<img src="/images/demo/item1.jpg">
<img src="/images/demo/item2.jpg">
</div>
</div>
</div>
<div class="event">
<div class="content">
<div class="date">
Just moments ago
</div>
<div class="summary">
<a>James Doggington</a> added you as a friend
</div>
</div>
</div>
<div class="event">
<div class="content">
<div class="date">
3 days ago
</div>
<div class="summary">
You submitted a new post to the page
</div>
<div class="extra text">
I am a dog and I do not know how to make a post
</div>
</div>
</div>
</div>
</div>
<div class="event">
<div class="label">
<img src="/images/demo/avatar.jpg">
</div>
<div class="content">
<div class="date">
Just moments ago
</div>
<div class="summary">
<a>James Doggington</a> added you as a friend
</div>
</div>
</div>
<div class="event">
<div class="label">
<i class="icon circular idea"></i>
</div>
<div class="content">
<div class="date">
3 days ago
</div>
<div class="summary">
You submitted a new post to the page
</div>
<div class="extra text">
I am a dog and I do not know how to make a post
<div class="five wide column">
<div class="ui small blue feed segment">
<h4 class="ui header">Followers Activity</h4>
<div class="event">
<div class="content">
<div class="date">
Just moments ago
</div>
<div class="summary">
<a>Sally Poodle</a> added <a>hotpup202</a> as a friend
</div>
</div>
</div>
<div class="event">
<div class="content">
<div class="date">
Just moments ago
</div>
<div class="summary">
<a>Dally Doodle</a> added <a>hotpup202</a> as a friend
</div>
</div>
</div>
<div class="event">
<div class="content">
<div class="date">
Just moments ago
</div>
<div class="summary">
<a>Sally Poodle</a> added <a>sixpack dog</a> as a friend
</div>
</div>
</div>
<div class="event">
<div class="content">
<div class="date">
Just moments ago
</div>
<div class="summary">
<a>Dally Doodle</a> added <a>hotpup202</a> as a friend
</div>
</div>
</div>
</div>
</div>
</div>
</div>

38
node/src/documents/views/items.html
View File

@ -82,6 +82,44 @@ type : 'UI View'
<h2 class="ui dividing header">Variations</h2>
<div class="example">
<h4 class="ui header">Stackable</h4>
<p>An item view can have its items take the full width when below a browser resolution threshold to allow for content to display properly at small sizes</p>
<div class="ui stackable items">
<div class="item">
<div class="image">
<a class="like label">
<i class="like icon"></i>
</a>
<img src="/images/demo/item1.jpg">
</div>
<div class="content">
<div class="name">Cute Dog</div>
<p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p>
<div class="extra">
199 votes
</div>
</div>
</div>
<div class="item">
<div class="image">
<a class="like label">
<i class="like icon"></i>
</a>
<img src="/images/demo/item2.jpg">
</div>
<div class="content">
<div class="meta">5 days ago</div>
<div class="name">Faithful Dog</div>
<p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p>
<div class="extra">
311 votes
</div>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Connected</h4>
<p>An item list can be automatically sized to be even height.</p>

7
node/src/files/components/semantic/collections/grid.css
View File

@ -253,7 +253,7 @@
.ui.celled.grid > .column,
.ui.celled.grid > .row > .column {
display: table-cell;
padding: 2%;
padding: 1.33%;
-webkit-box-shadow: -1px 0px 0px 0px #dfdfdf;
-moz-box-shadow: -1px 0px 0px 0px #dfdfdf;
box-shadow: -1px 0px 0px 0px #dfdfdf;
@ -315,10 +315,11 @@
Folding
--------------------*/
@media only screen and (max-width: 1000px) {
.ui.folding.grid {
.ui.stackable.grid {
display: block !important;
}
.ui.folding.grid .column {
.ui.stackable.grid .column {
margin-bottom: 0em 2em 1em !important;
display: block !important;
width: 100% !important;
padding: 0% !important;

18
node/src/files/components/semantic/elements/header.css
View File

@ -111,27 +111,33 @@ h5.ui.header {
color: #00B5AD !important;
}
.ui.blue.block.header {
background-color: #E6EEF1;
/* background-color: #E6EEF1; */
border-left: 0.2em solid #6ECFF5;
}
.ui.black.block.header {
background-color: #EAEAEA;
/* background-color: #EAEAEA; */
border-left: 0.2em solid #5C6166;
}
.ui.green.block.header {
background-color: #EFF8E4;
/* background-color: #EFF8E4; */
border-left: 0.2em solid #A1CF64;
}
.ui.red.block.header {
background-color: #F6E5E8;
/* background-color: #F6E5E8; */
border-left: 0.2em solid #EF4D6D;
}
.ui.purple.block.header {
background-color: #EFEDF8;
/* background-color: #EFEDF8; */
border-left: 0.2em solid #564F8A;
}
.ui.teal.block.header {
background-color: #E9F7F6;
/* background-color: #E9F7F6; */
border-left: 0.2em solid #00B5AD;
}
/*-------------------

287
node/src/files/components/semantic/modules/dropdown.js
View File

@ -0,0 +1,287 @@
/* ******************************
Semantic Module: Checkbox
Author: Jack Lukic
Notes: First Commit MAy 25, 2013
Simple plug-in which maintains the state for ui dropdown
****************************** */
;(function ( $, window, document, undefined ) {
$.fn.dropdown = function(parameters) {
var
$allModules = $(this),
settings = $.extend(true, {}, $.fn.dropdown.settings, parameters),
eventNamespace = '.' + settings.namespace,
moduleNamespace = 'module-' + settings.namespace,
selector = $allModules.selector || '',
time = new Date().getTime(),
performance = [],
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
invokedResponse
;
$allModules
.each(function() {
var
$module = $(this),
$menu = $(this).find(settings.selector.menu),
selector = $module.selector || '',
element = this,
instance = $module.data('module-' + settings.namespace),
className = settings.className,
namespace = settings.namespace,
errors = settings.errors,
module
;
module = {
initialize: function() {
if(settings.context && selector !== '') {
module.verbose('Initializing dropdown with delegated events', $module);
$(element, settings.context)
.on(selector, 'click' + eventNamespace, module.toggle)
.data(moduleNamespace, module)
;
}
else {
module.verbose('Initializing dropdown with bound events', $module);
$module
.on('click' + eventNamespace, module.toggle)
.data(moduleNamespace, module)
;
}
},
can: {
show: function() {
return $module.hasClass(className.disabled);
}
},
destroy: function() {
module.verbose('Destroying previous dropdown for', $module);
$module
.off(namespace)
;
},
enable: function() {
module.debug('Enabling dropdown');
$module
.addClass(className.active)
;
$menu
.show()
;
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onShow, $menu.get())();
},
disable: function() {
module.debug('Disabling dropdown');
$module
.removeClass(className.active)
;
$menu
.hide()
;
$.proxy(settings.onChange, $menu.get())();
$.proxy(settings.onHide, $menu.get())();
},
toggle: function() {
if(module.can.show()) {
module.show();
}
else {
module.hide();
}
},
setting: function(name, value) {
if(value !== undefined) {
if( $.isPlainObject(name) ) {
$.extend(true, settings, name);
}
else {
settings[name] = value;
}
}
else {
return settings[name];
}
},
internal: function(name, value) {
if(value !== undefined) {
if( $.isPlainObject(name) ) {
$.extend(true, module, name);
}
else {
module[name] = value;
}
}
else {
return module[name];
}
},
debug: function() {
if(settings.debug) {
module.performance.log(arguments[0]);
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
}
},
verbose: function() {
if(settings.verbose && settings.debug) {
module.performance.log(arguments[0]);
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
}
},
error: function() {
if(console.log !== undefined) {
module.error = Function.prototype.bind.call(console.log, console, settings.moduleName + ':');
}
},
performance: {
log: function(message) {
var
currentTime,
executionTime,
previousTime
;
if(settings.performance) {
currentTime = new Date().getTime();
previousTime = time || currentTime,
executionTime = currentTime - previousTime;
time = currentTime;
performance.push({
'Element' : element,
'Name' : message,
'Execution Time' : executionTime
});
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
}
},
display: function() {
var
title = settings.moduleName,
caption = settings.moduleName + ': ' + selector + '(' + $allModules.size() + ' elements)',
totalExecutionTime = 0
;
if(selector) {
title += 'Performance (' + selector + ')';
}
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title);
if(console.table) {
$.each(performance, function(index, data) {
totalExecutionTime += data['Execution Time'];
});
console.table(performance);
}
else {
$.each(performance, function(index, data) {
totalExecutionTime += data['Execution Time'];
});
}
console.log('Total Execution Time:', totalExecutionTime +'ms');
console.groupEnd();
performance = [];
time = false;
}
}
},
invoke: function(query, passedArguments, context) {
var
maxDepth,
found
;
passedArguments = passedArguments || queryArguments;
context = element || context;
if(typeof query == 'string' && instance !== undefined) {
query = query.split('.');
maxDepth = query.length - 1;
$.each(query, function(depth, value) {
if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
instance = instance[value];
return true;
}
else if( instance[value] !== undefined ) {
found = instance[value];
return true;
}
module.error(errors.method);
return false;
});
}
if ( $.isFunction( found ) ) {
module.verbose('Executing invoked function', found);
return found.apply(context, passedArguments);
}
return found || false;
}
};
if(methodInvoked) {
if(instance === undefined) {
module.initialize();
}
invokedResponse = module.invoke(query);
}
else {
if(instance !== undefined) {
module.destroy();
}
module.initialize();
}
})
;
return (invokedResponse)
? invokedResponse
: this
;
};
$.fn.dropdown.settings = {
moduleName : 'Dropdown Module',
namespace : 'dropdown',
verbose : true,
debug : true,
performance : false,
// delegated event context
context : false,
required : 'auto',
onChange : function(){},
onShow : function(){},
onHide : function(){},
errors : {
method : 'The method you called is not defined.'
},
selector : {
menu : '.menu'
},
className : {
active : 'visible'
}
};
})( jQuery, window , document );

7
node/src/files/components/semantic/views/feed.css
View File

@ -50,16 +50,19 @@
margin: 0em;
border-radius: 50em;
}
.ui.feed .label + .content {
padding: 1em 1em 0em;
}
/* Content */
.ui.feed .content {
display: table-cell;
vertical-align: top;
text-align: left;
padding: 1em 1em 0em;
}
/* Date */
.ui.feed .content .date {
float: right;
padding-left: 1em;
color: rgba(0, 0, 0, 0.4);
}
/* Summary */
@ -99,7 +102,7 @@
.ui.feed .event {
padding: 0.75em 0em;
}
.ui.small.feed .content {
.ui.small.feed .label + .content {
padding: 0.5em 0.5em 0;
}
.ui.small.feed .content .extra.images img {

20
node/src/files/components/semantic/views/items.css
View File

@ -381,9 +381,23 @@
padding-left: 0.1%;
padding-right: 0.1%;
}
/*--------------
Horizontal
---------------*/
/*-------------------
Responsive
--------------------*/
@media only screen and (max-width: 600px) {
.ui.stackable.items {
display: block !important;
}
.ui.stackable.items .item {
margin-bottom: 1.5em !important;
display: block !important;
width: 100% !important;
padding: 0% !important;
}
}
/*--------------------
Horizontal
---------------------*/
.ui.horizontal.items > .item,
.ui.items > .horizontal.item {
display: table;

15
node/src/files/javascript/semantic.js
View File

@ -220,18 +220,18 @@ semantic.ready = function() {
menu: {
mouseenter: function() {
$menu
$(this)
.stop()
.animate({
width: '105px'
}, 300, function() {
$menu.find('.text').show();
$(this).find('.text').show();
})
;
},
mouseleave: function(event) {
$menu.find('.text').hide();
$menu
$(this).find('.text').hide();
$(this)
.stop()
.animate({
width: '10px'
@ -415,12 +415,13 @@ semantic.ready = function() {
;
$menu
.on('mouseenter', handler.menu.mouseenter)
.on('mouseleave', handler.menu.mouseleave)
.sidr({
name: 'menu'
})
.on('click', handler.movePeek)
.filter('.button')
.on('click', handler.movePeek)
.on('mouseenter', handler.menu.mouseenter)
.on('mouseleave', handler.menu.mouseleave)
;
$peek

48
node/src/files/stylesheets/semantic.css
View File

@ -127,7 +127,6 @@ body#example {
padding: 0px 0px 150px;
color: #555555;
text-rendering: optimizeLegibility;
min-width: 990px;
}
/*
@ -938,16 +937,15 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
}
@media only screen and (max-width : 1100px) {
#example .fixed .sidebar {
display: none;
}
@media only screen and (max-width : 1600px) {
#example .container {
width: auto;
margin-right: 100px;
margin-left: 395px;
margin-left: 325px;
}
#example.index .container {
margin-left: auto;
@ -955,19 +953,11 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
}
#example .sticky-wrapper.stuck .peek {
margin-left: 0px;
left: 165px;
left: 95px;
}
}
@media only screen and (max-width : 1130px) {
#example.index .container {
margin-left: 100px;
margin-right: 30px;
width: auto;
}
}
@media only screen and (max-width : 1000px) {
@media only screen and (max-width : 1050px) {
#example .fixed .section,
#example .fixed .title b {
display: none;
@ -976,12 +966,36 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
width: auto;
margin: 0px auto;
}
#example .fixed .sidebar {
display: inline-block;
}
#example .sticky-wrapper {
display: none;
}
#example .container {
width: auto;
margin: 0% 30px 0px;
}
#example .right.attached.sidebar {
display: none;
}
}
@media only screen and (min-width : 1600px) {
@media only screen and (min-width : 1725px) {
#example .container {
width: 1100px;
}
#example .sticky-wrapper.stuck .peek {
margin-left: -780px;
}
}
}
@media only screen and (min-width : 2300px) {
#example .container {
width: 1320px;
}
#example .sticky-wrapper.stuck .peek {
margin-left: -890px;
}
}

3
node/src/layouts/default.html.eco
View File

@ -117,6 +117,7 @@
<div class="ui fixed transparent inverted main menu">
<div class="container">
<a class="sidebar item"><i class="icon list layout"></i></a>
<div class="title item">
<b><%= @document.type %>:</b> <%= @document.title %>
</div>
@ -145,7 +146,7 @@
<% end %>
</div>
<div class="right menu">
<% if @document.type is 'UI Element' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
<% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
<a class="popup designer item" title="Designer Mode">
<i class="icon paint"></i>
</a>

7
src/collections/grid.less
View File

@ -332,7 +332,7 @@
.ui.celled.grid > .column,
.ui.celled.grid > .row > .column {
display: table-cell;
padding: 2%;
padding: 1.33%;
-webkit-box-shadow: -1px 0px 0px 0px #DFDFDF;
-moz-box-shadow: -1px 0px 0px 0px #DFDFDF;
box-shadow: -1px 0px 0px 0px #DFDFDF;
@ -404,10 +404,11 @@
--------------------*/
@media only screen and (max-width : 1000px) {
.ui.folding.grid {
.ui.stackable.grid {
display: block !important;
}
.ui.folding.grid .column {
.ui.stackable.grid .column {
margin-bottom: 0em 2em 1em !important;
display: block !important;
width: 100% !important;
padding: 0% !important;

12
src/elements/header.less
View File

@ -130,27 +130,27 @@ h5.ui.header {
}
.ui.blue.block.header {
background-color: #E6EEF1;
/* background-color: #E6EEF1; */
border-left: 0.2em solid #6ECFF5;
}
.ui.black.block.header {
background-color: #EAEAEA;
/* background-color: #EAEAEA; */
border-left: 0.2em solid #5C6166;
}
.ui.green.block.header {
background-color: #EFF8E4;
/* background-color: #EFF8E4; */
border-left: 0.2em solid #A1CF64;
}
.ui.red.block.header {
background-color: #F6E5E8;
/* background-color: #F6E5E8; */
border-left: 0.2em solid #EF4D6D;
}
.ui.purple.block.header {
background-color: #EFEDF8;
/* background-color: #EFEDF8; */
border-left: 0.2em solid #564F8A;
}
.ui.teal.block.header {
background-color: #E9F7F6;
/* background-color: #E9F7F6; */
border-left: 0.2em solid #00B5AD;
}

1
src/elements/icons.less
View File

@ -401,3 +401,4 @@ i.emphasized.icon {
vertical-align: middle;
}

7
src/views/feed.less
View File

@ -62,18 +62,21 @@
margin: 0em;
border-radius: 50em;
}
.ui.feed .label + .content {
padding: 1em 1em 0em;
}
/* Content */
.ui.feed .content {
display: table-cell;
vertical-align: top;
text-align: left;
padding: 1em 1em 0em;
}
/* Date */
.ui.feed .content .date {
float: right;
padding-left: 1em;
color: rgba(0, 0, 0, 0.4);
}
@ -124,7 +127,7 @@
.ui.feed .event {
padding: 0.75em 0em;
}
.ui.small.feed .content {
.ui.small.feed .label + .content {
padding: 0.5em 0.5em 0;
}
.ui.small.feed .content .extra.images img {

23
src/views/items.less
View File

@ -442,10 +442,25 @@
padding-right: 0.1%;
}
/*--------------
Horizontal
---------------*/
/*-------------------
Responsive
--------------------*/
@media only screen and (max-width : 600px) {
.ui.stackable.items {
display: block !important;
}
.ui.stackable.items .item {
margin-bottom: 1.5em !important;
display: block !important;
width: 100% !important;
padding: 0% !important;
}
}
/*--------------------
Horizontal
---------------------*/
.ui.horizontal.items > .item,
.ui.items > .horizontal.item {
display: table;

Write Preview
Loading…
Cancel
Save