mirror of
https://github.com/koel/koel
synced 2024-11-24 13:13:05 +00:00
fix: responsive styles
This commit is contained in:
Phan An
parent
4258873183
commit
feff485d95
11 changed files with 36 additions and 15 deletions
|
|
@ -71,9 +71,14 @@ eventBus.on({
|
|||
form {
|
||||
position: relative;
|
||||
min-width: 460px;
|
||||
max-width: calc(100% - 24px);
|
||||
background-color: var(--color-bg-primary);
|
||||
border-radius: 4px;
|
||||
|
||||
@media only screen and (max-width: 667px) {
|
||||
min-width: calc(100% - 24px);
|
||||
}
|
||||
|
||||
> header, > main, > footer {
|
||||
padding: 1.2rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -108,6 +108,7 @@ eventBus.on('LOAD_MAIN_CONTENT', (view: MainViewName) => (viewingQueue.value = v
|
|||
top: 0;
|
||||
height: 100%;
|
||||
width: 188px;
|
||||
padding-top: 12px; // leave space for the audio track
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ footer {
|
|||
height: var(--footer-height);
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
z-index: 99;
|
||||
|
||||
.media-info-wrap {
|
||||
flex: 1;
|
||||
|
|
@ -67,7 +67,9 @@ footer {
|
|||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
@include themed-background();
|
||||
height: var(--footer-height-mobile);
|
||||
padding-top: 12px; // leave space for the audio track
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -180,7 +180,7 @@ eventBus.on({
|
|||
position: fixed;
|
||||
height: calc(100vh - var(--header-height));
|
||||
width: var(--extra-panel-width);
|
||||
z-index: 5;
|
||||
z-index: 9;
|
||||
top: var(--header-height);
|
||||
right: -100%;
|
||||
transition: right .3s ease-in;
|
||||
|
|
|
|||
|
|
@ -90,12 +90,19 @@ eventBus.on({
|
|||
backface-visibility: hidden;
|
||||
|
||||
.main-scroll-wrap {
|
||||
padding: 24px 24px 48px;
|
||||
&:not(.song-list-wrap) {
|
||||
padding: 24px 24px 48px;
|
||||
}
|
||||
|
||||
overflow: scroll;
|
||||
|
||||
@supports (scrollbar-gutter: stable) {
|
||||
overflow: auto;
|
||||
scrollbar-gutter: stable;
|
||||
|
||||
@media (hover: none) {
|
||||
scrollbar-gutter: auto;
|
||||
}
|
||||
}
|
||||
|
||||
flex: 1;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@
|
|||
<div class="form-row" v-if="isPhone">
|
||||
<label>
|
||||
<CheckBox name="transcode_on_mobile" v-model="preferences.transcodeOnMobile"/>
|
||||
<input type="checkbox" name="transcode_on_mobile" v-model="preferences.transcodeOnMobile">
|
||||
Convert and play media at 128kbps on mobile
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -268,7 +268,7 @@ const rowDragStart = (row: SongRow, event: DragEvent) => {
|
|||
*/
|
||||
const allowDrop = (event: DragEvent) => {
|
||||
if (!allowReordering) return;
|
||||
|
||||
|
||||
(event.target as Element).parentElement.classList.add('droppable')
|
||||
event.dataTransfer!.dropEffect = 'move'
|
||||
|
||||
|
|
@ -317,7 +317,6 @@ onMounted(() => render())
|
|||
<style lang="scss">
|
||||
.song-list-wrap {
|
||||
position: relative;
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
|
@ -368,9 +367,6 @@ onMounted(() => render())
|
|||
|
||||
@media (hover: none) {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -418,6 +414,8 @@ onMounted(() => render())
|
|||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
padding: 12px;
|
||||
|
||||
.song-list-header {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -433,7 +431,7 @@ onMounted(() => render())
|
|||
}
|
||||
|
||||
.song-item {
|
||||
padding: 8px 32px 8px 4px;
|
||||
padding: 8px 12px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -336,7 +336,7 @@ onMounted(() => eventBus.on('INIT_EQUALIZER', () => init()))
|
|||
max-width: 414px;
|
||||
left: auto;
|
||||
right: 0;
|
||||
bottom: calc(var(--footer-heigh-mobile) + 14px);
|
||||
bottom: calc(var(--footer-height-mobile) + 0px);
|
||||
display: block;
|
||||
height: auto;
|
||||
|
||||
|
|
|
|||
|
|
@ -129,14 +129,14 @@ header.screen-header {
|
|||
|
||||
@media (max-width: 768px) {
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
|
||||
.thumbnail-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.38rem;
|
||||
h1.name {
|
||||
font-size: 1.8rem;
|
||||
font-weight: var(--font-weight-thin);
|
||||
}
|
||||
|
||||
.meta {
|
||||
|
|
|
|||
|
|
@ -63,6 +63,10 @@ onBeforeUnmount(() => observer.unobserve(scroller.value!))
|
|||
@supports (scrollbar-gutter: stable) {
|
||||
overflow: auto;
|
||||
scrollbar-gutter: stable;
|
||||
|
||||
@media (hover: none) {
|
||||
scrollbar-gutter: auto;
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
|
|
|
|||
7
resources/assets/sass/vendor/_plyr.scss
vendored
7
resources/assets/sass/vendor/_plyr.scss
vendored
|
|
@ -282,7 +282,7 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the larger fon
|
|||
&.tab-focus:hover,
|
||||
&:hover {
|
||||
background: $plyr-control-bg-hover;
|
||||
color: var(--color-highlight)-hover;
|
||||
color: var(--color-highlight) -hover;
|
||||
}
|
||||
|
||||
// Default focus
|
||||
|
|
@ -415,6 +415,11 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the larger fon
|
|||
top: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
|
||||
@media (hover: none) {
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
|
|
|
|||
Loading…
Reference in a new issue