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

Updates

redesign
jlukic 10 years ago
parent
3633ccd8cf
commit
fea474146d
9 changed files with 181 additions and 220 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 68
      server/documents/hotfix.html.eco
  2. 83
      server/documents/index.html.eco
  3. 2
      server/documents/kitchen-sink.html.eco
  4. 123
      server/documents/modules/dropdown.html.eco
  5. 116
      server/documents/modules/shape.html.eco
  6. 1
      server/files/javascript/shape.js
  7. 3
      server/files/stylesheets/docs.css
  8. 3
      server/files/stylesheets/shape.css
  9. 2
      server/partials/examples/dimmer.html

68
server/documents/hotfix.html.eco
View File

@ -1,68 +0,0 @@
---
layout : 'blank'
css : 'hotfix'
standalone : true
title : 'Test Page'
type : 'Library'
---
<!-- TEST JS HERE !-->
<script type="text/javascript">
$(document).ready(function() {
$('.ui.tag.search').search({
apiSettings: {
mockResponse: function(settings){
return {
"success": true,
"results": {
"category1": {
"name": "Category 1",
"results": [
{
"title": "S1",
"description": "Optional Description1"
},
{
"title": "S2",
"description": "Optional Description2"
},
{
"title": "S3",
"description": "Optional Description3"
}
]
},
"category2": {
"name": "Category 2",
"results": [
{
"title": "S10",
"description": "Optional Description10"
}
]
}
}
};
}
},
type: 'category',
onSelect: function(result, response) {
console.log(result)
}
})
});
</script>
<!-- TEST CSS HERE !-->
<style type="text/css">
</style>
<div class="ui container">
<div class="ui category tag search">
<div class="ui icon input">
<input class="prompt" type="text" placeholder="search tags...">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
</div>

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

@ -4,7 +4,7 @@ css : 'index'
standalone : true
---
<div class="following bar">
<div class="ui page grid">
<div class="ui grid container">
<div class="column">
<div class="ui large inverted secondary network menu">
<div class="item">
@ -57,7 +57,7 @@ standalone : true
</div>
</div>
<div class="zoomed masthead segment">
<div class="ui page grid">
<div class="ui grid container">
<div class="column">
<div class="introduction">
<a class="ui black version label" href="https://github.com/Semantic-Org/Semantic-UI/blob/master/RELEASE-NOTES.md">
@ -90,7 +90,7 @@ standalone : true
</div>
</div>
<div class="ui vertical stripe intro segment">
<div class="ui stackable very relaxed center aligned page grid">
<div class="ui stackable very relaxed center aligned grid container">
<div class="row">
<div class="twelve wide column">
<img class="ui fluid image" src="/images/devices.png">
@ -99,7 +99,7 @@ standalone : true
</div>
</div>
</div>
<div class="stackable very relaxed ui page grid">
<div class="stackable very relaxed ui grid container">
<div class="row">
<div class="seven wide column">
<h2 class="ui header">Concise HTML</h2>
@ -181,7 +181,7 @@ standalone : true
</div>
</div>
<div class="ui email alternate stripe vertical segment">
<div class="ui center aligned page grid">
<div class="ui center aligned grid container">
<div class="column">
<h3 class="ui header">
Semantic is growing fast. Want to see just how much? Sign up and we'll let you know
@ -200,7 +200,7 @@ standalone : true
</div>
</div>
<div class="ui stripe theming vertical segment">
<div class="ui stackable very relaxed two column page grid">
<div class="ui stackable very relaxed two column grid container">
<div class="center aligned column">
<h1 class="ui icon header">
<img src="/images/icons/theming.png" class="ui icon image">
@ -264,7 +264,7 @@ standalone : true
</div>
</div>
<div class="feature alternate ui stripe vertical segment">
<div class="ui three column center aligned divided relaxed stackable page grid">
<div class="ui three column center aligned divided relaxed stackable grid container">
<div class="row">
<div class="column">
<h2 class="ui icon header">
@ -296,7 +296,7 @@ standalone : true
</div>
</div>
<div class="ui stripe vertical segment">
<div class="ui stackable very relaxed page grid">
<div class="ui stackable very relaxed grid container">
<div class="fourteen wide center aligned centered column">
<h1 class="ui icon header">
<img src="/images/icons/toolbox.png" class="ui icon image">
@ -847,28 +847,55 @@ standalone : true
</div>
<div class="ui divider"></div>
<div tabindex="0" class="ui searchable floating dropdown labeled icon button">
<div class="ui floating dropdown labeled icon button">
<i class="filter icon"></i>
<span class="text">Filter Posts</span>
<div tabindex="-1" class="menu">
<div class="header">
Filter by Tag
</div>
<div class="item">
<div class="ui red empty circular label"></div>
Important
</div>
<div class="item">
<div class="ui blue empty circular label"></div>
Announcement
<div class="menu">
<div class="ui icon search input">
<i class="search icon"></i>
<input type="text" placeholder="Search tags...">
</div>
<div class="item">
<div class="ui black empty circular label"></div>
Cannot Fix
<div class="header">
<i class="tags icon"></i>
Tag Label
</div>
<div class="item">
<div class="ui green empty circular label"></div>
Discussion
<div class="scrolling menu">
<div class="item">
<div class="ui red empty circular label"></div>
Important
</div>
<div class="item">
<div class="ui blue empty circular label"></div>
Announcement
</div>
<div class="item">
<div class="ui black empty circular label"></div>
Cannot Fix
</div>
<div class="item">
<div class="ui purple empty circular label"></div>
News
</div>
<div class="item">
<div class="ui orange empty circular label"></div>
Enhancement
</div>
<div class="item">
<div class="ui empty circular label"></div>
Change Declined
</div>
<div class="item">
<div class="ui yellow empty circular label"></div>
Off Topic
</div>
<div class="item">
<div class="ui pink empty circular label"></div>
Interesting
</div>
<div class="item">
<div class="ui green empty circular label"></div>
Discussion
</div>
</div>
</div>
</div>
@ -949,7 +976,7 @@ standalone : true
</div>
</div>
<div class="ui stripe community vertical segment">
<div class="ui two column center aligned divided very relaxed stackable page grid">
<div class="ui two column center aligned divided very relaxed stackable grid container">
<div class="row">
<div class="column">
<h2 class="ui icon header">
@ -969,7 +996,7 @@ standalone : true
</div>
</div>
<div class="ui alternate stripe vertical segment">
<div class="ui stackable center aligned page grid">
<div class="ui stackable center aligned grid container">
<div class="fourteen wide column">
<h1 class="ui icon header">
<img class="ui inline icon image" src="/images/icons/rocket.png">

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

@ -1,6 +1,8 @@
---
layout : 'default'
css : 'custom'
standalone : true
title : 'All UI'
type : 'Semantic'
description : 'Examples of all user interface elements'

123
server/documents/modules/dropdown.html.eco
View File

@ -254,6 +254,58 @@ themes : ['Default']
</div>
</div>
<div class="another dropdown example">
<div class="ui basic multiple dropdown">
<i class="filter icon"></i>
<span class="text">Filter Posts</span>
<div class="menu">
<div class="ui icon search input">
<i class="search icon"></i>
<input type="text" placeholder="Search tags...">
</div>
<div class="divider"></div>
<div class="header">
<i class="tags icon"></i>
Tag Label
</div>
<div class="scrolling menu">
<div class="item" data-value="important">
<div class="ui red empty circular label"></div>
Important
</div>
<div class="item" data-value="announcement">
<div class="ui blue empty circular label"></div>
Announcement
</div>
<div class="item" data-value="cannotfix">
<div class="ui black empty circular label"></div>
Cannot Fix
</div>
<div class="item" data-value="news">
<div class="ui purple empty circular label"></div>
News
</div>
<div class="item" data-value="enhancement">
<div class="ui orange empty circular label"></div>
Enhancement
</div>
<div class="item" data-value="off-topic">
<div class="ui yellow empty circular label"></div>
Off Topic
</div>
<div class="item" data-value="interesting">
<div class="ui pink empty circular label"></div>
Interesting
</div>
<div class="item" data-value="discussion">
<div class="ui green empty circular label"></div>
Discussion
</div>
</div>
</div>
</div>
</div>
<div class="dropdown example">
<h4 class="ui header">Inline</h4>
<p>A dropdown can be formatted to appear inline in other content</p>
@ -484,10 +536,9 @@ themes : ['Default']
<i class="search icon"></i>
<input type="text" name="search" placeholder="Search issues...">
</div>
<div class="divider"></div>
<div class="header">
<i class="tags icon"></i>
Filter by tag
Tag Label
</div>
<div class="item">
<div class="ui red empty circular label"></div>
@ -617,7 +668,7 @@ themes : ['Default']
<div class="dropdown example">
<h4 class="ui header">Description</h4>
<p>A dropdown menu can contain a <a href="/elements/icon.html">description</a>.</p>
<p>A dropdown menu can contain a description.</p>
<div class="ui floating labeled icon dropdown button">
<i class="filter icon"></i>
<span class="text">Filter</span>
@ -644,7 +695,7 @@ themes : ['Default']
<div class="dropdown example">
<h4 class="ui header">Label</h4>
<p>A dropdown menu can contain a <a href="/elements/input.html">label</a>.</p>
<p>A dropdown menu can contain a <a href="/elements/label.html">label</a>.</p>
<div class="ui floating labeled icon dropdown button">
<i class="filter icon"></i>
<span class="text">Filter</span>
@ -676,6 +727,21 @@ themes : ['Default']
</div>
</div>
<div class="dropdown example">
<h4 class="ui header">Message</h4>
<p>A dropdown menu can contain a <a href="/elements/message.html">message</a>.</p>
<div class="ui floating labeled icon dropdown button">
<i class="filter icon"></i>
<span class="text">Login</span>
<div class="menu">
<div class="ui error message">
<div class="header">Error</div>
You must log-in to see all categories
</div>
</div>
</div>
</div>
<div class="dropdown example">
<h4 class="ui header">Floated Content</h4>
<p>A dropdown menu can contain floated content.</p>
@ -1303,36 +1369,29 @@ themes : ['Default']
<div class="hover example">
<h4 class="ui header">Menu</h4>
<p>A <a href="/collections/menu.html">menu</a> element can contain a dropdown</p>
<div class="ui tiered purple inverted menu">
<div class="menu">
<a class="active item">
Home
</a>
<a class="ui dropdown item">
Messages
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Categories</span>
<div class="menu">
<div class="item">Unread</div>
<div class="item">Promotions</div>
<div class="item">Updates</div>
</div>
<div class="ui purple inverted three item menu">
<a class="active item">
Home
</a>
<a class="ui dropdown item">
Messages
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Categories</span>
<div class="menu">
<div class="item">Unread</div>
<div class="item">Promotions</div>
<div class="item">Updates</div>
</div>
<div class="item">Archive</div>
</div>
</a>
<a class="item">
Browse
</a>
</div>
<div class="sub menu">
<a class="item">Activity Feed</a>
<a class="item">Profile</a>
<a class="item">Events</a>
</div>
<div class="item">Archive</div>
</div>
</a>
<a class="item">
Browse
</a>
</div>
</div>

116
server/documents/modules/shape.html.eco
View File

@ -1,6 +1,7 @@
---
layout : 'default'
css : 'shape'
standalone : true
element : 'shape'
elementType : 'module'
@ -187,108 +188,45 @@ themes : ['default']
<h4 class="ui header">Shape with Content</h4>
<p>Any type of element can be used as a side of a shape.</p>
<div class="dog ui shape">
<div class="ui dog shape">
<div class="sides">
<div class="active side">
<div class="ui cards">
<div class="card">
<div class="image">
<a class="ui like corner label">
<i class="like icon"></i>
</a>
<img src="/images/demo/highres2.jpg">
</div>
<div class="content">
<div class="header">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>
<div class="ui card">
<div class="image">
<a class="ui like corner label">
<i class="like icon"></i>
</a>
<img src="/images/demo/highres.jpg">
</div>
</div>
</div>
<div class="side">
<div class="ui cards">
<div class="card">
<div class="image">
<a class="ui like corner label">
<i class="like icon"></i>
</a>
<img src="/images/demo/highres5.jpg">
</div>
<div class="content">
<div class="header">Silly Dog</div>
<p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p>
</div>
<div class="content">
<div class="header">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>
</div>
</div>
<div class="side">
<div class="ui cards">
<div class="card">
<div class="image">
<a class="ui like corner label">
<i class="like icon"></i>
</a>
<img src="/images/demo/highres4.jpg">
</div>
<div class="content">
<div class="header">Faithful Dog</div>
<div class="meta">5 days ago</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>
</div>
</div>
</div>
</div>
</div>
<div class="dog ui shape">
<div class="sides">
<div class="active side">
<div class="ui cards">
<div class="card">
<div class="image">
<a class="ui like corner label">
<i class="like icon"></i>
</a>
<img src="/images/demo/highres.jpg">
</div>
<div class="content">
<div class="header">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="ui icon message">
<i class="inbox icon"></i>
<div class="content">
<div class="header">
Have you heard about our mailing list?
</div>
<p>Get the best news in your e-mail every day.</p>
</div>
</div>
</div>
<div class="side">
<div class="ui cards">
<div class="card">
<div class="image">
<a class="ui like corner label">
<i class="like icon"></i>
</a>
<img src="/images/demo/highres4.jpg">
</div>
<div class="content">
<div class="header">Silly Dog</div>
<p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p>
</div>
<div class="ui card">
<div class="image">
<a class="ui like corner label">
<i class="like icon"></i>
</a>
<img src="/images/demo/highres6.jpg">
</div>
</div>
</div>
<div class="side">
<div class="ui cards">
<div class="card">
<div class="image">
<a class="ui like corner label">
<i class="like icon"></i>
</a>
<img src="/images/demo/highres6.jpg">
</div>
<div class="content">
<div class="header">Faithful Dog</div>
<div class="meta">5 days ago</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>
<div class="content">
<div class="header">Faithful Dog</div>
<div class="meta">5 days ago</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>
</div>
</div>

1
server/files/javascript/shape.js
View File

@ -53,6 +53,7 @@ semantic.shape.ready = function() {
.each(handler.removeShape)
;
$demo
.removeAttr('style')
.addClass(shape)
;
}

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

@ -643,6 +643,9 @@ body#example {
#example .example .wireframe.image {
opacity: 0.5;
}
#example .example .accordion .content > .wireframe.image {
opacity: 0.5 !important;
}
#example .example :not(.images) > .wireframe.image {
margin-top: 1rem;
margin-bottom: 1rem;

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

@ -10,8 +10,7 @@
}
#example .dog.shape {
float: left;
margin: 0 1em 3em 0;
margin: 0em 0em 3em;
}
#example .dog.shape .side .item {

2
server/partials/examples/dimmer.html
View File

@ -68,7 +68,7 @@
</div>
<style type="text/css">
.dimmer.demo {
.dimmer.demo:not(.page) {
margin: 2em 0em;
}
h4 + .dimmer.demo {

Write Preview
Loading…
Cancel
Save