Changeset 10164

Timestamp:

8 May 2013, 11:47:11 (12 years ago)

Author:

uli

Message:

More markup and rules to get the layout basically working.

Location:

main/waeup.diazo/trunk/kofa

Files:

• base.xml (modified) (1 diff)
• static/css/base.css (modified) (1 diff)
• theme.html (modified) (5 diffs)

main/waeup.diazo/trunk/kofa/base.xml

@@ -62 +62 @@
              css:content-children="ul.kofa-navbar-right" />
 
+    <!-- breadcrumbs -->
+    <replace css:theme-children="ul.kofa-breadcrumbs"
+             css:content="ul.breadcrumb li" />
+    <drop css:theme="div.kofa-breadcrumbs-box"
+          css:if-not-content="ul.breadcrumb" />
+
+    <!-- sidebar -->
+    <drop css:theme="div.kofa-sidebar"
+          css:if-not-content="div.sidebar" /><!-- drop if not in content -->
+    <replace css:theme-children=".kofa-sidebar-title"
+             css:content-children="div.sidebar h5" />
+    <replace css:theme-children=".kofa-sidebar-body"
+             css:content-children="div.sidebar ul" />
+
+    <!-- content -->
+
+    <!-- drop one of the both content areas, depending on sidebar -->
+    <drop css:theme="div.kofa-content-narrow"
+          css:if-not-content="div.sidebar" />
+    <drop css:theme="div.kofa-content-wide"
+          css:if-content="div.sidebar" />
+
+    <replace css:theme-children="div.kofa-content"
+             css:content-children="div.content" />
+
 
   </rules>

main/waeup.diazo/trunk/kofa/static/css/base.css

@@ -14 +14 @@
     background-color: #fff;
 }
+
+.kofa-sidebar .well {
+    padding: 5px;
+}
+
+.kofa-sidebar-title {
+    text-transform: none;
+    font-size: 14px;
+    color: #555;
+    padding-top: 15px;
+    padding-bottom: 10px;
+    padding-left: 8px;
+}

main/waeup.diazo/trunk/kofa/theme.html

@@ -44 +44 @@
             <span class="icon-bar"></span>
           </button>
-          <a class="brand active" href="#">WAeUP.Kofa</a>
+          <a class="brand active" href="/">WAeUP.Kofa</a>
           <div class="nav-collapse collapse kofa-primary-nav">
             <ul class="nav kofa-navbar-left">
@@ -77 +77 @@
     <div class="container-fluid">
 
-      <div class="row-fluid">
+      <div class="row-fluid kofa-breadcrumbs-box">
         <div class="span12">
-          <ul class="breadcrumb">
+          <ul class="breadcrumb kofa-breadcrumbs">
             <li>
               <a href="#">
@@ -96 +96 @@
 
       <div class="row-fluid">
-        <div class="span2">
+        <div class="span2 kofa-sidebar">
           <div class="sidebar-nav well">
-            <ul class="nav nav-list">
-              <li class="nav-header">Username</li>
+            <ul class="nav nav-list">
+              <li class="nav-header kofa-sidebar-title">Username</li>
+            </ul>
+            <ul class="nav nav-list kofa-sidebar-body">
               <li><a href="#">Portal Configuration</a></li>
               <li><a href="#">Portal Users</a></li>
@@ -108 +110 @@
           </div> <!-- /well -->
         </div><!-- /span2 -->
-        <div class="span10 content well">
+        <div class="span10 content well kofa-content kofa-content-narrow">
 
-          <div class="hero-unit">
-            <h1>waeup.kofa theme</h1>
-            <p>A sample theme for waeup.kofa</p>
+          <div class="hero-unit kofa-content-label-box">
+            <h1 class="kofa-content-label-title">waeup.kofa theme</h1>
+            <p class="kofa-content-label-descr">
+              A sample theme for waeup.kofa</p>
           </div>
 
@@ -133 +136 @@
         </div>
       </div><!-- /row-fluid -->
+
+      <div class="row-fluid">
+        <div class="span12 content well kofa-content kofa-content-wide">
+          <div class="hero-unit">
+            <h1>Hello there!</h1>
+            <p>this is...</p>
+          </div>
+          <div>...content that spans the whole page.</div>
+        </div>
+      </div>
+
     </div><!-- /container-fluid -->