diff options
| author | Misko Hevery | 2010-07-23 10:48:18 -0700 |
|---|---|---|
| committer | Misko Hevery | 2010-07-23 10:48:18 -0700 |
| commit | 8015e09e383bcd3ebf85d44cd68c67dd85db5771 (patch) | |
| tree | c8436accb1fb31dd043bc560f626aaee30e3f1a6 /example/buzz | |
| parent | 2987f7f705baffad8081fc4a3a95eab79b0d9695 (diff) | |
| download | angular.js-8015e09e383bcd3ebf85d44cd68c67dd85db5771.tar.bz2 | |
added buzz demo, fix undefined() -> undefined
Diffstat (limited to 'example/buzz')
| -rw-r--r-- | example/buzz/buzz.css | 72 | ||||
| -rw-r--r-- | example/buzz/buzz.html | 30 |
2 files changed, 79 insertions, 23 deletions
diff --git a/example/buzz/buzz.css b/example/buzz/buzz.css index e77c3bac..5fd5763d 100644 --- a/example/buzz/buzz.css +++ b/example/buzz/buzz.css @@ -1,45 +1,89 @@ body { - background: -webkit-gradient(linear, left top, left 400, from(#1C4070), to(#fff)); + background: -webkit-gradient(linear, left top, left 100, from(#bbb), to(#fff)); background-repeat: no-repeat; margin: 0px; + font-family: sans-serif; + font-size: 12px; } -.bar { +body > div { border-top: 1px solid white; border-bottom: 1px solid black; - text-align: right; + text-align: center; background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#888)); -webkit-background-origin: padding; -webkit-background-clip: content; } -.bar button { +body > div button { margin: 5px; } -.bar span { +body > div span:FIRST-CHILD { float: left; font-family: monospace; font-size: 1.5em; color: black; + padding: 2px 5px; } -ul.buzz { +body > div span:last-child { + float: right; +} + +ul { list-style: none; - padding: 5px; + padding: 10px; margin: 0; } -ul.buzz > li { - border: 1px solid yellow; - margin: 5px; +body > ul > li { + border: 1px solid black; + margin: 15px 5px; padding: 0; + -webkit-box-shadow: 5px 5px 5px #888; +} + +body > ul > li > h1 { + margin: 0; + background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#999)); + font-size: 13px; + border-bottom: 1px solid black; +} + +h1 > img, +li > img { + max-height: 30px; + max-width: 30px; + vertical-align: middle; + padding: 3px; } -ul.buzz > li > h1 { - border: 1px solid yellow; +a > img { + margin-right: 5px; + margin-top: 5px; +} + +body > ul > li > h1 > a:last-child { + float: right; + margin: 10px; +} + +body > ul > li > div { + background-color: white; + background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd)); margin: 0; + padding: 10px; } -ul.buzz > li > div { - border: 1px solid yellow; +body > ul > li ul { margin: 0; + padding: 0; + margin-left: 5px; + border-left: 5px solid lightgray; } + +body > ul > li ul > li { + margin: 0; + padding: 10px; + background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd)); +} + diff --git a/example/buzz/buzz.html b/example/buzz/buzz.html index f1916f54..a6777ff8 100644 --- a/example/buzz/buzz.html +++ b/example/buzz/buzz.html @@ -2,32 +2,44 @@ <html xmlns:ng="http://angularjs.org"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> - <!--script type="text/javascript" src="http://angularjs.org/ng/js/angular-debug.js#autobind"></script--> - <script type="text/javascript" src="../../src/angular-bootstrap.js#autobind"></script> + <script type="text/javascript" src="http://angularjs.org/ng/js/angular-debug.js#autobind"></script> <script type="text/javascript" src="buzz.js"></script> + <link rel="stylesheet" type="text/css" href="http://angularjs.org/ng/css/angular.css"/> <link rel="stylesheet" type="text/css" href="buzz.css"/> </head> <body ng:init="$window.$root = this" ng:controller="BuzzController"> - <div class="bar"> + <div> <span><angular/> Buzz</span> - <input type="text" name="userId" ng:required/> - <button ng:click="$location.hashPath = userId">fetch</button> + <span> + filter: + <input type="text" name="filterText"/> + </span> + <span> + user: + <input type="text" name="userId" ng:required/> + <button ng:click="$location.hashPath = userId">fetch</button> + </span> </div> - <ul class="buzz"> - <li ng:repeat="item in activities.data.items"> + <ul> + <li ng:repeat="item in activities.data.items.$filter(filterText)"> <h1> <img src="{{item.actor.thumbnailUrl}}"/> <a href="{{item.actor.profileUrl}}">{{item.actor.name}}</a> + <a href="#" ng:click="expandReplies(item)">Replies: {{item.links.replies[0].count}}</a> </h1> <div> {{item.object.content | html}} - <a href="#" ng:click="expandReplies(item)">Replies: {{item.links.replies[0].count}}</a> + <div> + <a href="{{attachment.links.enclosure[0].href}}" ng:repeat="attachment in item.object.attachments"> + <img src="{{attachment.links.preview[0].href}}"/> + </a> + </div> </div> <my:expand expand="item.replies.show"> <ul> <li ng:repeat="reply in item.replies.data.items"> <img src="{{reply.actor.thumbnailUrl}}"/> - <a href="{{reply.actor.profileUrl}}">{{reply.actor.name}}</a> + <a href="{{reply.actor.profileUrl}}">{{reply.actor.name}}</a>: {{reply.content | html}} </li> </ul> |