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

mobile device support

Browse Source
This commit is contained in:
bkfox
2024-02-12 23:28:59 +01:00
parent afc2e41bdb
commit 0ba0f8ae72
15 changed files with 171 additions and 575 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,13 +30,6 @@ input.half-field:not(:active):not(:hover) {
--link-fg: #00A6A6;
--link-hv-fg: var(--text-color);
--hg-color: #EFCA08;
--hg-color-alpha: #EFCA08B3;
--hg-color-grey: rgba(230, 230, 60, 1);
--hg-color-2: #F49F0A;
--hg-color-2-alpha: #F49F0AB3;
--hg-color-2-grey: rgba(50, 200, 200, 1);
--nav-primary-height: 3rem;
--nav-secondary-height: 2.5rem;
--nav-fg: var(--text-color);
@ -51,22 +44,38 @@ input.half-field:not(:active):not(:hover) {
}
:root {
font-size: 14px;
}
body {
font-size: 1.4em;
background-color: var(--body-bg);
}
@media screen and (max-width: v.$screen-wider) {
body { font-size: 1.2em; }
@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) {
body { font-size: 1em; }
html { font-size: 18px !important; }
}
:root {
--header-height: 20rem;
}
@media screen and (max-width: v.$screen-wider) {
html { font-size: 20px !important; }
}
@media screen and (min-width: v.$screen-wider) {
html { font-size: 24px !important; }
}
h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {

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

@ -31,8 +31,8 @@
--preview-cover-size: 14rem;
--preview-cover-small-size: 10rem;
--preview-cover-tiny-size: 4rem;
--preview-wide-content-sz: #{v.$text-size-bigger};
--preview-heading-bg-color: var(--hg-color);
--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};
@ -89,9 +89,9 @@
--section-content-sz: 1rem;
--preview-title-sz: #{v.$text-size};
--preview-subtitle-sz: #{v.$text-size-smaller};
--preview-wide-content-sz: #{v.$text-size};
// --preview-title-sz: #{v.$text-size};
// --preview-subtitle-sz: #{v.$text-size-smaller};
// --preview-wide-content-sz: #{v.$text-size};
}
}
@ -177,7 +177,6 @@
}
&.active:not(:hover) {
// border-color: var(--hg-color-alpha);
color: var(--button-active-fg);
background-color: var(--button-active-bg);
}
@ -187,9 +186,9 @@
}
&[disabled], &.disabled {
background-color: var(--hg-color-grey);
color: var(--hg-color-2);
border-color: var(--hg-color-2-alpha);
background-color: var(--text-color-light);
color: var(--secondary-color);
border-color: var(--secondary-color-light);
}
.dropdown-trigger {
@ -430,10 +429,6 @@
display: block !important;
}
.title {
overflow: hidden;
}
.subtitle {
font-size: v.$text-size-2;
}
@ -460,46 +455,6 @@
}
// ---- grid
.list-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: dense;
gap: v.$mp-4;
// .grid-wide { grid-column: 1 / 3; }
}
@mixin list-grid-1 {
.list-grid {
grid-template-columns: 1fr;
// .grid-wide { grid-column: 1; }
}
}
@mixin list-grid-2 {
.list-grid {
grid-template-columns: 1fr;
// .grid-wide { grid-column: 1; }
}
}
@mixin list-grid-3 {
.list-grid {
grid-template-columns: 1fr;
// .grid-wide { grid-column: 1; }
}
}
.mobile {
@include list-grid-1;
}
@media screen and (max-width: v.$screen-smaller) {
@include list-grid-1;
}
// ---- ---- Carousel
.a-carousel {
.a-carousel-viewport {

54
assets/src/assets/helpers.scss
View File

@ -1,5 +1,6 @@
@use "./vars";
@use "./vars" as v;
// ---- layout
.align-left { text-align: left; justify-content: left; }
.align-right { text-align: right; justify-content: right; }
@ -11,13 +12,31 @@
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.push-right, .flex-push-right { margin-left: auto !important; }
.push-bottom { margin-top: auto !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; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr }
// ---- 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; }
@ -26,6 +45,7 @@
.float-right { float: right }
.float-left { float: left }
// ---- boxing
.is-fullwidth { width: 100%; }
.is-fullheight { height: 100%; }
.is-fixed-bottom {
@ -34,23 +54,13 @@
margin-bottom: 0px;
border-radius: 0;
}
.is-borderless { border: none; }
.no-border { border: 0px !important; }
.overflow-hidden { overflow: hidden }
.overflow-hidden.is-fullwidth { max-width: 100%; }
.p-relative { position: relative !important }
.p-absolute { position: absolute !important }
.p-fixed { position: fixed !important }
.p-sticky { position: sticky !important }
.p-static { position: static !important }
.height-full { height: 100%; }
.ws-nowrap { white-space: nowrap; }
.no-border { border: 0px !important; }
*[draggable="true"] {
cursor: move;
}
@ -67,16 +77,16 @@
// -- colors
.hg-color { color: var(--highlight-color); }
.hg-color-2 { color: var(--highlight-color-2); }
.main-color { color: var(--main-color); }
.secondary-color { color: var(--secondary-color); }
.bg-transparent { background-color: transparent; }
.is-success {
background-color: vars.$green !important;
border-color: vars.$green-dark !important;
background-color: v.$green !important;
border-color: v.$green-dark !important;
}
.is-danger {
background-color: vars.$red !important;
border-color: vars.$red-dark !important;
background-color: v.$red !important;
border-color: v.$red-dark !important;
}

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

@ -47,7 +47,7 @@
}
.vc-weekday-1, .vc-weekday-7 {
color: var(--hg-color-2) !important;
color: var(--secondary-color) !important;
}
@ -124,19 +124,15 @@
}
.navbar-item.active, .table tr.is-selected {
color: var(--hg-color-2);
background-color: var(--hg-color);
color: var(--secondary-color);
background-color: var(--main-color);
}
// -- headings
.title {
text-transform: uppercase;
&.is-3 {
margin-top: v.$mp-3;
}
&.is-3 { margin-top: v.$mp-3; }
}
@ -467,12 +463,6 @@ nav li {
// ---- responsive
body { font-size: 1.4em; }
@media screen and (max-width: v.$screen-wide) {
body { font-size: 1em; }
}
@media screen and (max-width: v.$screen-normal) {
.page .container {
margin-left: v.$mp-4;
@ -485,5 +475,4 @@ body { font-size: 1.4em; }
margin-left: v.$mp-2;
margin-right: v.$mp-2;
}
}

2
assets/src/assets/vendor.scss
View File

@ -23,7 +23,7 @@ $title-color: #000;
@import "~bulma/sass/elements/box";
// @import "~bulma/sass/elements/button";
@import "~bulma/sass/elements/container";
@import "~bulma/sass/elements/content";
// @import "~bulma/sass/elements/content";
@import "~bulma/sass/elements/icon";
// @import "~bulma/sass/elements/image";
// @import "~bulma/sass/elements/notification";