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

Fix increase/decrease example in header

pull/1063/head
jlukic 10 years ago
parent
64f3f88454
commit
3babd67604
2 changed files with 33 additions and 62 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      server/documents/elements/header.html.eco
  2. 73
      server/files/javascript/semantic.js

22
server/documents/elements/header.html.eco
View File

@ -14,6 +14,8 @@ themes : ['Default', 'Bookish', 'Chubby']
<%- @partial('header') %> <%- @partial('header') %>
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/header.less" /> <link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/header.less" />
<script src="/javascript/header.js"></script>
<div class="main container"> <div class="main container">
<div class="peek"> <div class="peek">
@ -65,7 +67,11 @@ themes : ['Default', 'Bookish', 'Chubby']
<h4 class="ui header">Page Headings</h4> <h4 class="ui header">Page Headings</h4>
<p class="header">Headers may be oriented to give the heirarchy of a section in the context of the page</p> <p class="header">Headers may be oriented to give the heirarchy of a section in the context of the page</p>
<div class="ignored info ui message">Page headings size themselves relative to the base font of the entire page not the surrounding text.</div> <div class="ignored info ui message">Page headings size themselves relative to the base font of the entire page not the surrounding text.</div>
<div class="ui basic segment">
<div class="ui ignored two fluid font buttons">
<a class="increase ui button"> <i class="icon green plus"></i> Base Font</a>
<a class="decrease ui button"> <i class="icon red minus"></i> Base Font</a>
</div>
<div class="ui segment">
<h1 class="ui header">First header</h1> <h1 class="ui header">First header</h1>
<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>
<h2 class="ui header">Second header</h2> <h2 class="ui header">Second header</h2>
@ -77,17 +83,17 @@ themes : ['Default', 'Bookish', 'Chubby']
<h5 class="ui header">Fifth header</h5> <h5 class="ui header">Fifth header</h5>
<p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p> <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
</div> </div>
<div class="ui ignored secondary two item font menu">
<a class="increase item"> <i class="icon circular green plus"></i> Base Font</a>
<a class="decrease item"> <i class="icon circular red minus"></i> Base Font</a>
</div>
</div> </div>
<div class="example"> <div class="example">
<h4 class="ui header">Content Headings</h4> <h4 class="ui header">Content Headings</h4>
<p>Headers may be oriented to give the importance of a section in the context of the content that surrounds it</p> <p>Headers may be oriented to give the importance of a section in the context of the content that surrounds it</p>
<div class="ignored info ui message">Content headings size themselves relative to the base font of the surrounding text</div> <div class="ignored info ui message">Content headings size themselves relative to the base font of the surrounding text</div>
<div class="ui basic segment">
<div class="ui ignored two fluid font buttons">
<a class="increase ui button"> <i class="icon green plus"></i> Base Font</a>
<a class="decrease ui button"> <i class="icon red minus"></i> Base Font</a>
</div>
<div class="ui segment">
<div class="ui huge header">Huge Header</div> <div class="ui huge header">Huge Header</div>
<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 class="ui large header">Large Header</div> <div class="ui large header">Large Header</div>
@ -99,10 +105,6 @@ themes : ['Default', 'Bookish', 'Chubby']
<div class="ui tiny header">Tiny Header</div> <div class="ui tiny header">Tiny Header</div>
<p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p> <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
</div> </div>
<div class="ui ignored secondary two item font menu">
<a class="increase item"> <i class="icon circular green plus"></i> Base Font</a>
<a class="decrease item"> <i class="icon circular red minus"></i> Base Font</a>
</div>
</div> </div>
<h2 class="ui dividing header">States</h2> <h2 class="ui dividing header">States</h2>

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

@ -45,11 +45,12 @@ semantic.ready = function() {
$menuPopup = $('.ui.main.menu .popup.item'), $menuPopup = $('.ui.main.menu .popup.item'),
$menuDropdown = $('.ui.main.menu .dropdown'), $menuDropdown = $('.ui.main.menu .dropdown'),
$pageTabMenu = $('.tab.header.segment .tabular.menu'),
$pageTabs = $('.tab.header.segment .menu .item'),
$pageTabMenu = $('body > .tab.segment .tabular.menu'),
$pageTabs = $('body > .tab.segment .menu .item'),
$downloadDropdown = $('.download.buttons .dropdown'), $downloadDropdown = $('.download.buttons .dropdown'),
$helpPopup = $('.header .help.icon'),
$example = $('.example'), $example = $('.example'),
$shownExample = $example.filter('.shown'), $shownExample = $example.filter('.shown'),
@ -59,10 +60,6 @@ semantic.ready = function() {
$designer = $('.designer.item'), $designer = $('.designer.item'),
$sidebarButton = $('.attached.launch.button'), $sidebarButton = $('.attached.launch.button'),
$increaseFont = $('.font .increase'),
$decreaseFont = $('.font .decrease'),
$code = $('div.code').not('.existing'), $code = $('div.code').not('.existing'),
$existingCode = $('.existing.code'), $existingCode = $('.existing.code'),
@ -145,15 +142,15 @@ semantic.ready = function() {
url : variableURL, url : variableURL,
dataType : 'text', dataType : 'text',
urlData : urlData, urlData : urlData,
onSuccess: function(content) {
window.less.modifyVars( handler.less.parseFile(content) );
success: function(content) {
less.modifyVars( handler.less.parseFile(content) );
$themeDropdown $themeDropdown
.api({ .api({
on : 'now', on : 'now',
url : overrideURL, url : overrideURL,
dataType : 'text', dataType : 'text',
urlData : urlData, urlData : urlData,
onSuccess: function(content) {
success: function(content) {
if( $('style.override').size() > 0 ) { if( $('style.override').size() > 0 ) {
$('style.override').remove(); $('style.override').remove();
} }
@ -236,28 +233,6 @@ semantic.ready = function() {
return $element; return $element;
} }
}, },
font: {
increase: function() {
var
$container = $(this).parent().prev('.ui.segment'),
fontSize = parseInt( $container.css('font-size'), 10)
;
$container
.css('font-size', fontSize + 1)
;
},
decrease: function() {
var
$container = $(this).parent().prev('.ui.segment'),
fontSize = parseInt( $container.css('font-size'), 10)
;
$container
.css('font-size', fontSize - 1)
;
}
},
overviewMode: function() { overviewMode: function() {
var var
$button = $(this), $button = $(this),
@ -710,22 +685,8 @@ semantic.ready = function() {
} }
}; };
$sidebarButton
.on('mouseenter', handler.menu.mouseenter)
.on('mouseleave', handler.menu.mouseleave)
;
$menu
.sidebar({
animation : 'scale down'
})
.sidebar('attach events', '.launch.button, .view-ui.button, .launch.item')
.sidebar('attach events', $hideMenu, 'hide')
;
$('.masthead') $('.masthead')
.visibility({ .visibility({
context: '.pusher > .page',
once: false once: false
}) })
.visibility('bottom visible', function(){ .visibility('bottom visible', function(){
@ -800,15 +761,12 @@ semantic.ready = function() {
.each(handler.createCode) .each(handler.createCode)
; ;
$swap
.on('click', handler.swapStyle)
$helpPopup
.popup()
; ;
$increaseFont
.on('click', handler.font.increase)
;
$decreaseFont
.on('click', handler.font.decrease)
$swap
.on('click', handler.swapStyle)
; ;
$developer $developer
@ -840,6 +798,17 @@ semantic.ready = function() {
}) })
; ;
$sidebarButton
.on('mouseenter', handler.menu.mouseenter)
.on('mouseleave', handler.menu.mouseleave)
;
$menu
.sidebar({
animation: 'scale down'
})
.sidebar('attach events', '.launch.button, .view-ui.button, .launch.item')
.sidebar('attach events', $hideMenu, 'hide')
;
$waypoints $waypoints
.waypoint({ .waypoint({
continuous : false, continuous : false,

Write Preview
Loading…
Cancel
Save