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

Update docs for item/card

pull/993/head
jlukic 10 years ago
parent
1369498b6c
commit
9595fc13c9
6 changed files with 356 additions and 159 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      server/documents/elements/header.html.eco
  2. 36
      server/documents/modules/shape.html.eco
  3. 98
      server/documents/views/card.html.eco
  4. 355
      server/documents/views/item.html.eco
  5. 4
      server/files/javascript/semantic.js
  6. 10
      server/files/stylesheets/semantic.css

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

@ -141,18 +141,18 @@ themes : ['default', 'bookish', 'chubby']
<h4 class="ui header">Attached</h4>
<p>A header can be attached to other content, like a <a href="elements/segment.html">segment</a></p>
<h4 class="ui top attached header">
Section 1
Bulldog
</h4>
<div class="ui attached segment">
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
<p>Bulldog is the name for a breed of dog commonly referred to as the English Bulldog. Other Bulldog breeds include the American Bulldog, Old English Bulldog (now extinct), Olde English Bulldogge, and the French Bulldog. The Bulldog is a muscular, heavy dog with a wrinkled face and a distinctive pushed-in nose.</p>
<p>The American Kennel Club (AKC), The Kennel Club (UK), and the United Kennel Club (UKC) oversee breeding standards. Bulldogs are the 5th most popular purebreed in the United States in 2013 according to the American Kennel Club.</p>
</div>
<h4 class="ui attached header">
Section 2
Catahoula Cur
</h4>
<div class="ui attached segment">
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
<p>The Catahoula Cur is an American dog breed named after Catahoula Parish, in the state of Louisiana, in the United States. After becoming the state dog of Louisiana in 1979, its name was officially changed to Louisiana Catahoula Leopard Dog. The Catahoula is believed to be the first dog breed developed in North America.</p>
<p>The breed is sometimes referred to as the "Catahoula Hound" or "Catahoula Leopard Hound", although it is not a true hound, but a cur. It is also called the "Catahoula Hog Dog", reflecting its traditional use in hunting wild boar.</p>
</div>
<h4 class="ui bottom attached header">
Thanks for reading

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

@ -195,8 +195,8 @@ themes : ['default']
<div class="dog ui shape">
<div class="sides">
<div class="active side">
<div class="ui items">
<div class="item">
<div class="ui cards">
<div class="card">
<div class="image">
<a class="ui like corner label">
<i class="like icon"></i>
@ -204,15 +204,15 @@ themes : ['default']
<img src="/images/demo/highres2.jpg">
</div>
<div class="content">
<div class="name">Cute Dog</div>
<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>
<div class="side">
<div class="ui items">
<div class="item">
<div class="ui cards">
<div class="card">
<div class="image">
<a class="ui like corner label">
<i class="like icon"></i>
@ -220,15 +220,15 @@ themes : ['default']
<img src="/images/demo/highres5.jpg">
</div>
<div class="content">
<div class="name">Silly Dog</div>
<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>
</div>
</div>
<div class="side">
<div class="ui items">
<div class="item">
<div class="ui cards">
<div class="card">
<div class="image">
<a class="ui like corner label">
<i class="like icon"></i>
@ -236,8 +236,8 @@ themes : ['default']
<img src="/images/demo/highres4.jpg">
</div>
<div class="content">
<div class="header">Faithful Dog</div>
<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>
</div>
@ -249,8 +249,8 @@ themes : ['default']
<div class="dog ui shape">
<div class="sides">
<div class="active side">
<div class="ui items">
<div class="item">
<div class="ui cards">
<div class="card">
<div class="image">
<a class="ui like corner label">
<i class="like icon"></i>
@ -258,15 +258,15 @@ themes : ['default']
<img src="/images/demo/highres.jpg">
</div>
<div class="content">
<div class="name">Cute Dog</div>
<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>
<div class="side">
<div class="ui items">
<div class="item">
<div class="ui cards">
<div class="card">
<div class="image">
<a class="ui like corner label">
<i class="like icon"></i>
@ -274,15 +274,15 @@ themes : ['default']
<img src="/images/demo/highres4.jpg">
</div>
<div class="content">
<div class="name">Silly Dog</div>
<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>
</div>
</div>
<div class="side">
<div class="ui items">
<div class="item">
<div class="ui cards">
<div class="card">
<div class="image">
<a class="ui like corner label">
<i class="like icon"></i>
@ -290,8 +290,8 @@ themes : ['default']
<img src="/images/demo/highres6.jpg">
</div>
<div class="content">
<div class="header">Faithful Dog</div>
<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>
</div>

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

@ -46,17 +46,29 @@ themes : ['Default', 'Basic']
</div>
</div>
<div class="extra content">
<i class="right floated like icon"></i>
<i class="like icon"></i>
22 Likes
</div>
</div>
</div>
<div class="clearing example">
<div class="even example">
<h4 class="ui header">Cards</h4>
<p>A group of cards. </p>
<div class="ignored yellow ui message">
<i class="info icon"></i>
Cards must manually be given a width and height that match up to the content that it displays. Content must also be truncated so that each item will not exceed the maximum height.
<div class="header">
<i class="info icon"></i>
Equal Size Cards
</div>
<p>Your card's content may vary in length. In order to keep cards aligned, it is best to set a <code>min-height</code> that matches your largest card size.</p>
<p>For example:</p>
<div class="code" data-type="css">
/* Sets card height to about 3 lines of description */
#my-container .card .content {
min-height: 145px;
}
</div>
</div>
<div class="ui cards">
<div class="card">
@ -65,9 +77,11 @@ themes : ['Default', 'Basic']
</div>
<div class="content">
<div class="header">Cute Dog</div>
<div class="meta">Today</div>
<div class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</div>
</div>
<div class="extra content">
<i class="check icon"></i>
199 Votes
</div>
</div>
@ -81,6 +95,7 @@ themes : ['Default', 'Basic']
<div 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.</div>
</div>
<div class="extra content">
<i class="check icon"></i>
199 Votes
</div>
</div>
@ -90,9 +105,11 @@ themes : ['Default', 'Basic']
</div>
<div class="content">
<div class="header">Silly Dog</div>
<div class="meta">12 days ago</div>
<div class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</div>
</div>
<div class="extra content">
<i class="check icon"></i>
199 Votes
</div>
</div>
@ -197,6 +214,7 @@ themes : ['Default', 'Basic']
</div>
</div>
<div class="extra content">
<i class="check icon"></i>
121 Votes
</div>
</div>
@ -219,6 +237,7 @@ themes : ['Default', 'Basic']
</div>
</div>
<div class="extra content">
<i class="check icon"></i>
121 Votes
</div>
</div>
@ -226,6 +245,45 @@ themes : ['Default', 'Basic']
<h2 class="ui dividing header">Variations</h2>
<div class="example">
<h4 class="ui header">Link Card</h4>
<p>A card can be formatted so that the entire contents link to another page</p>
<a class="ui card" href="http://www.dog.com">
<div class="content">
<div class="header">Cute Dog</div>
<div class="meta">
<span class="category">Animals</span>
</div>
<div class="description">
Click to view more information about this dog at dog.com
</div>
</div>
<div class="extra content">
<div class="right floated author">
<img class="ui avatar image" src="/images/demo/photo2.jpg"> Dog Doggington
</div>
</div>
</a>
</div>
<div class="another example">
<div class="ui link card">
<div class="content">
<div class="header">Cute Dog</div>
<div class="meta">
<span class="category">Animals</span>
</div>
<div class="description">
This card simulates a link without using the A tag for use with javascript links.
</div>
</div>
<div class="extra content">
<div class="right floated author">
<img class="ui avatar image" src="/images/demo/photo2.jpg"> Dog Doggington
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Floated Content</h4>
<p>Any content element can be floated left or right</p>
@ -252,9 +310,9 @@ themes : ['Default', 'Basic']
</div>
</div>
<div class="example">
<div class="even example">
<h4 class="ui header">Column count</h4>
<p>An item list can list how many columns should exist in a row</p>
<p>A group of cards can set how many cards should exist in a row</p>
<div class="ui four cards">
<div class="card">
<div class="image">
@ -295,11 +353,11 @@ themes : ['Default', 'Basic']
</div>
</div>
<div class="example">
<h4 class="ui header">Stackable</h4>
<div class="ui ignored info message">Resize your browser to a smaller size to see the cards stack after reaching mobile breakpoints</div>
<p>An item view can have its cards take the full width when below a browser resolution threshold to allow for content to display properly at small sizes</p>
<div class="ui four stackable cards">
<div class="even example">
<h4 class="ui header">Doubling</h4>
<p>A group of cards can double its column width for mobile</p>
<div class="ui ignored warning message">Resize your browser to a smaller size to see the cards stack after reaching mobile breakpoints</div>
<div class="ui six doubling cards">
<div class="card">
<div class="image">
<img src="/images/demo/highres4.jpg">
@ -336,6 +394,24 @@ themes : ['Default', 'Basic']
<div class="description">Happy dogs are pretty interesting if you are an unhappy person.</div>
</div>
</div>
<div class="card">
<div class="image">
<img src="/images/demo/highres5.jpg">
</div>
<div class="content">
<div class="header">Faithful Dog</div>
<div 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.</div>
</div>
</div>
<div class="card">
<div class="image">
<img src="/images/demo/highres5.jpg">
</div>
<div class="content">
<div class="header">Faithful Dog</div>
<div 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.</div>
</div>
</div>
</div>
</div>

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

@ -4,39 +4,47 @@ css : 'item'
title : 'Item'
description : 'An item view can be used to list site content'
type : 'Draft'
type : 'UI View'
element : 'item'
elementType : 'view'
themes : ['Default']
---
<%- @partial('header') %>
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/views/item.less" />
<script src="/javascript/item.js"></script>
<div class="main container">
<div class="peek">
<div class="ui vertical pointing secondary menu">
<a class="active item">Types</a>
<a class="item">Content</a>
<a class="item">Variations</a>
</div>
</div>
<h2 class="ui dividing header">Types</h2>
<div class="example">
<div class="even example">
<h4 class="ui header">Items</h4>
<p>A group of items. </p>
<div class="ignored yellow icon ui message">
<i class="info icon"></i>
Items must manually be given a width and height that match up to the content that it displays. Content must also be truncated so that each item will not exceed the maximum height.
</div>
<p>A group of items.</p>
<div class="ui items">
<div class="item">
<div class="image">
<img src="/images/demo/highres.jpg">
</div>
<div class="content">
<div class="header">Cute Dog</div>
<a class="header">Cute Dog</a>
<div class="meta">Today</div>
<div class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</div>
</div>
<div class="extra content">
199 Votes
<div class="extra">
<i class="check icon"></i>
199 Votes
</div>
</div>
</div>
<div class="item">
@ -44,12 +52,13 @@ type : 'Draft'
<img src="/images/demo/highres2.jpg">
</div>
<div class="content">
<div class="header">Faithful Dog</div>
<a class="header">Faithful Dog</a>
<div class="meta">5 days ago</div>
<div 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.</div>
</div>
<div class="extra content">
199 Votes
<div class="extra">
<i class="check icon"></i>
199 Votes
</div>
</div>
</div>
<div class="item">
@ -57,45 +66,73 @@ type : 'Draft'
<img src="/images/demo/highres3.jpg">
</div>
<div class="content">
<div class="header">Silly Dog</div>
<a class="header">Silly Dog</a>
<div class="meta">12 days ago</div>
<div class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</div>
</div>
<div class="extra content">
199 Votes
<div class="extra">
<i class="check icon"></i>
199 Votes
</div>
</div>
</div>
</div>
</div>
<div class="another text example">
<h2 class="ui dividing header">Content</h2>
<div class="example">
<h4 class="ui header">Title</h4>
<p>A item can contain content a title</p>
<div class="ui items">
<div class="item">
<div class="content">
<div class="header">Cute Dog</div>
<a class="header">Cute Dog</a>
<div class="meta">2 days ago</div>
<div class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</div>
<div class="extra">
121 Votes
</div>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Metadata</h4>
<p>A item can contain content metadata</p>
<div class="ui info message">
<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">
<div class="item">
<div class="content">
<div class="header">Faithful Dog</div>
<div class="meta">5 days ago</div>
<div 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.</div>
<div class="extra">
121 Votes
<a class="header">Cute Dog</a>
<div class="meta">
<span class="time">2 days ago</span>
<span class="category">Animals</span>
</div>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Link</h4>
<p>A item can contain contain links as images, headers, or inside content</p>
<div class="ui yellow message">
<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">
<div class="item">
<a class="image" href="#">
<img src="/images/demo/highres.jpg">
</a>
<div class="content">
<div class="header">Silly Dog</div>
<div class="meta">1 week ago</div>
<div class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</div>
<div class="extra">
121 Votes
<a class="header" href="#">Cute Dog</a>
<div class="meta">
<a class="time">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>
@ -103,142 +140,218 @@ type : 'Draft'
</div>
<div class="example">
<h4 class="ui header">List</h4>
<p>An item list. </p>
<div class="ignored yellow icon ui message">
<i class="info icon"></i>
Items must manually be given a width and height that match up to the content that it displays. Content must also be truncated so that each item will not exceed the maximum height.
<h4 class="ui header">Icons</h4>
<p>A item can contain icons to denote user actions.</p>
<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">
<div class="item">
<div class="image">
<img src="/images/demo/highres.jpg">
</div>
<div class="content">
<div class="header">Cute Dog</div>
<div class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</div>
</div>
<div class="extra content">
199 Votes
<i class="right floated like icon"></i>
<i class="right floated star icon"></i>
<a class="header">Cute Dog</a>
</div>
</div>
</div>
</div>
<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">
<div class="item">
<div class="image">
<img src="/images/demo/highres2.jpg">
</div>
<div class="content">
<div class="header">Faithful Dog</div>
<div class="meta">5 days ago</div>
<div 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.</div>
</div>
<div class="extra content">
199 Votes
<a class="header">Cute Dog</a>
<div class="meta">2 days ago</div>
<div class="description">
<p>Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their tiny stature, and even others for their massive size.</p>
<p>Many people also have their own barometers for what makes a cute dog.</p>
</div>
</div>
</div>
</div>
</div>
<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">
<div class="item">
<div class="image">
<img src="/images/demo/highres3.jpg">
</div>
<div class="content">
<div class="header">Silly Dog</div>
<div class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</div>
</div>
<div class="extra content">
199 Votes
<a class="header">Cute Dog</a>
<div class="meta">2 days ago</div>
<div class="description">
<p>Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their tiny stature, and even others for their massive size.</p>
<p>Many people also have their own barometers for what makes a cute dog.</p>
</div>
<div class="extra">
<i class="check icon"></i>
121 Votes
</div>
</div>
</div>
</div>
</div>
<h2 class="ui dividing header">Variations</h2>
</div>
<div class="example">
<h4 class="ui header">Stackable</h4>
<div class="ui ignored info icon message">Resize your browser to a smaller size to see the items stack after reaching mobile breakpoints</div>
<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">
<h4 class="ui header">Image</h4>
<p>A item can contain an image</p>
<div class="ui items">
<div class="item">
<div class="image">
<img src="/images/demo/highres5.jpg">
<a class="like ui corner label">
<i class="like icon"></i>
</a>
<img src="/images/demo/highres.jpg">
</div>
<div class="content">
<div class="header">Cute Dog</div>
<div class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</div>
<div class="extra content">
11 Votes
<a class="header">Cute Dog</a>
<div class="meta">2 days ago</div>
<div class="description">
<p>Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their tiny stature, and even others for their massive size.</p>
<p>Many people also have their own barometers for what makes a cute dog.</p>
</div>
<div class="extra">
<i class="check icon"></i>
121 Votes
</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/images/demo/highres6.jpg">
</div>
</div>
<h2 class="ui dividing header">Variations</h2>
<div class="example">
<h4 class="ui header">Divided</h4>
<p>Items can be divided to better distinguish between grouped content</p>
<div class="ui info message">
<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 divided items segment">
<div class="item" href="http://www.dog.com">
<div class="content">
<a class="header">Cute Dog</a>
<div class="meta">
<span class="category">Animals</span>
</div>
<div class="description">
Click to view more information about this dog at dog.com
</div>
<div class="extra">
<div class="author">
<img class="ui avatar image" src="/images/demo/photo2.jpg"> Dog Doggington
</div>
</div>
</div>
</div>
<div class="item" href="http://www.dog.com">
<div class="content">
<div class="header">Faithful Dog</div>
<div class="meta">5 days ago</div>
<div 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.</div>
<div class="extra content">
11 Votes
<a class="header">Magic Dog</a>
<div class="meta">
<span class="category">Animals</span>
</div>
<div class="description">
Click to view more information about a magic dog at dog.com
</div>
<div class="extra">
<div class="author">
<img class="ui avatar image" src="/images/demo/photo.jpg"> Dog Doggington
</div>
</div>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Column count</h4>
<p>An item list can list how many columns should exist in a row</p>
<div class="ui four items">
<div class="item">
<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">
<a class="item" href="http://www.dog.com">
<div class="image">
<img src="/images/demo/highres4.jpg">
<a class="star ui corner label">
<i class="star icon"></i>
</a>
<img src="/images/demo/highres.jpg">
</div>
<div class="content">
<div class="header">Cute Dog</div>
<div class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</div>
<div class="meta">
<span class="category">Animals</span>
</div>
<div class="description">
Click to view more information about this dog at dog.com
</div>
<div class="extra">
<div class="author">
<img class="ui avatar image" src="/images/demo/photo2.jpg"> Dog Doggington
</div>
</div>
</div>
</div>
<div class="item">
</a>
<a class="item" href="http://www.dog.com">
<div class="image">
<img src="/images/demo/highres5.jpg">
<a class="star ui corner label">
<i class="star icon"></i>
</a>
<img src="/images/demo/highres3.jpg">
</div>
<div class="content">
<div class="header">Faithful Dog</div>
<div 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.</div>
<div class="header">Magic Dog</div>
<div class="meta">
<span class="category">Animals</span>
</div>
<div class="description">
Click to view more information about a magic dog at dog.com
</div>
<div class="extra">
<div class="author">
<img class="ui avatar image" src="/images/demo/photo.jpg"> Dog Doggington
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="another example">
<div class="ui link items">
<div class="item">
<div class="image">
<img src="/images/demo/highres3.jpg">
<a class="star ui corner label">
<i class="star icon"></i>
</a>
</div>
<div class="content">
<div class="header">Silly Dog</div>
<div class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</div>
<a class="header">Cute Dog</a>
<div class="meta">
<span class="category">Animals</span>
</div>
<div class="description">
This item simulates a link without using the A tag for use with javascript links.
</div>
</div>
<div class="extra content">
<div class="right floated author">
<img class="ui avatar image" src="/images/demo/photo2.jpg"> Dog Doggington
</div>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Floated Content</h4>
<p>Any content element can be floated left or right</p>
<div class="ui info message">
<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">
<div class="item">
<div class="image">
<img src="/images/demo/highres2.jpg">
<a class="star ui corner label">
<i class="star icon"></i>
</a>
</div>
<div class="content">
<div class="header">Happy Dog</div>
<div class="description">Happy dogs are pretty interesting if you are an unhappy person.</div>
<a class="header">Cute Dog</a>
<div class="meta">
<span class="right floated time">2 days ago</span>
<span class="category">Animals</span>
</div>
<div class="description">
Here's a description of a cute dog.
</div>
<div class="content">
<div class="right floated author">
<img class="ui avatar image" src="/images/demo/photo2.jpg"> Dog Doggington
</div>
</div>
</div>
</div>
</div>

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

@ -581,7 +581,7 @@ semantic.ready = function() {
$(this)
.stop()
.animate({
width: '155px'
width: '130px'
}, 300, function() {
$(this).find('.text').show();
})
@ -592,7 +592,7 @@ semantic.ready = function() {
$(this)
.stop()
.animate({
width: '70px'
width: '60px'
}, 300)
;
}

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

@ -538,7 +538,10 @@ body.guide .main.container > * {
position: fixed;
top: 63px;
z-index: 500;
width: 70px;
width: 60px;
}
#example .launch.button .icon {
margin-left: 0px;
}
#example.index .main.menu {
top: 0px;
@ -1202,6 +1205,11 @@ body.guide .main.container > * {
}
body.card .even.example .card .content {
clear: both;
min-height: 145px;
}
body.progress .ui.progress .bar {
-webkit-animation: finish 10s ease-in-out infinite;
-moz-animation: finish 10s ease-in-out infinite;

Write Preview
Loading…
Cancel
Save