yetangitu/ampache
1
0
Fork 0
mirror of https://github.com/Yetangitu/ampache synced 2025-10-03 17:59:21 +02:00
Code Issues Releases Wiki Activity

Add responsive elements for tables and fix code style

Browse source
This commit is contained in:
Afterster 2014-03-15 10:19:59 +01:00
parent b7e0966007
commit ea815a1ff1
26 changed files with 258 additions and 124 deletions
Download patch file Download diff file Expand all files Collapse all files

6
README.md
View file

@ -88,9 +88,11 @@ Ampache includes some external modules that carry their own licensing.
* [Ratchet] (http://socketo.me): MIT
* [ReactPHP] (https://github.com/reactphp/react): MIT
* [Guzzle] (https://github.com/guzzle/guzzle): MIT
* [Symfony Components] (https://github.com/symfony/): MIT
* [Symfony Components] (https://github.com/symfony): MIT
* [Evenement] (https://github.com/igorw/evenement): MIT
* [RhinoSlider] (http://rhinoslider.com/): MIT
* [RhinoSlider] (http://rhinoslider.com): MIT
* [MediaTable] (https://github.com/edenspiekermann/MediaTable): MIT
* [Responsive Elements] (https://github.com/kumailht/responsive-elements): MIT
Translations

3
lib/class/plex_api.class.php
View file

@ -679,7 +679,8 @@ class Plex_Api
self::apiOutput($r->asXML());
}
protected static function stream_url($url) {
protected static function stream_url($url)
{
// header("Location: " . $url);
set_time_limit(0);

28
modules/jquery-mediaTable/jquery.mediaTable.css
View file

@ -86,37 +86,13 @@ http://www.consulenza-web.com/2012/01/mediatable-jquery-plugin/
/* -----[[ B R E A C K P O I N T S ]]------------ */
@media screen and (min-width: 768px) {
.activeMediaTable th.optional, .activeMediaTable td.optional {
.mediaTableWrapper.gt500 th.optional, .mediaTableWrapper.gt500 td.optional {
display: table-cell;
_display:block; /* IE6 Hack */
}
/* IE7 Hack */
*+html .activeMediaTable th.optional, *+html .activeMediaTable td.optional { display:block }
}
@media screen and (min-width: 1024px) {
.activeMediaTable th, .activeMediaTable td {
.mediaTableWrapper.gt700 th, .mediaTableWrapper.gt700 td {
display: table-cell;
_display:block; /* IE6 Hack */
}
/* IE7 Hack */
*+html .activeMediaTable th, *+html .activeMediaTable td { display:block }
}
/* -----[[ T H E M I N G ]]------------ */
/**

1
modules/jquery-mediaTable/jquery.mediaTable.js
View file

@ -71,6 +71,7 @@ http://www.consulenza-web.com/2012/01/mediatable-jquery-plugin/
// Create the wrapper.
wdg.$wrap.addClass('mediaTableWrapper');
wdg.$wrap.attr('data-respond', '');
// Place the wrapper near the table and fill with MediaTable.
wdg.$table.before(wdg.$wrap).appendTo(wdg.$wrap);

153
modules/responsive-elements/responsive-elements.js Normal file
View file

@ -0,0 +1,153 @@
//
// Responsive Elements
// Copyright (c) 2013 Kumail Hunaid
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//
var ResponsiveElements = {
elementsAttributeName: 'data-respond',
maxRefreshRate: 5,
defaults: {
// How soon should you start adding breakpoints
start: 100,
// When to stop adding breakpoints
end: 900,
// At what interval should breakpoints be added?
interval: 50
},
init: function() {
var self = this;
$(function() {
self.el = {
window: $(window),
responsive_elements: $('[' + self.elementsAttributeName + ']')
};
self.events();
});
},
parseOptions: function(options_string) {
// data-respond="start: 100px; end: 900px; interval: 50px; watch: true;"
if (!options_string) return false;
this._options_cache = this._options_cache || {};
if (this._options_cache[options_string]) return this._options_cache[options_string];
var options_array = options_string.replace(/\s+/g, '').split(';'),
options_object = {};
for (var i = 0; i < options_array.length; i++) {
if (!options_array[i]) continue;
var property_array = (options_array[i]).split(':');
var key = property_array[0];
var value = property_array[1];
if (value.slice(-2) === 'px') {
value = value.replace('px', '');
}
if (!isNaN(value)) {
value = parseInt(value, 10);
}
options_object[key] = value;
}
this._options_cache[options_string] = options_object;
return options_object;
},
generateBreakpointsOnAllElements: function() {
var self = ResponsiveElements;
self.el.responsive_elements.each(function(i, _el) {
self.generateBreakpointsOnElement($(_el));
});
},
generateBreakpointsOnElement: function(_el) {
var options_string = _el.attr(this.elementsAttributeName),
options = this.parseOptions(options_string) || this.defaults,
breakpoints = this.generateBreakpoints(_el.width(), options);
this.cleanUpBreakpoints(_el);
_el.addClass(breakpoints.join(' '));
},
generateBreakpoints: function(width, options) {
var start = options.start,
end = options.end,
interval = options.interval,
i = interval > start ? interval : ~~(start / interval) * interval,
classes = [];
while (i <= end) {
if (i < width) classes.push('gt' + i);
if (i > width) classes.push('lt' + i);
if (i == width) classes.push('lt' + i);
i += interval;
}
return classes;
},
parseBreakpointClasses: function(breakpoints_string) {
var classes = breakpoints_string.split(/\s+/),
breakpointClasses = [];
$(classes).each(function(i, className) {
if (className.match(/^gt\d+|lt\d+$/)) breakpointClasses.push(className);
});
return breakpointClasses;
},
cleanUpBreakpoints: function(_el) {
var classesToCleanup = this.parseBreakpointClasses(_el.attr('class') || '');
_el.removeClass(classesToCleanup.join(' '));
},
events: function() {
this.generateBreakpointsOnAllElements();
this.el.window.bind('resize', this.utils.debounce(
this.generateBreakpointsOnAllElements, this.maxRefreshRate));
},
utils: {
// Debounce is part of Underscore.js 1.5.2 http://underscorejs.org
// (c) 2009-2013 Jeremy Ashkenas. Distributed under the MIT license.
debounce: function(func, wait, immediate) {
// Returns a function, that, as long as it continues to be invoked,
// will not be triggered. The function will be called after it stops
// being called for N milliseconds. If `immediate` is passed,
// trigger the function on the leading edge, instead of the trailing.
var result;
var timeout = null;
return function() {
var context = this,
args = arguments;
var later = function() {
timeout = null;
if (!immediate) result = func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) result = func.apply(context, args);
return result;
};
}
}
};
ResponsiveElements.init();

1
templates/header.inc.php
View file

@ -53,6 +53,7 @@ if (AmpConfig::get('use_rss')) { ?>
<script src="<?php echo $web_path; ?>/modules/jscroll/jquery.jscroll.min.js" language="javascript" type="text/javascript"></script>
<script src="<?php echo $web_path; ?>/modules/jquery/jquery.qrcode.min.js" language="javascript" type="text/javascript"></script>
<script src="<?php echo $web_path; ?>/modules/rhinoslider/js/rhinoslider-1.05.min.js" language="javascript" type="text/javascript"></script>
<script src="<?php echo $web_path; ?>/modules/responsive-elements/responsive-elements.js" language="javascript" type="text/javascript"></script>
<script src="<?php echo $web_path; ?>/modules/jquery-mediaTable/jquery.mediaTable.js" language="javascript" type="text/javascript"></script>
<script src="<?php echo $web_path; ?>/lib/javascript/base.js" language="javascript" type="text/javascript"></script>
<script src="<?php echo $web_path; ?>/lib/javascript/ajax.js" language="javascript" type="text/javascript"></script>

20
templates/show_artists.inc.php
View file

@ -32,20 +32,20 @@ $thcount = 8;
<table class="tabledata" cellpadding="0" cellspacing="0">
<thead>
<tr class="th-top">
<th class="cel_play"></th>
<th class="cel_artist"><?php echo Ajax::text('?page=browse&action=set_sort&browse_id=' . $browse->id . '&type=artist&sort=name', T_('Artist'),'artist_sort_name'); ?></th>
<th class="cel_add"></th>
<th class="cel_songs"><?php echo T_('Songs'); ?></th>
<th class="cel_albums"><?php echo T_('Albums'); ?></th>
<th class="cel_time"><?php echo T_('Time'); ?></th>
<th class="cel_tags"><?php echo T_('Tags'); ?></th>
<th class="cel_play essential"></th>
<th class="cel_artist essential persist"><?php echo Ajax::text('?page=browse&action=set_sort&browse_id=' . $browse->id . '&type=artist&sort=name', T_('Artist'),'artist_sort_name'); ?></th>
<th class="cel_add essential"></th>
<th class="cel_songs optional"><?php echo T_('Songs'); ?></th>
<th class="cel_albums optional"><?php echo T_('Albums'); ?></th>
<th class="cel_time optional"><?php echo T_('Time'); ?></th>
<th class="cel_tags optional"><?php echo T_('Tags'); ?></th>
<?php if (AmpConfig::get('ratings')) { ++$thcount; ?>
<th class="cel_rating"><?php echo T_('Rating'); ?></th>
<th class="cel_rating optional"><?php echo T_('Rating'); ?></th>
<?php } ?>
<?php if (AmpConfig::get('userflags')) { ++$thcount; ?>
<th class="cel_userflag"><?php echo T_('Flag'); ?></th>
<th class="cel_userflag optional"><?php echo T_('Flag'); ?></th>
<?php } ?>
<th class="cel_action"><?php echo T_('Action'); ?></th>
<th class="cel_action essential"><?php echo T_('Action'); ?></th>
</tr>
</thead>
<tbody>