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

Beginnig to redo demo content in docs

pull/1063/head
jlukic 10 years ago
parent
10b5798bc3
commit
43725695b3
23 changed files with 257 additions and 394 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      RELEASE NOTES.md
  2. 2
      server/documents/collection.html.eco
  3. 40
      server/documents/element.html.eco
  4. 83
      server/documents/modules/modal.html.eco
  5. 356
      server/documents/views/comment.html.eco
  6. 31
      server/files/javascript/semantic.js
  7. 4
      server/files/javascript/sidebar.js
  8. 10
      server/files/stylesheets/semantic.css
  9. 23
      src/definitions/behaviors/visibility.js
  10. 13
      src/definitions/elements/button.less
  11. 2
      src/definitions/modules/dimmer.less
  12. 1
      src/definitions/modules/dropdown.less
  13. 5
      src/definitions/modules/modal.less
  14. 39
      src/definitions/modules/sidebar.js
  15. 2
      src/definitions/modules/sidebar.less
  16. 1
      src/definitions/modules/transition.less
  17. 4
      src/definitions/views/comment.less
  18. 2
      src/themes/packages/chubby/views/comment.variables
  19. 10
      src/themes/packages/default/elements/button.variables
  20. 2
      src/themes/packages/default/globals/site.variables
  21. 2
      src/themes/packages/default/modules/modal.variables
  22. 2
      src/themes/packages/default/views/card.variables
  23. 16
      src/themes/packages/default/views/comment.variables

1
RELEASE NOTES.md
View File

@ -13,6 +13,7 @@
- **Table** - Tables are no longer striped by default, instead you must specify the 'striped' variation
**Enhancements**
- **General** - CSS animations now hint with will change properties to increase performance in supported browsers
- **Accordion** - Accordion now includes all icons in an embedded font instead of requiring icons
- **Button** - Now has compact form, used for fitting into tight spaces
- **Checkbox** - All styles have been redone. Standard checkboxes are now based around PX and not EM making sure there are no unusual circles or rounding issues. Checkboxes also now use a custom font for glyphs instead of CSS tricks.

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

@ -1,6 +1,6 @@
y---
layout : 'default'
css : 'index'
css : 'list'
title : 'UI Collections'
description : 'UI collections are elements which contain other elements which often appear together.'

40
server/documents/element.html.eco
View File

@ -1,6 +1,6 @@
---
layout : 'default'
css : 'progress'
css : 'list'
title : 'UI Elements'
description : 'Elements are the basic building blocks of a website.'
@ -43,9 +43,9 @@ type : 'Semantic'
-->
<h2 class="ui dividing header">Types</h2>
<div class="ui two type stackable items">
<div class="ui two stackable element cards">
<div class="item">
<div class="card">
<div class="image">
<div class="ui teal labeled icon button">
<i class="icon user add"></i>Follow
@ -58,20 +58,20 @@ type : 'Semantic'
</div>
</div>
<div class="content">
<a href="elements/button.html" class="name">Button</a>
<a href="elements/button.html" class="header">Button</a>
<p>A button indicates a possible user action.</p>
</div>
</div>
<div class="item">
<div class="card">
<div class="image">
<div class="ui horizontal divider"><i class="github icon"></i></div>
</div>
<div class="content">
<a href="elements/divider.html" class="name">Divider</a>
<a href="elements/divider.html" class="header">Divider</a>
<p>A divider visually segments content into separate groups</p>
</div>
</div>
<div class="item">
<div class="card">
<div class="image">
<h2 class="ui blue block header">
Section 2
@ -79,33 +79,33 @@ type : 'Semantic'
</h2>
</div>
<div class="content">
<a href="elements/header.html" class="name">Header</a>
<a href="elements/header.html" class="header">Header</a>
<p>Headers provide a short summary of content</p>
</div>
</div>
<div class="item">
<div class="card">
<div class="image">
<div class="ui red active progress">
<div class="bar"></div>
</div>
</div>
<div class="content">
<a href="elements/progress.html" class="name">Progress Bar</a>
<a href="elements/progress.html" class="header">Progress Bar</a>
<p>A progress bar displays progress on a task</p>
</div>
</div>
<div class="item">
<div class="card">
<div class="image">
<div class="ui inverted stacked segment">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
</div>
<div class="content">
<a href="elements/segment.html" class="name">Segment</a>
<a href="elements/segment.html" class="header">Segment</a>
<p>A segment is used to create a grouping of related content.</p>
</div>
</div>
<div class="item">
<div class="card">
<div class="image">
<div class="ui left floated circular image">
<img src="/images/demo/avatar.jpg">
@ -115,11 +115,11 @@ type : 'Semantic'
</div>
</div>
<div class="content">
<a href="elements/image.html" class="name">Image</a>
<a href="elements/image.html" class="header">Image</a>
<p>An image is a graphic representation of something</p>
</div>
</div>
<div class="item">
<div class="card">
<div class="image">
<div class="ui four fluid steps">
<div class="ui step">
@ -137,11 +137,11 @@ type : 'Semantic'
</div>
</div>
<div class="content">
<a href="elements/step.html" class="name">Step</a>
<a href="elements/step.html" class="header">Step</a>
<p>Steps show the current activity in a series of steps.</p>
</div>
</div>
<div class="item">
<div class="card">
<div class="image">
<i class="archive icon"></i>
<i class="attachment icon"></i>
@ -232,11 +232,11 @@ type : 'Semantic'
<i class="off icon"></i>
</div>
<div class="content">
<a href="elements/icon.html" class="name">Icon</a>
<a href="elements/icon.html" class="header">Icon</a>
<p>An icon is a glyph used to represent another concept more simply</p>
</div>
</div>
<div class="item">
<div class="card">
<div class="image">
<div class="ui red label">Dog</div>
<div class="ui teal corner label">
@ -246,7 +246,7 @@ type : 'Semantic'
<div class="ui blue ribbon label">HTML</div>
</div>
<div class="content">
<a href="elements/label.html" class="name">Label</a>
<a href="elements/label.html" class="header">Label</a>
<p>Labels give descriptions to sections of content.</p>
</div>
</div>

83
server/documents/modules/modal.html.eco
View File

@ -70,95 +70,22 @@ themes : ['Default', 'Fixed-width']
</div>
<div class="content">
<div class="ui form">
<h4 class="ui dividing header">Personal Information</h4>
<div class="two fields">
<div class="field">
<label>Name</label>
<div class="two fields">
<div class="field">
<input type="text" name="first-name" placeholder="First Name">
</div>
<div class="field">
<input type="text" name="last-name" placeholder="Last Name">
</div>
</div>
</div>
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
</div>
<h4 class="ui dividing header">Give us your feedback</h4>
<div class="field">
<label>Biography</label>
<label>Feedback</label>
<textarea></textarea>
</div>
<h4 class="ui dividing header">Account Info</h4>
<div class="two fields">
<div class="required field">
<label>Username</label>
<div class="ui left labeled icon input">
<input type="text" placeholder="Username">
<i class="user icon"></i>
</div>
</div>
<div class="required field">
<label>Password</label>
<div class="ui left labeled icon input">
<input type="password">
<i class="lock icon"></i>
</div>
</div>
</div>
<h4 class="ui dividing header">Settings</h4>
<h5 class="ui header">Privacy</h5>
<div class="field">
<div class="ui toggle checkbox">
<input type="radio" name="privacy">
<label>Allow <b>anyone</b> to see my account</label>
</div>
</div>
<div class="field">
<div class="ui toggle checkbox">
<input type="radio" name="privacy">
<label>Allow <b>only friends</b> to see my account</label>
</div>
</div>
<h5 class="ui header">Newsletter Subscriptions</h5>
<div class="field">
<div class="ui slider checkbox">
<input type="checkbox" name="top-posts">
<label>Top Posts This Week</label>
</div>
</div>
<div class="field">
<div class="ui slider checkbox">
<input type="checkbox" name="hot-deals">
<label>Hot Deals</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="hot-deals">
<label>I agree to the <a href="#">Terms of Service</a>.</label>
<input type="checkbox" checked="checked" name="contact-me">
<label>It's okay to contact me.</label>
</div>
</div>
<div class="ui error message">
<div class="header">We noticed some issues</div>
</div>
</div>
</div>
<div class="actions">
<div class="ui button">Cancel</div>
<div class="ui green button">Update</div>
<div class="ui green button">Send</div>
</div>
</div>

356
server/documents/views/comment.html.eco
View File

@ -17,35 +17,30 @@ themes : ['Default', 'Chubby']
<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">State</a>
<a class="item">Variations</a>
</div>
</div>
<h2 class="ui dividing header">Types</h2>
<div class="example">
<h4 class="ui header">Comments</h4>
<p>A basic list of comments</p>
<h2 class="ui header">
<i class="comment icon"></i> Comments
</h2>
<div class="ui comments">
<div class="ui ignored info attached message">
<p>These examples uses <a href="/elements/segment.html">ui segment</a> to create content segments. This is not required.</p>
</div>
<div class="ui ignored bottom attached warning message">
<p><b>UI Views</b> provide structured layouts, but do not hook up site specific code. You will need to add your own javascript behaviors to hide and show the appropriate forms. For example, having a reply button open a reply form<p>
</div>
<div class="ui comments segment">
<h3 class="ui dividing header">Comments</h3>
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar.jpg">
<img src="/images/avatar/small/matt.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<a class="author">Matt</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="text">
I think this is a great idea and i am voting on it
How artistic!
</div>
<div class="actions">
<a class="reply">Reply</a>
@ -54,16 +49,15 @@ themes : ['Default', 'Chubby']
</div>
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar2.jpg">
<img src="/images/avatar/small/elliot.jpg">
</a>
<div class="content">
<a class="author">Pawfin Dog</a>
<a class="author">Elliot Fu</a>
<div class="metadata">
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
<p>This is against my beliefs, and the beliefs of other dogs like me. Dogs aren't cats and cats aren't dogs, the two should never be mistaken. I'm sure the creator of this post would mistake a cat for a dog.</p>
<p>I however and dogs like me, would never want to listen to someone who sympathizes so much with cats. Who likes cats anyway.</p>
<p>This has been very useful for my research. Thanks as well!</p>
</div>
<div class="actions">
<a class="reply">Reply</a>
@ -72,15 +66,15 @@ themes : ['Default', 'Chubby']
<div class="comments">
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar.jpg">
<img src="/images/avatar/small/jenny.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<a class="author">Jenny Hess</a>
<div class="metadata">
<span class="date">Just now</span>
</div>
<div class="text">
+1 I agree with you.
Elliot you are always so right :)
</div>
<div class="actions">
<a class="reply">Reply</a>
@ -91,15 +85,15 @@ themes : ['Default', 'Chubby']
</div>
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar3.jpg">
<img src="/images/avatar/small/joe.jpg">
</a>
<div class="content">
<a class="author">Roofus</a>
<a class="author">Joe Henderson</a>
<div class="metadata">
<span class="date">5 days ago</span>
</div>
<div class="text">
I like to bark. If you like to bark visit <a href="http://www.bark.com"> this website</a> for great resources on barking.
Dude, this is awesome. Thanks so much
</div>
<div class="actions">
<a class="reply">Reply</a>
@ -123,16 +117,13 @@ themes : ['Default', 'Chubby']
<div class="example">
<h4 class="ui header">Avatar</h4>
<p>A comment can contain an image or avatar</p>
<div class="ui comments">
<div class="ui comments segment">
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar.jpg">
<img src="/images/avatar/small/elliot.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<div class="text">
I think this is a great idea and i am voting on it
</div>
<a class="author">Elliot Fu</a>
</div>
</div>
</div>
@ -141,13 +132,13 @@ themes : ['Default', 'Chubby']
<div class="example">
<h4 class="ui header">Metadata</h4>
<p>A comment can contain metadata about the comment, an arbitrary amount of metadata may be defined.</p>
<div class="ui comments">
<div class="ui comments segment">
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar.jpg">
<img src="/images/avatar/small/stevie.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<a class="author">Stevie Feliciano</a>
<div class="metadata">
<div class="date">2 days ago</div>
<div class="rating">
@ -156,7 +147,7 @@ themes : ['Default', 'Chubby']
</div>
</div>
<div class="text">
I think this is a great idea and i am voting on it
Hey guys, I hope this example comment is helping you read this documentation.
</div>
</div>
</div>
@ -166,25 +157,24 @@ themes : ['Default', 'Chubby']
<div class="example">
<h4 class="ui header">Actions</h4>
<p>A comment can contain an list of actions a user may perform related to this comment.</p>
<div class="ui comments">
<div class="ui comments segment">
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar.jpg">
<img src="/images/avatar/small/joe.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<div class="metadata">
<div class="date">2 days ago</div>
<div class="rating">
<i class="star icon"></i>
5 Faves
</div>
</div>
<a class="author">Tom Lukic</a>
<div class="text">
I think this is a great idea and i am voting on it
This will be great for business reports. I will definitely download this.
</div>
<div class="actions">
<a class="reply">Reply</a>
<a class="save">Save</a>
<a class="hide">Hide</a>
<a>
<i class="expand icon"></i>
Full-screen
</a>
</div>
</div>
</div>
@ -194,18 +184,21 @@ themes : ['Default', 'Chubby']
<div class="example">
<h4 class="ui header">Reply Form</h4>
<p>A comment can contain a form to reply to a comment. This may have arbitrary content.</p>
<div class="ui comments">
<div class="ui info message">
<p>If a comment form is located inside a <code> ui comment</code> it will be formatted as an nested reply form. If the comment form is included after all comments, it will be formatted as a normal reply form.</p>
</div>
<div class="ui comments segment">
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar.jpg">
<img src="/images/avatar/small/steve.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<a class="author">Steve Jobes</a>
<div class="metadata">
<div class="date">2 days ago</div>
</div>
<div class="text">
I think this is a great idea and i am voting on it
Revolutionary!
</div>
<div class="actions">
<a class="reply active">Reply</a>
@ -214,7 +207,7 @@ themes : ['Default', 'Chubby']
<div class="field">
<textarea></textarea>
</div>
<div class="ui button teal submit labeled icon">
<div class="ui primary submit labeled icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
@ -223,19 +216,19 @@ themes : ['Default', 'Chubby']
</div>
</div>
<div class="another example">
<p>A comment reply form can also exist below a comment feed to reply specifically to the original content.
<div class="ui comments">
<div class="ui comments segment">
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar.jpg">
<img src="/images/avatar/small/joe.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<a class="author">Joe Henderson</a>
<div class="metadata">
<div class="date">2 days ago</div>
<div class="date">1 day ago</div>
</div>
<div class="text">
I think this is a great idea and i am voting on it
<p>The hours, minutes and seconds stand as visible reminders that your effort put them all there. </p>
<p>Preserve until your next run, when the watch lets you see how Impermanent your efforts are.</p>
</div>
<div class="actions">
<a class="reply">Reply</a>
@ -244,15 +237,15 @@ themes : ['Default', 'Chubby']
</div>
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar2.jpg">
<img src="/images/avatar/small/christian.jpg">
</a>
<div class="content">
<a class="author">Pawfin Dog</a>
<a class="author">Christian Rocha</a>
<div class="metadata">
<div class="date">1 day ago</div>
<div class="date">2 days ago</div>
</div>
<div class="text">
I think this is a great idea and i am voting on it
I re-tweeted this.
</div>
<div class="actions">
<a class="reply">Reply</a>
@ -263,7 +256,7 @@ themes : ['Default', 'Chubby']
<div class="field">
<textarea></textarea>
</div>
<div class="ui button teal submit labeled icon">
<div class="ui primary submit labeled icon button">
<i class="icon edit"></i> Add Comment
</div>
</form>
@ -275,18 +268,18 @@ themes : ['Default', 'Chubby']
<div class="example">
<h4 class="ui header">Collapsed</h4>
<p>Comments can be collapsed, or hidden from view</p>
<div class="ui comments">
<div class="ui comments segment">
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar.jpg">
<img src="/images/avatar/small/christian.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<a class="author">Christian Rocha</a>
<div class="metadata">
<span class="date">2 days ago</span>
</div>
<div class="text">
I think this is a great idea and i am voting on it
I'm very interested in this motherboard. Do you know if it'd work in a Intel LGA775 CPU socket?
</div>
<div class="actions">
<a class="reply">Reply</a>
@ -340,88 +333,53 @@ themes : ['Default', 'Chubby']
<div class="example">
<h4 class="ui header">Threaded</h4>
<p>A comment list can be threaded to showing the relationship between conversations</p>
<div class="ui threaded comments">
<div class="ui threaded comments segment">
<h3 class="ui dividing header">Comments</h3>
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar.jpg">
<img src="/images/avatar/small/matt.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<a class="author">Matt</a>
<div class="metadata">
<span class="date">2 days ago</span>
<span class="date">Today at 5:42PM</span>
</div>
<div class="text">
I think this is a great idea and i am voting on it
How artistic!
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
<div class="comments">
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar2.jpg">
</a>
<div class="content">
<a class="author">Pawfin Dog</a>
<div class="metadata">
<span class="date">1 day ago</span>
</div>
<div class="text">
I think this is a great idea and i am voting on it
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
<div class="comments">
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<div class="metadata">
<span class="date">20 minutes ago</span>
</div>
<div class="text">
I think this is a great idea and i am voting on it
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<div class="metadata">
<span class="date">20 minutes ago</span>
</div>
<div class="text">
Also pizza.
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="/images/avatar/small/elliot.jpg">
</a>
<div class="content">
<a class="author">Elliot Fu</a>
<div class="metadata">
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
<p>This has been very useful for my research. Thanks as well!</p>
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
<div class="comments">
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar.jpg">
<img src="/images/avatar/small/jenny.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<a class="author">Jenny Hess</a>
<div class="metadata">
<span class="date">2 days ago</span>
<span class="date">Just now</span>
</div>
<div class="text">
I think this is a great idea and i am voting on it
Elliot you are always so right :)
</div>
<div class="actions">
<a class="reply">Reply</a>
@ -432,57 +390,65 @@ themes : ['Default', 'Chubby']
</div>
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar.jpg">
<img src="/images/avatar/small/joe.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<a class="author">Joe Henderson</a>
<div class="metadata">
<span class="date">20 hours ago</span>
<span class="date">5 days ago</span>
</div>
<div class="text">
I think this is a great idea and i am voting on it
Dude, this is awesome. Thanks so much
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
<form class="ui reply form">
<div class="field">
<textarea></textarea>
</div>
<div class="ui blue labeled submit icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div>
</div>
<div class="example">
<h4 class="ui header">Minimal</h4>
<p>Comments can hide extra information unless a user shows intent to interact with a comment.</p>
<div class="ui minimal comments segment">
<h3 class="ui dividing header">Comments</h3>
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar2.jpg">
<img src="/images/avatar/small/matt.jpg">
</a>
<div class="content">
<a class="author">Pawfin Dog</a>
<a class="author">Matt</a>
<div class="metadata">
<span class="date">15 hours ago</span>
<span class="date">Today at 5:42PM</span>
</div>
<div class="text">
I think this is a great idea and i am voting on it
How artistic!
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Minimal</h4>
<p>Comments can hide extra information unless a user shows intent to interact with a comment.</p>
<div class="ui minimal comments">
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar.jpg">
<img src="/images/avatar/small/elliot.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<a class="author">Elliot Fu</a>
<div class="metadata">
<span class="date">2 days ago</span>
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
I think this is a great idea and i am voting on it
<p>This has been very useful for my research. Thanks as well!</p>
</div>
<div class="actions">
<a class="reply">Reply</a>
@ -491,68 +457,15 @@ themes : ['Default', 'Chubby']
<div class="comments">
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar2.jpg">
</a>
<div class="content">
<a class="author">Pawfin Dog</a>
<div class="metadata">
<span class="date">1 day ago</span>
</div>
<div class="text">
I think this is a great idea and i am voting on it
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
<div class="comments">
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<div class="metadata">
<span class="date">20 minutes ago</span>
</div>
<div class="text">
I think this is a great idea and i am voting on it
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<div class="metadata">
<span class="date">20 minutes ago</span>
</div>
<div class="text">
Also pizza.
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar.jpg">
<img src="/images/avatar/small/jenny.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<a class="author">Jenny Hess</a>
<div class="metadata">
<span class="date">2 days ago</span>
<span class="date">Just now</span>
</div>
<div class="text">
I think this is a great idea and i am voting on it
Elliot you are always so right :)
</div>
<div class="actions">
<a class="reply">Reply</a>
@ -563,38 +476,29 @@ themes : ['Default', 'Chubby']
</div>
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar.jpg">
<img src="/images/avatar/small/joe.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<a class="author">Joe Henderson</a>
<div class="metadata">
<span class="date">20 hours ago</span>
<span class="date">5 days ago</span>
</div>
<div class="text">
I think this is a great idea and i am voting on it
Dude, this is awesome. Thanks so much
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="/images/demo/avatar2.jpg">
</a>
<div class="content">
<a class="author">Pawfin Dog</a>
<div class="metadata">
<span class="date">15 hours ago</span>
</div>
<div class="text">
I think this is a great idea and i am voting on it
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
<form class="ui reply form">
<div class="field">
<textarea></textarea>
</div>
</div>
<div class="ui blue labeled submit icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div>
</div>

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

@ -145,15 +145,15 @@ semantic.ready = function() {
url : variableURL,
dataType : 'text',
urlData : urlData,
success: function(content) {
less.modifyVars( handler.less.parseFile(content) );
onSuccess: function(content) {
window.less.modifyVars( handler.less.parseFile(content) );
$themeDropdown
.api({
on : 'now',
url : overrideURL,
dataType : 'text',
urlData : urlData,
success: function(content) {
onSuccess: function(content) {
if( $('style.override').size() > 0 ) {
$('style.override').remove();
}
@ -710,8 +710,22 @@ 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')
.visibility({
context: '.pusher > .page',
once: false
})
.visibility('bottom visible', function(){
@ -826,17 +840,6 @@ 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
.waypoint({
continuous : false,

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

@ -9,10 +9,6 @@ semantic.sidebar.ready = function() {
handler
;
$('.ui.sidebar')
.sidebar()
;
$('.variation .button')
.on('click', function() {
$(this)

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

@ -155,6 +155,12 @@ a:hover {
-moz-border-radius: 0px;
border-radius: 0px;
}
#example .menu .inverted.header {
color: rgba(255, 255, 255, 0.8);
}
#example .menu a.inverted.header:hover {
color: rgba(255, 255, 255, 1);
}
#example #menu .hide.item {
display: none;
}
@ -1118,6 +1124,10 @@ body.guide .main.container > * {
#example .highlighted.example {
min-height: 275px;
}
#example .element.cards .image {
overflow: hidden;
min-height: 100px;
}
#example .collection.cards {
min-height: 350px;
}

23
src/definitions/behaviors/visibility.js
View File

@ -37,10 +37,10 @@ $.fn.visibility = function(parameters) {
eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
$module = $(this),
$window = $(window),
$module = $(this),
$context = $(settings.context),
$container = $module.offsetParent(),
$context,
selector = $module.selector || '',
instance = $module.data(moduleNamespace),
@ -85,6 +85,9 @@ $.fn.visibility = function(parameters) {
$window
.off(eventNamespace)
;
$context
.off(eventNamespace)
;
$module
.off(eventNamespace)
.removeData(moduleNamespace)
@ -94,8 +97,10 @@ $.fn.visibility = function(parameters) {
bindEvents: function() {
module.verbose('Binding visibility events to scroll and resize');
$window
.on('resize', module.event.refresh)
.on('scroll', module.event.scroll)
.on('resize' + eventNamespace, module.event.refresh)
;
$context
.on('scroll' + eventNamespace, module.event.scroll)
;
},
@ -378,7 +383,7 @@ $.fn.visibility = function(parameters) {
}
},
scroll: function() {
module.cache.scroll = $window.scrollTop() + settings.offset;
module.cache.scroll = $context.scrollTop() + settings.offset;
},
direction: function() {
var
@ -456,10 +461,10 @@ $.fn.visibility = function(parameters) {
},
screenCalculations: function() {
var
scroll = $window.scrollTop()
scroll = $context.scrollTop()
;
if(module.cache.scroll === undefined) {
module.cache.scroll = $window.scrollTop();
module.cache.scroll = $context.scrollTop();
}
module.save.direction();
$.extend(module.cache.screen, {
@ -471,7 +476,7 @@ $.fn.visibility = function(parameters) {
screenSize: function() {
module.verbose('Saving window position');
module.cache.screen = {
height: $window.height()
height: $context.height()
};
},
position: function() {
@ -728,6 +733,8 @@ $.fn.visibility.settings = {
offset : 0,
includeMargin : false,
context : window,
// visibility check delay in ms
throttle : false,

13
src/definitions/elements/button.less
View File

@ -182,6 +182,9 @@
padding-right: 0em;
}
.ui.animated.button .content {
will-change: transform, opacity;
}
.ui.animated.button .visible.content {
position: relative;
margin-right: @horizontalPadding;
@ -1740,12 +1743,22 @@
border-left: none;
}
.ui.buttons:not(.basic):not(.inverted) {
box-shadow: @groupBoxShadow;
}
.ui.buttons > .ui.button:not(.basic):not(.inverted),
.ui.buttons:not(.basic):not(.inverted) > .button {
box-shadow: @groupButtonBoxShadow;
}
.ui.buttons .button {
margin: 0em;
float: left;
border-radius: 0em;
margin: @groupButtonOffset;
}
.ui.buttons .button:first-child {
margin-left: 0em;
border-top-left-radius: @borderRadius;

2
src/definitions/modules/dimmer.less
View File

@ -48,7 +48,7 @@
transition: @transition;
user-select: none;
will-transform: opacity;
z-index: @zIndex;
}

1
src/definitions/modules/dropdown.less
View File

@ -60,6 +60,7 @@
border-radius: @menuBorderRadius;
transition: @menuTransition;
z-index: @menuZIndex;
will-change: transform, opacity;
}
/*--------------

5
src/definitions/modules/modal.less
View File

@ -40,6 +40,7 @@
border-radius: @borderRadius;
user-select: text;
will-change: top, left, margin, transform, opacity;
}
.ui.modal > :first-child:not(.icon),
@ -282,9 +283,7 @@
.ui.fullscreen.modal {
width: @fullScreenWidth !important;
margin: @fullScreenMargin !important;
top: auto;
left: auto;
margin: @fullScreenMargin;
}
.ui.fullscreen.modal > .close {
top: @innerCloseTop;

39
src/definitions/modules/sidebar.js
View File

@ -260,12 +260,10 @@ $.fn.sidebar = function(parameters) {
module.set.direction();
module.set.animation();
module.set.inward();
requestAnimationFrame(function() {
module.set.visible();
requestAnimationFrame(function() {
module.set.pushed();
});
});
requestAnimationFrame(function() {
module.set.visible();
module.set.pushed();
});
$pusher
.off(transitionEnd)
.on(transitionEnd, function(event) {
@ -536,9 +534,6 @@ $.fn.sidebar = function(parameters) {
if(moduleSelector) {
title += ' \'' + moduleSelector + '\'';
}
if($allModules.size() > 1) {
title += ' ' + '(' + $allModules.size() + ')';
}
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title);
if(console.table) {
@ -586,6 +581,7 @@ $.fn.sidebar = function(parameters) {
return false;
}
else {
module.error(error.method, query);
return false;
}
});
@ -607,21 +603,22 @@ $.fn.sidebar = function(parameters) {
}
return found;
}
};
if(methodInvoked) {
if(instance === undefined) {
module.initialize();
}
module.invoke(query);
}
else {
if(instance !== undefined) {
module.destroy();
}
;
if(methodInvoked) {
if(instance === undefined) {
module.initialize();
}
})
;
module.invoke(query);
}
else {
if(instance !== undefined) {
module.destroy();
}
module.initialize();
}
});
return (returnedValue !== undefined)
? returnedValue

2
src/definitions/modules/sidebar.less
View File

@ -85,7 +85,7 @@
---------------*/
.pushable > .pusher > .page:after {
position: absolute;
position: fixed;
top: 0px;
right: 0px;
content: '';

1
src/definitions/modules/transition.less
View File

@ -34,6 +34,7 @@
animation-duration: @transitionDefaultDuration;
animation-timing-function: @transitionDefaultEasing;
animation-fill-mode: @transitionDefaultFill;
will-change: opacity, transform;
}
/*******************************

4
src/definitions/views/comment.less
View File

@ -214,8 +214,8 @@
---------------------*/
.ui.threaded.comments .comment .comments {
margin: @threadedCommentVerticalOffset 0em 0em @threadedCommentHorizontalOffset;
padding: @threadedCommentVerticalDistance 0em 0em @threadedCommentHorizontalDistance;
margin: @threadedCommentMargin;
padding: @threadedCommentPadding;
box-shadow: @threadedCommentBoxShadow;
}

2
src/themes/packages/chubby/views/comment.variables
View File

@ -43,4 +43,4 @@
--------------------*/
/* Threaded */
@threadedCommentHorizontalOffset: (@avatarWidth / 2);
@threadedCommentMargin: -1.5em 0 -1em (@avatarWidth / 2);

10
src/themes/packages/default/elements/button.variables
View File

@ -19,12 +19,13 @@
/* Shadow */
@shadowDistance: 0em;
@shadowOffset: (@shadowDistance / 2);
@shadowBoxShadow: 0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset;
@shadowBoxShadow: 0px -@shadowDistance 0px 0px @borderColor inset;
@backgroundColor: #FAFAFA;
@backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.09));
@boxShadow:
0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
@subtleShadow,
0px 0px 0px 1px @borderColor inset,
@shadowBoxShadow
;
@ -58,6 +59,11 @@
Group
--------------------*/
@groupBoxShadow: @subtleShadow;
@groupButtonBoxShadow:
0px 0px 0px 1px @borderColor inset,
@shadowBoxShadow
;
@verticalBoxShadow: 0px 0px 0px 1px @borderColor inset;
@groupButtonOffset: 0px 0px 0px -1px;
@verticalGroupOffset: 0px 0px -1px 0px;

2
src/themes/packages/default/globals/site.variables
View File

@ -75,7 +75,7 @@
@subtleGradient: linear-gradient(transparent, rgba(0, 0, 0, 0.05));
/* Used for differentiating layers */
@subtleShadow: 0px 2px 1px 0 rgba(0, 0, 0, 0.05);
@subtleShadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
/*-------------------

2
src/themes/packages/default/modules/modal.variables
View File

@ -78,7 +78,7 @@
@widescreenMonitorMargin: 0em 0em 0em -(@widescreenMonitorWidth / 2);
@fullScreenWidth: 95%;
@fullScreenMargin: @scrollingMargin ((100% - @fullScreenWidth) / 2) @scrollingMargin;
@fullScreenMargin: @scrollingMargin 0em @scrollingMargin -(@fullScreenWidth / 2);
/*-------------------

2
src/themes/packages/default/views/card.variables
View File

@ -58,7 +58,7 @@
/* Header */
@headerMargin: 0em;
@headerFontWeight: bold;
@headerFontSize: 1.25em;
@headerFontSize: 1.2em;
@headerColor: @darkTextColor;
/* Metadata */

16
src/themes/packages/default/views/comment.variables
View File

@ -26,7 +26,7 @@
/* Nested Comment */
@nestedCommentsMargin: 0em 0em 0.5em 0.5em;
@nestedCommentsPadding: 1em 0em 0em 1em;
@nestedCommentsPadding: 1em 0em 1em 1em;
@nestedCommentDivider: none;
@nestedCommentBorder: none;
@ -52,7 +52,7 @@
/* Metadata */
@metadataDisplay: inline-block;
@metadataFontSize: 0.9em;
@metadataFontSize: 0.875em;
@metadataSpacing: 0.5em;
@metadataContentSpacing: 0.5em;
@metadataColor: @lightTextColor;
@ -64,8 +64,8 @@
@textLineHeight: 1.3;
/* Actions */
@actionFontSize: 0.9em;
@actionContentDistance: 0.3em;
@actionFontSize: 0.875em;
@actionContentDistance: 0.75em;
@actionLinkColor: @unselectedTextColor;
@actionLinkHoverColor: @selectedTextColor;
@ -81,12 +81,10 @@
--------------------*/
/* Threaded */
@threadedCommentVerticalOffset: -1.5em;
@threadedCommentHorizontalOffset: (@avatarWidth / 2);
@threadedCommentBoxShadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
@threadedCommentMargin: -1.5em 0 -1em (@avatarWidth / 2);
@threadedCommentPadding: 3em 0em 2em 2.25em;
@threadedCommentBoxShadow: -1px 0px 0px @borderColor;
@threadedCommentVerticalDistance: 2em;
@threadedCommentHorizontalDistance: 2em;
/* Minimal */
@minimalActionPosition: absolute;

Write Preview
Loading…
Cancel
Save