Commit dcc0cd3d authored by Arnaud Fabre's avatar Arnaud Fabre

Improves frontend management

- Move static files from core app to root
- Uses bower to manage front-end 3rd parties libs
- Uses gulp to build front-end
parent 5f05fd12
{
"directory": "core/static/libs"
"directory": "static/libs"
}
*.sqlite3
celerybeat-*
core/static/libs/*
memopol/config.json
# SASS Cache
.sass-cache
# libs
static/libs
node_modules
CACHE/*
# compiled css
static/stylesheets/*.min.css
# Emacs backup
# From https://github.com/github/gitignore/blob/master/Python.gitignore
# settings
memopol/config.json
# Byte-compiled / optimized / DLL files
__pycache__/
*.py[cod]
# C extensions
*.so
# Distribution / packaging
.Python
env/
venv/
ve/
build/
var/
# Installer logs
pip-log.txt
pip-delete-this-directory.txt
# Unit test / coverage reports
htmlcov/
.tox/
.coverage
.cache
nosetests.xml
coverage.xml
# Translations
*.mo
*.pot
# Django stuff:
*.log
@font-face{
font-family: 'propagandaregular';
src: url('../font/propagan-webfont.eot');
src: url('../font/propagan-webfont.eot?#iefix') format('embedded-opentype'), url('../font/propagan-webfont.woff') format('woff'), url('../font/propagan-webfont.ttf') format('truetype'), url('../font/propagan-webfont.svg#propagandaregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: 'sansus_webissimoitalic';
src: url('../font/sansus_webissimo-italic-webfont-webfont.eot');
src: url('../font/sansus_webissimo-italic-webfont-webfont.eot?#iefix') format('embedded-opentype'), url('../font/sansus_webissimo-italic-webfont-webfont.woff') format('woff'), url('../font/sansus_webissimo-italic-webfont-webfont.ttf') format('truetype'), url('../font/sansus_webissimo-italic-webfont-webfont.svg#sansus_webissimoitalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: 'sansus_webissimoregular';
src: url('../font/sansus_webissimo-regular-webfont-webfont.eot');
src: url('../font/sansus_webissimo-regular-webfont-webfont.eot?#iefix') format('embedded-opentype'), url('../font/sansus_webissimo-regular-webfont-webfont.woff') format('woff'), url('../font/sansus_webissimo-regular-webfont-webfont.ttf') format('truetype'), url('../font/sansus_webissimo-regular-webfont-webfont.svg#sansus_webissimoregular') format('svg');
font-weight: normal;
font-style: normal;
}
td {
vertical-align: middle;
}
body {
background-color: #E5E5E5;
font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1;
}
#header {
padding: 0px 20px;
height: 78px;
line-height: 45px;
}
.row {
width: 940px;
max-width: 100%;
min-width: 768px;
margin: 0px auto;
}
#header, #footer {
background: none repeat scroll 0px 0px #5B8EDC;
color: #FFF;
vertical-align: middle;
}
#header img {
float: left;
width: 74px;
}
#header h1 {
margin: 0px;
}
h1 {
font-size: 44px;
}
#header h1 a {
line-height: 10px;
font-family: propagandaregular;
font-size: 26px;
}
#header a {
color: #FFF;
text-decoration: none;
}
#header p {
font-style: italic;
padding-left: 20px;
margin-bottom: 17px;
}
p {
font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
font-weight: normal;
font-size: 14px;
line-height: 1.6;
margin-bottom: 17px;
}
.nav-bar {
margin-top: 0px;
background-color: #FFF;
border-bottom: 1px solid #EEE;
height: 30px;
line-height: 30px;
height: 40px;
padding: 0px;
}
.nav-bar > li {
float: left;
display: block;
position: relative;
padding: 0px;
margin: 0px;
line-height: 38px;
}
.nav-bar > li > a {
padding: 0px 20px;
font-size: 14px;
text-decoration: none;
color: #000;
}
li {
text-decoration: none;
list-style: inside;
}
.panel. {
background: none repeat scroll 0% 0% #5B8EDC;
color: #FFF;
border-color: #2284A1;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
}
.panel {
background: none repeat scroll 0% 0% #F2F2F2;
border: 1px solid #E6E6E6;
margin: 0px 20px 22px;
padding: 20px;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
font-weight: bold;
color: #222;
text-rendering: optimizelegibility;
line-height: 1.1;
margin-bottom: 14px;
margin-top: 14px;
}
h2, h3, h4 {
font-family: sansus_webissimoregular;
}
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
h3 small { font-size: 0.6em; }
.column, .columns {
float: left;
min-height: 1px;
padding: 0px 0px;
position: relative;
}
.large-12.main {
background: white;
padding: 10px;
width: 920px;
}
.large-8 {
width: 66.6667%;
} .large-4 {
width: 33.3333%;
}
#footer {
padding: 20px 0px;
text-align: center;
line-height: 20px;
font-size: 14px;
}
#footer ul {
margin-bottom: 11px;
}
#footer li {
display: inline;
}
#footer a {
color: #FFF;
text-decoration: underline;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
- extends "base.html"
- block content
.row
.large-8.columns
.col-md-8
%p
Actually Memopol is reachable only in <b>reduced functionality mode</b>.
By the way, you could access to <a href="{% url 'legislature:representative_index' %}">the actual list of MEPs</a>.
Memopol is reachable only in <b>reduced functionality mode</b>.
By the way, you could access to
<a href="{% url 'legislature:representative_index' %}">the list of MEPs</a>.
%p
You can help on building the new Memopol by <a href="https://wiki.laquadrature.net/Projects/Memopol/Roadmap">coding, translating, de signing, funding, etc...</a>.
%p
<a href="http://memopol.org">Memopol Blog</a> is available as well as the new <a href="http://git.laquadrature.net/memopol/memopol_political_memory/issues">bugtracking system</a>
.large-4.columns
- include "core/blocks/what_is_memopol.html"
.col-md-4
.panel.panel-default
.panel-body
%p
<a href="http://memopol.org">Memopol Blog</a> is available as well as the new
<a href="http://git.laquadrature.net/memopol/memopol/issues">
bugtracking system</a>
%h3
What is memopol?
%p
Political Memory is a tool designed by La Quadrature du Net to help
European citizens to reach members of European Parliament (MEPs) and
track their voting records on issues related to fundamental
freedoms online. <em><a href="">More...</a></em>
var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
var gzip = require('gulp-gzip');
var livereload = require('gulp-livereload');
var gzip_options = {
threshold: '1kb',
gzipOptions: {
level: 9
}
};
var less_src = 'static/less/*.less';
/* Compile Our Sass */
gulp.task('less', function() {
return gulp.src(less_src)
.pipe(less())
.pipe(gulp.dest('static/stylesheets'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('static/stylesheets'))
// .pipe(gzip(gzip_options))
// .pipe(gulp.dest('static/stylesheets'))
.pipe(livereload());
});
/* Watch Files For Changes */
gulp.task('watch', function() {
livereload.listen();
gulp.watch(less_src, ['less']);
/* Trigger a live reload on any Django template changes */
gulp.watch('**/templates/*').on('change', livereload.changed);
});
gulp.task('default', ['less', 'watch']);
......@@ -163,10 +163,13 @@ COMPRESS_ROOT = 'static/'
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
# other finders..
# Compressor finder
'compressor.finders.CompressorFinder',
)
# Use compressor even in debug
COMPRESS_ENABLED = True
COMPRESS_PRECOMPILERS = (
# ('text/coffeescript', 'coffee --compile --stdio'),
('text/less', 'lessc {infile} {outfile}'),
......
(function($){
$(function(){
$(document).foundationMediaQueryViewer();
$(document).foundationAlerts();
$(document).foundationAccordion();
$(document).tooltips();
$('input, textarea').placeholder();
$(document).foundationButtons();
$(document).foundationNavigation();
$(document).foundationCustomForms();
$(document).foundationTabs({callback:$.foundation.customForms.appendCustomMarkup});
$("#featured").orbit();
// UNCOMMENT THE LINE YOU WANT BELOW IF YOU WANT IE8 SUPPORT AND ARE USING .block-grids
// $('.block-grid.two-up>li:nth-child(2n+1)').css({clear: 'left'});
// $('.block-grid.three-up>li:nth-child(3n+1)').css({clear: 'left'});
// $('.block-grid.four-up>li:nth-child(4n+1)').css({clear: 'left'});
// $('.block-grid.five-up>li:nth-child(5n+1)').css({clear: 'left'});
});
})(jQuery);
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
(function ($){
$.fn.foundationAccordion = function (options) {
$(document).on('click.fndtn', '.accordion li', function () {
var flyout = $(this).children('.content').first();
$('.accordion .content').not(flyout).hide().parent('li').removeClass('active');
flyout.show(0, function () {
flyout.parent('li').addClass('active');
});
});
};
})( jQuery );
(function ($) {
$.fn.foundationAlerts = function (options) {
var settings = $.extend({
callback: $.noop
}, options);
$(document).on("click", ".alert-box a.close", function (event) {
event.preventDefault();
$(this).closest(".alert-box").fadeOut(function (event) {
$(this).remove();
// Do something else after the alert closes
settings.callback();
});
});
};
})(jQuery);
(function ($) {
$.fn.foundationButtons = function(options) {
// Prevent event propagation on disabled buttons
$(document).on('click.fndtn', '.button.disabled', function (e) {
e.preventDefault();
});
$('.button.dropdown > ul', this).addClass('no-hover');
$(document).on('click.fndtn', '.button.dropdown, .button.dropdown.split span', function (e) {
// Stops further propagation of the event up the DOM tree when clicked on the button.
// Events fired by its descendants are not being blocked.
if (e.target === this) {
e.stopPropagation();
}
});
$(document).on('click.fndtn', '.button.dropdown.split span', function (e) {
e.preventDefault();
$('.button.dropdown', this).not($(this).parent()).children('ul').removeClass('show-dropdown');
$(this).siblings('ul').toggleClass('show-dropdown');
});
$(document).on('click.fndtn', '.button.dropdown:not(.split)', function (e) {
$('.button.dropdown', this).not(this).children('ul').removeClass('show-dropdown');
$(this).children('ul').toggleClass('show-dropdown');
});
$(document).on('click.fndtn', 'body, html', function () {
$('.button.dropdown ul').removeClass('show-dropdown');
});
// Positioning the Flyout List
var normalButtonHeight = $('.button.dropdown:not(.large):not(.small):not(.tiny)', this).outerHeight() - 1,
largeButtonHeight = $('.button.large.dropdown', this).outerHeight() - 1,
smallButtonHeight = $('.button.small.dropdown', this).outerHeight() - 1,
tinyButtonHeight = $('.button.tiny.dropdown', this).outerHeight() - 1;
$('.button.dropdown:not(.large):not(.small):not(.tiny) > ul', this).css('top', normalButtonHeight);
$('.button.dropdown.large > ul', this).css('top', largeButtonHeight);
$('.button.dropdown.small > ul', this).css('top', smallButtonHeight);
$('.button.dropdown.tiny > ul', this).css('top', tinyButtonHeight);
$('.button.dropdown.up:not(.large):not(.small):not(.tiny) > ul', this).css('top', 'auto').css('bottom', normalButtonHeight - 2);
$('.button.dropdown.up.large > ul', this).css('top', 'auto').css('bottom', largeButtonHeight - 2);
$('.button.dropdown.up.small > ul', this).css('top', 'auto').css('bottom', smallButtonHeight - 2);
$('.button.dropdown.up.tiny > ul', this).css('top', 'auto').css('bottom', tinyButtonHeight - 2);
};
})( jQuery );
This diff is collapsed.
(function ($) {
$.fn.foundationMediaQueryViewer = function (options) {
var settings = $.extend(options,{toggleKey:77}); // // Press 'M'
$(document).on("keyup.mediaQueryViewer", ":input", function(e){
if (e.which === settings.toggleKey) {
e.stopPropagation();
}
});
$(document).on("keyup.mediaQueryViewer", function(e) {
var $mqViewer = $('#fqv');
if (e.which === settings.toggleKey) {
if ($mqViewer.length > 0) {
$mqViewer.remove();
} else {
$('body').prepend('<div id="fqv" style="position:fixed;top:4px;left:4px;z-index:999;color:#fff;"><p style="font-size:12px;background:rgba(0,0,0,0.75);padding:5px;margin-bottom:1px;line-height:1.2;"><span class="left">Media:</span> <span style="font-weight:bold;" class="show-for-xlarge">Extra Large</span><span style="font-weight:bold;" class="show-for-large">Large</span><span style="font-weight:bold;" class="show-for-medium">Medium</span><span style="font-weight:bold;" class="show-for-small">Small</span><span style="font-weight:bold;" class="show-for-landscape">Landscape</span><span style="font-weight:bold;" class="show-for-portrait">Portrait</span><span style="font-weight:bold;" class="show-for-touch">Touch</span></p></div>');
}
}
});
};
})(jQuery);
\ No newline at end of file
(function ($){
$.fn.foundationNavigation = function (options) {
var lockNavBar = false;
// Windows Phone, sadly, does not register touch events :(
if (Modernizr.touch || navigator.userAgent.match(/Windows Phone/i)) {
$(document).on('click.fndtn touchstart.fndtn', '.nav-bar a.flyout-toggle', function (e) {
e.preventDefault();
var flyout = $(this).siblings('.flyout').first();
if (lockNavBar === false) {
$('.nav-bar .flyout').not(flyout).slideUp(500);
flyout.slideToggle(500, function () {
lockNavBar = false;
});
}
lockNavBar = true;
});
$('.nav-bar>li.has-flyout', this).addClass('is-touch');
} else {
$('.nav-bar>li.has-flyout', this).hover(function () {
$(this).children('.flyout').show();
}, function () {
$(this).children('.flyout').hide();
});
}
};
})( jQuery );
This diff is collapsed.
This diff is collapsed.
(function ($) {
$.fn.foundationTabs = function (options) {
var settings = $.extend({
callback: $.noop
}, options);
var activateTab = function ($tab) {
var $activeTab = $tab.closest('dl').find('dd.active'),
contentLocation = $tab.children('a').attr("href") + 'Tab';
// Strip off the current url that IE adds
contentLocation = contentLocation.replace(/^.+#/, '#');
//Make Tab Active
$activeTab.removeClass('active');
$tab.addClass('active');
//Show Tab Content
$(contentLocation).closest('.tabs-content').children('li').removeClass('active').hide();
$(contentLocation).css('display', 'block').addClass('active');
};
$(document).on('click.fndtn', 'dl.tabs dd a', function (event){
activateTab($(this).parent('dd'));
});
if (window.location.hash) {
activateTab($('a[href="' + window.location.hash + '"]').parent('dd'));
settings.callback();
}
};
})(jQuery);
\ No newline at end of file
/*
* jQuery Foundation Tooltip Plugin 2.0.1
* http://foundation.zurb.com
* Copyright 2012, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
/*jslint unparam: true, browser: true, indent: 2 */
;(function ($) {
'use strict';
var settings = {
bodyHeight : 0,
targetClass : '.has-tip',
tooltipClass : '.tooltip',
tipTemplate : function (selector, content) {
return '<span data-selector="' + selector + '" class="' + settings.tooltipClass.substring(1) + '">' + content + '<span class="nub"></span></span>';
}
},
methods = {
init : function (options) {
return this.each(function () {
var $body = $('body');
if (Modernizr.touch) {
$body.on('click.tooltip touchstart.tooltip touchend.tooltip', settings.targetClass, function (e) {
e.preventDefault();
$(settings.tooltipClass).hide();
methods.showOrCreateTip($(this));
});
$body.on('click.tooltip touchstart.tooltip touchend.tooltip', settings.tooltipClass, function (e) {
e.preventDefault();
$(this).fadeOut(150);
});
} else {
$body.on('mouseenter.tooltip mouseleave.tooltip', settings.targetClass, function (e) {
var $this = $(this);
if (e.type === 'mouseenter') {
methods.showOrCreateTip($this);
} else if (e.type === 'mouseleave') {
methods.hide($this);
}
});
}
});
},
showOrCreateTip : function ($target) {
var $tip = methods.getTip($target);
if ($tip && $tip.length > 0) {
methods.show($target);
} else {
methods.create($target);
}
},
getTip : function ($target) {
var selector = methods.selector($target),
tip = null;
if (selector) {
tip = $('span[data-selector=' + selector + ']' + settings.tooltipClass);
}
return (tip.length > 0) ? tip : false;
},
selector : function ($target) {
var id = $target.attr('id'),
dataSelector = $target.data('selector');
if (id === undefined && dataSelector === undefined) {
dataSelector = 'tooltip' + Math.random().toString(36).substring(7);
$target.attr('data-selector', dataSelector);
}
return (id) ? id : dataSelector;
},