]> gitweb.fluxo.info Git - lorea/elgg.git/commitdiff
refs #1402 first cut of the new sidebar layout code (plus some other stuff - very...
authorcash <cash@36083f99-b078-4883-b0ff-0f9b5a30f544>
Sat, 4 Dec 2010 15:52:14 +0000 (15:52 +0000)
committercash <cash@36083f99-b078-4883-b0ff-0f9b5a30f544>
Sat, 4 Dec 2010 15:52:14 +0000 (15:52 +0000)
git-svn-id: http://code.elgg.org/elgg/trunk@7528 36083f99-b078-4883-b0ff-0f9b5a30f544

15 files changed:
_graphics/two_sidebar_background.gif [new file with mode: 0644]
mod/bookmarks/start.php
views/default/content/header.php
views/default/css/screen.php
views/default/layouts/one_column.php
views/default/layouts/one_column_with_sidebar.php
views/default/layouts/two_sidebar.php [new file with mode: 0644]
views/default/page_elements/content.php
views/default/page_elements/footer.php
views/default/page_elements/header.php
views/default/page_elements/header_logo.php
views/default/page_elements/main_header.php [deleted file]
views/default/page_elements/main_module.php [deleted file]
views/default/page_elements/main_nav.php [deleted file]
views/default/page_elements/topbar.php

diff --git a/_graphics/two_sidebar_background.gif b/_graphics/two_sidebar_background.gif
new file mode 100644 (file)
index 0000000..947f5cf
Binary files /dev/null and b/_graphics/two_sidebar_background.gif differ
index 0528eb3b540188404f17e4a576efdfce317c953f..cc34d6e76c318571038c486d942081953846508f 100644 (file)
@@ -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;
index 396e9adc91183e9934a473434451369422d19285..469d79269518281e4fd2386faf33b79607450245 100644 (file)
@@ -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;
index a5e5d19f7871f616edfb95bc65b5fd172eacb732..00d4d8f5d9d46fdaedfca5f30d60be041cb8e16f 100644 (file)
@@ -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 {
index e3189a3091c0a95beb791d824f8e8dce71a4dad5..84a304e14351dde33f0d86af46c29bdd1c66da3e 100644 (file)
@@ -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
index daeb26cac792be6b1a5765e81023a22a3df913a8..e408c6c1ca289f640bec06db28a467aec393ecdd 100644 (file)
  */
 ?>
 
-<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 (file)
index 0000000..26fb649
--- /dev/null
@@ -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>
index 9462378281d90b5f307fcdaf7898436a31be50ac..14292ce596971ae50c38cc22ebc0179b9ee9bd1d 100644 (file)
@@ -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;
index 0e417e030a813129a9dd6d4026aab4ca72f88045..42cb6a2fc127ab7957edc82a8e17bd13eae3a642 100644 (file)
@@ -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" />
index f6d158f06bb7ca0e1ba3b05d73c56ce5569dab57..476919591aab7bc70523a319241dcdaebce0aa18 100644 (file)
@@ -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);
index c782310f0931f2277494f7e132d4e3b87107948d..6ae6a0fab23660a295bb53a51c5fac03fc7fad80 100644 (file)
@@ -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 (file)
index 438a6c4..0000000
+++ /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 (file)
index 388a500..0000000
+++ /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 (file)
index 0c267b3..0000000
+++ /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
index 0ccfc15c6245119966ae23d85dc016d55879792d..0f7b8f4679b3aed0db772ae34536da85c18d04ab 100644 (file)
@@ -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">';