added custom layout to panles, created thematique anchor links menu

This commit is contained in:
2017-02-07 17:38:51 +01:00
parent e2b8a1ae80
commit 46db2145e5
25 changed files with 495 additions and 67 deletions
+30 -12
View File
@@ -76,31 +76,49 @@ body.no-sidebars #center {
#node-63 {
color: #1f04a1; }
.panel-2col-stacked {
#thematique-anchor-links {
padding: 1em 0; }
#thematique-anchor-links ul {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0;
margin: 0; }
#thematique-anchor-links ul li {
list-style: none;
padding: 0;
margin: 0; }
#thematique-anchor-links ul li a {
color: #1f04a1;
text-decoration: none;
font-weight: 600; }
.panel-thematique {
background-position: center;
background-size: contain;
background-repeat: no-repeat; }
.panel-2col-stacked .field-name-field-emvideo img {
.panel-thematique .field-name-field-emvideo img {
width: 100%; }
.panel-2col-stacked .panel-col-top h2 {
.panel-thematique header.top h2 {
font-size: 2.5em;
font-weight: 300;
color: #fb3f08; }
.panel-2col-stacked .center-wrapper .panel-col-first {
width: 70%; }
.panel-2col-stacked .center-wrapper .panel-col-last {
width: 30%; }
.panel-2col-stacked .center-wrapper .panel-col-last .field-name-body {
display: none; }
.panel-2col-stacked .panel-col-bottom .field-name-field-episodes > .field-items {
.panel-thematique .left .field-name-body {
display: none; }
.panel-thematique .bottom .field-name-field-episodes > .field-items {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-pack: justify;
justify-content: space-between; }
.panel-2col-stacked .panel-col-bottom .field-name-field-episodes > .field-items > .field-item {
.panel-thematique .bottom .field-name-field-episodes > .field-items > .field-item {
display: block;
width: 19%; }
.panel-2col-stacked .panel-col-bottom .field-name-body {
.panel-thematique .bottom .field-name-body {
display: none; }
#mini-panel-th_matique {
@@ -75,8 +75,28 @@ body{
color:$bleu;
}
#thematique-anchor-links{
padding:1em 0;
ul{
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
padding:0; margin:0;
li{
list-style: none;
padding:0; margin: 0;
a{
color: $bleu;
text-decoration: none;
font-weight: 600;
}
}
}
}
// thematique
.panel-2col-stacked{
.panel-thematique{
background-position: center;
background-size: contain;
@@ -85,21 +105,19 @@ body{
.field-name-field-emvideo img{
width: 100%;
}
.panel-col-top h2{
header.top h2{
font-size: 2.5em;
font-weight: 300;
color: $rouge;
}
.center-wrapper{
.panel-col-first{
width:70%;
}
.panel-col-last{
width:30%;
.field-name-body{
display:none;
}
.right{
}
.left{
.field-name-body{
display:none;
}
}
.panel-col-bottom{
.bottom{
.field-name-field-episodes{
// letter-spacing: -0.25em;
&>.field-items{
@@ -0,0 +1,18 @@
.panel-thematique{
letter-spacing: -0.25em;
}
.panel-thematique>*{
letter-spacing: normal;
}
.panel-thematique .right,.panel-thematique .left{
display: inline-block; vertical-align: top;
}
.panel-thematique .right{
width:75%;
}
.panel-thematique .left{
width: 25%;
}
.panel-thematique .bottom{
}
@@ -0,0 +1,19 @@
<?php
/**
* @file
* Plugin definition.
*/
$plugin = array(
'title' => t('Clameur'),
'category' => t('Clameur'),
'icon' => 'clameur.png',
'theme' => 'panels_clameur',
'css' => 'clameur.css',
'regions' => array(
'top' => t('Top'),
'left' => t('Left side'),
'right' => t('Right side'),
'bottom' => t('Bottom'),
),
);
Binary file not shown.

After

Width:  |  Height:  |  Size: 193 B

@@ -0,0 +1,15 @@
<section class="panel-thematique" <?php if (!empty($css_id)) {print "id=\"$css_id\"";} ?>>
<header class="top">
<?php print $content['top']; ?>
</header>
<section class="right">
<?php print $content['left']; ?>
</section>
<section class="left">
<?php print $content['right']; ?>
</section>
<section class="bottom">
<?php print $content['bottom']; ?>
</section>
</section>
@@ -0,0 +1,15 @@
<?php
/**
* @file
* Implementation of hook_panels_layouts().
*/
// Plugin definition.
$plugin = array(
'title' => t('Column'),
'category' => t('Columns: 1'),
'icon' => 'column.png',
'theme' => 'panels_column',
'css' => 'column.css',
'regions' => array('middle' => t('Middle column')),
);
Binary file not shown.

After

Width:  |  Height:  |  Size: 122 B

@@ -0,0 +1,15 @@
<?php
/**
* @file
* Template for a 3 column panel layout.
*
* This template provides a very simple "one column" panel display layout.
*
* Variables:
* - $id: An optional CSS id to use for the layout.
* - $content: An array of content, each item in the array is keyed to one
* panel of the layout. This layout supports the following sections:
* $content['middle']: The only panel in the layout.
*/
?>
<?php print $content['middle']; ?>
@@ -0,0 +1,11 @@
<?php
// dsm($vars, 'vars');
$display = $vars['display'];
$node_ctx = $display->context['requiredcontext_entity:node_1'];
// dsm($node_ctx, 'node_ctx');
// change css id with node alias to be able to link it with anchors on top menu
$vars['css_id'] = drupal_get_path_alias('node/'.$node_ctx->data->nid);
// dsm($vars['css_id'], 'css_id');
@@ -0,0 +1,4 @@
<?php
// dsm($vars, 'vasr');
@@ -42,12 +42,6 @@
* @see theme_field()
*/
?>
<!--
THIS FILE IS NOT USED AND IS HERE AS A STARTING POINT FOR CUSTOMIZATION ONLY.
See http://api.drupal.org/api/function/theme_field/7 for details.
After copying this file to your theme's folder and customizing it, remove this
HTML comment.
-->
<section class="<?php print $classes; ?>"<?php print $attributes; ?>>
<?php if (!$label_hidden): ?>
<div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>:&nbsp;</div>
@@ -0,0 +1,60 @@
<?php
/**
* @file Panels-pane.tpl.php
* Main panel pane template.
*
* Variables available:
* - $pane->type: the content type inside this pane
* - $pane->subtype: The subtype, if applicable. If a view it will be the
* view name; if a node it will be the nid, etc.
* - $title: The title of the content
* - $content: The actual content
* - $links: Any links associated with the content
* - $more: An optional 'more' link (destination only)
* - $admin_links: Administrative links associated with the content
* - $feeds: Any feed icons or associated with the content
* - $display: The complete panels display object containing all kinds of
* data including the contexts and all of the other panes being displayed.
*/
?>
<?php if ($pane_prefix): ?>
<?php print $pane_prefix; ?>
<?php endif; ?>
<div class="<?php print $classes; ?>" <?php print $id; ?> <?php print $attributes; ?>>
<?php if ($admin_links): ?>
<?php print $admin_links; ?>
<?php endif; ?>
<?php print render($title_prefix); ?>
<?php if ($title): ?>
<<?php print $title_heading; ?><?php print $title_attributes; ?>>
<?php print $title; ?>
</<?php print $title_heading; ?>>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($feeds): ?>
<div class="feed">
<?php print $feeds; ?>
</div>
<?php endif; ?>
<div class="pane-content">
<?php print render($content); ?>
</div>
<?php if ($links): ?>
<div class="links">
<?php print $links; ?>
</div>
<?php endif; ?>
<?php if ($more): ?>
<div class="more-link">
<?php print $more; ?>
</div>
<?php endif; ?>
</div>
<?php if ($pane_suffix): ?>
<?php print $pane_suffix; ?>
<?php endif; ?>