rc/aircox
13
1
Fork 1
Code Issues 15 Pull Requests Projects Releases Wiki Activity

various fixes

Browse Source
This commit is contained in:
bkfox
2024-02-02 19:36:02 +01:00
parent 2a75608701
commit df41885cca
11 changed files with 149 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
assets/src/assets/common.scss
View File

@ -69,13 +69,6 @@ body {
}
}
section > .toolbar {
background-color: rgba(0,0,0,0.05);
padding: 1em;
margin-bottom: 1.5em;
}
h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
font-family: var(--heading-font-family);
}

20
assets/src/assets/components.scss
View File

@ -53,16 +53,15 @@
--a-playlist-item-border: 1px var(--secondary-color) solid;
--a-sound-bg: var(--main-color);
--a-sound-hv-bg: var(--main-color-light);
--a-sound-btn-hv-fg: var(--secondary-color);
--a-sound-playing-fg: var(--secondary-color-dark);
--a-sound-hv-bg: var(--main-color);
--a-sound-hv-fg: var(--secondary-color);
--a-sound-playing-fg: var(--secondary-color-dark);
--a-sound-text-sz: #{v.$text-size};
--a-player-url-fg: var(--text-color);
--a-player-panel-bg: var(--hg-color);
--a-player-panel-bg: var(--main-color);
--a-player-bar-height: var(--nav-primary-height);
--a-player-bar-bg: var(--hg-color);
--a-player-bar-bg: var(--main-color);
--a-player-bar-title-alone-sz: #{v.$text-size-medium};
--a-player-bar-button-fg: var(--button-fg);
--a-player-bar-button-fg: var(--button-bg);
@ -348,7 +347,8 @@
font-size: var(--preview-title-sz);
// background-color: var(--preview-heading-bg-color);
text-align: right;
min-width: 9rem;
&:not(:empty) { min-width: 9rem; }
}
.media-content {
@ -483,7 +483,8 @@
.a-carousel-viewport {
box-shadow: inset 0em 0em 20rem var(--a-carousel-bg);
// background-color: var(--a-carousel-bg);
padding: var(--a-carousel-p) 0;
padding: 0rem;
padding-top: var(--a-carousel-p);
margin-top: calc( 0rem - var(--a-carousel-p) );
}
}
@ -504,6 +505,9 @@
.bullet {
margin: v.$mp-1;
cursor: pointer;
&:hover { color: var(--link-fg); }
}
}
@ -618,7 +622,7 @@
font-size: var(--a-sound-text-sz);
&:hover {
color: var(--a-sound-btn-hv-fg) !important;
color: var(--a-sound-hv-fg) !important;
background-color: unset;
}
}

56
assets/src/assets/public.scss
View File

@ -33,6 +33,10 @@
}
}
*[data-oembed-url] {
clear: both;
}
}
@ -56,6 +60,8 @@
display: inline-block;
margin: v.$mp-3;
margin-left: 0rem;
padding: v.$mp-2;
border-bottom: 1px var(--main-color) solid;
.heading {
padding: 0em;
@ -389,17 +395,41 @@ nav li {
position: relative;
z-index: 1000;
background-color: var(--body-bg);
height: var(--header-height);
max-width: calc(var(--header-height) * 2);
margin: 0 0 v.$mp-4 v.$mp-4;
img { width: 100%; height: 100%; }
.cover {
max-width: calc(var(--header-height) * 2);
height: var(--header-height);
}
}
.header-cover:only-child {
with: 100%;
}
@media screen and (max-width: v.$screen-small) {
.container.header {
width: calc( 100% - v.$mp-2 );
.headings {
width: 100%;
clear: both;
}
.header-cover {
float: none;
margin: 0;
text-align: center;
}
.cover {
margin-left: auto;
margin-right: auto;
max-height: calc(var(--cover-h) * 1);
max-width: calc(var(--cover-w) * 2);
}
}
}
// ---- ---- detail
.page-content {
@ -456,22 +486,4 @@ body { font-size: 1.4em; }
margin-right: v.$mp-2;
}
.container.header {
width: calc( 100% - v.$mp-2 );
.headings {
width: 100%;
clear: both;
}
.header-cover {
float: none;
width: 100%;
max-width: unset;
height: unset;
margin-left: 0rem;
margin-right: 0rem;
}
}
}

47
assets/src/components/ACarousel.vue
View File

@ -7,18 +7,22 @@
</nav>
<nav class="a-carousel-bullets-container">
<!-- <span class="icon bullet" @click="prev" v-if="showPrevButton">
<i :class="leftButtonIcon"></i>
</span> -->
<span class="left">
<span class="icon bullet" @click="prev()" v-if="showPrev">
<i :class="leftButtonIcon"></i>
</span>
</span>
<template v-if="bullets.length > 1">
<span class="icon bullet" v-bind:key="bullet" v-for="bullet of bullets" @click="select(bullet)">
<i v-if="bullet == index" class="fa fa-circle"></i>
<i v-else class="far fa-circle"></i>
</span>
</template>
<!-- <span class="icon bullet" @click="next" v-if="showNextButton">
<i :class="rightButtonIcon"></i>
</span> -->
<span class="right">
<span class="icon bullet" @click="next()" v-if="showNext">
<i :class="rightButtonIcon"></i>
</span>
</span>
<slot name="bullets-right" :v-bind="this"></slot>
</nav>
@ -46,7 +50,6 @@
}
.a-carousel-bullets-container {
justify-content: center;
flex-grow: 1;
}
@ -54,7 +57,13 @@
cursor: pointer;
}
.a-carousel-bullets-container .bullet-right {
.a-carousel-bullets-container .left {
min-width: 2rem;
margin-right: auto;
}
.a-carousel-bullets-container .right {
min-width: 2rem;
margin-left: auto;
}
@ -128,17 +137,17 @@ export default {
computed: {
card() { return this.cards()[this.index] },
/*showPrevButton() {
showPrev() {
return this.index > 0
},
showNextButton() {
showNext() {
if(!this.cards || this.cards.length <= 1)
return false
let { count } = this.visibility
return (this.index + count) < this.cards.length
},*/
let last = this.bullets[this.bullets.length-1]
return this.index != last
},
bullets() {
if(!this.cards || !this.$refs.viewport)
@ -195,6 +204,18 @@ export default {
return card.el
},
next() {
let n = this.bullets.indexOf(this.index)
let index = this.bullets[n+1]
this.select(index)
},
prev() {
let n = this.bullets.indexOf(this.index)
let index = this.bullets[n-1]
this.select(index)
},
refresh() {
this.cards = this.getCards()
this.select(this.index)