Produits Entr'ouvert » Intégrations graphiques Publik

#header #top #logo a {

	height: 100px;

	line-height: 100px;

	color: $primary-color;

	text-transform: uppercase;

	font-weight: normal;

}

#nav-wrapper {

	background: $nav-background;

	border-top: 1px solid #EAEAEA;

	border-bottom: 1px solid #EAEAEA;

	margin-bottom: 10px;

	div#nav > ul > li > a {

		border-radius: $border-radius;

	}

}

@media screen and ($max-mobile-viewport) {

	#header #top #logo a {

		display: block;

		height: 75px;

		overflow: hidden;

	}

}

.dashboard-cell-icons {

	position: absolute;

	right: 0rem;

	top: 0rem;

	z-index: 100;

}

.dashboard-cell-icons .add-to-dashboard,

.dashboard-cell-icons .remove-from-dashboard {

	display: inline-block;

	width: 41px;

	height: 37px;

	background: none center center no-repeat;

	background-size: 1rem;

	&.remove-from-dashboard {

		background-image: url(img/coeur-rouge.png);

		&:hover {

			background-image: url(img/coeur-vide.png);

		}

	}

	&.add-to-dashboard {

		background-image: url(img/coeur-vide.png);

		&:hover {

			background-image: url(img/coeur-rouge.png);

		}

	}

	&.remove-from-dashboard.new, &.add-to-dashboard.new {

		&::after {

			content: "";

			display: block;

			background-image: url(img/coeur-rouge.png);

			width: 100%;

			height: 100%;

			animation-name: favorite_pulse_animation;

			animation-duration: 3000ms;

			animation-iteration-count: 1;

			animation-timing-function: linear;

			opacity: 0;

		}

	}

}

@keyframes favorite_pulse_animation {

	0% { transform: scale(0.5); opacity: 1;}

	20% { transform: scale(1); }

	40% { transform: scale(0.5); opacity: 1;}

	60% { transform: scale(1); }

	80% { transform: scale(0.5); }

	100% { opacity: 0; display: black; }

}

.gru-content .dashboard-cell {

	border: 0;

	.cell {

		margin-left: 0;

		margin-right: 0;

	}

}

.activite-favorite {

	position: relative;

	h3 {

		@extend %title;

		background: #019D8B;

	}

	.activite-favorite-content {

		margin-left: 1rem;

	}

}

$primary-color: #018B9D;

$width: 1160px;

$font-color: #666;

$font-size: 0.938em;

$nav-background: #fafafa;

$nav-submenu-background: #eee;

$nav-submenu-color: #333;

$nav-color: $font-color;

$nav-active-color: $primary-color;

$nav-item-selected-color: white;

$nav-item-hover-color: white;

$border-radius: 4px;

$button-background: $primary-color;

$title-background: $primary-color;

$title-color: white;

$nav-mobile-mode: bottom-bar;

$cell-image-position: top;

$cell-image-padding: none;

{

  "label": "Braine l'Alleud",

  "variables": {

    "theme_color": "#018B9D"

  },

  "settings": {

    "combo": {

      "COMBO_ASSET_SLOTS.update": {

        "header:background": { "label": "Têtière : fond" },

        "header:logo": { "label": "Têtière : logo" }

      },

      "JSON_CELL_TYPES.update": {

        "activite-favorite": {

          "url": "https://perso.entrouvert.org/~nroche/contenu.json",

          "name": "Activité favorite",

          "cache_duration": 60,

          "force_async": false,

          "form": [{"varname": "activite", "type": "string", "label": "Activité"}]

        }

      }

    }

  }

}

$(function() {

  var $sidebar = $('#sidebar');

  /* add & remove tile */

  $('div.cell, div#sidebar').delegate('a.remove-from-dashboard', 'click', function(e) {

    var dashboard = $(this).parents('.dashboardcell');

    var cell = $(this).parents('.cell')[0];

    var link = $(this);

    $.ajax({

      url: $(this).attr('href'),

      success: function(data) {

        if (dashboard.length) {

          /* if the user is on the dashboard, remove tile from screen */

          $(cell).hide({

            duration: 300,

            complete: function() {

              $(cell).remove();

            }

          });

        } else {

          $(link).hide();

          $(link).parent().find('.cell-added').remove();

          var $add_to_dashboard = $('<a class="add-to-dashboard new"></a>');

          $add_to_dashboard.attr('href', data.cell_data.add_url);

          $add_to_dashboard.appendTo($(link).parent());

          $(link).remove();

        }

      }

    });

    e.stopPropagation();

    return false;

  });

  $('div.cell, div#sidebar').delegate('a.add-to-dashboard', 'click', function(e) {

    var link = $(this);

    $.ajax({

      url: $(this).attr('href'),

      success: function(data) {

        $(link).hide();

        var $added_info = $('<span class="cell-added">Ajouté à votre tableau de bord</span>');

        $added_info.appendTo($(link).parent());

        setTimeout(function() { $added_info.remove(); }, 3000);

        var $remove_from_dashboard = $('<a class="remove-from-dashboard new"></a>');

        $remove_from_dashboard.attr('href', data.cell_data.remove_url);

        $remove_from_dashboard.appendTo($(link).parent());

        $(link).remove();

      }

    });

    e.stopPropagation();

    return false;

  });

});

@charset "UTF-8";

@import 'vars';

@import '../includes/publik';

@import 'tiles';

@import 'custom';

{% load dashboard %}

<h3>

  Activité {{ activite }}

</h3>

<div class="activite-favorite-content">

  {% include "combo/dashboard_cell_icons.html" %}

  {% if not in_dashboard %}

  Desciptif de l'activité {{ activite }}

  {% else %}

  Contenu :

  <ul>

    {% for content in json.data %}

    <li>

      <a href="{{ content.url }}">

        {{ content.title }}

      </a>

    </li>

    {% endfor %}

  </ul>

  {% endif %}

</div>