adds kitchen sink start, adds google doc calendar into kitchen sink

Former-commit-id: 25df98101c Former-commit-id: dd42aefdc9
11 years ago · 17b4a699e2
8 changed files with 336 additions and 11 deletions
--- a/docs/javascript/semantic.js
+++ b/docs/javascript/semantic.js
@ -11,6 +11,7 @@ semantic.ready = function() {
    $ui          = $('.ui').not('.hover, .down'),
    $swap        = $('.theme.menu .item'),
    $menu        = $('.sidebar.button'),
+    $sortTable   = $('.sortable.table'),
    $demo        = $('.demo'),
    $waypoints   = $('h2'),

@ -160,6 +161,11 @@ semantic.ready = function() {
  $ui
    .state()
  ;
+  if($.fn.tablesort !== undefined) {
+    $sortTable
+      .tablesort()
+    ;
+  }

  $waypoints
    .waypoint({
--- a/docs/module.html
+++ b/docs/module.html
@ -84,7 +84,7 @@
        1 <span class="of">of</span> 5
        <div class="menu">
          <div class="active item">1. Introduction</div>
-          <div class="item">2. Download</div>
+          <a href="sink.html" class="item">2. Kitchen Sink</a>
          <div class="item">3. UI Library</div>
          <div class="item">4. UI Modules</div>
          <div class="item">5. Behavioral Modules</div>
@ -109,11 +109,13 @@
 </div>
 <div class="main container">
    
-  <div class="ui large vertical pointing panel peek">
-    <li class="active">What is Semantic?</li>
-    <li>The UI Spec</li>
-    <li>The Module Spec</li>
-    <li>The Semantic Library</li>
+  <div class="peek">
+    <div class="ui vertical pointing link menu">
+      <div class="active item">What is Semantic?</div>
+      <div class="item">The UI Spec</div>
+      <div class="item">The Module Spec</div>
+      <div class="item">The Semantic Library</div>
+    </div>
  </div>
  <h2>What is Semantic?</h2>
  
--- a/docs/sink.html
+++ b/docs/sink.html
@ -0,0 +1,302 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <title>UI Text Block - Semantic</title>
+
+  <link rel="stylesheet" class="ui" href="../src/ui/flat/panel.css" type="text/css" media="screen" />
+  <link rel="stylesheet" class="ui" href="../src/ui/flat/button.css" type="text/css" media="screen" />
+  <link rel="stylesheet" class="ui" href="../src/ui/flat/text.css" type="text/css" media="screen" />
+  <link rel="stylesheet" class="ui" href="../src/ui/flat/form.css" type="text/css" media="screen" />
+  <link rel="stylesheet" class="ui" href="../src/ui/flat/checkbox.css" type="text/css" media="screen" />
+  <link rel="stylesheet" class="ui" href="../src/ui/flat/grid.css" type="text/css" media="screen" />
+  <link rel="stylesheet" class="ui" href="../src/ui/flat/table.css" type="text/css" media="screen" />
+  <link rel="stylesheet" class="ui" href="../src/ui/flat/label.css" type="text/css" media="screen" />
+  <link rel="stylesheet" class="ui" href="../src/ui/flat/divider.css" type="text/css" media="screen" />
+  <link rel="stylesheet" class="ui" href="../src/ui/flat/block.css" type="text/css" media="screen" />
+  <link rel="stylesheet" class="ui" href="../src/ui/flat/segment.css" type="text/css" media="screen" />
+  <link rel="stylesheet" class="ui" href="../src/ui/flat/icons.css" type="text/css" media="screen" />
+  <link rel="stylesheet" class="ui" href="../src/ui/flat/menu.css" type="text/css" media="screen" />
+  
+  <link rel="stylesheet" href="../src/modules/ui/shape.css" type="text/css" media="screen" />
+  
+  <link rel="stylesheet" href="library/sidr.css" type="text/css" media="screen" />
+  <link rel="stylesheet" href="stylesheets/example.css" type="text/css" media="screen" />
+
+  <script src="library/jquery.js" type="text/javascript"></script>
+  <script src="library/ace/ace.js" type="text/javascript"></script>
+  <script src="library/sidr.js" type="text/javascript"></script>
+  <script src="library/tablesort.js" type="text/javascript"></script>
+  <script src="library/waypoints.js" type="text/javascript"></script>
+  <script src="javascript/semantic.js" type="text/javascript"></script>
+
+  <script src="../src/modules/ui/shape.js" type="text/javascript"></script>
+  <script src="../src/modules/behavior/state.js" type="text/javascript"></script>
+
+</head>
+
+<body id="example">
+
+<div class="ui large vertical menu" id="menu">
+  <div class="menu">
+    <div class="item"><a href="module.html"><b>Introduction</b></a></div>
+    <div class="item"><a href="download"><b>Download</b></a></div>
+    <div class="item">
+      <a><b>UI Collections</b></a>
+      <div class="menu">
+        <div class="item"><a href="form.html">Forms</a></div>
+        <div class="active item"><a href="menu.html">Menu</a></div>
+        <div class="item"><a href="element.html">Grid</a></div>
+        <div class="item"><a href="table.html">Table</a></div>
+        <div class="item"><a href="item.html">Items</a></div>
+      </div>
+    </div>
+    <div class="item">
+      <a><b>UI Elements</b></a>
+      <div class="menu">
+        <div class="item"><a href="steps.html">Steps</a></div>
+        <div class="item"><a href="button.html">Button</a></div>
+        <div class="item"><a href="table.html">Table</a></div>
+        <div class="item"><a href="progress.html">Progress</a></div>
+        <div class="item"><a href="text.html">Text Block</a></div>
+        <div class="item"><a href="header.html">Headers</a></div>
+        <div class="item"><a href="header.html">Segment</a></div>
+        <div class="item"><a href="column.html">Columns</a></div>
+        <div class="item"><a href="element.html">Elements (Grid System)</a></div>
+        <div class="active item"><a href="text.html">Text Block</a></div>
+        <div class="item"><a href="item.html">Items (Lists of Content)</a></div>
+        <div class="item"><a href="panel.html">Panels (Type of Menu)</a></div>
+        <div class="item"><a href="icon.html">Icons</a></div>
+        <div class="item"><a href="divider.html">Dividers</a></div>
+      </div>
+    </div>
+    <div class="item">
+      <a><b>UI Views</b></a>
+      <div class="menu">
+        <div class="item"><a href="form.html">Forms</a></div>
+        <div class="item"><a href="activity.html">Activity Feed</a></div>
+        <div class="item"><a href="list.html">Content List</a></div>
+        <div class="item"><a href="user-list.html">User List</a></div>
+      </div>
+    </div>
+    <div class="item">
+      <a><b>UI Modules</b></a>
+      <div class="menu">
+        <div class="item"><a href="accordion.html">Accordion</a></div>
+        <div class="item"><a href="chatroom.html">Chat Room</a></div>
+        <div class="item"><a href="modal.html">Modal</a></div>
+        <div class="item"><a href="nag.html">Nag</a></div>
+        <div class="item"><a href="popup.html">Popup</a></div>
+        <div class="item"><a href="search.html">Search</a></div>
+        <div class="item"><a href="star.html">Star Rating</a></div>
+        <div class="item"><a href="tab.html">Tabs</a></div>
+      </div>
+    </div>
+    <div class="item">
+      <a><b>Behavioral Modules</b></a>
+      <div class="menu">
+        <div class="item"><a href="api.html">API</a></div>
+        <div class="item"><a href="animation.html">Animation</a></div>
+        <div class="item"><a href="validate.html">Form Validation</a></div>
+        <div class="item"><a href="placeholder.html">Placeholder Text</a></div>
+        <div class="item"><a href="shape.html">Shape</a></div>
+        <div class="item"><a href="state.html">State</a></div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="ui fixed transparent black menu">
+  <div class="container">
+    <div class="title item">
+      Semantic UI: Kitchen Sink
+    </div>
+    <div class="icon previous link item">
+      <a href="label.html"><i class="icon left-open"></i></a>
+    </div>
+    <div class="section dropdown item">
+      3 of 4
+      <div class="menu">
+        <a href="button.html" class="item">1. Button</a>
+        <a href="form.html" class="item">2. Form</a>
+        <a href="table.html" class="item">3. Table</a>
+        <a href="menu.html" class="item">4. Menu</a>
+        <a href="label.html" class="item">5. Labels</a>
+        <a href="text.html" class="active item">6. Text Block</a>
+      </div>
+    </div>
+    <div class="icon next link item">
+      <i class="icon right-open"></i>
+    </div>
+    <div class="right menu">
+      <a class="item" href="https://github.com/quirkyinc/semantic">
+        <i class="icon cloud"></i>
+      </a>
+      <a class="item" href="https://github.com/quirkyinc/semantic">
+        <i class="icon github"></i>
+      </a>
+      <div class="dropdown item">
+        <i class="icon tint"></i> Theme
+        <div class="theme menu">
+          <div class="item" data-theme="flat">Flat</div>
+          <div class="item" data-theme="shaded">Shaded</div>
+          <div class="item" data-theme="classic">Classic</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="ui huge left attached vertical side buttons">
+  <div class="ui large blue sidebar button">Menu</div>
+</div>
+<div class="segment">
+  <div class="container">
+    <h1>Kitchen Sink</h1>
+    <p>The kitchen sink uses many of the UI elements described in the library to provide examples for how content pieces can be used together.</p>
+  </div>
+</div>
+<div class="main container">
+  
+  <div class="ui icon info block">
+    <i class="icon heart"></i>
+    <div class="content">
+      <div class="header">
+        Welcome to the kitchen sink!
+      </div>
+      <p>This is a work in progress view, these elements may change.</p>
+    </div>
+  </div>
+  
+  <div class="ui divider simple"></div>
+  
+  <div class="ui black top attached menu">
+    <div class="header item">
+      <b>Heads Up</b>
+    </div>
+    <div class="item">
+      <div class="badge">8</div>
+      Days of work
+    </div>
+  </div>
+  <div class="ui bottom attached segment">
+  <div class="ui block">
+    <div class="header">UI Elements</div>
+    <p>These are UI elements that exist outside of collections</p>
+  </div>
+  <table class="ui sortable grid table">
+    <thead>
+      <th>Name</th>
+      <th>Estimated</th>
+      <th>Spent</th>
+      <th>Status</th>
+      <th>Notes</th>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Button</td>
+        <td>1</td>
+        <td>1</td>
+        <td class="positive">Complete</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Text Block</td>
+        <td>0.5 days</td>
+        <td>0.5</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Header</td>
+        <td>0.5</td>
+        <td>0</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Grid</td>
+        <td>1</td>
+        <td>0</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Divider</td>
+        <td>0.25</td>
+        <td>0</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Tags</td>
+        <td>0.25</td>
+        <td>0.25</td>
+        <td class="positive">Complete</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Labels</td>
+        <td>0.5</td>
+        <td>0</td>
+        <td class="positive">Complete</td>
+        <td>
+          Changes:<br>
+          - Consolidated into tags 
+        </td>
+      </tr>
+      <tr>
+        <td>Icons</td>
+        <td>1</td>
+        <td>0</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Menu</td>
+        <td>3</td>
+        <td>1</td>
+        <td class="positive">Complete</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Throbber</td>
+        <td>1</td>
+        <td>0</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Video</td>
+        <td>0.5</td>
+        <td>0</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Steps</td>
+        <td>0.5</td>
+        <td>0</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Segment</td>
+        <td>0.5</td>
+        <td>0.25</td>
+        <td class="warning">In Progress</td>
+        <td></td>
+      </tr>
+      <tr class="negative">
+        <td>Table</td>
+        <td>0.5</td>
+        <td>1</td>
+        <td class="negative">Complete</td>
+        <td></td>
+      </tr>
+      <tfoot>
+        <th>14 Elements</th>
+        <th>10.5 days</th>
+        <th>4 days</th>
+        <th></th>
+        <th>Updated: Mon 29th</th>
+      </tfoot>
+    </tbody>
+  </table>
+  </div>
+  
+  
+</div>
+</body>
+
+</html>
--- a/docs/text.html
+++ b/docs/text.html
@ -244,6 +244,13 @@
    </div>
  </div>
  
+  <div class="example">
+    <h4>Compact Block</h4>
+    <p>A text block that only takes up the width of its content.</p>
+    <div class="ui compact block">
+      <p>Get all the best inventions in your e-mail every day. Sign up now</p>
+    </div>
+  </div>
  
  <div class="example">
    <h4>Attached Block</h4>
--- a/src/ui/flat/block.css
+++ b/src/ui/flat/block.css
@ -127,6 +127,15 @@
            Variations
 *******************************/

+/*--------------
+    Compact
+---------------*/
+
+.ui.compact.block {
+  display: inline-block;
+}
+
+
 /*--------------
    Attached
 ---------------*/
--- a/src/ui/flat/segment.css
+++ b/src/ui/flat/segment.css
@ -20,6 +20,9 @@
 }

 /* Label at the top of a segment */
+.ui.segment div:first-child {
+  margin-top: 0px;
+}
 .ui.segment .attached.label:first-child + * {
  margin-top: 2em;
 }
--- a/src/ui/flat/table.css
+++ b/src/ui/flat/table.css
@ -158,7 +158,6 @@
 .ui.table th.error {
  background-color: #F8EBEB;
  color: #AD0000;
-  font-weight: bold;
  /* border-color: #B06C6C !important; */
 }
 .ui.grid.table tr.error:hover td,
@ -179,7 +178,6 @@
 .ui.table th.warning {
  background-color: #F6F3D5;
  /* border-color: #CBB105 !important; */
-  font-weight: bold;
  color: #7D6C00;
 }
 .ui.grid.table tr.warning:hover td,
--- a/src/ui/shaded/table.css
+++ b/src/ui/shaded/table.css
@ -166,7 +166,6 @@
 .ui.table th.error {
  background-color: #F8EBEB;
  color: #AD0000;
-  font-weight: bold;
  /* border-color: #B06C6C !important; */
 }
 .ui.grid.table tr.error:hover td,
@ -187,7 +186,6 @@
 .ui.table th.warning {
  background-color: #F6F3D5;
  /* border-color: #CBB105 !important; */
-  font-weight: bold;
  color: #7D6C00;
 }
 .ui.grid.table tr.warning:hover td,
@ -213,7 +211,7 @@
 }

 /*******************************
-             Variations
+           Variations
 *******************************/

 /*--------------