refs #1402 first cut of the new sidebar layout code (plus some other stuff - very non-atomic commit). blog plugin uses the one sidebar layout and bookmarks uses the two sidebar layout (for testing purposes)

git-svn-id: http://code.elgg.org/elgg/trunk@7528 36083f99-b078-4883-b0ff-0f9b5a30f544
author: cash <cash@36083f99-b078-4883-b0ff-0f9b5a30f544> 2010-12-04 15:52:14 +0000
committer: cash <cash@36083f99-b078-4883-b0ff-0f9b5a30f544> 2010-12-04 15:52:14 +0000
commit: 58e7394e2dabe3bcf92b5efdc1c3917973cdf943 (patch)
tree: b2cb6dfa30447d537fe10b4ebf312ea0a112f6a0
parent: 3d25a1293f4caf6b94e87bc214c1631ea1164229 (diff)
download: elgg-58e7394e2dabe3bcf92b5efdc1c3917973cdf943.tar.gz
elgg-58e7394e2dabe3bcf92b5efdc1c3917973cdf943.tar.bz2
15 files changed, 180 insertions, 219 deletions
diff --git a/_graphics/two_sidebar_background.gif b/_graphics/two_sidebar_background.gif
new file mode 100644
index 000000000..947f5cf46
--- /dev/null
+++ b/_graphics/two_sidebar_background.gif
diff --git a/mod/bookmarks/start.php b/mod/bookmarks/start.php
index 0528eb3b5..cc34d6e76 100644
--- a/mod/bookmarks/start.php
+++ b/mod/bookmarks/start.php
@@ -247,7 +247,7 @@ function bookmarks_page_handler($page) {
 		'content' => $content,
 		'sidebar' => $sidebar,
 	);
-	$body = elgg_view_layout('one_column_with_sidebar', $params);
+	$body = elgg_view_layout('two_sidebar', $params);
 	echo elgg_view_page(elgg_echo("bookmarks:user", array(elgg_get_page_owner()->name)), $body);
 
 	return TRUE;
diff --git a/views/default/content/header.php b/views/default/content/header.php
index 396e9adc9..469d79269 100644
--- a/views/default/content/header.php
+++ b/views/default/content/header.php
@@ -37,7 +37,7 @@ if ($context) {
 		}
 	}
 	echo <<<HTML
-<div id="elgg-main-header" class="elgg-header clearfix">
+<div class="elgg-main-header clearfix">
 	<h2 class="elgg-main-heading">$title</h2>$buttons
 </div>
 HTML;
diff --git a/views/default/css/screen.php b/views/default/css/screen.php
index a5e5d19f7..00d4d8f5d 100644
--- a/views/default/css/screen.php
+++ b/views/default/css/screen.php
@@ -240,7 +240,7 @@ h2 {
 /* ***************************************
 	PAGE LAYOUT - MAIN BLOCKS POSITIONING
 *************************************** */
-#elgg-topbar {
+#elgg-page-topbar {
 	background: #333333 url(<?php echo elgg_get_site_url(); ?>_graphics/toptoolbar_background.gif) repeat-x top left;
 	color: #eeeeee;
 	border-bottom: 1px solid #000000;
@@ -257,124 +257,100 @@ h2 {
 	background-repeat: repeat-x;
 	background-position: bottom left;
 }
-#elgg-sidebar {
-	background-color: #eeeeee;
-	border-left: 1px solid #DEDEDE;
-	float: right;
-	width: 210px;
-	padding: 20px 10px;
+#elgg-page-footer {
 	position: relative;
-	min-height: 360px;
+	z-index: 999;
 }
 
-#elgg-main {
-	float: left;
-	width: 729px;
+.elgg-layout-one_column {
+	padding: 10px 0;
+}
+.elgg-layout-sidebar {
+	background-image:url(<?php echo elgg_get_site_url(); ?>_graphics/sidebar_background.gif);
+	background-repeat:repeat-y;
+	background-position: right top;
+}
+.elgg-layout-two-sidebar {
+	background-image:url(<?php echo elgg_get_site_url(); ?>_graphics/two_sidebar_background.gif);
+	background-repeat:repeat-y;
+	background-position: right top;
+}
+.elgg-main {
 	position: relative;
 	min-height: 360px;
-	margin: 10px 20px 20px 10px;
+	padding: 10px;
+}
+.elgg-aside {
+	padding: 20px 10px;
+	position: relative;
+	min-height: 360px;
+}
+.elgg-sidebar {
+	float: right;
+	width: 210px;
+	margin-left: 10px;
+}
+.elgg-sidebar-alt {
+	float: left;
+	width: 160px;
+	margin-right: 10px;
 }
 
-/* move this to one of the components */
+/* move elgg-body to one of the css components */
+/**
+ * elgg-body fills the space available to it.
+ * It uses hidden text to expand itself. The combination of auto width, overflow
+ * hidden, and the hidden text creates this effect.
+ *
+ * This allows us to float fixed width divs to either side of an .elgg-body div
+ * without having to specify the body div's width.
+ *
+ * @todo check what happens with long <pre> tags or large images
+ */
+.elgg-body {
+	width: auto;
+	word-wrap: break-word;
+	overflow: hidden;
+}
 .elgg-body:after {
 	display: block;
 	visibility: hidden;
-	overflow: hidden;
 	height: 0 !important;
 	line-height: 0;
 	font-size: xx-large;
 	content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
 }
-#elgg-page-footer {
-	position: relative;
-	z-index: 999;
-}
-#elgg-page-footer-inner {
-	padding: 5px 0;
-	border-top:1px solid #DEDEDE;
-}
 
 
-#elgg-main-header {
-    border-bottom: 1px solid #CCCCCC;
-    padding-bottom: 3px;
-}
 
-#elgg-header-contents {
-	width:990px;
-	position: relative;
-	margin:0 auto;
-	height:90px;
-}
-#elgg-search {
-	bottom:5px;
-	height:23px;
-	position:absolute;
-	right:0;
-}
-#elgg-main-nav {
-	z-index: 7000;
-	position: absolute;
-	height:23px;
-	bottom:0;
-	left:0;
-	width:auto;
-}
-#elgg-content { /* wraps sidebar and page contents */
-	width:990px;
-	position: relative;
-	overflow:hidden;
-	word-wrap:break-word;
-	margin:0 auto;
-	min-height:400px;
-}
-#elgg-content.sidebar { /* class on #elgg-content div to give a full-height sidebar background */
-	background-image:url(<?php echo elgg_get_site_url(); ?>_graphics/sidebar_background.gif);
-	background-repeat:repeat-y;
-	background-position: right top;
-}
-.elgg-layout > .elgg-body {
-	float:left;
-	position: relative;
-	min-height: 360px;
-	margin:10px 20px 20px 10px;
+.elgg-module {
 }
 
-#elgg-page-contents { /* main page contents */
-	float:left;
-	position: relative;
-	min-height: 360px;
-	margin:10px 20px 20px 10px;
+.elgg_inner {
 }
-#elgg-page-contents.one-column { /* class on #elgg-page-contents when no sidebar */
-	width:970px;
-	margin-right:10px;
-}
-.elgg-aside { /* elgg sidebar */
 
+.elgg-header {
+	border-bottom: 1px solid #CCCCCC;
+	margin-bottom: 5px;
+	margin-top: 20px;
+	padding-bottom: 5px;
 }
-.elgg-footer {
 
+.elgg-footer {
 }
-.elgg-footer > .elgg-inner {
 
-	padding:3px 0 10px 0;
-}
-#elgg-footer-contents {
-	border-top:1px solid #DEDEDE;
-	margin:0 auto;
-	width:990px;
-	padding:3px 0 10px 0;
-	text-align: right;
+.elgg-main-header {
+    border-bottom: 1px solid #CCCCCC;
+    padding-bottom: 3px;
 }
 
-.elgg-aside h3 {
-	border-bottom:1px solid #CCCCCC;
-	margin-bottom:5px;
-	margin-top:20px;
-	padding-bottom:5px;
+.elgg-main-heading {
+	float: left;
+	max-width: 530px;
+	margin-right: 10px;
 }
 
+
 .elgg-center {
 	margin: 0 auto;
 }
@@ -383,28 +359,27 @@ h2 {
 	width: 990px;
 }
 
-.elgg-width-content {
-	width: 730px;
-}
 
-.elgg-module {
+#elgg-search {
+	bottom:5px;
+	height:23px;
+	position:absolute;
+	right:0;
 }
-
-.elgg-main-heading {
-	float: left;
-	max-width: 530px;
-	margin-right: 10px;
+#elgg-main-nav {
+	z-index: 7000;
+	position: absolute;
+	height:23px;
+	bottom:0;
+	left:0;
+	width:auto;
 }
 
-.elgg-maincontent-header {
-	border-bottom: 1px solid #CCCCCC;
-	padding-bottom: 3px;
-}
 
 /* ***************************************
 	ELGG TOPBAR
 *************************************** */
-#elgg-topbar a {
+#elgg-page-topbar a {
 	margin-right:30px;
 	padding-top:2px;
 	display:inline;
@@ -412,54 +387,54 @@ h2 {
 	text-align: left;
 	color:#eeeeee;
 }
-#elgg-topbar a:hover {
+#elgg-page-topbar a:hover {
 	color:#71cbff;
 	text-decoration: none;
 }
-#elgg-topbar a img.user-mini-avatar {
+#elgg-page-topbar a img.user-mini-avatar {
 	border:1px solid #eeeeee;
 	margin:1px 0 0 10px;
 	display: block;
 }
-#elgg-topbar a img.site-logo {
+#elgg-page-topbar a img.site-logo {
 	display: block;
 	margin-left:5px;
 	margin-top: -1px;
 }
-#elgg-topbar .log-out {
+#elgg-page-topbar .log-out {
 	float:right;
 }
-#elgg-topbar .log-out a {
+#elgg-page-topbar .log-out a {
 	display: inline;
 	text-align: right;
 	margin-right:10px;
 	color:#999999;
 }
-#elgg-topbar .log-out a:hover {
+#elgg-page-topbar .log-out a:hover {
 	color:#71cbff;
 }
-#elgg-topbar a.myfriends {
+#elgg-page-topbar a.myfriends {
 	background:transparent url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat left -297px;
 	margin-right:30px;
 	text-indent: -900em;
 	width:36px;
 }
-#elgg-topbar a.myfriends:hover {
+#elgg-page-topbar a.myfriends:hover {
 	background-position: left -337px;
 }
-#elgg-topbar a.settings {
+#elgg-page-topbar a.settings {
 	background:transparent url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat -300px -41px;
 	padding-left:20px !important;
 	float:right;
 	margin-right:30px;
 }
-#elgg-topbar a.admin {
+#elgg-page-topbar a.admin {
 	background:transparent url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat -300px -41px;
 	padding-left:20px !important;
 	float:right;
 	margin-right:30px;
 }
-#elgg-topbar a.help {
+#elgg-page-topbar a.help {
 	background:transparent url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat -300px -133px;
 	padding-left:18px !important;
 	float:right;
@@ -475,7 +450,7 @@ h2 {
 	height: 90px;
 }
 
-.elgg-header h1 a span.network-title {
+#elgg-page-header h1 a span.network-title {
 	font-size: 2em;
 	line-height:1.4em;
 	color: white;
@@ -485,7 +460,7 @@ h2 {
 	text-decoration: none;
 	text-shadow:1px 2px 4px #333333;
 }
-.elgg-header #elgg-search input.search-input {
+#elgg-page-header #elgg-search input.search-input {
 	-webkit-border-radius: 10px;
 	-moz-border-radius: 10px;
 	background-color:transparent;
@@ -500,19 +475,19 @@ h2 {
 	background-position: 2px -220px;
 	background-repeat: no-repeat;
 }
-.elgg-header #elgg-search input.search-input:focus {
+#elgg-page-header #elgg-search input.search-input:focus {
 	background-color:white;
 	color:#0054A7;
 	border:1px solid white;
 	background-position: 2px -257px;
 }
-.elgg-header #elgg-search input.search-input:active {
+#elgg-page-header #elgg-search input.search-input:active {
 	background-color:white;
 	color:#0054A7;
 	border:1px solid white;
 	background-position: 2px -257px;
 }
-.elgg-header #elgg-search input.search-submit-button {
+#elgg-page-header #elgg-search input.search-submit-button {
 	display:none;
 }
 
@@ -649,6 +624,12 @@ li.navigation-more ul li {
 /* ***************************************
 	FOOTER CONTENTS
 *************************************** */
+
+#elgg-page-footer-inner {
+	padding: 5px 0;
+	border-top:1px solid #DEDEDE;
+}
+
 #elgg-footer-contents,
 #elgg-footer-contents a,
 #elgg-footer-contents p {
diff --git a/views/default/layouts/one_column.php b/views/default/layouts/one_column.php
index e3189a309..84a304e14 100644
--- a/views/default/layouts/one_column.php
+++ b/views/default/layouts/one_column.php
@@ -8,9 +8,9 @@
  * @uses $vars['content'] Content string
  */
 ?>
-<div class="elgg-body">
-	<div class="elgg-layout elgg-center elgg-width-classic clearfix">
-		<?php echo $vars['content']; ?>
-		<?php echo $vars['area1']; ?>
+<div class="elgg-layout-one_column elgg-center elgg-width-classic clearfix">
+	<div class="elgg-body">
+	<?php echo $vars['content']; ?>
+	<?php echo $vars['area1']; ?>
 	</div>
 </div>
 \ No newline at end of file
diff --git a/views/default/layouts/one_column_with_sidebar.php b/views/default/layouts/one_column_with_sidebar.php
index daeb26cac..e408c6c1c 100644
--- a/views/default/layouts/one_column_with_sidebar.php
+++ b/views/default/layouts/one_column_with_sidebar.php
@@ -10,20 +10,22 @@
  */
 ?>
 
-<div id="elgg-sidebar" class="elgg-aside">
-	<?php
-		echo elgg_view('page_elements/sidebar', $vars);
-	?>
-</div>
-	
-<div id="elgg-main" class="elgg-body">
-	<?php
-		// @todo deprecated so remove in Elgg 2.0
-		if (isset($vars['area1'])) {
-			echo $vars['area1'];
-		}
-		if (isset($vars['content'])) {
-			echo $vars['content'];
-		}
-	?>
+<div class="elgg-layout-sidebar elgg-center elgg-width-classic clearfix">
+	<div class="elgg-sidebar elgg-aside">
+		<?php
+			echo elgg_view('page_elements/sidebar', $vars);
+		?>
+	</div>
+
+	<div class="elgg-main elgg-body">
+		<?php
+			// @todo deprecated so remove in Elgg 2.0
+			if (isset($vars['area1'])) {
+				echo $vars['area1'];
+			}
+			if (isset($vars['content'])) {
+				echo $vars['content'];
+			}
+		?>
+	</div>
 </div>
diff --git a/views/default/layouts/two_sidebar.php b/views/default/layouts/two_sidebar.php
new file mode 100644
index 000000000..26fb64920
--- /dev/null
+++ b/views/default/layouts/two_sidebar.php
@@ -0,0 +1,42 @@
+<?php
+/**
+ * Elgg 2 sidebar layout
+ *
+ * @package Elgg
+ * @subpackage Core
+ *
+ * @uses $vars['content'] The content string for the main column
+ * @uses $vars['sidebar'] Optional content that is displayed in the sidebar
+ * @uses $vars['sidebar-alt'] Optional content that is displayed in the alternate sidebar
+ */
+?>
+
+<div class="elgg-layout-two-sidebar elgg-center elgg-width-classic clearfix">
+	<div class="elgg-sidebar elgg-aside">
+		<?php
+			echo elgg_view('page_elements/sidebar', $vars);
+		?>
+	</div>
+	<div class="elgg-sidebar-alt elgg-aside">
+		<?php
+			//$params = $vars;
+			//$params['sidebar'] = $vars['sidebar-alt'];
+			$params = array(
+				'sidebar' => elgg_view('layout_elements/module', array('title' => 'Testing', 'body' => 'Hello, world!'))
+			);
+			echo elgg_view('page_elements/sidebar', $params);
+		?>
+	</div>
+
+	<div class="elgg-main elgg-body">
+		<?php
+			// @todo deprecated so remove in Elgg 2.0
+			if (isset($vars['area1'])) {
+				echo $vars['area1'];
+			}
+			if (isset($vars['content'])) {
+				echo $vars['content'];
+			}
+		?>
+	</div>
+</div>
diff --git a/views/default/page_elements/content.php b/views/default/page_elements/content.php
index 946237828..14292ce59 100644
--- a/views/default/page_elements/content.php
+++ b/views/default/page_elements/content.php
@@ -7,9 +7,7 @@
 $body = elgg_get_array_value('body', $vars, '');
 
 echo <<<HTML
-<div id="elgg-page-body" class="elgg-body">
-	<div id="elgg_page-body-inner" class="elgg-inner elgg-center elgg-width-classic clearfix">
-		$body
-	</div>
+<div id="elgg-page-body">
+	$body
 </div>
 HTML;
diff --git a/views/default/page_elements/footer.php b/views/default/page_elements/footer.php
index 0e417e030..42cb6a2fc 100644
--- a/views/default/page_elements/footer.php
+++ b/views/default/page_elements/footer.php
@@ -9,8 +9,8 @@
  */
 
 ?>
-<div id="elgg-page-footer" class="elgg-footer">
-	<div id="elgg-page-footer-inner" class="elgg-inner elgg-center elgg-width-classic clearfix">
+<div id="elgg-page-footer">
+	<div id="elgg-page-footer-inner" class="elgg-center elgg-width-classic clearfix">
 		<?php echo elgg_view('footer/links'); ?>
 		<a href="http://www.elgg.org" class="right">
 			<img src="<?php echo elgg_get_site_url(); ?>_graphics/powered_by_elgg_badge_drk_bckgnd.gif" alt="Powered by Elgg" />
diff --git a/views/default/page_elements/header.php b/views/default/page_elements/header.php
index f6d158f06..476919591 100644
--- a/views/default/page_elements/header.php
+++ b/views/default/page_elements/header.php
@@ -5,8 +5,8 @@
  **/
 
 ?>
-<div id="elgg-page-header" class="elgg-header">
-	<div id="elgg-page-header-inner" class="elgg-inner elgg-center elgg-width-classic">
+<div id="elgg-page-header">
+	<div id="elgg-page-header-inner" class="elgg-center elgg-width-classic">
 		<?php
 			// link back to main site.
 			echo elgg_view('page_elements/header_logo', $vars);
diff --git a/views/default/page_elements/header_logo.php b/views/default/page_elements/header_logo.php
index c782310f0..6ae6a0fab 100644
--- a/views/default/page_elements/header_logo.php
+++ b/views/default/page_elements/header_logo.php
@@ -2,9 +2,11 @@
 /**
  * Elgg header logo
  * The logo to display in elgg-header.
- **/
+ */
 ?>
 
-<h1><a href="<?php echo elgg_get_site_url(); ?>">
-<span class='network-title'><?php echo $vars['config']->sitename; ?></span>
-</a></h1>
+<h1>
+	<a href="<?php echo elgg_get_site_url(); ?>">
+		<span class='network-title'><?php echo $vars['config']->sitename; ?></span>
+	</a>
+</h1>
diff --git a/views/default/page_elements/main_header.php b/views/default/page_elements/main_header.php
deleted file mode 100644
index 438a6c432..000000000
--- a/views/default/page_elements/main_header.php
+++ /dev/null
@@ -1,27 +0,0 @@
-<?php
-/**
- * Header for main module
- *
- * @uses string $vars['type'] The section type.  Should be the same as the page handler.  Used for generating URLs.
- */
-
-$type = $vars['type'];
-$username = get_loggedin_user()->username;
-
-$title = elgg_echo($type);
-
-$new_button = '';
-if (isloggedin()) {
-	$new_link = elgg_get_array_value('new_link', $vars, "pg/$type/$username/new");
-	$params = array(
-		'href' => $new_link = elgg_normalize_url($new_link),
-		'text' => elgg_echo("$type:new"),
-		'class' => 'action-button right',
-	);
-	$new_button = elgg_view('output/url', $params);
-}
-
-echo <<<HTML
-<h2 class="elgg-module-heading">$title</h2>
-$new_button
-HTML;
diff --git a/views/default/page_elements/main_module.php b/views/default/page_elements/main_module.php
deleted file mode 100644
index 388a500fe..000000000
--- a/views/default/page_elements/main_module.php
+++ /dev/null
@@ -1,5 +0,0 @@
-<?php
-
-$vars['class'] = 'elgg-module-maincontent';
-$vars['header_class'] = 'elgg-maincontent-header clearfix';
-echo elgg_view_layout('module', $vars);
-\ No newline at end of file
diff --git a/views/default/page_elements/main_nav.php b/views/default/page_elements/main_nav.php
deleted file mode 100644
index 0c267b3f2..000000000
--- a/views/default/page_elements/main_nav.php
+++ /dev/null
@@ -1,32 +0,0 @@
-<?php
-
-// page handler type
-$type = $vars['type'];
-
-$username = get_loggedin_user()->username;
-
-// so we know if the user is looking at their own, everyone's or all friends
-$filter_context = $vars['context'];
-
-// generate a list of default tabs
-$default_tabs = array(
-	'all' => array(
-		'title' => elgg_echo('all'),
-		'url' => (isset($vars['all_link'])) ? $vars['all_link'] : "pg/$type/",
-		'selected' => ($filter_context == 'everyone'),
-	),
-	'mine' => array(
-		'title' => elgg_echo('mine'),
-		'url' => (isset($vars['mine_link'])) ? $vars['mine_link'] : "pg/$type/$username",
-		'selected' => ($filter_context == 'mine'),
-	),
-	'friend' => array(
-		'title' => elgg_echo('friends'),
-		'url' => (isset($vars['friend_link'])) ? $vars['friend_link'] : "pg/$type/$username/friends",
-		'selected' => ($filter_context == 'friends'),
-	),
-);
-
-// determine if using default or overwritten tabs
-$tabs = elgg_get_array_value('tabs', $vars, $default_tabs);
-echo elgg_view('navigation/tabs', array('tabs' => $tabs));
-\ No newline at end of file
diff --git a/views/default/page_elements/topbar.php b/views/default/page_elements/topbar.php
index 0ccfc15c6..0f7b8f467 100644
--- a/views/default/page_elements/topbar.php
+++ b/views/default/page_elements/topbar.php
@@ -6,8 +6,8 @@
 
 $user = get_loggedin_user();
 if (($user instanceof ElggUser) && ($user->guid > 0)) {
-	echo '<div id="elgg-topbar">';
-	echo '<div id="elgg-topbar-inner" class="elgg-inner">';
+	echo '<div id="elgg-page-topbar">';
+	echo '<div id="elgg-page-topbar-inner">';
 	
 	// Elgg logo
 	echo '<a href="http://www.elgg.org">';
author	cash <cash@36083f99-b078-4883-b0ff-0f9b5a30f544>	2010-12-04 15:52:14 +0000
committer	cash <cash@36083f99-b078-4883-b0ff-0f9b5a30f544>	2010-12-04 15:52:14 +0000
commit	58e7394e2dabe3bcf92b5efdc1c3917973cdf943 (patch)
tree	b2cb6dfa30447d537fe10b4ebf312ea0a112f6a0
parent	3d25a1293f4caf6b94e87bc214c1631ea1164229 (diff)
download	elgg-58e7394e2dabe3bcf92b5efdc1c3917973cdf943.tar.gz elgg-58e7394e2dabe3bcf92b5efdc1c3917973cdf943.tar.bz2