fix integration into admin interface
This commit is contained in:
bkfox
@ -1,4 +1,3 @@
|
||||
import './assets/styles.scss'
|
||||
import './assets/admin.scss'
|
||||
import './index.js'
|
||||
|
||||
|
||||
@ -1,5 +1,77 @@
|
||||
@use "./vars";
|
||||
@use "./components";
|
||||
|
||||
@import "~bulma/sass/utilities/_all.sass";
|
||||
@import "~bulma/sass/elements/button";
|
||||
@import "~bulma/sass/components/navbar";
|
||||
|
||||
|
||||
// enforce button usage inside custom application
|
||||
#player, .ax {
|
||||
@include components.button;
|
||||
}
|
||||
|
||||
|
||||
.admin {
|
||||
|
||||
.navbar.has-shadow, .navbar.is-fixed-bottom.has-shadow {
|
||||
box-shadow: 0em 0em 1em rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
a.navbar-item.is-active {
|
||||
border-bottom: 1px grey solid;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
& + .container {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.navbar-dropdown {
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.navbar-split {
|
||||
margin: 0.2em 0em;
|
||||
margin-right: 1em;
|
||||
padding-right: 1em;
|
||||
border-right: 1px vars.$grey-light solid;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0em;
|
||||
padding: 0em;
|
||||
}
|
||||
|
||||
&.toolbar {
|
||||
margin: 1em 0em;
|
||||
background-color: transparent;
|
||||
margin-bottom: 1em;
|
||||
|
||||
.title {
|
||||
padding-right: 2em;
|
||||
margin-right: 1em;
|
||||
border-right: 1px vars.$grey-light solid;
|
||||
|
||||
font-size: vars.$text-size;
|
||||
font-weight: vars.$weight-light;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-dropdown {
|
||||
max-height: 40rem;
|
||||
overflow-y: auto;
|
||||
|
||||
input {
|
||||
z-index: 10000;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.navbar .navbar-brand {
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
68
assets/src/assets/common.scss
Normal file
68
assets/src/assets/common.scss
Normal file
@ -0,0 +1,68 @@
|
||||
@use "./vars" as v;
|
||||
@import "./vendor";
|
||||
@import "./helpers";
|
||||
@import "./components";
|
||||
|
||||
//-- helpers/modifiers
|
||||
//-- forms
|
||||
input.half-field:not(:active):not(:hover) {
|
||||
border: none;
|
||||
background-color: rgba(0,0,0,0);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
//-- general
|
||||
:root {
|
||||
--body-bg: #fff;
|
||||
--text-color: black;
|
||||
--disabled-color: #aaa;
|
||||
--disabled-bg: #eee;
|
||||
|
||||
--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);
|
||||
|
||||
--nav-primary-height: 4rem;
|
||||
--nav-secondary-height: 3rem;
|
||||
|
||||
--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);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-size: 1.4em;
|
||||
background-color: var(--body-bg);
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: v.$screen-wider) {
|
||||
body { font-size: 1.2em; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: v.$screen-normal) {
|
||||
body { font-size: 1em; }
|
||||
|
||||
:root {
|
||||
--header-height: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
627
assets/src/assets/components.scss
Normal file
627
assets/src/assets/components.scss
Normal file
@ -0,0 +1,627 @@
|
||||
@use "vars" as v;
|
||||
|
||||
:root {
|
||||
--heading-height: 30rem;
|
||||
--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;
|
||||
|
||||
--preview-cover-size: 24rem;
|
||||
--preview-cover-small-size: 10rem;
|
||||
--preview-cover-tiny-size: 4rem;
|
||||
--header-height: 30rem;
|
||||
|
||||
--a-carousel-pb: #{v.$text-size-medium};
|
||||
--a-carousel-gap: #{v.$mp-4};
|
||||
--a-carousel-nav-x: -#{v.$mp-3e};
|
||||
|
||||
--a-progress-bg: transparent;
|
||||
--a-progress-bar-bg: var(--highlight-color-2);
|
||||
--a-progress-bar-color: var(--highlight-color);
|
||||
--a-progress-bar-pd: #{v.$mp-2};
|
||||
|
||||
--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-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-title-sz: #{v.$text-size-medium};
|
||||
|
||||
--a-player-url-fg: var(--highlight-color-2);
|
||||
--a-player-panel-bg: var(--highlight-color);
|
||||
--a-player-bar-bg: var(--highlight-color);
|
||||
--a-player-bar-title-alone-sz: #{v.$text-size-bigger};
|
||||
|
||||
--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);
|
||||
}
|
||||
|
||||
|
||||
// ---- ---- Preview & items
|
||||
// ---- heading
|
||||
.heading {
|
||||
display: inline-block;
|
||||
|
||||
&:not(:empty) {
|
||||
background-color: var(--heading-bg-color);
|
||||
padding: v.$mp-2;
|
||||
margin-top: 0em !important;
|
||||
vertical-align: top;
|
||||
|
||||
&.highlight, &.active,
|
||||
.preview.active &,
|
||||
{
|
||||
background-color: var(--heading-bg-highlight-color);
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.title {
|
||||
background-color: var(--heading-title-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- button
|
||||
@mixin button {
|
||||
.button, a.button, button.button, .nav-urls a {
|
||||
display: inline-block;
|
||||
padding: v.$mp-3e;
|
||||
border-radius: 4px;
|
||||
border: 1px var(--highlight-color-2-alpha) solid;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-size: v.$text-size-medium;
|
||||
|
||||
background-color: var(--button-bg);
|
||||
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
&:not(:only-child) {
|
||||
&:first-child { margin-right: v.$mp-3; }
|
||||
&:last-child { margin-left: v.$mp-3 }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
border-color: var(--button-hg-bg);
|
||||
color: var(--button-hg-fg);
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: var(--highlight-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);
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:not([disabled]), &:not(.disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&[disabled], &.disabled {
|
||||
background-color: var(--highlight-color-grey);
|
||||
color: var(--highlight-color-2);
|
||||
border-color: var(--highlight-color-2-alpha);
|
||||
}
|
||||
|
||||
.dropdown-trigger {
|
||||
border-radius: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.button-group, .nav {
|
||||
.button {
|
||||
border-radius: 0px;
|
||||
background-color: transparent;
|
||||
border-top: 0px;
|
||||
border-bottom: 0px;
|
||||
height: 100%;
|
||||
|
||||
&:not(:first-child) { border-left: 0px; }
|
||||
&:last-child { border-right: 0px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---- preview
|
||||
.preview {
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
margin-bottom: v.$mp-6 !important;
|
||||
|
||||
&.preview-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// FIXME: remove
|
||||
&.columns, .headings.columns {
|
||||
margin-left: 0em;
|
||||
margin-right: 0em;
|
||||
.column { padding: 0em; }
|
||||
}
|
||||
|
||||
.title, .title:not(:last-child) {
|
||||
// second is bulma reset
|
||||
font-weight: v.$weight-bold;
|
||||
font-size: v.$text-size-bigger;
|
||||
margin-bottom: unset;
|
||||
}
|
||||
.subtitle {
|
||||
font-weight: v.$weight-bolder;
|
||||
font-size: v.$text-size-bigger;
|
||||
margin-bottom: unset;
|
||||
}
|
||||
//.content, .actions {
|
||||
// font-size: v.$text-size-bigger;
|
||||
//}
|
||||
|
||||
.headings {
|
||||
background-size: cover;
|
||||
|
||||
> * { margin: 0em; }
|
||||
.column { padding: 0em; }
|
||||
|
||||
a {
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.tiny {
|
||||
.content {
|
||||
font-size: v.$text-size;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: v.$screen-small) {
|
||||
.preview .content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: v.$screen-wide) {
|
||||
:root {
|
||||
--preview-cover-size: 18em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.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);
|
||||
|
||||
&.small, .preview.small & {
|
||||
min-width: unset;
|
||||
height: var(--preview-cover-small-size);
|
||||
width: var(--preview-cover-small-size) !important;
|
||||
min-width: var(--preview-cover-small-size);
|
||||
}
|
||||
|
||||
&.tiny, .preview.tiny & {
|
||||
min-width: unset;
|
||||
height: var(--preview-cover-tiny-size);
|
||||
width: var(--preview-cover-tiny-size) !important;
|
||||
min-width: var(--preview-cover-tiny-size);
|
||||
}
|
||||
}
|
||||
|
||||
.preview-header {
|
||||
width: 100%;
|
||||
|
||||
&:not(.no-cover) {
|
||||
min-height: var(--header-height);
|
||||
}
|
||||
|
||||
&.no-cover {
|
||||
height: unset;
|
||||
}
|
||||
|
||||
.headings {
|
||||
padding-top: v.$mp-6;
|
||||
}
|
||||
|
||||
.headings, > .container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .container, {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- specific
|
||||
.preview.comment {
|
||||
.title { font-size: v.$text-size-bigger; }
|
||||
.subtitle { font-size: v.$text-size; }
|
||||
}
|
||||
|
||||
|
||||
// ---- list
|
||||
.list-item {
|
||||
width: 100%;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: calc(v.$mp-4 / 2);
|
||||
}
|
||||
|
||||
.headings {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-top: 0em;
|
||||
margin-bottom: v.$mp-4 !important;
|
||||
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.media-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.list-item:not(.no-cover) & {
|
||||
min-height: var(--preview-cover-small-size);
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.actions {
|
||||
flex-grow: unset;
|
||||
text-align: right;
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- wide
|
||||
.preview-wide {
|
||||
height: var(--preview-cover-size);
|
||||
|
||||
.headings {
|
||||
height: var(--preview-cover-size)
|
||||
}
|
||||
|
||||
&:not(.header) .headings {
|
||||
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: v.$text-size-bigger;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- card
|
||||
.preview-card {
|
||||
height: var(--preview-cover-size);
|
||||
width: var(--preview-cover-size);
|
||||
|
||||
&:not(.header) {
|
||||
box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.card-grid & {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.actions {
|
||||
position: absolute;
|
||||
bottom: v.$mp-3;
|
||||
right: v.$mp-3;
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.preview-card-headings {
|
||||
padding-top: v.$mp-3;
|
||||
|
||||
& > div:not(:last-child),
|
||||
& .column > div {
|
||||
margin-bottom: v.$mp-3;
|
||||
}
|
||||
|
||||
preview-header:not(.no-cover) & .heading {
|
||||
margin-bottom: v.$mp-3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// ---- page header
|
||||
.header {
|
||||
&.preview-header {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
gap: v.$mp-3;
|
||||
min-height: unset;
|
||||
padding-top: v.$mp-3 !important;
|
||||
|
||||
.headings {
|
||||
flex-grow: 1;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
}
|
||||
img {
|
||||
height: var(--preview-cover-size);
|
||||
max-width: calc(var(--preview-cover-size) * 2);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: v.$h1-size;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: v.$h2-size;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- card grid
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: v.$mp-4;
|
||||
}
|
||||
|
||||
|
||||
// ---- ---- Carousel
|
||||
.a-carousel {
|
||||
padding-bottom: var(--a-carousel-pb);
|
||||
}
|
||||
|
||||
.a-carousel-container {
|
||||
width: 100%;
|
||||
gap: var(--a-carousel-gap);
|
||||
transition: margin-left 1s;
|
||||
|
||||
> * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.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); }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- ---- progress bar
|
||||
.a-progress {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0em;
|
||||
padding: 0em;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--a-progress-bg);
|
||||
}
|
||||
|
||||
.a-progress-bar-container {
|
||||
flex-grow: 1;
|
||||
margin: 0em;
|
||||
}
|
||||
|
||||
> time, .a-progress-bar {
|
||||
height: 100%;
|
||||
padding: var(--a-progress-bar-pd);
|
||||
}
|
||||
|
||||
.a-progress-bar {
|
||||
background-color: var(--a-progress-bar-bg);
|
||||
color: var(--a-progress-bar-color)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- ---- player
|
||||
// ---- playlist
|
||||
.playlist, .a-playlist {
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--a-playlist-title-sz);
|
||||
margin: 0;
|
||||
padding: var(--a-playlist-title-pd);
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
border-bottom: var(--a-playlist-item-border);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---- sound item
|
||||
.a-sound-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
|
||||
height: 3rem;
|
||||
background-color: var(--a-sound-bg);
|
||||
|
||||
&.playing, &.playing .title {
|
||||
color: var(--a-sound-playing-fg) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--a-sound-hv-bg);
|
||||
|
||||
.title {
|
||||
color: var(--a-sound-hv-fg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.title:hover::before, &.playing .title::before {
|
||||
content: "\f04b";
|
||||
font-family: "Font Awesome 6 Free";
|
||||
margin-right: v.$mp-3e;
|
||||
}
|
||||
&.playing .title:hover::before {
|
||||
content: '';
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.headings > * {
|
||||
}
|
||||
|
||||
.title {
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
padding: 0em v.$mp-3;
|
||||
}
|
||||
|
||||
margin: 0em;
|
||||
padding: v.$mp-3e;
|
||||
font-size: var(--a-sound-title-sz);
|
||||
}
|
||||
.button {
|
||||
width: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- player
|
||||
.player-container {
|
||||
z-index: 1000000;
|
||||
}
|
||||
|
||||
.a-player {
|
||||
box-shadow: 0em -0.5em 0.5em rgba(0, 0, 0, 0.05);
|
||||
|
||||
a { color: var(--a-player-url-fg); }
|
||||
}
|
||||
|
||||
.a-player-panels {
|
||||
background: var(--a-player-panel-bg);
|
||||
height: 0%;
|
||||
transition: height 1s;
|
||||
}
|
||||
.a-player-panels.is-open {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.a-player-panel {
|
||||
padding-bottom: v.$mp-3;
|
||||
max-height: 80%;
|
||||
overflow-y: auto;
|
||||
|
||||
.a-sound-item:not(:hover) {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.a-player-progress {
|
||||
height: 0.4em;
|
||||
overflow: hidden;
|
||||
|
||||
time { display: none; }
|
||||
|
||||
&:hover, .a-player-panels.is-open + & {
|
||||
background: var(--a-player-bar-bg);
|
||||
height: 2em;
|
||||
time { display: unset; }
|
||||
}
|
||||
}
|
||||
|
||||
.a-player-bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
height: 3.75em !important;
|
||||
|
||||
border-top: 1px v.$grey-light solid;
|
||||
background: var(--a-player-bar-bg);
|
||||
|
||||
> * { height: 100%; }
|
||||
|
||||
.cover { height: 100%; }
|
||||
.title {
|
||||
font-size: v.$text-size;
|
||||
margin: 0em;
|
||||
|
||||
&:last-child {
|
||||
font-size: var(--a-player-bar-title-alone-sz);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: v.$text-size-bigger;
|
||||
height: 100%;
|
||||
padding: auto 0.2em !important;
|
||||
min-width: 3em;
|
||||
border-radius: 0px;
|
||||
transition: background-color 0.5s;
|
||||
|
||||
&.open {
|
||||
background-color: var(--highlight-color-2-alpha);
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.a-player-bar-content {
|
||||
flex-grow: 1;
|
||||
padding-top: v.$mp-3;
|
||||
padding-left: v.$mp-3;
|
||||
padding-right: v.$mp-3;
|
||||
}
|
||||
69
assets/src/assets/helpers.scss
Normal file
69
assets/src/assets/helpers.scss
Normal file
@ -0,0 +1,69 @@
|
||||
@use "./vars";
|
||||
|
||||
.align-left { text-align: left; justify-content: left; }
|
||||
.align-right { text-align: right; justify-content: right; }
|
||||
|
||||
.d-inline { display: inline !important; }
|
||||
.d-block { display: block !important; }
|
||||
.d-inline-block { display: inline-block !important; }
|
||||
|
||||
.flex-push-right { margin-left: auto; }
|
||||
.flex-grow-0 { flex-grow: 0 !important; }
|
||||
|
||||
.float-right { float: right }
|
||||
.float-left { float: left }
|
||||
|
||||
.is-fullwidth { width: 100%; }
|
||||
.is-fullheight { height: 100%; }
|
||||
.is-fixed-bottom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
margin-bottom: 0px;
|
||||
border-radius: 0;
|
||||
}
|
||||
.is-borderless { border: none; }
|
||||
|
||||
.overflow-hidden { overflow: hidden }
|
||||
.overflow-hidden.is-fullwidth { max-width: 100%; }
|
||||
|
||||
.p-relative { position: relative !important }
|
||||
.p-absolute { position: absolute !important }
|
||||
.p-fixed { position: fixed !important }
|
||||
.p-sticky { position: sticky !important }
|
||||
.p-static { position: static !important }
|
||||
|
||||
.height-full { height: 100%; }
|
||||
|
||||
.ws-nowrap { white-space: nowrap; }
|
||||
.no-border { border: 0px !important; }
|
||||
|
||||
|
||||
*[draggable="true"] {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
|
||||
// ---- animations
|
||||
@keyframes blink {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0.4; }
|
||||
}
|
||||
|
||||
.blink { animation: 1s ease-in-out 3s infinite alternate blink; }
|
||||
.loading { animation: 1s ease-in-out 1s infinite alternate blink; }
|
||||
|
||||
|
||||
// -- colors
|
||||
.highlight-color { color: var(--highlight-color); }
|
||||
.highlight-color-2 { color: var(--highlight-color-2); }
|
||||
|
||||
.bg-transparent { background-color: transparent; }
|
||||
|
||||
.is-success {
|
||||
background-color: vars.$green !important;
|
||||
border-color: vars.$green-dark !important;
|
||||
}
|
||||
.is-danger {
|
||||
background-color: vars.$red !important;
|
||||
border-color: vars.$red-dark !important;
|
||||
}
|
||||
325
assets/src/assets/public.scss
Normal file
325
assets/src/assets/public.scss
Normal file
@ -0,0 +1,325 @@
|
||||
@use "./vars" as v;
|
||||
@use "./components";
|
||||
|
||||
@import "./vendor";
|
||||
|
||||
|
||||
// ---- main theme & layout
|
||||
.page {
|
||||
padding-bottom: 5rem;
|
||||
|
||||
a {
|
||||
background-color: var(--highlight-color-alpha);
|
||||
color: var(--highlight-color-2);
|
||||
text-decoration: none;
|
||||
padding: v.$mp-2;
|
||||
}
|
||||
|
||||
section.container {
|
||||
padding-top: v.$mp-6;
|
||||
|
||||
> .title {
|
||||
margin-top: unset;
|
||||
padding-top: unset !important;
|
||||
margin-bottom: v.$mp-4;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: v.$mp-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---- components
|
||||
.dropdown-item {
|
||||
font-size: unset !important
|
||||
}
|
||||
|
||||
.vc-weekday-1, .vc-weekday-7 {
|
||||
color: var(--highlight-color-2) !important;
|
||||
}
|
||||
|
||||
|
||||
.schedules {
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.schedule {
|
||||
margin-bottom: v.$mp-2;
|
||||
|
||||
.day {
|
||||
font-weight: v.$weight-bold;
|
||||
margin-right: v.$mp-3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// -- buttons, forms
|
||||
@include components.button;
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: v.$mp-3;
|
||||
justify-content: right;
|
||||
|
||||
&.no-label label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button, .action {
|
||||
background-color: var(--highlight-color);
|
||||
justify-content: center;
|
||||
min-width: 2rem;
|
||||
|
||||
.not-selected { opacity: 0.6; }
|
||||
|
||||
|
||||
.icon { margin: 0em !important; }
|
||||
|
||||
label {
|
||||
margin-left: v.$mp-2;
|
||||
}
|
||||
|
||||
&:hover, .selected {
|
||||
color: var(--highlight-color-2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.label, .textarea, .input, .select {
|
||||
font-size: v.$text-size-medium;
|
||||
}
|
||||
|
||||
.navbar-item.active, .table tr.is-selected {
|
||||
color: var(--highlight-color-2);
|
||||
background-color: var(--highlight-color);
|
||||
}
|
||||
|
||||
|
||||
// -- headings
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
|
||||
&.is-3 {
|
||||
margin-top: v.$mp-3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// ---- main navigation
|
||||
.nav {
|
||||
display: flex;
|
||||
background-color: var(--highlight-color);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.burger { display: none; }
|
||||
|
||||
.nav-item {
|
||||
padding: v.$mp-3;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
text-align: center;
|
||||
|
||||
font-family: var(--heading-font-family);
|
||||
text-transform: uppercase;
|
||||
|
||||
a, .button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon:first-child, .icon + span {
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--highlight-color-2);
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
background-color: var(--highlight-color);
|
||||
|
||||
|
||||
.dropdown-content {
|
||||
font-size: v.$text-size;
|
||||
min-width: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.primary {
|
||||
height: var(--nav-primary-height);
|
||||
|
||||
.nav-menu {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
display: inline-block;
|
||||
padding: v.$mp-3;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: v.$text-size-2;
|
||||
font-weight: v.$weight-bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
justify-content: right;
|
||||
|
||||
.nav-item {
|
||||
font-size: v.$text-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: v.$screen-normal) {
|
||||
.page {
|
||||
margin-top: var(--nav-primary-height);
|
||||
}
|
||||
|
||||
.navs {
|
||||
z-index: 100000;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
.nav:first-child {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.nav + .nav {
|
||||
flew-grow: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
justify-content: space-between;
|
||||
|
||||
.burger {
|
||||
display: unset;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
box-shadow: 0em 0.5em 0.5em rgba(0,0,0,0.05);
|
||||
|
||||
.nav-item {
|
||||
display: block;
|
||||
font-size: v.$text-size-medium;
|
||||
font-weight: v.$weight-normal;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--highlight-color-2-alpha);
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu:not(.active) {
|
||||
display: none !important
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
nav li {
|
||||
list-style: none;
|
||||
|
||||
a, .button {
|
||||
font-size: v.$text-size-medium;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav-urls {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
margin-top: v.$mp-3;
|
||||
text-align: right;
|
||||
font-size: v.$text-size-medium;
|
||||
|
||||
> a:only-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.urls {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: v.$mp-3;
|
||||
justify-content: center;
|
||||
|
||||
a:not(:last-child) {
|
||||
margin-right: v.$mp-3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.left {
|
||||
flex-grow: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex-grow: 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- ---- detail
|
||||
.page-content {
|
||||
margin-top: v.$mp-6;
|
||||
margin-bottom: v.$mp-6;
|
||||
}
|
||||
|
||||
// ---- responsive
|
||||
@media screen and (max-width: v.$screen-normal) {
|
||||
.container.header {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.page .container {
|
||||
margin-left: v.$mp-4;
|
||||
margin-right: v.$mp-4;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: v.$screen-small) {
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
53
assets/src/assets/vars.scss
Normal file
53
assets/src/assets/vars.scss
Normal file
@ -0,0 +1,53 @@
|
||||
@charset "utf-8";
|
||||
|
||||
$black: #000;
|
||||
$white: #fff;
|
||||
$red: #e00;
|
||||
$red-dark: #b00;
|
||||
$green: #0e0;
|
||||
$green-dark: #0b0;
|
||||
$grey-light: #ddd;
|
||||
|
||||
$mp-1: 0.2rem;
|
||||
$mp-1e: 0.2em;
|
||||
$mp-2: 0.4rem;
|
||||
$mp-2e: 0.4em;
|
||||
$mp-3: 0.6rem;
|
||||
$mp-3e: 0.6em;
|
||||
$mp-4: 1.2rem;
|
||||
$mp-4e: 1.2em;
|
||||
$mp-5: 1.6rem;
|
||||
$mp-5e: 1.6em;
|
||||
$mp-6: 2rem;
|
||||
$mp-6e: 2em;
|
||||
$mp-7: 4rem;
|
||||
$mp-7e: 4em;
|
||||
|
||||
$text-size-small: 0.6rem;
|
||||
$text-size-smaller: 0.8rem;
|
||||
$text-size: 1rem;
|
||||
$text-size-2: 1.2rem;
|
||||
$text-size-medium: 1.4rem;
|
||||
$text-size-bigger: 1.6rem;
|
||||
$text-size-big: 2rem;
|
||||
|
||||
$h1-size: 40px;
|
||||
$h2-size: 32px;
|
||||
$h3-size: 28px;
|
||||
$h4-size: 24px;
|
||||
$h5-size: 20px;
|
||||
$h6-size: 14px;
|
||||
|
||||
$weight-light: 100;
|
||||
$weight-lighter: 300;
|
||||
$weight-normal: 400;
|
||||
$weight-bolder: 500;
|
||||
$weight-bold: 700;
|
||||
|
||||
$screen-very-small: 400px;
|
||||
//TODO: switch small & smaller
|
||||
$screen-small: 600px;
|
||||
$screen-smaller: 800px;
|
||||
$screen-normal: 1024px;
|
||||
$screen-wider: 1280px;
|
||||
$screen-wide: 1380px;
|
||||
@ -1,14 +1,11 @@
|
||||
@import 'v-calendar/style.css';
|
||||
@import "~bulma/sass/utilities/_all.sass";
|
||||
|
||||
$body-background-color: $light;
|
||||
$menu-item-hover-background-color: #dfdfdf;
|
||||
$menu-item-active-background-color: #d2d2d2;
|
||||
|
||||
@import "~bulma/sass/base/_all";
|
||||
@import "~bulma/sass/components/breadcrumb";
|
||||
@import "~bulma/sass/components/dropdown";
|
||||
@import "~bulma/sass/components/navbar";
|
||||
@import "~bulma/sass/components/media";
|
||||
@import "~bulma/sass/components/message";
|
||||
@import "~bulma/sass/components/modal";
|
||||
|
||||
@ -1,13 +1,16 @@
|
||||
<template>
|
||||
<component :is="tag" :class="[itemClass, active ? activeClass : '']">
|
||||
<slot name="before-button"></slot>
|
||||
<slot name="before-button" :toggle="toggle" :active="active"></slot>
|
||||
<slot name="button" :toggle="toggle" :active="active">
|
||||
<component :is="buttonTag" :class="buttonClass" @click="toggle()">
|
||||
<span class="icon" v-if="labelIcon">
|
||||
<i :class="labelIcon"></i>
|
||||
</span>
|
||||
<span>{{ label }}</span>
|
||||
<span class="icon">
|
||||
<i v-if="!active" :class="buttonIconOpen"></i>
|
||||
<i v-if="!active" :class="buttonIcon"></i>
|
||||
<i v-if="active" :class="buttonIconClose"></i>
|
||||
</span>
|
||||
{{ label }}
|
||||
</component>
|
||||
</slot>
|
||||
<div :class="contentClass" v-show="active">
|
||||
@ -26,10 +29,11 @@ export default {
|
||||
props: {
|
||||
tag: {type: String, default: "div"},
|
||||
label: {type: String, default: ""},
|
||||
labelIcon: {type: String, default: ""},
|
||||
buttonTag: {type: String, default: "button"},
|
||||
activeClass: {type: String, default: "is-active"},
|
||||
buttonClass: {type: String, default: "button"},
|
||||
buttonIconOpen: { type: String, default:"fa fa-angle-down"},
|
||||
buttonIcon: { type: String, default:"fa fa-angle-down"},
|
||||
buttonIconClose: { type: String, default:"fa fa-angle-up"},
|
||||
contentClass: String,
|
||||
open: {type: Boolean, default: false},
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
import './index.js'
|
||||
import App from './app.js'
|
||||
|
||||
export default App
|
||||
|
||||
window.App = App
|
||||
@ -12,7 +12,7 @@ import VueLoader from './vueLoader'
|
||||
import Sound from './sound'
|
||||
import {Set} from './model'
|
||||
|
||||
import './assets/styles.scss'
|
||||
import './assets/common.scss'
|
||||
|
||||
|
||||
window.aircox = {
|
||||
@ -45,6 +45,7 @@ window.aircox = {
|
||||
|
||||
if(initApp) {
|
||||
config = config || window.App || App
|
||||
config.el = el || config.el
|
||||
loader = loader || new VueLoader({el, props, ...config})
|
||||
loader.enable(hotReload)
|
||||
this.loader = loader
|
||||
|
||||
@ -8,7 +8,8 @@ import PageLoad from './pageLoad'
|
||||
*/
|
||||
export default class VueLoader {
|
||||
constructor({el=null, props={}, ...appConfig}={}, loaderOptions={}) {
|
||||
this.appConfig = appConfig;
|
||||
this.appConfig = appConfig
|
||||
this.appConfig.el = el
|
||||
this.props = props
|
||||
this.pageLoad = new PageLoad(el, loaderOptions)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user