aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorcash <cash@36083f99-b078-4883-b0ff-0f9b5a30f544>2010-12-04 15:52:14 +0000
committercash <cash@36083f99-b078-4883-b0ff-0f9b5a30f544>2010-12-04 15:52:14 +0000
commit58e7394e2dabe3bcf92b5efdc1c3917973cdf943 (patch)
treeb2cb6dfa30447d537fe10b4ebf312ea0a112f6a0
parent3d25a1293f4caf6b94e87bc214c1631ea1164229 (diff)
downloadelgg-58e7394e2dabe3bcf92b5efdc1c3917973cdf943.tar.gz
elgg-58e7394e2dabe3bcf92b5efdc1c3917973cdf943.tar.bz2
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
-rw-r--r--_graphics/two_sidebar_background.gifbin0 -> 85 bytes
-rw-r--r--mod/bookmarks/start.php2
-rw-r--r--views/default/content/header.php2
-rw-r--r--views/default/css/screen.php219
-rw-r--r--views/default/layouts/one_column.php8
-rw-r--r--views/default/layouts/one_column_with_sidebar.php34
-rw-r--r--views/default/layouts/two_sidebar.php42
-rw-r--r--views/default/page_elements/content.php6
-rw-r--r--views/default/page_elements/footer.php4
-rw-r--r--views/default/page_elements/header.php4
-rw-r--r--views/default/page_elements/header_logo.php10
-rw-r--r--views/default/page_elements/main_header.php27
-rw-r--r--views/default/page_elements/main_module.php5
-rw-r--r--views/default/page_elements/main_nav.php32
-rw-r--r--views/default/page_elements/topbar.php4
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
Binary files differ
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">';