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:
Josef Citrine
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\Input;
|
||||
use Illuminate\Support\Facades\Response;
|
||||
use ColorThief\ColorThief;
|
||||
use Helpers;
|
||||
|
||||
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([
|
||||
'artist' => [
|
||||
'id' => $user->id,
|
||||
|
|
@ -167,6 +172,7 @@ class ArtistsController extends ApiControllerBase
|
|||
'small' => $user->getAvatarUrl(Image::SMALL),
|
||||
'normal' => $user->getAvatarUrl(Image::NORMAL)
|
||||
],
|
||||
'avatar_colors' => $formatted_palette,
|
||||
'created_at' => $user->created_at,
|
||||
'followers' => [],
|
||||
'following' => [],
|
||||
|
|
|
|||
|
|
@ -75,4 +75,19 @@ class Helpers
|
|||
|
||||
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",
|
||||
"cviebrock/laravel-elasticsearch": "^1.0",
|
||||
"barryvdh/laravel-debugbar": "^2.1",
|
||||
"predis/predis": "^1.0"
|
||||
"predis/predis": "^1.0",
|
||||
"ksubileau/color-thief-php": "^1.3"
|
||||
},
|
||||
"require-dev": {
|
||||
"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",
|
||||
"This file is @generated automatically"
|
||||
],
|
||||
"hash": "a12fe5f5687e21aac441868ccc882fa2",
|
||||
"content-hash": "95039400d11d1851dabe46e4c0456965",
|
||||
"hash": "34abdcf2e916a26919b81059ba38fa47",
|
||||
"content-hash": "afae7bc6603035b2573af4b56c91c0dd",
|
||||
"packages": [
|
||||
{
|
||||
"name": "barryvdh/laravel-debugbar",
|
||||
|
|
@ -1385,6 +1385,59 @@
|
|||
],
|
||||
"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",
|
||||
"version": "v5.1.28",
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
<div class="resource-details artist-details" ng-class="::{'x-archived': artist.is_archived}">
|
||||
<ul class="dropdowns">
|
||||
<li class="dropdown">
|
||||
<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()">
|
||||
|
||||
<header ng-style="{{::gradient}}">
|
||||
<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-show="artist.user_data.is_following">Following!</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<header>
|
||||
<h1>{{::artist.name}}</h1>
|
||||
|
||||
</div>
|
||||
</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>
|
||||
|
|
@ -17,7 +19,6 @@
|
|||
</li>
|
||||
<li ng-if="::artist.permissions.edit" ui-sref-active="{active: '.account'}"><a ui-sref=".account.settings">Manage Account</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
<div class="stretch-to-bottom">
|
||||
<ui-view></ui-view>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -26,6 +26,9 @@ module.exports = angular.module('ponyfm').controller "artist", [
|
|||
artists.fetch($state.params.slug)
|
||||
.done (artistResponse) ->
|
||||
$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 = () ->
|
||||
follow.toggle('artist', $scope.artist.id).then (res) ->
|
||||
|
|
|
|||
34
resources/assets/styles/content.less
vendored
34
resources/assets/styles/content.less
vendored
|
|
@ -144,19 +144,31 @@
|
|||
|
||||
&.artist-details {
|
||||
> header {
|
||||
.tabs {
|
||||
clear: left;
|
||||
margin: 0px;
|
||||
margin-top: 5px;
|
||||
border: none;
|
||||
font-size: 9pt;
|
||||
padding: 15px;
|
||||
|
||||
li.active {
|
||||
a {
|
||||
border: none;
|
||||
background: #C1889E;
|
||||
color: #fff;
|
||||
> img {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
float: left;
|
||||
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 {
|
||||
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