mirror of
https://github.com/Poniverse/Pony.fm.git
synced 2024-11-22 04:58:01 +01:00
New profiles, works better on mobile
This commit is contained in:
parent
11541c89d5
commit
44bcf87ddb
8 changed files with 145 additions and 30 deletions
|
@ -31,6 +31,8 @@ use Poniverse\Ponyfm\Models\User;
|
||||||
use Illuminate\Support\Facades\App;
|
use Illuminate\Support\Facades\App;
|
||||||
use Illuminate\Support\Facades\Input;
|
use Illuminate\Support\Facades\Input;
|
||||||
use Illuminate\Support\Facades\Response;
|
use Illuminate\Support\Facades\Response;
|
||||||
|
use ColorThief\ColorThief;
|
||||||
|
use Helpers;
|
||||||
|
|
||||||
class ArtistsController extends ApiControllerBase
|
class ArtistsController extends ApiControllerBase
|
||||||
{
|
{
|
||||||
|
@ -157,6 +159,9 @@ class ArtistsController extends ApiControllerBase
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$palette = ColorThief::getPalette($user->getAvatarUrl(Image::SMALL), 2);
|
||||||
|
$formatted_palette = array_map("Helpers::rgb2hex", $palette);
|
||||||
|
|
||||||
return Response::json([
|
return Response::json([
|
||||||
'artist' => [
|
'artist' => [
|
||||||
'id' => $user->id,
|
'id' => $user->id,
|
||||||
|
@ -167,6 +172,7 @@ class ArtistsController extends ApiControllerBase
|
||||||
'small' => $user->getAvatarUrl(Image::SMALL),
|
'small' => $user->getAvatarUrl(Image::SMALL),
|
||||||
'normal' => $user->getAvatarUrl(Image::NORMAL)
|
'normal' => $user->getAvatarUrl(Image::NORMAL)
|
||||||
],
|
],
|
||||||
|
'avatar_colors' => $formatted_palette,
|
||||||
'created_at' => $user->created_at,
|
'created_at' => $user->created_at,
|
||||||
'followers' => [],
|
'followers' => [],
|
||||||
'following' => [],
|
'following' => [],
|
||||||
|
|
|
@ -75,4 +75,19 @@ class Helpers
|
||||||
|
|
||||||
return '<abbr class="timeago" title="' . $title . '">' . $content . '</abbr>';
|
return '<abbr class="timeago" title="' . $title . '">' . $content . '</abbr>';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Converts an RGB array to a hex string
|
||||||
|
*
|
||||||
|
* @param array[int] $rgb RGB values in an array
|
||||||
|
* @return string
|
||||||
|
*/
|
||||||
|
public static function rgb2hex($rgb) {
|
||||||
|
$hex = "#";
|
||||||
|
$hex .= str_pad(dechex($rgb[0]), 2, "0", STR_PAD_LEFT);
|
||||||
|
$hex .= str_pad(dechex($rgb[1]), 2, "0", STR_PAD_LEFT);
|
||||||
|
$hex .= str_pad(dechex($rgb[2]), 2, "0", STR_PAD_LEFT);
|
||||||
|
|
||||||
|
return $hex;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,7 +16,8 @@
|
||||||
"pda/pheanstalk": "~3.0",
|
"pda/pheanstalk": "~3.0",
|
||||||
"cviebrock/laravel-elasticsearch": "^1.0",
|
"cviebrock/laravel-elasticsearch": "^1.0",
|
||||||
"barryvdh/laravel-debugbar": "^2.1",
|
"barryvdh/laravel-debugbar": "^2.1",
|
||||||
"predis/predis": "^1.0"
|
"predis/predis": "^1.0",
|
||||||
|
"ksubileau/color-thief-php": "^1.3"
|
||||||
},
|
},
|
||||||
"require-dev": {
|
"require-dev": {
|
||||||
"fzaninotto/faker": "~1.4",
|
"fzaninotto/faker": "~1.4",
|
||||||
|
|
57
composer.lock
generated
57
composer.lock
generated
|
@ -4,8 +4,8 @@
|
||||||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
|
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
|
||||||
"This file is @generated automatically"
|
"This file is @generated automatically"
|
||||||
],
|
],
|
||||||
"hash": "a12fe5f5687e21aac441868ccc882fa2",
|
"hash": "34abdcf2e916a26919b81059ba38fa47",
|
||||||
"content-hash": "95039400d11d1851dabe46e4c0456965",
|
"content-hash": "afae7bc6603035b2573af4b56c91c0dd",
|
||||||
"packages": [
|
"packages": [
|
||||||
{
|
{
|
||||||
"name": "barryvdh/laravel-debugbar",
|
"name": "barryvdh/laravel-debugbar",
|
||||||
|
@ -1385,6 +1385,59 @@
|
||||||
],
|
],
|
||||||
"time": "2015-12-05 17:17:57"
|
"time": "2015-12-05 17:17:57"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "ksubileau/color-thief-php",
|
||||||
|
"version": "v1.3.0",
|
||||||
|
"source": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/ksubileau/color-thief-php.git",
|
||||||
|
"reference": "f0e1bc5da3dd86abd3e8c95a553c3e8f25e0fe7e"
|
||||||
|
},
|
||||||
|
"dist": {
|
||||||
|
"type": "zip",
|
||||||
|
"url": "https://api.github.com/repos/ksubileau/color-thief-php/zipball/f0e1bc5da3dd86abd3e8c95a553c3e8f25e0fe7e",
|
||||||
|
"reference": "f0e1bc5da3dd86abd3e8c95a553c3e8f25e0fe7e",
|
||||||
|
"shasum": ""
|
||||||
|
},
|
||||||
|
"require": {
|
||||||
|
"php": ">=5.3.0"
|
||||||
|
},
|
||||||
|
"require-dev": {
|
||||||
|
"phpunit/phpunit": "4.*",
|
||||||
|
"squizlabs/php_codesniffer": "2.*"
|
||||||
|
},
|
||||||
|
"suggest": {
|
||||||
|
"ext-gd": "to use the GD image adapter.",
|
||||||
|
"ext-gmagick": "to use the Gmagick image adapter.",
|
||||||
|
"ext-imagick": "to use the Imagick image adapter."
|
||||||
|
},
|
||||||
|
"type": "library",
|
||||||
|
"autoload": {
|
||||||
|
"psr-0": {
|
||||||
|
"ColorThief": "lib/"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"notification-url": "https://packagist.org/downloads/",
|
||||||
|
"license": [
|
||||||
|
"CC-BY-2.5"
|
||||||
|
],
|
||||||
|
"authors": [
|
||||||
|
{
|
||||||
|
"name": "Kevin Subileau",
|
||||||
|
"homepage": "http://www.kevinsubileau.fr"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"description": "Grabs the dominant color or a representative color palette from an image.",
|
||||||
|
"homepage": "http://www.kevinsubileau.fr/projets/color-thief-php",
|
||||||
|
"keywords": [
|
||||||
|
"color",
|
||||||
|
"dominant",
|
||||||
|
"palette",
|
||||||
|
"php",
|
||||||
|
"thief"
|
||||||
|
],
|
||||||
|
"time": "2016-01-17 18:55:16"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "laravel/framework",
|
"name": "laravel/framework",
|
||||||
"version": "v5.1.28",
|
"version": "v5.1.28",
|
||||||
|
|
|
@ -1,23 +1,24 @@
|
||||||
<div class="resource-details artist-details" ng-class="::{'x-archived': artist.is_archived}">
|
<div class="resource-details artist-details" ng-class="::{'x-archived': artist.is_archived}">
|
||||||
<ul class="dropdowns">
|
|
||||||
<li class="dropdown">
|
<header ng-style="{{::gradient}}">
|
||||||
<a href="#" class="btn btn-small" ng-class="{'btn-primary': !artist.user_data.is_following}" ng-show="::auth.isLogged && auth.user.id != artist.id" pfm-eat-click ng-click="toggleFollow()">
|
<img src="{{::artist.avatars.normal}}">
|
||||||
|
<div class="artist-right">
|
||||||
|
<h1>{{::artist.name}}</h1>
|
||||||
|
<a href="#" class="btn btn-default" ng-class="{'btn-primary': !artist.user_data.is_following}" ng-show="::auth.isLogged && auth.user.id != artist.id" pfm-eat-click ng-click="toggleFollow()">
|
||||||
<span ng-hide="artist.user_data.is_following">Follow</span>
|
<span ng-hide="artist.user_data.is_following">Follow</span>
|
||||||
<span ng-show="artist.user_data.is_following">Following!</span>
|
<span ng-show="artist.user_data.is_following">Following!</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
|
||||||
</ul>
|
</div>
|
||||||
<header>
|
|
||||||
<h1>{{::artist.name}}</h1>
|
|
||||||
<ul class="tabs">
|
|
||||||
<li ui-sref-active="active"><a ui-sref=".profile">Profile</a></li>
|
|
||||||
<li ui-sref-active="active"><a ui-sref=".content">Content</a></li>
|
|
||||||
<li ng-if="::!artist.is_archived" ui-sref-active="active">
|
|
||||||
<a ui-sref=".favourites">Favourites</a>
|
|
||||||
</li>
|
|
||||||
<li ng-if="::artist.permissions.edit" ui-sref-active="{active: '.account'}"><a ui-sref=".account.settings">Manage Account</a></li>
|
|
||||||
</ul>
|
|
||||||
</header>
|
</header>
|
||||||
|
<ul class="tabs">
|
||||||
|
<li ui-sref-active="active"><a ui-sref=".profile">Profile</a></li>
|
||||||
|
<li ui-sref-active="active"><a ui-sref=".content">Content</a></li>
|
||||||
|
<li ng-if="::!artist.is_archived" ui-sref-active="active">
|
||||||
|
<a ui-sref=".favourites">Favourites</a>
|
||||||
|
</li>
|
||||||
|
<li ng-if="::artist.permissions.edit" ui-sref-active="{active: '.account'}"><a ui-sref=".account.settings">Manage Account</a></li>
|
||||||
|
</ul>
|
||||||
<div class="stretch-to-bottom">
|
<div class="stretch-to-bottom">
|
||||||
<ui-view></ui-view>
|
<ui-view></ui-view>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -26,6 +26,9 @@ module.exports = angular.module('ponyfm').controller "artist", [
|
||||||
artists.fetch($state.params.slug)
|
artists.fetch($state.params.slug)
|
||||||
.done (artistResponse) ->
|
.done (artistResponse) ->
|
||||||
$scope.artist = artistResponse.artist
|
$scope.artist = artistResponse.artist
|
||||||
|
$scope.gradient = {
|
||||||
|
'background-image': 'linear-gradient(135deg, ' + $scope.artist.avatar_colors[0] + ' 15%, ' + $scope.artist.avatar_colors[1] + ' 100%)'
|
||||||
|
}
|
||||||
|
|
||||||
$scope.toggleFollow = () ->
|
$scope.toggleFollow = () ->
|
||||||
follow.toggle('artist', $scope.artist.id).then (res) ->
|
follow.toggle('artist', $scope.artist.id).then (res) ->
|
||||||
|
|
36
resources/assets/styles/content.less
vendored
36
resources/assets/styles/content.less
vendored
|
@ -144,19 +144,31 @@
|
||||||
|
|
||||||
&.artist-details {
|
&.artist-details {
|
||||||
> header {
|
> header {
|
||||||
.tabs {
|
padding: 15px;
|
||||||
clear: left;
|
|
||||||
margin: 0px;
|
|
||||||
margin-top: 5px;
|
|
||||||
border: none;
|
|
||||||
font-size: 9pt;
|
|
||||||
|
|
||||||
li.active {
|
> img {
|
||||||
a {
|
width: 150px;
|
||||||
border: none;
|
height: 150px;
|
||||||
background: #C1889E;
|
float: left;
|
||||||
color: #fff;
|
background: #fff;
|
||||||
}
|
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||||
|
}
|
||||||
|
|
||||||
|
> .artist-right {
|
||||||
|
margin-left: 165px;
|
||||||
|
margin-top: 5px;
|
||||||
|
|
||||||
|
> h1 {
|
||||||
|
font-size: 20pt;
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
display: inline;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .btn {
|
||||||
|
display: table;
|
||||||
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
24
resources/assets/styles/mobile.less
vendored
24
resources/assets/styles/mobile.less
vendored
|
@ -128,4 +128,28 @@
|
||||||
.stretch-to-bottom {
|
.stretch-to-bottom {
|
||||||
overflow-y: initial !important;
|
overflow-y: initial !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.artist-details {
|
||||||
|
> header {
|
||||||
|
> img {
|
||||||
|
float: none !important;
|
||||||
|
display: block;
|
||||||
|
width: 50% !important;
|
||||||
|
height: 50% !important;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .artist-right {
|
||||||
|
margin-left: 0px !important;
|
||||||
|
margin-top: 15px !important;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
> .btn {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue