Permalink
Browse files

refactoring

  • Loading branch information...
pilu committed Jan 21, 2009
1 parent 50f291b commit e8f047bd5fe3fafa9dceb40ec1249db8a8d7e0da
View
@@ -45,28 +45,50 @@ <h1><a href="index.html">Wep App Theme</a></h1>
</div>
</div>
<div id="wrapper">
- <div id="content">
- <div id="secondary-navigation">
- <ul>
- <li class="active first"><a href="#">Text</a></li>
- <li><a href="#">Tables</a></li>
- <li><a href="#">Forms</a></li>
- <li><a href="#">2 Columns Forms</a></li>
- <li><a href="#">Lists</a></li>
- <li><a href="#">Other Lists</a></li>
- </ul>
- <div class="clear"></div>
- </div>
-
- <div class="main-block">
- <h2 class="title">All users</h2>
- <div class="main_container">
- <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- <span class="hightlight">Excepteur sint occaecat cupidatat non proident</span>, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <div id="main">
+
+ <div class="block">
+ <div class="secondary-navigation">
+ <ul>
+ <li class="active first"><a href="#block-text">Text</a></li>
+ <li><a href="#block-tables">Tables</a></li>
+ <li><a href="#block-forms">Forms</a></li>
+ <li><a href="#block-messages">Messages</a></li>
+ <li><a href="#block-forms-2">2 Columns Forms</a></li>
+ <li><a href="#block-lists">Lists</a></li>
+ <li><a href="#block-lists-2">Other Lists</a></li>
+ </ul>
+ <div class="clear"></div>
+ </div>
+ <h2 class="title">Text</h2>
+ <div class="content">
+ <p class="first">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="hightlight">Excepteur sint occaecat cupidatat non proident</span>, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
<p> <span class="small">small text</span></p>
<p> <span class="gray">gray text</span></p>
- <hr />
- <h1>Tables</h1>
+ <hr />
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="hightlight">Excepteur sint occaecat cupidatat non proident</span>, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ </div>
+ </div>
+
+ <div class="block">
+ <div class="secondary-navigation">
+ <ul>
+ <li class="first"><a href="#block-text">Text</a></li>
+ <li class="active"><a href="#block-tables">Tables</a></li>
+ <li><a href="#block-forms">Forms</a></li>
+ <li><a href="#block-messages">Messages</a></li>
+ <li><a href="#block-forms-2">2 Columns Forms</a></li>
+ <li><a href="#block-lists">Lists</a></li>
+ <li><a href="#block-lists-2">Other Lists</a></li>
+ </ul>
+ <div class="clear"></div>
+ </div>
+ <h2 class="title">Tables</h2>
+ <div class="content">
<table class="table">
<tr>
<th class="first"><a href="#" title="Toggle" class="toggle" onclick="this.up('table').select('input[type=\'checkbox\']').each(function(e){e.checked = !e.checked}); return false;">Toggle</a></th>
@@ -89,18 +111,21 @@ <h1>Tables</h1>
</div>
</div>
- <div class="main-block">
+ <div class="block">
+ <div class="secondary-navigation">
+ <ul>
+ <li class="first"><a href="#block-text">Text</a></li>
+ <li><a href="#block-tables">Tables</a></li>
+ <li class="active"><a href="#block-forms">Forms</a></li>
+ <li><a href="#block-messages">Messages</a></li>
+ <li><a href="#block-forms-2">2 Columns Forms</a></li>
+ <li><a href="#block-lists">Lists</a></li>
+ <li><a href="#block-lists-2">Other Lists</a></li>
+ </ul>
+ <div class="clear"></div>
+ </div>
<h2 class="title">Forms</h2>
- <div class="form-container">
- <div class="flash-messages error">
- <p>Error message</p>
- </div>
- <div class="flash-messages warning">
- <p>Warning message</p>
- </div>
- <div class="flash-messages notice">
- <p>Notice message</p>
- </div>
+ <div class="content">
<form action="#" method="get" class="form">
<div class="group">
<label class="title">Text field</label>
@@ -116,11 +141,49 @@ <h2 class="title">Forms</h2>
</form>
</div>
</div>
-
-
- <div class="main-block">
+
+ <div class="block">
+ <div class="secondary-navigation">
+ <ul>
+ <li class="first"><a href="#block-text">Text</a></li>
+ <li><a href="#block-tables">Tables</a></li>
+ <li><a href="#block-forms">Forms</a></li>
+ <li class="active"><a href="#block-messages">Messages</a></li>
+ <li><a href="#block-forms-2">2 Columns Forms</a></li>
+ <li><a href="#block-lists">Lists</a></li>
+ <li><a href="#block-lists-2">Other Lists</a></li>
+ </ul>
+ <div class="clear"></div>
+ </div>
+ <h2 class="title">Messages</h2>
+ <div class="content">
+ <div class="flash-messages error">
+ <p>Error message</p>
+ </div>
+ <div class="flash-messages warning">
+ <p>Warning message</p>
+ </div>
+ <div class="flash-messages notice">
+ <p>Notice message</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="block">
+ <div class="secondary-navigation">
+ <ul>
+ <li class="first"><a href="#block-text">Text</a></li>
+ <li><a href="#block-tables">Tables</a></li>
+ <li><a href="#block-forms">Forms</a></li>
+ <li><a href="#block-messages">Messages</a></li>
+ <li class="active"><a href="#block-forms-2">2 Columns Forms</a></li>
+ <li><a href="#block-lists">Lists</a></li>
+ <li><a href="#block-lists-2">Other Lists</a></li>
+ </ul>
+ <div class="clear"></div>
+ </div>
<h2 class="title">2 columns forms</h2>
- <div class="form-container">
+ <div class="content">
<form action="#" method="get" class="form">
<div class="column left">
<div class="group">
@@ -164,9 +227,21 @@ <h2 class="title">2 columns forms</h2>
</div>
</div>
- <div class="main-block">
+ <div class="block">
+ <div class="secondary-navigation">
+ <ul>
+ <li class="first"><a href="#block-text">Text</a></li>
+ <li><a href="#block-tables">Tables</a></li>
+ <li><a href="#block-forms">Forms</a></li>
+ <li><a href="#block-messages">Messages</a></li>
+ <li><a href="#block-forms-2">2 Columns Forms</a></li>
+ <li class="active"><a href="#block-lists">Lists</a></li>
+ <li><a href="#block-lists-2">Other Lists</a></li>
+ </ul>
+ <div class="clear"></div>
+ </div>
<h2 class="title">Activities</h2>
- <div class="block-container">
+ <div class="content">
<ul class="list">
<li>
<div class="date left day">
@@ -200,9 +275,21 @@ <h2 class="title">Activities</h2>
</div>
</div>
- <div class="main-block">
- <h2 class="title">Messages</h2>
- <div class="block-container">
+ <div class="block">
+ <div class="secondary-navigation">
+ <ul>
+ <li class="first"><a href="#block-text">Text</a></li>
+ <li><a href="#block-tables">Tables</a></li>
+ <li><a href="#block-forms">Forms</a></li>
+ <li><a href="#block-messages">Messages</a></li>
+ <li><a href="#block-forms-2">2 Columns Forms</a></li>
+ <li><a href="#block-lists">Lists</a></li>
+ <li class="active"><a href="#block-lists-2">Other Lists</a></li>
+ </ul>
+ <div class="clear"></div>
+ </div>
+ <h2 class="title">Other Lists</h2>
+ <div class="content">
<ul class="list">
<li>
<div class="left">
@@ -238,10 +325,8 @@ <h2 class="title">Messages</h2>
<h3>Switch Theme</h3>
<ul class="navigation">
<li><a href="#" onclick="Theme.activate('default'); return false;">Default</a></li>
- <li><a href="#" onclick="Theme.activate('green'); return false;">Green</a></li>
- <li><a href="#" onclick="Theme.activate('purple'); return false;">Purple</a></li>
- <li><a href="#" onclick="Theme.activate('black-grey'); return false;">Black &amp; Grey</a></li>
<li class="last"><a href="#" onclick="Theme.activate('bec'); return false;">Bec</a></li>
+ <li><a href="#" onclick="Theme.activate('black-grey'); return false;">Black &amp; Grey</a></li>
</ul>
</div>
<div class="block">
View
@@ -37,12 +37,12 @@ body {
text-decoration: none;
}
-#content {
+#main {
width: 65%;
float: left;
}
-#content .pagination {
+#main .pagination {
padding: 15px 0;
}
@@ -75,11 +75,15 @@ body {
padding-top: 20px;
}
-.main-block {
- padding: 1px 15px;
+#main .block {
+ margin-bottom: 40px;
}
-.main-block p.first {
+#main .block .content {
+ padding: 0 15px;
+}
+
+#main .main p.first {
margin-top: 0;
}
@@ -89,13 +93,13 @@ body {
right: 20px;
}
-#user-navigation ul, #main-navigation ul, #secondary-navigation ul, #sidebar ul.navigation {
+#user-navigation ul, #main-navigation ul, .secondary-navigation ul, #sidebar ul.navigation {
margin: 0;
padding: 0;
list-style-type: none;
}
-#user-navigation ul li, #main-navigation ul li, #secondary-navigation ul li {
+#user-navigation ul li, #main-navigation ul li, .secondary-navigation ul li {
float: left;
}
@@ -108,7 +112,7 @@ body {
}
#main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active,
-#secondary-navigation ul li a:link, #secondary-navigation ul li a:visited, #secondary-navigation ul li a:hover, #secondary-navigation ul li a:active,
+.secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, .secondary-navigation ul li a:hover, .secondary-navigation ul li a:active,
#user-navigation ul li a:link, #user-navigation ul li a:visited, #user-navigation ul li a:hover, #user-navigation ul li a:active {
text-decoration: none;
}
@@ -119,13 +123,13 @@ body {
padding: 8px 15px;
}
-#secondary-navigation {
+.secondary-navigation {
font-size: 13px;
border-bottom-width: 10px;
border-bottom-style: solid;
}
-#secondary-navigation ul li a {
+.secondary-navigation ul li a {
display: block;
padding: 10px 15px;
}
View
@@ -43,23 +43,24 @@ input.checkbox {
color: #FFF;
}
-#content {
+#main {
background: #e5e5e5;
width: 69%;
}
-.main-block {
+#main .block {
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
padding: 0;
margin-bottom:20px;
+ padding-bottom: 20px;
background: #fff;
}
-.main-block h2.title {
- margin:0;
+#main .block h2.title {
+ margin: 0 0 20px 0;
background-color: #E6FAFA;
- padding: 5px 5px 5px 10px;
+ padding: 5px 5px 5px 15px;
font-size:18px;
}
@@ -131,7 +132,7 @@ input.checkbox {
}
#main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active,
-#secondary-navigation ul li a:link, #secondary-navigation ul li a:visited, #secondary-navigation ul li a:hover, #secondary-navigation ul li a:active,
+.secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, .secondary-navigation ul li a:hover, .secondary-navigation ul li a:active,
#user-navigation ul li a:link, #user-navigation ul li a:visited, #user-navigation ul li a:hover, #user-navigation ul li a:active {
text-decoration: none;
color: #FFF;
@@ -148,17 +149,17 @@ input.checkbox {
#user-navigation ul li a:hover {
text-decoration: underline;
}
-#secondary-navigation {
+.secondary-navigation {
background: #006666;
border-bottom-color: #008c8c;
border-bottom: 5px solid #008c8c;
}
-#secondary-navigation ul li.active {
+.secondary-navigation ul li.active {
background-color: #008c8c;
}
-#secondary-navigation ul li:hover {
+.secondary-navigation ul li:hover {
background-color: #00b2b2;
}
@@ -211,10 +212,6 @@ input.checkbox {
/* forms */
-.form-container, .block-container {
- padding:10px;
-}
-
.form input.text, .form textarea.textarea {
border: 1px solid #ddd;
padding: 5px;
Oops, something went wrong.

0 comments on commit e8f047b

Please sign in to comment.