okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style changes to podcast page

Browse source
This commit is contained in:
booploops 2022-01-21 05:30:17 -08:00
parent 2f3e477ce5
commit 63c9e951ae
2 changed files with 47 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/renderer/style.less
View file

@ -1309,6 +1309,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
} }
} }
.display--large { .display--large {
display: none !important; display: none !important;
} }
@ -2580,6 +2582,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
height: calc(100% - var(--navigationBarHeight)); height: calc(100% - var(--navigationBarHeight));
padding: 0px; padding: 0px;
.list-flat {
border-radius: 0px;
}
.podcast-artwork { .podcast-artwork {
width: 200px; width: 200px;
margin: 16px auto; margin: 16px auto;
@ -2649,19 +2655,28 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
} }
.podcasts-details { .podcasts-details {
height: 96%; width: 300px;
width: 400px;
flex: none; flex: none;
background: rgb(20 20 20 / 97%); background: rgb(255 255 255 / 5%);
overflow-y: overlay; overflow-y: overlay;
overflow-x: hidden; overflow-x: hidden;
position: absolute;
right: 2%;
top: 2%; top: 2%;
border-radius: 10px;
box-shadow: var(--ciderShadow-Generic);
z-index: 2; z-index: 2;
border-left: 1px solid var(--color2);
padding-bottom: 1em;
.meta-btn {
font-size: 0.75em;
}
.podcasts-details-header {
display: flex;
justify-content: end;
align-items: center;
position: sticky;
top: 0;
z-index: 2;
}
.close-btn { .close-btn {
width: 50px; width: 50px;
height: 42px; height: 42px;
@ -2718,6 +2733,24 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
} }
@media only screen and (max-width: 1230px) {
.content-inner.podcasts-page {
.podcasts-details {
height: 96%;
width: 300px;
flex: none;
background: rgb(20 20 20 / 97%);
overflow-y: overlay;
overflow-x: hidden;
position: absolute;
right: 2%;
top: 2%;
border-radius: 10px;
box-shadow: var(--ciderShadow-Generic);
z-index: 2;
}
}
}

10
src/renderer/views/pages/podcasts.ejs
View file

@ -63,7 +63,9 @@
</div> </div>
<transition name="wpfade"> <transition name="wpfade">
<div class="podcasts-details" v-if="selected.id != -1"> <div class="podcasts-details" v-if="selected.id != -1">
<div class="podcasts-details-header">
<button class="close-btn" @click="selected.id = -1"></button> <button class="close-btn" @click="selected.id = -1"></button>
</div>
<div class="podcast-artwork"> <div class="podcast-artwork">
<mediaitem-artwork shadow="large" :url="selected.attributes.artwork.url" size="300"></mediaitem-artwork> <mediaitem-artwork shadow="large" :url="selected.attributes.artwork.url" size="300"></mediaitem-artwork>
</div> </div>
@ -78,10 +80,10 @@
<div class="well podcast-description" v-if="selected.attributes.description.standard">{{ selected.attributes.description.standard }}</div> <div class="well podcast-description" v-if="selected.attributes.description.standard">{{ selected.attributes.description.standard }}</div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<button class="md-btn md-btn-block" @click="openUrl(selected.attributes.websiteUrl)">Podcast Website</button> <button class="md-btn md-btn-block meta-btn" @click="openUrl(selected.attributes.websiteUrl)">Podcast Website</button>
</div> </div>
<div class="col"> <div class="col">
<button class="md-btn md-btn-block">Share</button> <button class="md-btn md-btn-block meta-btn">Share</button>
</div> </div>
</div> </div>
</div> </div>
@ -90,7 +92,7 @@
</div> </div>
</script> </script>
<script type="text/x-template" id="podcast-tab"> <script type="text/x-template" id="podcast-tab">
<div class="cd-mediaitem-list-item" :class="{'mediaitem-selected': isselected}"> <div class="cd-mediaitem-list-item list-flat" :class="{'mediaitem-selected': isselected}">
<div class="artwork"> <div class="artwork">
<mediaitem-artwork <mediaitem-artwork
:url="item.attributes.artwork.url" :url="item.attributes.artwork.url"
@ -105,7 +107,7 @@
</div> </div>
</script> </script>
<script type="text/x-template" id="podcast-episode"> <script type="text/x-template" id="podcast-episode">
<div class="cd-mediaitem-list-item" :class="{'mediaitem-selected': isselected}"> <div class="cd-mediaitem-list-item list-flat" :class="{'mediaitem-selected': isselected}">
<div class="info-rect" :style="{'padding-left':'16px'}"> <div class="info-rect" :style="{'padding-left':'16px'}">
<div class="title text-overflow-elipsis"> <div class="title text-overflow-elipsis">
{{ item.attributes.name }} {{ item.attributes.name }}