Global visualization UI prototype to get strings ready for l10n
This commit is contained in:
sork
Родитель
e01dde0228
Коммит
b2c47e3e9d
|
|
@ -21,7 +21,7 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block belowsection %}
|
||||
<a href="#" class="button">{{ _('Launch real-time visualization') }}</a>
|
||||
<a href="{{ url('desktop.visualization') }}" class="button">{{ _('Launch real-time visualization') }}</a>
|
||||
<div id="globalmap">
|
||||
<!-- Temporary image here -->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,72 @@
|
|||
{% extends "desktop/base.html" %}
|
||||
{% set title = _('Spark! Global Visualizer') %}
|
||||
{% set body_id = 'visualizer' %}
|
||||
{% set scripts = ('jquery-ui', 'desktop', 'visualization') %}
|
||||
{% set stylesheets = ('visualization',) %}
|
||||
|
||||
{% block content %}
|
||||
<div id="wrapper">
|
||||
<div id="masthead">
|
||||
<h1>
|
||||
{{ _('Spark Firefox Mobile') }} <span>{{ _('Global Visualizer') }}</span>
|
||||
</h1>
|
||||
<ul id="main-menu">
|
||||
<li>{{ _('Show your shares') }}
|
||||
<span><a id="sign-in" href="#">{{ _('Sign in first >') }}</a></span>
|
||||
</li>
|
||||
<li>{{ _('Focus on location') }}
|
||||
<span>
|
||||
<form action="">
|
||||
<select id="cities-list" name="cities">
|
||||
<option value="Paris">Paris</option>
|
||||
<option value="Berlin">Berlin</option>
|
||||
<option value="London">London</option>
|
||||
|
||||
<option value="Tokyo">Tokyo</option>
|
||||
</select>
|
||||
</form>
|
||||
<!-- <input type="text" name="cities" id="cities-list" placeholder="Everywhere" list="cities-list">
|
||||
<datalist id="cities-list">
|
||||
<option value="Paris"></option>
|
||||
<option value="Berlin"></option>
|
||||
<option value="San Fransisco"></option>
|
||||
<option value="New York"></option>
|
||||
<option value="Tokyo"></option>
|
||||
<option value="London"></option>
|
||||
</datalist> -->
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div> <!-- end masthead -->
|
||||
|
||||
<div id="timelapse">
|
||||
<div id="dates">
|
||||
<span id="start-date">03.01.11 00:00:00</span>
|
||||
<span id="current-date">03.14.11 07:14:03</span>
|
||||
</div>
|
||||
<div id="time-wrapper">
|
||||
<span id="current-time">03.05.11 10:27:44</span>
|
||||
</div>
|
||||
<span id="play">{{ _('Play timelapse') }}</span>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<div id="loading"></div>
|
||||
</div>
|
||||
<div id="cities">
|
||||
<img id="cities" src="img/cities.svg" alt="">
|
||||
</div>
|
||||
<!-- <div id="tooltip">
|
||||
<div id="tooltip-arrow"></div>
|
||||
</div> -->
|
||||
|
||||
<div id="zoom-wrapper">
|
||||
<div id="zoom-out" class="off"></div>
|
||||
<div id="zoom"></div>
|
||||
<div id="zoom-in"></div>
|
||||
</div>
|
||||
|
||||
<img src="{{ MEDIA_URL }}img/spinner.gif" class="preload">
|
||||
|
||||
</div> <!-- end wrapper -->
|
||||
{% endblock %}
|
||||
|
|
@ -8,6 +8,7 @@ urlpatterns = patterns('',
|
|||
url(r'^home$', views.home, name='desktop.home'),
|
||||
url(r'^dashboard$', views.dashboard, name='desktop.dashboard'),
|
||||
url(r'^user/(?P<username>[\w\d]+)$', views.user, name='desktop.user'),
|
||||
url(r'^global$', views.visualization, name='desktop.visualization'),
|
||||
|
||||
url(r'^pwchange', views.ajax_pwchange, name='desktop.pwchange'),
|
||||
url(r'^delaccount', views.ajax_delaccount, name='desktop.delaccount'),
|
||||
|
|
|
|||
|
|
@ -23,6 +23,10 @@ def user(request, username):
|
|||
'is_user_page': True })
|
||||
|
||||
|
||||
def visualization(request, ):
|
||||
return jingo.render(request, 'desktop/visualization.html', {})
|
||||
|
||||
|
||||
@login_required
|
||||
def ajax_pwchange(request):
|
||||
return jingo.render(request, 'desktop/home.html', {})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,307 @@
|
|||
/* Masthead */
|
||||
|
||||
#masthead {
|
||||
padding:35px 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color:#ffda09;
|
||||
font-weight:bold;
|
||||
font-size:1.5em;
|
||||
}
|
||||
|
||||
h1 span {
|
||||
color:#db5c2b;
|
||||
}
|
||||
|
||||
ul#main-menu {
|
||||
float:right;
|
||||
margin-top:-25px;
|
||||
}
|
||||
|
||||
#main-menu li {
|
||||
float:left;
|
||||
color:#fff;
|
||||
font-weight:bold;
|
||||
width:230px;
|
||||
border-top:3px solid #ffda05;
|
||||
margin-left:10px;
|
||||
padding-top:10px;
|
||||
}
|
||||
|
||||
#main-menu li span {
|
||||
display:block;
|
||||
line-height:2em;
|
||||
}
|
||||
|
||||
#main-menu a {
|
||||
color:#999999;
|
||||
text-decoration:none;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
#main-menu a:hover {
|
||||
color:#ffd40d;
|
||||
}
|
||||
|
||||
/* Slider */
|
||||
|
||||
#slider {
|
||||
width:920px;
|
||||
margin-left:20px;
|
||||
height:20px;
|
||||
background:#222;
|
||||
}
|
||||
|
||||
#slider a.ui-slider-handle {
|
||||
display:block;
|
||||
height:38px;
|
||||
width:38px;
|
||||
background:#333;
|
||||
border:1px solid #000;
|
||||
position:relative;
|
||||
top:-9px;
|
||||
margin-left:-20px;
|
||||
outline:0px;
|
||||
}
|
||||
|
||||
#slider a:active, #slider a:visited {
|
||||
border:none;
|
||||
text-decoration:none;
|
||||
outline:0px;
|
||||
}
|
||||
|
||||
|
||||
/* Global map */
|
||||
|
||||
#timelapse {
|
||||
padding-top:30px;
|
||||
color:#fff;
|
||||
font-weight:normal;
|
||||
font-size:0.85em;
|
||||
}
|
||||
|
||||
#dates {
|
||||
display:block;
|
||||
overflow:auto;
|
||||
color:#333333;
|
||||
}
|
||||
|
||||
#start-date {
|
||||
float:left;
|
||||
}
|
||||
|
||||
#current-date {
|
||||
float:right;
|
||||
}
|
||||
|
||||
#time-wrapper {
|
||||
border-bottom:3px solid #524d4c;
|
||||
height:3px;
|
||||
position:relative;
|
||||
padding-top:24px;
|
||||
clear:both;
|
||||
margin-top:-24px;
|
||||
}
|
||||
|
||||
div.ui-slider-range {
|
||||
background:#ffd909;
|
||||
width:20%;
|
||||
height:100%;
|
||||
position:relative;
|
||||
top:3px;
|
||||
}
|
||||
|
||||
#play {
|
||||
color: #ffd909;
|
||||
display: block;
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#play:hover {
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
#masthead, #timelapse {
|
||||
background:rgba(0,0,0,0.6);
|
||||
position:relative;
|
||||
z-index:2;
|
||||
}
|
||||
|
||||
#content {
|
||||
height:780px;
|
||||
margin-top:-300px;
|
||||
background:url('../img/global/map.jpg') no-repeat center bottom;
|
||||
position:relative;
|
||||
z-index:-2;
|
||||
}
|
||||
|
||||
#time-wrapper a.ui-slider-handle {
|
||||
background: url("../img/global/handle.png") no-repeat center center transparent;
|
||||
display: block;
|
||||
height: 27px;
|
||||
left: 0;
|
||||
margin-left: -16px;
|
||||
padding: 0 10px;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
#time-wrapper a.ui-slider-handle:hover, #time-wrapper:hover {
|
||||
cursor:ew-resize;
|
||||
}
|
||||
|
||||
a.ui-slider-handle:active, a.ui-slider-handle:focus {
|
||||
border:none;
|
||||
outline:none;
|
||||
text-decoration:none;
|
||||
color:transparent;
|
||||
}
|
||||
|
||||
#zoom {
|
||||
height:9px;
|
||||
width:143px;
|
||||
border-left:1px solid #403c3c;
|
||||
border-right:1px solid #403c3c;
|
||||
background:url('../img/global/ruler.png') repeat-x 0 0;
|
||||
margin:50px auto 0;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
#zoom:hover, #zoom a.ui-slider-handle:hover {
|
||||
cursor:ew-resize;
|
||||
}
|
||||
|
||||
#zoom-out, #zoom-in {
|
||||
height:30px;
|
||||
width:33px;
|
||||
background:url('../img/global/magnifier.png') no-repeat;
|
||||
}
|
||||
|
||||
#zoom-out:hover, #zoom-in:hover {
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
#zoom-out {
|
||||
float:left;
|
||||
background-position:0 0;
|
||||
margin-top:-16px;
|
||||
}
|
||||
|
||||
#zoom-out.off {
|
||||
background-position:0 -30px;
|
||||
}
|
||||
|
||||
#zoom-out:hover {
|
||||
background:url('../img/global/magnifier.png') no-repeat 0 -60px;
|
||||
}
|
||||
|
||||
#zoom-out.off:hover {
|
||||
background-position:0 -30px;
|
||||
}
|
||||
|
||||
#zoom-in {
|
||||
float:right;
|
||||
margin-top:-24px;
|
||||
background-position:-33px 0;
|
||||
}
|
||||
|
||||
#zoom-in.off {
|
||||
background-position:-33px -30px;
|
||||
}
|
||||
|
||||
#zoom-in:hover {
|
||||
background:url('../img/global/magnifier.png') no-repeat -33px -60px;
|
||||
}
|
||||
|
||||
#zoom-in.off:hover {
|
||||
background-position:-33px -30px;
|
||||
}
|
||||
|
||||
#zoom-wrapper {
|
||||
width:225px;
|
||||
margin:30px auto 100px;
|
||||
}
|
||||
|
||||
#zoom a.ui-slider-handle {
|
||||
height:18px;
|
||||
width:16px;
|
||||
background:url('../img/global/zoom-handle.png') no-repeat 0 0;
|
||||
position:absolute;
|
||||
top:-18px;
|
||||
margin-left:-8px;
|
||||
}
|
||||
|
||||
#tooltip {
|
||||
position:absolute;
|
||||
height:36px;
|
||||
width:170px;
|
||||
background:#212020;
|
||||
border:2px solid #ffd40d;
|
||||
border-radius:2px;
|
||||
-moz-border-radius:2px;
|
||||
-webkit-border-radius:2px;
|
||||
-o-border-radius:2px;
|
||||
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.75), 6px 5px 10px rgba(0,0,0,0.75);
|
||||
}
|
||||
|
||||
#tooltip-arrow {
|
||||
position:relative;
|
||||
left:50%;
|
||||
height:22px;
|
||||
width:28px;
|
||||
background:url('../img/global/tooltip-arrow.png') no-repeat 0 0;
|
||||
margin-left:-14px;
|
||||
top:-17px;
|
||||
}
|
||||
|
||||
#cities {
|
||||
text-rendering:optimizeLegibility;
|
||||
width:960px;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
#cities-list {
|
||||
width:100%;
|
||||
border-radius:4px;
|
||||
-moz-border-radius:4px;
|
||||
-webkit-border-radius:4px;
|
||||
border:1px solid #6b6767;
|
||||
background:#100e0e;
|
||||
color:#999999;
|
||||
font-size:0.688em;
|
||||
font-weight:normal;
|
||||
padding:7px 5px;
|
||||
}
|
||||
|
||||
#current-time {
|
||||
display:block;
|
||||
position:absolute;
|
||||
top:4px;
|
||||
margin-left:15px;
|
||||
font-size:14px;
|
||||
color:#ffd40d;
|
||||
}
|
||||
|
||||
img.preload {
|
||||
visibility:hidden;
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
#loading {
|
||||
background:url('../img/global/spinner.gif') no-repeat center center rgba(0,0,0,0.8);
|
||||
width:100%;
|
||||
height:430px;
|
||||
position:absolute;
|
||||
z-index:9100;
|
||||
left:0;
|
||||
bottom:0;
|
||||
display:none;
|
||||
}
|
||||
|
||||
svg textarea:hover #tooltip {
|
||||
display:block;
|
||||
}
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 237 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 6.4 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 71 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 109 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 149 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 8.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 957 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.5 KiB |
Двоичные данные
media/img/spritesheet.psd
Двоичные данные
media/img/spritesheet.psd
Двоичный файл не отображается.
|
|
@ -0,0 +1,158 @@
|
|||
$(document).ready(function() {
|
||||
var $zoom = $('#zoom'),
|
||||
$timelapse = $('#time-wrapper'),
|
||||
windowHeight,
|
||||
windowWidth,
|
||||
currentScale,
|
||||
currentTime,
|
||||
isPlaying = false,
|
||||
wasPlaying = false;
|
||||
|
||||
// Gets the current value of the time slider
|
||||
var updateCurrentTime = function() {
|
||||
currentTime = $timelapse.slider("value");
|
||||
};
|
||||
|
||||
// Increments the value of the time slider
|
||||
var updateTimelapse = function() {
|
||||
$timelapse.slider('value', currentTime + 1)
|
||||
}
|
||||
|
||||
// Plays/pauses the timelapse replay
|
||||
var togglePlay = function() {
|
||||
isPlaying = !isPlaying;
|
||||
|
||||
if(isPlaying) {
|
||||
playTimelapse = setInterval(function() {
|
||||
updateCurrentTime();
|
||||
updateTimelapse();
|
||||
}, 30);
|
||||
$('#play').html('Pause timelapse');
|
||||
} else {
|
||||
clearInterval(playTimelapse);
|
||||
$('#play').html('Play timelapse');
|
||||
}
|
||||
};
|
||||
|
||||
// Sets the dimensions of the mask
|
||||
var initMask = function() {
|
||||
windowHeight = $(document).height();
|
||||
windowWidth = $(window).width();
|
||||
|
||||
$('#mask').css({'width' : windowWidth, 'height' : windowHeight});
|
||||
}
|
||||
|
||||
// Gets the current value of the zoom slider
|
||||
var updateCurrentScale = function() {
|
||||
currentScale = $zoom.slider("value");
|
||||
};
|
||||
|
||||
// Updates the position of the tooltip
|
||||
$(document).mousemove(function(e){
|
||||
$('#tooltip').css({
|
||||
'left' : e.pageX - 87,
|
||||
'top' : e.pageY + 27
|
||||
});
|
||||
});
|
||||
|
||||
// Creates the time slider
|
||||
$('#time-wrapper').slider({
|
||||
range: "min",
|
||||
min: 0,
|
||||
max: 600,
|
||||
step: 1
|
||||
});
|
||||
|
||||
// Creates the zoom slider
|
||||
$zoom.slider({
|
||||
min: 0,
|
||||
max: 3,
|
||||
step: 1
|
||||
});
|
||||
|
||||
// Makes the current time label move with the slider handle
|
||||
$('#time-wrapper').bind('slidechange', function() {
|
||||
var x = $('#time-wrapper a').css('left');
|
||||
|
||||
$('#current-time').css({'left' : x});
|
||||
});
|
||||
|
||||
// Increases the value of the zoom slider
|
||||
$('#zoom-in').click(function() {
|
||||
|
||||
updateCurrentScale();
|
||||
$zoom.slider("value", (currentScale + 1));
|
||||
});
|
||||
|
||||
// Decreases the value of the zoom slider
|
||||
$('#zoom-out').click(function() {
|
||||
|
||||
updateCurrentScale();
|
||||
$zoom.slider("value", (currentScale - 1));
|
||||
});
|
||||
|
||||
// Toggles hightlight on magnifier icons depending on the current value
|
||||
$('#zoom').bind("slidechange", function () {
|
||||
updateCurrentScale();
|
||||
|
||||
if(currentScale > 0) {
|
||||
$('#zoom-out').removeClass('off');
|
||||
} else {
|
||||
$('#zoom-out').addClass('off');
|
||||
}
|
||||
|
||||
if(currentScale > 2) {
|
||||
$('#zoom-in').addClass('off');
|
||||
} else {
|
||||
$('#zoom-in').removeClass('off');
|
||||
}
|
||||
});
|
||||
|
||||
// Shows the sign-in modal popup
|
||||
$('#sign-in').click(function() {
|
||||
$('#mask').fadeIn(200);
|
||||
$('#sign-in-window').fadeIn(200);
|
||||
});
|
||||
|
||||
// Hides the sign-in modal popup
|
||||
$('#mask').click(function() {
|
||||
$(this).fadeOut(200);
|
||||
$('#sign-in-window').fadeOut(200);
|
||||
});
|
||||
|
||||
// Sets negative margins to the modal popup in order to center it on screen
|
||||
$('#sign-in-window').css( {
|
||||
'marginLeft' : -(($('#sign-in-window').width() + 52)/2),
|
||||
'marginTop' : -(($('#sign-in-window').height() + 42)/2)
|
||||
});
|
||||
|
||||
// Triggers the play/pause and toggles the corresponding strings
|
||||
$('#play').click(function() {
|
||||
togglePlay();
|
||||
});
|
||||
|
||||
// Stops playing when the slider is manually changed
|
||||
$('#time-wrapper').mousedown(function() {
|
||||
if(isPlaying) {
|
||||
togglePlay();
|
||||
wasPlaying = !wasPlaying;
|
||||
$('#loading').fadeIn(100);
|
||||
}
|
||||
});
|
||||
|
||||
// Resumes playing when slider is released, but only if this happens after interrupting replay
|
||||
$('body').mouseup(function() {
|
||||
if(wasPlaying) {
|
||||
togglePlay();
|
||||
wasPlaying = !wasPlaying;
|
||||
$('#loading').fadeOut(100);
|
||||
}
|
||||
});
|
||||
|
||||
// Resizes the mask when the window is resized to avoid scrollbars
|
||||
$(window).resize(function() {
|
||||
initMask();
|
||||
});
|
||||
|
||||
initMask();
|
||||
});
|
||||
|
|
@ -143,6 +143,9 @@ MINIFY_BUNDLES = {
|
|||
'mobile': (
|
||||
'css/mobile.css',
|
||||
),
|
||||
'visualization': (
|
||||
'css/visualization.css',
|
||||
),
|
||||
'non-firefox': (
|
||||
'css/non-firefox.css',
|
||||
)
|
||||
|
|
@ -163,6 +166,9 @@ MINIFY_BUNDLES = {
|
|||
'desktop': (
|
||||
'js/desktop/main.js',
|
||||
),
|
||||
'visualization': (
|
||||
'js/desktop/visualization.js',
|
||||
),
|
||||
'menu': (
|
||||
'js/mobile/menu.js',
|
||||
),
|
||||
|
|
|
|||
|
|
@ -9,6 +9,9 @@
|
|||
{% block site_css %}
|
||||
{{ css('desktop') }}
|
||||
{% endblock %}
|
||||
{% for stylesheet in stylesheets %}
|
||||
{{ css(stylesheet) }}
|
||||
{% endfor %}
|
||||
<!--[if lte IE 7]>
|
||||
<link rel="stylesheet" href="css/ie6-7.css">
|
||||
<![endif]-->
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче