Compare commits
No commits in common. "32e5c79e888362fc517e8f145f9a9f2b6b84dc54" and "df9e3a9f61a4b76d693c324609265f421b268fde" have entirely different histories.
32e5c79e88
...
df9e3a9f61
|
|
@ -34,7 +34,7 @@ class ProgramQuerySet(PageQuerySet):
|
|||
"""
|
||||
if user.is_superuser:
|
||||
return self
|
||||
groups = user.groups.all()
|
||||
groups = self.request.user.groups.all()
|
||||
return self.filter(editors_group__in=groups)
|
||||
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -16,7 +16,6 @@ Usefull context:
|
|||
<meta name="description" content="{{ site.description }}" />
|
||||
<meta name="keywords" content="{{ site.tags }}" />
|
||||
<meta name="generator" content="Aircox" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="{% thumbnail site.favicon 32x32 crop %}" />
|
||||
|
||||
{% block assets %}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="dropdown-trigger">
|
||||
<button class="button square" aria-haspopup="true" aria-controls="dropdown-menu" type="button">
|
||||
<span class="icon">
|
||||
<i class="fa-regular fa-user" aria-hidden="true" style="opacity: 0.6"></i>
|
||||
<i class="fa fa-user" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -40,16 +40,11 @@
|
|||
{% translate "Statistics" %}
|
||||
</a>
|
||||
{% endblock %}
|
||||
{% endif %}
|
||||
{% if user.is_authenticated %}
|
||||
<hr class="dropdown-divider" />
|
||||
<form id="logout" action="{% url 'logout' %}" method="post">
|
||||
{% csrf_token %}
|
||||
<a class="dropdown-item" href="#" type="submit" onclick="document.getElementById('logout').submit();">
|
||||
{% translate "Disconnect" %}
|
||||
</a>
|
||||
</form>
|
||||
{% endif %}
|
||||
<a class="dropdown-item" href="{% url "logout" %}" data-force-reload="1">
|
||||
{% translate "Disconnect" %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -136,11 +136,6 @@ export default class PageLoad {
|
|||
history.pushState(state, '', url)
|
||||
}
|
||||
|
||||
dispatchPageLoaded(url) {
|
||||
var evt = new CustomEvent("pageLoaded", {detail: url})
|
||||
document.dispatchEvent(evt)
|
||||
}
|
||||
|
||||
// --- events
|
||||
pageChanged(event) {
|
||||
let submit = event.type == 'submit';
|
||||
|
|
@ -166,7 +161,7 @@ export default class PageLoad {
|
|||
else
|
||||
options = {...options, method: target.method, body: formData}
|
||||
}
|
||||
this.load(url, options).then(() => this.dispatchPageLoaded(url)).then(() => this.historySave(url))
|
||||
this.load(url, options).then(() => this.historySave(url))
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
# aircox
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
4324
radiocampus/assets/package-lock.json
generated
4324
radiocampus/assets/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -1,56 +0,0 @@
|
|||
{
|
||||
"name": "aircox",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"watch": "vite build --watch",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^6.0.0",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@rollup/plugin-commonjs": "^25.0.7",
|
||||
"core-js": "^3.8.3",
|
||||
"lodash": "^4.17.21",
|
||||
"v-calendar": "^3.1.2",
|
||||
"vite-plugin-babel-macros": "^1.0.6",
|
||||
"vue": "^3.4.21"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tiptap/extension-link": "^2.3.0",
|
||||
"@tiptap/extension-underline": "^2.3.0",
|
||||
"@tiptap/pm": "^2.3.0",
|
||||
"@tiptap/starter-kit": "^2.3.0",
|
||||
"@tiptap/vue-3": "^2.3.0",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"bulma": "^0.9.4",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"sass": "^1.49.9",
|
||||
"vite": "^5.2.8"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true,
|
||||
"es2022": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "@babel/eslint-parser"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead",
|
||||
"not ie 11"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
import './styles/admin.scss'
|
||||
import './index.js'
|
||||
|
||||
import App from './app';
|
||||
import components from './components/admin.js'
|
||||
|
||||
const AdminApp = {
|
||||
...App,
|
||||
components: {...App.components, ...components},
|
||||
|
||||
data() {
|
||||
return {
|
||||
...super.data,
|
||||
modalItem: null,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
...App.methods,
|
||||
|
||||
fileSelected(select, input, preview) {
|
||||
const item = this.$refs[select].item
|
||||
if(item) {
|
||||
this.$refs[input].value = item.id
|
||||
if(preview)
|
||||
preview.src = item.file
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
export default AdminApp;
|
||||
|
||||
|
||||
window.App = AdminApp
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
import {Calendar, DatePicker} from 'v-calendar';
|
||||
import components from './components'
|
||||
|
||||
const App = {
|
||||
el: '#app',
|
||||
delimiters: ['[[', ']]'],
|
||||
components: {
|
||||
...components,
|
||||
...{
|
||||
VCalendar: Calendar,
|
||||
VDatepicker: DatePicker
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
player() { return window.aircox.player; },
|
||||
},
|
||||
|
||||
methods: {
|
||||
//! Delete elements from DOM using provided selector.
|
||||
deleteElements(sel) {
|
||||
for(var el of document.querySelectorAll(sel))
|
||||
el.parentNode.removeChild(el)
|
||||
},
|
||||
|
||||
//! File has been selected
|
||||
//! TODO: replace using regular ref and bindings.
|
||||
fileSelected(select, input, preview) {
|
||||
const item = this.$refs[select].item
|
||||
if(item) {
|
||||
this.$refs[input].value = item.id
|
||||
if(preview)
|
||||
preview.src = item.file
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export const PlayerApp = {
|
||||
el: '#player',
|
||||
delimiters: ['[[', ']]'],
|
||||
components: {...components},
|
||||
}
|
||||
|
||||
export default App
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
// Enable styling body background while using vue hotreload
|
||||
// Tags with side effect (<script> and <style>) are ignored in client component templates.
|
||||
|
||||
const backgrounds = new Map();
|
||||
backgrounds.set('default', "linear-gradient(#738ef2, white)");
|
||||
backgrounds.set('/', "url(/static/radiocampus/backgrounds/photo-04-20.jpg) no-repeat center center fixed");
|
||||
|
||||
|
||||
export default class BackgroundLoad {
|
||||
constructor () {
|
||||
let url = new URL(document.location)
|
||||
this.path = url.pathname
|
||||
this.update()
|
||||
document.addEventListener("pageLoaded", this.handlePageLoad.bind(this), false)
|
||||
}
|
||||
|
||||
handlePageLoad (e) {
|
||||
this.path = e.detail
|
||||
this.update()
|
||||
}
|
||||
|
||||
update () {
|
||||
let background = backgrounds.get(this.path) || backgrounds.get("default")
|
||||
document.body.style.background = background;
|
||||
document.body.style.backgroundSize = "cover";
|
||||
}
|
||||
}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
<template>
|
||||
<component :is="tag" @click.capture.stop="call" type="button" :class="[buttonClass, this.promise && 'blink' || '']">
|
||||
<span v-if="promise && runIcon">
|
||||
<i :class="runIcon"></i>
|
||||
</span>
|
||||
<span v-else-if="icon" class="icon is-small">
|
||||
<i :class="icon"></i>
|
||||
</span>
|
||||
<span v-if="$slots.default"><slot name="default"/></span>
|
||||
</component>
|
||||
</template>
|
||||
<script>
|
||||
import Model from '../model'
|
||||
|
||||
/**
|
||||
* Button that can be used to call API requests on provided url
|
||||
*/
|
||||
export default {
|
||||
emit: ['start', 'done'],
|
||||
|
||||
props: {
|
||||
//! Component tag, by default, `button`
|
||||
tag: { type: String, default: 'a'},
|
||||
//! Button icon
|
||||
icon: String,
|
||||
//! Data or model instance to send
|
||||
data: Object,
|
||||
//! Action method, by default, `POST`
|
||||
method: { type: String, default: 'POST'},
|
||||
//! If provided open confirmation box before proceeding
|
||||
confirm: { type: String, default: ''},
|
||||
//! Action url
|
||||
url: String,
|
||||
//! Extra request options
|
||||
fetchOptions: {type: Object, default: () => {return {}}},
|
||||
//! Component class while action is running
|
||||
runClass: String,
|
||||
//! Icon class while action is running
|
||||
runIcon: String,
|
||||
},
|
||||
|
||||
computed: {
|
||||
//! Input data as model instance
|
||||
item() {
|
||||
return this.data instanceof Model ? this.data
|
||||
: new Model(this.data)
|
||||
},
|
||||
|
||||
//! Computed button class
|
||||
buttonClass() {
|
||||
return this.promise ? this.runClass : ''
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
promise: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
call() {
|
||||
if(this.promise || !this.url)
|
||||
return
|
||||
if(this.confirm && !confirm(this.confirm))
|
||||
return
|
||||
|
||||
const options = Model.getOptions({
|
||||
...this.fetchOptions,
|
||||
method: this.method,
|
||||
body: JSON.stringify(this.item.data),
|
||||
})
|
||||
this.promise = fetch(this.url, options).then(data => data.text()).then(data => {
|
||||
data = data && JSON.parse(data) || null
|
||||
this.promise = null;
|
||||
this.$emit('done', data)
|
||||
return data
|
||||
}, data => { this.promise = null; return data })
|
||||
return this.promise
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,293 +0,0 @@
|
|||
<template>
|
||||
<div class="control">
|
||||
<input type="hidden" :name="name" :value="selectedValue"
|
||||
@change="$emit('change', $event)"/>
|
||||
<input type="text" ref="input" class="input is-fullwidth" :class="inputClass"
|
||||
v-show="!button || !selected"
|
||||
v-model="inputValue"
|
||||
:placeholder="placeholder"
|
||||
@keydown.capture="onKeyDown"
|
||||
@keyup="onKeyUp($event); $emit('keyup', $event)"
|
||||
@keydown="$emit('keydown', $event)"
|
||||
@keypress="$emit('keypress', $event)"
|
||||
@focus="onInputFocus" @blur="onBlur" />
|
||||
<a v-if="selected && button"
|
||||
class="button is-normal is-fullwidth has-text-left is-inline-block overflow-hidden"
|
||||
@click="select(-1, false, true)">
|
||||
<span class="icon is-small ml-1">
|
||||
<i class="fa fa-pen"></i>
|
||||
</span>
|
||||
<span class="is-inline-block" v-if="selected">
|
||||
<slot name="button" :index="selectedIndex" :item="selected"
|
||||
:value-field="valueField" :labelField="labelField">
|
||||
{{ selectedLabel }}
|
||||
</slot>
|
||||
</span>
|
||||
</a>
|
||||
<div :class="dropdownClass">
|
||||
<div class="dropdown-menu is-fullwidth">
|
||||
<div class="dropdown-content" style="overflow: hidden">
|
||||
<span v-for="(item, index) in items" :key="item.id"
|
||||
:data-autocomplete-index="index"
|
||||
@click="select(index, false, false)"
|
||||
:class="['dropdown-item', (index == this.cursor) ? 'is-active':'']"
|
||||
tabindex="-1">
|
||||
<slot name="item" :index="index" :item="item" :value-field="valueField"
|
||||
:labelField="labelField">
|
||||
{{ getValue(item, labelField) || item }}
|
||||
</slot>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import debounce from 'lodash/debounce'
|
||||
import Model from '../model'
|
||||
|
||||
|
||||
export default {
|
||||
emit: ['change', 'keypress', 'keydown', 'keyup', 'select', 'unselect',
|
||||
'update:modelValue'],
|
||||
|
||||
props: {
|
||||
//! Search URL (where `${query}` is replaced by search term)
|
||||
url: String,
|
||||
//! Extra GET url parameters
|
||||
urlParams: Object,
|
||||
//! Items' model
|
||||
model: Function,
|
||||
//! Input tag class
|
||||
inputClass: Array,
|
||||
//! input text placeholder
|
||||
placeholder: Object,
|
||||
//! input form field name
|
||||
name: String,
|
||||
//! Field on items to use as label
|
||||
labelField: String,
|
||||
//! Field on selected item to get selectedValue from, if any
|
||||
valueField: {type: String, default: null},
|
||||
count: {type: Number, count: 10},
|
||||
//! If true, show button when value has been selected
|
||||
button: Boolean,
|
||||
//! If true, value must come from a selection
|
||||
mustExist: {type: Boolean, default: false},
|
||||
//! Minimum input size before fetching
|
||||
minFetchLength: {type: Number, default: 3},
|
||||
modelValue: {default: ''},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
inputValue: this.modelValue || '',
|
||||
query: '',
|
||||
items: [],
|
||||
selectedIndex: -1,
|
||||
cursor: -1,
|
||||
promise: null,
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
modelValue(value) {
|
||||
this.inputValue = value
|
||||
},
|
||||
|
||||
inputValue(value, old) {
|
||||
if(value != old && value != this.modelValue) {
|
||||
this.$emit('update:modelValue', value)
|
||||
this.$emit('change', {target: this.$refs.input})
|
||||
}
|
||||
if(this.selectedLabel != value)
|
||||
this.selectedIndex = -1
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
fullUrl() {
|
||||
if(!this.urlParams)
|
||||
return this.url
|
||||
|
||||
const url = new URL(this.url, window.location.origin)
|
||||
const params = new URLSearchParams(url.searchParams)
|
||||
|
||||
for(var key in this.urlParams)
|
||||
params.set(key, this.urlParams[key])
|
||||
const join = this.url.indexOf("?") >= 0 ? "&" : "?"
|
||||
url.search = params.toString()
|
||||
return url.href
|
||||
},
|
||||
|
||||
isFetching() { return !!this.promise },
|
||||
|
||||
selected() {
|
||||
let index = this.selectedIndex
|
||||
if(index<0)
|
||||
return null
|
||||
index = Math.min(index, this.items.length-1)
|
||||
return this.items[index]
|
||||
},
|
||||
|
||||
selectedValue() {
|
||||
let value = this.itemValue(this.selected)
|
||||
if(!value && !this.mustExist)
|
||||
value = this.inputValue
|
||||
return value
|
||||
},
|
||||
|
||||
selectedLabel() {
|
||||
return this.itemLabel(this.selected)
|
||||
},
|
||||
|
||||
dropdownClass() {
|
||||
var active = this.cursor > -1 && this.items.length;
|
||||
if(active && this.items.length == 1 &&
|
||||
this.itemValue(this.items[0]) == this.inputValue)
|
||||
active = false
|
||||
return ['dropdown is-fullwidth', active ? 'is-active':'']
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
reset() {
|
||||
this.inputValue = ""
|
||||
this.selectedIndex = -1
|
||||
this.items = []
|
||||
},
|
||||
|
||||
// TODO: move to utils/data
|
||||
getValue(data, path=null) {
|
||||
if(!data)
|
||||
return null
|
||||
if(!path)
|
||||
return data
|
||||
|
||||
const paths = path.split('.')
|
||||
for(const key of paths) {
|
||||
if(key in data)
|
||||
data = data[key]
|
||||
else return null;
|
||||
}
|
||||
return data
|
||||
},
|
||||
|
||||
itemValue(item) {
|
||||
return this.valueField ? this.getValue(item, this.valueField) : item;
|
||||
},
|
||||
|
||||
itemLabel(item) {
|
||||
return this.labelField ? this.getValue(item, this.labelField) : item;
|
||||
},
|
||||
|
||||
hide() {
|
||||
this.cursor = -1;
|
||||
this.selectedIndex = -1;
|
||||
},
|
||||
|
||||
move(index=-1, relative=false) {
|
||||
if(relative)
|
||||
index += this.cursor
|
||||
this.cursor = Math.max(-1, Math.min(index, this.items.length-1))
|
||||
},
|
||||
|
||||
select(index=-1, relative=false, active=null) {
|
||||
if(relative)
|
||||
index += this.selectedIndex
|
||||
else if(index == this.selectedIndex)
|
||||
return
|
||||
|
||||
this.selectedIndex = Math.max(-1, Math.min(index, this.items.length-1))
|
||||
if(index >= 0) {
|
||||
this.inputValue = this.selectedLabel
|
||||
this.$refs.input.focus()
|
||||
}
|
||||
if(this.selectedIndex < 0)
|
||||
this.$emit('unselect')
|
||||
else
|
||||
this.$emit('select', index, this.selected, this.selectedValue)
|
||||
|
||||
if(active!==null)
|
||||
active && this.move(0) || this.move(-1)
|
||||
},
|
||||
|
||||
onInputFocus() {
|
||||
this.cursor < 0 && this.move(0)
|
||||
},
|
||||
|
||||
onBlur(event) {
|
||||
if(!this.items.length)
|
||||
return
|
||||
|
||||
var index = event.relatedTarget && Math.floor(event.relatedTarget.dataset.autocompleteIndex);
|
||||
if(index !== undefined && index !== null)
|
||||
this.select(index, false, false)
|
||||
this.cursor = -1;
|
||||
},
|
||||
|
||||
onKeyDown(event) {
|
||||
if(event.ctrlKey || event.altKey || event.metaKey)
|
||||
return
|
||||
switch(event.keyCode) {
|
||||
case 13: this.select(this.cursor, false, false)
|
||||
break
|
||||
case 27: this.hide(); this.select()
|
||||
break
|
||||
case 38: this.move(-1, true)
|
||||
break
|
||||
case 40: this.move(1, true)
|
||||
break
|
||||
default: return
|
||||
}
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
},
|
||||
|
||||
onKeyUp(event) {
|
||||
if(event.ctrlKey || event.altKey || event.metaKey)
|
||||
return
|
||||
|
||||
const value = event.target.value
|
||||
if(value === this.query)
|
||||
return
|
||||
|
||||
this.inputValue = value;
|
||||
if(!value)
|
||||
return this.selected && this.select(-1)
|
||||
if(!this.minFetchLength || value.length >= this.minFetchLength)
|
||||
this.fetch(value)
|
||||
},
|
||||
|
||||
fetch(query) {
|
||||
if(!query || this.promise)
|
||||
return
|
||||
|
||||
this.query = query
|
||||
var url = this.fullUrl.replace('${query}', query).replace('%24%7Bquery%7D', query)
|
||||
var promise = this.model ? this.model.fetch(url, {many:true})
|
||||
: fetch(url, Model.getOptions()).then(d => d.json())
|
||||
|
||||
promise = promise.then(items => {
|
||||
if(items.results)
|
||||
items = items.results
|
||||
this.items = items.filter((i) => i) || []
|
||||
this.promise = null;
|
||||
this.move(0)
|
||||
return items
|
||||
}, data => {this.promise = null; Promise.reject(data)})
|
||||
this.promise = promise
|
||||
return promise
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const form = this.$el.closest('form')
|
||||
form && form.addEventListener('reset', () => {
|
||||
this.inputValue = this.value;
|
||||
this.select(-1)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -1,242 +0,0 @@
|
|||
<template>
|
||||
<section class="a-carousel">
|
||||
<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="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="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>
|
||||
</section>
|
||||
</template>
|
||||
<style scoped>
|
||||
.a-carousel {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.a-carousel-viewport {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.a-carousel-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: left;
|
||||
}
|
||||
|
||||
.a-carousel-container > * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.a-carousel-bullets-container {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.a-carousel-bullets-container .bullet {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.a-carousel-bullets-container .left {
|
||||
min-width: 2rem;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.a-carousel-bullets-container .right {
|
||||
min-width: 2rem;
|
||||
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 {
|
||||
viewport: ref(null),
|
||||
container: ref(null),
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
cards: [],
|
||||
index: 0,
|
||||
refresh_: 0,
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
cardSelector: {type: String, default: ''},
|
||||
containerClass: {type: String, default: ''},
|
||||
buttonClass: {type: String, default: 'button'},
|
||||
leftButtonIcon: {type: String, default: "fas fa-chevron-left"},
|
||||
rightButtonIcon: {type: String, default: "fas fa-chevron-right"},
|
||||
},
|
||||
|
||||
computed: {
|
||||
card() { return this.cards()[this.index] },
|
||||
|
||||
showPrev() {
|
||||
return this.index > 0
|
||||
},
|
||||
|
||||
showNext() {
|
||||
if(!this.cards || this.cards.length <= 1)
|
||||
return false
|
||||
|
||||
let last = this.bullets[this.bullets.length-1]
|
||||
return this.index != last
|
||||
},
|
||||
|
||||
bullets() {
|
||||
if(!this.cards || !this.$refs.viewport)
|
||||
return []
|
||||
|
||||
let contOff = new Offset(this.$refs.container)
|
||||
let viewMax = new Offset(this.$refs.viewport).size
|
||||
let bullets = []
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
return bullets
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
getCards() {
|
||||
if(!this.$refs.container)
|
||||
return []
|
||||
let nodes = (!this.cardSelector) ?
|
||||
[...this.$refs.container.children] :
|
||||
[...this.$refs.container.querySelectorAll(this.cardSelector)]
|
||||
return nodes.map((el, index) => new Card(el, index))
|
||||
},
|
||||
|
||||
select(index, relative=false) {
|
||||
if(relative)
|
||||
index = this.index + index
|
||||
|
||||
index = Math.min(index, this.cards.length)
|
||||
index = Math.max(index, 0)
|
||||
let card = this.cards[index]
|
||||
if(!card)
|
||||
return null;
|
||||
|
||||
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 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)
|
||||
this.refresh_++
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
mounted() {
|
||||
this.observers = [
|
||||
new MutationObserver(() => this.refresh()),
|
||||
new ResizeObserver(() => this.refresh())
|
||||
]
|
||||
this.observers[0].observe(this.$refs.container, {"childList": true})
|
||||
this.observers[1].observe(this.$refs.container)
|
||||
this.refresh()
|
||||
},
|
||||
|
||||
unmounted() {
|
||||
for(var observer of this.observers)
|
||||
observer.disconnect()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<template>
|
||||
<component :is="tag" :class="[itemClass, active ? activeClass : '']">
|
||||
<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="buttonIcon"></i>
|
||||
<i v-if="active" :class="buttonIconClose"></i>
|
||||
</span>
|
||||
</component>
|
||||
</slot>
|
||||
<div :class="contentClass" v-show="active">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</component>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: this.open,
|
||||
}
|
||||
},
|
||||
|
||||
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"},
|
||||
buttonIcon: { type: String, default:"fa fa-angle-down"},
|
||||
buttonIconClose: { type: String, default:"fa fa-angle-up"},
|
||||
contentClass: String,
|
||||
open: {type: Boolean, default: false},
|
||||
noButton: {type: Boolean, default: false},
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggle() {
|
||||
this.active = !this.active
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
<template>
|
||||
<input ref="input" type="hidden" :name="name" :value="value"/>
|
||||
<div class="">
|
||||
<template v-for="group, index in menu" :key="index">
|
||||
<div class="button-group d-inline-block mr-3">
|
||||
<template v-for="info, index in group" :key="index">
|
||||
<button type="button" class="button square smaller" :title="info.label" @click="edit(info.action, ...(info.args || []))">
|
||||
<span class="icon"><i :class="info.icon"/></span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<div class="button-group d-inline-block">
|
||||
<div class="dropdown is-hoverable">
|
||||
<div class="dropdown-trigger">
|
||||
<button type="button" class="button square smaller">
|
||||
<span class="icon"><i class="fa fa-link"/></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-menu" style="min-width: 20rem; margin-top: -0.2rem;">
|
||||
<div class="dropdown-content p-3">
|
||||
<div class="field">
|
||||
<label class="label">Lien</label>
|
||||
<div class="control">
|
||||
<input ref="link-url" type="text" class="input" placeholder="lien"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="has-text-right">
|
||||
<button type="button" class="button secondary"
|
||||
@click="edit('setLink', {href:$refs['link-url'].value})">
|
||||
Ajouter le lien
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="button square smaller" title="Remove link" @click="edit('unsetLink')">
|
||||
<span class="icon"><i class="fa fa-link-slash"/></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<editor-content class="editor" v-if="editor" :editor="editor" />
|
||||
</template>
|
||||
<style>
|
||||
.editor .tiptap {
|
||||
border: 1px black solid;
|
||||
padding: 0.3em;
|
||||
}
|
||||
.editor .tiptap ul, .editor .tiptap ol {
|
||||
margin-left: 1.3em;
|
||||
}
|
||||
|
||||
.editor .tiptap ul { list-style: disc }
|
||||
</style>
|
||||
<script>
|
||||
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||||
import StarterKit from '@tiptap/starter-kit'
|
||||
import Underline from '@tiptap/extension-underline'
|
||||
import Link from '@tiptap/extension-link'
|
||||
|
||||
export default {
|
||||
components: {EditorContent},
|
||||
props: {
|
||||
config: {type: Object, default: (() => {})},
|
||||
//! Input field name.
|
||||
name: String,
|
||||
//! Initial input value
|
||||
initial: String,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
menu: [
|
||||
[
|
||||
{label: "Bold", icon: "fa fa-bold", action: "toggleBold" },
|
||||
{label: "Italic", icon: "fa fa-italic", action: "toggleItalic" },
|
||||
{label: "Underline", icon: "fa fa-underline", action: "toggleUnderline" },
|
||||
{label: "Strike", icon: "fa fa-strikethrough", action: "toggleStrike" },
|
||||
],[
|
||||
{label: "List", icon: "fa fa-list", action: "toggleBulletList" },
|
||||
{label: "Ordered List", icon: "fa fa-list-ol", action: "toggleOrderedList" },
|
||||
],[
|
||||
{label: "Heading 1", icon: "fa fa-h", action: "setHeading", args: [{level:3}] },
|
||||
{label: "Heading 2", icon: "fa fa-h smaller", action: "toggleHeading", args: [{level:4}] },
|
||||
// {label: "Heading 3", icon: "fa fa-h small", action: "toggleHeading", args: [{level:5}] },
|
||||
],
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
value() { return this.editor && this.editor.getHTML() },
|
||||
},
|
||||
|
||||
methods: {
|
||||
chain(action, ...args) {
|
||||
let chain = this.editor.chain().focus()
|
||||
return chain[action](...args)
|
||||
},
|
||||
|
||||
edit(action, ...args) {
|
||||
this.chain(action, ...args).run()
|
||||
},
|
||||
|
||||
setLink() {
|
||||
this.edit("setLink", {href: this.$refs['link-url']})
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
content: this.initial || "",
|
||||
injectCss: false,
|
||||
extensions: [
|
||||
StarterKit.configure({
|
||||
heading: {
|
||||
levels: [3, 4, 5]
|
||||
}
|
||||
}),
|
||||
Underline,
|
||||
Link.configure({autolink: true}),
|
||||
],
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
beforeUnmount() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<template>
|
||||
<slot :page="page" :podcasts="podcasts"></slot>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Set} from '../model.js';
|
||||
import Sound from '../sound.js';
|
||||
import APage from './APage.vue';
|
||||
|
||||
export default {
|
||||
extends: APage,
|
||||
|
||||
data() {
|
||||
return {
|
||||
podcasts: new Set(Sound, {items:this.page.podcasts}),
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
<template>
|
||||
<div ref="list" class="a-select-file-list">
|
||||
<form ref="form" class="flex-column" v-if="state == STATE.DEFAULT">
|
||||
<slot name="form"></slot>
|
||||
<div class="field is-horizontal">
|
||||
<label class="label">{{ label }}</label>
|
||||
<input type="file" ref="uploadFile" :name="fieldName" @change="onFileChange"/>
|
||||
</div>
|
||||
<div class="flex-row align-right" v-if="submitLabel">
|
||||
<button type="button" class="button small" @click="submit">
|
||||
{{ submitLabel }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="flex-column" v-else>
|
||||
<slot name="preview" :fileUrl="fileUrl" :file="file" :loaded="loaded" :total="total"></slot>
|
||||
<div class="flex-row">
|
||||
<progress :max="total" :value="loaded"/>
|
||||
<button type="button" class="button small square ml-2" @click="abort">
|
||||
<span class="icon small">
|
||||
<i class="fa fa-close"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {getCsrf} from "../model.js"
|
||||
|
||||
export default {
|
||||
emit: ["fileChange", "load", "abort", "error"],
|
||||
|
||||
props: {
|
||||
url: { type: String },
|
||||
fieldName: { type: String, default: "file" },
|
||||
label: { type: String, default: "Select a file" },
|
||||
submitLabel: { type: String, default: "Upload" },
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
STATE: {
|
||||
DEFAULT: 0,
|
||||
UPLOADING: 1,
|
||||
},
|
||||
state: 0,
|
||||
upload: {},
|
||||
file: null,
|
||||
fileUrl: null,
|
||||
total: 0,
|
||||
loaded: 0,
|
||||
request: null,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
abort() {
|
||||
this.request && this.request.abort()
|
||||
},
|
||||
|
||||
onFileChange() {
|
||||
const [file] = this.$refs.uploadFile.files
|
||||
if(!file)
|
||||
return
|
||||
this._setUploadFile(file)
|
||||
this.$emit("fileChange", {upload: this, file: this.file, fileUrl: this.fileUrl})
|
||||
},
|
||||
|
||||
submit() {
|
||||
const req = new XMLHttpRequest()
|
||||
req.open("POST", this.url)
|
||||
req.upload.addEventListener("progress", (e) => this.onUploadProgress(e))
|
||||
req.addEventListener("load", (e) => this.onUploadDone(e, 'load'))
|
||||
req.addEventListener("abort", (e) => this.onUploadDone(e, 'abort'))
|
||||
req.addEventListener("error", (e) => this.onUploadDone(e, 'error'))
|
||||
|
||||
const formData = new FormData(this.$refs.form);
|
||||
formData.append('csrfmiddlewaretoken', getCsrf())
|
||||
req.send(formData)
|
||||
|
||||
this._resetUpload(this.STATE.UPLOADING, false, req)
|
||||
},
|
||||
|
||||
onUploadProgress(event) {
|
||||
this.loaded = event.loaded
|
||||
this.total = event.total
|
||||
},
|
||||
|
||||
onUploadDone(event, eventName) {
|
||||
this.$emit(eventName, event)
|
||||
this._resetUpload(this.STATE.DEFAULT, true)
|
||||
},
|
||||
|
||||
_setUploadFile(file) {
|
||||
this.file = file
|
||||
this.fileURL = file && URL.createObjectURL(file)
|
||||
},
|
||||
|
||||
_resetUpload(state, resetFile=false, request=null) {
|
||||
this.state = state
|
||||
this.loaded = 0
|
||||
this.total = 0
|
||||
this.request = request
|
||||
if(resetFile)
|
||||
this.file = null
|
||||
}
|
||||
|
||||
},}
|
||||
</script>
|
||||
|
|
@ -1,193 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<input type="hidden" :name="_prefix + 'TOTAL_FORMS'" :value="items.length || 0"/>
|
||||
<template v-for="(value,name) in formData.management" v-bind:key="name">
|
||||
<input type="hidden" :name="_prefix + name.toUpperCase()"
|
||||
:value="value"/>
|
||||
</template>
|
||||
|
||||
<a-rows ref="rows" :set="set" :context="this"
|
||||
:columns="visibleFields" :columnsOrderable="columnsOrderable"
|
||||
:orderable="orderable" @move="moveItem" @colmove="onColumnMove"
|
||||
@cell="e => $emit('cell', e)">
|
||||
|
||||
<template #header-head>
|
||||
<template v-if="orderable">
|
||||
<th style="max-width:2em" :title="orderField.label"
|
||||
:aria-label="orderField.label"
|
||||
:aria-description="orderField.help || ''">
|
||||
<span class="icon">
|
||||
<i class="fa fa-arrow-down-1-9"></i>
|
||||
</span>
|
||||
</th>
|
||||
<slot name="rows-header-head"></slot>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template #row-head="data">
|
||||
<input v-if="orderable" type="hidden"
|
||||
:name="_prefix + data.row + '-' + orderBy"
|
||||
:value="data.row"/>
|
||||
<input type="hidden" :name="_prefix + data.row + '-id'"
|
||||
:value="data.item ? data.item.id : ''"/>
|
||||
|
||||
<template v-for="field of hiddenFields" v-bind:key="field.name">
|
||||
<input type="hidden"
|
||||
v-if="!(field.name in ['id', orderBy])"
|
||||
:name="_prefix + data.row + '-' + field.name"
|
||||
:value="field.value in [null, undefined] ? data.item.data[name] : field.value"/>
|
||||
</template>
|
||||
|
||||
<slot name="row-head" v-bind="data">
|
||||
<td v-if="orderable">{{ data.row+1 }}</td>
|
||||
</slot>
|
||||
</template>
|
||||
|
||||
<template v-for="(field,slot) of fieldSlots" v-bind:key="field.name"
|
||||
v-slot:[slot]="data">
|
||||
<slot :name="slot" v-bind="data" :field="field" :input-name="_prefix + data.cell.row + '-' + field.name">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<slot :name="'control-' + field.name" v-bind="data" :field="field" :input-name="_prefix + data.cell.row + '-' + field.name"/>
|
||||
</div>
|
||||
<p v-for="[error,index] in data.item.error(field.name)" class="help is-danger" v-bind:key="index">
|
||||
{{ error }}
|
||||
</p>
|
||||
</div>
|
||||
</slot>
|
||||
</template>
|
||||
|
||||
<template #row-tail="data">
|
||||
<slot v-if="$slots['row-tail']" name="row-tail" v-bind="data"/>
|
||||
<td class="align-right pr-0">
|
||||
<button type="button" class="button square"
|
||||
@click.stop="removeItem(data.row, data.item)"
|
||||
:title="labels.remove_item"
|
||||
:aria-label="labels.remove_item">
|
||||
<span class="icon"><i class="fa fa-trash" /></span>
|
||||
</button>
|
||||
</td>
|
||||
</template>
|
||||
</a-rows>
|
||||
<div class="a-formset-footer flex-row">
|
||||
<div class="flex-grow-1 flex-row">
|
||||
<slot name="footer"/>
|
||||
</div>
|
||||
<div class="flex-grow-1 align-right">
|
||||
<button type="button" class="button square is-warning p-2"
|
||||
@click="reset()"
|
||||
:title="labels.discard_changes"
|
||||
:aria-label="labels.discard_changes"
|
||||
>
|
||||
<span class="icon"><i class="fa fa-rotate" /></span>
|
||||
</button>
|
||||
<button type="button" class="button square is-primary p-2"
|
||||
@click="onActionAdd"
|
||||
:title="labels.add_item"
|
||||
:aria-label="labels.add_item"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fa fa-plus"/></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {cloneDeep} from 'lodash'
|
||||
import Model, {Set} from '../model'
|
||||
|
||||
import ARows from './ARows'
|
||||
|
||||
export default {
|
||||
emit: ['cell', 'move', 'colmove', 'load'],
|
||||
components: {ARows},
|
||||
|
||||
props: {
|
||||
labels: Object,
|
||||
|
||||
//! If provided call this function instead of adding an item to rows on "+" button click.
|
||||
actionAdd: Function,
|
||||
|
||||
//! If True, columns can be reordered
|
||||
columnsOrderable: Boolean,
|
||||
//! Field name used for ordering
|
||||
orderBy: String,
|
||||
|
||||
//! Formset data as returned by get_formset_data
|
||||
formData: Object,
|
||||
//! Model class used for item's set
|
||||
model: {type: Function, default: Model},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
set: new Set(Model),
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
// ---- fields
|
||||
_prefix() { return this.formData.prefix ? this.formData.prefix + '-' : '' },
|
||||
fields() { return this.formData.fields },
|
||||
orderField() { return this.orderBy && this.fields.find(f => f.name == this.orderBy) },
|
||||
orderable() { return !!this.orderField },
|
||||
|
||||
hiddenFields() { return this.fields.filter(f => f.hidden && !(this.orderable && f == this.orderField)) },
|
||||
visibleFields() { return this.fields.filter(f => !f.hidden) },
|
||||
|
||||
fieldSlots() { return this.visibleFields.reduce(
|
||||
(slots, f) => ({...slots, ['row-' + f.name]: f}),
|
||||
{}
|
||||
)},
|
||||
|
||||
items() { return this.set.items },
|
||||
rows() { return this.$refs.rows },
|
||||
},
|
||||
|
||||
methods: {
|
||||
onCellEvent(event) { this.$emit('cell', event) },
|
||||
onColumnMove(event) { this.$emit('colmove', event) },
|
||||
onActionAdd() {
|
||||
if(this.actionAdd)
|
||||
return this.actionAdd(this)
|
||||
this.set.push()
|
||||
},
|
||||
|
||||
moveItem(event) {
|
||||
const {from, to} = event
|
||||
const set_ = event.set || this.set
|
||||
set_.move(from, to);
|
||||
this.$emit('move', {...event, seŧ: set_})
|
||||
},
|
||||
|
||||
removeItem(row) {
|
||||
const item = this.items[row]
|
||||
if(item.id) {
|
||||
// TODO
|
||||
}
|
||||
else {
|
||||
this.items.splice(row,1)
|
||||
}
|
||||
},
|
||||
|
||||
//! Load items into set
|
||||
load(items=[], reset=false) {
|
||||
if(reset)
|
||||
this.set.items = []
|
||||
for(var item of items)
|
||||
this.set.push(cloneDeep(item))
|
||||
this.$emit('load', items)
|
||||
},
|
||||
|
||||
//! Reset forms to initials
|
||||
reset() {
|
||||
this.load(this.formData?.initials || [], true)
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.reset()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,105 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- FIXME: header and footer should be inside list tags -->
|
||||
<slot name="header"></slot>
|
||||
<component :is="listTag" :class="listClass">
|
||||
<template v-for="(item,index) in items" :key="index">
|
||||
<component :is="itemTag" :class="itemClass" @click="select(index)"
|
||||
:draggable="orderable" :data-index="index"
|
||||
@dragstart="onDragStart" @dragover="onDragOver" @drop="onDrop">
|
||||
<slot name="item" :selected="index == selectedIndex" :set="set" :index="index" :item="item"></slot>
|
||||
</component>
|
||||
</template>
|
||||
</component>
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
emits: ['select', 'unselect', 'move', 'remove'],
|
||||
data() {
|
||||
return {
|
||||
selectedIndex: this.defaultIndex,
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
listClass: String,
|
||||
itemClass: String,
|
||||
defaultIndex: { type: Number, default: -1},
|
||||
set: Object,
|
||||
orderable: { type: Boolean, default: false },
|
||||
itemTag: { default: 'li' },
|
||||
listTag: { default: 'ul' },
|
||||
},
|
||||
|
||||
computed: {
|
||||
model() { return this.set.model },
|
||||
items() { return this.set.items },
|
||||
length() { return this.set.length },
|
||||
|
||||
selected() {
|
||||
return this.selectedIndex > -1 && this.items.length > this.selectedIndex > -1
|
||||
? this.items[this.selectedIndex] : null;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
get(index) { return this.set.get(index) },
|
||||
find(pred) { return this.set.find(pred) },
|
||||
findIndex(pred) { return this.set.findIndex(pred) },
|
||||
|
||||
remove(index, select=false) {
|
||||
const item = this.set.get(index)
|
||||
if(!item)
|
||||
return
|
||||
|
||||
this.set.remove(index);
|
||||
if(index < this.selectedIndex)
|
||||
this.selectedIndex--;
|
||||
if(select && this.selectedIndex == index)
|
||||
this.select(index)
|
||||
this.$emit('remove', {index, item, set: this.set})
|
||||
},
|
||||
|
||||
select(index) {
|
||||
this.selectedIndex = index > -1 && this.items.length ? index % this.items.length : -1;
|
||||
this.$emit('select', { item: this.selected, index: this.selectedIndex });
|
||||
return this.selectedIndex;
|
||||
},
|
||||
|
||||
unselect() {
|
||||
this.$emit('unselect', { item: this.selected, index: this.selectedIndex});
|
||||
this.selectedIndex = -1;
|
||||
},
|
||||
|
||||
onDragStart(ev) {
|
||||
const dataset = ev.target.dataset;
|
||||
const data = `row:${dataset.index}`
|
||||
ev.dataTransfer.setData("text/cell", data)
|
||||
ev.dataTransfer.dropEffect = 'move'
|
||||
},
|
||||
|
||||
onDragOver(ev) {
|
||||
ev.preventDefault()
|
||||
ev.dataTransfer.dropEffect = 'move'
|
||||
},
|
||||
|
||||
onDrop(ev) {
|
||||
const data = ev.dataTransfer.getData("text/cell")
|
||||
if(!data || !data.startsWith('row:'))
|
||||
return
|
||||
|
||||
ev.preventDefault()
|
||||
const from = Number(data.slice(4))
|
||||
const target = ev.target.tagName == this.itemTag ? ev.target
|
||||
: ev.target.closest(this.itemTag)
|
||||
this.$emit('move', {
|
||||
from, target,
|
||||
to: Number(target.dataset.index),
|
||||
set: this.set,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
<template>
|
||||
<div class="a-m2m-edit">
|
||||
<table class="table is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<slot name="items-title"></slot>
|
||||
</th>
|
||||
<th style="width: 1rem">
|
||||
<span class="icon">
|
||||
<i class="fa fa-trash"/>
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="item of items" :key="item.id">
|
||||
<tr :class="[item.created && 'has-text-info', item.deleted && 'has-text-danger']">
|
||||
<td>
|
||||
<slot name="item" :item="item">
|
||||
{{ item.data }}
|
||||
</slot>
|
||||
</td>
|
||||
<td class="align-center">
|
||||
<input type="checkbox" class="checkbox" @change="item.deleted = $event.target.checked">
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
<div>
|
||||
<label>
|
||||
<span class="icon">
|
||||
<i class="fa fa-plus"/>
|
||||
</span>
|
||||
Add
|
||||
</label>
|
||||
<a-autocomplete ref="autocomplete" v-bind="autocomplete"
|
||||
@select="onSelect">
|
||||
<template #item="{item}">
|
||||
<slot name="autocomplete-item" :item="item">{{ item }}</slot>
|
||||
</template>
|
||||
</a-autocomplete>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Model, { Set } from "../model.js"
|
||||
import AAutocomplete from "./AAutocomplete.vue"
|
||||
|
||||
export default {
|
||||
components: {AAutocomplete},
|
||||
props: {
|
||||
model: {type: Function, default: Model },
|
||||
// List url
|
||||
url: String,
|
||||
// POST url
|
||||
commitUrl: String,
|
||||
// v-bind to autocomplete search box
|
||||
autocomplete: {type: Object },
|
||||
|
||||
source_id: Number,
|
||||
source_field: String,
|
||||
target_field: String,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
set: new Set(this.model, {url: this.url, unique: true}),
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
items() { return this.set?.items || [] },
|
||||
initials() {
|
||||
let obj = {}
|
||||
obj[this.source_id_attr] = this.source_id
|
||||
return obj
|
||||
},
|
||||
|
||||
source_id_attr() { return this.source_field + "_id" },
|
||||
target_id_attr() { return this.target_field + "_id" },
|
||||
target_ids() { return this.set?.items.map(i => i.data[this.target_id_attr]) },
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSelect(index, item, value) {
|
||||
if(this.target_ids.indexOf(item.id) != -1)
|
||||
return
|
||||
|
||||
let obj = {...this.initials}
|
||||
obj[this.target_field] = {...item}
|
||||
obj[this.target_id_attr] = item.id
|
||||
this.set.push(obj)
|
||||
this.$refs.autocomplete.reset()
|
||||
},
|
||||
|
||||
save() {
|
||||
this.set.commit(this.commitUrl, {
|
||||
fields: [...Object.keys(this.initials), this.target_id_attr]
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.set.fetch()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
<template>
|
||||
<section :class="['modal', active && 'is-active' || '']">
|
||||
<div class="modal-background" @click="close"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<div class="modal-card-title">
|
||||
<slot name="title" :item="item">{{ title }}</slot>
|
||||
</div>
|
||||
<slot name="bar" :item="item"></slot>
|
||||
<button type="button" class="delete square" aria-label="close" @click="close">
|
||||
<span class="icon">
|
||||
<i class="fa fa-close"></i>
|
||||
</span>
|
||||
</button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<slot name="default" :item="item"></slot>
|
||||
</section>
|
||||
<div class="modal-card-foot align-right">
|
||||
<slot name="footer" :item="item" :close="close"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: { type: String, default: ""},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
///! If true, modal is open
|
||||
active: false,
|
||||
///! Item or data passed down to slots.
|
||||
item: null,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
///! Open modal dialog. Set provided `item` to dialog's one.
|
||||
open(item=null) {
|
||||
this.active = true
|
||||
this.item = item
|
||||
},
|
||||
///! Close modal and reset item to null.
|
||||
close() {
|
||||
this.active = false
|
||||
this.item = null
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
props: {
|
||||
page: Object,
|
||||
title: String,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,283 +0,0 @@
|
|||
<template>
|
||||
<div class="a-player">
|
||||
<div :class="['a-player-panels', panel ? 'is-open' : '']">
|
||||
<template v-for="(info, key) in playlists" v-bind:key="key">
|
||||
<APlaylist
|
||||
:ref="key" class="a-player-panel a-playlist"
|
||||
v-show="panel == key && sets[key].length"
|
||||
:actions="['page', key != 'pin' && 'pin' || '']"
|
||||
:editable="true" :player="self" :set="sets[key]"
|
||||
@select="togglePlay(key, $event.index)"
|
||||
listClass="menu-list" itemClass="menu-item">
|
||||
<template v-slot:header="">
|
||||
<div class="title is-flex-grow-1">
|
||||
<span class="icon">
|
||||
<i :class="info[1]"></i>
|
||||
</span>
|
||||
{{ info[0] }}
|
||||
</div>
|
||||
<button class="action button no-border">
|
||||
<span class="icon" @click.stop="togglePanel()">
|
||||
<i class="fa fa-close"></i>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
</APlaylist>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="a-player-progress" v-if="loaded && duration">
|
||||
<AProgress v-if="loaded && duration" :value="currentTime" :max="this.duration"
|
||||
:format="displayTime"
|
||||
@select="audio.currentTime = $event"></AProgress>
|
||||
</div>
|
||||
<div class="a-player-bar button-group">
|
||||
<button class="button" @click="togglePlay()"
|
||||
:title="buttonTitle" :aria-label="buttonTitle">
|
||||
<span class="fas fa-pause" v-if="playing"></span>
|
||||
<span class="fas fa-play" v-else></span>
|
||||
</button>
|
||||
<div :class="['a-player-bar-content', loaded && duration ? 'has-progress' : '']">
|
||||
<slot name="content" :loaded="loaded" :live="live" :current="current"></slot>
|
||||
</div>
|
||||
<button class="button has-text-weight-bold" v-if="loaded" @click="play()"
|
||||
title="Live">
|
||||
<span class="icon is-size-6 has-text-danger">
|
||||
<span class="fa fa-circle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<template v-if="sets">
|
||||
<template v-for="(info, key) in playlists" v-bind:key="key">
|
||||
<button :class="playlistButtonClass(key)"
|
||||
@click="togglePanel(key)"
|
||||
v-show="sets[key] && sets[key].length">
|
||||
<span class="is-size-6">{{ sets[key] && sets[key].length }}</span>
|
||||
<span class="icon">
|
||||
<i :class="info[1]"></i>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {reactive} from 'vue'
|
||||
import Live from '../live'
|
||||
import Sound from '../sound'
|
||||
import {Set} from '../model'
|
||||
import APlaylist from './APlaylist'
|
||||
import AProgress from './AProgress'
|
||||
|
||||
|
||||
export const State = {
|
||||
paused: 0,
|
||||
playing: 1,
|
||||
loading: 2,
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { APlaylist, AProgress },
|
||||
|
||||
data() {
|
||||
let audio = new Audio();
|
||||
audio.addEventListener('ended', e => this.onState(e));
|
||||
audio.addEventListener('pause', e => this.onState(e));
|
||||
audio.addEventListener('playing', e => this.onState(e));
|
||||
audio.addEventListener('timeupdate', () => {
|
||||
this.currentTime = this.audio.currentTime;
|
||||
});
|
||||
audio.addEventListener('durationchange', () => {
|
||||
this.duration = Number.isFinite(this.audio.duration) ? this.audio.duration : null;
|
||||
});
|
||||
|
||||
let live = this.liveArgs ? reactive(new Live(this.liveArgs)) : null;
|
||||
live && live.refresh();
|
||||
|
||||
const sets = {}
|
||||
for(const key in this.playlists)
|
||||
sets[key] = Set.storeLoad(Sound, 'playlist.' + key,
|
||||
{max: 30, unique: true})
|
||||
|
||||
return {
|
||||
audio, duration: 0, currentTime: 0, state: State.paused,
|
||||
live,
|
||||
|
||||
/// Loaded item
|
||||
loaded: null,
|
||||
//! Active panel name
|
||||
panel: null,
|
||||
//! current playing playlist name
|
||||
playlistName: null,
|
||||
//! players' playlists' sets
|
||||
sets,
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
buttonTitle: String,
|
||||
liveArgs: Object,
|
||||
///! dict of {'slug': ['Label', 'icon']}
|
||||
playlists: Object,
|
||||
},
|
||||
|
||||
computed: {
|
||||
self() { return this; },
|
||||
paused() { return this.state == State.paused; },
|
||||
playing() { return this.state == State.playing; },
|
||||
loading() { return this.state == State.loading; },
|
||||
|
||||
playlist() {
|
||||
return this.playlistName ? this.$refs[this.playlistName][0] : null;
|
||||
},
|
||||
|
||||
current() {
|
||||
return this.loaded ? this.loaded : this.live && this.live.current;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
displayTime(seconds) {
|
||||
seconds = parseInt(seconds);
|
||||
let s = seconds % 60;
|
||||
seconds = (seconds - s) / 60;
|
||||
let m = seconds % 60;
|
||||
let h = (seconds - m) / 60;
|
||||
|
||||
let [ss,mm,hh] = [s.toString().padStart(2, '0'),
|
||||
m.toString().padStart(2, '0'),
|
||||
h.toString().padStart(2, '0')];
|
||||
return h ? `${hh}:${mm}:${ss}` : `${mm}:${ss}`;
|
||||
},
|
||||
|
||||
playlistButtonClass(name) {
|
||||
let set = this.sets[name];
|
||||
return (set ? (set.length ? "" : "has-text-grey-light ")
|
||||
+ (this.panel == name ? "open"
|
||||
: this.playlistName == name ? 'active' : '') : '')
|
||||
+ " button";
|
||||
},
|
||||
|
||||
/// Show/hide panel
|
||||
togglePanel(panel) { this.panel = this.panel == panel ? null : panel },
|
||||
/// Return True if item is loaded
|
||||
isLoaded(item) { return this.loaded && this.loaded.id == item.id },
|
||||
/// Return True if item is loaded
|
||||
isPlaying(item) { return this.isLoaded(item) && !this.paused },
|
||||
|
||||
_setPlaylist(playlist) {
|
||||
this.playlistName = playlist;
|
||||
for(var p in this.sets)
|
||||
if(p != playlist && this.$refs[p])
|
||||
this.$refs[p][0].unselect();
|
||||
},
|
||||
|
||||
/// Load a sound from playlist or live
|
||||
load(playlist=null, index=0) {
|
||||
let src = null;
|
||||
|
||||
// from playlist
|
||||
if(playlist !== null && index != -1) {
|
||||
let item = this.$refs[playlist][0].get(index);
|
||||
if(!item)
|
||||
throw `No sound at index ${index} for playlist ${playlist}`;
|
||||
this.loaded = item
|
||||
src = item.src;
|
||||
}
|
||||
// from live
|
||||
else {
|
||||
this.loaded = null;
|
||||
src = this.live.src;
|
||||
}
|
||||
|
||||
this._setPlaylist(playlist);
|
||||
|
||||
// load sources
|
||||
const audio = this.audio;
|
||||
if(src instanceof Array) {
|
||||
audio.innerHTML = '';
|
||||
audio.removeAttribute('src');
|
||||
for(var s of src) {
|
||||
let source = document.createElement('source');
|
||||
source.setAttribute('src', s);
|
||||
audio.appendChild(source)
|
||||
}
|
||||
}
|
||||
else {
|
||||
audio.src = src;
|
||||
}
|
||||
audio.load();
|
||||
},
|
||||
|
||||
play(playlist=null, index=0) {
|
||||
this.load(playlist, index);
|
||||
this.audio.play().catch(e => console.error(e))
|
||||
},
|
||||
|
||||
/// Push items to playlist (by name)
|
||||
push(playlist, ...items) {
|
||||
return this.sets[playlist].push(...items);
|
||||
},
|
||||
|
||||
/// Push and play items
|
||||
playItems(playlist, ...items) {
|
||||
let index = this.push(playlist, ...items);
|
||||
this.$refs[playlist][0].selectedIndex = index;
|
||||
this.play(playlist, index);
|
||||
},
|
||||
|
||||
/// Handle click event that plays multiple items (from `data-sounds` attribute)
|
||||
playButtonClick(event) {
|
||||
var items = JSON.parse(event.currentTarget.dataset.sounds);
|
||||
this.playItems('queue', ...items);
|
||||
},
|
||||
|
||||
/// Pause
|
||||
pause() {
|
||||
this.audio.pause()
|
||||
},
|
||||
|
||||
//! Play/pause
|
||||
togglePlay(playlist=null, index=0) {
|
||||
if(playlist !== null) {
|
||||
this.panel = null;
|
||||
let item = this.sets[playlist].get(index);
|
||||
if(!this.playlist || this.playlistName !== playlist || this.loaded != item) {
|
||||
this.play(playlist, index);
|
||||
return;
|
||||
}
|
||||
}
|
||||
if(this.paused)
|
||||
this.audio.play().catch(e => console.error(e))
|
||||
else
|
||||
this.audio.pause();
|
||||
},
|
||||
|
||||
//! Pin/Unpin an item
|
||||
togglePlaylist(playlist, item) {
|
||||
const set = this.sets[playlist]
|
||||
let index = set.findIndex(item);
|
||||
if(index > -1)
|
||||
set.remove(index);
|
||||
else {
|
||||
set.push(item);
|
||||
// this.$refs.pinPlaylistButton.focus();
|
||||
}
|
||||
},
|
||||
|
||||
/// Audio player state change event
|
||||
onState(event) {
|
||||
const audio = this.audio;
|
||||
this.state = audio.paused ? State.paused : State.playing;
|
||||
|
||||
if(event.type == 'ended' && (!this.playlist || this.playlist.selectNext() == -1))
|
||||
this.play();
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.load();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<template>
|
||||
<div class="a-playlist">
|
||||
<div class="header"><slot name="header"></slot></div>
|
||||
<ul :class="listClass">
|
||||
<li v-for="(item,index) in items" :class="[itemClass, player.isPlaying(item) ? 'is-active' : '']" @click="!hasAction('play') && select(index)"
|
||||
:key="index">
|
||||
<ASoundItem
|
||||
:data="item" :index="index" :set="set" :player="player_"
|
||||
@togglePlay="togglePlay(index)"
|
||||
:actions="actions">
|
||||
<template #after-title="bindings">
|
||||
<slot name="after-title" v-bind="bindings"></slot>
|
||||
</template>
|
||||
<template #actions="bindings">
|
||||
<slot name="actions" v-bind="bindings"></slot>
|
||||
<button class="button" v-if="editable" @click.stop="remove(index,true)">
|
||||
<span class="icon is-small"><span class="fa fa-close"></span></span>
|
||||
</button>
|
||||
</template>
|
||||
</ASoundItem>
|
||||
</li>
|
||||
</ul>
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AList from './AList';
|
||||
import ASoundItem from './ASoundItem';
|
||||
|
||||
export default {
|
||||
extends: AList,
|
||||
emits: [...AList.emits],
|
||||
components: { ASoundItem },
|
||||
|
||||
props: {
|
||||
actions: Array,
|
||||
// FIXME: remove
|
||||
name: String,
|
||||
player: Object,
|
||||
editable: Boolean,
|
||||
withLink: Boolean
|
||||
},
|
||||
|
||||
computed: {
|
||||
self() { return this; },
|
||||
player_() { return this.player || window.aircox.player },
|
||||
},
|
||||
|
||||
methods: {
|
||||
hasAction(action) { return this.actions && this.actions.indexOf(action) != -1; },
|
||||
|
||||
selectNext() {
|
||||
let index = this.selectedIndex + 1;
|
||||
return this.select(index >= this.items.length ? -1 : index);
|
||||
},
|
||||
|
||||
togglePlay(index) {
|
||||
if(this.player_.isPlaying(this.set.get(index)))
|
||||
this.player_.pause();
|
||||
else
|
||||
this.select(index)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
<template>
|
||||
<div class="a-progress m-0">
|
||||
<time class="time-now">
|
||||
<slot name="value" :value="value" :max="max">{{ format(value) }}</slot>
|
||||
</time>
|
||||
<div ref="bar" class="a-progress-bar-container" @click.stop="onClick" @mouseleave.stop="onMouseMove"
|
||||
@mousemove.stop="onMouseMove">
|
||||
<div :class="progressClass" :style="progressStyle">
|
||||
<time v-if="hoverValue">
|
||||
{{ format(hoverValue) }}
|
||||
</time>
|
||||
<template v-else> </template>
|
||||
</div>
|
||||
</div>
|
||||
<time class="time-total">
|
||||
<slot name="value" :value="valueDisplay" :max="max">{{ format(max) }}</slot>
|
||||
</time>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
hoverValue: null,
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
value: Number,
|
||||
max: Number,
|
||||
format: { type: Function, default: x => x },
|
||||
progressClass: { default: 'a-progress-bar' },
|
||||
vertical: { type: Boolean, default: false },
|
||||
},
|
||||
|
||||
computed: {
|
||||
valueDisplay() { return this.hoverValue === null ? this.value : this.hoverValue; },
|
||||
|
||||
progressStyle() {
|
||||
if(!this.max)
|
||||
return null;
|
||||
let value = this.max ? this.valueDisplay * 100 / this.max : 0;
|
||||
return this.vertical ? { height: `${value}%` } : { width: `${value}%` };
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
xToValue(x) { return x * this.max / this.$refs.bar.getBoundingClientRect().width },
|
||||
yToValue(y) { return y * this.max / this.$refs.bar.getBoundingClientRect().height },
|
||||
|
||||
valueFromEvent(event) {
|
||||
let rect = event.currentTarget.getBoundingClientRect()
|
||||
return this.vertical ? this.yToValue(event.clientY - rect.y)
|
||||
: this.xToValue(event.clientX - rect.x);
|
||||
},
|
||||
|
||||
onClick(event) {
|
||||
this.$emit('select', this.valueFromEvent(event));
|
||||
},
|
||||
|
||||
onMouseMove(event) {
|
||||
if(event.type == 'mouseleave')
|
||||
this.hoverValue = null;
|
||||
else {
|
||||
this.hoverValue = this.valueFromEvent(event);
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,151 +0,0 @@
|
|||
<template>
|
||||
<tr>
|
||||
<slot name="head" :context="context" :item="item" :row="row"/>
|
||||
<template v-for="(attr,col) in columns" :key="col">
|
||||
<slot name="cell-before" :context="context" :item="item" :cell="cells[col]"
|
||||
:attr="attr"/>
|
||||
<component :is="cellTag" :class="['cell', 'cell-' + attr]" :data-col="col"
|
||||
:draggable="orderable"
|
||||
@dragstart="onDragStart" @dragover="onDragOver" @drop="onDrop">
|
||||
<slot :name="attr" :context="context" :item="item" :cell="cells[col]"
|
||||
:data="itemData" :attr="attr" :emit="cellEmit"
|
||||
:value="itemData && itemData[attr]">
|
||||
{{ itemData && itemData[attr] }}
|
||||
</slot>
|
||||
<slot name="cell" :context="context" :item="item" :cell="cells[col]"
|
||||
:data="itemData" :attr="attr" :emit="cellEmit"
|
||||
:value="itemData && itemData[attr]"/>
|
||||
</component>
|
||||
<slot name="cell-after" :context="context" :item="item" :col="col" :cell="cells[col]"
|
||||
:attr="attr"/>
|
||||
</template>
|
||||
<slot name="tail" :context="context" :item="item" :row="row"/>
|
||||
</tr>
|
||||
</template>
|
||||
<script>
|
||||
import {isReactive, toRefs} from 'vue'
|
||||
import Model from '../model'
|
||||
|
||||
export default {
|
||||
emits: ['move', 'cell'],
|
||||
|
||||
props: {
|
||||
//! Context object
|
||||
context: {type: Object, default: () => ({})},
|
||||
//! Item to display in row
|
||||
item: {type: Object, default: () => ({})},
|
||||
//! Columns to display, as items' attributes
|
||||
//! - name: field name / item attribute value
|
||||
//! - label: display label
|
||||
//! - help: help text
|
||||
columns: Array,
|
||||
//! Default cell's info
|
||||
cell: {type: Object, default() { return {row: 0}}},
|
||||
//! Cell component tag
|
||||
cellTag: {type: String, default: 'td'},
|
||||
//! If true, can reorder cell by drag & drop
|
||||
orderable: {type: Boolean, default: false},
|
||||
},
|
||||
|
||||
computed: {
|
||||
/**
|
||||
* Row index
|
||||
*/
|
||||
row() { return this.cell && this.cell.row || 0 },
|
||||
|
||||
/**
|
||||
* Item's data if model instance, otherwise item
|
||||
*/
|
||||
itemData() {
|
||||
return this.item instanceof Model ? this.item.data : this.item;
|
||||
},
|
||||
|
||||
/**
|
||||
* Computed cell infos
|
||||
*/
|
||||
cells() {
|
||||
const cell = isReactive(this.cell) && toRefs(this.cell) || this.cell || {}
|
||||
const cells = []
|
||||
for(var col in this.columns)
|
||||
cells.push({...cell, col: Number(col)})
|
||||
return cells
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Emit a 'cell' event.
|
||||
* Event data: `{name, cell, data, item}`
|
||||
* @param {Number} col: cell column's index
|
||||
* @param {String} name: cell's event name
|
||||
* @param {} data: cell's event data
|
||||
*/
|
||||
cellEmit(name, cell, data) {
|
||||
this.$emit('cell', {
|
||||
name, cell, data,
|
||||
item: this.item,
|
||||
})
|
||||
},
|
||||
|
||||
onDragStart(ev) {
|
||||
const dataset = ev.target.dataset;
|
||||
const data = `cell:${dataset.col}`
|
||||
ev.dataTransfer.setData("text/cell", data)
|
||||
ev.dataTransfer.dropEffect = 'move'
|
||||
},
|
||||
|
||||
onDragOver(ev) {
|
||||
ev.preventDefault()
|
||||
ev.dataTransfer.dropEffect = 'move'
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle drop event, emit `'move': { from, to }`.
|
||||
*/
|
||||
onDrop(ev) {
|
||||
const data = ev.dataTransfer.getData("text/cell")
|
||||
if(!data || !data.startsWith('cell:'))
|
||||
return
|
||||
|
||||
ev.preventDefault()
|
||||
this.$emit('move', {
|
||||
from: Number(data.slice(5)),
|
||||
to: Number(ev.target.dataset.col),
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* Return DOM node for cells at provided position `col`
|
||||
*/
|
||||
getCellEl(col) {
|
||||
const els = this.$el.querySelectorAll(this.cellTag)
|
||||
for(var el of els)
|
||||
if(col == Number(el.dataset.col))
|
||||
return el;
|
||||
return null
|
||||
},
|
||||
|
||||
/**
|
||||
* Focus cell's form input. If from is provided, related focus
|
||||
*/
|
||||
focus(col, from) {
|
||||
if(from)
|
||||
col += from.col
|
||||
|
||||
const target = this.getCellEl(col)
|
||||
if(!target)
|
||||
return
|
||||
const control = target.querySelector('input:not([type="hidden"])') ||
|
||||
target.querySelector('button') ||
|
||||
target.querySelector('select') ||
|
||||
target.querySelector('a');
|
||||
control && control.focus()
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$el.__row = this
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -1,153 +0,0 @@
|
|||
<template>
|
||||
<table class="table is-stripped is-fullwidth">
|
||||
<thead>
|
||||
<a-row :context="context" :columns="columnNames"
|
||||
:orderable="columnsOrderable" cellTag="th"
|
||||
@move="moveColumn">
|
||||
<template v-if="$slots['header-head']" v-slot:head="data">
|
||||
<slot name="header-head" v-bind="data"/>
|
||||
</template>
|
||||
<template v-if="$slots['header-tail']" v-slot:tail="data">
|
||||
<slot name="header-tail" v-bind="data"/>
|
||||
</template>
|
||||
<template v-for="column of columns" v-bind:key="column.name"
|
||||
v-slot:[column.name]="data">
|
||||
<slot :name="'header-' + column.name" v-bind="data">
|
||||
{{ column.label }}
|
||||
<span v-if="column.help" class="icon small"
|
||||
:title="column.help">
|
||||
<i class="fa fa-circle-question"/>
|
||||
</span>
|
||||
</slot>
|
||||
</template>
|
||||
</a-row>
|
||||
</thead>
|
||||
<tbody>
|
||||
<slot name="head"/>
|
||||
<template v-for="(item,row) in items" :key="row">
|
||||
<!-- data-index comes from AList component drag & drop -->
|
||||
<a-row :context="context" :item="item" :cell="{row}" :columns="columnNames" :data-index="row"
|
||||
:data-row="row"
|
||||
:draggable="orderable"
|
||||
@dragstart="onDragStart" @dragover="onDragOver" @drop="onDrop"
|
||||
@cell="onCellEvent(row, $event)">
|
||||
<template v-for="[name,slot] of rowSlots" :key="slot" v-slot:[slot]="data">
|
||||
<slot :name="name" v-bind="data"/>
|
||||
</template>
|
||||
</a-row>
|
||||
</template>
|
||||
<slot name="tail"/>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
<script>
|
||||
import AList from './AList.vue'
|
||||
import ARow from './ARow.vue'
|
||||
|
||||
const Component = {
|
||||
extends: AList,
|
||||
components: { ARow },
|
||||
//! Event:
|
||||
//! - cell(event): an event occured inside cell
|
||||
//! - colmove({from,to}), colmove(): columns moved
|
||||
emits: ['cell', 'colmove'],
|
||||
|
||||
props: {
|
||||
...AList.props,
|
||||
//! Context object
|
||||
context: {type: Object, default: () => ({})},
|
||||
|
||||
//! Ordered list of columns, as objects with:
|
||||
//! - name: item attribute value
|
||||
//! - label: display label
|
||||
//! - help: help text
|
||||
//! - hidden: if true, field is hidden
|
||||
columns: Array,
|
||||
//! If True, columns are orderable
|
||||
columnsOrderable: Boolean,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
...super.data,
|
||||
// TODO: add observer
|
||||
columns_: [...this.columns],
|
||||
extraItem: new this.set.model(),
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
columnNames() { return this.columns_.map(c => c.name) },
|
||||
columnLabels() { return this.columns_.reduce(
|
||||
(labels, c) => ({...labels, [c.name]: c.label}),
|
||||
{}
|
||||
)},
|
||||
rowSlots() {
|
||||
return Object.keys(this.$slots).filter(x => x.startsWith('row-'))
|
||||
.map(x => [x, x.slice(4)])
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
// TODO: use in tracklist
|
||||
sortColumns(names) {
|
||||
const ordered = names.map(n => this.columns_.find(c => c.name == n)).filter(c => !!c);
|
||||
const remaining = this.columns_.filter(c => names.indexOf(c.name) == -1)
|
||||
this.columns_ = [...ordered, ...remaining]
|
||||
this.$emit('colmove')
|
||||
},
|
||||
|
||||
/**
|
||||
* Move column using provided event object (as `{from, to}`)
|
||||
*/
|
||||
moveColumn(event) {
|
||||
const {from, to} = event
|
||||
const value = this.columns_[from]
|
||||
this.columns_.splice(from, 1)
|
||||
this.columns_.splice(to, 0, value)
|
||||
this.$emit('colmove', event)
|
||||
},
|
||||
|
||||
/**
|
||||
* React on 'cell' event, re-emitting it with additional values:
|
||||
* - `set`: data set
|
||||
* - `row`: row index
|
||||
*
|
||||
* @param {Number} row: row index
|
||||
* @param {} data: cell's event data
|
||||
*/
|
||||
onCellEvent(row, event) {
|
||||
if(event.name == 'focus')
|
||||
this.focus(event.data, event.cell)
|
||||
this.$emit('cell', {
|
||||
...event, row,
|
||||
set: this.set
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* Return row component at provided index
|
||||
*/
|
||||
getRow(row) {
|
||||
const els = this.$el.querySelectorAll('tr')
|
||||
for(var el of els)
|
||||
if(el.__row && row == Number(el.dataset.row))
|
||||
return el.__row
|
||||
},
|
||||
|
||||
/**
|
||||
* Focus on a cell
|
||||
*/
|
||||
focus(row, col, from=null) {
|
||||
if(from)
|
||||
row += from.row
|
||||
row = this.getRow(row)
|
||||
row && row.focus(col, from)
|
||||
},
|
||||
},
|
||||
}
|
||||
Component.props.itemTag.default = 'tr'
|
||||
Component.props.listTag.default = 'tbody'
|
||||
|
||||
export default Component
|
||||
</script>
|
||||
|
|
@ -1,167 +0,0 @@
|
|||
<template>
|
||||
<a-modal ref="modal" :title="title">
|
||||
<template #bar>
|
||||
<button type="button" class="button small mr-3" v-if="panel == LIST"
|
||||
@click="showPanel(UPLOAD)">
|
||||
<span class="icon">
|
||||
<i class="fa fa-upload"></i>
|
||||
</span>
|
||||
<span>{{ labels.upload }}</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="button small mr-3" v-else
|
||||
@click="showPanel(LIST)">
|
||||
<span class="icon">
|
||||
<i class="fa fa-list"></i>
|
||||
</span>
|
||||
<span>{{ labels.list }}</span>
|
||||
</button>
|
||||
</template>
|
||||
<template #default>
|
||||
<a-file-upload ref="upload" v-if="panel == UPLOAD"
|
||||
:url="uploadUrl"
|
||||
:label="uploadLabel" :field-name="uploadFieldName"
|
||||
@load="uploadDone">
|
||||
<template #form="data">
|
||||
<slot name="upload-form" v-bind="data"></slot>
|
||||
</template>
|
||||
<template #preview="data">
|
||||
<slot name="upload-preview" v-bind="data"></slot>
|
||||
</template>
|
||||
</a-file-upload>
|
||||
<div class="a-select-file" v-else>
|
||||
<div ref="list"
|
||||
:class="['a-select-file-list', listClass]">
|
||||
<!-- tiles -->
|
||||
<div v-if="prevUrl">
|
||||
<a href="#" @click="load(prevUrl)">
|
||||
{{ labels.show_previous }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<template v-for="item in items" v-bind:key="item.id">
|
||||
<div :class="['file-preview', this.item && item.id == this.item.id && 'active']" @click="select(item)">
|
||||
<slot :item="item" :load="load" :lastUrl="lastUrl"></slot>
|
||||
<a-action-button v-if="deleteUrl"
|
||||
class="has-text-danger small float-right"
|
||||
icon="fa fa-trash"
|
||||
:confirm="labels.confirm_delete"
|
||||
method="DELETE"
|
||||
:url="deleteUrl.replace('123', item.id)"
|
||||
@done="load(lastUrl)">
|
||||
</a-action-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="nextUrl">
|
||||
<a href="#" @click="load(nextUrl)">
|
||||
{{ labels.show_next }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<slot name="footer" :item="item">
|
||||
<span class="mr-3" v-if="item">{{ item.name }}</span>
|
||||
</slot>
|
||||
<button type="button" v-if="panel == LIST" class="button align-right"
|
||||
@click="selected">
|
||||
{{ labels.select_file }}
|
||||
</button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import AModal from "./AModal"
|
||||
import AActionButton from "./AActionButton"
|
||||
import AFileUpload from "./AFileUpload"
|
||||
|
||||
export default {
|
||||
emit: ["select"],
|
||||
|
||||
components: {AActionButton, AFileUpload, AModal},
|
||||
|
||||
props: {
|
||||
title: { type: String },
|
||||
labels: Object,
|
||||
listClass: {type: String, default: ""},
|
||||
|
||||
// List url
|
||||
listUrl: { type: String },
|
||||
|
||||
// URL to delete an item, where "123" is replaced by
|
||||
// the item id.
|
||||
deleteUrl: {type: String },
|
||||
|
||||
uploadUrl: { type: String },
|
||||
uploadFieldName: { type: String, default: "file" },
|
||||
uploadLabel: { type: String, default: "Upload a file" },
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
LIST: 0,
|
||||
UPLOAD: 1,
|
||||
|
||||
panel: 0,
|
||||
item: null,
|
||||
items: [],
|
||||
nextUrl: "",
|
||||
prevUrl: "",
|
||||
lastUrl: "",
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
open() {
|
||||
this.$refs.modal.open()
|
||||
},
|
||||
|
||||
close() {
|
||||
this.$refs.modal.close()
|
||||
},
|
||||
|
||||
showPanel(panel) {
|
||||
this.panel = panel
|
||||
},
|
||||
|
||||
load(url) {
|
||||
return fetch(url || this.listUrl).then(
|
||||
response => response.ok ? response.json() : Promise.reject(response)
|
||||
).then(data => {
|
||||
this.lastUrl = url
|
||||
this.nextUrl = data.next
|
||||
this.prevUrl = data.previous
|
||||
this.items = data.results
|
||||
this.showPanel(this.LIST)
|
||||
|
||||
this.$forceUpdate()
|
||||
this.$refs.list.scroll(0, 0)
|
||||
return this.items
|
||||
})
|
||||
},
|
||||
|
||||
//! Select an item
|
||||
select(item) {
|
||||
this.item = item;
|
||||
},
|
||||
|
||||
//! User click on select button (confirm selection)
|
||||
selected() {
|
||||
this.$emit("select", this.item)
|
||||
this.close()
|
||||
},
|
||||
|
||||
uploadDone(reload=false) {
|
||||
reload && this.load().then(items => {
|
||||
this.item = items[0]
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.load()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
<template>
|
||||
<div :class="['a-sound-item m-0 button-group', playing && 'playing' || '']">
|
||||
<slot name="title" :player="player" :item="item" :loaded="loaded">
|
||||
<span :class="['label is-flex-grow-1 align-left', playing && 'blink' || '']" @click.stop="$emit('togglePlay')">
|
||||
{{ name || item.name }}
|
||||
</span>
|
||||
</slot>
|
||||
<slot name="after-title" :player="player" :item="item" :loaded="loaded">
|
||||
</slot>
|
||||
<div class="button-group actions">
|
||||
<a class="button action" v-if="hasAction('page')"
|
||||
:href="item.data.page_url">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-external-link"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button action"
|
||||
v-if="hasAction('download') && item.data.is_downloadable"
|
||||
:href="item.data.url" target="_blank">
|
||||
<span class="icon is-small">
|
||||
<span class="fa fa-download"></span>
|
||||
</span>
|
||||
</a>
|
||||
<button :class="['button action', pinned ? 'selected' : 'not-selected']"
|
||||
v-if="hasAction('pin') && player && player.sets.pin != $parent.set" @click.stop="player.togglePlaylist('pin', item)">
|
||||
<span class="icon is-small">
|
||||
<span class="fa fa-star"></span>
|
||||
</span>
|
||||
</button>
|
||||
<slot name="actions" :player="player" :item="item" :loaded="loaded"></slot>
|
||||
</div>
|
||||
<slot name="extra-right" :player="player" :item="item" :loaded="loaded"></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Model from '../model';
|
||||
import Sound from '../sound';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
data: {type: Object, default: () => {}},
|
||||
name: String,
|
||||
player: Object,
|
||||
page_url: String,
|
||||
actions: {type:Array, default: () => []},
|
||||
index: {type:Number, default: null},
|
||||
},
|
||||
|
||||
computed: {
|
||||
item() { return this.data instanceof Model ? this.data : new Sound(this.data || {}); },
|
||||
loaded() { return this.player && this.player.isLoaded(this.item) },
|
||||
playing() { return this.player && this.player.isPlaying(this.item) },
|
||||
paused() { return this.player && this.player.paused && this.loaded },
|
||||
pinned() { return this.player && this.player.sets.pin.find(this.item) },
|
||||
},
|
||||
|
||||
methods: {
|
||||
hasAction(action) {
|
||||
return this.actions && this.actions.indexOf(action) != -1;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
<template>
|
||||
<div class="a-playlist-editor">
|
||||
<a-select-file ref="select-file"
|
||||
:title="labels && labels.add_sound"
|
||||
:labels="labels"
|
||||
:list-url="soundListUrl"
|
||||
:deleteUrl="soundDeleteUrl"
|
||||
:uploadUrl="soundUploadUrl"
|
||||
:uploadLabel="labels.select_file"
|
||||
@select="selected"
|
||||
>
|
||||
<template #upload-preview="{upload}">
|
||||
<slot name="upload-preview" :upload="upload"></slot>
|
||||
</template>
|
||||
<template #upload-form>
|
||||
<slot name="upload-form"></slot>
|
||||
</template>
|
||||
<template #default="{item}">
|
||||
<audio controls :src="item.url"></audio>
|
||||
<label class="label small flex-grow-1">{{ item.name }}</label>
|
||||
</template>
|
||||
</a-select-file>
|
||||
|
||||
<a-form-set ref="formset" :form-data="formData" :labels="labels"
|
||||
:initials="initData.items"
|
||||
order-by="position"
|
||||
:action-add="actionAdd">
|
||||
<template v-for="[name,slot] of rowsSlots" :key="slot"
|
||||
v-slot:[slot]="data">
|
||||
<slot v-if="name != 'row-tail'" :name="name" v-bind="data"/>
|
||||
</template>
|
||||
|
||||
<template #row-sound="{item,inputName}">
|
||||
<label>{{ item.data.name }}</label><br>
|
||||
<audio controls :src="item.data.url"/>
|
||||
<input type="hidden" :name="inputName" :value="item.data.sound"/>
|
||||
</template>
|
||||
</a-form-set>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AFormSet from './AFormSet'
|
||||
import ASelectFile from "./ASelectFile"
|
||||
|
||||
export default {
|
||||
components: {AFormSet, ASelectFile},
|
||||
|
||||
props: {
|
||||
formData: Object,
|
||||
labels: Object,
|
||||
// initial datas
|
||||
initData: Object,
|
||||
|
||||
soundListUrl: String,
|
||||
soundUploadUrl: String,
|
||||
soundDeleteUrl: String,
|
||||
},
|
||||
|
||||
computed: {
|
||||
rowsSlots() {
|
||||
return Object.keys(this.$slots)
|
||||
.filter(x => x.startsWith('row-') || x.startsWith('rows-') || x.startsWith('control-'))
|
||||
.map(x => [x, x.startsWith('rows-') ? x.slice(5) : x])
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
actionAdd() {
|
||||
this.$refs['select-file'].open()
|
||||
},
|
||||
|
||||
selected(item) {
|
||||
const data = {
|
||||
"sound": item.id,
|
||||
"name": item.name,
|
||||
"url": item.url,
|
||||
"broadcast": item.broadcast,
|
||||
}
|
||||
this.$refs.formset.set.push(data)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<template>
|
||||
<form ref="form">
|
||||
<slot :counts="counts"></slot>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const splitReg = new RegExp(',\\s*|\\s+', 'g');
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
counts: {},
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
update() {
|
||||
const items = this.$el.querySelectorAll('input[name="data"]:checked')
|
||||
const counts = {};
|
||||
|
||||
for(var item of items)
|
||||
if(item.value)
|
||||
for(var tag of item.value.split(splitReg))
|
||||
if(tag.trim())
|
||||
counts[tag.trim()] = (counts[tag.trim()] || 0) + 1;
|
||||
this.counts = counts;
|
||||
},
|
||||
|
||||
onclick() {
|
||||
// TODO: row click => check checkbox
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
console.log(this.counts)
|
||||
this.$refs.form.addEventListener('change', () => this.update())
|
||||
this.update()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<slot :streamer="streamer" :streamers="streamers" :Sound="Sound"
|
||||
:sources="sources" :fetchStreamers="fetchStreamers"></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Sound from '../sound';
|
||||
import {setEcoInterval} from '../utils';
|
||||
|
||||
import Streamer from '../streamer';
|
||||
|
||||
|
||||
export default {
|
||||
props: {
|
||||
apiUrl: String,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
// current streamer
|
||||
streamer: null,
|
||||
// all streamers
|
||||
streamers: [],
|
||||
// fetch interval id
|
||||
fetchInterval: null,
|
||||
Sound: Sound,
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
sources() {
|
||||
var sources = this.streamer ? this.streamer.sources : [];
|
||||
return sources.filter(s => s.data)
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
fetchStreamers() {
|
||||
Streamer.fetch(this.apiUrl, {many:true}).then(streamers => {
|
||||
this.streamers = streamers
|
||||
this.streamer = streamers ? streamers[0] : null
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.fetchStreamers();
|
||||
this.fetchInterval = setEcoInterval(() => this.streamer && this.streamer.fetch(), 5000)
|
||||
},
|
||||
|
||||
unmounted() {
|
||||
if(this.fetchInterval !== null)
|
||||
clearInterval(this.fetchInterval)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
<template>
|
||||
<button :title="ariaLabel"
|
||||
type="button"
|
||||
:aria-label="ariaLabel || label" :aria-description="ariaDescription"
|
||||
@click="toggle" :class="buttonClass">
|
||||
<slot name="default" :active="active">
|
||||
<span class="icon">
|
||||
<i :class="icon"></i>
|
||||
</span>
|
||||
<label v-if="label">{{ label }}</label>
|
||||
</slot>
|
||||
</button>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
initialActive: {type: Boolean, default: null},
|
||||
el: {type: String, default: ""},
|
||||
label: {type: String, default: ""},
|
||||
icon: {type: String, default: "fa fa-bars"},
|
||||
ariaLabel: {type: String, default: ""},
|
||||
ariaDescription: {type: String, default: ""},
|
||||
activeClass: {type: String, default:"active"},
|
||||
/// switch toggle of all items of this group.
|
||||
group: {type: String, default: ""},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
active: this.initialActive,
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
groupClass() {
|
||||
return this.group && "a-switch-" + this.group || ''
|
||||
},
|
||||
|
||||
buttonClass() {
|
||||
return [
|
||||
this.active && 'active' || '',
|
||||
this.groupClass
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggle() {
|
||||
this.set(!this.active)
|
||||
},
|
||||
|
||||
set(active) {
|
||||
if(this.el) {
|
||||
const el = document.querySelector(this.el)
|
||||
if(active)
|
||||
el.classList.add(this.activeClass)
|
||||
else
|
||||
el.classList.remove(this.activeClass)
|
||||
}
|
||||
this.active = active
|
||||
if(active)
|
||||
this.resetGroup()
|
||||
},
|
||||
|
||||
resetGroup() {
|
||||
if(!this.groupClass)
|
||||
return
|
||||
const els = document.querySelectorAll("." + this.groupClass)
|
||||
for(var el of els)
|
||||
if(el != this.$el)
|
||||
el.__vnode.ctx.ctx.set(false)
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if(this.initialActive !== null)
|
||||
this.set(this.initialActive)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,288 +0,0 @@
|
|||
<template>
|
||||
<div class="a-tracklist-editor">
|
||||
<div class="flex-row">
|
||||
<div class="flex-grow-1">
|
||||
<slot name="title" />
|
||||
</div>
|
||||
<div class="flex-row align-right">
|
||||
<div class="field has-addons">
|
||||
<p class="control">
|
||||
<button type="button" :class="['button','p-2', page == Page.Text ? 'is-primary' : 'is-light']"
|
||||
@click="page = Page.Text">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-pencil"></i>
|
||||
</span>
|
||||
<span>{{ labels.text }}</span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button type="button" :class="['button','p-2', page == Page.List ? 'is-primary' : 'is-light']"
|
||||
@click="page = Page.List">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-list"></i>
|
||||
</span>
|
||||
<span>{{ labels.list }}</span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control ml-3">
|
||||
<button type="button" class="button is-info square"
|
||||
:title="labels.settings"
|
||||
@click="$refs.settings.open()">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-cog"></i>
|
||||
</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section v-show="page == Page.Text" class="panel">
|
||||
<textarea ref="textarea" class="is-fullwidth is-size-6" rows="20"
|
||||
@change="updateList"
|
||||
/>
|
||||
|
||||
</section>
|
||||
<section v-show="page == Page.List" class="panel">
|
||||
<a-form-set ref="formset"
|
||||
:form-data="formData" :initials="initData.items"
|
||||
:columnsOrderable="true" :labels="labels"
|
||||
order-by="position"
|
||||
@load="updateInput" @colmove="onColumnMove" @move="updateInput"
|
||||
@cell="onCellEvent">
|
||||
<template v-for="[name,slot] of rowsSlots" :key="slot"
|
||||
v-slot:[slot]="data">
|
||||
<slot v-if="name != 'row-tail'" :name="name" v-bind="data"/>
|
||||
</template>
|
||||
</a-form-set>
|
||||
</section>
|
||||
|
||||
<a-modal ref="settings" :title="labels.settings">
|
||||
<template #default>
|
||||
<div class="field">
|
||||
<label class="label" style="vertical-align: middle">
|
||||
{{ labels.columns }}
|
||||
</label>
|
||||
<table class="table is-bordered"
|
||||
style="vertical-align: middle">
|
||||
<tr v-if="$refs.formset">
|
||||
<a-row :columns="$refs.formset.rows.columnNames"
|
||||
:item="$refs.formset.rows.columnLabels"
|
||||
@move="$refs.formset.rows.moveColumn"
|
||||
>
|
||||
<template v-slot:cell-after="{cell}">
|
||||
<td style="cursor:pointer;" v-if="cell.col < $refs.formset.rows.columns_.length-1">
|
||||
<span class="icon" @click="$refs.formset.rows.moveColumn({from: cell.col, to: cell.col+1})"
|
||||
><i class="fa fa-left-right"/>
|
||||
</span>
|
||||
</td>
|
||||
</template>
|
||||
</a-row>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="flex-row">
|
||||
<div class="field is-inline-block is-vcentered flex-grow-1">
|
||||
<label class="label is-inline mr-2"
|
||||
style="vertical-align: middle">
|
||||
Séparateur</label>
|
||||
<div class="control is-inline-block"
|
||||
style="vertical-align: middle;">
|
||||
<input type="text" ref="sep" class="input is-inline is-text-centered is-small"
|
||||
style="max-width: 5em;"
|
||||
v-model="separator" @change="updateList()"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="flex-row align-right">
|
||||
<a-action-button icon="fa fa-floppy-disk"
|
||||
v-if="settingsChanged"
|
||||
class="button control p-2 mr-3 is-secondary" run-class="blink"
|
||||
:url="settingsUrl" method="POST"
|
||||
:data="settings"
|
||||
:aria-label="labels.save_settings"
|
||||
@done="settingsSaved()">
|
||||
{{ labels.save_settings }}
|
||||
</a-action-button>
|
||||
<button class="button" type="button" @click="$refs.settings.close()">
|
||||
Fermer
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {dropRightWhile, cloneDeep, isEqual} from 'lodash'
|
||||
|
||||
import AActionButton from './AActionButton'
|
||||
import AFormSet from './AFormSet'
|
||||
import ARow from './ARow'
|
||||
import AModal from "./AModal"
|
||||
|
||||
/// Page display
|
||||
export const Page = {
|
||||
Text: 0, List: 1, Settings: 2,
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { AActionButton, AFormSet, ARow, AModal },
|
||||
props: {
|
||||
formData: Object,
|
||||
labels: Object,
|
||||
|
||||
///! initial data as: {items: [], fields: {column_name: label, settings: {}}
|
||||
initData: Object,
|
||||
dataPrefix: String,
|
||||
settingsUrl: String,
|
||||
defaultColumns: {
|
||||
type: Array,
|
||||
default: () => ['artist', 'title', 'tags', 'album', 'year', 'timestamp']},
|
||||
},
|
||||
|
||||
data() {
|
||||
const settings = {
|
||||
// tracklist_editor_columns: this.columns,
|
||||
tracklist_editor_sep: ' -- ',
|
||||
}
|
||||
return {
|
||||
Page: Page,
|
||||
page: Page.Text,
|
||||
extraData: {},
|
||||
settings,
|
||||
savedSettings: cloneDeep(settings),
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
rows() { return this.$refs.formset && this.$refs.formset.rows },
|
||||
columns() { return this.rows && this.rows.columns_ || [] },
|
||||
|
||||
settingsChanged() {
|
||||
var k = Object.keys(this.savedSettings)
|
||||
.findIndex(k => !isEqual(this.settings[k], this.savedSettings[k]))
|
||||
return k != -1
|
||||
},
|
||||
|
||||
separator: {
|
||||
set(value) {
|
||||
this.settings.tracklist_editor_sep = value
|
||||
if(this.page == Page.List)
|
||||
this.updateInput()
|
||||
},
|
||||
get() { return this.settings.tracklist_editor_sep }
|
||||
},
|
||||
|
||||
rowsSlots() {
|
||||
return Object.keys(this.$slots)
|
||||
.filter(x => x.startsWith('row-') || x.startsWith('rows-') || x.startsWith('control-'))
|
||||
.map(x => [x, x.startsWith('rows-') ? x.slice(5) : x])
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onCellEvent(event) {
|
||||
switch(event.name) {
|
||||
case 'change': this.updateInput();
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
onColumnMove() {
|
||||
this.settings.tracklist_editor_columns = this.$refs.formset.rows.columnNames
|
||||
if(this.page == this.Page.List)
|
||||
this.updateInput()
|
||||
else
|
||||
this.updateList()
|
||||
},
|
||||
|
||||
updateList() {
|
||||
const items = this.toList(this.$refs.textarea.value)
|
||||
this.$refs.formset.set.reset(items)
|
||||
},
|
||||
|
||||
updateInput() {
|
||||
const input = this.toText(this.$refs.formset.items)
|
||||
this.$refs.textarea.value = input
|
||||
},
|
||||
|
||||
/**
|
||||
* From input and separator, return list of items.
|
||||
*/
|
||||
toList(input) {
|
||||
const columns = this.$refs.formset.rows.columns_
|
||||
var lines = input.split('\n')
|
||||
var items = []
|
||||
|
||||
for(let line of lines) {
|
||||
line = line.trimLeft()
|
||||
if(!line)
|
||||
continue
|
||||
|
||||
var lineBits = line.split(this.separator)
|
||||
var item = {}
|
||||
for(var col in columns) {
|
||||
if(col >= lineBits.length)
|
||||
break
|
||||
const column = columns[col]
|
||||
item[column.name] = lineBits[col].trim()
|
||||
}
|
||||
item && items.push(item)
|
||||
}
|
||||
return items
|
||||
},
|
||||
|
||||
/**
|
||||
* From items and separator return a string
|
||||
*/
|
||||
toText(items) {
|
||||
const columns = this.$refs.formset.rows.columns_
|
||||
const sep = ` ${this.separator.trim()} `
|
||||
const lines = []
|
||||
for(let item of items) {
|
||||
if(!item)
|
||||
continue
|
||||
var line = []
|
||||
for(var col of columns)
|
||||
line.push(item.data[col.name] || '')
|
||||
line = dropRightWhile(line, x => !x || !('' + x).trim())
|
||||
line = line.join(sep).trimRight()
|
||||
lines.push(line)
|
||||
}
|
||||
return lines.join('\n')
|
||||
},
|
||||
|
||||
|
||||
_data_key(key) {
|
||||
key = key.slice(this.dataPrefix.length)
|
||||
try {
|
||||
var [index, attr] = key.split('-', 1)
|
||||
return [Number(index), attr]
|
||||
}
|
||||
catch(err) {
|
||||
return [null, key]
|
||||
}
|
||||
},
|
||||
|
||||
//! Update saved settings from this.settings
|
||||
settingsSaved(settings=null) {
|
||||
if(settings !== null)
|
||||
this.settings = settings
|
||||
if(this.$refs.settings)
|
||||
this.$refs.settings.close()
|
||||
this.savedSettings = cloneDeep(this.settings)
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const settings = this.initData && this.initData.settings
|
||||
if(settings) {
|
||||
this.settingsSaved(settings)
|
||||
this.rows.sortColumns(settings.tracklist_editor_columns)
|
||||
}
|
||||
this.page = this.initData.items.length ? Page.List : Page.Text
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import AFileUpload from "./AFileUpload.vue"
|
||||
import ASelectFile from "./ASelectFile.vue"
|
||||
import AStatistics from './AStatistics.vue'
|
||||
import AStreamer from './AStreamer.vue'
|
||||
|
||||
import AFormSet from './AFormSet.vue'
|
||||
import ATrackListEditor from './ATrackListEditor.vue'
|
||||
import ASoundListEditor from './ASoundListEditor.vue'
|
||||
import AEditor from './AEditor.vue'
|
||||
|
||||
import AManyToManyEdit from "./AManyToManyEdit.vue"
|
||||
|
||||
import base from "./index.js"
|
||||
|
||||
|
||||
export const admin = {
|
||||
...base,
|
||||
AManyToManyEdit,
|
||||
AFileUpload, ASelectFile, AEditor,
|
||||
AFormSet, ATrackListEditor, ASoundListEditor,
|
||||
AStatistics, AStreamer,
|
||||
}
|
||||
|
||||
export default admin
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import AAutocomplete from './AAutocomplete.vue'
|
||||
import AModal from "./AModal.vue"
|
||||
import AActionButton from './AActionButton.vue'
|
||||
import ADropdown from "./ADropdown.vue"
|
||||
import ACarousel from './ACarousel.vue'
|
||||
import AEpisode from './AEpisode.vue'
|
||||
import AList from './AList.vue'
|
||||
import APage from './APage.vue'
|
||||
import APlayer from './APlayer.vue'
|
||||
import APlaylist from './APlaylist.vue'
|
||||
import AProgress from './AProgress.vue'
|
||||
import ASoundItem from './ASoundItem.vue'
|
||||
import ASwitch from './ASwitch.vue'
|
||||
|
||||
|
||||
/**
|
||||
* Core components
|
||||
*/
|
||||
export const base = {
|
||||
AActionButton, AAutocomplete, AModal,
|
||||
ACarousel, ADropdown, AEpisode, AList, APage, APlayer, APlaylist,
|
||||
AProgress, ASoundItem, ASwitch,
|
||||
|
||||
}
|
||||
|
||||
export default base
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
/**
|
||||
* This module includes code available for both the public website and
|
||||
* administration interface)
|
||||
*/
|
||||
|
||||
import 'vue'
|
||||
|
||||
//-- aircox
|
||||
import App, {PlayerApp} from './app'
|
||||
import VueLoader from './vueLoader'
|
||||
import Sound from './sound'
|
||||
import {Set} from './model'
|
||||
|
||||
import './styles/common.scss'
|
||||
|
||||
|
||||
window.aircox = {
|
||||
// main application
|
||||
loader: null,
|
||||
get app() { return this.loader.app },
|
||||
|
||||
// player application
|
||||
playerLoader: null,
|
||||
get playerApp() { return this.playerLoader && this.playerLoader.app },
|
||||
get player() { return this.playerLoader.vm && this.playerLoader.vm.$refs.player },
|
||||
|
||||
Set, Sound,
|
||||
|
||||
|
||||
/**
|
||||
* Initialize main application and player.
|
||||
*/
|
||||
init(props=null, {hotReload=false, el=null,
|
||||
config=null, playerConfig=null,
|
||||
initApp=true, initPlayer=true,
|
||||
loader=null, playerLoader=null}={})
|
||||
{
|
||||
if(initPlayer) {
|
||||
playerConfig = playerConfig || PlayerApp
|
||||
playerLoader = playerLoader || new VueLoader(playerConfig)
|
||||
playerLoader.enable(false)
|
||||
this.playerLoader = playerLoader
|
||||
|
||||
document.addEventListener("keyup", e => this.onKeyPress(e), false)
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
},
|
||||
|
||||
onKeyPress(/*event*/) {
|
||||
/*
|
||||
if(event.key == " ") {
|
||||
this.player.togglePlay()
|
||||
event.stopPropagation()
|
||||
}
|
||||
*/
|
||||
},
|
||||
|
||||
/**
|
||||
* Filter navbar dropdown menu items
|
||||
*/
|
||||
filter_menu(event) {
|
||||
var filter = new RegExp(event.target.value, 'gi');
|
||||
var container = event.target.closest('.navbar-dropdown');
|
||||
|
||||
if(event.target.value)
|
||||
for(let item of container.querySelectorAll('a.navbar-item'))
|
||||
item.style.display = item.innerHTML.search(filter) == -1 ? 'none' : null;
|
||||
else
|
||||
for(let item of container.querySelectorAll('a.navbar-item'))
|
||||
item.style.display = null;
|
||||
},
|
||||
|
||||
pickDate(url, date) {
|
||||
url = `${url}?date=${date.id}`
|
||||
this.loader.pageLoad.load(url)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
import {setEcoInterval} from './utils';
|
||||
import Model from './model';
|
||||
|
||||
export default class Live {
|
||||
constructor({url,timeout=10,src=""}={}) {
|
||||
this.url = url;
|
||||
this.timeout = timeout;
|
||||
this.src = src;
|
||||
|
||||
this.interval = null
|
||||
this.promise = null
|
||||
this.items = []
|
||||
this.current = null
|
||||
}
|
||||
|
||||
//-- data refreshing
|
||||
drop() {
|
||||
this.promise = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch data from server.
|
||||
*
|
||||
* @param {Object} options
|
||||
* @param {Function} options.then: call this method on fetch, `this` passed as argument.
|
||||
* @return {Promise} Promise resolving to fetched items.
|
||||
*/
|
||||
fetch({then=null}={}) {
|
||||
const promise = fetch(this.url).then(response =>
|
||||
response.ok ? response.json()
|
||||
: Promise.reject(response)
|
||||
).then(data => {
|
||||
data = data.results
|
||||
data.forEach(item => {
|
||||
if(item.start) item.start = new Date(item.start)
|
||||
if(item.end) item.end = new Date(item.end)
|
||||
})
|
||||
this.items = data
|
||||
|
||||
const now = new Date()
|
||||
let item = data.find(it => it.start && (it.start <= now < it.end)) ||
|
||||
data.length ? data[0] : null;
|
||||
if(item) {
|
||||
item.src = this.src
|
||||
this.current = new Model(item)
|
||||
}
|
||||
else
|
||||
this.current = null
|
||||
if(then)
|
||||
then(this)
|
||||
return this.items
|
||||
})
|
||||
|
||||
this.promise = promise;
|
||||
return promise;
|
||||
}
|
||||
|
||||
_refresh(options={}) {
|
||||
const promise = this.fetch(options);
|
||||
promise.then(() => {
|
||||
if(promise != this.promise)
|
||||
return [];
|
||||
})
|
||||
return promise
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh live info every `this.timeout`.
|
||||
* @param {Object} options: arguments passed to `this.fetch`.
|
||||
*/
|
||||
refresh(options={}) {
|
||||
if(this.interval !== null)
|
||||
return
|
||||
|
||||
this._refresh(options)
|
||||
this.interval = setEcoInterval(() => this._refresh(options), this.timeout*1000)
|
||||
return this.interval
|
||||
}
|
||||
|
||||
stopRefresh() {
|
||||
this.interval !== null && clearInterval(this.interval)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,371 +0,0 @@
|
|||
|
||||
/**
|
||||
* Return cookie with provided key
|
||||
*/
|
||||
function getCookie(key) {
|
||||
if(document.cookie && document.cookie !== '') {
|
||||
const cookie = document.cookie.split(';')
|
||||
.find(c => c.trim().startsWith(key + '='))
|
||||
return cookie ? decodeURIComponent(cookie.split('=')[1]) : null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* CSRF token provided by Django
|
||||
*/
|
||||
var csrfToken = null;
|
||||
|
||||
/**
|
||||
* Get CSRF token
|
||||
*/
|
||||
export function getCsrf() {
|
||||
if(csrfToken === null)
|
||||
csrfToken = getCookie('csrftoken')
|
||||
return csrfToken;
|
||||
}
|
||||
|
||||
|
||||
// TODO: prevent duplicate simple fetch
|
||||
/**
|
||||
* Provide interface used to fetch and manipulate objects.
|
||||
*/
|
||||
export default class Model {
|
||||
/**
|
||||
* Instanciate model with provided data and options.
|
||||
* By default `url` is taken from `data.url_`.
|
||||
*/
|
||||
constructor(data={}, {url=null, ...options}={}) {
|
||||
this.url = url || data.url_;
|
||||
this.options = options;
|
||||
this.commit(data);
|
||||
}
|
||||
|
||||
get created() { return !this.id }
|
||||
get errors() { return this.data && this.data.__errors__ }
|
||||
|
||||
/**
|
||||
* Get instance id from its data
|
||||
*/
|
||||
static getId(data) {
|
||||
return 'id' in data ? data.id : data.pk;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return fetch options
|
||||
*/
|
||||
static getOptions(options) {
|
||||
return {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'X-CSRFToken': getCsrf(),
|
||||
},
|
||||
...options,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Return model instances for the provided list of model data.
|
||||
* @param {Array} items: array of data
|
||||
* @param {Object} options: options passed down to all model instances
|
||||
*/
|
||||
static fromList(items, options={}) {
|
||||
return items ? items.map(d => new this(d, options)) : []
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch item from server
|
||||
*/
|
||||
static fetch(url, {many=false, ...options}={}, args={}) {
|
||||
options = this.getOptions(options)
|
||||
const request = fetch(url, options).then(response => response.json());
|
||||
if(many)
|
||||
return request.then(data => {
|
||||
if(!(data instanceof Array))
|
||||
data = data.results
|
||||
return this.fromList(data, args)
|
||||
})
|
||||
else
|
||||
return request.then(data => new this(data, {url: url, ...args}));
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch data from server.
|
||||
*/
|
||||
fetch(options) {
|
||||
options = this.constructor.getOptions(options)
|
||||
return fetch(this.url, options)
|
||||
.then(response => response.json())
|
||||
.then(data => this.commit(data));
|
||||
}
|
||||
|
||||
/**
|
||||
* Call API action on object.
|
||||
*/
|
||||
action(path, options, commit=false) {
|
||||
options = this.constructor.getOptions(options)
|
||||
const promise = fetch(this.url + path, options);
|
||||
return commit ? promise.then(data => data.json())
|
||||
.then(data => { this.commit(data); this.data })
|
||||
: promise;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set instance's data with provided data. Return None
|
||||
*/
|
||||
commit(data) {
|
||||
this.data = data;
|
||||
this.id = this.constructor.getId(this.data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update model data, without reset previous value.
|
||||
* Item is marked as updated.
|
||||
*/
|
||||
update(data) {
|
||||
this.data = {...this.data, ...data}
|
||||
this.id = this.constructor.getId(this.data)
|
||||
this.updated = true
|
||||
}
|
||||
|
||||
delete() {
|
||||
this.deleted = true
|
||||
}
|
||||
|
||||
/**
|
||||
* Save instance into localStorage.
|
||||
*/
|
||||
store(key) {
|
||||
window.localStorage.setItem(key, JSON.stringify(this.data));
|
||||
}
|
||||
|
||||
/**
|
||||
* Load model instance from localStorage.
|
||||
*/
|
||||
static storeLoad(key) {
|
||||
let item = window.localStorage.getItem(key);
|
||||
return item === null ? item : new this(JSON.parse(item));
|
||||
}
|
||||
|
||||
/**
|
||||
* Return true if model instance has no data
|
||||
*/
|
||||
get isEmpty() {
|
||||
return !this.data || Object.keys(this.data).findIndex(k => !!this.data[k] && this.data[k] !== 0) == -1
|
||||
}
|
||||
|
||||
/**
|
||||
* Return error for a specific attribute name if any
|
||||
*/
|
||||
error(attr=null) {
|
||||
return attr === null ? this.errors : this.errors && this.errors[attr]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* List of models
|
||||
*/
|
||||
export class Set {
|
||||
constructor(model, {items=[],url=null,args={},unique=null,max=null,storeKey=null}={}) {
|
||||
this.items = [];
|
||||
this.model = model;
|
||||
this.url = url;
|
||||
this.unique = unique;
|
||||
this.max = max;
|
||||
this.storeKey = storeKey;
|
||||
|
||||
for(var item of items)
|
||||
this.push(item, {args: args, save: false});
|
||||
}
|
||||
|
||||
//! Return total items count
|
||||
get length() { return this.items.length }
|
||||
|
||||
//! Return a list of items marked as deleted
|
||||
get deletedItems() {
|
||||
return this.items.filter(i => i.deleted)
|
||||
}
|
||||
|
||||
//! Return a list of created items
|
||||
get createdItems() {
|
||||
return this.items.filter(i => !i.deleted && !i.id)
|
||||
}
|
||||
|
||||
//! Return a list of updated items
|
||||
get updatedItems() {
|
||||
return this.items.filter(i => i.updated)
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch multiple items from server
|
||||
*/
|
||||
static fetch(model, url, options=null, args=null) {
|
||||
options = model.getOptions(options)
|
||||
return fetch(url, options)
|
||||
.then(response => response.json())
|
||||
.then(data => (data instanceof Array ? data : data.results)
|
||||
.map(d => new model(d, {url: url, ...args})))
|
||||
}
|
||||
|
||||
fetch({url=null, reset=false, ...options}={}, args=null) {
|
||||
url = url || this.url
|
||||
options = this.model.getOptions(options)
|
||||
return fetch(url, options)
|
||||
.then(response => response.json())
|
||||
.then(data =>
|
||||
(data instanceof Array ? data : data.results)
|
||||
.map(d => new this.model(d, {url: url, ...args}))
|
||||
)
|
||||
.then(data => {
|
||||
if(reset)
|
||||
this.items = data
|
||||
else
|
||||
// TODO: remove duplicate
|
||||
this.items = [...this.items, ...data]
|
||||
return data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Commit changes to server.
|
||||
* py-ref: `views.mixin.ListCommitMixin`
|
||||
*/
|
||||
commit(url, {getData=null, fields=null, ...options}={}) {
|
||||
if(!getData && fields)
|
||||
getData = (i) => fields.reduce((r, f) => {
|
||||
r[f] = i.data[f]
|
||||
return r
|
||||
}, {})
|
||||
const createdItems = this.createdItems
|
||||
const body = {
|
||||
delete: this.deletedItems.map(i => i.id),
|
||||
update: this.updatedItems.map(getData),
|
||||
create: createdItems.map(getData),
|
||||
}
|
||||
if(!body.delete && !body.update && !body.create)
|
||||
return
|
||||
|
||||
getData = getData || ((i) => i.data);
|
||||
options = this.model.getOptions(options)
|
||||
options.method = "POST"
|
||||
options.body = JSON.stringify(body)
|
||||
return fetch(url, options)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const {created, updated, deleted} = data
|
||||
if(createdItems)
|
||||
this.items = this.items.filter(i => createdItems.indexOf(i) == -1)
|
||||
if(deleted)
|
||||
this.items = this.items.filter(i => deleted.indexOf(i.id) == -1)
|
||||
|
||||
this.extend(created)
|
||||
this.extend(updated)
|
||||
return data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Load list from localStorage
|
||||
*/
|
||||
static storeLoad(model, key, args={}) {
|
||||
let items = window.localStorage.getItem(key);
|
||||
return new this(model, {...args, storeKey: key, items: items ? JSON.parse(items) : []});
|
||||
}
|
||||
|
||||
/**
|
||||
* Store list into localStorage
|
||||
*/
|
||||
store() {
|
||||
this.storeKey && window.localStorage.setItem(this.storeKey, JSON.stringify(
|
||||
this.items.map(i => i.data)));
|
||||
}
|
||||
|
||||
/**
|
||||
* Save item
|
||||
*/
|
||||
save() {
|
||||
this.storeKey && this.store();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get item at index
|
||||
*/
|
||||
get(index) { return this.items[index] }
|
||||
|
||||
/**
|
||||
* Find an item by id or using a predicate function
|
||||
*/
|
||||
find(pred) {
|
||||
return pred instanceof Function ? this.items.find(pred)
|
||||
: this.items.find(x => x.id == pred.id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Find item index by id or using a predicate function
|
||||
*/
|
||||
findIndex(pred) {
|
||||
return pred instanceof Function ? this.items.findIndex(pred)
|
||||
: this.items.findIndex(x => x.id == pred.id);
|
||||
}
|
||||
|
||||
extend(items, options) {
|
||||
items.forEach(i => this.push(i, options))
|
||||
}
|
||||
|
||||
/**
|
||||
* Add item to set, return index.
|
||||
* If item already exists, replace it.
|
||||
*/
|
||||
push(item, {args={},save=true}={}) {
|
||||
item = item instanceof this.model ? item : new this.model(item, args);
|
||||
let index = -1
|
||||
if(this.unique && item.id) {
|
||||
index = this.findIndex(item);
|
||||
if(index > -1)
|
||||
this.items[index] = item
|
||||
}
|
||||
if(index == -1) {
|
||||
if(this.max && this.items.length >= this.max)
|
||||
this.items.splice(0,this.items.length-this.max)
|
||||
this.items.push(item)
|
||||
index = this.items.length-1
|
||||
}
|
||||
save && this.save()
|
||||
return index;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove item from set by index
|
||||
*/
|
||||
remove(index, {save=true}={}) {
|
||||
this.items.splice(index,1);
|
||||
save && this.save();
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear items, assign new ones
|
||||
*/
|
||||
reset(items=[]) {
|
||||
// TODO: check reactivity
|
||||
this.items = []
|
||||
for(var item of items)
|
||||
this.push(item)
|
||||
}
|
||||
|
||||
move(from, to) {
|
||||
if(from >= this.length || to > this.length)
|
||||
throw "source or target index is not in range"
|
||||
|
||||
const value = this.items[from]
|
||||
this.items.splice(from, 1)
|
||||
this.items.splice(to, 0, value)
|
||||
}
|
||||
}
|
||||
|
||||
Set[Symbol.iterator] = function () {
|
||||
return this.items[Symbol.iterator]();
|
||||
}
|
||||
|
|
@ -1,179 +0,0 @@
|
|||
|
||||
/**
|
||||
* Load page without leaving current one (hot-reload).
|
||||
*/
|
||||
export default class PageLoad {
|
||||
constructor(el, {loadingClass="loading", append=false}={}) {
|
||||
this.el = el
|
||||
this.append = append
|
||||
this.loadingClass = loadingClass
|
||||
}
|
||||
|
||||
get target() {
|
||||
if(!this._target)
|
||||
this._target = document.querySelector(this.el)
|
||||
return this._target
|
||||
}
|
||||
|
||||
reset() {
|
||||
this._target = null
|
||||
}
|
||||
|
||||
/**
|
||||
* Enable hot reload: catch page change in order to fetch them and
|
||||
* load page without actually leaving current one.
|
||||
*/
|
||||
enable(target=null) {
|
||||
if(this._pageChanged)
|
||||
throw "Already enabled, please disable me"
|
||||
|
||||
if(!target)
|
||||
target = this.target || document.body
|
||||
this.historySave(document.location, true)
|
||||
|
||||
this._pageChanged = event => this.pageChanged(event)
|
||||
this._statePopped = event => this.statePopped(event)
|
||||
|
||||
target.addEventListener('click', this._pageChanged, true)
|
||||
target.addEventListener('submit', this._pageChanged, true)
|
||||
window.addEventListener('popstate', this._statePopped, true)
|
||||
}
|
||||
|
||||
/**
|
||||
* Disable hot reload, remove listeners.
|
||||
*/
|
||||
disable() {
|
||||
this.target.removeEventListener('click', this._pageChanged, true)
|
||||
this.target.removeEventListener('submit', this._pageChanged, true)
|
||||
window.removeEventListener('popstate', this._statePopped, true)
|
||||
|
||||
this._pageChanged = null
|
||||
this._statePopped = null
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch url, return promise, similar to standard Fetch API.
|
||||
* Default implementation just forward argument to it.
|
||||
*/
|
||||
fetch(url, options) {
|
||||
return fetch(url, options)
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch app from remote and mount application.
|
||||
*/
|
||||
load(url, {mount=true, scroll=[0,0], ...options}={}) {
|
||||
if(this.loadingClass)
|
||||
this.target.classList.add(this.loadingClass)
|
||||
|
||||
if(this.onLoad)
|
||||
this.onLoad({url, el: this.el, options})
|
||||
if(scroll)
|
||||
window.scroll(...scroll)
|
||||
return this.fetch(url, options).then(response => response.text())
|
||||
.then(content => {
|
||||
if(this.loadingClass)
|
||||
this.target.classList.remove(this.loadingClass)
|
||||
|
||||
var doc = new DOMParser().parseFromString(content, 'text/html')
|
||||
var dom = doc.querySelectorAll(this.el)
|
||||
var result = {url,
|
||||
content: dom || [document.createTextNode(content)],
|
||||
title: doc.title,
|
||||
append: this.append}
|
||||
mount && this.mount(result)
|
||||
return result
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Mount the page on provided target element
|
||||
*/
|
||||
mount({content, title=null, ...options}={}) {
|
||||
if(this.onPreMount)
|
||||
this.onPreMount({target: this.target, content, items, title})
|
||||
var items = null;
|
||||
if(content)
|
||||
items = this.mountContent(content, options)
|
||||
if(title)
|
||||
document.title = title
|
||||
if(this.onMount)
|
||||
this.onMount({target: this.target, content, items, title})
|
||||
}
|
||||
|
||||
/**
|
||||
* Mount page content
|
||||
*/
|
||||
mountContent(content, {append=false}={}) {
|
||||
if(typeof content == "string") {
|
||||
this.target.innerHTML = append ? this.target.innerHTML + content
|
||||
: content;
|
||||
// TODO
|
||||
return []
|
||||
}
|
||||
|
||||
if(!append)
|
||||
this.target.innerHTML = ""
|
||||
|
||||
var fragment = document.createDocumentFragment()
|
||||
var items = []
|
||||
for(var node of content)
|
||||
while(node.firstChild) {
|
||||
items.push(node.firstChild)
|
||||
fragment.appendChild(node.firstChild)
|
||||
}
|
||||
this.target.append(fragment)
|
||||
return items
|
||||
}
|
||||
|
||||
/// Save application state into browser history
|
||||
historySave(url,replace=false) {
|
||||
const state = { content: this.target.innerHTML,
|
||||
title: document.title, }
|
||||
if(replace)
|
||||
history.replaceState(state, '', url)
|
||||
else
|
||||
history.pushState(state, '', url)
|
||||
}
|
||||
|
||||
dispatchPageLoaded(url) {
|
||||
var evt = new CustomEvent("pageLoaded", {detail: url})
|
||||
document.dispatchEvent(evt)
|
||||
}
|
||||
|
||||
// --- events
|
||||
pageChanged(event) {
|
||||
let submit = event.type == 'submit';
|
||||
let target = submit || event.target.tagName == 'A'
|
||||
? event.target : event.target.closest('a');
|
||||
if(!target || target.hasAttribute('target') || (target.dataset && target.dataset.forceReload))
|
||||
return;
|
||||
|
||||
let url = submit ? target.getAttribute('action') || ''
|
||||
: target.getAttribute('href');
|
||||
let domain = window.location.protocol + '//' + window.location.hostname
|
||||
let stay = (url === '' || url.startsWith('/') || url.startsWith('?') ||
|
||||
url.startsWith(domain)) && url.indexOf('wp-admin') == -1
|
||||
if(url===null || !stay) {
|
||||
return;
|
||||
}
|
||||
|
||||
let options = {};
|
||||
if(submit) {
|
||||
let formData = new FormData(event.target);
|
||||
if(target.method == 'get')
|
||||
url += '?' + (new URLSearchParams(formData)).toString();
|
||||
else
|
||||
options = {...options, method: target.method, body: formData}
|
||||
}
|
||||
this.load(url, options).then(() => this.dispatchPageLoaded(url)).then(() => this.historySave(url))
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
statePopped(event) {
|
||||
const state = event.state
|
||||
if(state && state.content)
|
||||
this.mount({ content: state.content, title: state.title });
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import "./styles/public.scss"
|
||||
import './index.js'
|
||||
import App from './app.js'
|
||||
|
||||
window.App = App
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import Model from './model';
|
||||
|
||||
|
||||
export default class Sound extends Model {
|
||||
constructor({sound={}, ...data}={}, options={}) {
|
||||
// flatten EpisodeSound and sound data
|
||||
super({...sound, ...data}, options)
|
||||
}
|
||||
|
||||
get name() { return this.data.name }
|
||||
get src() { return this.data.url }
|
||||
}
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
import Model from './model';
|
||||
import {setEcoInterval} from './utils';
|
||||
|
||||
|
||||
export class Streamer extends Model {
|
||||
get playlists() { return this.data ? this.data.playlists : []; }
|
||||
get queues() { return this.data ? this.data.queues : []; }
|
||||
get sources() { return [...this.queues, ...this.playlists]; }
|
||||
get source() { return this.sources.find(o => o.id == this.data.source) }
|
||||
|
||||
commit(data) {
|
||||
if(!this.data)
|
||||
this.data = { id: data.id, playlists: [], queues: [] }
|
||||
|
||||
data.playlists = Playlist.fromList(data.playlists, {streamer: this});
|
||||
data.queues = Queue.fromList(data.queues, {streamer: this});
|
||||
super.commit(data)
|
||||
}
|
||||
}
|
||||
|
||||
export default Streamer;
|
||||
|
||||
export class Request extends Model {
|
||||
static getId(data) { return data.rid; }
|
||||
}
|
||||
|
||||
export class Source extends Model {
|
||||
constructor(data, {streamer=null, ...options}={}) {
|
||||
super(data, options);
|
||||
this.streamer = streamer;
|
||||
setEcoInterval(() => this.tick(), 1000)
|
||||
}
|
||||
|
||||
get isQueue() { return false; }
|
||||
get isPlaylist() { return false; }
|
||||
get isPlaying() { return this.data.status == 'playing' }
|
||||
get isPaused() { return this.data.status == 'paused' }
|
||||
|
||||
get remainingString() {
|
||||
if(!this.remaining)
|
||||
return '00:00';
|
||||
|
||||
const seconds = Math.floor(this.remaining % 60);
|
||||
const minutes = Math.floor(this.remaining / 60);
|
||||
return String(minutes).padStart(2, '0') + ':' +
|
||||
String(seconds).padStart(2, '0');
|
||||
}
|
||||
|
||||
sync() { return this.action('sync/', {method: 'POST'}, true); }
|
||||
skip() { return this.action('skip/', {method: 'POST'}, true); }
|
||||
restart() { return this.action('restart/', {method: 'POST'}, true); }
|
||||
|
||||
seek(count) {
|
||||
return this.action('seek/', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({count: count})
|
||||
}, true)
|
||||
}
|
||||
|
||||
tick() {
|
||||
if(!this.data.remaining || !this.isPlaying)
|
||||
return;
|
||||
const delta = (Date.now() - this.commitDate) / 1000;
|
||||
this.remaining = this.data.remaining - delta
|
||||
}
|
||||
|
||||
commit(data) {
|
||||
if(data.air_time)
|
||||
data.air_time = new Date(data.air_time);
|
||||
|
||||
this.commitDate = Date.now()
|
||||
super.commit(data)
|
||||
this.remaining = data.remaining
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export class Playlist extends Source {
|
||||
get isPlaylist() { return true; }
|
||||
}
|
||||
|
||||
|
||||
export class Queue extends Source {
|
||||
get isQueue() { return true; }
|
||||
get queue() { return this.data && this.data.queue; }
|
||||
|
||||
commit(data) {
|
||||
data.queue = Request.fromList(data.queue);
|
||||
super.commit(data)
|
||||
}
|
||||
|
||||
push(soundId) {
|
||||
return this.action('push/', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({'sound_id': parseInt(soundId)})
|
||||
}, true);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
import AdminApp from '../admin';
|
||||
import Model from '../model';
|
||||
import Sound from '../sound';
|
||||
import {setEcoInterval} from '../utils';
|
||||
|
||||
import {Streamer, Queue} from './controllers';
|
||||
|
||||
|
||||
export default {
|
||||
...AdminApp,
|
||||
|
||||
props: {
|
||||
...(AdminApp.props || {}),
|
||||
apiUrl: String,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
// current streamer
|
||||
streamer: null,
|
||||
// all streamers
|
||||
streamers: [],
|
||||
// fetch interval id
|
||||
fetchInterval: null,
|
||||
Sound: Sound,
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...(AdminApp.computed || {}),
|
||||
|
||||
sources() {
|
||||
var sources = this.streamer ? this.streamer.sources : [];
|
||||
return sources.filter(s => s.data)
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
...(AdminApp.methods || {}),
|
||||
|
||||
fetchStreamers() {
|
||||
Streamer.fetch(this.apiUrl, {many:true}).then(streamers => {
|
||||
this.streamers = streamers
|
||||
this.streamer = streamers ? streamers[0] : null
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.fetchStreamers();
|
||||
this.fetchInterval = setEcoInterval(() => this.streamer && this.streamer.fetch(), 5000)
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
if(this.fetchInterval !== null)
|
||||
clearInterval(this.fetchInterval)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<slot :streamer="streamer" :streamers="streamers" :Sound="Sound"
|
||||
:sources="sources" :fetchStreamers="fetchStreamers"></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AdminApp from '../admin';
|
||||
import Sound from '../sound';
|
||||
import {setEcoInterval} from '../utils';
|
||||
|
||||
import {Streamer} from './controllers';
|
||||
|
||||
|
||||
export default {
|
||||
props: {
|
||||
apiUrl: String,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
// current streamer
|
||||
streamer: null,
|
||||
// all streamers
|
||||
streamers: [],
|
||||
// fetch interval id
|
||||
fetchInterval: null,
|
||||
Sound: Sound,
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
sources() {
|
||||
var sources = this.streamer ? this.streamer.sources : [];
|
||||
return sources.filter(s => s.data)
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
fetchStreamers() {
|
||||
Streamer.fetch(this.apiUrl, {many:true}).then(streamers => {
|
||||
this.streamers = streamers
|
||||
this.streamer = streamers ? streamers[0] : null
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.fetchStreamers();
|
||||
this.fetchInterval = setEcoInterval(() => this.streamer && this.streamer.fetch(), 5000)
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
if(this.fetchInterval !== null)
|
||||
clearInterval(this.fetchInterval)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1 +0,0 @@
|
|||
../../../../assets/src/styles/*
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
.navbar .navbar-brand img {
|
||||
margin: 0em 0.4em;
|
||||
margin-top: 0.3em;
|
||||
max-height: 3em;
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.results > #result_list {
|
||||
width: 100%;
|
||||
margin: 1em 0em;
|
||||
}
|
||||
|
||||
|
||||
ul.menu-list li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.submit-row a.deletelink {
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
@use "./vars" as v;
|
||||
@import "./vendor";
|
||||
@import "./helpers";
|
||||
|
||||
//-- 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;
|
||||
--text-color-light: #555;
|
||||
--break-color: rgb(225, 225, 225, 0.8);
|
||||
|
||||
--main-color: #EFCA08;
|
||||
--main-color-light: #F4da51;
|
||||
--main-color-dark: #F49F0A;
|
||||
--secondary-color: #00A6A6;
|
||||
--secondary-color-light: #4cc0c0;
|
||||
--secondary-color-dark: #007ba8;
|
||||
|
||||
--disabled-color: #aaa;
|
||||
--disabled-bg: #eee;
|
||||
--link-fg: #00A6A6;
|
||||
--link-hv-fg: var(--text-color);
|
||||
|
||||
--nav-primary-height: 3rem;
|
||||
--nav-secondary-height: 2.5rem;
|
||||
--nav-fg: var(--text-color);
|
||||
--nav-bg: var(--main-color);
|
||||
--nav-secondary-bg: var(--main-color-light);
|
||||
--nav-hv-fg: var(--button-hv-fg);
|
||||
--nav-hv-bg: var(--button-hv-bg);
|
||||
--nav-active-fg: var(--button-active-fg);
|
||||
--nav-active-bg: var(--button-active-bg);
|
||||
--nav-fs: 1rem;
|
||||
--nav-2-fs: 0.9rem;
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--body-bg);
|
||||
}
|
||||
|
||||
|
||||
@mixin mobile-small {
|
||||
.grid { @include grid-1; }
|
||||
}
|
||||
|
||||
|
||||
body.mobile {
|
||||
@include mobile-small;
|
||||
}
|
||||
|
||||
@media screen and (max-width: v.$screen-smaller) {
|
||||
@include mobile-small;
|
||||
}
|
||||
|
||||
@media screen and (max-width: v.$screen-normal) {
|
||||
html { font-size: 16px !important; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: v.$screen-wider) {
|
||||
html { font-size: 20px !important; }
|
||||
}
|
||||
|
||||
@media screen and (min-width: v.$screen-wider) {
|
||||
html { font-size: 20px !important; }
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
font-family: var(--heading-font-family);
|
||||
}
|
||||
|
||||
|
||||
.container:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-cover {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.modal .dropdown-menu {
|
||||
z-index: 50,
|
||||
}
|
||||
|
|
@ -1,782 +0,0 @@
|
|||
@use "vars" as v;
|
||||
|
||||
:root {
|
||||
--title-1-sz: 1.4rem;
|
||||
--title-2-sz: 1.3rem;
|
||||
--title-3-sz: 1.1rem;
|
||||
--title-4-sz: 1.0rem;
|
||||
--subtitle-1-sz: 1.6rem;
|
||||
--subtitle-2-sz: 1.4rem;
|
||||
--subtitle-3-sz: 1.2rem;
|
||||
|
||||
--heading-font-family: default;
|
||||
--heading-bg: var(--main-color);
|
||||
--heading-fg: var(--text-color);
|
||||
--heading-hg-fg: var(--text-color);
|
||||
--heading-hg-bg: var(--secondary-color);
|
||||
--heading-link-hv-fg: var(--link-fg);
|
||||
|
||||
--cover-w: 10rem;
|
||||
--cover-h: 10rem;
|
||||
--cover-small-w: 10rem;
|
||||
--cover-small-h: 10rem;
|
||||
--cover-tiny-w: 10rem;
|
||||
--cover-tiny-h: 10rem;
|
||||
|
||||
--card-w: var(--cover-w);
|
||||
--preview-bg: var(--body-bg);
|
||||
--preview-title-sz: var(--title-4-sz);
|
||||
--preview-subtitle-sz: var(--title-4-sz);
|
||||
--preview-wide-content-sz: #{v.$text-size-2};
|
||||
--preview-heading-bg-color: var(--main-color);
|
||||
--header-height: var(--cover-h);
|
||||
|
||||
--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: none; // var(--secondary-color-light);
|
||||
|
||||
--a-progress-bg: transparent;
|
||||
--a-progress-bar-bg: var(--secondary-color);
|
||||
--a-progress-bar-color: var(--text-color);
|
||||
--a-progress-bar-pd: #{v.$mp-2};
|
||||
|
||||
--a-playlist-header-bg: var(--secondary-color);
|
||||
--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(--secondary-color) solid;
|
||||
|
||||
--a-sound-bg: var(--main-color);
|
||||
--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(--main-color);
|
||||
--a-player-bar-height: var(--nav-primary-height);
|
||||
--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);
|
||||
--a-player-bar-button-hv-fg: var(--button-hv-fg);
|
||||
--a-player-bar-button-hv-bg: var(--button-hv-bg);
|
||||
|
||||
--button-fg: var(--text-color);
|
||||
--button-bg: var(--main-color);
|
||||
--button-sec-bg: var(--main-color-light);
|
||||
--button-hv-fg: var(--text-color);
|
||||
--button-hv-bg: var(--secondary-color-light);
|
||||
--button-active-fg: var(--text-color);
|
||||
--button-active-bg: var(--secondary-color);
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: v.$screen-wide) {
|
||||
:root {
|
||||
--cover-w: 10rem;
|
||||
--cover-h: 10rem;
|
||||
--cover-small-w: 6rem;
|
||||
--cover-small-h: 6rem;
|
||||
--cover-tiny-w: 4rem;
|
||||
--cover-tiny-h: 4rem;
|
||||
|
||||
--section-content-sz: 1rem;
|
||||
|
||||
// --preview-title-sz: #{v.$text-size};
|
||||
// --preview-subtitle-sz: #{v.$text-size-smaller};
|
||||
// --preview-wide-content-sz: #{v.$text-size};
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: v.$screen-wide) {
|
||||
:root {
|
||||
--cover-w: 8rem;
|
||||
--cover-h: 8rem;
|
||||
--cover-small-w: 4rem;
|
||||
--cover-small-h: 4rem;
|
||||
--cover-tiny-w: 2rem;
|
||||
--cover-tiny-h: 2rem;
|
||||
|
||||
--section-content-sz: 1rem;
|
||||
|
||||
// --preview-title-sz: #{v.$text-size};
|
||||
// --preview-subtitle-sz: #{v.$text-size-smaller};
|
||||
// --preview-wide-content-sz: #{v.$text-size};
|
||||
}
|
||||
}
|
||||
|
||||
// ---- headings
|
||||
|
||||
.no-reset h1 { font-size: var(--title-1-sz); }
|
||||
.no-reset h2 { font-size: var(--title-2-sz); }
|
||||
.no-reset h3 { font-size: var(--title-3-sz); }
|
||||
.no-reset h3 { font-size: var(--title-3-sz); }
|
||||
.no-reset h4 { font-size: var(--title-4-sz); }
|
||||
.no-reset h5 { font-size: var(--title-5-sz); }
|
||||
|
||||
.title, .header.preview .title {
|
||||
&.is-1 { font-size: var(--title-1-sz); }
|
||||
&.is-2 { font-size: var(--title-2-sz); }
|
||||
&.is-3 { font-size: var(--title-3-sz); }
|
||||
}
|
||||
|
||||
.subtitle, .header.preview .subtitle {
|
||||
color: var(--text-color-light);
|
||||
|
||||
&.is-1 { font-size: var(--subtitle-1-sz); }
|
||||
&.is-2 { font-size: var(--subtitle-2-sz); }
|
||||
&.is-3 { font-size: var(--subtitle-3-sz); }
|
||||
}
|
||||
|
||||
.title + .subtitle {
|
||||
padding-top: 0em !important;
|
||||
}
|
||||
|
||||
.headings a, a.heading, a.subtitle {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.heading {
|
||||
display: inline-block;
|
||||
|
||||
&:not(:empty) {
|
||||
// border-bottom: 1px var(--heading-bg) solid;
|
||||
// color: var(--heading-fg);
|
||||
//padding: v.$mp-2;
|
||||
margin-top: 0em !important;
|
||||
vertical-align: top;
|
||||
|
||||
&.highlight, &.active,
|
||||
.preview.active &,
|
||||
{
|
||||
// border-color: var(--heading-hg-bg);
|
||||
color: var(--heading-hg-fg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- bulma overrides
|
||||
.modal-card {
|
||||
max-width: v.$screen-wide;
|
||||
}
|
||||
.modal-card {
|
||||
max-height: calc(100% - 10rem);
|
||||
}
|
||||
|
||||
// ---- button
|
||||
@mixin button {
|
||||
.button, a.button, button.button {
|
||||
font-size: v.$text-size;
|
||||
display: inline-block;
|
||||
padding: v.$mp-2e;
|
||||
border: none;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
color: var(--button-fg);
|
||||
background-color: var(--button-bg);
|
||||
|
||||
&.square { min-width: 2.5em; }
|
||||
&.secondary { background-color: var(--button-sec-bg); }
|
||||
|
||||
.label, label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
&:not(:only-child) {
|
||||
&:first-child { margin: 0 v.$mp-3e 0 v.$mp-1e; }
|
||||
&:last-child { margin: 0 v.$mp-3e 0 v.$mp-1e; }
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--button-hv-fg);
|
||||
background-color: var(--button-hv-bg);
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
&.active:not(:hover) {
|
||||
color: var(--button-active-fg);
|
||||
background-color: var(--button-active-bg);
|
||||
}
|
||||
|
||||
&:not([disabled]), &:not(.disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&[disabled], &.disabled {
|
||||
background-color: var(--text-color-light);
|
||||
color: var(--secondary-color);
|
||||
border-color: var(--secondary-color-light);
|
||||
}
|
||||
|
||||
.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; }
|
||||
}
|
||||
}
|
||||
|
||||
.button-group + .button-group {
|
||||
border-left: 1px solid var(--text-color-light);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- preview
|
||||
.preview {
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
background-color: var(--preview-bg) !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: var(--preview-title-sz);
|
||||
margin-bottom: unset;
|
||||
}
|
||||
.subtitle {
|
||||
font-weight: v.$weight-bolder;
|
||||
font-size: var(--preview-subtitle-sz);
|
||||
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); }
|
||||
a:hover { color: var(--heading-link-hv-fg) !important; }
|
||||
}
|
||||
|
||||
&.tiny {
|
||||
.title { font-size: calc(var(--preview-title-sz) * 0.8); }
|
||||
.subtitle { font-size: calc(var(--preview-subtitle-sz) * 0.8); }
|
||||
.content {
|
||||
font-size: v.$text-size;
|
||||
max-height: 3rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.preview-cover {
|
||||
background: var(--preview-bg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
height: var(--cover-h);
|
||||
max-width: calc( var(--cover-w) * 1.5 );
|
||||
min-width: var(--cover-w);
|
||||
overflow: hidden;
|
||||
border: 1px #c4c4c4 solid;
|
||||
|
||||
img {
|
||||
height: var(--cover-h);
|
||||
max-width: calc( var(--cover-w) * 1.5 );
|
||||
min-width: var(--cover-w);
|
||||
}
|
||||
img.hide { visibility: hidden; }
|
||||
|
||||
|
||||
&.small, .preview.small & {
|
||||
min-width: unset;
|
||||
height: var(--cover-small-h);
|
||||
width: var(--cover-small-w) !important;
|
||||
min-width: var(--cover-small-w);
|
||||
}
|
||||
|
||||
&.tiny, .preview.tiny & {
|
||||
min-width: unset;
|
||||
height: var(--cover-tiny-h);
|
||||
width: var(--cover-tiny-w) !important;
|
||||
min-width: var(--cover-tiny-w);
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- list
|
||||
.list-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
// padding: v.$mp-3;
|
||||
|
||||
.headings {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0em;
|
||||
margin-bottom: v.$mp-2 !important;
|
||||
|
||||
.heading {
|
||||
// background-color: var(--preview-heading-bg-color);
|
||||
padding: 0rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.title { flex-grow: 1; }
|
||||
.subtitle {
|
||||
font-size: var(--preview-title-sz);
|
||||
// background-color: var(--preview-heading-bg-color);
|
||||
text-align: right;
|
||||
|
||||
&:not(:empty) { min-width: 9rem; }
|
||||
}
|
||||
|
||||
.media-content {
|
||||
height: 100%;
|
||||
margin-bottom: unset;
|
||||
|
||||
.list-item:not(.no-cover) & {
|
||||
min-height: var(--cover-small-h);
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
text-align: right;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&:not(.wide) .media {
|
||||
padding: v.$mp-3;
|
||||
// border-radius: v.$mp-2;
|
||||
border: 1px solid var(--break-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: v.$screen-very-small) {
|
||||
.list-item .headings {
|
||||
flex-direction: column;
|
||||
|
||||
.heading {
|
||||
display: inline;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: unset !important;
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- wide
|
||||
.list-item.wide {
|
||||
& .preview-cover {
|
||||
box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
& .content {
|
||||
font-size: var(--preview-wide-content-sz);
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- card
|
||||
.preview-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: var(--card-w);
|
||||
padding: 0rem !important;
|
||||
margin-bottom: auto;
|
||||
|
||||
background-color: var(--preview-bg) !important;
|
||||
transition: box-shadow 0.2s;
|
||||
|
||||
&:hover {
|
||||
figure {
|
||||
// box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important;
|
||||
box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--heading-link-hv-fg);
|
||||
}
|
||||
}
|
||||
|
||||
.headings {
|
||||
margin-top: v.$mp-2;
|
||||
|
||||
.heading {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: v.$text-size-2;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
|
||||
figure {
|
||||
// box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
|
||||
height: var(--cover-h);
|
||||
width: var(--cover-w);
|
||||
}
|
||||
|
||||
.actions {
|
||||
position: absolute;
|
||||
padding: v.$mp-2;
|
||||
bottom: 0rem;
|
||||
right: 0rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- ---- Carousel
|
||||
.a-carousel {
|
||||
.a-carousel-viewport {
|
||||
box-shadow: inset 0em 0em 20rem var(--a-carousel-bg);
|
||||
// background-color: var(--a-carousel-bg);
|
||||
padding: 0rem;
|
||||
padding-top: var(--a-carousel-p);
|
||||
margin-top: calc( 0rem - var(--a-carousel-p) );
|
||||
}
|
||||
}
|
||||
|
||||
.a-carousel-container {
|
||||
width: 100%;
|
||||
gap: var(--a-carousel-gap);
|
||||
transition: margin-left 1s;
|
||||
|
||||
> * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.a-carousel-bullets-container {
|
||||
// due to a-carousel margin-left
|
||||
padding-left: var(--a-carousel-ml);
|
||||
|
||||
.bullet {
|
||||
margin: v.$mp-1;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover { color: var(--link-fg); }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- ---- 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, .button {
|
||||
background-color: var(--a-playlist-header-bg);
|
||||
color: var(--a-playlist-header-fg);
|
||||
}
|
||||
|
||||
.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 .label {
|
||||
color: var(--a-sound-playing-fg) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--a-sound-hv-bg);
|
||||
|
||||
.label {
|
||||
color: var(--a-sound-hv-fg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.label:hover::before, &.playing .label::before {
|
||||
content: "\f04b";
|
||||
font-family: "Font Awesome 6 Free";
|
||||
margin-right: v.$mp-3e;
|
||||
}
|
||||
&.playing .label:hover::before {
|
||||
content: '';
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.headings > * {
|
||||
}
|
||||
|
||||
.label {
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
padding: 0em v.$mp-3;
|
||||
}
|
||||
|
||||
margin: 0em !important;
|
||||
padding: v.$mp-3e;
|
||||
font-size: var(--a-sound-text-sz);
|
||||
font-family: var(--heading-font-family);
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 3em;
|
||||
font-size: var(--a-sound-text-sz);
|
||||
|
||||
&:hover {
|
||||
color: var(--a-sound-hv-fg) !important;
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- 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); }
|
||||
.button {
|
||||
color: var(--text-black);
|
||||
&:hover { color: var(--button-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: var(--a-player-bar-height);
|
||||
|
||||
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-medium;
|
||||
height: 100%;
|
||||
padding: v.$mp-2 !important;
|
||||
min-width: calc(var(--a-player-bar-height) + v.$mp-2 * 2);
|
||||
border-radius: 0px;
|
||||
|
||||
&.open {
|
||||
background-color: var(--button-active-bg);
|
||||
color: var(--button-active-fg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.a-player-bar-content {
|
||||
display: flex;
|
||||
flex-direction: vertical;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
padding: 0 v.$mp-3;
|
||||
border-right: 1px black solid;
|
||||
|
||||
.title {
|
||||
max-height: calc( var(--a-player-bar-height) - v.$mp-3 );
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/// ---- playlist editor
|
||||
.a-tracklist-editor {
|
||||
.dropdown {
|
||||
display: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
/// ----------------
|
||||
.a-select-file {
|
||||
> *:not(:last-child) {
|
||||
margin-bottom: v.$mp-3;
|
||||
}
|
||||
|
||||
.upload-preview {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.a-select-file-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
gap: v.$mp-3;
|
||||
}
|
||||
|
||||
.file-preview {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
&.active {
|
||||
box-shadow: 0em 0em 1em rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-height: 10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,165 +0,0 @@
|
|||
@use "./vars" as v;
|
||||
|
||||
// ---- text
|
||||
.text-light { font-weight: 400; color: var(--text-color-light); }
|
||||
|
||||
.bigger { font-size: v.$text-size-bigger !important; }
|
||||
.big { font-size: v.$text-size-big !important; }
|
||||
.smaller { font-size: v.$text-size-smaller !important; }
|
||||
.small { font-size: v.$text-size-small !important; }
|
||||
|
||||
// ---- layout
|
||||
.align-left {
|
||||
text-align: left;
|
||||
justify-content: left;
|
||||
|
||||
&.x { padding-left: 0px !important; }
|
||||
}
|
||||
.align-right {
|
||||
text-align: right;
|
||||
justify-content: right;
|
||||
|
||||
&.x { padding-right: 0px !important; }
|
||||
}
|
||||
.align-center {
|
||||
text-align: center !important;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.clear-left { clear: left !important }
|
||||
.clear-right { clear: right !important }
|
||||
.clear-both { clear: both !important }
|
||||
.clear-unset { clear: unset !important }
|
||||
|
||||
.d-inline { display: inline !important; }
|
||||
.d-block { display: block !important; }
|
||||
.d-inline-block { display: inline-block !important; }
|
||||
|
||||
.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 }
|
||||
|
||||
.ws-nowrap { white-space: nowrap; }
|
||||
|
||||
|
||||
.height-1 { height: 1em; }
|
||||
.height-2 { height: 2em; }
|
||||
.height-3 { height: 3em; }
|
||||
.height-4 { height: 4em; }
|
||||
.height-5 { height: 5em; }
|
||||
.height-6 { height: 6em; }
|
||||
.height-7 { height: 7em; }
|
||||
.height-8 { height: 8em; }
|
||||
.height-9 { height: 9em; }
|
||||
.height-10 { height: 10em; }
|
||||
.height-15 { height: 15em; }
|
||||
.height-20 { height: 20em; }
|
||||
.height-25 { height: 25em; }
|
||||
|
||||
// ---- grid / flex
|
||||
|
||||
.gap-1 { gap: v.$mp-1 !important; }
|
||||
.gap-2 { gap: v.$mp-2 !important; }
|
||||
.gap-3 { gap: v.$mp-3 !important; }
|
||||
.gap-4 { gap: v.$mp-4 !important; }
|
||||
.gap-5 { gap: v.$mp-5 !important; }
|
||||
|
||||
|
||||
// ---- ---- grid
|
||||
@mixin grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-flow: dense;
|
||||
gap: v.$mp-4;
|
||||
}
|
||||
@mixin grid-1 { grid-template-columns: 1fr; }
|
||||
@mixin grid-2 { grid-template-columns: 1fr 1fr; }
|
||||
@mixin grid-3 { grid-template-columns: 1fr 1fr 1fr; }
|
||||
|
||||
.grid { @include grid; }
|
||||
.grid-1 { @include grid; @include grid-1; }
|
||||
.grid-2 { @include grid; @include grid-2; }
|
||||
.grid-3 { @include grid; @include grid-3; }
|
||||
|
||||
// ---- ---- flex
|
||||
.flex-row { display: flex; flex-direction: row }
|
||||
.flex-column { display: flex; flex-direction: column }
|
||||
.flex-grow-0 { flex-grow: 0 !important; }
|
||||
.flex-grow-1 { flex-grow: 1 !important; }
|
||||
.flex-grow-2 { flex-grow: 2 !important; }
|
||||
.flex-grow-3 { flex-grow: 3 !important; }
|
||||
.flex-grow-4 { flex-grow: 4 !important; }
|
||||
.flex-grow-5 { flex-grow: 5 !important; }
|
||||
.flex-grow-6 { flex-grow: 6 !important; }
|
||||
|
||||
.float-right { float: right }
|
||||
.float-left { float: left }
|
||||
|
||||
// ---- boxing
|
||||
.is-fullwidth { width: 100%; }
|
||||
.is-fullheight { height: 100%; }
|
||||
.is-fixed-bottom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
margin-bottom: 0px;
|
||||
border-radius: 0;
|
||||
}
|
||||
.no-border { border: 0px !important; }
|
||||
|
||||
.overflow-hidden { overflow: hidden }
|
||||
.overflow-hidden.is-fullwidth { max-width: 100%; }
|
||||
|
||||
.height-full { height: 100%; }
|
||||
|
||||
*[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
|
||||
.main-color { color: var(--main-color); }
|
||||
.secondary-color { color: var(--secondary-color); }
|
||||
|
||||
.bg-main { background-color: var(--main-color); }
|
||||
.bg-main-light { background-color: var(--main-color-light); }
|
||||
.bg-secondary { background-color: var(--secondary-color); }
|
||||
.bg-secondary-light { background-color: var(--secondary-color-light); }
|
||||
.bg-transparent { background-color: transparent; }
|
||||
|
||||
.border { border: 1px solid var(--text-color); }
|
||||
.border-main { border: 1px solid var(--main-color); }
|
||||
.border-secondary { border: 1px solid var(--secondary-color); }
|
||||
.border-bottom-main { border-bottom: 1px solid var(--main-color); }
|
||||
.border-bottom-secondary { border-bottom: 1px solid var(--secondary-color); }
|
||||
|
||||
.is-success {
|
||||
background-color: v.$green !important;
|
||||
border-color: v.$green-dark !important;
|
||||
}
|
||||
.is-danger {
|
||||
background-color: v.$red !important;
|
||||
border-color: v.$red-dark !important;
|
||||
}
|
||||
|
||||
|
||||
.box-shadow {
|
||||
&:hover {
|
||||
box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
&.active {
|
||||
box-shadow: 0em 0em 1em rgba(0,0,0,0.4);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,478 +0,0 @@
|
|||
@use "./vars" as v;
|
||||
@use "./components";
|
||||
|
||||
|
||||
// ---- main theme & layout
|
||||
|
||||
.page {
|
||||
padding-bottom: 5rem;
|
||||
|
||||
a {
|
||||
color: var(--link-fg);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
color: var(--link-hv-fg);
|
||||
}
|
||||
}
|
||||
|
||||
section.container {
|
||||
margin-top: v.$mp-3;
|
||||
margin-bottom: v.$mp-4;
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: calc(v.$mp-4 / 2);
|
||||
// border-bottom: 2px var(--break-color) solid;
|
||||
}
|
||||
|
||||
> .title, h3.title {
|
||||
font-size: var(--title-2-sz);
|
||||
clear: both;
|
||||
margin: v.$mp-3 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
*[data-oembed-url] {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---- components
|
||||
.dropdown-item {
|
||||
font-size: unset !important
|
||||
}
|
||||
|
||||
.vc-weekday-1, .vc-weekday-7 {
|
||||
color: var(--secondary-color) !important;
|
||||
}
|
||||
|
||||
|
||||
.schedules {
|
||||
padding-top: 0;
|
||||
margin-bottom: calc(0rem - v.$mp-3) !important;
|
||||
}
|
||||
|
||||
.schedule {
|
||||
display: inline-block;
|
||||
margin: v.$mp-3;
|
||||
margin-left: 0rem;
|
||||
padding: v.$mp-2;
|
||||
text-color: var(--main-color);
|
||||
background-color: var(--main-color-light);
|
||||
|
||||
.heading {
|
||||
padding: 0em;
|
||||
}
|
||||
|
||||
.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, a {
|
||||
justify-content: center;
|
||||
min-width: 2rem;
|
||||
padding: v.$mp-2;
|
||||
|
||||
.not-selected { opacity: 0.6; }
|
||||
.icon { margin: 0em !important; }
|
||||
label { margin-left: v.$mp-2; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.label, .textarea, .input, .select {
|
||||
font-size: v.$text-size;
|
||||
}
|
||||
|
||||
.field.is-horizontal {
|
||||
display: flex;
|
||||
flex-direction: horizontal;
|
||||
|
||||
.label { min-width: 7rem }
|
||||
.control {
|
||||
flex: 1;
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: v.$screen-small) {
|
||||
comment.textarea {
|
||||
height: calc( v.$text-size * 7 ) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-item.active, .table tr.is-selected {
|
||||
color: var(--secondary-color);
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
|
||||
// -- headings
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
&.is-3 { margin-top: v.$mp-3; }
|
||||
}
|
||||
|
||||
|
||||
// ---- main navigation
|
||||
.navs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
background-color: var(--nav-bg);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.burger {
|
||||
display: none;
|
||||
background-color: var(--nav-bg);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
padding: v.$mp-2;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
text-align: center;
|
||||
|
||||
font-family: var(--heading-font-family);
|
||||
text-transform: uppercase;
|
||||
color: var(--nav-fg) !important;
|
||||
|
||||
.icon:first-child, .icon + span {
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--nav-hv-bg);
|
||||
color: var(--nav-hv-fg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--nav-active-bg);
|
||||
color: var(--nav-active-fg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
|
||||
.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: var(--nav-fs);
|
||||
font-weight: v.$weight-bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background-color: var(--nav-secondary-bg);
|
||||
//position: absolute;
|
||||
//width: 100%;
|
||||
//box-shadow: 0em 0.5em 0.5em rgba(0, 0, 0, 0.05);
|
||||
|
||||
justify-content: right;
|
||||
//display: none;
|
||||
|
||||
.nav.primary:hover + &,
|
||||
&:hover {
|
||||
display: flex;
|
||||
top: var(--nav-primary-height);
|
||||
left: 0rem;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: var(--nav-2-fs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---- breadcrumbs
|
||||
.breadcrumbs {
|
||||
text-align: right;
|
||||
padding: v.$mp-3 0rem;
|
||||
font-size: v.$text-size-smaller;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:empty { display: none; }
|
||||
|
||||
a + a {
|
||||
padding-left: 0;
|
||||
|
||||
&:before {
|
||||
content: "/";
|
||||
margin: 0 v.$mp-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@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 {
|
||||
flex-grow: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
justify-content: space-between;
|
||||
|
||||
.burger {
|
||||
display: unset;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: var(--nav-secondary-bg);
|
||||
left: 0;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
box-shadow: 0em 0.5em 0.5em rgba(0,0,0,0.05);
|
||||
|
||||
.nav-item {
|
||||
display: block;
|
||||
font-weight: v.$weight-normal;
|
||||
font-size: var(--nav-fs);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
> 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;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- page header
|
||||
.header {
|
||||
&.preview-header {
|
||||
//display: flex;
|
||||
align-items: start;
|
||||
gap: v.$mp-3;
|
||||
min-height: unset;
|
||||
padding-top: v.$mp-3 !important;
|
||||
|
||||
}
|
||||
|
||||
.headings {
|
||||
width: unset;
|
||||
flex-grow: 1;
|
||||
padding-top: 0 !important;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&.has-cover {
|
||||
min-height: calc( var(--header-height) / 3 );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.header-cover:not(:only-child) {
|
||||
float: right;
|
||||
position: relative;
|
||||
z-index: 30;
|
||||
background-color: var(--body-bg);
|
||||
margin: 0 0 v.$mp-4 v.$mp-4;
|
||||
|
||||
.cover {
|
||||
max-width: calc(var(--header-height) * 2);
|
||||
height: var(--header-height);
|
||||
}
|
||||
}
|
||||
.header-cover:only-child {
|
||||
width: 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 {
|
||||
margin-top: v.$mp-6;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: v.$mp-6;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- ---- list
|
||||
.list-item {
|
||||
&.logs {
|
||||
.track {
|
||||
margin-right: v.$mp-3;
|
||||
.icon {
|
||||
margin-right: v.$mp-2;
|
||||
color: var(--secondary-color-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3n):not(.wide) .media,
|
||||
{
|
||||
border-color: var(--main-color-dark) !important;
|
||||
}
|
||||
|
||||
&:nth-child(3n+1):not(.wide) .media,
|
||||
{
|
||||
border-color: var(--secondary-color-dark) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---- responsive
|
||||
@media screen and (max-width: v.$screen-normal) {
|
||||
.page .container {
|
||||
margin-left: v.$mp-4;
|
||||
margin-right: v.$mp-4;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: v.$screen-small) {
|
||||
.page .container {
|
||||
margin-left: v.$mp-2;
|
||||
margin-right: v.$mp-2;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
@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;
|
||||
$screen-small: 600px;
|
||||
$screen-smaller: 900px;
|
||||
$screen-normal: 1024px;
|
||||
$screen-wider: 1280px;
|
||||
$screen-wide: 1380px;
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
@import 'v-calendar/style.css';
|
||||
// @import '@fortawesome/fontawesome-free/css/all.min.css';
|
||||
|
||||
// ---- bulma
|
||||
$body-color: #000;
|
||||
$title-color: #000;
|
||||
$modal-content-width: 80%;
|
||||
|
||||
|
||||
@import "bulma/sass/utilities/_all.sass";
|
||||
|
||||
|
||||
@import "bulma/sass/base/_all";
|
||||
@import "bulma/sass/components/dropdown";
|
||||
// @import "bulma/sass/components/card";
|
||||
@import "bulma/sass/components/media";
|
||||
@import "bulma/sass/components/message";
|
||||
@import "bulma/sass/components/modal";
|
||||
//@import "bulma/sass/components/pagination";
|
||||
|
||||
@import "bulma/sass/form/_all";
|
||||
@import "bulma/sass/grid/_all";
|
||||
@import "bulma/sass/helpers/_all";
|
||||
@import "bulma/sass/layout/_all";
|
||||
@import "bulma/sass/elements/box";
|
||||
// @import "bulma/sass/elements/button";
|
||||
@import "bulma/sass/elements/container";
|
||||
// @import "bulma/sass/elements/content";
|
||||
@import "bulma/sass/elements/icon";
|
||||
// @import "bulma/sass/elements/image";
|
||||
// @import "bulma/sass/elements/notification";
|
||||
// @import "bulma/sass/elements/progress";
|
||||
@import "bulma/sass/elements/table";
|
||||
@import "bulma/sass/elements/tag";
|
||||
//@import "bulma/sass/elements/title";
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
/**
|
||||
* Run function with provided args only if document is not hidden
|
||||
*/
|
||||
export function setEcoTimeout(func, ...args) {
|
||||
return setTimeout((...args) => {
|
||||
!document.hidden && func(...args)
|
||||
}, ...args)
|
||||
}
|
||||
|
||||
/**
|
||||
* Run function at specific interval only if document is not hidden
|
||||
*/
|
||||
export function setEcoInterval(func, ...args) {
|
||||
return setInterval((...args) => {
|
||||
!document.hidden && func(...args)
|
||||
}, ...args)
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
import {createApp} from 'vue'
|
||||
|
||||
import PageLoad from './pageLoad'
|
||||
import BackgroundLoad from './backgroundLoad'
|
||||
|
||||
|
||||
/**
|
||||
* Handles loading Vue js app on page load.
|
||||
*/
|
||||
export default class VueLoader {
|
||||
constructor({el=null, props={}, ...appConfig}={}, loaderOptions={}) {
|
||||
this.appConfig = appConfig
|
||||
this.appConfig.el = el
|
||||
this.props = props
|
||||
this.pageLoad = new PageLoad(el, loaderOptions)
|
||||
|
||||
this.pageLoad.onPreMount = event => this.onPreMount(event)
|
||||
this.pageLoad.onMount = event => this.onMount(event)
|
||||
|
||||
this.backgroundLoad = new BackgroundLoad()
|
||||
}
|
||||
|
||||
enable(hotReload=true) {
|
||||
hotReload && this.pageLoad.enable(document.body)
|
||||
this.mount()
|
||||
}
|
||||
|
||||
mount() {
|
||||
if(this.app)
|
||||
this.unmount()
|
||||
|
||||
const app = createApp(this.appConfig, this.props)
|
||||
app.config.globalProperties.window = window
|
||||
this.vm = app.mount(this.pageLoad.el)
|
||||
this.app = app
|
||||
}
|
||||
|
||||
unmount() {
|
||||
if(!this.app)
|
||||
return
|
||||
try { this.app.unmount() }
|
||||
catch(_) { null }
|
||||
this.app = null
|
||||
this.vm = null
|
||||
this.pageLoad.reset()
|
||||
}
|
||||
|
||||
onPreMount() { this.unmount() }
|
||||
onMount() { this.mount() }
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import { resolve } from 'path'
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
],
|
||||
build: {
|
||||
outDir: "../static/aircox/",
|
||||
sourcemap: true,
|
||||
|
||||
rollupOptions: {
|
||||
external: ['vue',],
|
||||
input: {
|
||||
public: "src/public.js",
|
||||
admin: "src/admin.js",
|
||||
},
|
||||
output: {
|
||||
globals: {
|
||||
vue: 'Vue',
|
||||
},
|
||||
assetFileNames: "[name].[ext]",
|
||||
chunkFileNames: "[name].js",
|
||||
entryFileNames: "[name].js",
|
||||
},
|
||||
plugins: [commonjs()],
|
||||
},
|
||||
},
|
||||
css: {
|
||||
devSourcemap: true,
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js', '.ts', '.json', '.vue'],
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
// Enable styling body background while using vue hotreload
|
||||
// Tags with side effect (<script> and <style>) are ignored in client component templates.
|
||||
|
||||
|
||||
class BackgroundLoad {
|
||||
// change background style on load
|
||||
// and also on vuejs pageLoaded event
|
||||
|
||||
constructor () {
|
||||
let url = new URL(document.location);
|
||||
this.path = url.pathname;
|
||||
this.update();
|
||||
document.addEventListener("pageLoaded", this.handlePageLoad.bind(this), false);
|
||||
}
|
||||
|
||||
handlePageLoad (e) {
|
||||
this.path = e.detail;
|
||||
this.update();
|
||||
}
|
||||
|
||||
update () {
|
||||
let theme = this.get_theme_name();
|
||||
document.body.className = theme;
|
||||
|
||||
// home page uses different theme
|
||||
if (this.path == "/") {
|
||||
document.body.classList.add('home');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
get_theme_name () {
|
||||
var currentTime = new Date().getHours();
|
||||
if (document.body) {
|
||||
if (3 <= currentTime && currentTime <15) {
|
||||
return "yellow";
|
||||
}
|
||||
else {
|
||||
return "blue";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
window.onload = function() {
|
||||
let backgroundLoad = new BackgroundLoad();
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
Binary file not shown.
BIN
radiocampus/static/radiocampus/fonts/CampusGroteskv8-Regular.otf
Normal file
BIN
radiocampus/static/radiocampus/fonts/CampusGroteskv8-Regular.otf
Normal file
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 156 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 184 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 178 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 154 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 147 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 168 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 126 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 77 KiB |
|
|
@ -1,250 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1190.6 841.9">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.cls-1, .cls-2 {
|
||||
stroke-width: 0px;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #000;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g>
|
||||
<g>
|
||||
<path class="cls-2" d="M215.8-748.5c24.6.2,40.9,16,40.9,39.6s-15.6,43-38.9,43h-28.5l59,62.9h-25.2l-56.9-62.9h-12.6v62.9h-18.8v-145.5h81.1ZM153.5-684.1h64c13.3-.2,21.6-9.6,21.6-23.8s-8.3-22.3-21.6-22.5h-64v46.2Z"/>
|
||||
<path class="cls-2" d="M370.4-651.2h-66.3l-19.5,48.1h-19.3l58.4-145.5h26.7l58.4,145.5h-19.3l-19.3-48.1ZM363.2-669.4l-22.7-56.5-3.2-8.1-3.2,8.1-22.7,56.5h51.8Z"/>
|
||||
<path class="cls-2" d="M489.9-748.5c36.8.2,60.1,30.2,60.1,70.8s-19,74.7-61.4,74.7h-60.6v-145.5h61.8ZM446.9-621.2h45.6c25.5,0,39.4-22,39.4-55.4s-16.1-53.5-40.2-53.7h-44.7v109.1h0Z"/>
|
||||
<path class="cls-2" d="M657.2-620.8v17.8h-94.1v-17.8h38.5v-110h-32.1v-17.8h81.3v17.8h-31.5v110h37.9Z"/>
|
||||
</g>
|
||||
<path class="cls-2" d="M369.4-476.5h-66.3l-19.5,48.1h-19.3l58.4-145.5h26.7l58.4,145.5h-19.3l-19.3-48.1ZM362.1-494.7l-22.7-56.5-3.2-8.1-3.2,8.1-22.7,56.5h51.8Z"/>
|
||||
<path class="cls-2" d="M678.2-573.6c24.6.2,40.9,16,40.9,39.6s-15.6,43-38.9,43h-59.9v62.9h-18.8v-145.5h76.8ZM620.2-509.2h59.7c13.3-.2,21.6-9.6,21.6-23.7s-8.3-22.2-21.6-22.5h-59.7v46.2Z"/>
|
||||
<path class="cls-2" d="M849.6-471.1c-.2,29.8-20.5,47.3-54.8,47.3s-57.8-18.2-57.8-45.4v-104.4h19v102.1c.2,18.8,14.1,29.1,37.7,29.1s36.6-10.3,36.8-29.1v-102.1h19v102.5h0Z"/>
|
||||
<path class="cls-2" d="M929.4-442c17.8,0,30.8-6.8,30.8-21.4s-10.3-18.8-19.5-22c-11.8-4.1-21.4-5.6-35.1-9.6-17.1-5.1-29.7-19.7-29.7-40s15.6-42.6,47.7-42.6,38.1,4.1,55,22.5l-12.8,13.1c-15.2-14.8-34.2-17.3-43.2-17.3-17.3,0-27.8,11.1-27.8,23.5s6,19.3,20.1,23.3c7.3,2.1,18.6,5.4,34.4,10.1,23.5,7.1,29.7,21.4,29.7,38.7s-19.9,40-49.6,40-43.2-7.7-56.1-25.9l15.6-11.6c10.7,13.9,24.4,19.3,40.4,19.3Z"/>
|
||||
<path class="cls-2" d="M536.2-272.3v18.2h-103.2v-145.9h18.2v127.7h85Z"/>
|
||||
<path class="cls-2" d="M253.4-296.5c0,26.3-19.1,43-46,42.4l-9-.2h-63.4v-145.6h69.8c27.2,1.1,39,18.2,39,38.5s-3.9,21-9.2,27c10.7,7.3,18.8,20.8,18.8,37.9ZM153.2-340.8h51.8c14.8,0,20.5-8.6,20.5-20.3s-5.6-20.6-24.2-20.6h-48.2v40.9ZM235.2-298c0-13.5-7.3-24.6-24.8-24.6h-57.2v50.1h55c19.7,0,27-10.5,27-25.5Z"/>
|
||||
<g>
|
||||
<path class="cls-2" d="M301.9-381.8c0,10.1-8.2,18.3-18.3,18.3s-18.3-8.2-18.3-18.3,8.2-18.3,18.3-18.3,18.3,8.2,18.3,18.3Z"/>
|
||||
<circle class="cls-2" cx="393.6" cy="-381.8" r="18.3"/>
|
||||
<path class="cls-2" d="M338.6-345.3c0,10.1-8.2,18.3-18.3,18.4-10.1,0-18.3-8.2-18.4-18.3,0-10.1,8.2-18.3,18.3-18.4,10.1,0,18.3,8.2,18.4,18.3Z"/>
|
||||
<circle class="cls-2" cx="356.9" cy="-345.3" r="18.3"/>
|
||||
<path class="cls-2" d="M338.6-308.6c0,10.1-8.2,18.3-18.3,18.4-10.1,0-18.3-8.2-18.4-18.3,0-10.1,8.2-18.3,18.3-18.4,10.1,0,18.3,8.2,18.4,18.3Z"/>
|
||||
<circle class="cls-2" cx="357" cy="-308.7" r="18.3"/>
|
||||
<path class="cls-2" d="M301.9-271.8c0,10.1-8.2,18.3-18.3,18.3s-18.3-8.2-18.3-18.3,8.2-18.3,18.3-18.3c10.1,0,18.3,8.2,18.3,18.3Z"/>
|
||||
<circle class="cls-2" cx="393.6" cy="-271.8" r="18.3"/>
|
||||
</g>
|
||||
<polygon class="cls-2" points="428.4 -573.9 428.4 -428.6 439 -428.6 439 -557.1 480.8 -557.1 480.8 -428.6 501.2 -428.6 501.2 -557.1 544.2 -557.1 544.2 -428.6 569.8 -428.6 569.8 -573.9 428.4 -573.9"/>
|
||||
<polygon class="cls-2" points="253.5 -428.2 172.8 -428.2 172.8 -463.1 134.9 -463.1 134.9 -549.4 173.3 -549.4 173.3 -574.4 216.5 -574.4 216.5 -557.4 190.3 -557.4 190.3 -532.4 151.9 -532.4 151.9 -480.1 189.8 -480.1 189.8 -445.2 253.5 -445.2 253.5 -428.2"/>
|
||||
<path class="cls-2" d="M809.9-693.8c6.1,4.5,12.4,8.6,18.8,12.5v-21.3c-2.8-1.8-5.5-3.7-8.1-5.7-16-11.8-29.8-25.3-41.5-40.3h-22.2c14.1,20.9,31.9,39.2,53,54.8Z"/>
|
||||
<path class="cls-2" d="M695.8-655.8c-7.1-5.4-14.5-10.4-22.1-14.9v21.3c3.8,2.5,7.5,5.2,11.2,7.9,14.8,11.3,27.8,24.1,39,38.4h22.3c-13.7-20-30.6-37.7-50.4-52.8Z"/>
|
||||
<path class="cls-2" d="M828.7-648.7v-21.6c-3.8,2.4-7.5,4.8-11.1,7.4-24.3,17-44.8,37.5-60.5,60h22.5c13.7-17.2,30.4-32.7,49.1-45.7Z"/>
|
||||
<path class="cls-2" d="M746.5-748.7h-22.1c-13.9,18.4-31.1,34.2-50.8,47v21.1c29.4-17.1,54.4-40.3,72.8-68.1Z"/>
|
||||
<path class="cls-2" d="M760-347.3c0,69.6-16.9,97.2-53.1,97.2s-39.4-10.3-47.7-25.7l14.1-10.1c6.6,12.2,17.1,18,34.5,18s32.3-12.4,34.5-44.3c-9,7.9-21.2,13.1-34.7,13.1-31.7,0-52.2-24-52.2-48.2s20.8-56.9,52.2-56.9c31.3,0,52.4,24.2,52.4,56.9ZM743.8-350.5c0-23.1-17.6-34.2-36.2-34.2s-34.7,11.1-34.7,34.2,14.8,33.4,34.7,33.4c20.8,0,36.2-13.5,36.2-33.4Z"/>
|
||||
<path class="cls-2" d="M875.6-272.8v18.4h-92.5v-18.4c57.4-42.6,71.7-60.8,71.7-83.7s-11.3-28.9-31.7-28.9-33,11.3-26.8,39.2l-17.1,7.9c-9.2-30.2,4.7-65.9,45.6-65.9s47.3,18.2,47.3,43.9-21,59.5-62.9,87.6h66.4Z"/>
|
||||
<path class="cls-2" d="M907.7-276.4v22h-22v-22h22Z"/>
|
||||
<path class="cls-2" d="M960.6-399.9h18.4v145.8h-18.4v-122.7l-39,37.9v-22.7l39-38.3Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="cls-2" d="M1448.4-1634.5c24.6.2,40.9,16,40.9,39.6s-15.6,43-38.9,43h-28.5l59,62.9h-25.2l-56.9-62.9h-12.6v62.9h-18.8v-145.5h81.1ZM1386.1-1570.1h64c13.3-.2,21.6-9.6,21.6-23.8s-8.3-22.3-21.6-22.5h-64v46.2Z"/>
|
||||
<path class="cls-2" d="M1603-1537.1h-66.3l-19.5,48.1h-19.3l58.4-145.5h26.7l58.4,145.5h-19.3l-19.3-48.1ZM1595.7-1555.3l-22.7-56.5-3.2-8.1-3.2,8.1-22.7,56.5h51.8Z"/>
|
||||
<path class="cls-2" d="M1722.4-1634.5c36.8.2,60.1,30.2,60.1,70.8s-19,74.7-61.4,74.7h-60.6v-145.5h61.8ZM1679.4-1507.2h45.6c25.5,0,39.4-22,39.4-55.4s-16.1-53.5-40.2-53.7h-44.7v109.1h0Z"/>
|
||||
<path class="cls-2" d="M1889.8-1506.7v17.8h-94.1v-17.8h38.5v-110h-32.1v-17.8h81.3v17.8h-31.5v110h37.9Z"/>
|
||||
<path class="cls-2" d="M1602-1362.4h-66.3l-19.5,48.1h-19.3l58.4-145.5h26.7l58.4,145.5h-19.3l-19.3-48.1ZM1594.7-1380.6l-22.7-56.5-3.2-8.1-3.2,8.1-22.7,56.5h51.8Z"/>
|
||||
<path class="cls-2" d="M1910.8-1459.6c24.6.2,40.9,16,40.9,39.6s-15.6,43-38.9,43h-59.9v62.9h-18.8v-145.5h76.8ZM1852.8-1395.2h59.7c13.3-.2,21.6-9.6,21.6-23.8s-8.3-22.2-21.6-22.5h-59.7v46.2Z"/>
|
||||
<path class="cls-2" d="M2082.2-1357.1c-.2,29.7-20.5,47.3-54.8,47.3s-57.8-18.2-57.8-45.4v-104.4h19v102.1c.2,18.8,14.1,29.1,37.7,29.1s36.6-10.3,36.8-29.1v-102.1h19v102.5h0Z"/>
|
||||
<path class="cls-2" d="M2162-1328c17.8,0,30.8-6.8,30.8-21.4s-10.3-18.8-19.5-22c-11.8-4.1-21.4-5.6-35.1-9.6-17.1-5.1-29.7-19.7-29.7-40s15.6-42.6,47.7-42.6,38.1,4.1,55,22.5l-12.8,13.1c-15.2-14.8-34.2-17.3-43.2-17.3-17.3,0-27.8,11.1-27.8,23.5s6,19.3,20.1,23.3c7.3,2.1,18.6,5.4,34.4,10.1,23.5,7.1,29.7,21.4,29.7,38.7s-19.9,40-49.6,40-43.2-7.7-56.1-25.9l15.6-11.6c10.7,13.9,24.4,19.3,40.4,19.3Z"/>
|
||||
<polygon class="cls-2" points="1660.9 -1459.9 1660.9 -1314.5 1671.6 -1314.5 1671.6 -1443.1 1713.3 -1443.1 1713.3 -1314.5 1733.8 -1314.5 1733.8 -1443.1 1776.7 -1443.1 1776.7 -1314.5 1802.4 -1314.5 1802.4 -1459.9 1660.9 -1459.9"/>
|
||||
<polygon class="cls-2" points="1486.1 -1314.1 1405.3 -1314.1 1405.3 -1349.1 1367.5 -1349.1 1367.5 -1435.3 1405.9 -1435.3 1405.9 -1460.4 1449 -1460.4 1449 -1443.4 1422.9 -1443.4 1422.9 -1418.3 1384.5 -1418.3 1384.5 -1366.1 1422.3 -1366.1 1422.3 -1331.1 1486.1 -1331.1 1486.1 -1314.1"/>
|
||||
<path class="cls-2" d="M2050.1-1548.9c-24.3,17-44.8,37.5-60.5,60h22.5c13.7-17.2,30.4-32.7,49.1-45.7v-21.6c-3.8,2.4-7.5,4.8-11.1,7.4Z"/>
|
||||
<path class="cls-2" d="M2042.5-1579.8c6.1,4.5,12.4,8.7,18.8,12.6v-21.3c-2.8-1.8-5.5-3.7-8.1-5.7-16-11.8-29.8-25.3-41.5-40.3h-22.2c14.1,20.9,31.9,39.2,53,54.8Z"/>
|
||||
<path class="cls-2" d="M1979.1-1634.6h-22.1c-13.9,18.4-31.1,34.2-50.8,47v21.1c29.5-17.1,54.4-40.3,72.9-68.1Z"/>
|
||||
<path class="cls-2" d="M1928.3-1541.7c-7.1-5.4-14.5-10.3-22.1-14.9v21.3c3.8,2.5,7.5,5.2,11.2,7.9,14.8,11.3,27.8,24.1,39,38.4h22.3c-13.7-20-30.6-37.7-50.4-52.8Z"/>
|
||||
<path class="cls-2" d="M1408.8-1192.9c0,10.2-8.2,18.5-18.5,18.5-10.2,0-18.5-8.2-18.5-18.5,0-10.2,8.2-18.5,18.5-18.5,10.2,0,18.5,8.3,18.5,18.5Z"/>
|
||||
<path class="cls-2" d="M1445.8-1193c0,10.2-8.2,18.5-18.5,18.5-10.2,0-18.5-8.2-18.5-18.5,0-10.2,8.3-18.5,18.5-18.5,10.2,0,18.5,8.3,18.5,18.5Z"/>
|
||||
<path class="cls-2" d="M1408.8-1155.9c0,10.2-8.3,18.5-18.5,18.5-10.2,0-18.5-8.2-18.5-18.5,0-10.2,8.3-18.5,18.5-18.5,10.2,0,18.5,8.2,18.5,18.5Z"/>
|
||||
<path class="cls-2" d="M1445.8-1156c0,10.2-8.3,18.5-18.5,18.5-10.2,0-18.5-8.2-18.5-18.5,0-10.2,8.2-18.5,18.5-18.5,10.2,0,18.5,8.2,18.5,18.5Z"/>
|
||||
<path class="cls-2" d="M1584.4-1182.4c0,26.3-19,43-46,42.4l-9-.2h-63.3v-145.5h69.8c27.2,1.1,38.9,18.2,38.9,38.5s-3.9,21-9.2,27c10.7,7.3,18.8,20.8,18.8,37.9ZM1484.2-1226.7h51.8c14.8,0,20.5-8.6,20.5-20.3s-5.6-20.5-24.2-20.5h-48.2v40.9ZM1566.2-1183.9c0-13.5-7.3-24.6-24.8-24.6h-57.1v50.1h55c19.7,0,27-10.5,27-25.5Z"/>
|
||||
<path class="cls-2" d="M1620.8-1267.5v40.9h77.2v18.2h-77.2v50.1h85.8v18.2h-104v-145.5h104v18.2h-85.8Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="cls-2" d="M1448.8-748.7c24.6.2,40.9,16,40.9,39.6s-15.6,43-38.9,43h-28.5l59,62.9h-25.2l-56.9-62.9h-12.6v62.9h-18.8v-145.5h81.1ZM1386.6-684.3h64c13.3-.2,21.6-9.6,21.6-23.8s-8.3-22.3-21.6-22.5h-64v46.2Z"/>
|
||||
<path class="cls-2" d="M1603.5-651.4h-66.3l-19.5,48.1h-19.3l58.4-145.5h26.7l58.4,145.5h-19.3l-19.3-48.1ZM1596.2-669.5l-22.7-56.5-3.2-8.1-3.2,8.1-22.7,56.5h51.8Z"/>
|
||||
<path class="cls-2" d="M1722.9-748.7c36.8.2,60.1,30.2,60.1,70.8s-19,74.7-61.4,74.7h-60.6v-145.5h61.8ZM1679.9-621.4h45.6c25.5,0,39.4-22,39.4-55.4s-16.1-53.5-40.2-53.7h-44.7v109.1h0Z"/>
|
||||
<path class="cls-2" d="M1890.3-621v17.8h-94.1v-17.8h38.5v-110h-32.1v-17.8h81.3v17.8h-31.5v110h37.9Z"/>
|
||||
<path class="cls-2" d="M1602.5-476.7h-66.3l-19.5,48.1h-19.3l58.4-145.5h26.7l58.4,145.5h-19.3l-19.3-48.1ZM1595.2-494.9l-22.7-56.5-3.2-8.1-3.2,8.1-22.7,56.5h51.8Z"/>
|
||||
<path class="cls-2" d="M1911.3-573.8c24.6.2,40.9,16,40.9,39.6s-15.6,43-38.9,43h-59.9v62.9h-18.8v-145.5h76.8ZM1853.3-509.4h59.7c13.3-.2,21.6-9.6,21.6-23.8s-8.3-22.2-21.6-22.5h-59.7v46.2Z"/>
|
||||
<path class="cls-2" d="M2082.6-471.3c-.2,29.7-20.5,47.3-54.8,47.3s-57.8-18.2-57.8-45.4v-104.4h19v102.1c.2,18.8,14.1,29.1,37.7,29.1s36.6-10.3,36.8-29.1v-102.1h19v102.5h0Z"/>
|
||||
<path class="cls-2" d="M2162.5-442.2c17.8,0,30.8-6.8,30.8-21.4s-10.3-18.8-19.5-22c-11.8-4.1-21.4-5.6-35.1-9.6-17.1-5.1-29.7-19.7-29.7-40s15.6-42.6,47.7-42.6,38.1,4.1,55,22.5l-12.8,13.1c-15.2-14.8-34.2-17.3-43.2-17.3-17.3,0-27.8,11.1-27.8,23.5s6,19.3,20.1,23.3c7.3,2.1,18.6,5.4,34.4,10.1,23.5,7.1,29.7,21.4,29.7,38.7s-19.9,40-49.6,40-43.2-7.7-56.1-25.9l15.6-11.6c10.7,13.9,24.4,19.3,40.4,19.3Z"/>
|
||||
<polygon class="cls-2" points="1661.4 -574.1 1661.4 -428.8 1672.1 -428.8 1672.1 -557.3 1713.8 -557.3 1713.8 -428.8 1734.2 -428.8 1734.2 -557.3 1777.2 -557.3 1777.2 -428.8 1802.8 -428.8 1802.8 -574.1 1661.4 -574.1"/>
|
||||
<polygon class="cls-2" points="1486.6 -428.4 1405.8 -428.4 1405.8 -463.3 1368 -463.3 1368 -549.6 1406.4 -549.6 1406.4 -574.6 1449.5 -574.6 1449.5 -557.6 1423.4 -557.6 1423.4 -532.6 1385 -532.6 1385 -480.3 1422.8 -480.3 1422.8 -445.4 1486.6 -445.4 1486.6 -428.4"/>
|
||||
<path class="cls-2" d="M2050.6-663.1c-24.3,17-44.8,37.5-60.5,60h22.5c13.7-17.2,30.4-32.7,49.1-45.7v-21.6c-3.8,2.4-7.5,4.8-11.1,7.4Z"/>
|
||||
<path class="cls-2" d="M2042.9-694c6.1,4.5,12.4,8.7,18.8,12.6v-21.3c-2.8-1.8-5.5-3.7-8.1-5.7-16-11.8-29.8-25.3-41.5-40.3h-22.2c14.1,20.9,31.9,39.2,53,54.8Z"/>
|
||||
<path class="cls-2" d="M1979.6-748.8h-22.1c-13.9,18.4-31.1,34.2-50.8,47v21.1c29.5-17.1,54.4-40.3,72.9-68.1Z"/>
|
||||
<path class="cls-2" d="M1928.8-655.9c-7.1-5.4-14.5-10.3-22.1-14.9v21.3c3.8,2.5,7.5,5.2,11.2,7.9,14.8,11.3,27.8,24.1,39,38.4h22.3c-13.7-20-30.6-37.7-50.4-52.8Z"/>
|
||||
<g>
|
||||
<path class="cls-2" d="M1409.3-307.2c0,10.2-8.2,18.5-18.5,18.5-10.2,0-18.5-8.2-18.5-18.5,0-10.2,8.3-18.5,18.5-18.5,10.2,0,18.5,8.3,18.5,18.5Z"/>
|
||||
<path class="cls-2" d="M1446.3-307.2c0,10.2-8.2,18.5-18.5,18.5-10.2,0-18.5-8.2-18.5-18.5,0-10.2,8.3-18.5,18.5-18.5,10.2,0,18.5,8.2,18.5,18.5Z"/>
|
||||
<path class="cls-2" d="M1409.3-270.2c0,10.2-8.3,18.5-18.5,18.5-10.2,0-18.5-8.2-18.5-18.5s8.2-18.5,18.5-18.5c10.2,0,18.5,8.2,18.5,18.5Z"/>
|
||||
<circle class="cls-2" cx="1427.8" cy="-270.2" r="18.5"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="cls-2" d="M1584.9-296.6c0,26.3-19,43-46,42.4l-9-.2h-63.3v-145.5h69.8c27.2,1.1,38.9,18.2,38.9,38.5s-3.9,21-9.2,27c10.7,7.3,18.8,20.8,18.8,37.9ZM1484.7-340.9h51.8c14.8,0,20.5-8.6,20.5-20.3s-5.6-20.5-24.2-20.5h-48.1v40.9ZM1566.7-298.1c0-13.5-7.3-24.6-24.8-24.6h-57.1v50.1h55c19.7,0,27-10.5,27-25.5Z"/>
|
||||
<path class="cls-2" d="M1621.3-381.8v40.9h77.2v18.2h-77.2v50.1h85.8v18.2h-104v-145.5h104v18.2h-85.8Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="cls-2" d="M1993.6-346.7c0,69.6-16.9,97.2-53.1,97.2s-39.4-10.3-47.7-25.7l14.1-10.1c6.6,12.2,17.1,18,34.5,18s32.3-12.4,34.5-44.3c-9,7.9-21.2,13.1-34.7,13.1-31.7,0-52.2-24-52.2-48.2s20.8-56.9,52.2-56.9c31.3,0,52.4,24.2,52.4,56.9ZM1977.4-349.9c0-23.1-17.6-34.3-36.2-34.3s-34.7,11.1-34.7,34.3,14.8,33.4,34.7,33.4c20.8,0,36.2-13.5,36.2-33.4Z"/>
|
||||
<path class="cls-2" d="M2109.2-272.2v18.4h-92.5v-18.4c57.4-42.6,71.7-60.8,71.7-83.7s-11.3-28.9-31.7-28.9-33,11.3-26.8,39.2l-17.1,7.9c-9.2-30.2,4.7-65.9,45.6-65.9s47.3,18.2,47.3,43.9-21,59.5-62.9,87.6h66.4Z"/>
|
||||
<path class="cls-2" d="M2141.3-275.8v22h-22v-22h22Z"/>
|
||||
<path class="cls-2" d="M2194.2-399.3h18.4v145.8h-18.4v-122.7l-39,37.9v-22.7l39-38.3Z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<path class="cls-2" d="M3011.2-678.5c.2-.1.4-.2.6-.4h-1.2c.2.1.4.2.6.4Z"/>
|
||||
<path class="cls-2" d="M2744.4-663.2c-24.3,17-44.8,37.5-60.5,60h22.5c13.7-17.2,30.4-32.7,49.1-45.7v-21.6c-3.8,2.4-7.5,4.8-11.1,7.4Z"/>
|
||||
<path class="cls-2" d="M2736.8-694.1c6.1,4.5,12.4,8.7,18.8,12.6v-21.3c-2.8-1.8-5.5-3.7-8.1-5.7-16-11.8-29.8-25.3-41.5-40.3h-22.2c14.1,20.9,31.9,39.2,53,54.8Z"/>
|
||||
<path class="cls-2" d="M2673.4-748.9h-22.1c-13.9,18.4-31.1,34.2-50.8,47v21.1c29.5-17.1,54.4-40.3,72.8-68.1Z"/>
|
||||
<path class="cls-2" d="M2622.6-656c-7.1-5.4-14.5-10.3-22.1-14.9v21.3c3.8,2.5,7.5,5.2,11.2,7.9,14.8,11.3,27.8,24.1,39,38.4h22.3c-13.7-20-30.6-37.7-50.4-52.8Z"/>
|
||||
<polygon class="cls-2" points="2912.4 -602.8 2831.7 -602.8 2831.7 -637.7 2793.8 -637.7 2793.8 -723.9 2832.2 -723.9 2832.2 -749 2875.4 -749 2875.4 -732 2849.2 -732 2849.2 -706.9 2810.8 -706.9 2810.8 -654.7 2848.7 -654.7 2848.7 -619.8 2912.4 -619.8 2912.4 -602.8"/>
|
||||
<polygon class="cls-2" points="2944.5 -748 2944.5 -602.6 2955.1 -602.6 2955.1 -731.2 2996.9 -731.2 2996.9 -602.6 3017.3 -602.6 3017.3 -731.2 3060.3 -731.2 3060.3 -602.6 3085.9 -602.6 3085.9 -748 2944.5 -748"/>
|
||||
<path class="cls-2" d="M3162.6-733.1c0,10.5-8.5,19.1-19.1,19.1s-19.1-8.5-19.1-19.1,8.5-19.1,19.1-19.1,19.1,8.5,19.1,19.1Z"/>
|
||||
<circle class="cls-2" cx="3258" cy="-733.1" r="19.1"/>
|
||||
<path class="cls-2" d="M3200.7-695.1c0,10.5-8.5,19.1-19,19.1s-19.1-8.5-19.1-19c0-10.5,8.5-19.1,19-19.1,10.5,0,19.1,8.5,19.1,19Z"/>
|
||||
<circle class="cls-2" cx="3219.8" cy="-695.1" r="19.1"/>
|
||||
<path class="cls-2" d="M3200.8-656.9c0,10.5-8.5,19.1-19,19.1-10.5,0-19.1-8.5-19.1-19s8.5-19.1,19-19.1,19.1,8.5,19.1,19Z"/>
|
||||
<circle class="cls-2" cx="3219.9" cy="-656.9" r="19.1"/>
|
||||
<path class="cls-2" d="M3162.6-618.6c0,10.5-8.5,19.1-19.1,19.1s-19.1-8.5-19.1-19.1,8.5-19.1,19.1-19.1,19.1,8.5,19.1,19.1Z"/>
|
||||
<circle class="cls-2" cx="3258" cy="-618.6" r="19.1"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="cls-2" d="M2765-1536.3c-27.7,19.4-51.1,42.7-69,68.4h25.6c15.6-19.6,34.6-37.3,56-52.1v-24.7c-4.3,2.7-8.5,5.5-12.7,8.4Z"/>
|
||||
<path class="cls-2" d="M2756.2-1571.5c6.9,5.1,14.1,9.9,21.5,14.3v-24.3c-3.1-2.1-6.2-4.3-9.3-6.5-18.2-13.4-34-28.8-47.3-46h-25.3c16.1,23.8,36.3,44.8,60.4,62.5Z"/>
|
||||
<path class="cls-2" d="M2683.9-1634h-25.2c-15.9,20.9-35.5,39-57.9,53.6v24.1c33.6-19.5,62-45.9,83.1-77.7Z"/>
|
||||
<path class="cls-2" d="M2626-1528.1c-8.1-6.1-16.5-11.8-25.2-17v24.3c4.3,2.9,8.6,5.9,12.7,9.1,16.9,12.8,31.7,27.5,44.5,43.8h25.4c-15.7-22.8-34.9-43-57.5-60.2Z"/>
|
||||
<polygon class="cls-2" points="2951.8 -1466.7 2859.7 -1466.7 2859.7 -1506.5 2816.6 -1506.5 2816.6 -1604.9 2860.3 -1604.9 2860.3 -1633.5 2909.6 -1633.5 2909.6 -1614.1 2879.7 -1614.1 2879.7 -1585.5 2835.9 -1585.5 2835.9 -1525.9 2879.1 -1525.9 2879.1 -1486.1 2951.8 -1486.1 2951.8 -1466.7"/>
|
||||
<polygon class="cls-2" points="2600.8 -1442.6 2600.8 -1276.8 2612.9 -1276.8 2612.9 -1423.4 2660.5 -1423.4 2660.5 -1276.8 2683.9 -1276.8 2683.9 -1423.4 2732.9 -1423.4 2732.9 -1276.8 2762.1 -1276.8 2762.1 -1442.6 2600.8 -1442.6"/>
|
||||
<path class="cls-2" d="M2854.6-1421c0,11.5-9.4,20.9-20.9,20.9s-20.9-9.4-20.9-20.9,9.4-20.9,20.9-20.9c11.5,0,20.9,9.4,20.9,20.9Z"/>
|
||||
<circle class="cls-2" cx="2959.1" cy="-1421" r="20.9"/>
|
||||
<path class="cls-2" d="M2896.4-1379.4c0,11.5-9.3,20.9-20.9,20.9-11.5,0-20.9-9.3-20.9-20.9,0-11.5,9.3-20.9,20.9-20.9,11.5,0,20.9,9.3,20.9,20.9Z"/>
|
||||
<path class="cls-2" d="M2938.2-1379.5c0,11.5-9.3,20.9-20.9,20.9-11.5,0-20.9-9.3-20.9-20.9,0-11.5,9.3-20.9,20.9-20.9,11.5,0,20.9,9.3,20.9,20.9Z"/>
|
||||
<path class="cls-2" d="M2896.5-1337.6c0,11.5-9.3,20.9-20.9,20.9-11.5,0-20.9-9.3-20.9-20.9,0-11.5,9.3-20.9,20.9-20.9,11.5,0,20.9,9.3,20.9,20.9Z"/>
|
||||
<circle class="cls-2" cx="2917.4" cy="-1337.6" r="20.9"/>
|
||||
<path class="cls-2" d="M2854.6-1295.6c0,11.5-9.4,20.9-20.9,20.9s-20.9-9.4-20.9-20.9,9.4-20.9,20.9-20.9c11.5,0,20.9,9.4,20.9,20.9Z"/>
|
||||
<path class="cls-2" d="M2980-1295.6c0,11.5-9.4,20.9-20.9,20.9s-20.9-9.4-20.9-20.9,9.4-20.9,20.9-20.9c11.5,0,20.9,9.4,20.9,20.9Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path class="cls-2" d="M215.5-1634c24.6.2,40.9,16,40.9,39.6s-15.6,43-38.9,43h-28.5l59,62.9h-25.2l-56.9-62.9h-12.6v62.9h-18.8v-145.5h81.1ZM153.2-1569.6h64c13.3-.2,21.6-9.6,21.6-23.8s-8.3-22.3-21.6-22.5h-64v46.2Z"/>
|
||||
<path class="cls-2" d="M370.1-1536.7h-66.3l-19.5,48.1h-19.3l58.4-145.5h26.7l58.4,145.5h-19.3l-19.3-48.1ZM362.8-1554.9l-22.7-56.5-3.2-8.1-3.2,8.1-22.7,56.5h51.8Z"/>
|
||||
<path class="cls-2" d="M489.5-1634c36.8.2,60.1,30.2,60.1,70.8s-19,74.7-61.4,74.7h-60.6v-145.5h61.8ZM446.5-1506.7h45.6c25.5,0,39.4-22,39.4-55.4s-16-53.5-40.2-53.7h-44.7v109.1h0Z"/>
|
||||
<path class="cls-2" d="M656.9-1506.3v17.8h-94.1v-17.8h38.5v-110h-32.1v-17.8h81.3v17.8h-31.5v110h37.9Z"/>
|
||||
</g>
|
||||
<path class="cls-2" d="M369.1-1362h-66.3l-19.5,48.1h-19.3l58.4-145.5h26.7l58.4,145.5h-19.3l-19.3-48.1ZM361.8-1380.2l-22.7-56.5-3.2-8.1-3.2,8.1-22.7,56.5h51.8Z"/>
|
||||
<path class="cls-2" d="M677.9-1459.1c24.6.2,40.9,16,40.9,39.6s-15.6,43-38.9,43h-59.9v62.9h-18.8v-145.5h76.8ZM619.9-1394.7h59.7c13.3-.2,21.6-9.6,21.6-23.8s-8.3-22.2-21.6-22.5h-59.7v46.2Z"/>
|
||||
<path class="cls-2" d="M849.3-1356.6c-.2,29.7-20.5,47.3-54.8,47.3s-57.8-18.2-57.8-45.4v-104.4h19v102.1c.2,18.8,14.1,29.1,37.7,29.1s36.6-10.3,36.8-29.1v-102.1h19v102.5h0Z"/>
|
||||
<path class="cls-2" d="M929.1-1327.5c17.8,0,30.8-6.8,30.8-21.4s-10.3-18.8-19.5-22c-11.8-4.1-21.4-5.6-35.1-9.6-17.1-5.1-29.7-19.7-29.7-40s15.6-42.6,47.7-42.6,38.1,4.1,55,22.5l-12.8,13.1c-15.2-14.8-34.2-17.3-43.2-17.3-17.3,0-27.8,11.1-27.8,23.5s6,19.3,20.1,23.3c7.3,2.1,18.6,5.4,34.4,10.1,23.5,7.1,29.7,21.4,29.7,38.7s-19.9,40-49.6,40-43.2-7.7-56.1-25.9l15.6-11.6c10.7,13.9,24.4,19.3,40.4,19.3Z"/>
|
||||
<path class="cls-2" d="M535.8-1157.8v18.2h-103.2v-145.9h18.2v127.7h85Z"/>
|
||||
<path class="cls-2" d="M253.1-1182c0,26.3-19.1,43-46,42.4l-9-.2h-63.4v-145.6h69.8c27.2,1.1,39,18.2,39,38.5s-3.9,21-9.2,27c10.7,7.3,18.8,20.8,18.8,37.9ZM152.9-1226.3h51.8c14.8,0,20.5-8.6,20.5-20.3s-5.6-20.6-24.2-20.6h-48.2v40.9h0ZM234.9-1183.5c0-13.5-7.3-24.6-24.8-24.6h-57.2v50.1h55c19.7,0,27-10.5,27-25.5Z"/>
|
||||
<g>
|
||||
<circle class="cls-2" cx="283.3" cy="-1267.3" r="18.3"/>
|
||||
<circle class="cls-2" cx="393.3" cy="-1267.3" r="18.3"/>
|
||||
<path class="cls-2" d="M338.3-1230.8c0,10.1-8.2,18.3-18.3,18.4-10.1,0-18.3-8.2-18.4-18.3,0-10.1,8.2-18.3,18.3-18.4,10.1,0,18.3,8.2,18.4,18.3Z"/>
|
||||
<circle class="cls-2" cx="356.6" cy="-1230.8" r="18.3"/>
|
||||
<path class="cls-2" d="M338.3-1194.2c0,10.1-8.2,18.3-18.3,18.4-10.1,0-18.3-8.2-18.4-18.3,0-10.1,8.2-18.3,18.3-18.4,10.1,0,18.3,8.2,18.4,18.3Z"/>
|
||||
<circle class="cls-2" cx="356.6" cy="-1194.2" r="18.3"/>
|
||||
<circle class="cls-2" cx="283.3" cy="-1157.3" r="18.3"/>
|
||||
<circle class="cls-2" cx="393.3" cy="-1157.3" r="18.3"/>
|
||||
</g>
|
||||
<polygon class="cls-2" points="253.2 -1313.7 172.4 -1313.7 172.4 -1348.6 134.6 -1348.6 134.6 -1434.9 173 -1434.9 173 -1459.9 216.2 -1459.9 216.2 -1442.9 190 -1442.9 190 -1417.9 151.6 -1417.9 151.6 -1365.6 189.4 -1365.6 189.4 -1330.7 253.2 -1330.7 253.2 -1313.7"/>
|
||||
<path class="cls-2" d="M756.8-1487.9h22.5c0,0,.1-.2.2-.3h-22.6c0,0-.1.2-.2.3Z"/>
|
||||
<path class="cls-2" d="M673.4-1587.1v21.2c29.4-17.1,54.3-40.2,72.8-67.9h-22.2c-13.9,18.2-31,34-50.5,46.7Z"/>
|
||||
<path class="cls-2" d="M828.7-1533.8v-21.7c-3.7,2.3-7.4,4.8-11.1,7.3-24.4,17.1-44.9,37.6-60.6,60.1h22.6c13.7-17.2,30.4-32.6,49.1-45.7Z"/>
|
||||
<path class="cls-2" d="M695.5-1541c-7.1-5.4-14.5-10.4-22.1-14.9v21.3c3.8,2.5,7.5,5.2,11.2,7.9,14.8,11.3,27.9,24.2,39,38.5h22.4c-13.8-20.1-30.7-37.8-50.5-52.8Z"/>
|
||||
<path class="cls-2" d="M820.6-1593.7c-15.9-11.7-29.7-25.1-41.3-40.1h-22.3c14.1,20.8,31.8,39.1,52.9,54.6,6.1,4.5,12.3,8.6,18.8,12.5v-21.4c-2.7-1.8-5.4-3.7-8.1-5.7Z"/>
|
||||
<polygon class="cls-2" points="428 -1459.4 428 -1314.1 438.7 -1314.1 438.7 -1442.2 480.4 -1442.2 480.4 -1314.1 500.8 -1314.1 500.8 -1442.2 543.7 -1442.2 543.7 -1314.1 569.2 -1314.1 569.2 -1459.4 428 -1459.4"/>
|
||||
</g>
|
||||
<path class="cls-1" d="M1684.9,411c-11.5,0-20.9-9.3-20.9-20.9,0,11.5-9.3,20.9-20.9,20.9,11.5,0,20.9,9.3,20.9,20.9,0-11.5,9.3-20.9,20.9-20.9Z"/>
|
||||
<path class="cls-2" d="M1646.7,283.4v-39.9h-43.1v-25.6c.2,0,.4-.1.6-.2-.2,0-.4-.1-.6-.2v-33.6h43.8v-28.6h29.8v-19.4h-49.2v28.6h-43.8v98.3h43.1v39.9h92.1v-19.4h-72.7Z"/>
|
||||
<path class="cls-2" d="M1462.8,301.6h25.6c15.6-19.6,34.6-37.3,56-52.1v-24.7c-4.3,2.7-8.5,5.5-12.7,8.4-27.7,19.4-51.1,42.7-69,68.4Z"/>
|
||||
<path class="cls-2" d="M1535.1,181.5c-18.2-13.4-34-28.8-47.3-46h-25.3c16.1,23.8,36.3,44.8,60.4,62.5,3.5,2.6,7.1,5.1,10.8,7.5,3.5,2.3,7.1,4.6,10.7,6.8v-24.3c-3.1-2.1-6.2-4.3-9.3-6.5Z"/>
|
||||
<path class="cls-2" d="M1450.7,135.5h-25.2c-15.9,20.9-35.5,39-57.9,53.6v24.1c4.2-2.4,8.3-5,12.4-7.6,28.2-18.6,52.3-42.3,70.7-70.1Z"/>
|
||||
<path class="cls-2" d="M1424.8,301.6h25.4c-15.7-22.8-34.9-43-57.5-60.2-8.1-6.1-16.5-11.8-25.2-17v24.3c4.3,2.9,8.6,5.9,12.7,9.1,16.9,12.8,31.7,27.5,44.5,43.8Z"/>
|
||||
<polygon class="cls-2" points="1465.6 326.9 1447.3 326.9 1442.1 326.9 1369.8 326.9 1369.8 492.7 1382 492.7 1382 346.1 1429.6 346.1 1429.6 372 1429.6 492.7 1449.8 492.7 1452.9 492.7 1452.9 365.8 1452.9 347.6 1452.9 346.1 1460.7 346.1 1474.7 346.1 1501.9 346.1 1501.9 492.7 1531.1 492.7 1531.1 326.9 1470.8 326.9 1465.6 326.9"/>
|
||||
<path class="cls-2" d="M1601.3,369.4c11.5,0,20.9-9.4,20.9-20.9s-9.4-20.9-20.9-20.9-20.9,9.4-20.9,20.9,9.4,20.9,20.9,20.9Z"/>
|
||||
<circle class="cls-2" cx="1726.7" cy="348.5" r="20.9"/>
|
||||
<path class="cls-2" d="M1664,390.1c0-11.5-9.4-20.9-20.9-20.9-11.5,0-20.9,9.4-20.9,20.9,0,11.5,9.4,20.9,20.9,20.9,11.5,0,20.9-9.4,20.9-20.9Z"/>
|
||||
<circle class="cls-2" cx="1684.9" cy="390.1" r="20.9"/>
|
||||
<path class="cls-2" d="M1643.1,411c-11.5,0-20.9,9.4-20.9,20.9,0,11.5,9.4,20.9,20.9,20.9,11.5,0,20.9-9.4,20.9-20.9,0-11.5-9.4-20.9-20.9-20.9Z"/>
|
||||
<path class="cls-2" d="M1684.9,411c-11.5,0-20.9,9.4-20.9,20.9,0,11.5,9.4,20.9,20.9,20.9,11.5,0,20.9-9.4,20.9-20.9,0-11.5-9.4-20.9-20.9-20.9Z"/>
|
||||
<path class="cls-2" d="M1601.3,453c-11.5,0-20.9,9.4-20.9,20.9s9.4,20.9,20.9,20.9,20.9-9.4,20.9-20.9c0-11.5-9.4-20.9-20.9-20.9Z"/>
|
||||
<path class="cls-2" d="M1726.7,453c-11.5,0-20.9,9.4-20.9,20.9s9.4,20.9,20.9,20.9,20.9-9.4,20.9-20.9c0-11.5-9.4-20.9-20.9-20.9Z"/>
|
||||
<path class="cls-2" d="M1900.6,139.4h-125.5c-5.5,0-10,5-10,11.1v85c0,6.1,4.5,11.1,10,11.1h18.5c.1,0,.2,0,.3,0h0s58.9,0,58.9,0h0c0,0,.1.2.1.3v19.2c0,.1,0,.2,0,.2h-30.1s0,0,0-.2v-10h-3.7v10c0,2.2,1.7,3.9,3.8,3.9h30.1c2.1,0,3.8-1.8,3.8-3.9v-19.2c0-.1,0-.2,0-.3h25.1c.1,0,.2,0,.3,0h18.5c5.5,0,10-5,10-11.1v-85c0-6.1-4.5-11.1-10-11.1ZM1790.1,238.2v-59.5c0-2.5,1.7-4.6,3.8-4.6h87.8c2.1,0,3.8,2.1,3.8,4.6v59.5c0,2.5-1.6,4.5-3.7,4.6h-8c.3-.8.5-1.7.5-2.7v-41.6c0-3.5-2.6-6.4-5.8-6.4h-61.5c-3.2,0-5.8,2.9-5.8,6.4v41.6c0,1,.2,1.9.5,2.7h-8c-2,0-3.7-2.1-3.7-4.6ZM1822.7,242.4v-20.4c0-.2,0-.3,0-.4h30.1s.1.1.1.3v20.4c0,.2,0,.3,0,.3h0s-30.1,0-30.1,0h0s-.1-.2-.1-.4ZM1852.9,218h-30.1c-2.1,0-3.8,1.8-3.8,4.1v20.4c0,.1,0,.2,0,.4h-2.7c-.5,0-.9-.6-.9-1.3v-29.1c0-.7.4-1.3.9-1.3h43c.5,0,.9.6.9,1.3v29.1c0,.7-.4,1.3-.9,1.3h0s-2.7,0-2.7,0c0-.1,0-.2,0-.4v-20.4c0-2.2-1.7-4.1-3.8-4.1ZM1859.4,207.3h-43c-2.6,0-4.6,2.2-4.6,5v29.1c0,.5,0,.9.2,1.3h-4.8c-1.2,0-2.1-1.2-2.1-2.7v-41.6c0-1.5,1-2.6,2.1-2.6h61.5c1.2,0,2.1,1.2,2.1,2.6v41.6c0,1.5-1,2.6-2.1,2.6h0s-4.8,0-4.8,0c.1-.4.2-.9.2-1.3v-29.1c0-2.8-2.1-5-4.6-5ZM1906.9,235.4c0,4.1-2.8,7.3-6.3,7.3h-12.5c.8-1.3,1.3-2.9,1.3-4.6v-59.5c0-4.6-3.4-8.3-7.6-8.3h-87.8c-4.2,0-7.6,3.7-7.6,8.3v59.5c0,1.7.5,3.3,1.3,4.6h-12.5c-3.5,0-6.3-3.3-6.3-7.3v-85c0-4.1,2.8-7.3,6.3-7.3h125.5c3.5,0,6.3,3.3,6.3,7.3v85h0Z"/>
|
||||
<path class="cls-2" d="M2058,139h-126.3c-5.5,0-10,4.8-10,10.6v42.1h3.7v-42.1c0-3.8,2.8-6.9,6.3-6.9h126.3c3.5,0,6.3,3.1,6.3,6.9v80.9c0,3.3-2.8,7.1-6.3,7.1h-12.6c.8-1.3,1.2-2.8,1.2-4.4v-56.6c0-4.4-3.4-8-7.6-8h-88.4c-4.2,0-7.6,3.6-7.6,8v29.5h3.7v-29.5c0-2.4,1.7-4.3,3.9-4.3h88.4c2.1,0,3.9,1.9,3.9,4.3v56.6c0,2.4-1.8,4.4-3.9,4.4h0s-7.9,0-7.9,0c.3-.8.5-1.6.5-2.5v-39.6c0-3.4-2.6-6.1-5.9-6.1h-61.9c-3.2,0-5.9,2.8-5.9,6.1v20.6h3.7v-20.6c0-1.3,1-2.4,2.2-2.4h61.9c1.2,0,2.2,1.1,2.2,2.4v39.6c0,1.3-.9,2.4-1.9,2.5h-5c0-.4.2-.8.2-1.2v-27.7c0-2.7-2.1-4.9-4.7-4.9h-43.3c-2.6,0-4.7,2.2-4.7,4.9v14.4h3.7v-14.4c0-.6.4-1.1,1-1.1h43.3c.5,0,.9.5.9,1.1v27.7c0,.6-.4,1.2-.9,1.2h0s-2.7,0-2.7,0c0-.1,0-.2,0-.3v-19.4c0-2.2-1.7-4-3.8-4h-30.3c-2.1,0-3.8,1.8-3.8,4v10.1h3.7v-10.1c0-.2,0-.2.1-.2h30.3s.1,0,.1.2v19.4c0,.2,0,.3-.1.3h0s-30.1,0-30.1,0v3.7s45.9,0,45.9,0h0c.2,0,.4,0,.6,0h31.6c5.4,0,10-5,10-10.8v-80.9c0-5.9-4.5-10.6-10-10.6Z"/>
|
||||
<path class="cls-2" d="M2010.1,261c0,.2,0,.2-.1.2h-30.3s-.1,0-.1-.2v-19.4c0-.2,0-.3.1-.3v-3.7c-2.1,0-3.8,1.8-3.8,4v19.4c0,2.2,1.7,4,3.8,4h30.3c2.1,0,3.8-1.8,3.8-4v-10.1h-3.7v10.1Z"/>
|
||||
<path class="cls-2" d="M2225,336.8h-3.7v-186c0-3.8-2.8-6.9-6.2-6.9h-124.4c-3.4,0-6.2,3.1-6.2,6.9h-3.7c0-5.8,4.5-10.6,9.9-10.6h124.4c5.5,0,9.9,4.7,9.9,10.6v186Z"/>
|
||||
<path class="cls-2" d="M2203.9,307.6h-3.7v-130.2c0-2.3-1.7-4.3-3.8-4.3h-87.1c-2.1,0-3.8,1.9-3.8,4.3h-3.7c0-4.4,3.4-8,7.5-8h87.1c4.1,0,7.5,3.6,7.5,8v130.2Z"/>
|
||||
<path class="cls-2" d="M2189.2,287.2h-3.7v-91.2c0-1.3-.9-2.4-2.1-2.4h-61c-1.2,0-2.1,1.1-2.1,2.4h-3.7c0-3.4,2.6-6.1,5.8-6.1h61c3.2,0,5.8,2.8,5.8,6.1v91.2h0Z"/>
|
||||
<path class="cls-2" d="M2178.8,272.8h-3.7v-63.8c0-.6-.4-1.1-.9-1.1h-42.7c-.5,0-.9.5-.9,1.1h-3.7c0-2.7,2.1-4.9,4.6-4.9h42.7c2.6,0,4.6,2.2,4.6,4.9v63.8h0Z"/>
|
||||
<path class="cls-2" d="M2171.6,262.8h-3.7v-44.7c0-.2,0-.2,0-.2h-29.9s0,0,0,.2h-3.7c0-2.2,1.7-4,3.8-4h29.9c2.1,0,3.8,1.8,3.8,4v44.7Z"/>
|
||||
<path class="cls-2" d="M2137.8,265.9c-2.1,0-3.8-1.8-3.8-4h3.7c0,.2,0,.3.1.3v3.7Z"/>
|
||||
<path class="cls-2" d="M2131.5,276.2c-2.5,0-4.6-2.2-4.6-4.9h3.7c0,.6.4,1.2.9,1.2v3.7h0Z"/>
|
||||
<path class="cls-2" d="M2122.3,291.6c-3.2,0-5.8-2.8-5.8-6.3h3.7c0,1.4.9,2.5,2.1,2.5v3.7h0Z"/>
|
||||
<path class="cls-2" d="M2109.4,312.3c-4.1,0-7.5-3.7-7.5-8.1h3.7c0,2.4,1.7,4.4,3.7,4.4v3.7h0Z"/>
|
||||
<path class="cls-2" d="M2090.4,344.1c-5.5,0-9.9-4.9-9.9-10.9h3.7c0,4,2.8,7.2,6.2,7.2v3.7Z"/>
|
||||
<g>
|
||||
<path class="cls-2" d="M1157.8,206.6v9.8h-55.5v-78.5h9.8v68.7h45.7Z"/>
|
||||
<path class="cls-2" d="M1005.1,193.6c0,14.2-10.2,23.1-24.8,22.8h-4.8c0-.1-34.1-.1-34.1-.1v-78.3h37.5c14.6.6,21,9.8,21,20.7s-2.1,11.3-5,14.5c5.8,3.9,10.1,11.2,10.1,20.4ZM951.2,169.7h27.9c7.9,0,11.1-4.6,11.1-10.9s-3-11.1-13-11.1h-25.9v22h0ZM995.3,192.8c0-7.3-3.9-13.2-13.4-13.2h-30.8v26.9h29.6c10.6,0,14.5-5.6,14.5-13.7Z"/>
|
||||
<circle class="cls-2" cx="1021.5" cy="147.7" r="9.9" transform="translate(643.1 1108) rotate(-76.7)"/>
|
||||
<circle class="cls-2" cx="1080.7" cy="147.7" r="9.9"/>
|
||||
<circle class="cls-2" cx="1041.3" cy="167.3" r="9.9"/>
|
||||
<path class="cls-2" d="M1070.8,167.3c0,5.4-4.4,9.9-9.8,9.9-5.4,0-9.9-4.4-9.9-9.8,0-5.4,4.4-9.9,9.8-9.9,5.4,0,9.9,4.4,9.9,9.8Z"/>
|
||||
<circle class="cls-2" cx="1041.3" cy="187" r="9.9"/>
|
||||
<circle class="cls-2" cx="1061" cy="187" r="9.9"/>
|
||||
<circle class="cls-2" cx="1021.5" cy="206.8" r="9.9" transform="translate(585.5 1153.5) rotate(-76.7)"/>
|
||||
<circle class="cls-2" cx="1080.7" cy="206.8" r="9.9"/>
|
||||
<path class="cls-2" d="M574.6,189.6h-35.7l-10.5,25.9h-10.4l31.4-78.3h14.4l31.4,78.3h-10.4l-10.4-25.9ZM570.7,179.8l-12.2-30.4-1.7-4.4-1.7,4.4-12.2,30.4h27.9Z"/>
|
||||
<path class="cls-2" d="M740.7,137.3c13.2.1,22,8.6,22,21.3s-8.4,23.1-21,23.1h-32.2v33.8h-10.1v-78.3h41.3ZM709.5,172h32.1c7.1-.1,11.6-5.2,11.6-12.8s-4.5-12-11.6-12.1h-32.1v24.9Z"/>
|
||||
<path class="cls-2" d="M832.9,192.5c-.1,16-11.1,25.4-29.5,25.4s-31.1-9.8-31.1-24.4v-56.2h10.2v54.9c.1,10.1,7.6,15.7,20.3,15.7s19.7-5.5,19.8-15.7v-54.9h10.2v55.1Z"/>
|
||||
<path class="cls-2" d="M875.9,208.1c9.6,0,16.6-3.7,16.6-11.5s-5.5-10.1-10.5-11.9c-6.3-2.2-11.5-3-18.9-5.2-9.2-2.8-16-10.6-16-21.5s8.4-22.9,25.7-22.9,20.5,2.2,29.6,12.1l-6.9,7c-8.2-7.9-18.4-9.3-23.3-9.3-9.3,0-15,6-15,12.7s3.2,10.4,10.8,12.5c3.9,1.2,10,2.9,18.5,5.4,12.7,3.8,16,11.5,16,20.8s-10.7,21.5-26.7,21.5-23.3-4.1-30.2-13.9l8.4-6.2c5.8,7.5,13.1,10.4,21.8,10.4Z"/>
|
||||
<polygon class="cls-2" points="512.3 215.6 468.8 215.6 468.8 196.8 448.4 196.8 448.4 150.4 469.1 150.4 469.1 136.9 492.3 136.9 492.3 146 478.2 146 478.2 159.5 457.6 159.5 457.6 187.6 477.9 187.6 477.9 206.4 512.3 206.4 512.3 215.6"/>
|
||||
<path class="cls-2" d="M73.2,137.2c13.2.1,22,8.6,22,21.3s-8.4,23.1-21,23.1h-15.3l31.8,33.9h-13.6l-30.6-33.9h-6.8v33.8h-10.1v-78.3h43.6ZM39.7,171.9h34.4c7.1-.1,11.6-5.2,11.6-12.8s-4.5-12-11.6-12.1h-34.4v24.9Z"/>
|
||||
<path class="cls-2" d="M156.4,189.6h-35.7l-10.5,25.9h-10.4l31.4-78.3h14.4l31.4,78.3h-10.4l-10.4-25.9ZM152.5,179.8l-12.2-30.4-1.7-4.4-1.7,4.4-12.2,30.4h27.9Z"/>
|
||||
<path class="cls-2" d="M220.7,137.2c19.8.1,32.3,16.2,32.3,38.1s-10.2,40.2-33,40.2h-32.6v-78.3h33.3ZM197.5,205.7h24.5c13.7,0,21.2-11.9,21.2-29.8s-8.6-28.8-21.6-28.9h-24.1v58.7Z"/>
|
||||
<path class="cls-2" d="M310.7,205.9v9.6h-50.6v-9.6h20.7v-59.2h-17.3v-9.6h43.7v9.6h-16.9v59.2h20.4Z"/>
|
||||
<polygon class="cls-2" points="612 215.7 612 146.2 634.5 146.2 634.5 215.7 645.5 215.7 645.5 146.2 668.6 146.2 668.6 215.7 682.4 215.7 682.4 136.7 606.3 136.7 606.3 215.7 612 215.7"/>
|
||||
<path class="cls-2" d="M319.6,162.4v11.4c15.8-9.2,29.1-21.6,39.1-36.5h-11.9c-7.5,9.8-16.6,18.2-27.1,25.1Z"/>
|
||||
<path class="cls-2" d="M403,191v-11.7c-2,1.3-4,2.6-5.9,3.9-13.1,9.2-24.2,20.2-32.6,32.4h12.1c7.4-9.3,16.4-17.6,26.5-24.7Z"/>
|
||||
<path class="cls-2" d="M319.6,190.6c2,1.4,4,2.8,6,4.3,8,6.1,15,13,21,20.7h12c-7.4-10.8-16.5-20.3-27.1-28.4-3.8-2.9-7.8-5.6-11.9-8v11.4h0Z"/>
|
||||
<path class="cls-2" d="M403,161.9c-1.5-1-2.9-2-4.3-3-8.5-6.3-15.9-13.5-22.2-21.5h-12c7.6,11.1,17.1,21,28.4,29.3,3.2,2.4,6.6,4.6,10.1,6.7v-11.5h0Z"/>
|
||||
</g>
|
||||
<g id="small">
|
||||
<g>
|
||||
<path class="cls-2" d="M605.8,679.6h-35.7l-10.5,25.9h-10.4l31.4-78.3h14.4l31.4,78.3h-10.4l-10.4-25.9ZM601.8,669.8l-12.2-30.4-1.7-4.4-1.7,4.4-12.2,30.4h27.9Z"/>
|
||||
<path class="cls-2" d="M771.9,627.3c13.2.1,22,8.6,22,21.3s-8.4,23.1-21,23.1h-32.2v33.8h-10.1v-78.3h41.3ZM740.7,662h32.1c7.1-.1,11.6-5.2,11.6-12.8s-4.5-12-11.6-12.1h-32.1v24.9Z"/>
|
||||
<path class="cls-2" d="M864.1,682.5c-.1,16-11.1,25.4-29.5,25.4s-31.1-9.8-31.1-24.4v-56.2h10.2v54.9c.1,10.1,7.6,15.7,20.3,15.7s19.7-5.5,19.8-15.7v-54.9h10.2v55.1Z"/>
|
||||
<path class="cls-2" d="M907,698.1c9.6,0,16.6-3.7,16.6-11.5s-5.5-10.1-10.5-11.9c-6.3-2.2-11.5-3-18.9-5.2-9.2-2.8-16-10.6-16-21.5s8.4-22.9,25.7-22.9,20.5,2.2,29.6,12.1l-6.9,7c-8.2-7.9-18.4-9.3-23.3-9.3-9.3,0-15,6-15,12.7s3.2,10.4,10.8,12.5c3.9,1.2,10,2.9,18.5,5.4,12.7,3.8,16,11.5,16,20.8s-10.7,21.5-26.7,21.5-23.3-4.1-30.2-13.9l8.4-6.2c5.8,7.5,13.1,10.4,21.8,10.4Z"/>
|
||||
<polygon class="cls-2" points="543.4 705.6 500 705.6 500 686.8 479.6 686.8 479.6 640.4 500.3 640.4 500.3 626.9 523.5 626.9 523.5 636 509.4 636 509.4 649.5 488.7 649.5 488.7 677.6 509.1 677.6 509.1 696.4 543.4 696.4 543.4 705.6"/>
|
||||
<path class="cls-2" d="M104.4,627.2c13.2.1,22,8.6,22,21.3s-8.4,23.1-21,23.1h-15.3l31.8,33.9h-13.6l-30.6-33.9h-6.8v33.8h-10.1v-78.3h43.6ZM70.9,661.9h34.4c7.1-.1,11.6-5.2,11.6-12.8s-4.5-12-11.6-12.1h-34.4v24.9Z"/>
|
||||
<path class="cls-2" d="M187.6,679.6h-35.7l-10.5,25.9h-10.4l31.4-78.3h14.4l31.4,78.3h-10.4l-10.4-25.9ZM183.7,669.8l-12.2-30.4-1.7-4.4-1.7,4.4-12.2,30.4h27.9Z"/>
|
||||
<path class="cls-2" d="M251.8,627.2c19.8.1,32.3,16.2,32.3,38.1s-10.2,40.2-33,40.2h-32.6v-78.3h33.3ZM228.7,695.7h24.5c13.7,0,21.2-11.9,21.2-29.8s-8.6-28.8-21.6-28.9h-24.1v58.7h0Z"/>
|
||||
<path class="cls-2" d="M341.9,695.9v9.6h-50.6v-9.6h20.7v-59.2h-17.3v-9.6h43.7v9.6h-16.9v59.2h20.4Z"/>
|
||||
<polygon class="cls-2" points="643.2 705.7 643.2 636.2 665.7 636.2 665.7 705.7 676.7 705.7 676.7 636.2 699.8 636.2 699.8 705.7 713.6 705.7 713.6 626.7 637.4 626.7 637.4 705.7 643.2 705.7"/>
|
||||
<path class="cls-2" d="M350.8,652.4v11.4c15.8-9.2,29.1-21.6,39.1-36.5h-11.9c-7.5,9.8-16.6,18.2-27.1,25.1Z"/>
|
||||
<path class="cls-2" d="M434.1,681v-11.7c-2,1.3-4,2.6-5.9,3.9-13.1,9.2-24.2,20.2-32.6,32.4h12.1c7.4-9.3,16.4-17.6,26.5-24.7Z"/>
|
||||
<path class="cls-2" d="M350.8,680.6c2,1.4,4,2.8,6,4.3,8,6,15,13,21,20.7h12c-7.4-10.8-16.5-20.3-27.1-28.4-3.8-2.9-7.8-5.6-11.9-8v11.5h0Z"/>
|
||||
<path class="cls-2" d="M434.1,651.9c-1.5-1-2.9-2-4.3-3-8.5-6.3-15.9-13.5-22.2-21.5h-12c7.6,11.1,17.1,21,28.4,29.3,3.2,2.4,6.6,4.6,10.1,6.7v-11.5Z"/>
|
||||
<g>
|
||||
<path class="cls-2" d="M963.9,677.9c0,5.5-4.4,10-9.9,10-5.5,0-10-4.4-10-9.9,0-5.5,4.4-10,9.9-10,5.5,0,10,4.4,10,9.9Z"/>
|
||||
<circle class="cls-2" cx="973.8" cy="677.8" r="10"/>
|
||||
<circle class="cls-2" cx="954" cy="697.8" r="10"/>
|
||||
<circle class="cls-2" cx="973.9" cy="697.8" r="10"/>
|
||||
<path class="cls-2" d="M1058.4,683.5c0,14.2-10.2,23.1-24.8,22.8h-4.8c0-.1-34.1-.1-34.1-.1v-78.3h37.5c14.6.6,21,9.8,21,20.7s-2.1,11.3-5,14.5c5.8,3.9,10.1,11.2,10.1,20.4ZM1004.5,659.7h27.9c7.9,0,11.1-4.6,11.1-10.9s-3-11.1-13-11.1h-25.9v22h0ZM1048.6,682.7c0-7.3-3.9-13.2-13.4-13.2h-30.7v26.9h29.6c10.6,0,14.5-5.6,14.5-13.7Z"/>
|
||||
<path class="cls-2" d="M1077.9,637.7v22h41.6v9.8h-41.6v26.9h46.2v9.8h-55.9v-78.3h55.9v9.8h-46.2Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 33 KiB |
|
|
@ -1,69 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1190.6 841.9">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #000;
|
||||
stroke-width: 0px;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g>
|
||||
<path class="cls-1" d="M80,318.5c14.5.1,24.2,9.5,24.2,23.4s-9.2,25.4-23,25.4h-16.8l34.9,37.2h-14.9l-33.6-37.2h-7.4v37.2h-11.1v-86h47.9,0ZM43.2,356.6h37.8c7.9-.1,12.8-5.7,12.8-14.1s-4.9-13.2-12.8-13.3h-37.8v27.3h0Z"/>
|
||||
<path class="cls-1" d="M171.4,376.1h-39.2l-11.5,28.4h-11.4l34.5-86h15.8l34.5,86h-11.4l-11.4-28.4h.1ZM167.1,365.4l-13.4-33.4-1.9-4.8-1.9,4.8-13.4,33.4h30.6,0Z"/>
|
||||
<path class="cls-1" d="M242,318.5c21.8.1,35.5,17.9,35.5,41.9s-11.2,44.2-36.3,44.2h-35.8v-86h36.6ZM216.6,393.8h27c15.1,0,23.3-13,23.3-32.7s-9.5-31.6-23.8-31.7h-26.4v64.5h0Z"/>
|
||||
<path class="cls-1" d="M341,394v10.5h-55.6v-10.5h22.8v-65h-19v-10.5h48.1v10.5h-18.6v65h22.4,0Z"/>
|
||||
<path class="cls-1" d="M170.9,479.3h-39.2l-11.5,28.4h-11.4l34.5-86h15.8l34.5,86h-11.4l-11.4-28.4h.1ZM166.5,468.6l-13.4-33.4-1.9-4.8-1.9,4.8-13.4,33.4h30.6,0Z"/>
|
||||
<path class="cls-1" d="M353.4,421.9c14.5.1,24.2,9.5,24.2,23.4s-9.2,25.4-23,25.4h-35.4v37.2h-11.1v-86h45.4,0ZM319.1,460h35.3c7.9-.1,12.8-5.7,12.8-14.1s-4.9-13.1-12.8-13.3h-35.3v27.3h0Z"/>
|
||||
<path class="cls-1" d="M454.7,482.5c-.1,17.6-12.1,28-32.4,28s-34.2-10.8-34.2-26.8v-61.7h11.2v60.4c.1,11.1,8.3,17.2,22.3,17.2s21.6-6.1,21.8-17.2v-60.4h11.2v60.6h0Z"/>
|
||||
<path class="cls-1" d="M501.9,499.7c10.5,0,18.2-4,18.2-12.7s-6.1-11.1-11.5-13c-7-2.4-12.6-3.3-20.7-5.7-10.1-3-17.6-11.6-17.6-23.6s9.2-25.2,28.2-25.2,22.5,2.4,32.5,13.3l-7.6,7.7c-9-8.7-20.2-10.2-25.5-10.2-10.2,0-16.4,6.6-16.4,13.9s3.5,11.4,11.9,13.8c4.3,1.2,11,3.2,20.3,6,13.9,4.2,17.6,12.7,17.6,22.9s-11.8,23.6-29.3,23.6-25.5-4.6-33.2-15.3l9.2-6.9c6.3,8.2,14.4,11.4,23.9,11.4h0Z"/>
|
||||
<polygon class="cls-1" points="205.7 421.8 205.7 507.6 212 507.6 212 431.7 236.6 431.7 236.6 507.6 248.7 507.6 248.7 431.7 274.1 431.7 274.1 507.6 289.3 507.6 289.3 421.8 205.7 421.8"/>
|
||||
<polygon class="cls-1" points="102.3 507.9 54.6 507.9 54.6 487.3 32.2 487.3 32.2 436.2 54.9 436.2 54.9 421.5 80.4 421.5 80.4 431.5 65 431.5 65 446.3 42.3 446.3 42.3 477.2 64.6 477.2 64.6 497.8 102.3 497.8 102.3 507.9"/>
|
||||
<path class="cls-1" d="M435.7,369.1c-14.4,10-26.5,22.2-35.8,35.5h13.3c8.1-10.2,18-19.3,29-27v-12.8c-2.2,1.4-4.4,2.8-6.6,4.4h0Z"/>
|
||||
<path class="cls-1" d="M431.2,350.9c3.6,2.7,7.3,5.1,11.1,7.4v-12.6c-1.7-1.1-3.3-2.2-4.8-3.4-9.5-7-17.6-15-24.5-23.8h-13.1c8.3,12.4,18.9,23.2,31.3,32.4h0Z"/>
|
||||
<path class="cls-1" d="M393.8,318.5h-13.1c-8.2,10.9-18.4,20.2-30,27.8v12.5c17.4-10.1,32.2-23.8,43.1-40.3Z"/>
|
||||
<path class="cls-1" d="M363.7,373.4c-4.2-3.2-8.6-6.1-13.1-8.8v12.6c2.2,1.5,4.4,3.1,6.6,4.7,8.7,6.7,16.4,14.2,23.1,22.7h13.2c-8.1-11.8-18.1-22.3-29.8-31.2h0Z"/>
|
||||
<g>
|
||||
<path class="cls-1" d="M56.7,579.5c0,6-4.8,10.9-10.9,10.9s-10.9-4.8-10.9-10.9,4.9-10.9,10.9-10.9,10.9,4.9,10.9,10.9Z"/>
|
||||
<path class="cls-1" d="M78.5,579.5c0,6-4.8,10.9-10.9,10.9s-10.9-4.8-10.9-10.9,4.9-10.9,10.9-10.9,10.9,4.8,10.9,10.9Z"/>
|
||||
<path class="cls-1" d="M56.7,601.4c0,6-4.9,10.9-10.9,10.9s-10.9-4.8-10.9-10.9,4.8-10.9,10.9-10.9,10.9,4.8,10.9,10.9Z"/>
|
||||
<circle class="cls-1" cx="67.6" cy="601.4" r="10.9"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="cls-1" d="M160.5,585.8c0,15.5-11.2,25.4-27.2,25.1h-5.3c0-.1-37.4-.1-37.4-.1v-86h41.3c16.1.7,23,10.8,23,22.8s-2.3,12.4-5.4,16c6.3,4.3,11.1,12.3,11.1,22.4h0ZM101.2,559.6h30.6c8.7,0,12.1-5.1,12.1-12s-3.3-12.1-14.3-12.1h-28.4v24.2h0ZM149.7,584.9c0-8-4.3-14.5-14.7-14.5h-33.8v29.6h32.5c11.6,0,16-6.2,16-15.1h0Z"/>
|
||||
<path class="cls-1" d="M182,535.4v24.2h45.6v10.8h-45.6v29.6h50.7v10.8h-61.5v-86h61.5v10.8h-50.7Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="cls-1" d="M402,556.2c0,41.1-10,57.5-31.4,57.5s-23.3-6.1-28.2-15.2l8.3-6c3.9,7.2,10.1,10.6,20.4,10.6s19.1-7.3,20.4-26.2c-5.3,4.7-12.5,7.7-20.5,7.7-18.7,0-30.9-14.2-30.9-28.5s12.3-33.6,30.9-33.6,31,14.3,31,33.6h0ZM392.5,554.3c0-13.7-10.4-20.3-21.4-20.3s-20.5,6.6-20.5,20.3,8.7,19.7,20.5,19.7,21.4-8,21.4-19.7Z"/>
|
||||
<path class="cls-1" d="M470.4,600.2v10.9h-54.7v-10.9c33.9-25.2,42.4-35.9,42.4-49.5s-6.7-17.1-18.7-17.1-19.5,6.7-15.8,23.2l-10.1,4.7c-5.4-17.9,2.8-39,27-39s28,10.8,28,26-12.4,35.2-37.2,51.8h39.3Z"/>
|
||||
<path class="cls-1" d="M489.4,598.1v13h-13v-13h13Z"/>
|
||||
<path class="cls-1" d="M520.6,525.1h10.9v86.2h-10.9v-72.5l-23.1,22.4v-13.4l23.1-22.6Z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<path class="cls-1" d="M1157.8,206.6v9.8h-55.5v-78.5h9.8v68.7h45.7Z"/>
|
||||
<path class="cls-1" d="M1005.1,193.6c0,14.2-10.2,23.1-24.8,22.8h-4.8c0-.1-34.1-.1-34.1-.1v-78.3h37.5c14.6.6,21,9.8,21,20.7s-2.1,11.3-5,14.5c5.8,3.9,10.1,11.2,10.1,20.4h0ZM951.2,169.7h27.9c7.9,0,11.1-4.6,11.1-10.9s-3-11.1-13-11.1h-25.9v22h0ZM995.3,192.8c0-7.3-3.9-13.2-13.4-13.2h-30.8v26.9h29.6c10.6,0,14.5-5.6,14.5-13.7h.1Z"/>
|
||||
<circle class="cls-1" cx="1021.8" cy="147.9" r="9.9" transform="translate(642.9 1108.3) rotate(-76.7)"/>
|
||||
<circle class="cls-1" cx="1080.7" cy="147.7" r="9.9"/>
|
||||
<circle class="cls-1" cx="1041.3" cy="167.3" r="9.9"/>
|
||||
<path class="cls-1" d="M1070.8,167.3c0,5.4-4.4,9.9-9.8,9.9s-9.9-4.4-9.9-9.8,4.4-9.9,9.8-9.9,9.9,4.4,9.9,9.8Z"/>
|
||||
<circle class="cls-1" cx="1041.3" cy="187" r="9.9"/>
|
||||
<circle class="cls-1" cx="1061" cy="187" r="9.9"/>
|
||||
<circle class="cls-1" cx="1021.7" cy="207" r="9.9" transform="translate(585.3 1153.7) rotate(-76.7)"/>
|
||||
<circle class="cls-1" cx="1080.7" cy="206.8" r="9.9"/>
|
||||
<path class="cls-1" d="M574.6,189.6h-35.7l-10.5,25.9h-10.4l31.4-78.3h14.4l31.4,78.3h-10.4l-10.4-25.9h.2ZM570.7,179.8l-12.2-30.4-1.7-4.4-1.7,4.4-12.2,30.4h27.9,0Z"/>
|
||||
<path class="cls-1" d="M740.7,137.3c13.2.1,22,8.6,22,21.3s-8.4,23.1-21,23.1h-32.2v33.8h-10.1v-78.3h41.3ZM709.5,172h32.1c7.1-.1,11.6-5.2,11.6-12.8s-4.5-12-11.6-12.1h-32.1v24.9h0Z"/>
|
||||
<path class="cls-1" d="M832.9,192.5c0,16-11.1,25.4-29.5,25.4s-31.1-9.8-31.1-24.4v-56.2h10.2v54.9c0,10.1,7.6,15.7,20.3,15.7s19.7-5.5,19.8-15.7v-54.9h10.2v55.1h0Z"/>
|
||||
<path class="cls-1" d="M875.9,208.1c9.6,0,16.6-3.7,16.6-11.5s-5.5-10.1-10.5-11.9c-6.3-2.2-11.5-3-18.9-5.2-9.2-2.8-16-10.6-16-21.5s8.4-22.9,25.7-22.9,20.5,2.2,29.6,12.1l-6.9,7c-8.2-7.9-18.4-9.3-23.3-9.3-9.3,0-15,6-15,12.7s3.2,10.4,10.8,12.5c3.9,1.2,10,2.9,18.5,5.4,12.7,3.8,16,11.5,16,20.8s-10.7,21.5-26.7,21.5-23.3-4.1-30.2-13.9l8.4-6.2c5.8,7.5,13.1,10.4,21.8,10.4h.1Z"/>
|
||||
<polygon class="cls-1" points="512.3 215.6 468.8 215.6 468.8 196.8 448.4 196.8 448.4 150.4 469.1 150.4 469.1 136.9 492.3 136.9 492.3 146 478.2 146 478.2 159.5 457.6 159.5 457.6 187.6 477.9 187.6 477.9 206.4 512.3 206.4 512.3 215.6"/>
|
||||
<path class="cls-1" d="M73.2,137.2c13.2.1,22,8.6,22,21.3s-8.4,23.1-21,23.1h-15.3l31.8,33.9h-13.6l-30.6-33.9h-6.8v33.8h-10.1v-78.3h43.6ZM39.7,171.9h34.4c7.1-.1,11.6-5.2,11.6-12.8s-4.5-12-11.6-12.1h-34.4v24.9h0Z"/>
|
||||
<path class="cls-1" d="M156.4,189.6h-35.7l-10.5,25.9h-10.4l31.4-78.3h14.4l31.4,78.3h-10.4l-10.4-25.9h.2ZM152.5,179.8l-12.2-30.4-1.7-4.4-1.7,4.4-12.2,30.4h27.9-.1Z"/>
|
||||
<path class="cls-1" d="M220.7,137.2c19.8.1,32.3,16.2,32.3,38.1s-10.2,40.2-33,40.2h-32.6v-78.3h33.3ZM197.5,205.7h24.5c13.7,0,21.2-11.9,21.2-29.8s-8.6-28.8-21.6-28.9h-24.1v58.7h0Z"/>
|
||||
<path class="cls-1" d="M310.7,205.9v9.6h-50.6v-9.6h20.7v-59.2h-17.3v-9.6h43.7v9.6h-16.9v59.2h20.4,0Z"/>
|
||||
<polygon class="cls-1" points="612 215.7 612 146.2 634.5 146.2 634.5 215.7 645.5 215.7 645.5 146.2 668.6 146.2 668.6 215.7 682.4 215.7 682.4 136.7 606.3 136.7 606.3 215.7 612 215.7"/>
|
||||
<path class="cls-1" d="M319.6,162.4v11.4c15.8-9.2,29.1-21.6,39.1-36.5h-11.9c-7.5,9.8-16.6,18.2-27.1,25.1h-.1Z"/>
|
||||
<path class="cls-1" d="M403,191v-11.7c-2,1.3-4,2.6-5.9,3.9-13.1,9.2-24.2,20.2-32.6,32.4h12.1c7.4-9.3,16.4-17.6,26.5-24.7h-.1Z"/>
|
||||
<path class="cls-1" d="M319.6,190.6c2,1.4,4,2.8,6,4.3,8,6.1,15,13,21,20.7h12c-7.4-10.8-16.5-20.3-27.1-28.4-3.8-2.9-7.8-5.6-11.9-8v11.4h0Z"/>
|
||||
<path class="cls-1" d="M403,161.9c-1.5-1-2.9-2-4.3-3-8.5-6.3-15.9-13.5-22.2-21.5h-12c7.6,11.1,17.1,21,28.4,29.3,3.2,2.4,6.6,4.6,10.1,6.7v-11.5h0Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 7.9 KiB |
|
|
@ -1,333 +0,0 @@
|
|||
:root {
|
||||
--a-player-bar-bg: #738EF2;
|
||||
--a-player-bar-fg: #4897c7;
|
||||
--a-player-url-fg: white;
|
||||
--a-playlist-header-bg: #F6ED80;;
|
||||
--a-playlist-header-fg: #222;
|
||||
--a-player-panel-bg: #738ef2;
|
||||
--a-player-panel-fg: white;
|
||||
--a-sound-hv-bg: #f6ed80;
|
||||
--a-sound-hv-fg: #444;
|
||||
--a-sound-bg: #f6ed80;
|
||||
--body-bg: unset;
|
||||
--break-color: transparent;
|
||||
--button-bg: #F4F88D;
|
||||
--button-fg: #222;
|
||||
--button-hv-bg: #F4F88D;
|
||||
--button-hv-fg: #1d3cab;
|
||||
--button-active-fg: white;
|
||||
--button-active-bg: #738ef2;
|
||||
--heading-font-family: "campus_grotesk";
|
||||
--heading-link-hv-fg: #aa217b;
|
||||
--heading-hg-fg: #fff;
|
||||
--link-fg: #3b47ff;
|
||||
--link-hv-fg: #c40c85;
|
||||
--main-color-light: #F4F881;
|
||||
--nav-bg: transparent;
|
||||
--nav-fg: #222;
|
||||
--nav-secondary-bg: transparent;
|
||||
--nav-hv-bg: unset;
|
||||
--nav-active-bg: unset;
|
||||
--nav-active-fg: white;
|
||||
--text-color: #75124e;
|
||||
--text-color-light: #bbb;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "campus_grotesk";
|
||||
src:
|
||||
local("campus_grotesk"),
|
||||
url("/static/radiocampus/fonts/campus_grotesk/CampusGroteskv24-Regular.woff2") format("woff2"),
|
||||
url("/static/radiocampus/fonts/campus_grotesk/CampusGroteskv24-Regular.woff") format("woff"),
|
||||
url("/static/radiocampus/fonts/campus_grotesk/CampusGroteskv24-Regular.otf") format("opentype") tech(color-COLRv1);
|
||||
}
|
||||
|
||||
body {
|
||||
color: #222;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
body.home, body.home .preview .headings a, body.home .page a {
|
||||
color: #fff;
|
||||
}
|
||||
body.home .preview .headings a:hover {
|
||||
color: #f4f88d !important;
|
||||
}
|
||||
body.home .nav.primary {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
body.yellow {
|
||||
background: url(/static/radiocampus/backgrounds/degrade-jaune.jpg) repeat-x top fixed;
|
||||
}
|
||||
body.yellow.home {
|
||||
background: url(/static/radiocampus/backgrounds/photo-degrade-02.jpg) no-repeat center/cover;
|
||||
}
|
||||
body.blue {
|
||||
background: url(/static/radiocampus/backgrounds/degrade-bleu.jpg) repeat-x top fixed;
|
||||
}
|
||||
body.blue.home {
|
||||
background: url(/static/radiocampus/backgrounds/photo-degrade-01.jpg) no-repeat center/cover;
|
||||
}
|
||||
body.blue #grandlogo img {
|
||||
content: url('/static/radiocampus/logos/logo-RC-blanc1.png');
|
||||
}
|
||||
body.yellow #grandlogo img {
|
||||
content: url('/static/radiocampus/logos/logo-RC-bleu1.png');
|
||||
}
|
||||
body.blue.home #grandlogo img {
|
||||
content: url('/static/radiocampus/logos/logo-RC-blanc2.png');
|
||||
}
|
||||
body.yellow.home #grandlogo img {
|
||||
content: url('/static/radiocampus/logos/logo-RC-bleu2.png');
|
||||
}
|
||||
body.yellow .nav .nav-item.active {
|
||||
color: #7E6B64 !important;
|
||||
}
|
||||
body.blue #grandlogo img, body.yellow #grandlogo img {
|
||||
width: 120px;
|
||||
margin: 12px 0 0 48px;
|
||||
}
|
||||
body.blue.home #grandlogo, body.yellow.home #grandlogo {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
body.blue.home #grandlogo img , body.yellow.home #grandlogo img {
|
||||
margin: 12px auto 0 auto;
|
||||
width: 960px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
|
||||
.a-player-bar {
|
||||
border-top: 1px solid #555;
|
||||
}
|
||||
.a-player .button, .a-player-bar-content {
|
||||
color: white;
|
||||
}
|
||||
#player .a-sound-item .label {
|
||||
color: white !important;
|
||||
}
|
||||
.a-switch-nav span {
|
||||
color: white;
|
||||
}
|
||||
.a-switch-nav span:hover {
|
||||
color: #333;
|
||||
}
|
||||
.button, a.button, button.button {
|
||||
border: 0;
|
||||
}
|
||||
.nav.primary .nav-brand {
|
||||
display: none;
|
||||
}
|
||||
.nav.secondary .nav-item {
|
||||
color: #7E6B64 !important;
|
||||
}
|
||||
.nav-item:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.nav.primary .nav-item {
|
||||
font-weight: unset;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
.page section.container {
|
||||
margin-top: 0;
|
||||
padding-top: 0.6rem;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.page {
|
||||
margin-top: 0;
|
||||
padding-top: var(--nav-primary-height);
|
||||
}
|
||||
.nav.primary .nav-brand {
|
||||
display: inline-block;
|
||||
}
|
||||
.nav.secondary .nav-item {
|
||||
color: white !important;
|
||||
}
|
||||
.dropdown-trigger .icon, .icon.bullet {
|
||||
color: white;
|
||||
}
|
||||
.dropdown.is-right .dropdown-menu {
|
||||
left: 0;
|
||||
}
|
||||
#grandlogo {
|
||||
display: none;
|
||||
}
|
||||
.navs, .nav-menu.active {
|
||||
background-color: #7892f1; /*#738ef2;*/
|
||||
}
|
||||
.nav .nav-item {
|
||||
color: white !important;
|
||||
}
|
||||
body.yellow .nav .nav-item.active {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* yellow theme is not implemented for small screens */
|
||||
body.yellow {
|
||||
background: url(/static/radiocampus/backgrounds/degrade-bleu.jpg) repeat-x top/auto 520px;
|
||||
}
|
||||
body.yellow.home {
|
||||
background: url(/static/radiocampus/backgrounds/photo-degrade-01.jpg) no-repeat center/cover;
|
||||
}
|
||||
|
||||
.navs .nav + .nav {
|
||||
flex-grow: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1408px) {
|
||||
.container:not(.is-max-desktop):not(.is-max-widescreen) {
|
||||
max-width: unset;
|
||||
margin: 10px 64px;
|
||||
}
|
||||
body.home .container:not(.is-max-desktop):not(.is-max-widescreen) {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1216px) {
|
||||
.container:not(.is-max-desktop):not(.is-max-widescreen) {
|
||||
max-width: unset;
|
||||
margin: 10px 64px;
|
||||
}
|
||||
body.home .container:not(.is-max-desktop):not(.is-max-widescreen) {
|
||||
max-width: 1152px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.list-item:nth-child(3n+1):not(.wide) .media {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.list-item:nth-child(3n):not(.wide) .media {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
.nav-urls .urls a, .nav-urls .urls span {
|
||||
color: white;
|
||||
background-color: #444;
|
||||
border-radius: 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#background {
|
||||
background-size: cover;
|
||||
padding: 80px 0 80px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.button:hover, a.button:hover, button.button:hover {
|
||||
opacity: 0.9 !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: whitesmoke;
|
||||
padding: 24px;
|
||||
border-radius: 5px;
|
||||
max-width: 960px;
|
||||
border: 1px solid #929293;
|
||||
}
|
||||
|
||||
.container.breadcrumbs, .container.header {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
padding: 0 24px 0 24px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.container.breadcrumbs a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.grid .list-item .headings .heading {
|
||||
padding-top: 10px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
|
||||
.nav.secondary {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.nav.secondary .nav-item{
|
||||
olor: #1d3cab !important;
|
||||
color: #8c827e !important;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.nav .nav-item:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.navs {
|
||||
border-bottom: 1px solid #4d4545;
|
||||
}
|
||||
|
||||
.page {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.preview-cover {
|
||||
border-radius: 5px;
|
||||
opacity: 0.92;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.a-carousel .preview-cover {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.preview-card .headings .heading {
|
||||
opacity: 0.85;
|
||||
padding: 12px;
|
||||
background-color: #242121;
|
||||
}
|
||||
|
||||
.preview-card .headings a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.grid .preview .headings a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.preview .title, .preview .title:not(:last-child) {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.nav .nav-menu {
|
||||
background-color: #6C7ED2;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#background {
|
||||
padding: 100px 0 50px 0;
|
||||
}
|
||||
|
||||
.container, .page .container {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
*/
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user