Skip to content

Commit

Permalink
Merge branch 'feature/742_hierarchical_layout_for_folders'
Browse files Browse the repository at this point in the history
refs #742
  • Loading branch information
paulijar committed Sep 15, 2021
2 parents e287c93 + 607b75e commit 75fd8e9
Show file tree
Hide file tree
Showing 29 changed files with 1,289 additions and 1,142 deletions.
6 changes: 5 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
## [Unreleased]
### Added
- Hierarchical tree layout for the Folders view
[#742](https://github.com/owncloud/music/issues/742)

### Changed
- Use smaller heading size in the Folders and Genres views

### Fixed
- Show the German translations added in v1.3.2 also when the selected language variant is "informal: du" or "Austria"
[#890](https://github.com/owncloud/music/pull/890)
- Deprecated use of ReflectionType on Subsonic and Ampache APIs
- Deprecated use of ReflectionType on Subsonic and Ampache APIs, breaking some API features on PHP8
[#896](https://github.com/owncloud/music/issues/896)

## 1.3.3 - 2021-09-06
Expand Down
146 changes: 146 additions & 0 deletions css/style-albums.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
/**
* ownCloud - Music app
*
* This file is licensed under the Affero General Public License version 3 or
* later. See the COPYING file.
*
* @author Morris Jobke <hey@morrisjobke.de>
* @author Pauli Järvinen <pauli.jarvinen@gmail.com>
* @copyright Morris Jobke 2013, 2014
* @copyright Pauli Järvinen 2016 - 2021
*/

/**
* This style file contains definitions for the Albums view. Some of them are used also in the Podcasts view.
*/

.artist-area {
clear: both;
padding-top: 15px;
display: table;
width: 100%;
}

.artist-area > h1 {
margin-left: 14px;
font-size: 34px;
line-height: 36px;
}

.artist-area > h1 span:hover,
.artist-area > h1 span *:hover {
cursor: pointer;
}

.album-area {
padding: 14px;
width: 480px;
float: left;
}

.album-area > h2 {
display: table-cell;
position: relative;
max-width: 424px;
padding-bottom: 21px;
white-space: nowrap;
}

.album-area > h2.placeholder {
overflow: hidden;
}

.album-area > h2 > span {
float: left;
overflow: hidden;
text-overflow: ellipsis;
}

.album-area > h2.with-actions:not(.busy) > span {
max-width: calc(100% - 24px);
}

.album-area > h2 span,
.album-area > h2 button {
cursor: pointer;
}

.album-area > .albumart,
.album-area > .overlay {
float: left;
width: 190px;
height: 190px;
line-height: 190px;
font-size: 105px;
cursor: pointer;
}

.album-area > .overlay {
margin-left: -190px;
visibility: hidden;
}

.album-area .albumart:hover ~ .overlay,
.album-area .overlay:hover {
visibility: visible;
}


/* Albums view compact mode */
.view-container.compact .artist-area h1 {
font-size: 24px;
}

.view-container.compact .album-area h2 {
padding-left: 48px;
font-size: 16px;
padding-bottom: 8px;
max-width: 360px;
}

.view-container.compact h1 .play {
margin-bottom: 1px;
width: 13px;
height: 13px;
}

.view-container.compact h2 .play {
width: 11px;
height: 11px;
}

.view-container.compact .album-area {
padding-top: 2px;
padding-bottom: 10px;
width: 387px;
}

.view-container.compact .album-area > .albumart,
.view-container.compact .album-area > .overlay {
position: relative;
margin-top: -40px;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 24px;
}

.view-container.compact .album-area > .overlay {
margin-left: 0;
}


/* Albums and Podcasts view single column layout when there's no room for two columns or more */
.single-col .album-area {
width: 100%;
}

.single-col .album-area > h2 {
max-width: 80vw;
}

.single-col .album-area .track-list li > div > span {
white-space: normal;
vertical-align: top;
max-width: unset;
}
52 changes: 52 additions & 0 deletions css/style-folders.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
/**
* ownCloud - Music app
*
* This file is licensed under the Affero General Public License version 3 or
* later. See the COPYING file.
*
* @author Pauli Järvinen <pauli.jarvinen@gmail.com>
* @copyright Pauli Järvinen 2021
*/

.folder-tree {
margin-top: 16px;
margin-right: -40px; /* utilize the space reserved for the alphabet navigation */
}

.folder-tree .subfolders {
margin-left: 32px;
}

.folder-tree .track-list {
margin-left: 16px;
}

.folder-tree .playlist-area {
padding: 0;
}

.folder-tree .playlist-area h2 {
margin-top: 4px;
}

.folder-tree .icon-folder,
.folder-tree .overlay {
width: 30px;
height: 30px;
float: left;
background-size: contain;
margin-right: 8px;
}

.folder-tree .overlay {
margin-left: -38px;
margin-top: 2px;
margin-bottom: -2px;
visibility: hidden;
cursor: pointer;
}

.folder-tree .icon-folder:hover ~ .overlay,
.folder-tree .overlay:hover {
visibility: visible;
}
141 changes: 9 additions & 132 deletions css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
* @copyright Pauli Järvinen 2016 - 2021
*/

/**
* This style file contains definitions which are common to many views or parts of the Music app.
*/

#notification a {
text-decoration: underline;
}
Expand Down Expand Up @@ -55,31 +59,18 @@ body#body-user.dark {
padding-bottom: 60px;
}

.view-container h2 {
font-size: 21px;
line-height: 30px;
}

.play {
display: inline;
visibility: hidden;
opacity: .7;
height: 10px;
}

.artist-area {
clear: both;
padding-top: 15px;
display: table;
width: 100%;
}

.artist-area > h1 {
margin-left: 14px;
font-size: 34px;
line-height: 36px;
}

.artist-area > h1 span:hover,
.artist-area > h1 span *:hover {
cursor: pointer;
}

h1 .play {
margin-bottom: 2px;
margin-left: 10px;
Expand All @@ -100,67 +91,12 @@ h2 span:hover .play {
visibility: visible
}

.album-area {
padding: 14px;
width: 480px;
float: left;
}

.album-area > h2 {
display: table-cell;
position: relative;
max-width: 424px;
font-size: 21px;
line-height: 30px;
padding-bottom: 21px;
white-space: nowrap;
}

.album-area > h2.placeholder {
overflow: hidden;
}

.album-area > h2 > span {
float: left;
overflow: hidden;
text-overflow: ellipsis;
}

.album-area > h2.with-actions:not(.busy) > span {
max-width: calc(100% - 24px);
}

.album-area > h2 span,
.album-area > h2 button {
cursor: pointer;
}

.albumart {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.album-area > .albumart,
.album-area > .overlay {
float: left;
width: 190px;
height: 190px;
line-height: 190px;
font-size: 105px;
cursor: pointer;
}

.album-area > .overlay {
margin-left: -190px;
visibility: hidden;
}

.album-area .albumart:hover ~ .overlay,
.album-area .overlay:hover {
visibility: visible;
}

.play-pause {
display: inline-block;
width: 10px;
Expand Down Expand Up @@ -299,62 +235,3 @@ div:hover > .play-pause,
.flip-vertically {
transform: scaleY(-1);
}


/* Albums view compact mode */
.view-container.compact .artist-area h1 {
font-size: 24px;
}

.view-container.compact .album-area h2 {
padding-left: 48px;
font-size: 16px;
padding-bottom: 8px;
max-width: 360px;
}

.view-container.compact h1 .play {
margin-bottom: 1px;
width: 13px;
height: 13px;
}

.view-container.compact h2 .play {
width: 11px;
height: 11px;
}

.view-container.compact .album-area {
padding-top: 2px;
padding-bottom: 10px;
width: 387px;
}

.view-container.compact .album-area > .albumart,
.view-container.compact .album-area > .overlay {
position: relative;
margin-top: -40px;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 24px;
}

.view-container.compact .album-area > .overlay {
margin-left: 0;
}

/* Albums and Podcasts view single column layout when there's no room for two columns or more */
.single-col .album-area {
width: 100%;
}

.single-col .album-area > h2 {
max-width: 80vw;
}

.single-col .album-area .track-list li > div > span {
white-space: normal;
vertical-align: top;
max-width: unset;
}
Loading

0 comments on commit 75fd8e9

Please # to comment.