fix: responsive styles

This commit is contained in:
Phan An 2022-07-29 14:12:55 +02:00
parent 4258873183
commit feff485d95
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
11 changed files with 36 additions and 15 deletions

View file

@ -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;
}

View file

@ -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;

View file

@ -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>

View file

@ -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;

View file

@ -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;

View file

@ -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>

View file

@ -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;

View file

@ -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;

View file

@ -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 {

View file

@ -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 {

View file

@ -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;