Skip to content

B
Backend Server
Commit 0dfbc506 authored by SpinShare's avatar SpinShare
Browse files
Options

first features of song detail 2.0.0

parent 3dceb47a
Show whitespace changes
Inline Side-by-side
Showing with 1736 additions and 288 deletions
composer.lock
View file @ 0dfbc506
......@@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "4fe4d9fa2138d29c339b543a142f26f3",
"content-hash": "16c9cabddde29d2601090fcd9586f9ec",
"packages": [
{
"name": "doctrine/annotations",
......@@ -402,6 +402,20 @@
"sqlserver",
"sqlsrv"
],
"funding": [
{
"url": "https://www.doctrine-project.org/sponsorship.html",
"type": "custom"
},
{
"url": "https://www.patreon.com/phpdoctrine",
"type": "patreon"
},
{
"url": "https://tidelift.com/funding/github/packagist/doctrine%2Fdbal",
"type": "tidelift"
}
],
"time": "2020-04-20T17:19:26+00:00"
},
{
......@@ -494,6 +508,20 @@
"orm",
"persistence"
],
"funding": [
{
"url": "https://www.doctrine-project.org/sponsorship.html",
"type": "custom"
},
{
"url": "https://www.patreon.com/phpdoctrine",
"type": "patreon"
},
{
"url": "https://tidelift.com/funding/github/packagist/doctrine%2Fdoctrine-bundle",
"type": "tidelift"
}
],
"time": "2020-04-23T10:52:09+00:00"
},
{
......@@ -1505,6 +1533,12 @@
"laminas",
"zf"
],
"funding": [
{
"url": "https://funding.communitybridge.org/projects/laminas-project",
"type": "community_bridge"
}
],
"time": "2020-04-03T16:01:00+00:00"
},
{
......@@ -1634,6 +1668,16 @@
}
],
"description": "Composer plugin that provides efficient querying for installed package versions (no runtime IO)",
"funding": [
{
"url": "https://github.com/Ocramius",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/ocramius/package-versions",
"type": "tidelift"
}
],
"time": "2020-04-06T17:43:35+00:00"
},
{
......@@ -1709,6 +1753,16 @@
"proxy pattern",
"service proxies"
],
"funding": [
{
"url": "https://github.com/Ocramius",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/ocramius/proxy-manager",
"type": "tidelift"
}
],
"time": "2020-04-13T14:42:16+00:00"
},
{
......@@ -2239,6 +2293,20 @@
],
"description": "Symfony Asset Component",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -2318,6 +2386,20 @@
"caching",
"psr6"
],
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -2440,6 +2522,20 @@
],
"description": "Symfony Config Component",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -2516,6 +2612,20 @@
],
"description": "Symfony Console Component",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-30T11:41:10+00:00"
},
{
......@@ -2645,6 +2755,20 @@
],
"description": "Symfony DependencyInjection Component",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-30T10:09:30+00:00"
},
{
......@@ -2739,6 +2863,20 @@
],
"description": "Symfony Doctrine Bridge",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -2796,6 +2934,20 @@
"env",
"environment"
],
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -3031,6 +3183,20 @@
],
"description": "Symfony ExpressionLanguage Component",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -3081,6 +3247,20 @@
],
"description": "Symfony Filesystem Component",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -3130,6 +3310,20 @@
],
"description": "Symfony Finder Component",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -3263,6 +3457,20 @@
],
"description": "Symfony Form Component",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -3394,6 +3602,20 @@
],
"description": "Symfony FrameworkBundle",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-30T11:41:10+00:00"
},
{
......@@ -3462,6 +3684,20 @@
],
"description": "Symfony HttpClient component",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -3722,6 +3958,20 @@
"symfony",
"words"
],
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -3797,6 +4047,20 @@
"l10n",
"localization"
],
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -3865,6 +4129,20 @@
],
"description": "Symfony Mailer Component",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -3927,6 +4205,20 @@
"mime",
"mime-type"
],
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -3994,6 +4286,20 @@
],
"description": "Symfony Monolog Bridge",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -4111,6 +4417,20 @@
"configuration",
"options"
],
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -4479,6 +4799,20 @@
],
"description": "Symfony Process Component",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -4546,6 +4880,20 @@
"property path",
"reflection"
],
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -4622,6 +4970,20 @@
"type",
"validator"
],
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -4698,6 +5060,20 @@
"uri",
"url"
],
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-30T11:41:10+00:00"
},
{
......@@ -4781,6 +5157,20 @@
],
"description": "Symfony SecurityBundle",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-30T11:41:10+00:00"
},
{
......@@ -4913,6 +5303,20 @@
],
"description": "Symfony Security Component - CSRF Library",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -4967,6 +5371,20 @@
],
"description": "Symfony Security Component - Guard",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -5115,6 +5533,20 @@
],
"description": "Symfony Serializer Component",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -5253,6 +5685,20 @@
],
"description": "Symfony Stopwatch Component",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -5374,6 +5820,20 @@
],
"description": "Symfony Templating Component",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -5450,6 +5910,20 @@
],
"description": "Symfony Translation Component",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -5610,6 +6084,20 @@
],
"description": "Symfony Twig Bridge",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -5685,6 +6173,20 @@
],
"description": "Symfony TwigBundle",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -5806,6 +6308,20 @@
],
"description": "Symfony Validator Component",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-30T11:41:10+00:00"
},
{
......@@ -5882,6 +6398,20 @@
"debug",
"dump"
],
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -5942,6 +6472,20 @@
"instantiate",
"serialize"
],
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -6018,6 +6562,20 @@
"psr13",
"push"
],
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -6077,8 +6635,77 @@
],
"description": "Symfony Yaml Component",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-30T11:41:10+00:00"
},
{
"name": "twig/extensions",
"version": "v1.5.4",
"source": {
"type": "git",
"url": "https://github.com/twigphp/Twig-extensions.git",
"reference": "57873c8b0c1be51caa47df2cdb824490beb16202"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/twigphp/Twig-extensions/zipball/57873c8b0c1be51caa47df2cdb824490beb16202",
"reference": "57873c8b0c1be51caa47df2cdb824490beb16202",
"shasum": ""
},
"require": {
"twig/twig": "^1.27|^2.0"
},
"require-dev": {
"symfony/phpunit-bridge": "^3.4",
"symfony/translation": "^2.7|^3.4"
},
"suggest": {
"symfony/translation": "Allow the time_diff output to be translated"
},
"type": "library",
"extra": {
"branch-alias": {
"dev-master": "1.5-dev"
}
},
"autoload": {
"psr-0": {
"Twig_Extensions_": "lib/"
},
"psr-4": {
"Twig\\Extensions\\": "src/"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Fabien Potencier",
"email": "fabien@symfony.com"
}
],
"description": "Common additional features for Twig that do not directly belong in core",
"keywords": [
"i18n",
"text"
],
"time": "2018-12-05T18:34:18+00:00"
},
{
"name": "twig/extra-bundle",
"version": "v3.0.3",
......@@ -6410,6 +7037,20 @@
],
"description": "Symfony BrowserKit Component",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-28T10:15:50+00:00"
},
{
......@@ -6463,6 +7104,20 @@
],
"description": "Symfony CssSelector Component",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -6529,6 +7184,20 @@
],
"description": "Symfony DebugBundle",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
},
{
......@@ -6558,6 +7227,20 @@
"MIT"
],
"description": "A debug pack for Symfony projects",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-04-07T10:08:51+00:00"
},
{
......@@ -6619,6 +7302,20 @@
],
"description": "Symfony DomCrawler Component",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-29T19:12:22+00:00"
},
{
......@@ -6687,6 +7384,20 @@
"scaffold",
"scaffolding"
],
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-04-21T19:17:25+00:00"
},
{
......@@ -6752,6 +7463,20 @@
],
"description": "Symfony PHPUnit Bridge",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:56:45+00:00"
},
{
......@@ -6874,6 +7599,20 @@
],
"description": "Symfony WebProfilerBundle",
"homepage": "https://symfony.com",
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-03-27T16:54:36+00:00"
}
],
......@@ -6887,5 +7626,6 @@
"ext-ctype": "*",
"ext-iconv": "*"
},
"platform-dev": []
"platform-dev": [],
"plugin-api-version": "1.1.0"
}
config/packages/twig_extensions.yaml 0 → 100644
View file @ 0dfbc506
services:
_defaults:
public: false
autowire: true
autoconfigure: true
# Uncomment any lines below to activate that Twig extension
#Twig\Extensions\ArrayExtension: null
#Twig\Extensions\DateExtension: null
#Twig\Extensions\IntlExtension: null
#Twig\Extensions\TextExtension: null
public/assets/css/songdetail.css
View file @ 0dfbc506
.section-song-detail .song-detail-background {
background-size: cover;
background-position: center;
}
.section-song-detail .song-detail-background .song-detail-dim {
backdrop-filter: blur(10px);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), #212629);
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail {
padding: 50px;
.section-song-detail {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-columns: 500px 1fr;
grid-gap: 25px;
padding: 50px;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-cover {
width: 200px;
height: 200px;
position: relative;
align-self: center;
background: #eee;
border-radius: 6px;
background-size: cover;
.section-song-detail .song-detail .song-meta {
display: grid;
grid-template-columns: auto 1fr;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
}
.section-song-detail .song-detail .song-meta .cover {
height: 100%;
width: 50px;
background-position: center;
background-size: cover;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-title {
font-weight: bold;
font-size: 48px;
word-break: break-all;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-subtitle {
font-size: 20px;
word-break: break-all;
.section-song-detail .song-detail .song-meta .song-metadata {
padding: 20px;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-artist {
margin-top: 5px;
.section-song-detail .song-detail .song-meta .song-metadata .song-title {
font-weight: bold;
font-size: 18px;
word-break: break-all;
margin-bottom: 2px;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-charter {
margin-top: 10px;
font-size: 14px;
opacity: 0.6;
word-break: break-all;
.section-song-detail .song-detail .song-meta .song-metadata .song-subtitle {
margin-bottom: 5px;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-tags {
margin-top: 10px;
.section-song-detail .song-detail .song-meta .song-metadata .song-artist {
opacity: 0.6;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-tags .tag {
display: inline-block;
font-size: 12px;
font-weight: bold;
color: #222;
background: #fff;
padding: 5px 20px;
border-radius: 50px;
margin-right: 10px;
margin-top: 5px;
word-break: break-all;
.section-song-detail .song-detail .song-actions {
margin-top: 25px;
width: 500px;
display: flex;
transition: all 0.2s ease-in-out;
border-radius: 4px;
overflow: hidden;
}
.section-song-detail .song-detail .song-actions .action,
.section-song-detail .song-detail .song-actions .action-player {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
width: 25%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-decoration: none;
transition: 0.2s ease-in-out opacity;
transition: all 0.2s ease-in-out;
cursor: pointer;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-tags .tag:hover {
.section-song-detail .song-detail .song-actions .action .icon,
.section-song-detail .song-detail .song-actions .action-player .icon {
display: flex;
justify-content: center;
align-items: center;
height: 48px;
width: 48px;
font-size: 24px;
}
.section-song-detail .song-detail .song-actions .action .volume,
.section-song-detail .song-detail .song-actions .action-player .volume {
width: 0px;
overflow: hidden;
padding-left: 0px;
transition: all 0.2s ease-in-out;
}
.section-song-detail .song-detail .song-actions .action:hover,
.section-song-detail .song-detail .song-actions .action-player:hover {
opacity: 0.6;
cursor: pointer;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-difficulties {
margin-top: 15px;
height: 20px;
.section-song-detail .song-detail .song-actions.player-active .action {
width: calc((100% - 250px) / 3);
}
.section-song-detail .song-detail .song-actions.player-active .action-player {
width: 250px;
}
.section-song-detail .song-detail .song-actions.player-active .action-player .volume {
width: 170px;
padding-left: 20px;
}
.section-song-detail .song-detail .song-statistics {
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 4px;
margin-top: 25px;
}
.section-song-detail .song-detail .song-statistics .stat {
display: grid;
grid-template-columns: 30px 1fr;
grid-gap: 15px;
}
.section-song-detail .song-detail .song-statistics .stat .icon {
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-difficulties img {
height: 20px;
margin-right: 10px;
opacity: 0.3;
.section-song-detail .song-detail .song-statistics .stat .difficulties {
align-self: center;
}
.section-song-detail .song-detail .song-statistics .stat .difficulties img {
height: 25px;
margin-right: 5px;
opacity: 0.4;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-difficulties img.active {
.section-song-detail .song-detail .song-statistics .stat .difficulties img.active {
opacity: 1;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-uploader {
margin-top: 15px;
.section-song-detail .song-detail .song-statistics .stat .content {
align-self: center;
opacity: 0.6;
}
.section-song-detail .song-detail .song-uploader {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 15px;
margin-top: 25px;
}
.section-song-detail .song-detail .song-uploader .label {
align-self: center;
opacity: 0.6;
}
.section-song-detail .song-detail .song-description {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
margin-top: 25px;
display: grid;
grid-gap: 15px;
}
.section-song-detail .song-detail .song-description .text {
line-height: 1.5em;
padding: 20px;
opacity: 0.7;
}
.section-song-detail .song-social .tab-header {
display: flex;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-uploader .user-item {
width: auto;
color: #fff;
text-decoration: none;
padding-right: 15px;
.section-song-detail .song-social .tab-header .tab-header-item {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.25em;
padding: 15px 25px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
opacity: 0.4;
background: rgba(0, 0, 0, 0.4);
transition: 0.2s ease-in-out all;
}
.section-song-detail .song-social .tab-header .tab-header-item:not(.active):hover {
cursor: pointer;
opacity: 0.75;
}
.section-song-detail .song-detail-actions,
.section-song-detail .song-detail-actions-owner,
.section-song-detail .song-detail-actions-moderator {
padding: 50px;
padding-top: 0px;
.section-song-detail .song-social .tab-header .tab-header-item.active {
opacity: 1;
background: rgba(255, 255, 255, 0.1);
}
.section-song-detail .song-social .tab {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
border-top-left-radius: 0px;
padding: 20px;
display: none;
}
.section-song-detail .song-social .tab.active {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 25px;
}
.section-song-detail .song-detail-actions.song-detail-actions-owner,
.section-song-detail .song-detail-actions-owner.song-detail-actions-owner,
.section-song-detail .song-detail-actions-moderator.song-detail-actions-owner {
grid-template-columns: 1fr 1fr 1fr 1fr 60px 60px;
}
.section-song-detail .song-detail-actions.song-detail-actions-moderator,
.section-song-detail .song-detail-actions-owner.song-detail-actions-moderator,
.section-song-detail .song-detail-actions-moderator.song-detail-actions-moderator {
grid-template-columns: 1fr 1fr 1fr 1fr 60px;
}
.section-song-detail .song-detail-actions .button,
.section-song-detail .song-detail-actions-owner .button,
.section-song-detail .song-detail-actions-moderator .button {
padding: 15px 0px;
font-size: 16px;
transition: 0.2s ease-in-out background, 0.2s ease-in-out color, 0.1s ease-in-out transform;
}
.section-song-detail .song-detail-actions .button.button-primary,
.section-song-detail .song-detail-actions-owner .button.button-primary,
.section-song-detail .song-detail-actions-moderator .button.button-primary {
background: #fff;
color: #222;
}
.section-song-detail .song-detail-actions .button.button-primary:hover,
.section-song-detail .song-detail-actions-owner .button.button-primary:hover,
.section-song-detail .song-detail-actions-moderator .button.button-primary:hover {
background: #fff;
color: #222;
}
.section-song-detail .song-detail-actions .button.button-icon,
.section-song-detail .song-detail-actions-owner .button.button-icon,
.section-song-detail .song-detail-actions-moderator .button.button-icon {
padding: 11px 0px;
}
.section-song-detail .song-detail-actions .button.button-icon i,
.section-song-detail .song-detail-actions-owner .button.button-icon i,
.section-song-detail .song-detail-actions-moderator .button.button-icon i {
font-size: 20px;
}
.section-song-detail .song-detail-actions .button:hover,
.section-song-detail .song-detail-actions-owner .button:hover,
.section-song-detail .song-detail-actions-moderator .button:hover {
background: rgba(255, 255, 255, 0.2);
.section-song-detail .song-social .tab.tab-reviews .review-overview {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
padding: 20px 30px;
display: grid;
grid-template-columns: auto 1fr auto;
grid-gap: 25px;
align-items: center;
}
.section-song-detail .song-social .tab.tab-reviews .review-overview .icon {
color: #fff;
font-size: 48px;
}
.section-song-detail .song-social .tab.tab-reviews .review-overview .text .percentage {
font-size: 32px;
}
.section-song-detail .song-social .tab.tab-reviews .review-overview .text .label {
font-size: 12px;
font-weight: bold;
letter-spacing: 0.25em;
margin-bottom: 5px;
}
.section-song-detail .song-social .tab.tab-reviews .review-overview .text .disclaimer {
opacity: 0.6;
transform: translateY(-4px);
}
.section-song-detail .song-detail-actions .button:active,
.section-song-detail .song-detail-actions-owner .button:active,
.section-song-detail .song-detail-actions-moderator .button:active {
transform: translateY(-2px);
.section-song-detail .song-social .tab.tab-reviews .review-overview .action-button {
text-decoration: none;
color: #fff;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.1em;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
padding: 10px 20px;
border-radius: 4px;
text-transform: uppercase;
transition: 0.2s ease-in-out all;
}
.section-song-detail .song-social .tab.tab-reviews .review-overview .action-button:hover {
opacity: 0.6;
}
.section-song-detail .song-social .tab.tab-reviews .reviews {
display: grid;
grid-gap: 10px;
}
.section-song-detail .song-social .tab.tab-reviews .reviews .review {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
padding: 20px;
}
public/assets/css/songdetail.less
View file @ 0dfbc506
.section-song-detail {
& .song-detail-background {
background-size: cover;
background-position: center;
& .song-detail-dim {
backdrop-filter: blur(10px);
background: linear-gradient(180deg, rgba(0,0,0,0.4), #212629);
& .song-detail {
padding: 50px;
display: grid;
grid-template-columns: 200px 1fr;
grid-template-columns: 500px 1fr;
grid-gap: 25px;
padding: 50px;
& .song-cover {
width: 200px;
height: 200px;
position: relative;
align-self: center;
background: #eee;
border-radius: 6px;
background-size: cover;
& .song-detail {
& .song-meta {
display: grid;
grid-template-columns: auto 1fr;
background: rgba(255,255,255,0.1);
border-radius: 4px;
overflow: hidden;
& .cover {
height: 100%;
width: 50px;
background-position: center;
background-size: cover;
}
& .song-meta-data {
& .song-metadata {
padding: 20px;
& .song-title {
font-weight: bold;
font-size: 48px;
word-break: break-all;
font-size: 18px;
margin-bottom: 2px;
}
& .song-subtitle {
font-size: 20px;
word-break: break-all;
margin-bottom: 5px;
}
& .song-artist {
margin-top: 5px;
font-size: 18px;
word-break: break-all;
}
& .song-charter {
margin-top: 10px;
font-size: 14px;
opacity: 0.6;
word-break: break-all;
}
& .song-tags {
margin-top: 10px;
}
}
& .song-actions {
margin-top: 25px;
width: 500px;
display: flex;
transition: all 0.2s ease-in-out;
border-radius: 4px;
overflow: hidden;
& .tag {
display: inline-block;
font-size: 12px;
font-weight: bold;
color: #222;
background: #fff;
padding: 5px 20px;
border-radius: 50px;
margin-right: 10px;
margin-top: 5px;
word-break: break-all;
& .action, & .action-player {
background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
width: 25%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-decoration: none;
transition: 0.2s ease-in-out opacity;
transition: all 0.2s ease-in-out;
cursor: pointer;
& .icon {
display: flex;
justify-content: center;
align-items: center;
height: 48px;
width: 48px;
font-size: 24px;
}
& .volume {
width: 0px;
overflow: hidden;
padding-left: 0px;
transition: all 0.2s ease-in-out;
}
&:hover {
opacity: 0.6;
cursor: pointer;
}
}
&.player-active {
& .action {
width: calc((100% - 250px) / 3);
}
& .action-player {
width: 250px;
& .volume {
width: 170px;
padding-left: 20px;
}
}
}
}
& .song-difficulties {
margin-top: 15px;
height: 20px;
& .song-statistics {
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
background: rgba(255,255,255,0.1);
padding: 20px;
border-radius: 4px;
margin-top: 25px;
& .stat {
display: grid;
grid-template-columns: 30px 1fr;
grid-gap: 15px;
& .icon {
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
}
& .difficulties {
align-self: center;
& img {
height: 20px;
margin-right: 10px;
opacity: 0.3;
height: 25px;
margin-right: 5px;
opacity: 0.4;
&.active {
opacity: 1;
}
}
}
& .song-uploader {
margin-top: 15px;
display: flex;
& .user-item {
width: auto;
color: #fff;
text-decoration: none;
padding-right: 15px;
}
& .content {
align-self: center;
opacity: 0.6;
}
}
}
& .song-uploader {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 15px;
margin-top: 25px;
& .label {
align-self: center;
opacity: 0.6;
}
}
& .song-detail-actions, & .song-detail-actions-owner, & .song-detail-actions-moderator {
padding: 50px;
padding-top: 0px;
& .song-description {
background: rgba(255,255,255,0.1);
border-radius: 4px;
margin-top: 25px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 25px;
grid-gap: 15px;
&.song-detail-actions-owner {
grid-template-columns: 1fr 1fr 1fr 1fr 60px 60px;
& .text {
line-height: 1.5em;
padding: 20px;
opacity: 0.7;
}
}
}
& .song-social {
& .tab-header {
display: flex;
&.song-detail-actions-moderator {
grid-template-columns: 1fr 1fr 1fr 1fr 60px;
& .tab-header-item {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.25em;
padding: 15px 25px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
opacity: 0.4;
background: rgba(0,0,0,0.4);
transition: 0.2s ease-in-out all;
&:not(.active):hover {
cursor: pointer;
opacity: 0.75;
}
&.active {
opacity: 1;
background: rgba(255,255,255,0.1);
}
}
}
& .tab {
background: rgba(255,255,255,0.1);
border-radius: 4px;
border-top-left-radius: 0px;
padding: 20px;
display: none;
& .button {
padding: 15px 0px;
font-size: 16px;
transition: 0.2s ease-in-out background, 0.2s ease-in-out color, 0.1s ease-in-out transform;
&.active {
display: grid;
grid-gap: 25px;
}
&.button-primary {
background: #fff;
color: #222;
&.tab-reviews {
& .review-overview {
background: rgba(255,255,255,0.1);
border-radius: 4px;
padding: 20px 30px;
display: grid;
grid-template-columns: auto 1fr auto;
grid-gap: 25px;
align-items: center;
&:hover {
background: #fff;
color: #222;
& .icon {
color: #fff;
font-size: 48px;
}
& .text {
& .percentage {
font-size: 32px;
}
&.button-icon {
padding: 11px 0px;
& i {
font-size: 20px;
& .label {
font-size: 12px;
font-weight: bold;
letter-spacing: 0.25em;
margin-bottom: 5px;
}
& .disclaimer {
opacity: 0.6;
}
}
& .action-button {
text-decoration: none;
color: #fff;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.1em;
background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
padding: 10px 20px;
border-radius: 4px;
text-transform: uppercase;
transition: 0.2s ease-in-out all;
&:hover {
background: rgba(255,255,255,0.2);
color: #fff;
opacity: 0.6;
transform: translateY(-4px);
}
&:active {
transform: translateY(-2px);
}
}
& .reviews {
display: grid;
grid-gap: 10px;
& .review {
background: rgba(255,255,255,0.1);
border-radius: 4px;
padding: 20px;
}
}
}
}
}
......
public/assets/css/songdetail_old.css 0 → 100644
View file @ 0dfbc506
.section-song-detail .song-detail-background {
background-size: cover;
background-position: center;
}
.section-song-detail .song-detail-background .song-detail-dim {
backdrop-filter: blur(10px);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), #212629);
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail {
padding: 50px;
display: grid;
grid-template-columns: 200px 1fr;
grid-gap: 25px;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-cover {
width: 200px;
height: 200px;
position: relative;
align-self: center;
background: #eee;
border-radius: 6px;
background-size: cover;
background-position: center;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-title {
font-weight: bold;
font-size: 48px;
word-break: break-all;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-subtitle {
font-size: 20px;
word-break: break-all;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-artist {
margin-top: 5px;
font-size: 18px;
word-break: break-all;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-charter {
margin-top: 10px;
font-size: 14px;
opacity: 0.6;
word-break: break-all;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-tags {
margin-top: 10px;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-tags .tag {
display: inline-block;
font-size: 12px;
font-weight: bold;
color: #222;
background: #fff;
padding: 5px 20px;
border-radius: 50px;
margin-right: 10px;
margin-top: 5px;
word-break: break-all;
text-decoration: none;
transition: 0.2s ease-in-out opacity;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-tags .tag:hover {
opacity: 0.6;
cursor: pointer;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-difficulties {
margin-top: 15px;
height: 20px;
display: flex;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-difficulties img {
height: 20px;
margin-right: 10px;
opacity: 0.3;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-difficulties img.active {
opacity: 1;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-uploader {
margin-top: 15px;
display: flex;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-uploader .user-item {
width: auto;
color: #fff;
text-decoration: none;
padding-right: 15px;
}
.section-song-detail .song-detail-actions,
.section-song-detail .song-detail-actions-owner,
.section-song-detail .song-detail-actions-moderator {
padding: 50px;
padding-top: 0px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 25px;
}
.section-song-detail .song-detail-actions.song-detail-actions-owner,
.section-song-detail .song-detail-actions-owner.song-detail-actions-owner,
.section-song-detail .song-detail-actions-moderator.song-detail-actions-owner {
grid-template-columns: 1fr 1fr 1fr 1fr 60px 60px;
}
.section-song-detail .song-detail-actions.song-detail-actions-moderator,
.section-song-detail .song-detail-actions-owner.song-detail-actions-moderator,
.section-song-detail .song-detail-actions-moderator.song-detail-actions-moderator {
grid-template-columns: 1fr 1fr 1fr 1fr 60px;
}
.section-song-detail .song-detail-actions .button,
.section-song-detail .song-detail-actions-owner .button,
.section-song-detail .song-detail-actions-moderator .button {
padding: 15px 0px;
font-size: 16px;
transition: 0.2s ease-in-out background, 0.2s ease-in-out color, 0.1s ease-in-out transform;
}
.section-song-detail .song-detail-actions .button.button-primary,
.section-song-detail .song-detail-actions-owner .button.button-primary,
.section-song-detail .song-detail-actions-moderator .button.button-primary {
background: #fff;
color: #222;
}
.section-song-detail .song-detail-actions .button.button-primary:hover,
.section-song-detail .song-detail-actions-owner .button.button-primary:hover,
.section-song-detail .song-detail-actions-moderator .button.button-primary:hover {
background: #fff;
color: #222;
}
.section-song-detail .song-detail-actions .button.button-icon,
.section-song-detail .song-detail-actions-owner .button.button-icon,
.section-song-detail .song-detail-actions-moderator .button.button-icon {
padding: 11px 0px;
}
.section-song-detail .song-detail-actions .button.button-icon i,
.section-song-detail .song-detail-actions-owner .button.button-icon i,
.section-song-detail .song-detail-actions-moderator .button.button-icon i {
font-size: 20px;
}
.section-song-detail .song-detail-actions .button:hover,
.section-song-detail .song-detail-actions-owner .button:hover,
.section-song-detail .song-detail-actions-moderator .button:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
opacity: 0.6;
transform: translateY(-4px);
}
.section-song-detail .song-detail-actions .button:active,
.section-song-detail .song-detail-actions-owner .button:active,
.section-song-detail .song-detail-actions-moderator .button:active {
transform: translateY(-2px);
}
public/assets/css/songdetail_old.less 0 → 100644
View file @ 0dfbc506
.section-song-detail {
& .song-detail-background {
background-size: cover;
background-position: center;
& .song-detail-dim {
backdrop-filter: blur(10px);
background: linear-gradient(180deg, rgba(0,0,0,0.4), #212629);
& .song-detail {
padding: 50px;
display: grid;
grid-template-columns: 200px 1fr;
grid-gap: 25px;
& .song-cover {
width: 200px;
height: 200px;
position: relative;
align-self: center;
background: #eee;
border-radius: 6px;
background-size: cover;
background-position: center;
}
& .song-meta-data {
& .song-title {
font-weight: bold;
font-size: 48px;
word-break: break-all;
}
& .song-subtitle {
font-size: 20px;
word-break: break-all;
}
& .song-artist {
margin-top: 5px;
font-size: 18px;
word-break: break-all;
}
& .song-charter {
margin-top: 10px;
font-size: 14px;
opacity: 0.6;
word-break: break-all;
}
& .song-tags {
margin-top: 10px;
& .tag {
display: inline-block;
font-size: 12px;
font-weight: bold;
color: #222;
background: #fff;
padding: 5px 20px;
border-radius: 50px;
margin-right: 10px;
margin-top: 5px;
word-break: break-all;
text-decoration: none;
transition: 0.2s ease-in-out opacity;
&:hover {
opacity: 0.6;
cursor: pointer;
}
}
}
& .song-difficulties {
margin-top: 15px;
height: 20px;
display: flex;
& img {
height: 20px;
margin-right: 10px;
opacity: 0.3;
&.active {
opacity: 1;
}
}
}
& .song-uploader {
margin-top: 15px;
display: flex;
& .user-item {
width: auto;
color: #fff;
text-decoration: none;
padding-right: 15px;
}
}
}
}
}
}
& .song-detail-actions, & .song-detail-actions-owner, & .song-detail-actions-moderator {
padding: 50px;
padding-top: 0px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 25px;
&.song-detail-actions-owner {
grid-template-columns: 1fr 1fr 1fr 1fr 60px 60px;
}
&.song-detail-actions-moderator {
grid-template-columns: 1fr 1fr 1fr 1fr 60px;
}
& .button {
padding: 15px 0px;
font-size: 16px;
transition: 0.2s ease-in-out background, 0.2s ease-in-out color, 0.1s ease-in-out transform;
&.button-primary {
background: #fff;
color: #222;
&:hover {
background: #fff;
color: #222;
}
}
&.button-icon {
padding: 11px 0px;
& i {
font-size: 20px;
}
}
&:hover {
background: rgba(255,255,255,0.2);
color: #fff;
opacity: 0.6;
transform: translateY(-4px);
}
&:active {
transform: translateY(-2px);
}
}
}
}
\ No newline at end of file
src/Controller/SongController.php
View file @ 0dfbc506
......@@ -15,6 +15,8 @@ use Symfony\Component\Form\Extension\Core\Type\FileType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use App\Entity\Song;
use App\Entity\SongReview;
use App\Entity\SongSpinPlay;
use App\Utils\HelperFunctions;
use App\Entity\User;
......@@ -38,8 +40,11 @@ class SongController extends AbstractController
$resultUploader = $em->getRepository(User::class)->findOneBy(array('id' => $resultSong->getUploader()));
if(!$resultUploader) throw new NotFoundHttpException();
$resultReviewAverage = $em->getRepository(SongReview::class)->getAverageByID($songId);
$data['song'] = $resultSong;
$data['uploader'] = $resultUploader;
$data['reviewAverage'] = $resultReviewAverage;
return $this->render('song/detail.html.twig', $data);
}
......
src/Repository/SongReviewRepository.php
View file @ 0dfbc506
......@@ -19,32 +19,25 @@ class SongReviewRepository extends ServiceEntityRepository
parent::__construct($registry, SongReview::class);
}
// /**
// * @return SongReview[] Returns an array of SongReview objects
// */
/*
public function findByExampleField($value)
{
return $this->createQueryBuilder('s')
->andWhere('s.exampleField = :val')
->setParameter('val', $value)
->orderBy('s.id', 'ASC')
->setMaxResults(10)
->getQuery()
->getResult()
;
public function getAveragebyID(int $songId) {
$qb = $this->createQueryBuilder("e");
$qb
->where('e.song = :songId')
->setParameter('songId', $songId);
$reviews = $qb->getQuery()->getResult();
$reviewsTotal = 0;
$reviewsRecommend = 0;
foreach($reviews as $review) {
if($review->getRecommended()) $reviewsRecommend++;
$reviewsTotal++;
}
*/
/*
public function findOneBySomeField($value): ?SongReview
{
return $this->createQueryBuilder('s')
->andWhere('s.exampleField = :val')
->setParameter('val', $value)
->getQuery()
->getOneOrNullResult()
;
if($reviewsTotal > 1) {
return round(($reviewsRecommend / $reviewsTotal) * 100, 1);
} else {
return false;
}
}
*/
}
symfony.lock
View file @ 0dfbc506
......@@ -75,18 +75,6 @@
"doctrine/reflection": {
"version": "1.2.1"
},
"easycorp/easy-log-handler": {
"version": "1.0",
"recipe": {
"repo": "github.com/symfony/recipes",
"branch": "master",
"version": "1.0",
"ref": "70062abc2cd58794d2a90274502f81b55cd9951b"
},
"files": [
"./config/packages/dev/easy_log_handler.yaml"
]
},
"egulias/email-validator": {
"version": "2.1.17"
},
......@@ -522,6 +510,18 @@
"symfony/yaml": {
"version": "v4.4.6"
},
"twig/extensions": {
"version": "1.0",
"recipe": {
"repo": "github.com/symfony/recipes",
"branch": "master",
"version": "1.0",
"ref": "a86723ee8d8b2f9437c8ce60a5546a1c267da5ed"
},
"files": [
"./config/packages/twig_extensions.yaml"
]
},
"twig/extra-bundle": {
"version": "v3.0.3"
},
......
templates/song/detail.html.twig
View file @ 0dfbc506
......@@ -10,6 +10,230 @@
{% endblock %}
{% block content %}
<section class="section-song-detail">
<div class="song-detail">
<div class="song-meta">
<div class="cover" style="background-image: url({{ asset("uploads/cover/" ~ song.fileReference ~ ".png?v=" ~ date().timestamp) }}), url({{ asset("assets/img/defaultAlbumArt.jpg") }});"></div>
<div class="song-metadata">
<div class="song-title">{{ song.title }}</div>
<div class="song-subtitle">AAAAA{{ song.subtitle }}</div>
<div class="song-artist">{{ song.artist }} &bull; Charted by {{ song.charter }}</div>
</div>
</div>
<div class="song-actions">
<a href="{{ path('song.download', {songId: song.id}) }}" class="action">
<div class="icon">
<i class="mdi mdi-download"></i>
</div>
</a>
<div class="action-player">
<div class="icon">
<i class="mdi mdi-play"></i>
</div>
<div class="volume">
<input type="range" min="0" max="100" value="50" class="playerVolume" onChange="UpdateVolume()" />
</div>
</div>
<a href="spinshare-song://{{ song.id }}" class="action">
<div class="icon">
<i class="mdi mdi-open-in-new"></i>
</div>
</a>
<a href="{{ path('report.song', {songId: song.id}) }}" class="action">
<div class="icon">
<i class="mdi mdi-flag-outline"></i>
</div>
</a>
</div>
<div class="song-statistics">
<div class="stat">
<div class="icon">
<i class="mdi mdi-arm-flex"></i>
</div>
<div class="difficulties">
<img src="{{ asset('assets/img/difficultyEasy.svg') }}" class="{{ song.hasEasyDifficulty ? "active" : "" }}" alt="Easy Difficulty" />
<img src="{{ asset('assets/img/difficultyNormal.svg') }}" class="{{ song.hasNormalDifficulty ? "active" : "" }}" alt="Normal Difficulty" />
<img src="{{ asset('assets/img/difficultyHard.svg') }}" class="{{ song.hasHardDifficulty ? "active" : "" }}" alt="Hard Difficulty" />
<img src="{{ asset('assets/img/difficultyExtreme.svg') }}" class="{{ song.hasExtremeDifficulty ? "active" : "" }}" alt="Extreme Difficulty" />
<img src="{{ asset('assets/img/difficultyXD.svg') }}" class="{{ song.hasXDDifficulty ? "active" : "" }}" alt="xD Difficulty" />
</div>
</div>
<div class="stat">
<div class="icon">
<i class="mdi mdi-calendar-clock"></i>
</div>
<div class="content">
{{ song.uploadDate|date("dS F Y") }}
</div>
</div>
<div class="stat">
<div class="icon">
<i class="mdi mdi-eye"></i>
</div>
<div class="content">
{{ song.views|default(0) }}
</div>
</div>
<div class="stat">
<div class="icon">
<i class="mdi mdi-download"></i>
</div>
<div class="content">
{{ song.downloads|default(0) }}
</div>
</div>
</div>
<div class="song-uploader">
<div class="label">Uploaded by</div>
<a href="{{ path('user.detail', {userId: uploader.id}) }}" class="user-item">
<div class="user-avatar" style="background-image: url({{ asset('uploads/avatar/' ~ uploader.coverReference ~ '?t=' ~ date().timestamp) }}), url({{ asset("assets/img/defaultAvatar.jpg") }});"></div>
<div class="user-metadata">
<div class="user-username">{{ uploader.username }}</div>
{% if uploader.isVerified %}
<div class="user-badge"><i class="mdi mdi-check-decagram"></i></div>
{% endif %}
{% if uploader.isPatreon %}
<div class="user-badge"><i class="mdi mdi-patreon"></i></div>
{% endif %}
</div>
</a>
</div>
{% if song.tags != "" and song.description != "" %}
<div class="song-description">
{% if song.description != "" %}
<div class="text">{{ song.description|default("No description provided.") }}</div>
{% endif %}
{% if song.tags != "" %}
<div class="tags">
{% for tag in song.tags|split(",") %}
<a href="{{ path('search.index', {q: tag}) }}" class="tag">{{ tag }}</a>
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}
</div>
<div class="song-social">
<div class="tab-header">
<div class="tab-header-item tab-header-item-reviews active" onclick="ChangeTab('reviews')">Reviews</div>
<div class="tab-header-item tab-header-item-spinplays" onclick="ChangeTab('spinplays')">SpinPlays</div>
</div>
<div class="tab tab-reviews active">
<div class="review-overview">
<div class="icon">
<i class="mdi mdi-thumbs-up-down"></i>
</div>
<div class="text">
{% if reviewAverage == false %}
<div class="percentage">???%</div>
<div class="label">RECOMMENDED</div>
<div class="disclaimer">This chart does not have enough user-reviews yet.</div>
{% else %}
<div class="percentage">{{ reviewAverage }}%</div>
<div class="label">RECOMMENDED</div>
<div class="disclaimer">Based on {{ song.reviews|length }} user-reviews</div>
{% endif %}
</div>
<a href="" class="action-button">Add Review</a>
</div>
<div class="reviews">
{% for review in song.reviews %}
<div class="review">
{{ dump(review) }}
</div>
{% endfor %}
</div>
</div>
<div class="tab tab-spinplays">
SpinPlays
</div>
</div>
</section>
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ asset('assets/css/songdetail.css') }}" />
{% endblock %}
{% block scripts %}
<script>
// Make Cover 1by1
let cover = document.querySelector(".song-meta .cover");
cover.style.width = cover.clientHeight + "px";
// Song Preview
let songActions = document.querySelector(".song-actions");
let playerToggle = document.querySelector(".song-actions .action-player .icon");
let playerVolume = document.querySelector(".song-actions .playerVolume");
let isPlaying = false;
let currentPreviewAudio;
playerToggle.addEventListener('click', () => {
isPlaying = !isPlaying;
if(isPlaying) {
songActions.classList.add("player-active");
PlayPreview();
} else {
songActions.classList.remove("player-active");
StopPreview();
}
});
function PlayPreview() {
currentPreviewAudio = new Audio("{{ asset('uploads/audio/' ~ song.fileReference ~ '_0.ogg') }}");
currentPreviewAudio.volume = 0.5;
playerVolume.value = 50;
currentPreviewAudio.play();
currentPreviewAudio.onended = function() {
StopPreview();
}
isPlaying = true;
playerToggle.innerHTML = '<i class="mdi mdi-stop"></i>';
}
function StopPreview() {
if(currentPreviewAudio) {
currentPreviewAudio.pause();
currentPreviewAudio.currentTime = 0;
}
currentPreviewAudio = null;
isPlaying = false;
playerToggle.innerHTML = '<i class="mdi mdi-play"></i>';
}
function UpdateVolume() {
currentPreviewAudio.volume = playerVolume.value / 100;
}
// Tabs
let tabHeaderItemReviews = document.querySelector(".tab-header-item-reviews");
let tabHeaderItemSpinPlays = document.querySelector(".tab-header-item-spinplays");
let tabReviews = document.querySelector(".tab-reviews");
let tabSpinPlays = document.querySelector(".tab-spinplays");
function ChangeTab(newTab) {
switch(newTab) {
case 'reviews':
tabReviews.classList.add("active");
tabSpinPlays.classList.remove("active");
tabHeaderItemReviews.classList.add("active");
tabHeaderItemSpinPlays.classList.remove("active");
break;
case 'spinplays':
tabReviews.classList.remove("active");
tabSpinPlays.classList.add("active");
tabHeaderItemReviews.classList.remove("active");
tabHeaderItemSpinPlays.classList.add("active");
break;
}
}
</script>
{% endblock %}
{% block content2 %}
<section class="section-song-detail">
<div class="song-detail-background" style="background-image: url({{ asset("uploads/cover/" ~ song.fileReference ~ ".png?v=" ~ date().timestamp) }}), url({{ asset("assets/img/defaultAlbumArt.jpg") }});">
<div class="song-detail-dim">
......@@ -77,11 +301,7 @@
</section>
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ asset('assets/css/songdetail.css') }}" />
{% endblock %}
{% block scripts %}
{% block scripts2 %}
<script>
let isPlayingPreview = false;
const DOMButtonPreview = document.querySelector(".button-preview");
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment