Permalink
Browse files

get some tabbing action going on!

  • Loading branch information...
1 parent fb344b8 commit 2b35f2fe9be7da5524b2ce0dbadcceb40dddcabb @tkazec tkazec committed Nov 26, 2011
Showing with 96 additions and 7 deletions.
  1. +33 −1 css/options.css
  2. +4 −0 js/jquery.js
  3. +11 −0 js/options.js
  4. +48 −6 options.html
View
@@ -1,7 +1,39 @@
+a {
+ cursor: pointer;
+}
+
+body {
+ background-color: #EEE;
+ padding-top: 40px;
+}
+
+body > .container {
+ display: none;
+}
+body > .container.active {
+ display: block;
+}
+
+.container {
+ width: 820px;
+}
+
+.content {
+ background-color: #FFF;
+ padding: 20px;
+ margin: 0 -20px;
+ border-radius: 0 0 6px 6px;
+ box-shadow: 0 1px 2px rgba(0,0,0,.15);
+}
+
#topbar-logo {
font-family: "Open Sans", sans-serif;
}
#topbar-logo-image {
- margin-right: 1px;
+ margin-right: 2px;
vertical-align: bottom;
+}
+
+#theme {
+ font-family: "DejaVu Sans Mono", monospace;
}
View
Oops, something went wrong.
View
@@ -0,0 +1,11 @@
+function tabTo(i) {
+ $("body").children(".container").eq(i).add($("#topbar-tabs").children().eq(i)).addClass("active").siblings().removeClass("active");
+}
+
+$("#topbar-logo").click(function(){
+ tabTo(4);
+});
+
+$("#topbar-tabs").children().click(function(){
+ tabTo($(this).index());
+});
View
@@ -11,15 +11,57 @@
<div class="topbar">
<div class="fill">
<div class="container">
- <a class="brand" href="#" id="topbar-logo"><img src="icons/16.png" width="16" height="16" id="topbar-logo-image">auburn</a>
- <ul class="nav">
- <li class="active"><a href="#">Tiles</a></li>
- <li><a href="#">Layout</a></li>
- <li><a href="#">Theme</a></li>
- <li><a href="#">About</a></li>
+ <a class="brand" id="topbar-logo"><img src="icons/16.png" width="16" height="16" id="topbar-logo-image" alt="">auburn</a>
+ <ul class="nav" id="topbar-tabs">
+ <li><a>Tiles</a>
+ <li><a>Layout</a>
+ <li><a>Theme</a>
+ <li><a>Help</a>
+ <li><a>About</a>
</ul>
</div>
</div>
</div>
+
+ <div class="container">
+ <div class="content">
+ <p>omg, the tiles editor!</p>
+ </div>
+ </div>
+
+ <div class="container">
+ <div class="content">
+ <p>omg, the layout editor!</p>
+ </div>
+ </div>
+
+ <div class="container">
+ <div class="content">
+ <p>Modify Auburn's look and feel with CSS.</p>
+
+ <textarea id="theme" class="span14" rows="20"></textarea>
+ </div>
+ </div>
+
+ <div class="container">
+ <div class="content">
+ <p>Why do you need help? Auburn is easy!</p>
+ </div>
+ </div>
+
+ <div class="container">
+ <div class="content">
+ <p>We're awesome.</p>
+
+ <h2>Changelog</h2>
+ <h3>0.1 <small>2011-12-01</small></h3>
+ <ul>
+ <li>Private beta release.
+ </ul>
+ </div>
+ </div>
+
+ <script src="js/jquery.js"></script>
+ <script src="js/options.js"></script>
</body>
</html>

0 comments on commit 2b35f2f

Please sign in to comment.