aboutsummaryrefslogtreecommitdiff
path: root/views/default
diff options
context:
space:
mode:
authorpete <pete@36083f99-b078-4883-b0ff-0f9b5a30f544>2010-03-10 21:19:24 +0000
committerpete <pete@36083f99-b078-4883-b0ff-0f9b5a30f544>2010-03-10 21:19:24 +0000
commit9fa4cfbd1235a21803931aa58e7a650ad398e5fb (patch)
treef3696fd39fa6e47586c4bc3ca660df0c5d8c2eba /views/default
parentbe4a15fba0c35cd1df5077b121e0a416acab5834 (diff)
downloadelgg-9fa4cfbd1235a21803931aa58e7a650ad398e5fb.tar.gz
elgg-9fa4cfbd1235a21803931aa58e7a650ad398e5fb.tar.bz2
Updated Friends Picker UI and added to core css.
git-svn-id: http://code.elgg.org/elgg/trunk@5352 36083f99-b078-4883-b0ff-0f9b5a30f544
Diffstat (limited to 'views/default')
-rw-r--r--views/default/css.php423
-rw-r--r--views/default/friends/collections.php3
-rw-r--r--views/default/friends/picker.php10
-rw-r--r--views/default/js/friendsPickerv1.php38
4 files changed, 189 insertions, 285 deletions
diff --git a/views/default/css.php b/views/default/css.php
index aac500871..6673df876 100644
--- a/views/default/css.php
+++ b/views/default/css.php
@@ -955,6 +955,8 @@ select.styled .select_option {
p.entity_title {
font-weight: bold;
font-size: 1.1em;
+ line-height:1.2em;
+ color:#666666;
}
p.entity_title a {
color:#0054A7;
@@ -964,6 +966,7 @@ p.entity_subtext {
padding:0;
color:#666666;
font-size: 90%;
+ line-height:1.2em;
}
/* entity metadata block */
.entity_metadata {
@@ -1139,8 +1142,8 @@ input[type="text"]:focus {
background-image: url(<?php echo $vars['url']; ?>_graphics/button_graduation.png);
background-repeat: repeat-x;
background-position: left 10px;
- -webkit-border-radius: 7px;
- -moz-border-radius: 7px;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
width: auto;
padding: 2px 4px;
margin:0 10px 10px 0;
@@ -1173,8 +1176,8 @@ input[type="submit"] {
background-image: url(<?php echo $vars['url']; ?>_graphics/button_graduation.png);
background-repeat: repeat-x;
background-position: left 10px;
- -webkit-border-radius: 7px;
- -moz-border-radius: 7px;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
width: auto;
padding: 2px 4px;
margin:10px 0 10px 0;
@@ -1202,8 +1205,8 @@ input[type="submit"]:hover {
background-repeat: repeat-x;
background-position: left 10px;
border: 1px solid #999999;
- -webkit-border-radius: 7px;
- -moz-border-radius: 7px;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
width: auto;
padding: 2px 4px;
margin:10px 0 10px 10px;
@@ -1268,7 +1271,6 @@ a.action_button:focus {
background-image: url(<?php echo $vars['url']; ?>_graphics/button_graduation.png);
background-repeat: repeat-x;
background-position: left 10px;
- /*display:inline-block;*/
width:auto;
height:auto;
padding: 3px 6px 3px 6px;
@@ -1313,6 +1315,162 @@ a.action_button:focus {
.delete_button a:hover {
background-position: 0 -16px;
}
+
+
+/* ***************************************
+ FRIENDS PICKER SLIDER
+*************************************** */
+.friends_picker_container h3 {
+ font-size:4em !important;
+ text-align: left;
+ margin:10px 0 20px 0 !important;
+ color:#999999 !important;
+ background: none !important;
+ padding:0 !important;
+}
+.friends_picker .friends_picker_container .panel ul {
+ text-align: left;
+ margin: 0;
+ padding:0;
+}
+.friends_picker_wrapper {
+ margin: 0;
+ padding:0;
+ position: relative;
+ width: 100%;
+}
+.friends_picker {
+ position: relative;
+ overflow: hidden;
+ margin: 0;
+ padding:0;
+ width: 730px;
+ height: auto;
+/*
+ background: #dedede;
+ -webkit-border-radius: 8px;
+ -moz-border-radius: 8px;
+*/
+}
+.friendspicker_savebuttons {
+ background: white;
+ -webkit-border-radius: 8px;
+ -moz-border-radius: 8px;
+ margin:0 10px 10px 10px;
+}
+.friends_picker .friends_picker_container { /* long container used to house end-to-end panels. Width is calculated in JS */
+ position: relative;
+ left: 0;
+ top: 0;
+ width: 100%;
+ list-style-type: none;
+}
+.friends_picker .friends_picker_container .panel {
+ float:left;
+ height: 100%;
+ position: relative;
+ width: 730px;
+ margin: 0;
+ padding:0;
+}
+.friends_picker .friends_picker_container .panel .wrapper {
+ margin: 0;
+ padding:4px 10px 10px 10px;
+ min-height: 230px;
+}
+.friends_picker_navigation {
+ margin: 0 0 10px 0;
+ padding:0 0 10px 0;
+ border-bottom:1px solid #cccccc;
+}
+.friends_picker_navigation ul {
+ list-style: none;
+ padding-left: 0;
+}
+.friends_picker_navigation ul li {
+ float: left;
+ margin:0;
+ background:white;
+}
+.friends_picker_navigation a {
+ font-weight: bold;
+ text-align: center;
+ background: white;
+ color: #999999;
+ text-decoration: none;
+ display: block;
+ padding: 0;
+ width:20px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+}
+.tabHasContent {
+ background: white;
+ color:#333333 !important;
+}
+.friends_picker_navigation li a:hover {
+ background: #333333;
+ color:white !important;
+}
+.friends_picker_navigation li a.current {
+ background: #4690D6;
+ color:white !important;
+}
+.friends_picker_navigation_l, .friends_picker_navigation_r {
+ position: absolute;
+ top: 46px;
+ text-indent: -9000em;
+}
+.friends_picker_navigation_l a, .friends_picker_navigation_r a {
+ display: block;
+ height: 43px;
+ width: 43px;
+}
+.friends_picker_navigation_l {
+ right: 48px;
+ z-index:1;
+}
+.friends_picker_navigation_r {
+ right: 0;
+ z-index:1;
+}
+.friends_picker_navigation_l {
+ background: url("<?php echo $vars['url']; ?>_graphics/friends_picker_arrows.gif") no-repeat left top;
+}
+.friends_picker_navigation_r {
+ background: url("<?php echo $vars['url']; ?>_graphics/friends_picker_arrows.gif") no-repeat -60px top;
+}
+.friends_picker_navigation_l:hover {
+ background: url("<?php echo $vars['url']; ?>_graphics/friends_picker_arrows.gif") no-repeat left -44px;
+}
+.friends_picker_navigation_r:hover {
+ background: url("<?php echo $vars['url']; ?>_graphics/friends_picker_arrows.gif") no-repeat -60px -44px;
+}
+.friends_collections_controls a.delete_collection {
+ display:block;
+ cursor: pointer;
+ width:14px;
+ height:14px;
+ margin:2px 3px 0 0;
+ background: url("<?php echo $vars['url']; ?>_graphics/icon_customise_remove.png") no-repeat 0 0;
+}
+.friends_collections_controls a.delete_collection:hover {
+ background-position: 0 -16px;
+}
+.friendspicker_savebuttons .submit_button,
+.friendspicker_savebuttons .cancel_button {
+ margin:5px 20px 5px 5px;
+}
+
+#collectionMembersTable {
+ background: #dedede;
+ -webkit-border-radius: 8px;
+ -moz-border-radius: 8px;
+ margin:10px 0 0 0;
+ padding:10px 10px 0 10px;
+}
+
+
/* ////////////////////////////////////////////////////////////////////////////////////////// >>>End Verified */
@@ -1433,255 +1591,4 @@ a.action_button:focus {
}
-/*
-
-#elgg_topbar_panel {
- background:#333333;
- color:#eeeeee;
- height:200px;
- width:100%;
- padding:10px 20px 10px 20px;
- display:none;
- position:relative;
-}
-#elggFooterContents .footer_legal_links {
- text-align:right;
-}
-#elggFooterContents .footersidebar {
- text-align:right;
-}
-#elggFooterContents table td.footersidebar a img {
- float:right;
- padding:5px 0;
-}
-
-.generic_comment_owner {
- font-size: 90%;
- color:#666666;
-}
-.generic_comment {
- background:white;
- -webkit-border-radius: 8px;
- -moz-border-radius: 8px;
- padding:10px;
- margin:0 10px 10px 10px;
-}
-.generic_comment_icon {
- float:left;
-}
-.generic_comment_details {
- margin-left: 60px;
-}
-.generic_comment_details p {
- margin: 0 0 5px 0;
-}
-.generic_comment_owner {
- color:#666666;
- margin: 0px;
- font-size:90%;
- border-top: 1px solid #aaaaaa;
-}
-
-
-Object page headers blogs/pages/files etc
-
-
-table.search_gallery {
- border-spacing: 10px;
- margin:0 0 0 0;
-}
-.search_gallery td {
- padding: 5px;
-}
-.search_gallery_item {
- background: white;
- -webkit-border-radius: 8px;
- -moz-border-radius: 8px;
- width:170px;
-}
-.search_gallery_item:hover {
- background: black;
- color:white;
-}
-.search_gallery_item .search_listing {
- background: none;
- text-align: center;
-}
-.search_gallery_item .search_listing_header {
- text-align: center;
-}
-.search_gallery_item .search_listing_icon {
- position: relative;
- text-align: center;
-}
-.search_gallery_item .search_listing_info {
- margin: 5px;
-}
-.search_gallery_item .search_listing_info p {
- margin: 5px;
- margin-bottom: 10px;
-}
-.search_gallery_item .search_listing {
- background: none;
- text-align: center;
-}
-.search_gallery_item .search_listing_icon {
- position: absolute;
- margin-bottom: 20px;
-}
-.search_gallery_item .search_listing_info {
- margin: 5px;
-}
-.search_gallery_item .search_listing_info p {
- margin: 5px;
- margin-bottom: 10px;
-}
-
-#NewListStyle {
- padding:0;
- margin:0;
-}
-#NewListStyle .search_listing {
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- background:none;
- border-bottom:1px dotted #CCCCCC;
- margin:0;
- padding:5px 0 7px 0;
- display: inline-block;
- position: relative;
- clear:both;
-}
-#NewListStyle .ListTop {
- margin:0 0;
- clear:both;
- width:auto;
-}
-#NewListStyle .search_listing:hover {
- background-color: #eeeeee;
-}
-#NewListStyle .search_listing:last-child {
- border-bottom:1px dotted #CCCCCC;
-}
-
-#NewListStyle .search_listing_icon {
- float:left;
- margin-left:3px;
- margin-top:3px;
-}
-#NewListStyle .search_listing .search_listing_info {
- float:left;
- margin-left:7px;
- min-height:28px;
- width:693px;
-}
-#NewListStyle .search_listing .search_listing_info .ItemMetaData {
- float:right;
- margin-left:15px;
- margin-top:0;
- margin-right: 3px;
- color:#AAAAAA;
- font-size: 90%;
-}
-
-.ItemMetaData.special {
- float:right;
- margin-left:15px;
- margin-top:0;
- margin-right: 3px;
- color:#AAAAAA;
- font-size: 90%;
-}
-
-used on groups members listings where there is only a delete button in table
-#NewListStyle .search_listing .search_listing_info .ItemMetaData table.singlecell {
- width:auto;
-}
-#NewListStyle .search_listing_info p.tags {
- font-size:90%;
- margin:0;
- padding-top:1px;
-}
-*/
-
-
-/* ***************************************
- COLLAPSABLE BOXES - for widgets?
-*************************************** */
-/*
-.collapsable_box {
- margin: 0 0 20px 0;
- height:auto;
-
-}
-.collapsable_box_header {
- color: #4690d6;
- padding: 5px 10px 5px 10px;
- margin:0;
- border-left: 1px solid white;
- border-right: 1px solid #cccccc;
- border-bottom: 1px solid #cccccc;
- -moz-border-radius-topleft:8px;
- -moz-border-radius-topright:8px;
- -webkit-border-top-right-radius:8px;
- -webkit-border-top-left-radius:8px;
- background:#dedede;
-}
-.collapsable_box_header h1 {
- color: #0054a7;
- font-size:1.25em;
- line-height: 1.2em;
-}
-.collapsable_box_content {
- padding: 10px 0 10px 0;
- margin:0;
- height:auto;
- background:#dedede;
- -moz-border-radius-bottomleft:8px;
- -moz-border-radius-bottomright:8px;
- -webkit-border-bottom-right-radius:8px;
- -webkit-border-bottom-left-radius:8px;
- border-left: 1px solid white;
- border-right: 1px solid #cccccc;
- border-bottom: 1px solid #cccccc;
-}
-.collapsable_box_content {
- margin-bottom:5px;
-}
-.collapsable_box_editpanel {
- display: none;
- background: #a8a8a8;
- padding:10px 10px 5px 10px;
- border-left: 1px solid white;
- border-bottom: 1px solid white;
-}
-.collapsable_box_editpanel p {
- margin:0 0 5px 0;
-}
-.collapsable_box_header a.toggle_box_contents {
- color: #4690d6;
- cursor:pointer;
- font-family: Arial, Helvetica, sans-serif;
- font-size:20px;
- font-weight: bold;
- text-decoration:none;
- float:right;
- margin: 0;
- margin-top: -7px;
-}
-.collapsable_box_header a.toggle_box_edit_panel {
- color: #4690d6;
- cursor:pointer;
- font-size:9px;
- text-transform: uppercase;
- text-decoration:none;
- font-weight: normal;
- float:right;
- margin: 3px 10px 0 0;
-}
-.collapsable_box_editpanel label {
- font-weight: normal;
- font-size: 100%;
-}
-*/
diff --git a/views/default/friends/collections.php b/views/default/friends/collections.php
index a013dc1da..d73568b71 100644
--- a/views/default/friends/collections.php
+++ b/views/default/friends/collections.php
@@ -15,7 +15,6 @@ if (!isset($friendspicker)) {
$friendspicker = 0;
}
-echo "<div class=\"contentWrapper\">";
if (is_array($vars['collections']) && sizeof($vars['collections'])) {
echo "<ul id=\"friends_collections_accordian\">";
@@ -31,8 +30,6 @@ if (is_array($vars['collections']) && sizeof($vars['collections'])) {
echo elgg_echo("friends:nocollections");
}
-echo "</div>";
-
?>
<script>
diff --git a/views/default/friends/picker.php b/views/default/friends/picker.php
index 1ac8b23af..bca3e5e89 100644
--- a/views/default/friends/picker.php
+++ b/views/default/friends/picker.php
@@ -135,9 +135,9 @@ if (!isset($vars['replacement'])) {
}
?>
-<div class="friendsPicker_wrapper">
-<div id="friendsPicker<?php echo $friendspicker; ?>">
- <div class="friendsPicker_container">
+<div class="friends_picker_wrapper">
+<div id="friends_picker<?php echo $friendspicker; ?>">
+ <div class="friends_picker_container">
<?php
// Initialise letters
@@ -290,7 +290,7 @@ if (!isset($vars['replacement'])) {
<script type="text/javascript">
// initialise picker
- $("div#friendsPicker<?php echo $friendspicker; ?>").friendsPicker(<?php echo $friendspicker; ?>);
+ $("div#friends_picker<?php echo $friendspicker; ?>").friendsPicker(<?php echo $friendspicker; ?>);
</script>
<script>
$(document).ready(function () {
@@ -301,7 +301,7 @@ if (sizeof($activeletters) > 0)
foreach($activeletters as $letter) {
$tab = strpos($chararray, $letter) + 1;
?>
-$("div#friendsPickerNavigation<?php echo $friendspicker; ?> li.tab<?php echo $tab; ?> a").addClass("tabHasContent");
+$("div#friends_picker_navigation<?php echo $friendspicker; ?> li.tab<?php echo $tab; ?> a").addClass("tabHasContent");
<?php
}
diff --git a/views/default/js/friendsPickerv1.php b/views/default/js/friendsPickerv1.php
index 32b495938..2fa4e373f 100644
--- a/views/default/js/friendsPickerv1.php
+++ b/views/default/js/friendsPickerv1.php
@@ -12,16 +12,16 @@ jQuery.fn.friendsPicker = function(iterator) {
return this.each(function() {
var container = $(this);
- container.addClass("friendsPicker");
+ container.addClass("friends_picker");
// set panelwidth manually as it's hidden initially - adjust this value for different themes/pagewidths
- var panelWidth = 678;
+ var panelWidth = 730;
// count the panels in the container
var panelCount = container.find("div.panel").size();
// calculate the width of all the panels lined up end-to-end
var friendsPicker_containerWidth = panelWidth*panelCount;
// specify width for the friendsPicker_container
- container.find("div.friendsPicker_container").css("width" , friendsPicker_containerWidth);
+ container.find("div.friends_picker_container").css("width" , friendsPicker_containerWidth);
// global variables for container.each function below
var friendsPickerNavigationWidth = 0;
@@ -30,17 +30,17 @@ jQuery.fn.friendsPicker = function(iterator) {
// generate appropriate nav for each container
container.each(function(i) {
// generate Left and Right arrows
- $(this).before("<div class='friendsPickerNavigationL' id='friendsPickerNavigationL" + iterator + "'><a href='#'>Left</a><\/div>");
- $(this).after("<div class='friendsPickerNavigationR' id='friendsPickerNavigationR" + iterator + "'><a href='#'>Right</a><\/div>");
+ $(this).before("<div class='friends_picker_navigation_l' id='friends_picker_navigation_l" + iterator + "'><a href='#'>Left</a><\/div>");
+ $(this).after("<div class='friends_picker_navigation_r' id='friends_picker_navigation_r" + iterator + "'><a href='#'>Right</a><\/div>");
// generate a-z tabs
- $(this).before("<div class='friendsPickerNavigation' id='friendsPickerNavigation" + iterator + "'><ul><\/ul><\/div>");
+ $(this).before("<div class='friends_picker_navigation' id='friends_picker_navigation" + iterator + "'><ul><\/ul><\/div>");
$(this).find("div.panel").each(function(individualTabItemNumber) {
- $("div#friendsPickerNavigation" + iterator + " ul").append("<li class='tab" + (individualTabItemNumber+1) + "'><a href='#" + (individualTabItemNumber+1) + "'>" + $(this).attr("title") + "<\/a><\/li>");
+ $("div#friends_picker_navigation" + iterator + " ul").append("<li class='tab" + (individualTabItemNumber+1) + "'><a href='#" + (individualTabItemNumber+1) + "'>" + $(this).attr("title") + "<\/a><\/li>");
});
// tabs navigation
- $("div#friendsPickerNavigation" + iterator + " a").each(function(individualTabItemNumber) {
+ $("div#friends_picker_navigation" + iterator + " a").each(function(individualTabItemNumber) {
// calc friendsPickerNavigationWidth by summing width of each li
friendsPickerNavigationWidth += $(this).parent().width();
// set-up individual tab clicks
@@ -48,45 +48,45 @@ jQuery.fn.friendsPicker = function(iterator) {
$(this).addClass("current").parent().parent().find("a").not($(this)).removeClass("current");
var distanceToMoveFriendsPicker_container = - (panelWidth*individualTabItemNumber);
currentPanel = individualTabItemNumber + 1;
- $(this).parent().parent().parent().next().find("div.friendsPicker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
+ $(this).parent().parent().parent().next().find("div.friends_picker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
});
});
// Right arow click function
- $("div#friendsPickerNavigationR" + iterator + " a").click(function() {
+ $("div#friends_picker_navigation_r" + iterator + " a").click(function() {
if (currentPanel == panelCount) {
var distanceToMoveFriendsPicker_container = 0;
currentPanel = 1;
- $(this).parent().parent().find("div.friendsPickerNavigation a.current").removeClass("current").parent().parent().find("a:eq(0)").addClass("current");
+ $(this).parent().parent().find("div.friends_picker_navigation a.current").removeClass("current").parent().parent().find("a:eq(0)").addClass("current");
} else {
var distanceToMoveFriendsPicker_container = - (panelWidth*currentPanel);
currentPanel += 1;
- $(this).parent().parent().find("div.friendsPickerNavigation a.current").removeClass("current").parent().next().find("a").addClass("current");
+ $(this).parent().parent().find("div.friends_picker_navigation a.current").removeClass("current").parent().next().find("a").addClass("current");
};
- $(this).parent().parent().find("div.friendsPicker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
+ $(this).parent().parent().find("div.friends_picker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
return false;
});
// Left arrow click function
- $("div#friendsPickerNavigationL" + iterator + " a").click(function() {
+ $("div#friends_picker_navigation_l" + iterator + " a").click(function() {
if (currentPanel == 1) {
var distanceToMoveFriendsPicker_container = - (panelWidth*(panelCount - 1));
currentPanel = panelCount;
- $(this).parent().parent().find("div.friendsPickerNavigation a.current").removeClass("current").parent().parent().find("li:last a").addClass("current");
+ $(this).parent().parent().find("div.friends_picker_navigation a.current").removeClass("current").parent().parent().find("li:last a").addClass("current");
} else {
currentPanel -= 1;
var distanceToMoveFriendsPicker_container = - (panelWidth*(currentPanel - 1));
- $(this).parent().parent().find("div.friendsPickerNavigation a.current").removeClass("current").parent().prev().find("a").addClass("current");
+ $(this).parent().parent().find("div.friends_picker_navigation a.current").removeClass("current").parent().prev().find("a").addClass("current");
};
- $(this).parent().parent().find("div.friendsPicker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
+ $(this).parent().parent().find("div.friends_picker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
return false;
});
// apply 'current' class to currently selected tab link
- $("div#friendsPickerNavigation" + iterator + " a:eq(0)").addClass("current");
+ $("div#friends_picker_navigation" + iterator + " a:eq(0)").addClass("current");
});
- $("div#friendsPickerNavigation" + iterator).append("<br />");
+ $("div#friends_picker_navigation" + iterator).append("<br />");
});
};