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
792d54b4
Commit
792d54b4
authored
Feb 02, 2017
by
okhin
Browse files
Fixing the home page
parent
262cdec4
Changes
7
Hide whitespace changes
Inline
Side-by-side
app/Main.php
View file @
792d54b4
...
...
@@ -14,7 +14,6 @@ class Main extends Controller {
function
home
(
$f3
,
$args
)
{
// Select a random contact
//TODO: use weight for random
$rand_id
=
rand
(
0
,
count
(
$f3
->
get
(
'contacts'
))
-
1
);
$contacts
=
$f3
->
get
(
'contacts'
);
$groups
=
Api
::
get_groups
();
...
...
@@ -23,7 +22,6 @@ class Main extends Controller {
$group_types
=
Api
::
get_group_types
();
$f3
->
set
(
'group_types'
,
$group_types
);
$f3
->
set
(
'contact'
,
$contacts
[
$rand_id
]);
$f3
->
set
(
'block_content'
,
'home.html'
);
}
...
...
@@ -108,7 +106,6 @@ class Main extends Controller {
function
contactslist
(
$f3
,
$args
)
{
$contacts
=
Api
::
get_contacts
();
$f3
->
set
(
'contacts'
,
$contacts
);
$f3
->
set
(
'random'
,
2
);
$f3
->
set
(
'block_content'
,
'contactslist.html'
);
}
...
...
templates/base.html
View file @
792d54b4
<include
href=
"header.html"
/>
<include
href=
"sidebar.html"
/>
<include
href=
"{{ @block_content }}"
/>
<include
href=
"footer.html"
/>
templates/contact.html
View file @
792d54b4
...
...
@@ -8,13 +8,19 @@
<span
class=
"card-title grey-text text-darken-4"
>
{{ @contact.first_name }} {{ @contact.last_name }}
</span>
<repeat
group=
"{{ @group_types }}"
value=
"{{ @group_type }}"
>
<ul>
{{ @group_type.name }}
<repeat
group=
"{{ @contact.groups }}"
value=
"{{ @group }}"
>
<div
class=
"chip"
>
<check
if=
"{{ @group.media }}"
>
<img
src=
"{{ @group.media }}"
alt=
"{{ @group.type }}"
>
</check>
{{ @group.name }}
</div>
<check
if=
"{{ @group.type == @group_type.name }}"
>
<li
class=
"chip"
>
<check
if=
"{{ @group.media }}"
>
<img
src=
"{{ @group.media }}"
alt=
"{{ @group.type }}"
>
</check>
{{ @group.name }}
</li>
</check>
</repeat>
</ul>
</repeat>
</div>
<div
class=
"card-reveal"
>
...
...
@@ -26,7 +32,7 @@
<input
type=
"text"
id=
"contact_id"
name=
"contact_id"
hidden=
"hidden"
value=
"{{ @contact.id }}"
>
<p>
{{ _("If you want to call for free, you must provide us with your phone number
(the PiPhone will call that number to initiate the communication).") }}
</p>
<div
class=
"input-field col s12"
>
>
<div
class=
"input-field col s12"
>
<label
for=
"phone"
>
{{_("Your phone number:") }}
</label>
<input
type=
"text"
name=
"phone"
id=
"phone"
/>
</div>
...
...
@@ -39,7 +45,6 @@
<div
class=
"card-action"
>
<a
type=
"button"
href=
"#"
>
{{ _("More info") }}
</a>
<a
type=
"button"
href=
"tel:{{ @contact.phone }}"
target=
"_blank"
>
{{ @contact.phone }}
</a>
<a
type=
"button"
href=
"#"
>
{{ _("Another random MEP") }}
</a>
</div>
</div>
<!-- contact page -->
templates/contactslist.html
View file @
792d54b4
<main>
<div
class=
"row"
>
<div
class=
"section indigo"
>
<div
class=
"container"
>
<h1
class=
"header white-text center-on-small-only"
>
{{ @campaign.title }}
</h1>
<h4
class=
"light indigo-text text-accent-1 center-on-small-only"
>
{{ @campaign.description }}
</h4>
<div
class=
"col s12 m4"
>
<ul
class=
"collection contact"
>
<nav
class=
"nav-extended teal"
>
<div
class=
"nav-wrapper"
>
<div
class=
"input-field"
>
<input
type=
"search"
id=
"search"
class=
"autocomplete"
>
<label
class=
"label-icon"
for=
"search"
><i
class=
"material-icons"
>
search
</i></label>
</div>
</div>
</div>
</div>
<div
class=
"row"
>
</nav>
<repeat
group=
"{{ @contacts }}"
value=
"{{ @contact }}"
>
<div
class=
"col s6 m4"
>
<include
href=
"contact.html"
/>
</div>
<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.last_name }} {{ @contact.full_name }}
</span>
<ul>
<repeat
group=
"{{ @contact.groups }}"
value=
"{{ @group }}"
>
<li
class=
"chip"
>
{{ @group.name }}
</li>
</repeat>
</ul>
</li>
</repeat>
</div>
</ul>
</div>
<!-- contacts list -->
</main>
<script>
$
(
document
).
ready
(
function
()
{
$
(
'
input.autocomplete
'
).
autocomplete
({
data
:
{
<
repeat
group
=
"
{{ @contacts }}
"
value
=
"
{{ @contact }}
"
>
"
{{ @contact.first_name }} {{ @contact.last_name }}
"
:
<
check
if
=
"
{{ @contact.photo == '' }}
"
>
null
<
false
>
{{
@
contact
.
photo
}}
<
/false></
check
>
,
<
/repeat
>
},
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
);
});
$
(
'
#contact-phone
'
).
attr
(
'
href
'
,
'
tel:
'
+
contact
[
'
phone
'
]);
$
(
'
#contact-phone
'
).
text
(
contact
[
'
phone
'
]);
};
update_mep
(
$
(
'
.collection-item
'
).
eq
(
random
));
});
</script>
templates/footer.html
View file @
792d54b4
<script>
$
(
document
).
ready
(
function
()
{
$
(
'
.button-collapse
'
).
sideNav
();
})
</script>
</body>
</html>
templates/header.html
View file @
792d54b4
...
...
@@ -9,10 +9,47 @@
<link
href=
"http://fonts.googleapis.com/icon?family=Material+Icons"
rel=
"stylesheet"
>
<link
href=
"/static/css/bootstrap.min.css"
rel=
"stylesheet"
>
<link
type=
"text/css"
rel=
"stylesheet"
href=
"/static/css/materialize.min.css"
media=
"screen,projection"
/>
<!-- piphone specific CSS -->
<link
type=
"text/css"
rel=
"stylesheet"
href=
"/static/css/piphone.css"
>
<!-- JS Materialize -->
<script
src=
"/static/js/jquery-2.1.1.js"
></script>
<script
type=
"text/javascript"
src=
"/static/js/materialize.min.js"
></script>
</head>
<body>
<header
class=
"blue-grey"
>
<div
class=
"section no-pad-bot"
>
<div
class=
"container"
>
<div
class=
"row center"
>
<h1
class=
"header center-on-small-only blue-grey-text text-darken-3"
>
{{ @campaign.title}}
</h1>
</div>
<div
class=
"row"
>
<div
class=
"col s12 m6"
>
<p
class=
"flow-text blue-grey-text text-lighten-4"
>
{{ @campaign.description }}
</p>
<a
href=
"#navbar"
class=
"btn waves-effect waves-light leat accent-2 right"
>
{{ _("Act Now!") }}
</a>
</div>
<div
class=
"col s12 m6"
>
<check
if=
"{{ @organization.logo }}"
>
<img
src=
"{{ @organization.logo }}"
>
</check>
<h4
class=
"light header blue-grey-text text-darken-2"
>
{{ @organization.name }}
</h4>
<p
class=
"flow-text blue-grey-text text-lighten-4"
>
{{ @organization.description }}
</p>
<a
href=
"{{ @organization.website }}"
class=
"btn waves-effect waves-light blue accent-2 right"
>
{{ _("Visit Us!") }}
</a>
</div>
</div>
</div>
</div>
<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=
"#"
>
Campaign
</a></li>
<li
class=
"waves-effect"
><a
href=
"#"
>
About the piphone
</a></li>
</ul>
</div>
</nav>
</header>
<main>
templates/home.html
View file @
792d54b4
<main>
<div
class=
"row"
>
<div
class=
"section indigo"
>
<div
class=
"container"
>
<h1
class=
"header white-text center-on-small-only"
>
{{ @campaign.title }}
</h1>
<h4
class=
"light indigo-text text-accent-1 center-on-small-only"
>
{{ @campaign.description }}
</h4>
<div
class=
"row"
>
<div
class=
"col s6 m8"
>
<div
class=
"container center"
>
<h4
class=
"blue-grey-text header"
>
{{ _("Call a representative and make your voice heard!") }}
</h4>
<!-- contact page -->
<div
class=
"col s12 offset-m3 m6"
>
<div
class=
"card sticky-action"
>
<div
class=
"card-image"
>
<img
id=
"contact-image"
src=
"/static/img/placeholder.jpg"
>
<a
class=
"btn-floating btn-large halfway-fab waves-effect activator green"
>
<i
class=
"material-icons"
>
phone
</i>
</a>
</div>
<div
class=
"card-content"
>
<span
class=
"card-title grey-text text-darken-4"
id=
"contact-full_name"
>
John Doe
</span>
<repeat
group=
"{{ @group_types }}"
value=
"{{ @group_type }}"
>
<ul
class=
"groups"
data-name=
"{{ @group_type.name }}"
>
{{ @group_type.name }}
<li
class=
"chip"
>
Group
</li>
</ul>
</repeat>
</div>
<div
class=
"card-reveal"
>
<span
id=
"contact-full_name-2"
class=
"card-title grey-text text-darken-4"
>
John Doe
<i
class=
"material-icons right"
>
close
</i>
</span>
<h5>
{{ _("Call for free") }}
</h5>
<form
id=
"form-contact"
method=
"post"
action=
""
>
<input
type=
"text"
id=
"contact_id"
name=
"contact_id"
hidden=
"hidden"
value=
""
>
<p>
{{ _("If you want to call for free, you must provide us with your phone number
(the PiPhone will call that number to initiate the communication).") }}
</p>
<div
class=
"input-field col s12"
>
<label
for=
"phone"
>
{{_("Your phone number:") }}
</label>
<input
type=
"text"
name=
"phone"
id=
"phone"
/>
</div>
<p>
{{ _('Starting with your
<a
href=
"https://en.wikipedia.org/wiki/List_of_country_calling_codes#Zones_3-4:_Europe"
>
country code
</a>
, without the initial 0') }}
</p>
<input
class=
"btn btn-default"
type=
"submit"
value=
"{{ _('Call me') }}"
/>
</form>
</div>
<div
class=
"card-action"
>
<a
type=
"button"
href=
"#"
>
{{ _("More info") }}
</a>
<a
type=
"button"
id=
"contact-phone"
href=
"tel:"
target=
"_blank"
>
+33987654321
</a>
</div>
</div>
<!-- contact page -->
</div>
</div>
</div>
<div
class=
"row"
>
<div
class=
"col s6 m4 offset-m4"
>
<include
href=
"contact.html"
>
</div>
</div>
</main>
<include
href=
"contactslist.html"
>
</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