Frontpage block layout

Reorganize frontpage layout and add new block templates like
community stats, community map and find nearby groups.

Change-Id: I1acf920113068ba8cba8af78cf2e532002c569cd
This commit is contained in:
Marton Kiss 2013-12-10 21:30:02 +01:00
parent b4619ae4d3
commit e7e0a499b7
14 changed files with 511 additions and 39 deletions

View File

@ -0,0 +1,23 @@
#community-map {
background: url(world-map.png);
width: 450px;
height: 250px;
overflow: hidden;
margin-bottom: 2em;
}
#community-map .community-map-pin {
position: relative;
}
#community-map .community-map-pin span.latitude,
#community-map .community-map-pin span.longitude {
display: none;
}
#community-map .content {
background: #E0E0E0;
font-size: 80%;
display: inline;
padding: 2px;
}

View File

@ -0,0 +1,19 @@
/**
* Relocate html map pinpoints based on lat and long data.
*/
(function($) {
Drupal.behaviors.groups_homepage = {
attach : function(context) {
console.log("ready!");
var communityMap = $("#community-map");
communityMap.find(".community-map-pin").each(function() {
var lat = new Number($(this).find("span.latitude").text());
var lng = new Number($(this).find("span.longitude").text());
longPx = ((communityMap.width()/360) * (180 + lng));
latPx = ((communityMap.height()/180) * (90 - lat));
$(this).css('top', latPx + "px");
$(this).css('left', longPx + "px");
});
}
}
})(jQuery);

View File

@ -14,6 +14,18 @@ function groups_homepage_block_info() {
'info' => t('Groups welcome block'),
'cache' => DRUPAL_CACHE_GLOBAL,
);
$blocks['groups_community_map'] = array(
'info' => t('Groups community map'),
'cache' => DRUPAL_CACHE_GLOBAL,
);
$blocks['groups_community_stats']= array(
'info' => t('Groups community stats'),
'cache' => DRUPAL_CACHE_GLOBAL,
);
$blocks['groups_find_nearby']= array(
'info' => t('Groups find nearby'),
'cache' => DRUPAL_CACHE_GLOBAL,
);
return $blocks;
}
@ -21,8 +33,33 @@ function groups_homepage_block_info() {
* Implements hook_block_view().
*/
function groups_homepage_block_view($delta='') {
$block = array();
switch ($delta) {
case 'groups_homepage_welcome':
$block['content'] = variable_get('groups_welcome_body', "Can't find one nearby? Want to start one? The <a href='https://wiki.openstack.org/wiki/Teams#Community_team'>OpenStack International Community team</a> is your main contact point. Join the <a href='http://lists.openstack.org/cgi-bin/mailman/listinfo/community'>mailing list</a> and read the <a href='https://wiki.openstack.org/wiki/OpenStackUserGroups/HowTo'>HowTo page</a> if you are hosting or want to start a user group with meetups, hackathons and other social events talking about OpenStack and free/libre open source software for the cloud.");
$block['subject'] = variable_get('groups_welcome_title', 'Welcome to OpenStack User Groups!');
break;
case 'groups_community_map':
$block['content'] = theme('community_map', array());
$block['subject'] = 'Community map';
drupal_add_css(drupal_get_path('module', 'groups_homepage') . '/groups_homepage.css');
drupal_add_js(drupal_get_path('module', 'groups_homepage'). '/groups_homepage.js');
break;
case 'groups_community_stats':
// TODO: fetch community stats from remote service
$stats = array(
'people' => 12593,
'countries' => 131,
'user-groups' => 58,
);
$block['subject'] = 'Community stats';
$block['content'] = theme('community_stats', array('stats' => $stats));
break;
case 'groups_find_nearby':
$block['content'] = theme('groups_find_nearby', array());
$block['subject'] = 'Find nearby groups';
break;
}
return $block;
}
@ -33,3 +70,29 @@ function groups_homepage_block_view($delta='') {
function groups_homepage_menu_alter(&$items) {
unset($items['search']);
}
/**
* Implements hook_theme()
* @return multitype:number
*/
function groups_homepage_theme() {
$module_path = drupal_get_path('module', 'groups_homepage');
$base = array(
'path' => "$module_path/templates",
);
return array(
'community_stats' => $base + array(
'template' => 'community_stats',
'variables' => array('stats' => NULL,),
),
'groups_find_nearby' => $base + array(
'template' => 'groups_find_nearby',
'variables' => array(),
),
'community_map' => $base + array(
'template' => 'community_map',
'variables' => array(),
)
);
}

View File

@ -52,23 +52,19 @@ function groups_homepage_default_page_manager_pages() {
'relationships' => array(),
);
$display = new panels_display();
$display->layout = 'three_50_25_25';
$display->layout = 'openstack_front';
$display->layout_settings = array();
$display->panel_settings = array(
'style_settings' => array(
'default' => NULL,
'two_brick_top' => NULL,
'two_brick_left_above' => NULL,
'two_brick_right_above' => NULL,
'two_brick_middle' => NULL,
'two_brick_left_below' => NULL,
'two_brick_right_below' => NULL,
'two_brick_bottom' => NULL,
'three_50_25_25_top' => NULL,
'three_50_25_25_first' => NULL,
'three_50_25_25_second' => NULL,
'three_50_25_25_third' => NULL,
'three_50_25_25_bottom' => NULL,
'os_top' => NULL,
'os_left' => NULL,
'os_center' => NULL,
'os_right' => NULL,
'os_middle' => NULL,
'os_bottom_left' => NULL,
'os_bottom_right' => NULL,
'os_bottom' => NULL,
),
);
$display->cache = array();
@ -76,9 +72,72 @@ function groups_homepage_default_page_manager_pages() {
$display->uuid = '7a0357d1-bf3b-54e4-b522-6c15eedf8a93';
$display->content = array();
$display->panels = array();
$pane = new stdClass();
$pane->pid = 'new-4149ec78-f9ea-2084-5961-19adcd9726c5';
$pane->panel = 'os_bottom_left';
$pane->type = 'block';
$pane->subtype = 'groups_homepage-groups_community_map';
$pane->shown = TRUE;
$pane->access = array();
$pane->configuration = array(
'override_title' => 0,
'override_title_text' => '',
);
$pane->cache = array();
$pane->style = array(
'settings' => NULL,
);
$pane->css = array();
$pane->extras = array();
$pane->position = 0;
$pane->locks = array();
$pane->uuid = '4149ec78-f9ea-2084-5961-19adcd9726c5';
$display->content['new-4149ec78-f9ea-2084-5961-19adcd9726c5'] = $pane;
$display->panels['os_bottom_left'][0] = 'new-4149ec78-f9ea-2084-5961-19adcd9726c5';
$pane = new stdClass();
$pane->pid = 'new-c2b9e460-b848-d8f4-8153-cf0687afd8ea';
$pane->panel = 'os_bottom_right';
$pane->type = 'block';
$pane->subtype = 'groups_homepage-groups_find_nearby';
$pane->shown = TRUE;
$pane->access = array();
$pane->configuration = array(
'override_title' => 0,
'override_title_text' => '',
);
$pane->cache = array();
$pane->style = array(
'settings' => NULL,
);
$pane->css = array();
$pane->extras = array();
$pane->position = 0;
$pane->locks = array();
$pane->uuid = 'c2b9e460-b848-d8f4-8153-cf0687afd8ea';
$display->content['new-c2b9e460-b848-d8f4-8153-cf0687afd8ea'] = $pane;
$display->panels['os_bottom_right'][0] = 'new-c2b9e460-b848-d8f4-8153-cf0687afd8ea';
$pane = new stdClass();
$pane->pid = 'new-1a23fada-1c8b-2cf4-2978-e8aa64e28877';
$pane->panel = 'os_center';
$pane->type = 'views_panes';
$pane->subtype = 'commons_activity_streams_activity-panel_pane_1';
$pane->shown = TRUE;
$pane->access = array();
$pane->configuration = array();
$pane->cache = array();
$pane->style = array(
'settings' => NULL,
);
$pane->css = array();
$pane->extras = array();
$pane->position = 0;
$pane->locks = array();
$pane->uuid = '1a23fada-1c8b-2cf4-2978-e8aa64e28877';
$display->content['new-1a23fada-1c8b-2cf4-2978-e8aa64e28877'] = $pane;
$display->panels['os_center'][0] = 'new-1a23fada-1c8b-2cf4-2978-e8aa64e28877';
$pane = new stdClass();
$pane->pid = 'new-dd6ca3f4-3444-af04-f1e2-47c9f488ed53';
$pane->panel = 'three_50_25_25_first';
$pane->panel = 'os_left';
$pane->type = 'block';
$pane->subtype = 'groups_homepage-groups_homepage_welcome';
$pane->shown = TRUE;
@ -97,15 +156,18 @@ function groups_homepage_default_page_manager_pages() {
$pane->locks = array();
$pane->uuid = 'dd6ca3f4-3444-af04-f1e2-47c9f488ed53';
$display->content['new-dd6ca3f4-3444-af04-f1e2-47c9f488ed53'] = $pane;
$display->panels['three_50_25_25_first'][0] = 'new-dd6ca3f4-3444-af04-f1e2-47c9f488ed53';
$display->panels['os_left'][0] = 'new-dd6ca3f4-3444-af04-f1e2-47c9f488ed53';
$pane = new stdClass();
$pane->pid = 'new-1a23fada-1c8b-2cf4-2978-e8aa64e28877';
$pane->panel = 'three_50_25_25_second';
$pane->type = 'views_panes';
$pane->subtype = 'commons_activity_streams_activity-panel_pane_1';
$pane->pid = 'new-7ae087d4-887e-4b54-b980-44fb87245089';
$pane->panel = 'os_middle';
$pane->type = 'block';
$pane->subtype = 'groups_homepage-groups_community_stats';
$pane->shown = TRUE;
$pane->access = array();
$pane->configuration = array();
$pane->configuration = array(
'override_title' => 0,
'override_title_text' => '',
);
$pane->cache = array();
$pane->style = array(
'settings' => NULL,
@ -114,12 +176,12 @@ function groups_homepage_default_page_manager_pages() {
$pane->extras = array();
$pane->position = 0;
$pane->locks = array();
$pane->uuid = '1a23fada-1c8b-2cf4-2978-e8aa64e28877';
$display->content['new-1a23fada-1c8b-2cf4-2978-e8aa64e28877'] = $pane;
$display->panels['three_50_25_25_second'][0] = 'new-1a23fada-1c8b-2cf4-2978-e8aa64e28877';
$pane->uuid = '7ae087d4-887e-4b54-b980-44fb87245089';
$display->content['new-7ae087d4-887e-4b54-b980-44fb87245089'] = $pane;
$display->panels['os_middle'][0] = 'new-7ae087d4-887e-4b54-b980-44fb87245089';
$pane = new stdClass();
$pane->pid = 'new-4f60b089-fac8-aa14-d1f8-d5674b0d51bc';
$pane->panel = 'three_50_25_25_third';
$pane->panel = 'os_right';
$pane->type = 'views_panes';
$pane->subtype = 'commons_events_upcoming-panel_pane_2';
$pane->shown = TRUE;
@ -135,7 +197,7 @@ function groups_homepage_default_page_manager_pages() {
$pane->locks = array();
$pane->uuid = '4f60b089-fac8-aa14-d1f8-d5674b0d51bc';
$display->content['new-4f60b089-fac8-aa14-d1f8-d5674b0d51bc'] = $pane;
$display->panels['three_50_25_25_third'][0] = 'new-4f60b089-fac8-aa14-d1f8-d5674b0d51bc';
$display->panels['os_right'][0] = 'new-4f60b089-fac8-aa14-d1f8-d5674b0d51bc';
$display->hide_title = PANELS_TITLE_NONE;
$display->title_pane = '0';
$handler->conf['display'] = $display;

View File

@ -0,0 +1,35 @@
<div id="community-map">
<div class="community-map-pin">
<span class="latitude">
47.4719
</span>
<span class="longitude">
19.0503
</span>
<div class="content">
admin created New post in the Budapest group
</div>
</div>
<div class="community-map-pin">
<span class="latitude">
52.5167
</span>
<span class="longitude">
13.3833
</span>
<div class="content">
admin created New post in the Berlin group
</div>
</div>
<div class="community-map-pin">
<span class="latitude">
37.7833
</span>
<span class="longitude">
-122.4167
</span>
<div class="content">
SFO Group
</div>
</div>
</div>

View File

@ -0,0 +1,8 @@
<?php
/**
* Template of community statistics block.
*/
?>
<div>
<em><?php print $stats['people'];?></em> people in <em><?php print $stats['countries'];?></em> countries and <em><?php print $stats['user-groups'];?></em> established user groups all around the world.
</div>

View File

@ -0,0 +1,19 @@
<?php
/**
* Template of front page groups finder block.
*/
?>
<div>
<form>
<p>
Find the nearest usergroup in your region and meet with other stackers!
</p>
<input type="text" name="region"/>
<input type="submit" value="Find"/>
</form>
<h3>Not found?</h3>
<p>
Establish a new Openstack User Group in your city. Read our organizer tips About bootstrapping a local group and join to our fast growing vibrant community!
</p>
<a href="#">Register new user group</a>
</div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

View File

@ -72,7 +72,7 @@ h3 {
/* line 70, ../sass/custom.scss */
.blueline {
background: url('../images/header-line.gif?1383246258') repeat-x scroll 0 bottom rgba(0, 0, 0, 0);
background: url('../images/header-line.gif?1385579321') repeat-x scroll 0 bottom rgba(0, 0, 0, 0);
}
/* line 74, ../sass/custom.scss */
@ -362,42 +362,122 @@ nav.breadcrumb {
word-wrap: break-word;
}
/* line 46, ../sass-extensions/zen-grids/stylesheets/zen/_grids.scss */
.openstack-front .openstack-front-container:before, .openstack-front .openstack-front-container:after {
content: "";
display: table;
}
/* line 50, ../sass-extensions/zen-grids/stylesheets/zen/_grids.scss */
.openstack-front .openstack-front-container:after {
clear: both;
}
/* line 283, ../sass/custom.scss */
.openstack-front .region-openstack-front-first {
float: left;
width: 50%;
margin-left: 0%;
margin-right: -50%;
padding-left: 5px;
padding-right: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
}
/* line 286, ../sass/custom.scss */
.openstack-front .region-openstack-front-second {
float: left;
width: 25%;
margin-left: 50%;
margin-right: -75%;
padding-left: 5px;
padding-right: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
}
/* line 289, ../sass/custom.scss */
.openstack-front .region-openstack-front-third {
float: left;
width: 25%;
margin-left: 75%;
margin-right: -100%;
padding-left: 5px;
padding-right: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
}
/* line 292, ../sass/custom.scss */
.openstack-front .region-openstack-front-bottom-first {
float: left;
width: 50%;
margin-left: 0%;
margin-right: -50%;
padding-left: 5px;
padding-right: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
}
/* line 295, ../sass/custom.scss */
.openstack-front .region-openstack-front-bottom-second {
float: left;
width: 50%;
margin-left: 50%;
margin-right: -100%;
padding-left: 5px;
padding-right: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
}
/** Landing page upcoming events **/
/* line 279, ../sass/custom.scss */
/* line 302, ../sass/custom.scss */
.view-commons-events-upcoming {
background: #f2f6f7;
padding: 10px;
line-height: 1em;
}
/* line 284, ../sass/custom.scss */
/* line 307, ../sass/custom.scss */
.view-commons-events-upcoming .attachment-before,
.view-commons-events-upcoming .view-filters {
display: none;
}
/* line 288, ../sass/custom.scss */
/* line 311, ../sass/custom.scss */
.view-commons-events-upcoming .field-items, .view-commons-events-upcoming .field,
.view-commons-events-upcoming .field-item {
display: inline;
}
/* line 291, ../sass/custom.scss */
/* line 314, ../sass/custom.scss */
.view-commons-events-upcoming article {
padding-bottom: 1em;
}
/* line 294, ../sass/custom.scss */
/* line 317, ../sass/custom.scss */
.view-commons-events-upcoming header {
margin-bottom: 0.5em;
}
/* line 297, ../sass/custom.scss */
/* line 320, ../sass/custom.scss */
.view-commons-events-upcoming header a {
color: #1f7a95;
}
/* line 300, ../sass/custom.scss */
/* line 323, ../sass/custom.scss */
.view-commons-events-upcoming .field-item {
font-size: 0.85em;
}
/** Group page **/
/* line 312, ../sass/custom.scss */
/* line 335, ../sass/custom.scss */
.node-type-group .pane-commons-contributors-group-panel-pane-2,
.node-type-group article .links,
.node-type-group .rate-widget,
@ -405,10 +485,31 @@ nav.breadcrumb {
.node-type-group .field-name-field-group-location {
display: none;
}
/* line 315, ../sass/custom.scss */
/* line 338, ../sass/custom.scss */
.node-type-group #quicktabs-commons_bw {
background: #f2f6f7;
padding: 10px;
margin-top: 2em;
margin-bottom: 2em;
}
/** Community stats block **/
/* line 348, ../sass/custom.scss */
.pane-groups-homepage-groups-community-stats {
font-size: 130%;
text-align: center;
color: #7F7F7F;
/*border: 3px solid #D5D5D5;*/
border-bottom: 2px solid #D5D5D5;
border-top: 2px solid #D5D5D5;
font-family: 'PT Sans',serif;
padding: 5px;
}
/* line 349, ../sass/custom.scss */
.pane-groups-homepage-groups-community-stats h2 {
display: none;
}
/* line 352, ../sass/custom.scss */
.pane-groups-homepage-groups-community-stats em {
font-weight: bold;
}

View File

@ -0,0 +1,64 @@
<?php
/**
* @file
* Openstack Front panel implementation to present a Panels layout.
*/
$panel_prefix = isset($panel_prefix) ? $panel_prefix : '';
$panel_suffix = isset($panel_suffix) ? $panel_suffix : '';
?>
<div class="openstack-front panel-display clearfix" <?php if (!empty($css_id)): print "id=\"$css_id\""; endif; ?>>
<?php if ($content['os_top']): ?>
<div class="region openstack-front-top region-conditional-stack">
<div class="region-inner clearfix">
<?php print $content['os_top']; ?>
</div>
</div>
<?php endif; ?>
<div class="openstack-front-container">
<div class="region region-openstack-front-first">
<div class="region-inner clearfix">
<?php print $content['os_left']; ?>
</div>
</div>
<div class="region region-openstack-front-second">
<div class="region-inner clearfix">
<?php print $content['os_center']; ?>
</div>
</div>
<div class="region region-openstack-front-third">
<div class="region-inner clearfix">
<?php print $content['os_right']; ?>
</div>
</div>
</div>
<?php if ($content['os_middle']): ?>
<div class="region openstack-front-middle region-conditional-stack">
<div class="region-inner clearfix">
<?php print $content['os_middle']; ?>
</div>
</div>
<?php endif; ?>
<div class="openstack-front-container">
<div class="region region-openstack-front-bottom-first">
<div class="region-inner clearfix">
<?php print $content['os_bottom_left']; ?>
</div>
</div>
<div class="region region-openstack-front-bottom-second">
<div class="region-inner clearfix">
<?php print $content['os_bottom_right']; ?>
</div>
</div>
</div>
<?php if ($content['os_bottom']): ?>
<div class="region openstack-front-bottom region-conditional-stack">
<div class="region-inner clearfix">
<?php print $content['os_bottom']; ?>
</div>
</div>
<?php endif; ?>
</div>

View File

@ -0,0 +1,8 @@
#panels-dnd-main .region {margin-bottom: 5px}
#panels-dnd-main .region-openstack-front-first {float: left; width: 50%}
#panels-dnd-main .region-openstack-front-second {float: left; width: 24.5%; margin-left: 0.5%}
#panels-dnd-main .region-openstack-front-third {float: right; width: 24.5%}
#panels-dnd-main .region-openstack-front-bottom-first {float: left; width: 50%}
#panels-dnd-main .region-openstack-front-bottom-second {float: left; width: 49.5%; margin-left: 0.5%}
#panels-dnd-main .region-openstack-front-bottom {clear: both}
#panels-dnd-main .region-openstack-front-middle {clear: both}

View File

@ -0,0 +1,27 @@
<?php
/**
* Implementation of hook_panels_layouts()
* @return multitype:
*/
function openstack_openstack_front_panels_layouts() {
$items['openstack_front'] = array(
'title' => t('Openstack Front'),
'category' => t('Openstack Panels'),
'icon' => 'front.png',
'theme' => 'openstack_front',
'admin css' => 'openstack_front.admin.css',
'regions' => array(
'os_top' => t('Top (Conditional)'),
'os_left' => t('Left'),
'os_center' => t('Center'),
'os_right' => t('Right'),
'os_middle' => t('Middle (Conditional)'),
'os_bottom_left' => t('Bottom Left'),
'os_bottom_right' => t('Bottom Right'),
'os_bottom' => t('Bottom (Conditional)'),
),
);
return $items;
}

View File

@ -105,7 +105,8 @@ regions[bottom] = Page bottom
regions[page_top] = Page top
regions[page_bottom] = Page bottom
; Panels Module layouts
plugins[panels][layouts] = layouts/panels
; Various page elements output by the theme can be toggled on and off. The
; "features" control which of these check boxes display on the
@ -128,7 +129,7 @@ features[] = secondary_menu
; Set the default values of settings on the theme-settings.php form.
settings[zen_breadcrumb] = yes
settings[zen_breadcrumb_separator] = ' '
settings[zen_breadcrumb_separator] = ' <EFBFBD><EFBFBD><EFBFBD> '
settings[zen_breadcrumb_home] = 1
settings[zen_breadcrumb_trailing] = 0
settings[zen_breadcrumb_title] = 0

View File

@ -274,6 +274,29 @@ nav.breadcrumb {
}
}
.openstack-front {
$zen-column-count: 12;
$zen-gutter-width: 10px;
.openstack-front-container {
@include zen-grid-container;
}
.region-openstack-front-first {
@include zen-grid-item(6, 1);
}
.region-openstack-front-second {
@include zen-grid-item(3, 7);
}
.region-openstack-front-third {
@include zen-grid-item(3, 10);
}
.region-openstack-front-bottom-first {
@include zen-grid-item(6, 1);
}
.region-openstack-front-bottom-second {
@include zen-grid-item(6, 7);
}
}
/** Landing page upcoming events **/
.view-commons-events-upcoming {
@ -319,3 +342,22 @@ nav.breadcrumb {
margin-bottom: 2em;
}
}
/** Community stats block **/
.pane-groups-homepage-groups-community-stats {
h2 {
display: none;
}
em {
font-weight: bold;
}
font-size: 130%;
text-align: center;
color: #7F7F7F;
/*border: 3px solid #D5D5D5;*/
border-bottom: 2px solid #D5D5D5;
border-top: 2px solid #D5D5D5;
font-family: 'PT Sans',serif;
padding: 5px;
}