mirror of
https://github.com/Poniverse/Pony.fm.git
synced 2024-11-22 04:58:01 +01:00
#2: Refactored the track editor's CSS to be self-contained.
This commit is contained in:
Peter Deltchev
parent
9e753ec26e
commit
46941b23d9
8 changed files with 208 additions and 183 deletions
|
|
@ -1,4 +1,4 @@
|
|||
<form novalidate ng-submit="updateTrack(track)">
|
||||
<form class="track-editor" novalidate ng-submit="updateTrack(track)">
|
||||
<ul class="toolbar">
|
||||
<li>
|
||||
<button type="submit" class="btn" ng-class="{disabled: (track.is_published && !isDirty) || isSaving, 'btn-primary': !track.is_published || isDirty}">
|
||||
|
|
|
|||
170
resources/assets/styles/account-content.less
vendored
170
resources/assets/styles/account-content.less
vendored
|
|
@ -227,120 +227,10 @@ html {
|
|||
}
|
||||
}
|
||||
|
||||
// Used in the Accounts > Tracks area
|
||||
.two-pane-view {
|
||||
.list {
|
||||
.dropdowns {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.editor {
|
||||
display: none;
|
||||
|
||||
.album-track-listing {
|
||||
padding: 0px;
|
||||
clear: both;
|
||||
margin: 0px;
|
||||
margin-top: 10px;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
overflow: hidden;
|
||||
line-height: normal;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
font-size: 8pt;
|
||||
border-bottom: 1px dashed #ddd;
|
||||
|
||||
div {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-left: 5px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
line-height: normal;
|
||||
padding: 2px 5px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
&.ui-sortable-helper {
|
||||
#gradient>.vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.ui-sortable-placeholder {
|
||||
background: @yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-songs, .album {
|
||||
.btn {
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.show-songs, .album, .track-selector {
|
||||
.btn {
|
||||
.border-radius(0px);
|
||||
padding: 3px 10px;
|
||||
font-size: 8pt;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.error {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.pfm-popup {
|
||||
width: 300px;
|
||||
|
||||
ul {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
|
||||
a {
|
||||
.ellipsis();
|
||||
display: block;
|
||||
padding: 3px 10px;
|
||||
font-size: 8pt;
|
||||
color: #333333;
|
||||
|
||||
&:hover {
|
||||
#gradient>.vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
|
||||
text-decoration: none;
|
||||
color: @dropdownLinkColorHover;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
a {
|
||||
#gradient>.vertical(@green, darken(@green, 5%));
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
#gradient>.vertical(fadeout(@green, 20%), fadeout(darken(@green, 5%), 20%));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.closed {
|
||||
|
|
@ -376,61 +266,3 @@ html {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.license-grid {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
width: 25%;
|
||||
|
||||
> div {
|
||||
margin: 0px 5px;
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
strong {
|
||||
font-size: 9pt;
|
||||
display: block;
|
||||
margin: 0px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
min-height: 120px;
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
a {
|
||||
.border-radius(0px);
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
> div {
|
||||
cursor: default;
|
||||
border-color: @blue;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > div {
|
||||
border: 1px solid #3366CC;
|
||||
}
|
||||
|
||||
&:first-child > div {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
&:last-child > div {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
9
resources/assets/styles/app.less
vendored
9
resources/assets/styles/app.less
vendored
|
|
@ -24,12 +24,13 @@
|
|||
@import 'layout';
|
||||
@import 'account-content';
|
||||
@import 'admin';
|
||||
@import 'components';
|
||||
@import 'components/components';
|
||||
@import 'forms';
|
||||
@import 'animations';
|
||||
@import 'body';
|
||||
@import 'player';
|
||||
@import 'components/player';
|
||||
@import 'content';
|
||||
@import 'dashboard';
|
||||
@import 'uploader';
|
||||
@import 'search';
|
||||
@import 'components/uploader';
|
||||
@import 'components/search';
|
||||
@import 'components/track-editor';
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@
|
|||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
@import 'base/bootstrap/bootstrap';
|
||||
@import 'mixins';
|
||||
@import 'variables';
|
||||
@import '../base/bootstrap/bootstrap';
|
||||
@import '../mixins';
|
||||
@import '../variables';
|
||||
|
||||
.stretch-to-bottom {
|
||||
overflow-y: auto;
|
||||
|
|
@ -16,8 +16,8 @@
|
|||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import '../variables';
|
||||
@import '../mixins';
|
||||
|
||||
body.is-logged {
|
||||
.track-player {
|
||||
|
|
@ -16,9 +16,9 @@
|
|||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
@import 'base/bootstrap/bootstrap';
|
||||
@import 'mixins';
|
||||
@import 'variables';
|
||||
@import '../base/bootstrap/bootstrap';
|
||||
@import '../mixins';
|
||||
@import '../variables';
|
||||
|
||||
.search {
|
||||
position: relative;
|
||||
192
resources/assets/styles/components/track-editor.less
vendored
Normal file
192
resources/assets/styles/components/track-editor.less
vendored
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
/**
|
||||
* Pony.fm - A community for pony fan music.
|
||||
* Copyright (C) 2016 Peter Deltchev
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
@import '../base/bootstrap/bootstrap';
|
||||
@import '../mixins';
|
||||
|
||||
|
||||
.track-editor {
|
||||
.list {
|
||||
.dropdowns {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.album-track-listing {
|
||||
padding: 0px;
|
||||
clear: both;
|
||||
margin: 0px;
|
||||
margin-top: 10px;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
overflow: hidden;
|
||||
line-height: normal;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
font-size: 8pt;
|
||||
border-bottom: 1px dashed #ddd;
|
||||
|
||||
div {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-left: 5px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
line-height: normal;
|
||||
padding: 2px 5px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
&.ui-sortable-helper {
|
||||
#gradient> .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.ui-sortable-placeholder {
|
||||
background: @yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-songs, .album {
|
||||
.btn {
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.show-songs, .album, .track-selector {
|
||||
.btn {
|
||||
.border-radius(0px);
|
||||
padding: 3px 10px;
|
||||
font-size: 8pt;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.error {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.pfm-popup {
|
||||
width: 300px;
|
||||
|
||||
ul {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
|
||||
a {
|
||||
.ellipsis();
|
||||
display: block;
|
||||
padding: 3px 10px;
|
||||
font-size: 8pt;
|
||||
color: #333333;
|
||||
|
||||
&:hover {
|
||||
#gradient> .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
|
||||
text-decoration: none;
|
||||
color: @dropdownLinkColorHover;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
a {
|
||||
#gradient> .vertical(@green, darken(@green, 5%));
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
#gradient> .vertical(fadeout(@green, 20%), fadeout(darken(@green, 5%), 20%));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.license-grid {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
width: 25%;
|
||||
|
||||
> div {
|
||||
margin: 0px 5px;
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
strong {
|
||||
font-size: 9pt;
|
||||
display: block;
|
||||
margin: 0px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
min-height: 120px;
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
a {
|
||||
.border-radius(0px);
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
> div {
|
||||
cursor: default;
|
||||
border-color: @blue;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > div {
|
||||
border: 1px solid #3366CC;
|
||||
}
|
||||
|
||||
&:first-child > div {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
&:last-child > div {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
@import 'variables';
|
||||
@import '../variables';
|
||||
|
||||
.uploader {
|
||||
h1 {
|
||||
Loading…
Reference in a new issue