Skip to content
GitLab
Menu
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
10bd8e26
Commit
10bd8e26
authored
Feb 06, 2017
by
okhin
Browse files
Improving the design
parent
c93b8dc7
Pipeline
#835
passed with stage
in 1 second
Changes
6
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
app/Main.php
View file @
10bd8e26
...
...
@@ -114,5 +114,12 @@ class Main extends Controller {
$f3
->
set
(
'block_content'
,
'argumentation.html'
);
}
function
campaign
(
$f3
,
$args
)
{
$f3
->
set
(
'block_content'
,
'campaign.html'
);
}
function
piphone
(
$f3
,
$args
)
{
$f3
->
set
(
'block_content'
,
'campaign.html'
);
}
};
;
app/routes.ini
View file @
10bd8e26
...
...
@@ -6,6 +6,8 @@ GET|POST @call:/call/@id=Main->call
GET
@contactslist:/
contactslist
=
Main->contactslist
GET
@feedbacksip:/calls/@
callid
=
SIP->feedbacksip
GET
@argumentation:/
argumentation
=
Main->argumentation
GET
@campaign:/
campaign
=
Main->campaign
GET
@piphone:/
piphone
=
Main->campaign
; Fake REST API
GET
/restapi/campaigns/@
id
=
RestApi->campaign
...
...
static/css/piphone.css
View file @
10bd8e26
...
...
@@ -4,3 +4,15 @@
max-height
:
60vmax
;
cursor
:
pointer
;
}
.piphone-btn
{
position
:
absolute
;
left
:
-23px
;
}
.chip.committee
{
font-size
:
11px
;
line-height
:
22px
;
height
:
22px
;
padding
:
0
10px
;
}
templates/contactslist.html
View file @
10bd8e26
...
...
@@ -67,24 +67,32 @@ function display_mep(contact) {
},
500
);
})
.
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
);
};
var
country
=
contact
[
'
groups
'
].
filter
(
function
(
group
)
{
return
group
[
'
type
'
]
===
'
country
'
;
});
var
group
=
contact
[
'
groups
'
].
filter
(
function
(
group
)
{
return
group
[
'
type
'
]
===
'
group
'
;
});
var
group_src
=
'
http://www.europarl.europa.eu/ep_framework/img/group/group_iconsmall_
'
+
group
[
0
][
'
name
'
].
toLowerCase
().
replace
(
'
/
'
,
''
)
+
'
.png
'
;
var
country_src
=
'
http://www.europarl.europa.eu/ep_framework/img/flag/flag_icon_
'
+
country
[
0
][
'
name
'
].
toLowerCase
().
replace
(
'
/
'
,
''
)
+
'
.gif
'
;
$
(
'
<img />
'
).
addClass
(
'
circle
'
)
.
attr
(
'
src
'
,
country_src
)
.
appendTo
(
li
)
$
(
'
<span />
'
).
addClass
(
'
title
'
)
.
text
(
contact
[
'
full_name
'
])
.
appendTo
(
li
);
$
(
'
<img />
'
).
attr
(
'
src
'
,
group_src
)
.
appendTo
(
li
);
var
groups
=
$
(
'
<ul />
'
)
.
appendTo
(
li
);
contact
[
'
groups
'
].
forEach
(
function
(
group
)
{
$
(
'
<li />
'
).
addClass
(
'
chip
'
)
.
text
(
group
[
'
name
'
])
.
appendTo
(
groups
);
if
(
group
[
'
type
'
]
===
'
committee
'
)
{
$
(
'
<li />
'
).
addClass
(
'
chip blue white-text
'
)
.
text
(
group
[
'
name
'
])
.
appendTo
(
groups
);
}
});
return
li
;
};
...
...
@@ -95,20 +103,35 @@ function update_mep(element) {
$
(
'
#contact-image
'
).
attr
(
'
src
'
,
contact
[
'
photo
'
]);
};
$
(
'
#contact-full_name
'
).
html
(
contact
[
'
first_name
'
]
+
'
'
+
contact
[
'
last_name
'
]);
$
(
'
#contact-full_name-2
'
).
html
(
contact
[
'
first_name
'
]
+
'
'
+
contact
[
'
last_name
'
]);
$
(
'
#contact-full_name-2
'
).
html
(
contact
[
'
first_name
'
]
+
'
'
+
contact
[
'
last_name
'
]
+
'
<i class="material-icons right">close</i>
'
);
$
(
'
#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
;
var
content
=
'
'
contact
[
'
groups
'
].
forEach
(
function
(
group
)
{
if
(
group
[
'
type
'
]
===
group_type
)
{
content
+=
'
<li class="chip">
'
+
group
[
'
name
'
]
+
'
</li>
'
;
content
+=
'
<li class="chip
blue white-text committee
">
'
+
group
[
'
name
'
]
+
'
</li>
'
;
}
});
content
+=
'
</ul>
'
;
$
(
this
).
html
(
content
);
});
var
country
=
contact
[
'
groups
'
].
filter
(
function
(
group
)
{
return
group
[
'
type
'
]
===
'
country
'
;
});
var
group
=
contact
[
'
groups
'
].
filter
(
function
(
group
)
{
return
group
[
'
type
'
]
===
'
group
'
;
});
var
group_src
=
'
http://www.europarl.europa.eu/ep_framework/img/group/group_iconsmall_
'
+
group
[
0
][
'
name
'
].
toLowerCase
().
replace
(
'
/
'
,
''
)
+
'
.png
'
;
var
country_src
=
'
http://www.europarl.europa.eu/ep_framework/img/flag/flag_icon_
'
+
country
[
0
][
'
name
'
].
toLowerCase
()
.
replace
(
'
/
'
,
''
)
+
'
.gif
'
;
$
(
'
.card-content .group
'
).
text
(
group
[
0
][
'
name
'
])
.
append
(
$
(
'
<img>
'
).
attr
(
'
src
'
,
group_src
));
$
(
'
.card-content .country
'
).
text
(
country
[
0
][
'
name
'
])
.
append
(
$
(
'
<img>
'
).
attr
(
'
src
'
,
country_src
));
$
(
'
#contact-phone
'
).
attr
(
'
href
'
,
'
tel:
'
+
contact
[
'
phone
'
]);
$
(
'
#contact-phone
'
).
text
(
contact
[
'
phone
'
]);
};
...
...
templates/header.html
View file @
10bd8e26
...
...
@@ -23,7 +23,7 @@
<div
class=
"row"
>
<div
class=
"col s12 m6"
>
<p
class=
"flow-text blue-grey-text text-lighten-4"
>
{{ @campaign.description }}
{{
preg_replace('/((\w+\W*){50}(\w+))(.*)/', '${1} ...',
@campaign.description
)
}}
</p>
<a
href=
"#navbar"
class=
"btn waves-effect waves-light leat accent-2 right"
>
{{ _("Act Now!") }}
</a>
</div>
...
...
@@ -46,8 +46,8 @@
<div
class=
"container nav-wrapper"
>
<ul
class=
"left"
>
<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 campaign") }}
</a></li>
<li
class=
"waves-effect <check if="
{{
@
block_content =
=
'
piphone.html
'
}}"
>
active
</check>
">
<a
href=
"
#
"
>
{{ _("About the piphone") }}
</a></li>
<li
class=
"waves-effect <check if="
{{
@
block_content =
=
'
campaign.html
'
}}"
>
active
</check>
">
<a
href=
"
/campaign#navbar
"
>
{{ _("About the campaign") }}
</a></li>
<li
class=
"waves-effect <check if="
{{
@
block_content =
=
'
piphone.html
'
}}"
>
active
</check>
">
<a
href=
"
/piphone#navbar
"
>
{{ _("About the piphone") }}
</a></li>
</ul>
</div>
</nav>
...
...
templates/home.html
View file @
10bd8e26
<div
class=
"row"
>
<div
class=
"col s12 m8"
>
<div
class=
"container
center
"
>
<h4
class=
"blue-grey-text header"
>
<div
class=
"container"
>
<h4
class=
"blue-grey-text
center
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=
""
>
<div
class=
"card horizontal 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
class=
"card-stacked"
>
<div
class=
"right-align card-content"
>
<a
class=
"left btn-floating piphone-btn btn-large waves-effect activator green"
>
<i
class=
"material-icons"
>
phone
</i>
</a>
<span
class=
"card-title grey-text text-darken-4"
id=
"contact-full_name"
>
John Doe
</span>
<span
class=
"chip country"
>
FR
</span>
<span
class=
"chip group"
>
SD
</span>
<ul
class=
"groups"
data-name=
"committee"
>
<li
class=
"chip blue white-text committee"
>
Group
</li>
</ul>
</div>
</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>
<i
class=
"material-icons"
>
close
</i>
</span>
<h5>
{{ _("Call for free") }}
</h5>
<form
id=
"form-contact"
method=
"post"
action=
""
>
...
...
@@ -44,12 +45,7 @@
<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>
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a 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