Updates to documentation #1036

server/documents/elements/icon.html.eco

@@ -51,6 +51,7 @@ referencesOthers: true
         <div class="column"><i class="comment outline icon"></i>Comment Outline</div>
         <div class="column"><i class="comments icon"></i>Comments</div>
         <div class="column"><i class="comments outline icon"></i>Comments Outline</div>
+        <div class="column"><i class="content icon"></i>Content</div>
         <div class="column"><i class="dashboard icon"></i>Dashboard</div>
         <div class="column"><i class="external link icon"></i>External Link</div>
         <div class="column"><i class="external link square icon"></i>External Link Square</div>
@@ -77,7 +78,7 @@ referencesOthers: true
         <div class="column"><i class="tasks icon"></i>Tasks</div>
         <div class="column"><i class="terminal icon"></i>Terminal</div>
         <div class="column"><i class="ticket icon"></i>Ticket</div>
-        <div class="column"><i class="top icon"></i>Top</div>
+        <div class="column"><i class="trophy icon"></i>Trophy</div>
         <div class="column"><i class="wifi icon"></i>Wifi</div>
       </div>
       <div class="existing code">
@@ -168,7 +169,7 @@ referencesOthers: true
       <div class="column"><i class="share square icon"></i>Share Square</div>
       <div class="column"><i class="sign in icon"></i>Sign in</div>
       <div class="column"><i class="sign out icon"></i>Sign out</div>
-      <div class="column"><i class="tint icon"></i>Tint</div>
+      <div class="column"><i class="theme icon"></i>Theme</div>
       <div class="column"><i class="translate icon"></i>Translate</div>
       <div class="column"><i class="undo icon"></i>Undo</div>
       <div class="column"><i class="unhide icon"></i>Unhide</div>
@@ -830,7 +831,6 @@ referencesOthers: true
         <div class="column"><i class="align right icon"></i>Align Right</div>
         <div class="column"><i class="attach icon"></i>Attach</div>
         <div class="column"><i class="bold icon"></i>Bold</div>
-        <div class="column"><i class="content icon"></i>Content</div>
         <div class="column"><i class="copy icon"></i>Copy</div>
         <div class="column"><i class="cut icon"></i>Cut</div>
         <div class="column"><i class="font icon"></i>Font</div>

server/documents/hotfix.html.eco

@@ -23,8 +23,8 @@ $(document).ready(function() {
 <!-- TEST CSS HERE !-->
 <style type="text/css">
 .wide.popup {
-    max-width: 500px;
-    padding: 0em;
+  max-width: 500px;
+  padding: 0em;
 }
 </style>
 
@@ -47,6 +47,9 @@ $(document).ready(function() {
             <a class="item">2</a>
             <a class="item">3</a>
             <a class="item">4</a>
+            <a class="item">5</a>
+            <a class="item">6</a>
+            <a class="item">7</a>
         </div>
       </div>
       <div class="column">
@@ -55,6 +58,9 @@ $(document).ready(function() {
             <a class="item">2</a>
             <a class="item">3</a>
             <a class="item">4</a>
+            <a class="item">5</a>
+            <a class="item">6</a>
+            <a class="item">7</a>
         </div>
       </div>
       <div class="column">
@@ -63,6 +69,9 @@ $(document).ready(function() {
             <a class="item">2</a>
             <a class="item">3</a>
             <a class="item">4</a>
+            <a class="item">5</a>
+            <a class="item">6</a>
+            <a class="item">7</a>
         </div>
       </div>
       <div class="column">
@@ -71,6 +80,9 @@ $(document).ready(function() {
             <a class="item">2</a>
             <a class="item">3</a>
             <a class="item">4</a>
+            <a class="item">5</a>
+            <a class="item">6</a>
+            <a class="item">7</a>
         </div>
       </div>
     </div>

server/documents/index.html.eco

@@ -16,25 +16,25 @@ type   : 'Semantic'
     <div class="column">
       <div class="introduction">
         <h1 class="ui inverted header">Semantic UI
-          <a class="ui black label" href="https://github.com/semantic-org/Semantic-UI/blob/css/RELEASE%20NOTES.md">
-            1.0.0 ALPHA
+          <a class="ui tag label" href="https://github.com/semantic-org/Semantic-UI/blob/css/RELEASE%20NOTES.md">
+            1.0.0
           </a>
         </h1>
         <h2 class="ui inverted header">UI is the vocabulary of the web.</h2>
         <div class="ui huge inverted buttons">
-          <a class="ui basic pink inverted view-ui button"><i class="list layout icon"></i>UI Library</a>
-          <a class="ui disabled basic red inverted button" data-title="Coming Soon">
-            <i class="tint icon"></i>
+          <a class="ui basic pink inverted view-ui button"><i class="cube icon"></i>UI Library</a>
+          <a class="ui basic red inverted button" data-title="Coming Soon">
+            <i class="theme icon"></i>
             Themes
           </a>
-          <a class="ui disabled basic green inverted button" data-title="Coming Soon">
-            <i class="browser icon"></i>
+          <a class="ui basic green inverted button" data-title="Coming Soon">
+            <i class="cubes icon"></i>
             Layouts
           </a>
         </div>
         <div class="ui hidden divider"></div>
         <a class="ui huge basic inverted teal button" href="build/semantic.zip">
-          <i class="awesome download cloud icon"></i> Customize &amp; Download
+          <i class="download icon"></i> Customize &amp; Download
         </a>
       </div>
       <!--div class="inverted advertisement">

server/documents/modules/popup.html.eco

@@ -175,6 +175,29 @@ themes      : ['Default']
 
   <div class="ui tab" data-tab="examples">
 
+    <div class="example">
+      <h3 class="ui header">Using Your Own Popup</h3>
+      <p>When using an inline popup</p>
+      <div class="evaluated code">
+    $('.example .teal.button')
+      .popup({
+        on: 'click'
+      })
+    ;
+    $('.example input')
+      .popup({
+        on: 'focus'
+      })
+    ;
+      </div>
+      <div class="ui teal button" data-title="Using click events" data-content="Clicked popups will close if you click away, but not if you click inside the popup">Click Me</div>
+      <div class="ui icon input">
+        <input type="text" placeholder="Focus me..." data-content="You can use me to enter data">
+        <i class="search icon"></i>
+      </div>
+    </div>
+
+
     <div class="example">
       <h3 class="ui header">Specifying a trigger event</h3>
       <p>A popup trigger event can be specified</p>
@@ -210,7 +233,7 @@ themes      : ['Default']
       })
     ;
       </div>
-      <div class="ui basic test button">Hover Me</div>
+      <div class="ui green test button">Hover Me</div>
       <div class="ui divider"></div>
       <img class="medium ui test image" src="/images/demo/photo.jpg">
 

server/documents/views/list.html.eco

@@ -179,20 +179,26 @@ themes      : ['Default']
     <p>A list item can have an icon</p>
     <div class="ui list">
       <a class="item">
-        <i class="right triangle icon"></i>
-        How do you know your dog likes you?
-      </a>
-      <a class="item">
-        <i class="right triangle icon"></i>
-        When is it ok to send your dog to a farm?
+        <i class="help icon"></i>
+        An icon immediately inside an item sits inline this content will sit under the icon if there is a line break
       </a>
+    </div>
+  </div>
+  <div class="another example">
+    <div class="ui list">
       <a class="item">
-        <i class="right triangle icon"></i>
-        Can you get your dog back from a farm if you really want him back?
+        <i class="help icon"></i>
+        <div class="content">
+          <div class="header">This is a floated icon</div>
+          <div class="description">This text will always have a left margin to make sure it sits alongside your icon</div>
+        </div>
       </a>
       <a class="item">
-        <i class="right triangle icon"></i>
-        Is trespassing on a farm a misdemeanor offence?
+        <i class="top aligned right triangle icon"></i>
+        <div class="content">
+          <div class="header">Floated Icon Alignment</div>
+          <div class="description">Floated icons are, by default, middle aligned. To have an icon top aligned try this example.</div>
+        </div>
       </a>
     </div>
   </div>

server/files/javascript/semantic.js

@@ -723,6 +723,8 @@ semantic.ready = function() {
     })
     .find('.button')
       .popup({
+        position  : 'top center',
+        variation : 'inverted'
       })
   ;
 

server/files/stylesheets/semantic.css

@@ -275,6 +275,9 @@ body.guide .main.container > * {
   margin-bottom: 0px;
   border-bottom: none;
 }
+#example .masthead .ui.tag.label:after {
+  background-color: #000000 !important;
+}
 #example .masthead:before {
   position: absolute;
   z-index: 1;
@@ -398,8 +401,8 @@ body.guide .main.container > * {
 }
 #example .introduction .label {
   position: absolute;
-  top: 1em;
-  right: 0em;
+  margin-left: 2em;
+  top: 1em
 }
 
 #example .introduction .theme.buttons {

server/layouts/default.html.eco

@@ -199,7 +199,7 @@
 
   <div class="ui fixed transparent inverted main menu">
     <div class="container">
-      <a class="launch item"><i class="icon list layout"></i> Content</a>
+      <a class="launch item"><i class="content icon"></i> Content</a>
       <div class="title item">
         <b><%= @document.type %>:</b> <%= @document.title %>
       </div>
@@ -246,7 +246,7 @@
     </div>
   </div>
     <div class="ui black huge launch right attached button">
-      <i class="icon list layout"></i>
+      <i class="content icon"></i>
       <span class="text">Menu</span>
     </div>
   <%- @content %>