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 code example copy and paste, add more kitchen sink examples

pull/1177/head
jlukic 10 years ago
parent
a7be087104
commit
4754fa9774
6 changed files with 223 additions and 13 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      server/documents/index.html.eco
  2. 6
      server/documents/kitchen-sink.html.eco
  3. 25
      server/files/javascript/semantic.js
  4. 22
      server/files/stylesheets/semantic.css
  5. 87
      server/partials/examples/button.html
  6. 92
      server/partials/examples/feed.html

4
server/documents/index.html.eco
View File

@ -915,7 +915,7 @@ type : 'Semantic'
<div class="column">
<h3 class="ui header">Enterprise Ready</h3>
<p>Build tools, performance logging, support for custom definitions, multiple-levels of theme inheritanceance—a developer's wet dream.</p>
<a class="ui large right disabled labeled icon button">
<a class="ui large disabled right labeled icon button">
<i class="right chevron icon"></i>
View Expert Guide
</a>
@ -923,7 +923,7 @@ type : 'Semantic'
<div class="column">
<h3 class="ui header">Beginner Friendly</h3>
<p>Don't feel comfortable tweaking everything? Download free community designed themes and use our customizer to build a package fit for your needs.</p>
<a class="ui large right disabled labeled icon button">
<a class="ui large disabled right labeled icon button">
<i class="right chevron icon"></i>
View Basic Guide
</a>

6
server/documents/kitchen-sink.html.eco
View File

@ -13,6 +13,12 @@ description : 'This a work in progress and currently only includes a portion of
<div class="ui stackable very relaxed grid">
<div class="three column demo row">
<div class="column">
<div class="no example">
<h4 class="ui header">
<a href="/collections/menu.html">Button</a>
</h4>
<%- @partial('examples/button') %>
</div>
<div class="no example">
<h4 class="ui header">
<a href="/collections/menu.html">Menu</a>

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

@ -733,6 +733,7 @@ semantic.ready = function() {
initializeCode: function() {
var
$code = $(this).show(),
$codeTag = $('<code></code>'),
code = $code.html(),
existingCode = $code.hasClass('existing'),
evaluatedCode = $code.hasClass('evaluated'),
@ -783,7 +784,21 @@ semantic.ready = function() {
formattedCode = $.trim(code).replace(whiteSpace, '\n');
formattedCode = escapeHTML(formattedCode);
$code.html(formattedCode);
// replace with <code>
$codeTag
.addClass($code.attr('class'))
.html(formattedCode)
;
$code
.replaceWith($codeTag)
;
$code = $codeTag;
console.log($code, formattedCode);
$code
.html(formattedCode)
;
// wrap
$code = $code
@ -799,14 +814,14 @@ semantic.ready = function() {
$('<div>')
.addClass('ui attached top label')
.html('<span class="title">' + title + '</span>' + '<em>' + (displayType[contentType] || contentType) + '</em>')
.prependTo( $(this).closest('.segment') )
.prependTo( $code.closest('.segment') )
;
}
if(label) {
$('<div>')
.addClass('ui pointing below language label')
.html(displayType[contentType] || contentType)
.insertBefore ( $(this).closest('.segment') )
.insertBefore ( $code.closest('.segment') )
;
}
// add run code button
@ -817,13 +832,13 @@ semantic.ready = function() {
.on('click', function() {
eval(code);
})
.insertBefore ( $(this).closest('.segment') )
.insertBefore ( $code.closest('.segment') )
;
}
// add preview if specified
if(preview) {
$(code)
.insertAfter( $(this).closest('.segment') )
.insertAfter( $code.closest('.segment') )
;
}

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

@ -112,14 +112,16 @@ code {
padding: 2px 4px;
vertical-align: baseline;
}
.ui.message code {
background-color: rgba(255, 255, 255, 0.6);
}
pre code {
border: none;
padding: 0px;
font-size: 1em;
}
/* Code block */
.ui.message code {
background-color: rgba(255, 255, 255, 0.6);
}
p {
margin: 1em 0em;
}
@ -440,6 +442,7 @@ body#example.hide {
width: 55px;
height: auto;
white-space: nowrap;
overflow: hidden;
-webkit-transition:
0.3s width ease,
@ -465,7 +468,8 @@ body#example.hide {
#example .fixed.launch.button .text {
position: absolute;
top: 15px;
white-space: nowrap;
top: auto;
left: 54px;
opacity: 0;
-webkit-transition:
@ -588,7 +592,7 @@ body#example.hide {
#example .instructive.segment .title + em {
float: right;
}
#example .label + div.code {
#example .label + .code {
margin-top: 1.5em;
}
@ -977,6 +981,12 @@ body#example.hide {
margin: 0 auto !important;
max-width: 1140px;
}
#example .demo.row .button.demo > .buttons,
#example .demo.row .button.demo > .button,
#example .demo.row .button.demo > .segment > .button {
margin-bottom: 0.5em;
}
#example .demo.row .ui.menu,
#example .demo.row .ui.card {
width: 100%;

87
server/partials/examples/button.html
View File

@ -0,0 +1,87 @@
<div class="button demo">
<div class="ui button">
View
</div>
<div class="ui primary button">
<i class="shop icon"></i> Add to Cart
</div>
<div class="ui secondary button">
<i class="save icon"></i> Save for Later
</div>
<div class="ui labeled icon button">
<i class="star icon"></i>
Rate
</div>
<div class="ui basic button">Basic</div>
<div class="ui fitted hidden divider"></div>
<div class="ui animated button">
<div class="visible content">Horizontal</div>
<div class="hidden content">
Hidden
</div>
</div>
<div class="ui vertical animated button">
<div class="visible content">Vertical</div>
<div class="hidden content">
Hidden
</div>
</div>
<div class="ui animated fade button">
<div class="visible content">Fade In</div>
<div class="hidden content">
Hidden
</div>
</div>
<div class="ui fitted hidden divider"></div>
<div class="ui buttons">
<div class="ui button">1</div>
<div class="ui button">2</div>
<div class="ui button">3</div>
</div>
<div class="ui buttons">
<div class="ui button">Cancel</div>
<div class="or"></div>
<div class="ui positive button">Save</div>
</div>
<div class="ui icon buttons">
<div class="ui button"><i class="align left icon"></i></div>
<div class="ui button"><i class="align center icon"></i></div>
<div class="ui button"><i class="align right icon"></i></div>
<div class="ui button"><i class="align justify icon"></i></div>
</div>
<div class="ui fitted hidden divider"></div>
<div class="ui blue button">Blue</div>
<div class="ui red button">Red</div>
<div class="ui teal button">Teal</div>
<div class="ui fitted hidden divider"></div>
<div class="ui blue basic button">Blue</div>
<div class="ui red basic button">Red</div>
<div class="ui teal basic button">Teal</div>
<div class="ui inverted segment">
<div class="ui inverted button">Inverted</div>
<div class="ui inverted blue button">Blue</div>
<div class="ui inverted red button">Red</div>
<div class="ui fitted hidden divider"></div>
<div class="ui inverted basic button">Basic</div>
<div class="ui inverted blue basic button">Blue</div>
<div class="ui inverted red basic button">Red</div>
</div>
</div>
<script type="text/javascript">
$('.button.demo .follow')
.state({
text: {
inactive : 'Follow',
active : 'Following'
}
})
;
</script>

92
server/partials/examples/feed.html
View File

@ -19,4 +19,96 @@
You added Username to the group <a>Group Name</a>
</div>
</div>
<div class="event">
<div class="label">
<img src="/images/wireframe/square-image.png">
</div>
<div class="content">
<div class="date">
Time period ago
</div>
<div class="summary">
<a>Userrname</a> added <a>new photos</a>
</div>
<div class="extra images">
<a><img src="/images/wireframe/image.png"></a>
</div>
<div class="meta">
<a class="like">
<i class="like icon"></i> 1 Like
</a>
</div>
</div>
</div>
</div>
<div class="ui hidden divider"></div>
<div class="ui feed">
<div class="event">
<div class="label">
<i class="pencil icon"></i>
</div>
<div class="content">
<div class="summary">
You wrote something
<div class="date">
Time period ago
</div>
</div>
<div class="extra text">
Blockquote
</div>
<div class="meta">
<a>Metadata</a>
<a>Metadata</a>
</div>
</div>
</div>
<div class="event">
<div class="label">
<i class="photo icon"></i>
</div>
<div class="content">
<div class="summary">
You uploaded a photo
<div class="date">
Time period ago
</div>
</div>
<div class="meta">
<a>Metadata</a>
<a>Metadata</a>
</div>
</div>
</div>
</div>
<div class="ui hidden divider"></div>
<div class="ui feed">
<div class="event">
<div class="content">
<div class="summary">
<a>Elliot Fu</a> added <a>Jenny Hess</a> as a friend
</div>
</div>
</div>
<div class="event">
<div class="content">
<div class="summary">
<a>Stevie Feliciano</a> added <a>Elliot Fu</a> as a friend
</div>
</div>
</div>
<div class="event">
<div class="content">
<div class="summary">
<a>Helen Troy</a> added <a>Christian Rocha</a> as a friend
</div>
</div>
</div>
<div class="event">
<div class="content">
<div class="summary">
<a>Christian Rocha</a> signed up for the site.
</div>
</div>
</div>
</div>
Write Preview
Loading…
Cancel
Save