flyer v2 + correct night colors
Dorian
3 years ago
parent
3447053632
commit
a2ebcf60e4
@ -1,282 +0,0 @@
|
|||||||
/*
|
|
||||||
bug fix past / confirmed in both dark and light time
|
|
||||||
make sure it fit on iphone 5
|
|
||||||
make whole transition in size
|
|
||||||
add (open) button
|
|
||||||
add a [now] indicator on the timeline
|
|
||||||
decide if we leave or not the illumination level
|
|
||||||
homogenize time notation (19h30 & 8:05:30pm)
|
|
||||||
*/
|
|
||||||
/* CALENDAR SECTIONS
|
|
||||||
============================================================================ */
|
|
||||||
.calendar-box {
|
|
||||||
display: grid;
|
|
||||||
align-items: last baseline;
|
|
||||||
grid-template-columns: repeat(4, auto) 1fr;
|
|
||||||
grid-template-rows: auto auto;
|
|
||||||
gap: calc(var(--pad) * 1) calc(var(--pad) * 4);
|
|
||||||
padding: calc(var(--pad) * 2) 0;
|
|
||||||
border-bottom: var(--border);
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-box .phase-name {
|
|
||||||
/* has to have fixed width so both phase name have same width */
|
|
||||||
width: 4.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-box>.reservation-wrapper {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- date --- */
|
|
||||||
#calendar-section .day-in-full {
|
|
||||||
display: block;
|
|
||||||
font-size: var(--fs-big);
|
|
||||||
margin-bottom: -0.15em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#calendar-section .number-date {
|
|
||||||
/* mono */
|
|
||||||
font-family: 'Inconsolata', monospace;
|
|
||||||
font-variation-settings: 'wght'220, 'wdth'120;
|
|
||||||
font-size: calc(var(--fs-mono) * 2.4);
|
|
||||||
line-height: 1;
|
|
||||||
/* classic */
|
|
||||||
/* font-size: var(--fs-big);
|
|
||||||
line-height: 1; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.number-date span:not(:last-of-type)::after {
|
|
||||||
content: ".";
|
|
||||||
margin: 0 -0.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- moon drawing --- */
|
|
||||||
.moon-drawing {
|
|
||||||
--size: 0.8em;
|
|
||||||
--illumination: 1;
|
|
||||||
font-size: var(--fs-title);
|
|
||||||
display: block;
|
|
||||||
margin: auto;
|
|
||||||
width: var(--size);
|
|
||||||
height: var(--size);
|
|
||||||
background-color: rgba(255, 255, 255, var(--illumination));
|
|
||||||
border-radius: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- phase name --- */
|
|
||||||
h2.phase-name {
|
|
||||||
line-height: 0.76;
|
|
||||||
text-transform: capitalize;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- reservation link --- */
|
|
||||||
/* basic */
|
|
||||||
.reservation-wrapper {
|
|
||||||
font-size: var(--fs-big);
|
|
||||||
text-align: right;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reservation-wrapper a {
|
|
||||||
text-transform: capitalize;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-box:not(.confirmed) .reservation-wrapper {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* blue if confirmed */
|
|
||||||
.confirmed .reservation-wrapper {
|
|
||||||
color: midnightblue;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* underline if confirmed and not past (=has href)*/
|
|
||||||
.confirmed .reservation-wrapper a[href] {
|
|
||||||
color: midnightblue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.confirmed .reservation-wrapper a[href] span:nth-of-type(2) {
|
|
||||||
text-decoration: underline;
|
|
||||||
text-decoration-thickness: var(--border-width);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* grey if past */
|
|
||||||
.past .reservation-wrapper {
|
|
||||||
color: grey;
|
|
||||||
}
|
|
||||||
|
|
||||||
.past .reservation-wrapper a {
|
|
||||||
color: grey;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- secondary info --- */
|
|
||||||
.moon-event-time {
|
|
||||||
padding-left: 0.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sun {
|
|
||||||
font-size: 1.75em;
|
|
||||||
vertical-align: initial;
|
|
||||||
margin-right: 0.14em;
|
|
||||||
position: relative;
|
|
||||||
top: 0.18em;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.api-info-wrapper {
|
|
||||||
display: contents;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sunset {
|
|
||||||
grid-column: 4 / span 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.moon-event-time {
|
|
||||||
grid-column: 1 / span 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.distance {
|
|
||||||
grid-column: 3 / span 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.illumination {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- past & confirmed --- */
|
|
||||||
/* the past & confirmed must be visible without opening on mobile!! */
|
|
||||||
.confirmed .date-wrapper,
|
|
||||||
.confirmed .phase-name-wrapper {
|
|
||||||
color: midnightblue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.past .date-wrapper,
|
|
||||||
.past .phase-name-wrapper {
|
|
||||||
color: grey;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .last-past:after {
|
|
||||||
content: "\27A4";
|
|
||||||
display: block;
|
|
||||||
background: var(--c-light);
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
grid-column: 2 / span 1;
|
|
||||||
} */
|
|
||||||
|
|
||||||
/* loading-holder */
|
|
||||||
.loading-holder {
|
|
||||||
margin: calc(var(--pad) * 2) 0;
|
|
||||||
animation: glowing 1s infinite alternate;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes glowing {
|
|
||||||
from {
|
|
||||||
color: var(--c-dark);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* FOOTER
|
|
||||||
============================================================================ */
|
|
||||||
|
|
||||||
.calendar > footer{
|
|
||||||
text-align: center;
|
|
||||||
grid-column: 1 / span 2;
|
|
||||||
margin-bottom: calc(var(--pad) * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* MOBILE
|
|
||||||
============================================================================ */
|
|
||||||
@media only screen and (max-width: 1050px) {
|
|
||||||
.calendar-box {
|
|
||||||
gap: calc(var(--pad) * 1) calc(var(--pad) * 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 850px) {
|
|
||||||
.calendar-box {
|
|
||||||
grid-template-columns: 1fr auto 1fr;
|
|
||||||
grid-template-rows: auto auto auto;
|
|
||||||
gap: 0 calc(var(--pad) * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-box:not(.confirmed) {
|
|
||||||
grid-template-rows: auto auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- typo adjustments --- */
|
|
||||||
.moon-drawing {
|
|
||||||
--size: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-wrapper .number-date {
|
|
||||||
font-variation-settings: 'wght'250, 'wdth'120;
|
|
||||||
font-size: calc(var(--fs-mono) * 2.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- open / close mobile mechanism --- */
|
|
||||||
/* the open close button */
|
|
||||||
.date-wrapper,
|
|
||||||
.phase-name-wrapper,
|
|
||||||
.moon-drawing {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* hidding in mobile - when click --> .open */
|
|
||||||
.calendar-box.open {
|
|
||||||
gap: calc(var(--pad) * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.to-hide-on-mob {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* walk info placement */
|
|
||||||
.open.confirmed .walk-info-wrapper {
|
|
||||||
display: block;
|
|
||||||
grid-column-end: span 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open.confirmed .reservation-wrapper {
|
|
||||||
display: block;
|
|
||||||
padding-right: calc(var(--pad) * 1);
|
|
||||||
grid-column: -2 / -1;
|
|
||||||
grid-row: -2 / -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* api-info placement */
|
|
||||||
.open .api-info-wrapper {
|
|
||||||
grid-column-end: span 2;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.api-info-wrapper>* {
|
|
||||||
flex-basis: 100%;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sunset {
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.moon-event-time {
|
|
||||||
order: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.illumination {
|
|
||||||
order: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.distance {
|
|
||||||
order: 4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 600px) {}
|
|
||||||
@ -1,261 +0,0 @@
|
|||||||
|
|
||||||
class Grid{
|
|
||||||
constructor(id, cell_size, mode = "STRETCH"){
|
|
||||||
|
|
||||||
this.id = id;
|
|
||||||
this.$grid = $("#"+id);
|
|
||||||
|
|
||||||
if (Array.isArray(cell_size)){
|
|
||||||
this.cell_width = cell_size[0];
|
|
||||||
this.cell_height = cell_size[1];
|
|
||||||
} else{
|
|
||||||
this.cell_width = cell_size;
|
|
||||||
this.cell_height = cell_size;
|
|
||||||
}
|
|
||||||
this.columns = 0;
|
|
||||||
this.rows = 0;
|
|
||||||
|
|
||||||
const possible_mode = ["STRETCH", "FIXED", "SPACE"];
|
|
||||||
if(possible_mode.includes(mode)){
|
|
||||||
this.mode = mode;
|
|
||||||
}
|
|
||||||
|
|
||||||
// this.init_css();
|
|
||||||
|
|
||||||
this.elements = [];
|
|
||||||
this.distribute = function(i,j){
|
|
||||||
// default distribution if there is more than one element
|
|
||||||
let index = j;
|
|
||||||
let choose = (index+(i%this.elements.length))%this.elements.length;
|
|
||||||
return choose;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.mouvements = [];
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
init_css(){
|
|
||||||
// get the new element because pagedjs changed it
|
|
||||||
this.$grid = $("#"+this.id);
|
|
||||||
|
|
||||||
// compute number of cell that can fit horizontaly and verticaly
|
|
||||||
this.columns = String(Math.floor(this.$grid.width() / this.cell_width));
|
|
||||||
this.rows = String(Math.floor(this.$grid.height() / this.cell_height));
|
|
||||||
console.log(this.$grid.width(), this.$grid.height());
|
|
||||||
console.log("col-row-size", this.columns, this.rows, "(" + this.cell_width + "px", this.cell_width + "px" + ")");
|
|
||||||
|
|
||||||
// init css grid
|
|
||||||
this.$grid.css("display", "grid");
|
|
||||||
if(this.mode == "STRETCH" || this.mode == "SPACE"){
|
|
||||||
this.$grid.css("grid-template-columns", "repeat("+ this.columns +", 1fr");
|
|
||||||
this.$grid.css("grid-template-rows", "repeat("+ this.rows +", 1fr");
|
|
||||||
} else{
|
|
||||||
this.$grid.css("grid-template-columns", "repeat("+ this.columns +", "+ this.cell_width + "px");
|
|
||||||
this.$grid.css("grid-template-rows", "repeat("+ this.rows +", "+ this.cell_height + "px");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
addElement(element_template){
|
|
||||||
this.elements.push(element_template);
|
|
||||||
}
|
|
||||||
|
|
||||||
addMouvement(grid_mouvement){
|
|
||||||
this.mouvements.push(grid_mouvement);
|
|
||||||
}
|
|
||||||
|
|
||||||
draw(){
|
|
||||||
// fill all the grid with it's element
|
|
||||||
|
|
||||||
this.init_css();
|
|
||||||
|
|
||||||
for (var i = 0; i < this.rows; i++) {
|
|
||||||
for (var j = 0; j < this.columns; j++) {
|
|
||||||
|
|
||||||
// pick the element we are going to draw
|
|
||||||
let pick = this.distribute(i,j);
|
|
||||||
let element_html = "";
|
|
||||||
if(pick >= 0){
|
|
||||||
element_html = this.elements[pick].html;
|
|
||||||
}
|
|
||||||
|
|
||||||
// a clone
|
|
||||||
let $el = $(element_html);
|
|
||||||
|
|
||||||
// wrapp it in a cell
|
|
||||||
let $cell = $("<div>").addClass("grid-cell");
|
|
||||||
let $wrapper = $("<div>").addClass("element-wrapper");
|
|
||||||
//so we can chain transform on it
|
|
||||||
// $wrapper.css("transform-origin", "center center");
|
|
||||||
// $wrapper.css("transform", "translate(-50%, -50%)");
|
|
||||||
if(this.mode == "SPACE"){
|
|
||||||
$wrapper.css("width", this.cell_width);
|
|
||||||
$wrapper.css("height", this.cell_height);
|
|
||||||
}
|
|
||||||
$cell.append($wrapper.append($el));
|
|
||||||
|
|
||||||
// iterate over all mouvement and apply them to the clone
|
|
||||||
this.mouvements.forEach( function(mvt){
|
|
||||||
mvt.apply($cell,i,j);
|
|
||||||
});
|
|
||||||
|
|
||||||
// get a clone with mouvement applied
|
|
||||||
// let $el = this.element_template.draw(i,j);
|
|
||||||
|
|
||||||
|
|
||||||
this.$grid.append($cell);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
class GridElement{
|
|
||||||
// a template of grid element to clone into the grid
|
|
||||||
constructor(id){
|
|
||||||
|
|
||||||
//get html content string
|
|
||||||
// let content = $("#"+id).html();
|
|
||||||
|
|
||||||
// wrapp it in a cell
|
|
||||||
// let $cell = $("<div>").addClass("grid-cell");
|
|
||||||
// let $wrapper = $("<div>").addClass("element-wrapper");
|
|
||||||
// $cell.append($wrapper.append(content));
|
|
||||||
//
|
|
||||||
// this.html = $("<div>").append($cell).html().trim();
|
|
||||||
|
|
||||||
this.html = $("#"+id).html();
|
|
||||||
|
|
||||||
// this.mouvements = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// addMouvement(grid_mouvement){
|
|
||||||
// this.mouvements.push(grid_mouvement);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// draw(i, j){
|
|
||||||
// // return the DOM element according to it's template and an i,j parameter
|
|
||||||
//
|
|
||||||
// // a clone
|
|
||||||
// let $new_el = $(this.html);
|
|
||||||
//
|
|
||||||
// // iterate over all mouvement and apply them to the clone
|
|
||||||
// this.mouvements.forEach( function(mvt){
|
|
||||||
// mvt.apply($new_el,i,j);
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// return $new_el;
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
|
|
||||||
class GridMouvement{
|
|
||||||
|
|
||||||
constructor(css_property, eval_function, selector=".element-wrapper"){
|
|
||||||
this.selector = selector;
|
|
||||||
this.property = css_property;
|
|
||||||
this.evaluate = eval_function;
|
|
||||||
}
|
|
||||||
|
|
||||||
apply($element, i, j){
|
|
||||||
// apply the mouvement to an element according to it's i, j position
|
|
||||||
// on the grid
|
|
||||||
let $search = $("<div>").append($element);
|
|
||||||
let $affected_by_mvt = $search.find(this.selector);
|
|
||||||
let css = this.evaluate(i,j);
|
|
||||||
if(this.property == "transform"){
|
|
||||||
let current_transform = $affected_by_mvt.css("transform");
|
|
||||||
css = current_transform + " " + css;
|
|
||||||
}
|
|
||||||
$affected_by_mvt.css(this.property, css);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// default mouvements
|
|
||||||
|
|
||||||
function map_range(value, in_min, in_max, out_min, out_max) {
|
|
||||||
return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
|
|
||||||
}
|
|
||||||
|
|
||||||
const sym2HH = new GridMouvement("transform", function(i,j){
|
|
||||||
let scaleY = 1;
|
|
||||||
if(j%2==1){ scaleY = -1; }
|
|
||||||
let transform = "scaleY("+scaleY+")";
|
|
||||||
return transform;
|
|
||||||
});
|
|
||||||
const sym2VV = new GridMouvement("transform", function(i,j){
|
|
||||||
let scaleX = 1;
|
|
||||||
if(i%2==1){ scaleX = -1; }
|
|
||||||
let transform = "scaleX("+scaleX+")";
|
|
||||||
return transform;
|
|
||||||
});
|
|
||||||
const sym4 = new GridMouvement("transform", function(i,j){
|
|
||||||
let scaleX = 1;
|
|
||||||
let scaleY = 1;
|
|
||||||
if(i%2==1){ scaleX = -1; }
|
|
||||||
if(j%2==1){ scaleY = -1; }
|
|
||||||
let transform = "scaleX("+scaleX+") scaleY("+scaleY+")";
|
|
||||||
return transform;
|
|
||||||
});
|
|
||||||
const sym4alt = new GridMouvement("transform", function(i,j){
|
|
||||||
let scaleX = 1;
|
|
||||||
let scaleY = 1;
|
|
||||||
if(i%2==1){ scaleY = -1; }
|
|
||||||
if(j%2==1){ scaleX = -1; }
|
|
||||||
let transform = "scaleX("+scaleX+") scaleY("+scaleY+")";
|
|
||||||
return transform;
|
|
||||||
});
|
|
||||||
|
|
||||||
const line_shift = new GridMouvement("transform", function(i,j){
|
|
||||||
let translate = "";
|
|
||||||
if(i%2==1){
|
|
||||||
translate = "translateX(-25%)";
|
|
||||||
}
|
|
||||||
if(i%2==0){
|
|
||||||
translate = "translateX(+25%)";
|
|
||||||
}
|
|
||||||
return translate;
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
const shrink = new GridMouvement("transform", function(i,j){
|
|
||||||
let factor = j/(mygrid.columns);
|
|
||||||
return "scale("+factor+")";
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
const rotation = new GridMouvement("transform", function(i,j){
|
|
||||||
let angle = String((j/(mygrid.columns-1))*360)+"deg";
|
|
||||||
let rotate = "rotate("+angle+")";
|
|
||||||
return rotate;
|
|
||||||
});
|
|
||||||
|
|
||||||
const random_rot = new GridMouvement("transform", function(i,j){
|
|
||||||
let angle = Math.random()*360;
|
|
||||||
let rotate = "rotate("+angle+"deg)";
|
|
||||||
return rotate;
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
const random_color = new GridMouvement("background", function(i,j){
|
|
||||||
let hue = map_range(Math.random(),0,1,30,100);
|
|
||||||
let color = "hsl("+hue+",70%,50%)";
|
|
||||||
return color;
|
|
||||||
}, ".leaves");
|
|
||||||
|
|
||||||
|
|
||||||
const scattered = new GridMouvement("transform", function(i,j){
|
|
||||||
let maxdecal = 120;
|
|
||||||
let decalx = (Math.random()*maxdecal) - (maxdecal/2);
|
|
||||||
let decaly = (Math.random()*maxdecal) - (maxdecal/2);
|
|
||||||
let transform = "translate("+decalx+"%, "+decaly+"%)";
|
|
||||||
return transform;
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
const diagonal_fontsize = new GridMouvement("font-size", function(i,j){
|
|
||||||
let x = j/(mygrid.columns-1);
|
|
||||||
let y = i/(mygrid.rows-1);
|
|
||||||
let fontsize = Math.max(Math.abs(x-y) * 10, 1);
|
|
||||||
return fontsize+"em";
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue