- added "notice" panel for upcoming release information

- improved layout for "release dialog" (GitHub API)
- improved pagespeed (removed render blocking javascripts)
- improved map scrollbar configuration
- improved Chrome browser custom scrollbar layout
- removed "sign up" buttons from "map panels", closed #214
This commit is contained in:
Exodus4D
2016-07-03 14:57:48 +02:00
parent 1ab5033c18
commit b21dc0bd76
17 changed files with 218 additions and 92 deletions

View File

@@ -40,7 +40,7 @@ class GitHub extends Controller\Controller {
public function releases($f3){
$cacheKey = 'CACHE_GITHUB_RELEASES';
$ttl = 60 * 30; // 30min
$releaseCount = 3;
$releaseCount = 4;
if( !$f3->exists($cacheKey) ){
$apiPath = $this->getF3()->get('PATHFINDER.API.GIT_HUB') . '/repos/exodus4d/pathfinder/releases';

View File

@@ -159,7 +159,7 @@ define([
Gallery.prototype.textFactory = function (obj, callback) {
var newSlideContent = $('<div>')
.addClass('text-content')
.attr('title', obj.title);
.attr('imgTitle', obj.title);
var moduleConfig = {
name: obj.href, // template name
@@ -192,31 +192,31 @@ define([
// initialize carousel ------------------------------------------------
var carousel = new Gallery([
{
title: 'IGB',
imgTitle: 'IGB',
href: 'ui/map',
type: 'text/html'
},
{
href: 'public/img/landing/responsive.jpg',
title: 'Responsive layout',
imgTitle: 'Responsive layout',
type: 'image/jpg',
thumbnail: ''
},
{
href: 'public/img/landing/pathfinder_1.jpg',
title: 'Map view',
imgTitle: 'Map view',
type: 'image/jpg',
thumbnail: ''
},
{
href: 'public/img/landing/pathfinder_3.jpg',
title: 'Map information',
imgTitle: 'Map information',
type: 'image/jpg',
thumbnail: ''
},
{
href: 'public/img/landing/pathfinder_2.jpg',
title: 'System information',
imgTitle: 'System information',
type: 'image/jpg',
thumbnail: ''
}
@@ -224,7 +224,7 @@ define([
container: '#' + config.galleryCarouselId,
carousel: true,
startSlideshow: false,
titleProperty: 'title',
titleProperty: 'imgTitle',
transitionSpeed: 600,
slideshowInterval: 5000,
onopened: function () {
@@ -232,6 +232,9 @@ define([
// and the initialization transition has been completed.
// -> show "demo" map
// set title for first slide
$( this.options.container ).find( this.options.titleElement).text('Browser view');
$('#' + config.headHeaderMapId).drawDemoMap(function(){
// zoom map SVGs
@@ -655,12 +658,15 @@ define([
initCharacterSelect();
// init carousel
initCarousel();
// init scrollspy
initScrollspy();
// init page observer
setPageObserver();
// init carousel
initCarousel();
// init gallery
initGallery();
@@ -678,8 +684,6 @@ define([
}, false);
}
setPageObserver();
});

View File

@@ -51,12 +51,8 @@ define([
stagger: 300,
duration: 240,
//display: 'auto',
complete: function(){
}
complete: function(){}
});
});
}).fail(function( jqXHR, status, error) {
var reason = status + ' ' + jqXHR.status + ': ' + error;
@@ -70,29 +66,19 @@ define([
* show releases dialog
*/
$.fn.releasesDialog = function(){
var content = '<ul class="timeline"></ul>';
requirejs(['text!templates/dialog/releases.html', 'mustache'], function(template, Mustache) {
var data = {
test: 'blaBla'
};
var content = Mustache.render(template, data);
var releasesDialog = bootbox.dialog({
className: config.releasesDialogClass,
title: 'Releases',
size: 'large',
message: content
});
// after modal is shown =======================================================================
releasesDialog.on('shown.bs.modal', function(e) {
loadDialogData(releasesDialog);
});
var releasesDialog = bootbox.dialog({
className: config.releasesDialogClass,
title: 'Releases',
size: 'large',
message: content
});
// after modal is shown =======================================================================
releasesDialog.on('shown.bs.modal', function(e) {
loadDialogData(releasesDialog);
});
};
});

File diff suppressed because one or more lines are too long

View File

@@ -159,7 +159,7 @@ define([
Gallery.prototype.textFactory = function (obj, callback) {
var newSlideContent = $('<div>')
.addClass('text-content')
.attr('title', obj.title);
.attr('imgTitle', obj.title);
var moduleConfig = {
name: obj.href, // template name
@@ -192,31 +192,31 @@ define([
// initialize carousel ------------------------------------------------
var carousel = new Gallery([
{
title: 'IGB',
imgTitle: 'IGB',
href: 'ui/map',
type: 'text/html'
},
{
href: 'public/img/landing/responsive.jpg',
title: 'Responsive layout',
imgTitle: 'Responsive layout',
type: 'image/jpg',
thumbnail: ''
},
{
href: 'public/img/landing/pathfinder_1.jpg',
title: 'Map view',
imgTitle: 'Map view',
type: 'image/jpg',
thumbnail: ''
},
{
href: 'public/img/landing/pathfinder_3.jpg',
title: 'Map information',
imgTitle: 'Map information',
type: 'image/jpg',
thumbnail: ''
},
{
href: 'public/img/landing/pathfinder_2.jpg',
title: 'System information',
imgTitle: 'System information',
type: 'image/jpg',
thumbnail: ''
}
@@ -224,7 +224,7 @@ define([
container: '#' + config.galleryCarouselId,
carousel: true,
startSlideshow: false,
titleProperty: 'title',
titleProperty: 'imgTitle',
transitionSpeed: 600,
slideshowInterval: 5000,
onopened: function () {
@@ -232,6 +232,9 @@ define([
// and the initialization transition has been completed.
// -> show "demo" map
// set title for first slide
$( this.options.container ).find( this.options.titleElement).text('Browser view');
$('#' + config.headHeaderMapId).drawDemoMap(function(){
// zoom map SVGs
@@ -655,12 +658,15 @@ define([
initCharacterSelect();
// init carousel
initCarousel();
// init scrollspy
initScrollspy();
// init page observer
setPageObserver();
// init carousel
initCarousel();
// init gallery
initGallery();
@@ -678,8 +684,6 @@ define([
}, false);
}
setPageObserver();
});

View File

@@ -0,0 +1,75 @@
/**
* Created by Exodus on 26.06.2016.
*/
define([
'jquery',
'app/init',
'app/util'
], function($, Init, Util) {
'use strict';
/**
* init map scrollbar
* @param config
* @returns {*}
*/
$.fn.initCustomScrollbar = function(config){
// default config -------------------------------------------------------------------------
var defaultConfig = {
axis: 'x',
theme: 'light-thick',
scrollInertia: 300,
autoExpandScrollbar: false,
scrollButtons:{
scrollAmount: 30,
enable: true
},
callbacks:{
onTotalScrollOffset: 0,
onTotalScrollBackOffset: 0,
alwaysTriggerOffsets: true
},
advanced: {
updateOnBrowserResize: true,
updateOnContentResize: true,
autoExpandHorizontalScroll: true,
autoScrollOnFocus: "div"
},
mouseWheel:{
enable: false, // scroll weel currently disabled
scrollAmount: 'auto',
axis: 'x',
preventDefault: true
},
scrollbarPosition: 'inside',
autoDraggerLength: true
//autoHideScrollbar: false
};
// init -----------------------------------------------------------------------------------
config = $.extend(true, {}, defaultConfig, config);
return this.each(function(){
var scrollableElement = $(this);
// prevent multiple initialization
scrollableElement.mCustomScrollbar('destroy');
// init custom scrollbars
scrollableElement.mCustomScrollbar(config);
});
};
/**
* scroll to a specific position in the map
* demo: http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollTo_demo.html
* @returns {*} // string or id
*/
$.fn.scrollToX = function(position){
return this.each(function(){
$(this).mCustomScrollbar('scrollTo', position);
});
};
});

View File

@@ -51,12 +51,8 @@ define([
stagger: 300,
duration: 240,
//display: 'auto',
complete: function(){
}
complete: function(){}
});
});
}).fail(function( jqXHR, status, error) {
var reason = status + ' ' + jqXHR.status + ': ' + error;
@@ -70,29 +66,19 @@ define([
* show releases dialog
*/
$.fn.releasesDialog = function(){
var content = '<ul class="timeline"></ul>';
requirejs(['text!templates/dialog/releases.html', 'mustache'], function(template, Mustache) {
var data = {
test: 'blaBla'
};
var content = Mustache.render(template, data);
var releasesDialog = bootbox.dialog({
className: config.releasesDialogClass,
title: 'Releases',
size: 'large',
message: content
});
// after modal is shown =======================================================================
releasesDialog.on('shown.bs.modal', function(e) {
loadDialogData(releasesDialog);
});
var releasesDialog = bootbox.dialog({
className: config.releasesDialogClass,
title: 'Releases',
size: 'large',
message: content
});
// after modal is shown =======================================================================
releasesDialog.on('shown.bs.modal', function(e) {
loadDialogData(releasesDialog);
});
};
});

File diff suppressed because one or more lines are too long

View File

@@ -1,2 +0,0 @@
<ul class="timeline"></ul>

View File

@@ -0,0 +1,20 @@
{* Login notice information *}
<div class="row text-center">
<div class="col-xs-12 col-md-8 col-md-offset-2 pf-landing-pricing-panel">
<div class="panel panel-primary pricing-big">
<div class="panel-heading" >
<h3 class="panel-title">New release v1.1.1</h3>
</div>
<div class="panel-body no-padding text-align-center">
<div class="price-features" style="min-height: inherit;">
<ul class="list-unstyled text-left">
<li><i class="fa fa-fw fa-angle-right"></i>The <em>IGB</em> (In-Game-Browser) will be <a target="_blank" href="https://community.eveonline.com/news/dev-blogs/bidding-farewell-to-the-in-game-browser/">removed</a> from the <em>EVE-Online</em> client in October 2016.</li>
<li><i class="fa fa-fw fa-angle-right"></i><em>Pathfinder</em> already supports <em>CREST</em> authentication in preparation for this change.
Once <em>CCP</em> removes the <em>IGB</em> you will be able to use <em>Pathfinder</em> in any supported browser with no change in functionality.</li>
</ul>
</div>
</div>
</div>
</div>
</div>

View File

@@ -3,12 +3,22 @@
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">
<a href="{{releaseData.html_url}}" target="_blank">{{ releaseData.name }}</a>
<a href="{{releaseData.html_url}}" target="_blank">
<i class="fa fa-tag" aria-hidden="true"></i>&nbsp;{{ releaseData.name }}
</a>
<span class="text-muted pull-right">
{{ #releaseData.prerelease }}
<span class="label label-danger">Pre-release</span>
{{ /releaseData.prerelease }}
{{ ^releaseData.prerelease }}
{{#isFirst}}
<span class="label label-success">Latest release</span>
{{/isFirst}}
{{^isFirst}}
<span class="label label-default">Release</span>
{{/isFirst}}
{{ /releaseData.prerelease }}
<i class="fa fa-calendar fa-fw"></i> {{ releaseDate }}
</span>
</h4>

View File

@@ -161,6 +161,8 @@
</div>
</div>
{* splash page *}
<include href="templates/ui/notice.html"/>
</div>
</section>
@@ -600,9 +602,6 @@
</ul>
</div>
</div>
<div class="panel-footer text-align-center" data-placement="top" title="{{@registrationStatusTitle}}">
<button type="button" class="btn btn-primary btn-block pf-register-button {{@registrationStatusButton}}" role="button"><i class="fa fa-fw fa-user-plus"></i> Sign up</button>
</div>
</div>
</div>
@@ -627,9 +626,6 @@
</ul>
</div>
</div>
<div class="panel-footer text-align-center">
<a href="javascript:void(0);" class="btn btn-default btn-block disabled" role="button"><i class="fa fa-fw fa-pencil-square-o"></i> Apply for</a>
</div>
</div>
</div>
@@ -654,9 +650,6 @@
</ul>
</div>
</div>
<div class="panel-footer text-align-center">
<a href="javascript:void(0);" class="btn btn-default btn-block disabled" role="button"><i class="fa fa-fw fa-pencil-square-o"></i> Apply for</a>
</div>
</div>
</div>
</div>

View File

@@ -16,6 +16,7 @@
white-space: nowrap;
text-align: center;
background-color: $badge-bg;
text-indent: initial;
@include border-radius($badge-border-radius);

View File

@@ -33,7 +33,7 @@
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: ceil(($font-size-base * 1.125));
font-size: 13px;
color: inherit;
> a {

View File

@@ -523,6 +523,7 @@
.slide-content{
border-radius: 5px;
pointer-events: none; // hide show "title" attr on hover
}
// title style
@@ -565,6 +566,11 @@
padding: 20px 15px;
min-height: 205px;
line-height: 22px;
.list-unstyled.text-left li{
text-indent: -1em;
padding-left: 1.5em;
}
}
// table

View File

@@ -47,6 +47,41 @@ em{
padding: 0 !important;
}
// scroll bar (webkit only) =======================================================================
::-webkit-scrollbar {
width: 16px;
height: 16px;
}
::-webkit-scrollbar-track {
background-color: $gray-darker;
border-left: 1px solid $gray-dark;
border-radius: 2px;
@include transition( background-color .5s );
}
::-webkit-scrollbar-thumb {
height: 6px;
border: 5px solid transparent;
background-clip: padding-box;
-webkit-border-radius: 8px;
background-color: lighten($gray, 30%);
&:hover{
background-color: lighten($gray, 40%);
}
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
// help elements ==================================================================================
.pf-help{
cursor: pointer; // fallback

View File

@@ -58,6 +58,7 @@
padding: 8px;
position: relative;
background-color: $gray-dark;
font-size: 11px;
@include box-shadow(0 4px 10px rgba(0,0,0, 0.4));
@include border-radius(5px);
}