work on main design & layout
This commit is contained in:
bkfox
@ -15,31 +15,41 @@ input.half-field:not(:active):not(:hover) {
|
||||
:root {
|
||||
--body-bg: #fff;
|
||||
--text-color: black;
|
||||
|
||||
--main-color: #EFCA08;
|
||||
--main-color-light: #EFCA08B3;
|
||||
--main-color-dark: #F49F0A;
|
||||
--secondary-color: #00A6A6;
|
||||
--secondary-color-light: #00A6A6B3;
|
||||
--secondary-color-dark: #057ba8;
|
||||
|
||||
--disabled-color: #aaa;
|
||||
--disabled-bg: #eee;
|
||||
--link-fg: #00A6A6;
|
||||
--link-hv-fg: var(--text-color);
|
||||
|
||||
--highlight-color: rgba(255, 255, 0, 1);
|
||||
--highlight-color-alpha: rgba(255, 255, 0, 0.7);
|
||||
--highlight-color-grey: rgba(230, 230, 60, 1);
|
||||
--highlight-color-2: rgb(0, 0, 254);
|
||||
--highlight-color-2-alpha: rgb(0, 0, 254, 0.7);
|
||||
--highlight-color-2-grey: rgba(50, 200, 200, 1);
|
||||
--hg-color: #EFCA08;
|
||||
--hg-color-alpha: #EFCA08B3;
|
||||
--hg-color-grey: rgba(230, 230, 60, 1);
|
||||
--hg-color-2: #F49F0A;
|
||||
--hg-color-2-alpha: #F49F0AB3;
|
||||
--hg-color-2-grey: rgba(50, 200, 200, 1);
|
||||
|
||||
--nav-primary-height: 3rem;
|
||||
--nav-secondary-height: 2.5rem;
|
||||
--nav-bg: var(--highlight-color);
|
||||
--nav-fg: var(--highlight-color-2);
|
||||
--nav-active-bg: var(--highlight-color-2);
|
||||
--nav-active-fg: var(--highlight-color);
|
||||
--nav-bg: var(--main-color);
|
||||
--nav-fg: var(--text-color);
|
||||
--nav-active-bg: var(--main-color-dark);
|
||||
--nav-active-fg: var(--text-color);
|
||||
--nav-fs: 1rem;
|
||||
--nav-2-fs: 0.8rem;
|
||||
|
||||
--button-fg: var(--text-color);
|
||||
--button-bg: var(--highlight-color);
|
||||
--button-hg-fg: var(--highlight-color-2);
|
||||
--button-hg-bg: var(--highlight-color);
|
||||
--button-active-fg: var(--highlight-color);
|
||||
--button-active-bg: var(--highlight-color-2);
|
||||
--button-bg: var(--hg-color);
|
||||
--button-hg-fg: var(--hg-color-2);
|
||||
--button-hg-bg: var(--hg-color);
|
||||
--button-active-fg: var(--hg-color);
|
||||
--button-active-bg: var(--hg-color-2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -8,54 +8,62 @@
|
||||
--subtitle-2-sz: 1.4rem;
|
||||
--subtitle-3-sz: 1.2rem;
|
||||
|
||||
--heading-title-bg-color: rgba(255, 255, 0, 1);
|
||||
--heading-bg-color: var(--highlight-color);
|
||||
--heading-bg-highlight-color: var(--highlight-color-2);
|
||||
--heading-font-family: default;
|
||||
--heading-bg: var(--hg-color);
|
||||
--heading-fg: var(--text-color);
|
||||
--heading-hg-fg: var(--text-color);
|
||||
--heading-hg-bg: var(--hg-color-2);
|
||||
|
||||
--preview-bg: var(--body-bg);
|
||||
--preview-title-sz: #{v.$text-size-medium};
|
||||
--preview-subtitle-sz: #{v.$text-size};
|
||||
--preview-cover-size: 14rem;
|
||||
--preview-cover-small-size: 10rem;
|
||||
--preview-cover-tiny-size: 4rem;
|
||||
--preview-wide-content-sz: #{v.$text-size-bigger};
|
||||
--preview-heading-bg-color: var(--hg-color);
|
||||
--header-height: var(--preview-cover-size);
|
||||
|
||||
--a-carousel-p: #{v.$text-size-medium};
|
||||
--a-carousel-ml: calc(#{v.$mp-4} - 0.5rem);
|
||||
--a-carousel-gap: #{v.$mp-4};
|
||||
--a-carousel-nav-x: -#{v.$mp-3e};
|
||||
--a-carousel-bg: var(--hg-color-alpha);
|
||||
|
||||
--a-progress-bg: transparent;
|
||||
--a-progress-bar-bg: var(--highlight-color-2);
|
||||
--a-progress-bar-color: var(--highlight-color);
|
||||
--a-progress-bar-bg: var(--hg-color-2);
|
||||
--a-progress-bar-color: var(--hg-color);
|
||||
--a-progress-bar-pd: #{v.$mp-2};
|
||||
|
||||
--a-playlist-header-bg: var(--highlight-color-2-alpha);
|
||||
--a-playlist-header-fg: var(--highlight-color);
|
||||
--a-playlist-header-bg: var(--hg-color-2-alpha);
|
||||
--a-playlist-header-fg: var(--text-color);
|
||||
--a-playlist-title-sz: #{v.$text-size};
|
||||
--a-playlist-title-pd: #{v.$mp-3};
|
||||
--a-playlist-item-border: 1px var(--highlight-color-2) solid;
|
||||
--a-playlist-item-border: 1px var(--hg-color-2) solid;
|
||||
|
||||
--a-sound-bg: var(--highlight-color-alpha);
|
||||
--a-sound-hv-bg: var(--highlight-color);
|
||||
--a-sound-playing-fg: var(--highlight-color-alpha);
|
||||
--a-sound-hv-fg: var(--highlight-color-2);
|
||||
--a-sound-bg: var(--hg-color-alpha);
|
||||
--a-sound-hv-bg: var(--hg-color);
|
||||
--a-sound-playing-fg: var(--hg-color-alpha);
|
||||
--a-sound-hv-fg: var(--text-color);
|
||||
--a-sound-text-sz: #{v.$text-size};
|
||||
|
||||
--a-player-url-fg: var(--highlight-color-2);
|
||||
--a-player-panel-bg: var(--highlight-color);
|
||||
--a-player-url-fg: var(--text-color);
|
||||
--a-player-panel-bg: var(--hg-color);
|
||||
--a-player-bar-height: var(--nav-primary-height);
|
||||
--a-player-bar-bg: var(--highlight-color);
|
||||
--a-player-bar-bg: var(--hg-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);
|
||||
--a-player-bar-button-hg-fg: var(--button-hg-fg);
|
||||
--a-player-bar-button-hg-bg: var(--button-hg-bg);
|
||||
|
||||
--button-fg: var(--highlight-color-2);
|
||||
--button-bg: var(--highlight-color);
|
||||
--button-sec-bg: var(--highlight-color-alpha);
|
||||
--button-fg: var(--text-color);
|
||||
--button-bg: var(--hg-color);
|
||||
--button-sec-bg: var(--hg-color-alpha);
|
||||
--button-hg-fg: var(--text-color);
|
||||
--button-hg-bg: var(--highlight-color);
|
||||
--button-active-fg: var(--highlight-color);
|
||||
--button-active-bg: var(--highlight-color-2);
|
||||
--button-hg-bg: var(--hg-color-2);
|
||||
--button-active-fg: var(--text-color);
|
||||
--button-active-bg: var(--hg-color-2);
|
||||
}
|
||||
|
||||
|
||||
@ -85,11 +93,16 @@
|
||||
&.is-3 { font-size: var(--subtitle-3-sz); }
|
||||
}
|
||||
|
||||
.headings a, a.heading, a.subtitle {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.heading {
|
||||
display: inline-block;
|
||||
|
||||
&:not(:empty) {
|
||||
background-color: var(--heading-bg-color);
|
||||
// border-bottom: 1px var(--heading-bg) solid;
|
||||
color: var(--heading-fg);
|
||||
padding: v.$mp-2;
|
||||
margin-top: 0em !important;
|
||||
vertical-align: top;
|
||||
@ -97,26 +110,25 @@
|
||||
&.highlight, &.active,
|
||||
.preview.active &,
|
||||
{
|
||||
background-color: var(--heading-bg-highlight-color);
|
||||
color: var(--highlight-color);
|
||||
// border-color: var(--heading-hg-bg);
|
||||
color: var(--heading-hg-fg);
|
||||
}
|
||||
}
|
||||
|
||||
&.title {
|
||||
background-color: var(--heading-title-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- button
|
||||
@mixin button {
|
||||
.button, a.button, button.button, .nav-urls a {
|
||||
.button, a.button, button.button {
|
||||
font-size: v.$text-size;
|
||||
display: inline-block;
|
||||
padding: v.$mp-2;
|
||||
border: 1px var(--highlight-color-2-alpha) solid;
|
||||
border: none; //1px var(--button-fg) solid;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
// font-size: v.$text-size-medium;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
color: var(--button-fg);
|
||||
background-color: var(--button-bg);
|
||||
@ -125,6 +137,10 @@
|
||||
background-color: var(--button-sec-bg);
|
||||
}
|
||||
|
||||
.label, label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
&:not(:only-child) {
|
||||
@ -136,17 +152,18 @@
|
||||
|
||||
&:hover {
|
||||
color: var(--button-hg-fg);
|
||||
background-color: var(--button-hg-bg);
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: var(--highlight-color-alpha);
|
||||
// border-color: var(--hg-color-alpha);
|
||||
color: var(--button-active-fg);
|
||||
background-color: var(--button-active-bg);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--highlight-color);
|
||||
background-color: var(--highlight-color-2-alpha);
|
||||
border-color: var(--hg-color);
|
||||
background-color: var(--hg-color-2-alpha);
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
@ -156,9 +173,9 @@
|
||||
}
|
||||
|
||||
&[disabled], &.disabled {
|
||||
background-color: var(--highlight-color-grey);
|
||||
color: var(--highlight-color-2);
|
||||
border-color: var(--highlight-color-2-alpha);
|
||||
background-color: var(--hg-color-grey);
|
||||
color: var(--hg-color-2);
|
||||
border-color: var(--hg-color-2-alpha);
|
||||
}
|
||||
|
||||
.dropdown-trigger {
|
||||
@ -186,6 +203,7 @@
|
||||
.preview {
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
background-color: var(--preview-bg) !important;
|
||||
|
||||
&.preview-item {
|
||||
width: 100%;
|
||||
@ -233,7 +251,7 @@
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: v.$screen-small) {
|
||||
@media screen and (max-width: v.$screen-very-small) {
|
||||
.preview .content {
|
||||
display: none;
|
||||
}
|
||||
@ -242,7 +260,6 @@
|
||||
|
||||
.preview-cover {
|
||||
background-size: cover;
|
||||
background-color: transparent !important;
|
||||
height: var(--preview-cover-size);
|
||||
width: var(--preview-cover-size);
|
||||
min-width: var(--preview-cover-size);
|
||||
@ -289,18 +306,22 @@
|
||||
|
||||
// ---- list
|
||||
.list-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: calc(v.$mp-4 / 2);
|
||||
}
|
||||
padding: v.$mp-3;
|
||||
|
||||
.headings {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-top: 0em;
|
||||
padding: 0em;
|
||||
margin-bottom: v.$mp-2 !important;
|
||||
|
||||
.heading {
|
||||
// background-color: var(--preview-heading-bg-color);
|
||||
padding: 0rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
}
|
||||
@ -308,51 +329,54 @@
|
||||
|
||||
.subtitle {
|
||||
font-size: var(--preview-title-sz);
|
||||
// background-color: var(--preview-heading-bg-color);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.media {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.media-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: unset;
|
||||
|
||||
.list-item:not(.no-cover) & {
|
||||
min-height: var(--preview-cover-small-size);
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.actions {
|
||||
text-align: right;
|
||||
margin-top: v.$mp-3;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: v.$screen-small) {
|
||||
.list-item .headings {
|
||||
flex-direction: column;
|
||||
|
||||
.heading {
|
||||
display: inline;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.actions {
|
||||
flex-grow: unset;
|
||||
text-align: right;
|
||||
margin-top: auto;
|
||||
.subtitle {
|
||||
color: unset !important;
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- wide
|
||||
.preview-wide {
|
||||
height: var(--preview-cover-size);
|
||||
display: flex;
|
||||
|
||||
.headings {
|
||||
height: var(--preview-cover-size)
|
||||
}
|
||||
|
||||
&:not(.header) .headings {
|
||||
.list-item.wide {
|
||||
& .preview-cover {
|
||||
box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
& .headings {
|
||||
width: var(--preview-cover-size);
|
||||
min-width: var(--preview-cover-size);
|
||||
flex-grow: 0;
|
||||
margin-right: v.$mp-4;
|
||||
}
|
||||
|
||||
& .content {
|
||||
font-size: var(--preview-wide-content-sz);
|
||||
flex-grow: 1;
|
||||
@ -361,10 +385,8 @@
|
||||
|
||||
|
||||
// ---- card
|
||||
|
||||
.preview-card {
|
||||
padding: 0rem !important;
|
||||
|
||||
height: var(--preview-cover-size);
|
||||
width: var(--preview-cover-size);
|
||||
|
||||
@ -381,6 +403,10 @@
|
||||
box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.heading {
|
||||
background-color: var(--preview-heading-bg-color);
|
||||
}
|
||||
|
||||
.title {
|
||||
max-height: calc( var(--preview-cover-size) / 2 );
|
||||
overflow: hidden;
|
||||
@ -417,19 +443,32 @@
|
||||
}
|
||||
|
||||
|
||||
// ---- card grid
|
||||
// ---- grid
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: v.$mp-4;
|
||||
}
|
||||
|
||||
.list-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: v.$mp-4;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: v.$screen-smaller) {
|
||||
.list-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- ---- Carousel
|
||||
.a-carousel {
|
||||
margin-left: calc( 0rem - var(--a-carousel-ml));
|
||||
|
||||
.a-carousel-viewport {
|
||||
background-color: var(--a-carousel-bg);
|
||||
margin-bottom: var(--a-carousel-p);
|
||||
padding: var(--a-carousel-p) 0;
|
||||
padding-left: var(--a-carousel-ml);
|
||||
}
|
||||
@ -445,17 +484,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.a-carousel-button-container {
|
||||
button, .button {
|
||||
z-index:1000;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: 50%;
|
||||
|
||||
&.prev { left: var(--a-carousel-nav-x); }
|
||||
&.next { right: var(--a-carousel-nav-x); }
|
||||
}
|
||||
.a-carousel-bullets-container {
|
||||
// due to a-carousel margin-left
|
||||
padding-left: var(--a-carousel-ml);
|
||||
}
|
||||
|
||||
|
||||
@ -648,8 +679,8 @@
|
||||
transition: background-color 0.5s;
|
||||
|
||||
&.open {
|
||||
background-color: var(--highlight-color-2-alpha);
|
||||
color: var(--highlight-color);
|
||||
background-color: var(--a-player-bar-button-hg-bg);
|
||||
color: var(--a-player-bar-button-hg-fg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,8 +59,8 @@
|
||||
|
||||
|
||||
// -- colors
|
||||
.highlight-color { color: var(--highlight-color); }
|
||||
.highlight-color-2 { color: var(--highlight-color-2); }
|
||||
.hg-color { color: var(--highlight-color); }
|
||||
.hg-color-2 { color: var(--highlight-color-2); }
|
||||
|
||||
.bg-transparent { background-color: transparent; }
|
||||
|
||||
|
||||
@ -9,11 +9,11 @@
|
||||
padding-bottom: 5rem;
|
||||
|
||||
a {
|
||||
color: var(--highlight-color-2);
|
||||
text-decoration: none;
|
||||
color: var(--link-fg);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
color: var(--text-color);
|
||||
color: var(--link-hv-fg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,10 +22,9 @@
|
||||
margin-top: v.$mp-3;
|
||||
|
||||
> .title {
|
||||
margin-top: unset;
|
||||
padding-top: unset !important;
|
||||
font-size: v.$text-size-medium;
|
||||
clear: both;
|
||||
margin-bottom: v.$mp-4;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
@ -42,7 +41,7 @@
|
||||
}
|
||||
|
||||
.vc-weekday-1, .vc-weekday-7 {
|
||||
color: var(--highlight-color-2) !important;
|
||||
color: var(--hg-color-2) !important;
|
||||
}
|
||||
|
||||
|
||||
@ -112,8 +111,8 @@
|
||||
}
|
||||
|
||||
.navbar-item.active, .table tr.is-selected {
|
||||
color: var(--highlight-color-2);
|
||||
background-color: var(--highlight-color);
|
||||
color: var(--hg-color-2);
|
||||
background-color: var(--hg-color);
|
||||
}
|
||||
|
||||
|
||||
@ -156,6 +155,7 @@
|
||||
text-transform: uppercase;
|
||||
|
||||
a, .button {
|
||||
color: var(--nav-fg);
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
@ -270,7 +270,7 @@
|
||||
}
|
||||
|
||||
.nav + .nav {
|
||||
flew-grow: 0 !important;
|
||||
flex-grow: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -295,8 +295,8 @@
|
||||
font-weight: v.$weight-normal;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--highlight-color-2-alpha);
|
||||
color: var(--highlight-color);
|
||||
background-color: var(--hg-color-2-alpha);
|
||||
color: var(--hg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -384,14 +384,21 @@ nav li {
|
||||
|
||||
.header-cover:not(:only-child) {
|
||||
float: right;
|
||||
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%; }
|
||||
}
|
||||
.header-cover:only-child {
|
||||
with: 100%;
|
||||
}
|
||||
|
||||
|
||||
// ---- ---- detail
|
||||
.page-content {
|
||||
margin-top: v.$mp-6;
|
||||
@ -401,6 +408,29 @@ nav li {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- ---- list
|
||||
.list-item {
|
||||
&.logs {
|
||||
.track .icon {
|
||||
color: var(--secondary-color-dark);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3n) {
|
||||
padding: v.$mp-3;
|
||||
border-radius: v.$mp-2;
|
||||
border: 1px solid var(--main-color-dark) !important;
|
||||
}
|
||||
|
||||
&:nth-child(3n+1) {
|
||||
border-radius: v.$mp-2;
|
||||
border: 1px solid var(--secondary-color-dark) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---- responsive
|
||||
body { font-size: 1.4em; }
|
||||
|
||||
|
||||
@ -1,24 +1,27 @@
|
||||
<template>
|
||||
<section class="a-carousel">
|
||||
<nav class="a-carousel-button-container" v-if="showPrevButton">
|
||||
<button :class="[buttonClass, 'prev']" aria-label="Go left" @click="prev">
|
||||
<span class="icon">
|
||||
<i :class="leftButtonIcon"></i>
|
||||
</span>
|
||||
</button>
|
||||
</nav>
|
||||
<div class="a-carousel-button-container" v-if="showNextButton">
|
||||
<button :class="[buttonClass, 'next']" aria-label="Go left" @click="next">
|
||||
<span class="icon">
|
||||
<i :class="rightButtonIcon"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<nav ref="viewport" class="a-carousel-viewport">
|
||||
<section ref="container" :class="['a-carousel-container', containerClass]">
|
||||
<slot name="default"></slot>
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
<nav class="a-carousel-bullets-container">
|
||||
<!-- <span class="icon bullet" @click="prev" v-if="showPrevButton">
|
||||
<i :class="leftButtonIcon"></i>
|
||||
</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> -->
|
||||
|
||||
<slot name="bullets-right" :v-bind="this"></slot>
|
||||
</nav>
|
||||
</section>
|
||||
</template>
|
||||
<style scoped>
|
||||
@ -42,10 +45,62 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.a-carousel-bullets-container {
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.a-carousel-bullets-container .bullet {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.a-carousel-bullets-container .bullet-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.a-carousel-bullets-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import {ref} from 'vue'
|
||||
|
||||
|
||||
class Offset {
|
||||
constructor(el, min=null, max=null) {
|
||||
this.el = el
|
||||
this.rect = el.getBoundingClientRect();
|
||||
({min, max} = this.minmax(min, max))
|
||||
this.min = min
|
||||
this.max = max
|
||||
this.size = max-min
|
||||
}
|
||||
|
||||
minmax(min=null, max=null) {
|
||||
min = min === null ? this.rect.left : min
|
||||
max = max === null ? this.rect.right : max
|
||||
return {min, max}
|
||||
}
|
||||
|
||||
relative(to) {
|
||||
return new Offset(this.el, this.min-to.min, this.max-to.min)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class Card extends Offset {
|
||||
constructor(el, index) {
|
||||
super(el)
|
||||
this.index = index
|
||||
}
|
||||
|
||||
visible(viewportOffset) {
|
||||
return viewportOffset.min <= this.min && viewportOffset.max >= this.max
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
@ -58,7 +113,7 @@ export default {
|
||||
return {
|
||||
cards: [],
|
||||
index: 0,
|
||||
refresh_: 0,
|
||||
refresh_: 0,
|
||||
}
|
||||
},
|
||||
|
||||
@ -72,109 +127,77 @@ export default {
|
||||
|
||||
computed: {
|
||||
card() { return this.cards()[this.index] },
|
||||
showPrevButton() {
|
||||
|
||||
/*showPrevButton() {
|
||||
return this.index > 0
|
||||
},
|
||||
|
||||
showNextButton() {
|
||||
if(!this.cards || this.cards.length <= 1)
|
||||
return false
|
||||
|
||||
let { count } = this.visibility
|
||||
return (this.index + count) < this.cards.length
|
||||
},
|
||||
},*/
|
||||
|
||||
visibility() {
|
||||
// force refresh on index
|
||||
[this.index, this.refresh_]
|
||||
bullets() {
|
||||
if(!this.cards || !this.$refs.viewport)
|
||||
return []
|
||||
|
||||
if(!this.cards)
|
||||
return {min: -1, max: -1, count: 0};
|
||||
let contOff = new Offset(this.$refs.container)
|
||||
let viewMax = new Offset(this.$refs.viewport).max
|
||||
let bullets = []
|
||||
|
||||
const vOff = this.offset(this.$refs.viewport)
|
||||
var [min, max] = [-1, -1]
|
||||
for(let at=0; at < this.cards.length; at++) {
|
||||
const card = this.cards[at]
|
||||
const cOff = this.offset(card)
|
||||
const visible = vOff.min <= cOff.min && vOff.max >= cOff.max
|
||||
if(visible) {
|
||||
if(min === -1)
|
||||
min = parseInt(at)
|
||||
max = parseInt(at)
|
||||
let i = 0;
|
||||
let max = viewMax
|
||||
bullets.push(i)
|
||||
while(i < this.cards.length) {
|
||||
// skip until next view
|
||||
for(; i < this.cards.length; i++) {
|
||||
let card = this.cards[i].relative(contOff)
|
||||
if(card.max > max) {
|
||||
max = card.min + viewMax
|
||||
bullets.push(i)
|
||||
i++
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
if(max !== -1)
|
||||
max++
|
||||
return {
|
||||
min, max,
|
||||
count: (min !== -1) ? max-min : 0
|
||||
}
|
||||
return bullets
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
offset(el, parent=null) {
|
||||
const rect = el.getBoundingClientRect()
|
||||
const off = {min: rect.left, max: rect.right }
|
||||
if(parent === null)
|
||||
return off
|
||||
|
||||
const pOff = this.offset(parent)
|
||||
return {
|
||||
min: off.min - pOff.min,
|
||||
max: off.max - pOff.max,
|
||||
}
|
||||
},
|
||||
|
||||
getCards() {
|
||||
if(!this.$refs.container)
|
||||
return []
|
||||
if(!this.cardSelector)
|
||||
return this.$refs.container.children
|
||||
return this.$refs.container.querySelectorAll(this.cardSelector)
|
||||
let nodes = (!this.cardSelector) ?
|
||||
[...this.$refs.container.children] :
|
||||
[...this.$refs.container.querySelectorAll(this.cardSelector)]
|
||||
return nodes.map((el, index) => new Card(el, index))
|
||||
},
|
||||
|
||||
selectIndex(index, relative=false) {
|
||||
select(index, relative=false) {
|
||||
if(relative)
|
||||
index = this.index + index
|
||||
|
||||
index = Math.min(this.cards.length, index)
|
||||
const el = this.cards[index]
|
||||
if(!el)
|
||||
index = Math.min(index, this.cards.length)
|
||||
index = Math.max(index, 0)
|
||||
let card = this.cards[index]
|
||||
if(!card)
|
||||
return null;
|
||||
const elOff = this.offset(el, this.$refs.container)
|
||||
this.$refs.container.style.marginLeft = `-${elOff.min}px`
|
||||
|
||||
card = new Card(card.el)
|
||||
const cont = new Offset(this.$refs.container)
|
||||
const rel = card.relative(cont)
|
||||
this.$refs.container.style.marginLeft = `-${rel.min}px`
|
||||
this.index = index;
|
||||
return el
|
||||
},
|
||||
|
||||
next() {
|
||||
this.refresh_++
|
||||
|
||||
if(!this.visibility.count)
|
||||
return
|
||||
let {count} = this.visibility
|
||||
let at = Math.min(
|
||||
count === 1 ? this.index+count : this.index+count-1,
|
||||
this.cards.length-count
|
||||
)
|
||||
this.selectIndex(at)
|
||||
},
|
||||
|
||||
prev() {
|
||||
this.refresh_++
|
||||
|
||||
if(!this.visibility.count)
|
||||
return
|
||||
const {min, count} = this.visibility
|
||||
let at = Math.max(0, min-count)
|
||||
if(min < 0 || count <= 0)
|
||||
return
|
||||
this.selectIndex(at)
|
||||
return card.el
|
||||
},
|
||||
|
||||
refresh() {
|
||||
this.cards = this.getCards()
|
||||
this.selectIndex(this.index)
|
||||
this.select(this.index)
|
||||
this.refresh_++
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user