dacelo/asset.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   3         <head>
   4                 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5                 <title>Dacelo UI Components</title>
   6                 <link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />
   7                 <script src="javascripts/prototype.js" type="text/javascript"></script>
   8                 <script src="javascripts/yui/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>
   9                 <script src="javascripts/yui/build/element/element-beta.js" type="text/javascript"></script>
  10                 <script src="javascripts/yui/build/datasource/datasource-beta.js" type="text/javascript"></script>
  11                 <script src="javascripts/yui/build/datatable/datatable-beta.js" type="text/javascript"></script>
  12                 <script src="javascripts/yui/build/tabview/tabview.js" type="text/javascript"></script>
  13                 <script src="javascripts/application.js" type="text/javascript"></script>
  14                 <style type="text/css">
  15                   /* LARGE ASSET BADGE */
  16                   div.asset.large {
  17                     background: #DDD url(http://oculosis.com/maraby/tmp/harbor/laptop.png) no-repeat scroll 10px 10px;
  18                     width: 245px;
  19                     padding: 5px;
  20                   }
  21                   div.asset.large ul.data, div.asset.large ol.data {
  22                     margin-left: 35px;
  23                     list-style: none;
  24                   }
  25                   div.asset.large .data li {
  26                     margin: 0.5em;
  27                     text-align: right;
  28                   }
  29                   div.asset.large .data li span.label {
  30                     font-weight: bold;
  31                     color: #888;
  32                     float: left;
  33                   }
  34                   div.asset.large .data li span.primary {
  35                     font-weight: bold;
  36                     font-size: 1.5em;
  37                     line-height: 1em;
  38                   }
  39                   div.asset.large .data li span.value {
  40                     font-weight: bold;
  41                   }
  42                   div.asset.large .data li span.state:after {
  43                     content: " " url(http://oculosis.com/maraby/tmp/harbor/states/state-12-red.png);
  44                   }
  45
  46                   /* SMALL ASSET BADGE */
  47                   div.asset.small {
  48                     background: #DDD;
  49                     width: 140px;
  50                     padding: 3px;
  51                     font-size: 0.8em;
  52                   }
  53                   div.asset.small ul.data, div.asset.small ol.data {
  54                     list-style: none;
  55                     padding: 0;
  56                     margin: 0;
  57                   }
  58                   div.asset.small .data li {
  59                     margin: 0.5em;
  60                     text-align: right;
  61                   }
  62                   div.asset.small .data li span.label {
  63                     font-weight: bold;
  64                     color: #888;
  65                     float: left;
  66                   }
  67                   div.asset.small .data li span.primary {
  68                     font-weight: bold;
  69                     font-size: 1.5em;
  70                     line-height: 1em;
  71                   }
  72                   div.asset.small .data li span.value {
  73                     font-weight: bold;
  74                   }
  75                   div.asset.small .data li span.state:after {
  76                     content: " " url(http://oculosis.com/maraby/tmp/harbor/states/state-12-red.png);
  77                   }
  78                 </style>
  79         </head>
  80         <body>
  81                 <div id="page">
  82
  83                         <div id="header">
  84                                 <h1>Dacelo UI Components</h1>
  85                                 <h2>Asset Styles</h2>
  86                         </div><!-- /header -->
  87
  88                         <div id="body">
  89
  90                                 <div class="dacelo-skin"><div id="tabs" class="dacelo-tabset yui-navset">
  91                                         <ul class="yui-nav">
  92                                                 <li><a href="#t1">Introduction</a></li>
  93                                                 <li class="selected"><a href="#t2">Usage</a></li>
  94                                                 <li><a href="#t3">License</a></li>
  95                                         </ul><!-- /.yui-nav -->
  96                                         <div class="yui-content">
  97                                                 <div id="t1" class="tab">
  98                                                         <h2>Introduction</h2>
  99                                                         <p>
 100                                                                 The Dacelo UI Components distribution includes a coordination of YUI and
 101                                                                 Prototype (with Scriptaculous) to create very clean, simple implementations
 102                                                                 for various tasks, like stylistic yet light-weight overlaying tooltips or
 103                                                                 tables with sortable data, etc.
 104                                                         </p>
 105                                                         <p>
 106                                                                 Essentially, there is nothing revolutionary in this distribution; instead,
 107                                                                 this distribution is intended to tie these libraries into a cohesive and
 108                                                                 contained solution to be dropped into any application with similar
 109                                                                 requirements to achieve identical results.
 110                                                         </p>
 111                                                 </div><!-- /t1 -->
 112                                                 <div id="t2" class="tab">
 113                                                   <h2>Idea</h2>
 114                                                   <p>
 115                                                     The idea of having certain "badge" styles for assets is that we have a consistent
 116                                                     and functional view in all areas of a given site creating familiarity and internal
 117                                                     consistency. Also, styling can be applied similarly to create very POSH source.
 118                                                   </p>
 119                                                   <p>
 120                                                     This is done by following a standard HTML structure for a given source in any place.
 121                                                     This is the first draft of the structure of an asset in Harbor.
 122                                                   </p>
 123                                                   <p><img src="http://oculosis.com/maraby/tmp/harbor/asset-struct.png" /></p>
 124                                                   <p>
 125                                                     <strong>NOTE:</strong> The <code>div(icon)</code> was deprecated in favor of simply
 126                                                     having the stylesheet provide for optional imagery. It wasn't indicated in the structure
 127                                                     presentation above, but the <code>div(icon)</code> block is optional so this breaks
 128                                                     nothing concerning the consistency of the format.
 129                                                   </p>
 130                                                   <h2>Visual Styles</h2>
 131                                                   <h3>Large/Normal Asset Card</h3>
 132                                                   <div id="asset-10000" class="asset large">
 133                                                     <ul class="data">
 134                                                       <li class="identifier">
 135                                                         <span class="label">HubID:</span>
 136                                                         <span class="primary">10000</span>
 137                                                       </li>
 138                                                       <li class="identifier">
 139                                                         <span class="label">Service Tag:</span>
 140                                                         <span class="value">SV4R11B</span>
 141                                                       </li>
 142                                                       <li class="state">
 143                                                         <span class="label">State:</span>
 144                                                         <span class="state">Holding</span>
 145                                                       </li>
 146                                                     </ul>
 147                                                   </div>
 148                                                   <h3>Small/Listing Asset Card</h3>
 149                                                   <p>Consists of the same HTML for the Large/Normal card, but styled alternatively.</p>
 150                                                   <div id="asset-10000" class="asset small">
 151                                                     <ul class="data">
 152                                                       <li class="identifier">
 153                                                         <span class="label">HubID:</span>
 154                                                         <span class="primary"><a href="#">10000</a></span>
 155                                                       </li>
 156                                                       <li class="identifier">
 157                                                         <span class="label">Service Tag:</span>
 158                                                         <span class="value"><a href="#">SV4R11B</a></span>
 159                                                       </li>
 160                                                       <li class="state">
 161                                                         <span class="label">State:</span>
 162                                                         <span class="state"><a href="#">Holding</a></span>
 163                                                       </li>
 164                                                     </ul>
 165                                                   </div>
 166                                                         <h2>Usage</h2>
 167                                                         <p>
 168                                                                 Well... that's what we're working out. Hang with it.
 169                                                         </p>
 170                                                         <h3>Assets</h3>
 171                                                         <div class="dacelo-skin"><div id="assets-view">
 172                                                                 <table id="assets">
 173                                                                         <thead>
 174                                                                                 <tr>
 175                                                                                         <th>HUB ID</th>
 176                                                                                         <th>Service Tag</th>
 177                                                                                         <th>Asset Type</th>
 178                                                                                         <th>State</th>
 179                                                                                         <th>Location</th>
 180                                                                                         <th></th>
 181                                                                                 </tr>
 182                                                                         </thead>
 183                                                                         <tbody>
 184                                                                                 <tr>
 185                                                                                         <td><a href="#">10000</a></td>
 186                                                                                         <td><a href="#">SV4R11B</a></td>
 187                                                                                         <td><a href="#">Dell D820</a></td>
 188                                                                                         <td><a href="#">Holding</a></td>
 189                                                                                         <td><a href="#">L163 Rack 1A</a></td>
 190                                                                                         <td><a href="#">Distribute</a></td>
 191                                                                                 </tr>
 192                                                                                 <tr>
 193                                                                                         <td><a href="#">10001</a></td>
 194                                                                                         <td><a href="#">SV4R11C</a></td>
 195                                                                                         <td><a href="#">Dell D820</a></td>
 196                                                                                         <td><a href="#">Holding</a></td>
 197                                                                                         <td><a href="#">L163 Rack 1A</a></td>
 198                                                                                         <td><a href="#">Distribute</a></td>
 199                                                                                 </tr>
 200                                                                                 <tr>
 201                                                                                         <td><a href="#">10003</a></td>
 202                                                                                         <td><a href="#">SV4R11D</a></td>
 203                                                                                         <td><a href="#">Dell D820</a></td>
 204                                                                                         <td><a href="#">Issuable</a></td>
 205                                                                                         <td><a href="#">L163 Rack 4C</a></td>
 206                                                                                         <td><a href="#">Distribute</a></td>
 207                                                                                 </tr>
 208                                                                                 <tr>
 209                                                                                         <td><a href="#">10004</a></td>
 210                                                                                         <td><a href="#">SV4R11G</a></td>
 211                                                                                         <td><a href="#">Dell D820</a></td>
 212                                                                                         <td><a href="#">Holding</a></td>
 213                                                                                         <td><a href="#">L163 Rack 1A</a></td>
 214                                                                                         <td><a href="#">Distribute</a></td>
 215                                                                                 </tr>
 216                                                                                 <tr>
 217                                                                                         <td><a href="#">10341</a></td>
 218                                                                                         <td><a href="#">SX4R17H</a></td>
 219                                                                                         <td><a href="#">Dell D820</a></td>
 220                                                                                         <td><a href="#">Issuable</a></td>
 221                                                                                         <td><a href="#">L163 Rack 4A</a></td>
 222                                                                                         <td><a href="#">Distribute</a></td>
 223                                                                                 </tr>
 224                                                                         </tbody>
 225                                                                 </table><!-- /assets -->
 226                                                         </div></div><!-- /assets-view -->
 227                                                 </div><!-- /t1 -->
 228                                                 <div id="t3" class="tab">
 229                                                         <div id="license">
 230                                                                 <h2>License and Copyright</h2>
 231                                                                 <p>
 232                                                                         Copyright &copy; 2007 Matt Todd &lt;http://purl.org/net/maraby&gt;.
 233                                                                 </p>
 234                                                                 <p>
 235                                                                         Permission is hereby granted, free of charge, to any person obtaining a
 236                                                                         copy of this software and associated documentation files (the "Software"),
 237                                                                         to deal in the Software without restriction, including without limitation
 238                                                                         the rights to use, copy, modify, merge, publish, distribute, sublicense,
 239                                                                         and/or sell copies of the Software, and to permit persons to whom the
 240                                                                         Software is furnished to do so, subject to the following conditions:
 241                                                                 </p>
 242                                                                 <p>
 243                                                                         The above copyright notice and this permission notice shall be included in
 244                                                                         all copies or substantial portions of the Software.
 245                                                                 </p>
 246                                                                 <p>
 247                                                                         THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 248                                                                         IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 249                                                                         FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 250                                                                         AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 251                                                                         LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 252                                                                         FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 253                                                                         DEALINGS IN THE SOFTWARE.
 254                                                                 </p>
 255                                                                 <p>
 256                                                                         This notice is located at:
 257                                                                         <a href="http://www.opensource.org/licenses/mit-license.php">http://www.opensource.org/licenses/mit-license.php</a>
 258                                                                 </p>
 259                                                         </div><!-- /license -->
 260                                                 </div><!-- /t1 -->
 261                                         </div><!-- /.yui-content -->
 262
 263                                 </div></div><!-- /tabs -->
 264
 265                         </div><!-- /body -->
 266
 267                 </div><!-- /page -->
 268         </body>
 269 </html>