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

More examples, and more themes

pull/1129/head
jlukic 10 years ago
parent
231b64c5aa
commit
a810d65484
11 changed files with 165 additions and 89 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      server/documents/collections/grid.html.eco
  2. 2
      server/documents/elements/button.html.eco
  3. 25
      server/documents/elements/label.html.eco
  4. 2
      server/documents/index.html.eco
  5. 31
      server/documents/modules/popup.html.eco
  6. 49
      server/documents/views/card.html.eco
  7. 22
      server/documents/views/item.html.eco
  8. 5
      server/files/javascript/popup.js
  9. 17
      server/files/javascript/semantic.js
  10. 70
      server/files/stylesheets/semantic.css
  11. 5
      server/partials/header.html.eco

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

@ -425,20 +425,18 @@ themes : ['Default']
<h4 class="ui header">Divided Grid</h4>
<p>A grid can have dividers between its columns</p>
<div class="ui three column divided grid">
<div class="row">
<div class="column">
<h5 class="ui header">How We Collect and Use Information</h5>
<p>We ask for certain information such as your username, real name, birthdate, address, phone number and e-mail address when you register for a Semantic UI account, or if you correspond with us. We may also retain any messages you send through the Service, and may collect information you provide in User Content you post to the Service. We use this information to operate, maintain, and provide to you the features and functionality of the Service. Your username and if you choose to disclose it, your real name, will be published publicly. Once published your username and / or real name may not be able to be removed.</p>
</div>
<div class="column">
<h5 class="ui header">
Information we may receive from third parties
</h5>
<p>We may receive information about you from third parties. For example, if you access our websites or Service through a third-party connection or log-in, for example, through Facebook Connect, by “following,” “liking,” adding the Semantic UI application, linking your account to the Semantic UI Service, etc., that third party may pass certain information about your use of its service to Semantic UI. This information could include, but is not limited to, the user ID associated with your account (for example, your Facebook UID), an access token necessary to access that service, any information that you have permitted the third party to share with us, and any information you have made public in connection with that service. </p>
</div>
<div class="column">
<p>Semantic UI may, in its sole discretion, develop a feature that allows you to invite third parties to the Service. If you choose to use our invitation service to invite a third party to the Service through our “Invite friends” feature, you may directly choose a friend to invite through your mobile device’s native contact list – but we do not require that you import your contacts list to the Service, and we do not retain the information contained in your contacts list. You understand that by inviting a friend to Semantic UI through the “Invite friends” feature, you are directly sending a text or email from your personal accounts and that we are not storing your contact list. In addition, you understand and agree that normal carrier charges apply to communications sent from you phone. Since this invitation is coming directly from your email or phone, we do not have access to or control this communication.</p>
</div>
<div class="column">
<h5 class="ui header">How We Collect and Use Information</h5>
<p>We ask for certain information such as your username, real name, birthdate, address, phone number and e-mail address when you register for a Semantic UI account, or if you correspond with us. We may also retain any messages you send through the Service, and may collect information you provide in User Content you post to the Service. We use this information to operate, maintain, and provide to you the features and functionality of the Service. Your username and if you choose to disclose it, your real name, will be published publicly. Once published your username and / or real name may not be able to be removed.</p>
</div>
<div class="column">
<h5 class="ui header">
Information we may receive from third parties
</h5>
<p>We may receive information about you from third parties. For example, if you access our websites or Service through a third-party connection or log-in, for example, through Facebook Connect, by “following,” “liking,” adding the Semantic UI application, linking your account to the Semantic UI Service, etc., that third party may pass certain information about your use of its service to Semantic UI. This information could include, but is not limited to, the user ID associated with your account (for example, your Facebook UID), an access token necessary to access that service, any information that you have permitted the third party to share with us, and any information you have made public in connection with that service. </p>
</div>
<div class="column">
<p>Semantic UI may, in its sole discretion, develop a feature that allows you to invite third parties to the Service. If you choose to use our invitation service to invite a third party to the Service through our “Invite friends” feature, you may directly choose a friend to invite through your mobile device’s native contact list – but we do not require that you import your contacts list to the Service, and we do not retain the information contained in your contacts list. You understand that by inviting a friend to Semantic UI through the “Invite friends” feature, you are directly sending a text or email from your personal accounts and that we are not storing your contact list. In addition, you understand and agree that normal carrier charges apply to communications sent from you phone. Since this invitation is coming directly from your email or phone, we do not have access to or control this communication.</p>
</div>
</div>
</div>

2
server/documents/elements/button.html.eco
View File

@ -8,7 +8,7 @@ title : 'Button'
description : 'Buttons indicate a possible user action.'
type : 'UI Element'
themes : ['Default', 'Classic', 'Basic', 'Raised', Chubby', 'Round', 'Amazon', 'GitHub']
themes : ['Default', 'Classic', 'Basic', 'Raised', 'Chubby', 'Round', 'Amazon', 'GitHub']
---
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/button.less" />
<script src="/javascript/button.js"></script>

25
server/documents/elements/label.html.eco
View File

@ -133,26 +133,17 @@ themes : ['Default']
<a class="ui teal tag label">Featured</a>
</div>
<div class="clearing example">
<div class="example">
<h4 class="ui header">Ribbon</h4>
<p>A label can appear as a ribbon attaching itself to an element.</p>
<div class="ui two column grid">
<div class="row">
<div class="column">
<div class="ui raised segment">
<a class="ui ribbon label">Dogs</a>
<p>Pretty nice animals.</p>
<a class="ui teal ribbon label">Cats</a>
<p>Also pretty nice animals, but can prefer solitude.</p>
<a class="ui red ribbon label">Ogres and monsters</a>
<p>Never seen one as a pet before, but I imagine they'd make pretty terrible companions.</p>
</div>
</div>
</div>
<div class="ui raised segment">
<a class="ui ribbon label">Dogs</a>
<p>Pretty nice animals.</p>
<a class="ui teal ribbon label">Cats</a>
<p>Also pretty nice animals, but can prefer solitude.</p>
<a class="ui red ribbon label">Ogres and monsters</a>
<p>Never seen one as a pet before, but I imagine they'd make pretty terrible companions.</p>
</div>
<div class="existing code">
<div class="ui ribbon label">Dogs</div>
</div>
</div>
<div class="example">

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

@ -16,7 +16,7 @@ type : 'Semantic'
<div class="column">
<div class="introduction">
<h1 class="ui inverted header">Semantic UI
<a class="ui tag label" href="https://github.com/semantic-org/Semantic-UI/blob/css/RELEASE%20NOTES.md">
<a class="ui teal tag label" href="https://github.com/semantic-org/Semantic-UI/blob/css/RELEASE%20NOTES.md">
1.0.0
</a>
</h1>

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

@ -80,7 +80,7 @@ themes : ['Default']
In a gritty and alternate 1985 the glory days of costumed vigilantes have been brought to a close by a government crackdown, but after one of the masked veterans is brutally murdered an investigation into the killer is initiated.
</div>
</div>
<div class="ui two buttons">
<div class="ui two bottom attached buttons">
<div class="ui button">
<i class="add icon"></i>
Queue
@ -111,7 +111,7 @@ themes : ['Default']
<p>A fluid popup will take up the entire width of its offset container</p>
<div class="ui button">Show fluid popup</div>
<div class="ui fluid popup">
<div class="ui four column fitted divided center aligned grid">
<div class="ui four column divided center aligned grid">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
@ -128,6 +128,31 @@ themes : ['Default']
<i class="circular heart icon link" data-content="Hello. This is a huge popup" data-variation="huge"></i>
</div>
<div class="fitted example">
<h4 class="ui header">Flowing</h4>
<p>A popup can have no maximum width and continue to flow to fit its content</p>
<div class="ui button">Show flowing popup</div>
<div class="ui flowing popup">
<div class="ui three column padded divided center aligned grid">
<div class="column">
<h4 class="ui header">Basic Plan</h4>
<p><b>2</b> projects, $10 a month</p>
<div class="ui button">Choose</div>
</div>
<div class="column">
<h4 class="ui header">Business Plan</h4>
<p><b>5</b> projects, $20 a month</p>
<div class="ui button">Choose</div>
</div>
<div class="column">
<h4 class="ui header">Premium Plan</h4>
<p><b>8</b> projects, $25 a month</p>
<div class="ui button">Choose</div>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Inverted</h4>
<p>A popup can have its colors inverted</p>
@ -312,7 +337,7 @@ themes : ['Default']
Browse
</a>
<div class="ui very wide popup">
<div class="ui four column fitted grid">
<div class="ui four column grid">
<div class="ui column">
<h5 class="ui header">Fabrics</h5>
<div class="ui link list">

49
server/documents/views/card.html.eco
View File

@ -269,15 +269,54 @@ themes : ['Default', 'Basic']
</div>
<div class="ui card">
<a class="image" href="#">
<img src="/images/demo/highres.jpg">
<img src="/images/avatar/large/steve.jpg">
</a>
<div class="content">
<a class="header" href="#">Cute Dog</a>
<a class="header" href="#">Steve Jobes</a>
<div class="meta">
<a class="time">2 days ago</a>
<a class="time">Last Seen 2 days ago</a>
</div>
<div class="description">
Check our this <a href="http://www.dogs.com"> excellent resource</a> on dogs.
</div>
</div>
</div>
<div class="even example">
<h4 class="ui header">Buttons</h4>
<p>A card can contain buttons</p>
<div class="ui cards">
<div class="card">
<div class="content">
<div class="header">Elliot Fu</div>
<div class="description">
Elliot Fu is a film-maker from New York.
</div>
</div>
<div class="ui bottom attached button">
<i class="add icon"></i>
Add Friend
</div>
</div>
<div class="card">
<div class="content">
<div class="header">Veronika Ossi</div>
<div class="description">
Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.
</div>
</div>
<div class="ui bottom attached button">
<i class="add icon"></i>
Add Friend
</div>
</div>
<div class="card">
<div class="content">
<div class="header">Jenny Hess</div>
<div class="description">
Jenny is a student studying Media Management at the New School
</div>
</div>
<div class="ui bottom attached button">
<i class="add icon"></i>
Add Friend
</div>
</div>
</div>

22
server/documents/views/item.html.eco
View File

@ -23,7 +23,7 @@ themes : ['Default']
<div class="even example">
<h4 class="ui header">Items</h4>
<p>A group of items.</p>
<div class="ui items segment">
<div class="ui items">
<div class="item">
<div class="image">
<img src="/images/movies/12years.jpg">
@ -104,7 +104,7 @@ themes : ['Default']
<div class="example">
<h4 class="ui header">Header</h4>
<p>A item can contain a header</p>
<div class="ui items segment">
<div class="ui items">
<div class="item">
<div class="content">
<div class="header">12 Amazing Secrets for Long Life</div>
@ -133,7 +133,7 @@ themes : ['Default']
<i class="info icon"></i>
You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
</div>
<div class="ui items segment">
<div class="ui items">
<div class="item">
<div class="content">
<div class="header">Arrowhead Valley Camp</div>
@ -180,7 +180,7 @@ themes : ['Default']
<i class="star icon"></i>
To make the entire content of a item link, check out the link variation below
</div>
<div class="ui items segment">
<div class="ui items">
<div class="item">
<a class="ui tiny image">
<img src="/images/avatar/large/stevie.jpg">
@ -226,7 +226,7 @@ themes : ['Default']
<div class="ui info message">
Common actions may contain special formatting, like "star" or "heart". To attach events, on a user action, please check out the <a href="#">state behavior</a>.
</div>
<div class="ui items segment">
<div class="ui items">
<div class="item">
<div class="content">
<i class="right floated like icon"></i>
@ -240,7 +240,7 @@ themes : ['Default']
<div class="example">
<h4 class="ui header">Description</h4>
<p>A item can contain a description with a single or multiple paragraphs</p>
<div class="ui items segment">
<div class="ui items">
<div class="item">
<div class="content">
<a class="header">Cute Dog</a>
@ -257,7 +257,7 @@ themes : ['Default']
<div class="example">
<h4 class="ui header">Extra Content</h4>
<p>A item can contain extra content meant to be formatted separately from the main content</p>
<div class="ui items segment">
<div class="ui items">
<div class="item">
<div class="content">
<a class="header">Cute Dog</a>
@ -279,7 +279,7 @@ themes : ['Default']
<div class="example">
<h4 class="ui header">Image</h4>
<p>A item can contain an image</p>
<div class="ui items segment">
<div class="ui items">
<div class="item">
<div class="image">
<img src="/images/demo/highres.jpg">
@ -308,7 +308,7 @@ themes : ['Default']
<i class="info icon"></i>
The following example uses <a href="/elements/segment.html">ui</a> for legibility only. This is not necessary for using <code>ui items</code>
</div>
<div class="ui items segment">
<div class="ui items">
<div class="item">
<div class="image">
<img src="/images/logos/arrowhead.png">
@ -391,7 +391,7 @@ themes : ['Default']
<div class="example">
<h4 class="ui header">Link Item</h4>
<p>A item can be formatted so that the entire contents link to another page</p>
<div class="ui items segment">
<div class="ui items">
<a class="item" href="http://www.dog.com">
<div class="image">
<img src="/images/demo/highres.jpg">
@ -460,7 +460,7 @@ themes : ['Default']
<i class="info icon"></i>
You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
</div>
<div class="ui items segment">
<div class="ui items">
<div class="item">
<div class="content">
<a class="header">Cute Dog</a>

5
server/files/javascript/popup.js
View File

@ -18,8 +18,11 @@ semantic.popup.ready = function() {
;
$('.fluid.example .button')
.popup()
;
$('.fitted.example .button')
.popup({
inline: true
on: 'click'
})
;

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

@ -79,7 +79,7 @@ semantic.ready = function() {
.each(function(){
$('<i/>')
.addClass('icon code')
.prependTo( $(this) )
.appendTo( $(this) )
;
})
;
@ -255,9 +255,9 @@ semantic.ready = function() {
.html($followMenu)
;
$rail = $('<div />')
.addClass('ui right dividing rail')
.addClass('ui close right rail')
.html($sticky)
.prependTo($container)
.appendTo($container)
;
$followMenu
.accordion({
@ -343,7 +343,7 @@ semantic.ready = function() {
url : variableURL,
dataType : 'text',
urlData : urlData,
success: function(content) {
onSuccess: function(content) {
less.modifyVars( handler.less.parseFile(content) );
$themeDropdown
.api({
@ -351,7 +351,7 @@ semantic.ready = function() {
url : overrideURL,
dataType : 'text',
urlData : urlData,
success: function(content) {
onSuccess: function(content) {
if( $('style.override').size() > 0 ) {
$('style.override').remove();
}
@ -519,7 +519,7 @@ semantic.ready = function() {
$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'),
$ignored = $('i.code:first-child, .code, .existing, .pointing.below.label, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
$ignored = $('i.code:last-child, .code, .existing, .pointing.below.label, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
$demo = $example.children().not($header).not($ignored),
code = ''
;
@ -548,7 +548,7 @@ semantic.ready = function() {
$header = $example.children('.ui.header:first-of-type').eq(0).add('p:first-of-type'),
$annotation = $example.find('.annotation'),
$code = $annotation.find('.code'),
$ignoredContent = $('.ui.popup, i.code:first-child, .code, .existing.segment, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
$ignoredContent = $('.ui.popup, i.code:last-child, .code, .existing.segment, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
$demo = $example.children().not($header).not($ignoredContent),
code = $example.data('code') || $.proxy(handler.generateCode, this)()
;
@ -901,8 +901,7 @@ semantic.ready = function() {
})
.find('.button')
.popup({
position : 'top right',
variation : 'inverted'
position : 'top center'
})
;
}

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

@ -179,39 +179,42 @@ a:hover {
#example .header.segment,
#example > .content > .page > .segment,
#example > .header.segment {
margin: 0px 0px 3em;
position: relative;
z-index: 2;
margin: 0em;
padding-top: 70px;
padding-bottom: 30px;
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
#example.legacy .main.menu,
#example.legacy .launch.button {
left: auto !important;
}
#example.scale.down.pushed .header.segment {
padding-top: 30px;
}
#example.divider .ui.grid {
position: relative;
}
#example .tab.header.segment {
padding-bottom: 0em;
margin-bottom: 2em;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1) inset;
}
#example .tab.header.segment .vertical.menu {
display: none;
margin: 2rem 0em 1rem;
}
#example .tab.header.segment .tabular.menu {
margin: 2rem 0em 0em;
margin: 2rem -1px 0em;
border-bottom: none;
}
#example .tab.header.segment .tabular.menu .active.item {
background-color: #F7F7F7;
border-bottom-color: #F7F7F7;
background-color: #FFFFFF;
border-bottom-color: #FFFFFF;
}
#example.legacy .main.menu,
#example.legacy .launch.button {
left: auto !important;
}
#example.scale.down.pushed .header.segment {
padding-top: 30px;
}
#example.divider .ui.grid {
position: relative;
}
@ -529,7 +532,7 @@ body#example.hide {
#example .introduction .label {
position: absolute;
margin-left: 2em;
top: 1em
top: 2em
}
#example .introduction .theme.buttons {
@ -730,7 +733,6 @@ body#example.hide {
-----------------*/
#example .page > .footer {
margin-top: 5em;
padding: 5em 0em 6em;
}
@ -788,6 +790,7 @@ body#example.hide {
#example .example {
margin: 1em 0em;
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding: 1em 0em;
position: relative;
-webkit-tap-highlight-color: transparent;
@ -812,6 +815,9 @@ body#example.hide {
#example .main.container > h2 {
position: relative;
}
#example .main.container > h2:first-child {
margin-top: 0em;
}
/* After Section Header */
#example .example:first-child,
@ -852,10 +858,10 @@ body#example.hide {
cursor: pointer;
position: absolute;
top: auto;
top: 1em;
right: 0px;
margin: 0;
opacity: 0;
opacity: 0.1;
font-size: 18px;
color: #555555;
@ -1427,17 +1433,26 @@ body.progress .ui.progress .bar {
}
#example .main.container {
background-color: #FFFFFF;
margin: 2em auto 4em;
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
border-radius: 0.325em;
padding: 1em 2em 2em;
z-index: 1;
padding-bottom: 2em;
}
#example .main.container {
margin-top: 0em;
padding-top: 2em;
border-radius: 0em 0em 0.25em 0.25em;
}
#example .main.container .right.rail .sticky {
padding-top: 2em;
}
#example .container {
position: relative;
width: 915px;
margin: 0px auto;
}
#example .main.container .right.rail .sticky {
padding-bottom: 30px;
}
#example .following.menu .menu .active.item {
font-weight: bold;
@ -1445,7 +1460,6 @@ body.progress .ui.progress .bar {
@media only screen and (max-width : 600px) {
#example .page > .footer {
margin-top: 3em;
padding: 2em 0em;
}
#example .container {
@ -1491,6 +1505,10 @@ body.progress .ui.progress .bar {
#example .container {
width: 850px;
}
#example.item .container,
#example.card .container {
width: 955px;
}
}

5
server/partials/header.html.eco
View File

@ -28,7 +28,10 @@
<div class="menu ui transition hidden">
<% for id, name of @document.themes: %>
<div class="item" data-value="<%= name %>"><%= (name.charAt(0).toUpperCase() + name.slice(1)) %></div>
<% end %>
<% end %><!--
<div class='divider'></div>
<div class="header">Create Your Own</div>
<a class="item" href="#">Submit Theme</a> -->
</div>
</div>
<% end %>

Write Preview
Loading…
Cancel
Save