Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
La Quadrature du Net
piphone
piphone-front
Commits
63ef1931
Commit
63ef1931
authored
Feb 03, 2017
by
okhin
Browse files
Fixing the mep filter
parent
f6eae023
Pipeline
#830
passed with stage
in 1 second
Changes
6
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
static/css/piphone.css
View file @
63ef1931
/* We need some space for the sidebar */
header
,
main
,
footer
{
padding-left
:
300px
;
}
@media
only
screen
and
(
max-width
:
992px
)
{
header
,
main
,
footer
{
padding-left
:
0
;
}
.collection.contact
.wrapper
{
overflow
:
auto
;
overflow-x
:
none
;
max-height
:
60vmax
;
cursor
:
pointer
;
}
templates/argumentation.html
View file @
63ef1931
<div
class=
"row"
>
<div
class=
"container"
>
<h1
class=
"header center-on-smal-only"
>
{{ _("Arguments") }}
</h1>
<h4
class=
"light center-on-small-only"
>
{{ _("Those are arguments to help you during a call to a representative.") }}
</h4
>
<ul
class=
"collapsible popout"
data-collapsible=
"accordions"
>
<repeat
group=
"{{ @arguments }}"
value=
"{{ @argument }}"
counter=
"{{ @key }}"
>
<li>
<div
class=
"collapsible-header"
>
{{ @argument.title}}
</div>
<div
class=
"collapsible-body"
><span>
{{ @argument.text }}
</span></div>
</li>
</repeat>
</ul>
</div>
<div
class=
"container"
>
<h1
class=
"header center-on-smal-only"
>
{{ _("Arguments") }}
</h1>
<p
class=
"light center-on-small-only"
>
{{ _("Those are arguments to help you during a call to a representative.") }}
</p
>
<ul
class=
"collapsible popout"
data-collapsible=
"accordions"
>
<repeat
group=
"{{ @arguments }}"
value=
"{{ @argument }}"
counter=
"{{ @key }}"
>
<li>
<div
class=
"collapsible-header"
>
{{ @argument.title}}
</div>
<div
class=
"collapsible-body"
><span>
{{ @argument.text }}
</span></div>
</li>
</repeat>
</ul>
</div>
</div>
templates/contactslist.html
View file @
63ef1931
...
...
@@ -8,17 +8,8 @@
</div>
</div>
</nav>
<repeat
group=
"{{ @contacts }}"
value=
"{{ @contact }}"
>
<li
class=
"collection-item avatar"
data-json=
'{{ json_encode(@contact) }}'
>
<img
src=
"<check if="
{{
@
contact.photo =
=
''
}}"
>
/static/img/placeholder.jpg
<false>
{{ @contact.photo }}
</false></check>
" class="circle">
<span
class=
"title"
>
{{ @contact.full_name }}
</span>
<ul>
<repeat
group=
"{{ @contact.groups }}"
value=
"{{ @group }}"
>
<li
class=
"chip"
>
{{ @group.name }}
</li>
</repeat>
</ul>
</li>
</repeat>
<div
class=
"wrapper"
data-json=
'{{ json_encode(@contacts) }}'
>
</div>
</ul>
</div>
<!-- contacts list -->
...
...
@@ -32,33 +23,89 @@ $(document).ready(function() {
},
limit
:
20
,
});
var
random
=
Math
.
floor
((
Math
.
random
()
*
$
(
'
.collection-item
'
).
length
));
$
(
'
.collection-item
'
).
click
(
function
(){
update_mep
(
$
(
this
));
});
function
update_mep
(
element
)
{
var
contact
=
JSON
.
parse
(
$
(
element
).
attr
(
'
data-json
'
));
if
(
contact
[
'
photo
'
]
!==
''
)
{
$
(
'
#contact-image
'
).
attr
(
'
src
'
,
contact
[
'
photo
'
]);
};
$
(
'
#contact-full_name
'
).
html
(
contact
[
'
first_name
'
]
+
'
'
+
contact
[
'
last_name
'
]);
$
(
'
#form-contact
'
).
attr
(
'
action
'
,
'
/call/
'
+
contact
[
'
id
'
]);
$
(
'
#contact_id
'
).
attr
(
'
value
'
,
contact
[
'
id
'
]);
$
(
'
.groups
'
).
each
(
function
()
{
var
group_type
=
$
(
this
).
attr
(
'
data-name
'
);
var
content
=
'
<ul class="groups" data-name="
'
+
group_type
+
'
">
'
+
group_type
;
contact
[
'
groups
'
].
forEach
(
function
(
group
)
{
if
(
group
[
'
type
'
]
===
group_type
)
{
content
+=
'
<li class="chip">
'
+
group
[
'
name
'
]
+
'
</li>
'
;
}
});
content
+=
'
</ul>
'
;
$
(
this
).
html
(
content
);
$
(
'
#search
'
).
change
(
function
()
{
var
contacts
=
JSON
.
parse
(
wrapper
.
attr
(
'
data-json
'
));
contacts
=
contacts
.
filter
(
function
(
contact
)
{
return
contact
[
'
full_name
'
].
startsWith
(
$
(
'
#search
'
).
val
());
});
$
(
'
#contact-phone
'
).
attr
(
'
href
'
,
'
tel:
'
+
contact
[
'
phone
'
]);
$
(
'
#contact-phone
'
).
text
(
contact
[
'
phone
'
]);
};
list_meps
(
contacts
,
$
(
'
.contact .wrapper
'
));
});
var
wrapper
=
$
(
'
.contact .wrapper
'
);
var
contacts
=
JSON
.
parse
(
wrapper
.
attr
(
'
data-json
'
));
list_meps
(
contacts
,
wrapper
);
var
random
=
Math
.
floor
((
Math
.
random
()
*
$
(
'
.collection-item
'
).
length
));
update_mep
(
$
(
'
.collection-item
'
).
eq
(
random
));
});
function
list_meps
(
contacts
,
wrapper
)
{
contacts
=
contacts
.
sort
(
function
(
a
,
b
)
{
if
(
a
[
'
last_name
'
]
<
b
[
'
last_name
'
])
{
return
-
1
;
};
if
(
a
[
'
last_name
'
]
>
b
[
'
last_name
'
])
{
return
1
;
};
return
0
;
});
// We need to empty the wrapper first
wrapper
.
empty
();
contacts
.
forEach
(
function
(
contact
)
{
display_mep
(
contact
).
appendTo
(
wrapper
);
});
};
function
display_mep
(
contact
)
{
var
li
=
$
(
'
<li />
'
)
.
addClass
(
'
collection-item avatar
'
)
.
click
(
function
()
{
update_mep
(
$
(
this
));
})
.
attr
(
'
data-json
'
,
JSON
.
stringify
(
contact
));
if
(
contact
[
'
photo
'
]
===
''
)
{
$
(
'
<img>
'
).
addClass
(
'
circle
'
)
.
attr
(
'
src
'
,
'
/static/img/placeholder.jpg
'
)
.
appendTo
(
li
);
}
else
{
$
(
'
<img>
'
).
addClass
(
'
circle
'
)
.
attr
(
'
src
'
,
contact
.
photo
)
.
appendTo
(
li
);
};
$
(
'
<span />
'
).
addClass
(
'
title
'
)
.
text
(
contact
[
'
full_name
'
])
.
appendTo
(
li
);
var
groups
=
$
(
'
<ul />
'
)
.
appendTo
(
li
);
contact
[
'
groups
'
].
forEach
(
function
(
group
)
{
$
(
'
<li />
'
).
addClass
(
'
chip
'
)
.
text
(
group
[
'
name
'
])
.
appendTo
(
groups
);
});
return
li
;
};
function
update_mep
(
element
)
{
var
contact
=
JSON
.
parse
(
$
(
element
).
attr
(
'
data-json
'
));
if
(
contact
[
'
photo
'
]
!==
''
)
{
$
(
'
#contact-image
'
).
attr
(
'
src
'
,
contact
[
'
photo
'
]);
};
$
(
'
#contact-full_name
'
).
html
(
contact
[
'
first_name
'
]
+
'
'
+
contact
[
'
last_name
'
]);
$
(
'
#form-contact
'
).
attr
(
'
action
'
,
'
/call/
'
+
contact
[
'
id
'
]);
$
(
'
#contact_id
'
).
attr
(
'
value
'
,
contact
[
'
id
'
]);
$
(
'
.groups
'
).
each
(
function
()
{
var
group_type
=
$
(
this
).
attr
(
'
data-name
'
);
var
content
=
'
<ul class="groups" data-name="
'
+
group_type
+
'
">
'
+
group_type
;
contact
[
'
groups
'
].
forEach
(
function
(
group
)
{
if
(
group
[
'
type
'
]
===
group_type
)
{
content
+=
'
<li class="chip">
'
+
group
[
'
name
'
]
+
'
</li>
'
;
}
});
content
+=
'
</ul>
'
;
$
(
this
).
html
(
content
);
});
$
(
'
#contact-phone
'
).
attr
(
'
href
'
,
'
tel:
'
+
contact
[
'
phone
'
]);
$
(
'
#contact-phone
'
).
text
(
contact
[
'
phone
'
]);
};
</script>
templates/header.html
View file @
63ef1931
...
...
@@ -8,6 +8,7 @@
<!-- Materialize -->
<link
href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel=
"stylesheet"
>
<link
type=
"text/css"
rel=
"stylesheet"
href=
"/static/css/materialize.min.css"
media=
"screen,projection"
/>
<link
type=
"text/css"
rel=
"stylesheet"
href=
"/static/css/piphone.css"
media=
"screen,projection"
/>
<!-- JS Materialize -->
<script
src=
"/static/js/jquery-2.1.1.js"
></script>
<script
type=
"text/javascript"
src=
"/static/js/materialize.min.js"
></script>
...
...
@@ -44,9 +45,9 @@
<nav
class=
"blue-grey darken-2"
id=
"navbar"
>
<div
class=
"container nav-wrapper"
>
<ul
class=
"left"
>
<li
class=
"waves-effect <check if="
{{
@
block_content =
=
'
home.html
'
}}"
>
active
</check>
">
<a
href=
"/#navbar"
>
Act
</a></li>
<li
class=
"waves-effect
"
><a
href=
"#"
>
C
ampaign
</a></li>
<li
class=
"waves-effect"
><a
href=
"#"
>
About the piphone
</a></li>
<li
class=
"waves-effect <check if="
{{
@
block_content =
=
'
home.html
'
}}"
>
active
</check>
">
<a
href=
"/#navbar"
>
<b>
{{ _("Act") }}
</b>
</a></li>
<li
class=
"waves-effect
<check if="
{{
@
block_content =
=
'
campaign.html
'
}}"
>
active
</check>
">
<a
href=
"#"
>
{{ _("About the c
ampaign
") }}
</a></li>
<li
class=
"waves-effect
<check if="
{{
@
block_content =
=
'
piphone.html
'
}}"
>
active
</check>
">
<a
href=
"#"
>
{{ _("
About the piphone
") }}
</a></li>
</ul>
</div>
</nav>
...
...
templates/home.html
View file @
63ef1931
<div
class=
"row"
>
<div
class=
"col s
6
m8"
>
<div
class=
"col s
12
m8"
>
<div
class=
"container center"
>
<h4
class=
"blue-grey-text header"
>
{{ _("Call a representative and make your voice heard!") }}
...
...
templates/thankyou.html
View file @
63ef1931
<p>
{{ _("thank you!
<
3")
}}</
p
>
<p><a
href=
"/"
>
{{ _("Call another deputy") }}
</a></p>
<div
class=
"row"
>
<div
class=
"container center"
>
<h2
class=
"blue-grey-text header"
>
{{ _("Thank you for your call!
<
3") }}
</h2>
<a
class=
"btn blue-grey"
href=
"/#navbar"
>
{{ _("Call another representative") }}
</a></p>
</div>
</div>
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment