Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-10 06:34:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

Better responsiveness for album and artist listing

Browse source
This commit is contained in:
An Phan 2016-03-17 17:28:43 +08:00
parent 1fa9e0b78c
commit ae65809ec5
2 changed files with 56 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
resources/assets/js/components/main-wrapper/extra/index.vue
View file

@ -22,6 +22,7 @@
<script>
import isMobile from 'ismobilejs';
import _ from 'lodash';
import $ from 'jquery';
import lyrics from './lyrics.vue';
import artistInfo from './artist-info.vue';
@ -40,7 +41,25 @@
};
},
watch: {
/**
* Watch the "showExtraPanel" property to add/remove the corresponding class
* to/from the html tag.
* Some element's CSS can then be controlled based on this class.
*/
'prefs.showExtraPanel': function (newVal) {
if (newVal) {
$('html').addClass('with-extra-panel');
} else {
$('html').removeClass('with-extra-panel');
}
},
},
ready() {
// On ready, add 'with-extra-panel' class.
$('html').addClass('with-extra-panel');
if (isMobile.phone) {
// On a mobile device, we always hide the panel initially regardless of
// the saved preference.

56
resources/assets/sass/partials/_mixins.scss
View file

@ -8,55 +8,73 @@
justify-content: space-between;
flex-wrap: wrap;
display: flex;
@media only screen
and (max-device-width : 768px) {
justify-content: center;
}
@media only screen
and (min-device-width: 769px)
and (max-device-width : 1024px) {
justify-content: space-around;
}
}
@mixin artist-album-card() {
.item {
display: flex;
flex: 0 0 256px;
flex-direction: column;
margin-bottom: 16px;
width: 23.5%;
position: relative;
@media only screen and (max-width: 1200px) {
width: 32%;
}
@media only screen and (max-width: 960px) {
width: 48%;
}
@media only screen and (max-width: 320px) {
width: 100%;
}
html.with-extra-panel & {
width: 32%;
@media only screen and (max-width: 1200px) {
width: 48%;
}
@media only screen and (max-width: 960px) {
width: 100%;
}
}
.cover {
@include vertical_center();
display: flex;
flex: 0 0 256px;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 100%;
padding-top: 100%;
position: relative;
.control {
$playBtnWidth: 96px;
display: none;
width: 96px;
height: 96px;
width: $playBtnWidth;
height: $playBtnWidth;
text-align: center;
line-height: 96px;
line-height: $playBtnWidth;
font-size: 54px;
background: #111;
border-radius: 50%;
text-indent: 5px;
opacity: .7;
border: 1px solid transparent;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: calc(50% - #{$playBtnWidth/2});
transition: .3s;
&:hover {
opacity: 1;
border-color: #fff;
transform: scale(1.1);
transform: translateY(-50%) scale(1.1);
}
html.touchevents & {