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

work on templates

Browse Source
This commit is contained in:
bkfox
2023-11-22 17:33:51 +01:00
parent 36ae12af3d
commit b4c12def13
25 changed files with 812 additions and 1503 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
assets/src/assets/styles.scss
View File

@ -17,7 +17,7 @@ $mp-7: 4em;
$text-size-small: 0.6em;
$text-size-smaller: 0.8em;
$text-size: 1em;
$text-size-medium: 1.2em;
$text-size-medium: 1.4em;
$text-size-bigger: 1.6em;
$text-size-big: 2em;
@ -43,32 +43,7 @@ $screen-wider: 1280px;
$screen-wide: 1380px;
@import 'v-calendar/style.css';
@import "~bulma/sass/utilities/_all.sass";
$body-background-color: $light;
$menu-item-hover-background-color: #dfdfdf;
$menu-item-active-background-color: #d2d2d2;
@import "~bulma/sass/base/_all";
@import "~bulma/sass/components/_all";
@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";
@import "./vendor";
//-- helpers/modifiers
@ -127,10 +102,6 @@ input.half-field:not(:active):not(:hover) {
//-- navbar
.navbar + .container {
margin-top: 1em;
}
.navbar.has-shadow, .navbar.is-fixed-bottom.has-shadow {
box-shadow: 0em 0em 1em rgba(0,0,0,0.1);
}
@ -140,6 +111,10 @@ a.navbar-item.is-active {
}
.navbar {
& + .container {
margin-top: 1em;
}
.navbar-dropdown {
z-index: 2000;
}
@ -175,6 +150,7 @@ a.navbar-item.is-active {
}
//-- page
/*
.page {
& > .cover {
float: right;
@ -201,32 +177,7 @@ a.navbar-item.is-active {
h5 { font-size: $size-6; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
h6 { font-size: $size-6; margin-top:0.4em; margin-bottom:0.2em; }
}
}
// FIXME: remove -> only used in comment
.media.item .headline {
line-height: 1.2em;
max-height: calc(1.2em * 3);
overflow: hidden;
& + .headline-overflow {
position: relative;
width: 100%;
height: 2em;
margin-top: -2em;
}
& + .headline-overflow:before {
content:'';
width:100%;
height:100%;
position:absolute;
left:0;
bottom:0;
background:linear-gradient(transparent 1em, $body-background-color);
}
}
}*/
//-- player
@ -319,12 +270,6 @@ section > .toolbar {
}
main {
.cover.is-small { width: 10em; }
.cover.is-tiny { height: 2em; }
}
aside {
& > section {
margin-bottom: 2em;
@ -350,14 +295,7 @@ aside {
}
.timetable {
width: 100%;
border: none;
}
// -- layout
:root {
--text-color: black;
--highlight-color: rgba(255, 255, 0, 1);
@ -389,6 +327,7 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
.page {
padding-bottom: 5em;
a {
background-color: var(--highlight-color-alpha);
color: var(--highlight-color-2);
@ -408,8 +347,11 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
.p-sticky { position: sticky }
.p-static { position: static }
.align-right { text-align: right; justify-content: right; }
.height-full { height: 100%; }
.flex-push-right { margin-left: auto; }
.flex-grow-0 { flex-grow: 0 !important; }
.is-clickable { cursor: pointer; }
@ -446,20 +388,18 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
text-align: right;
}
.title.is-3 {
margin-top: $mp-3;
.title {
text-transform: uppercase;
&.is-3 {
margin-top: $mp-3;
}
}
.content, .navbar-item {
.content {
font-size: $text-size-medium;
}
.app-nav .navbar-item {
font-size: $text-size-medium;
padding-top: $mp-4;
padding-bottom: $mp-4;
}
.heading, .headings-container > * {
display: inline-block;
@ -497,48 +437,71 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
}
// ---- secondary navigation
nav {
margin: $mp-3 0;
// ---- main navigation
.nav {
display: flex;
background-color: var(--highlight-color);
.nav-item {
font-family: unset;
list-style: none;
display: inline-block;
margin-bottom: $mp-3;
vertical-align: unset !important;
padding: $mp-3;
flex-grow: 1;
flex-shrink: 1;
text-align: center;
a, .button {
padding: $mp-3;
border: 1px solid hsl(0deg, 0%, 86%);
background-color: var(--highlight-color);
}
font-family: var(--heading-font-family);
text-transform: uppercase;
button, .button {
vertical-align: inherit;
padding-top: $mp-3;
padding-bottom: $mp-3;
height: unset !important;
}
&.active a, &.active button {
&.active {
background-color: var(--highlight-color-2);
color: var(--highlight-color);
}
}
&:not(:last-child) {
margin-right: $mp-2;
&.primary {
.navbar-brand {
display: inline-block;
margin-right: $mp-3;
padding: $mp-3;
img {
width: 14em !important;
}
}
.navbar-menu {
display: flex;
flex-grow: 1;
}
.nav-item {
font-size: $text-size-medium;
font-weight: $weight-bold;
}
}
&.secondary {
justify-content: right;
.nav-item {
font-size: 1.2em;
}
}
}
nav li {
list-style: none;
a, .button {
font-size: $text-size-medium;
}
}
// ---- ---- previews & page items
.preview {
position: relative;
background-size: cover;
margin-bottom: calc($mp-3);
&.preview-card {
&:not(.wide) {
@ -563,9 +526,9 @@ nav {
font-weight: $weight-bolder;
font-size: $text-size-bigger;
}
.content, .actions {
font-size: $text-size-medium;
}
//.content, .actions {
// font-size: $text-size-bigger;
//}
.headings {
background-size: cover;
@ -579,14 +542,15 @@ nav {
}
}
.preview.comment {
.title { font-size: $text-size-bigger; }
.subtitle { font-size: $text-size; }
}
.list-item {
width: 100%;
&:not(:last-child) {
margin-bottom: calc($mp-4 / 2);
}
&:not(:first-child) {
margin-top: calc($mp-4 / 2);
}
@ -597,6 +561,10 @@ nav {
background-color: var(--heading-bg-color);
}
.subtitle {
text-align: right;
}
.media-content {
display: flex;
flex-direction: column;
@ -616,19 +584,25 @@ nav {
// ---- cards
.preview-cover {
background-size: cover;
.preview-wide {
height: var(--preview-cover-size);
width: var(--preview-cover-size);
&.small {
min-width: unset;
height: var(--preview-cover-small-size);
width: var(--preview-cover-small-size) !important;
&:not(.header) .headings {
box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
}
& .headings {
width: var(--preview-cover-size);
flex-grow: 0;
margin-right: $mp-3;
}
& .content {
font-size: $text-size-big;
flex-grow: 1;
}
}
.preview-card {
height: var(--preview-cover-size);
min-width: var(--preview-cover-size);
@ -653,9 +627,21 @@ nav {
}
.preview-cover {
background-size: cover;
height: var(--preview-cover-size);
width: var(--preview-cover-size);
&.small {
min-width: unset;
height: var(--preview-cover-small-size);
width: var(--preview-cover-small-size) !important;
}
}
.preview-card-headings {
width: 100%;
min-width: var(--preview-cover-size);
min-height: 100%;
padding-top: $mp-3;
@ -683,6 +669,10 @@ nav {
height: unset;
}
.headings {
padding-top: $mp-6;
}
.headings, > .container {
width: 100%;
}
@ -730,11 +720,6 @@ nav {
gap: $mp-4;
}
@media screen and (max-width: $screen-normal) {
.page {
margin: 0em 1em;
}
}
@media screen and (max-width: $screen-wide) {
.preview-card:not(.preview-header) {

31
assets/src/assets/vendor.scss Normal file
View File

@ -0,0 +1,31 @@
@import 'v-calendar/style.css';
@import "~bulma/sass/utilities/_all.sass";
$body-background-color: $light;
$menu-item-hover-background-color: #dfdfdf;
$menu-item-active-background-color: #d2d2d2;
@import "~bulma/sass/base/_all";
@import "~bulma/sass/components/breadcrumb";
@import "~bulma/sass/components/dropdown";
@import "~bulma/sass/components/navbar";
@import "~bulma/sass/components/media";
@import "~bulma/sass/components/message";
@import "~bulma/sass/components/modal";
@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";

7
assets/src/components/ADropdown.vue
View File

@ -2,12 +2,13 @@
<component :is="tag" :class="[itemClass, active ? activeClass : '']">
<slot name="before-button"></slot>
<slot name="button" :toggle="toggle" :active="active">
<button :class="[buttonClass]" @click="toggle()">
<component :is="buttonTag" :class="buttonClass" @click="toggle()">
<span class="icon">
<i v-if="!active" :class="buttonIconOpen"></i>
<i v-if="active" :class="buttonIconClose"></i>
</span>
</button>
{{ label }}
</component>
</slot>
<div :class="contentClass" v-show="active">
<slot></slot>
@ -24,6 +25,8 @@ export default {
props: {
tag: {type: String, default: "div"},
label: {type: String, default: ""},
buttonTag: {type: String, default: "button"},
activeClass: {type: String, default: "is-active"},
buttonClass: {type: String, default: "button"},
buttonIconOpen: { type: String, default:"fa fa-angle-down"},

1
assets/src/index.js
View File

@ -12,7 +12,6 @@ import Builder from './appBuilder'
import Sound from './sound'
import {Set} from './model'
import "./assets/vendor"
import './assets/styles.scss'