diff --git a/.gitattributes b/.gitattributes deleted file mode 100644 index dfe0770..0000000 --- a/.gitattributes +++ /dev/null @@ -1,2 +0,0 @@ -# Auto detect text files and perform LF normalization -* text=auto diff --git a/css/calendar.css b/css/calendar.css new file mode 100644 index 0000000..886b803 --- /dev/null +++ b/css/calendar.css @@ -0,0 +1,350 @@ +/* Calendar */ + +#cal-container { + position: relative; + + width: 100%; + /* height: 1200px; */ + padding: 0; + + font-size: 0.8rem; + line-height: 100%; +} + +#cal-container, +#cal-container * { + box-sizing: border-box; +} + + + +/* Time slots */ + +#cal-container .cal-time-slot-container { + display: grid; + /* grid-template-columns: repeat(24, 1fr); */ + grid-template-rows: 30px auto; + + position: absolute; + top: 0; + left: 0; + width: 100%; + height: calc(100% + 30px); + padding: 0; + border-bottom: 2px solid #928c79; + z-index: 10; +} + +#cal-container .cal-time-slot { + border-right: 1px solid #928c79; + background-color: rgba(255, 223, 165, 0.08); +} + +/* #cal-container .cal-time-slot:hover { + background-color: red; +} */ + +#cal-container .cal-time-slot:nth-child(even) { + background-color: rgba(255, 223, 165, 0.05); +} + +/* #cal-container .cal-time-slot:nth-child(even):hover { + background-color: #D9D9D9; +} */ + +#cal-container .cal-time-slot:last-child { + border-right: 0; +} + +#cal-container .cal-time-slot-hour { + padding: 0 0 0 calc(100% - 0.9rem + 7px); + background-color: none; /* rgba(255, 223, 165, 0.08); */ + border-bottom: 2px solid #928c79; + font-size: 0.9rem; +} + +#cal-container .cal-time-slot-hour:nth-child(even) { + background-color: none;/* rgba(255, 223, 165, 0.05);*/ +} + +#cal-container .cal-time-slot-hour:first-child { + color: transparent; + border-right: 0; +} + +#cal-container .cal-time-slot-hour.cal-last-hour { + padding: 0; + color: transparent; +} + +#cal-container .cal-time-slot.cal-last-hour, +#cal-container .cal-time-slot-hour.cal-last-hour { + border-right: 1px solid #928c79; +} + +#cal-container .cal-time-slot.cal-first-hour, +#cal-container .cal-time-slot-hour.cal-first-hour { + border-left: 1px solid #928c79; +} + +/* Events */ + +#cal-container .cal-event-container { + display: grid; + /* grid-template-columns: repeat(24, 1fr); */ + /* grid-template-rows: repeat(12, auto); */ + + position: absolute; + top: 40px; + left: 0; + width: 100%; + /* height: 100%; */ + padding: 0; + z-index: 100; +} + +#cal-container .cal-event { + position: relative; + height: 42px; + margin: 2px 0; + padding: 5px; + /* background-color: #EFEFEF; */ + border-radius: 3px; + /* border: 1px solid #CCC; */ + border-width: 1px; + border-style: solid; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + /* z-index: 500; */ + transition: 50ms ease-in; +} + +#cal-container .cal-event > * { + display: none; + margin: 5px; + overflow: hidden; +} + +#cal-container .cal-event > .cal-event-name, +#cal-container .cal-event > .cal-event-location, +#cal-container .cal-event > .cal-event-perm-count { + display: block; + margin: 0; +} + +#cal-container .cal-event > .cal-event-name { + font-weight: 700; +} + +#cal-container .cal-event > .cal-event-location { + font-weight: 300; + font-style: italic; +} + +/*#cal-container .cal-event > .cal-event-location::before { + content: " · "; +}*/ + +#cal-container .cal-event > .cal-event-perm-count { + position: absolute; + bottom: 0; + right: 0; +} + +#cal-container .cal-event:not(.cal-event-subscribed) > .cal-event-perm-count.cal-perms-missing { + width: calc(100% - 10px); + right: auto; + margin: 5px; + padding: 5px; + background-color: #FFF; + border: 2px solid #E44; + color: #E44; + font-weight: bold; + border-radius: 3px; + overflow: hidden; +} + +#cal-container .cal-event.cal-event-subscribed { + border-width: 3px; + border-color: #000; +} + +#cal-container .cal-event.cal-event-subscribed::after { + content: "✔"; + position: absolute; + left: 0; + bottom: 0; + width: 16px; + height: 16px; + padding: 1px; + color: #fff; + background-color: #000; + border-top-right-radius: 3px; +} + + +/* Event details popup */ + +#cal-container .cal-event-details { + position: absolute; + min-height: 100px; + /* min-width: 40%; */ + max-width: 80%; + padding: 20px; + background-color: #333; + color: #FFF; + border-radius: 4px; + box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6); + z-index: 1000; +} + +#cal-container .cal-event-details:after { + bottom: 100%; + left: 50%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-bottom-color: #333; + border-width: 20px; + margin-left: -20px; +} + +#cal-container .cal-event-details.above-event:after { + top: 100%; + left: 50%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-top-color: #333; + border-width: 20px; + margin-left: -20px; +} + +#cal-container .cal-event-details * { + z-index: 1000; +} + +#cal-container .cal-event-details .cal-detail-close-button { + width: 35px; + height: 35px; + position: absolute; + top: 10px; + right: 10px; + margin: 0; + padding: 5px; + background: transparent; + border: none; + border-radius: 50%; + font-size: 1.2rem; + color: #BBB; + transition: 100ms ease-out; +} + +#cal-container .cal-event-details .cal-detail-close-button:hover { + background-color: #484848; + color: #EFEFEF; +} + +#cal-container .cal-event-details a, +#cal-container .cal-event-details a:hover { + color: #FFF; + text-decoration: none; +} + +#cal-container .cal-event-details .cal-detail-name { + padding: 10px; + border-radius: 4px; + font-size: 1rem; + color: #FFF; + text-transform: uppercase; + text-align: center; +} + +#cal-container .cal-event-details .cal-detail-name h3 { + margin: 0 20px 20px 20px; +} + +#cal-container .cal-event-details table { + margin: 0 auto; +} + +#cal-container .cal-event-details td.cal-detail-label { + padding: 0 10px 10px 0; + font-weight: bold; + text-align: right; +} + +#cal-container .cal-event-details td.cal-detail-value { + padding: 0 0 10px 10px; + text-align: left; +} + +#cal-container .cal-event-details .cal-detail-perm-area { + margin: 10px 0; + padding: 10px; + background-color: #DFDFDF; + color: #333; + text-align: center; + border-radius: 4px; +} + +#cal-container .cal-event-details .cal-detail-perm-title { + margin: 0 0 10px 0; +} + +#cal-container .cal-event-details .cal-detail-perm-area .cal-detail-perm-count { + margin: 0 10px 0 0; + font-size: 1.7rem; + vertical-align: middle; +} + +#cal-container .cal-event-details .cal-detail-perm-area .cal-detail-perm-count.cal-perms-missing { + color: #E44; +} + +#cal-container .cal-event-details .cal-detail-perm-area .cal-detail-perm-count.cal-perms-full { + color: #393; +} + + +#cal-container .cal-event-details .cal-detail-perm-area .cal-detail-perm-subscription-switch { + margin: 0 0 0 10px; + padding: 10px; + font-size: 1.35rem; + vertical-align: middle; +} + +#cal-container .cal-event-details .cal-detail-perm-area .cal-detail-perm-nb-missing-perms { + margin: 20px 0 0 0; + padding: 5px; + background-color: #FFF; + border-radius: 4px; + text-align: center; + font-size: 1.1rem; + color: #E44; + font-weight: bold; +} + +#cal-container .cal-event-details .cal-detail-description { + margin: 20px 0 0 0; + color: #DDD; + font-size: 0.9rem; + font-style: italic; + text-align: justify; + line-height: 130%; +} + +#cal-container .cal-event-details .cal-detail-tag { + display: inline-block; + margin: 5px; + padding: 5px; + border: 1px solid #DDD; +} diff --git a/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000..192eb9c --- /dev/null +++ b/css/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..dae6490 --- /dev/null +++ b/css/style.css @@ -0,0 +1,660 @@ +/*--------------------------------------------------------*/ +/* FONTS +/*--------------------------------------------------------*/ + +/* roboto-300 - latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 300; + src: local('Roboto Light'), local('Roboto-Light'), + url('../fonts/roboto-v18-latin-300.woff2') format('woff2'), + url('../fonts/roboto-v18-latin-300.woff') format('woff'); +} + +/* roboto-regular - latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), + url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), + url('../fonts/roboto-v18-latin-regular.woff') format('woff'); +} + +/* roboto-italic - latin */ +@font-face { + font-family: 'Roboto'; + font-style: italic; + font-weight: 400; + src: local('Roboto Italic'), local('Roboto-Italic'), + url('../fonts/roboto-v18-latin-italic.woff2') format('woff2'), + url('../fonts/roboto-v18-latin-italic.woff') format('woff'); +} + +/* roboto-700 - latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 700; + src: local('Roboto Bold'), local('Roboto-Bold'), + url('../fonts/roboto-v18-latin-700.woff2') format('woff2'), + url('../fonts/roboto-v18-latin-700.woff') format('woff'); +} + + + + + + +/*--------------------------------------------------------*/ +/* GENERAL RULES +/*--------------------------------------------------------*/ + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +html, body { + font-family: "Roboto", serif; + font-weight: 300; + line-height: 180%; + color: #FFFBEA; + font-size: 18px; +} + +body { + background-color: #132B46; +} + +a, +a:hover, +a:active, +a:visited { + color: #FFFBEA; + text-decoration: none; +} + + +/*--------------------------------------------------------*/ + + +@media only screen and (max-width: 480px) { + html { + font-size: 16px; + } +} + + + + + +/*--------------------------------------------------------*/ +/* HEADER +/*--------------------------------------------------------*/ + +#main-header { + height: 720px; + + position: relative; + + background: #6d93bb; + background: linear-gradient(to bottom, #134189 0%, #6d93bb 99%, #132B46 100%); +} + +#main-header-title { + height: 45%; + width: 45%; + + position: absolute; + top: 60px; + left: 5%; + + z-index: 1000; +} + +#main-header-moon { + height: 25%; + width: 25%; + + position: absolute; + top: 80px; + right: 0px; + + z-index: 100; +} + +#main-header-clouds { + width: 100%; + + position: absolute; + bottom: 15%; + object-fit: cover; + + mix-blend-mode: lighten; + + z-index: 200; +} + +#main-header-background-city { + width: 100%; + + position: absolute; + bottom: 0; + object-fit: cover; + + z-index: 500; +} + + +/*--------------------------------------------------------*/ + + +@media only screen and (max-width: 1200px) { + #main-header { + height: 650px; + } + + #main-header-moon { + height: 20%; + width: 20%; + + right: 50px; + } + + #main-header-clouds { + bottom: 12%; + } +} + +@media only screen and (max-width: 880px) { + #main-header { + height: 500px; + } + + #main-header-title { + height: 60%; + width: 60%; + + left: 20%; + top: 20px; + } + + #main-header-moon { + display: none; + } + + #main-header-clouds { + bottom: 10%; + } +} + + +@media only screen and (max-width: 480px) { + #main-header { + height: 350px; + } +/* + #main-header-title { + height: 75%; + width: 75%; + }*/ +} + +@media only screen and (max-width: 360px) { + #main-header { + height: 300px; + } + + #main-header-title { + height: 70%; + width: 70%; + + left: 15%; + top: 5%; + } +} + + + + + +/*--------------------------------------------------------*/ +/* CONTENT +/*--------------------------------------------------------*/ + +section { + max-width: 960px; + + margin: 0 0 100px calc(50% - 480px); + padding: 0 60px; + + text-align: justify; +} + +section h2 { + margin: 0 0 25px 0; + padding: 0 0 15px 0; + + background: radial-gradient(ellipse at bottom, rgba(255, 223, 165, 0.1) 0%, transparent 70%); + + border: none; + border-bottom: 2px solid rgba(255, 223, 165, 0.5); + border-image-source: linear-gradient(to right, transparent 0%, rgba(255, 223, 165, 0.7) 50%, transparent 100%); + border-image-slice: 1; + + color: rgb(255, 223, 165); + font-size: 2.1rem; + font-weight: 300; + text-transform: uppercase; + text-align: center; + word-wrap: break-word; + hyphens: auto; +} + +section p { + padding: 0 0 20px 0; + font-size: 1rem; +} + +section p.stand-out { + font-style: italic; + text-align: center; +} + + +/*--------------------------------------------------------*/ + + +@media only screen and (max-width: 880px) { + section { + width: 100%; + + margin: 0 auto 100px auto; + padding: 0 60px; + } +} + +@media only screen and (max-width: 480px) { + section { + padding: 0 30px; + } + + section h2 { + font-size: 1.8rem; + } +} + + + + + +/*--------------------------------------------------------*/ +/* BUTTONS +/*--------------------------------------------------------*/ + +.button { + display: block; + width: 80%; + + margin: 20px auto 0 auto; + padding: 15px 20px; + + background-color: rgba(255, 223, 165, 0.1); + + border: 2px solid rgba(255, 223, 165, 0.7); + + color: rgb(255, 223, 165); + font-size: 1.4rem; + font-weight: 400; + text-transform: uppercase; + text-align: center; + + line-height: 32px; + vertical-align: middle; +} + +.button:hover { + background-color: rgba(255, 223, 165, 0.2); +} + +.button img { + height: 32px; + width: 32px; + + margin: 0 5px; +} + +.button > * { + vertical-align: middle; +} + + +/*--------------------------------------------------------*/ + + +@media only screen and (max-width: 480px) { + .button { + width: 100%; + + padding: 10px 15px; + + font-size: 1.1rem; + + line-height: 24px; + } + + .button img { + height: 24px; + width: 24px; + } +} + + + + + +/*--------------------------------------------------------*/ +/* PRICE TABLE +/*--------------------------------------------------------*/ + +table.prices { + max-width: 460px; + width: 100%; + + margin: 20px auto; + + border-collapse: collapse; +} + +table.prices th, +table.prices td { + padding: 8px 0; + + font-size: 1.3rem; + text-align: center; + vertical-align: middle; +} + +table.prices th { + color: rgb(255, 223, 165); +} + +table.prices td { + background-color: rgba(255, 223, 165, 0.05); + + border-top: 2px solid rgba(255, 223, 165, 0.5); + border-bottom: 2px solid rgba(255, 223, 165, 0.5); +} + +table.prices tr:nth-child(odd) td { + background-color: rgba(255, 223, 165, 0.08); +} + + +/*--------------------------------------------------------*/ + + +@media only screen and (max-width: 480px) { + table.prices th, + table.prices td { + padding: 5px 0; + + font-size: 1.1rem; + } +} + + + + +/*--------------------------------------------------------*/ +/* LOCATION +/*--------------------------------------------------------*/ + +#mailing-address { + font-size: 1.5rem; + text-align: center; +} + +#mailing-address img { + width: 32px; + height: 32px; + + vertical-align: bottom; +} + + +#interactive-map { + width: 100%; + + margin: 0 0 20px 0; + + border: none; + border-radius: 10px; +} + + +#public-transport-info { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + + margin: 0 0 0 -100px; + + font-size: 1.5rem; + font-weight: 300; + + line-height: 48px; + vertical-align: middle; + white-space: nowrap; +} + +#public-transport-info > * { + margin: 5px; + + justify-self: left; +} + +#public-transport-info img { + width: 48px; + height: 48px; + + margin: 0 5px 0 0; + + vertical-align: bottom; +} + +#transport-metro-icon, +#transport-metro-stop, +#transport-bus-icon, +#transport-bus-stop { + grid-row: 1; +} + +#transport-rer-icon, +#transport-rer-stop, +#transport-noctilien-icon, +#transport-noctilien-stop { + grid-row: 2; +} + +#transport-metro-icon, +#transport-rer-icon { + grid-column: 1; + justify-self: end; + +} + +#transport-metro-stop, +#transport-rer-stop { + grid-column: 2; +} + +#transport-bus-icon, +#transport-noctilien-icon { + grid-column: 3; + justify-self: end; + +} + +#transport-bus-stop, +#transport-noctilien-stop { + grid-column: 4; +} + + +/*--------------------------------------------------------*/ + + +@media only screen and (max-width: 880px) { + #public-transport-info { + display: grid; + grid-template-columns: 4fr 6fr; + grid-template-rows: 1fr 1fr 1fr 1fr; + align-items: center; + + margin: 0; + + line-height: 48px; + } + + #transport-metro-icon, + #transport-metro-stop { + grid-row: 1; + } + + #transport-bus-icon, + #transport-bus-stop { + grid-row: 2; + } + + #transport-rer-icon, + #transport-rer-stop { + grid-row: 3; + } + + #transport-noctilien-icon, + #transport-noctilien-stop { + grid-row: 4; + } + + #transport-metro-icon, + #transport-rer-icon, + #transport-bus-icon, + #transport-noctilien-icon { + grid-column: 1; + justify-self: end; + + } + + #transport-metro-stop, + #transport-rer-stop, + #transport-bus-stop, + #transport-noctilien-stop { + grid-column: 2; + } +} + +@media only screen and (max-width: 580px) { + #public-transport-info { + line-height: 32px; + } +} + +@media only screen and (max-width: 480px) { + #mailing-address { + font-size: 1.1rem; + } + + #public-transport-info { + font-size: 1.1rem; + } + + #public-transport-info img { + width: 32px; + height: 32px; + } +} + +@media only screen and (max-width: 320px) { + #public-transport-info img { + display: block; + } +} + + + + + +/*--------------------------------------------------------*/ +/* SPONSORS +/*--------------------------------------------------------*/ + +#sponsors { + text-align: center; +} + +#sponsors img { + height: 100px; + object-fit: cover; + + margin: 20px; +} + +#sponsors img.sponsor-disc { + height: 155px; +} + + +/*--------------------------------------------------------*/ + + +@media only screen and (max-width: 480px) { + #sponsors img { + height: 40px; + + margin: 5px; + } + + #sponsors img.sponsor-disc { + height: 60px; + } +} + + + + + +/*--------------------------------------------------------*/ +/* CONTACT +/*--------------------------------------------------------*/ + +#contact-email { + font-family: monospace; + font-size: 1.5rem; + text-align: center; + word-wrap: break-word; +} + +#contact-email img { + width: 32px; + height: 32px; + + vertical-align: bottom; +} + + +/*--------------------------------------------------------*/ + + +@media only screen and (max-width: 480px) { + #contact-email { + font-size: 0.9rem; + } + + #contact-email img { + display: none; + } +} diff --git a/css/tipso.css b/css/tipso.css new file mode 100644 index 0000000..bdac6df --- /dev/null +++ b/css/tipso.css @@ -0,0 +1,109 @@ +/* Tipso Bubble Styles */ +.tipso_bubble, .tipso_bubble > .tipso_arrow{ + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.tipso_bubble { + position: absolute; + text-align: center; + border-radius: 6px; + z-index: 9999; +} +.tipso_style{ + /* cursor: help; */ + /* border-bottom: 1px dotted; */ +} +.tipso_title { + padding: 0; + border-radius: 6px 6px 0 0; + font-weight: 700; +} +.tipso_content { + word-wrap: break-word; + padding: 0; + font-style: italic; +} + +/* Tipso Bubble size classes - Similar to Foundation's syntax*/ +.tipso_bubble.tiny { + font-size: 0.6rem; +} +.tipso_bubble.small { + font-size: 0.8rem; +} +.tipso_bubble.default { + font-size: 1rem; +} +.tipso_bubble.large { + font-size: 1.2rem; + width: 100%; +} + +.tipso_bubble.cal_small { + font-size: 0.7rem; +} + +/* Tipso Bubble Div */ +.tipso_bubble > .tipso_arrow{ + position: absolute; + width: 0; height: 0; + border: 8px solid; + pointer-events: none; +} +.tipso_bubble.top > .tipso_arrow { + border-top-color: #000; + border-right-color: transparent; + border-left-color: transparent; + border-bottom-color: transparent; + top: 100%; + left: 50%; + margin-left: -8px; +} +.tipso_bubble.bottom > .tipso_arrow { + border-bottom-color: #000; + border-right-color: transparent; + border-left-color: transparent; + border-top-color: transparent; + bottom: 100%; + left: 50%; + margin-left: -8px; +} +.tipso_bubble.left > .tipso_arrow { + border-left-color: #000; + border-top-color: transparent; + border-bottom-color: transparent; + border-right-color: transparent; + top: 50%; + left: 100%; + margin-top: -8px; +} +.tipso_bubble.right > .tipso_arrow { + border-right-color: #000; + border-top-color: transparent; + border-bottom-color: transparent; + border-left-color: transparent; + top: 50%; + right: 100%; + margin-top: -8px; +} + +.tipso_bubble .top_right_corner, +.tipso_bubble.top_right_corner { + border-bottom-left-radius: 0; +} + +.tipso_bubble .bottom_right_corner, +.tipso_bubble.bottom_right_corner { + border-top-left-radius: 0; +} + +.tipso_bubble .top_left_corner, +.tipso_bubble.top_left_corner { + border-bottom-right-radius: 0; +} + +.tipso_bubble .bottom_left_corner, +.tipso_bubble.bottom_left_corner { + border-top-right-radius: 0; +} diff --git a/fonts/roboto-v18-latin-300.woff b/fonts/roboto-v18-latin-300.woff new file mode 100644 index 0000000..96663f0 Binary files /dev/null and b/fonts/roboto-v18-latin-300.woff differ diff --git a/fonts/roboto-v18-latin-300.woff2 b/fonts/roboto-v18-latin-300.woff2 new file mode 100644 index 0000000..52c5845 Binary files /dev/null and b/fonts/roboto-v18-latin-300.woff2 differ diff --git a/fonts/roboto-v18-latin-700.woff b/fonts/roboto-v18-latin-700.woff new file mode 100644 index 0000000..a0d2651 Binary files /dev/null and b/fonts/roboto-v18-latin-700.woff differ diff --git a/fonts/roboto-v18-latin-700.woff2 b/fonts/roboto-v18-latin-700.woff2 new file mode 100644 index 0000000..e327dc9 Binary files /dev/null and b/fonts/roboto-v18-latin-700.woff2 differ diff --git a/fonts/roboto-v18-latin-italic.woff b/fonts/roboto-v18-latin-italic.woff new file mode 100644 index 0000000..27c34da Binary files /dev/null and b/fonts/roboto-v18-latin-italic.woff differ diff --git a/fonts/roboto-v18-latin-italic.woff2 b/fonts/roboto-v18-latin-italic.woff2 new file mode 100644 index 0000000..3791c88 Binary files /dev/null and b/fonts/roboto-v18-latin-italic.woff2 differ diff --git a/fonts/roboto-v18-latin-regular.woff b/fonts/roboto-v18-latin-regular.woff new file mode 100644 index 0000000..92dfacc Binary files /dev/null and b/fonts/roboto-v18-latin-regular.woff differ diff --git a/fonts/roboto-v18-latin-regular.woff2 b/fonts/roboto-v18-latin-regular.woff2 new file mode 100644 index 0000000..7e854e6 Binary files /dev/null and b/fonts/roboto-v18-latin-regular.woff2 differ diff --git a/img/header/background-city.svg b/img/header/background-city.svg new file mode 100644 index 0000000..590f4dc --- /dev/null +++ b/img/header/background-city.svg @@ -0,0 +1,392 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/header/clouds.svg b/img/header/clouds.svg new file mode 100644 index 0000000..9388a93 --- /dev/null +++ b/img/header/clouds.svg @@ -0,0 +1,498 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/header/clouds2.svg b/img/header/clouds2.svg new file mode 100644 index 0000000..1ed14ef --- /dev/null +++ b/img/header/clouds2.svg @@ -0,0 +1,706 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/header/moon.svg b/img/header/moon.svg new file mode 100644 index 0000000..517a6b4 --- /dev/null +++ b/img/header/moon.svg @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/header/moon2.svg b/img/header/moon2.svg new file mode 100644 index 0000000..3f37c74 --- /dev/null +++ b/img/header/moon2.svg @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/header/title.svg b/img/header/title.svg new file mode 100644 index 0000000..8c8845e --- /dev/null +++ b/img/header/title.svg @@ -0,0 +1,271 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/icons/email.svg b/img/icons/email.svg new file mode 100644 index 0000000..1945779 --- /dev/null +++ b/img/icons/email.svg @@ -0,0 +1,10 @@ + + + + + + + diff --git a/img/icons/facebook.svg b/img/icons/facebook.svg new file mode 100644 index 0000000..859e407 --- /dev/null +++ b/img/icons/facebook.svg @@ -0,0 +1,23 @@ + + + + + + + + diff --git a/img/icons/location.svg b/img/icons/location.svg new file mode 100644 index 0000000..97e1b22 --- /dev/null +++ b/img/icons/location.svg @@ -0,0 +1,10 @@ + + + + + + + diff --git a/img/icons/ratp/bus-21.svg b/img/icons/ratp/bus-21.svg new file mode 100644 index 0000000..fa74f23 --- /dev/null +++ b/img/icons/ratp/bus-21.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + diff --git a/img/icons/ratp/bus-27.svg b/img/icons/ratp/bus-27.svg new file mode 100644 index 0000000..a370ec1 --- /dev/null +++ b/img/icons/ratp/bus-27.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + diff --git a/img/icons/ratp/metro-7.svg b/img/icons/ratp/metro-7.svg new file mode 100644 index 0000000..096cc62 --- /dev/null +++ b/img/icons/ratp/metro-7.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + diff --git a/img/icons/ratp/noctilien-122.svg b/img/icons/ratp/noctilien-122.svg new file mode 100644 index 0000000..a43cfd3 --- /dev/null +++ b/img/icons/ratp/noctilien-122.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + diff --git a/img/icons/ratp/noctilien-14.svg b/img/icons/ratp/noctilien-14.svg new file mode 100644 index 0000000..96f4486 --- /dev/null +++ b/img/icons/ratp/noctilien-14.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + diff --git a/img/icons/ratp/noctilien-21.svg b/img/icons/ratp/noctilien-21.svg new file mode 100644 index 0000000..5a4559f --- /dev/null +++ b/img/icons/ratp/noctilien-21.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + diff --git a/img/icons/ratp/rer-B.svg b/img/icons/ratp/rer-B.svg new file mode 100644 index 0000000..9085ccc --- /dev/null +++ b/img/icons/ratp/rer-B.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + diff --git a/img/icons/ticket.svg b/img/icons/ticket.svg new file mode 100644 index 0000000..37b5847 --- /dev/null +++ b/img/icons/ticket.svg @@ -0,0 +1,11 @@ + + + + + + + diff --git a/img/sponsors/a-ulm.png b/img/sponsors/a-ulm.png new file mode 100644 index 0000000..b7b74b3 Binary files /dev/null and b/img/sponsors/a-ulm.png differ diff --git a/img/sponsors/cof.png b/img/sponsors/cof.png new file mode 100644 index 0000000..86d1981 Binary files /dev/null and b/img/sponsors/cof.png differ diff --git a/img/sponsors/ens.png b/img/sponsors/ens.png new file mode 100644 index 0000000..59bea14 Binary files /dev/null and b/img/sponsors/ens.png differ diff --git a/img/sponsors/mgen.jpg b/img/sponsors/mgen.jpg new file mode 100644 index 0000000..63a55ba Binary files /dev/null and b/img/sponsors/mgen.jpg differ diff --git a/img/sponsors/soge.svg b/img/sponsors/soge.svg new file mode 100644 index 0000000..86b8271 --- /dev/null +++ b/img/sponsors/soge.svg @@ -0,0 +1,140 @@ + + + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/sponsors/soge2.svg b/img/sponsors/soge2.svg new file mode 100644 index 0000000..4700dd7 --- /dev/null +++ b/img/sponsors/soge2.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..a523941 --- /dev/null +++ b/index.html @@ -0,0 +1,530 @@ + + + + + + + + + + La Nuit — Gala 2018 de l'ENS + + + + + + + +
+ Entre Chien et Loup — À l'Orée de la Nuit + Lune + Nuages rosés + Immeubles en arrière-plan +
+ +
+

Présentation

+
+

Le 1er décembre 2018, venez découvrir l'École Normale Supérieure sous un nouveau jour à l'occasion de son Gala traditionnel, la Nuit de la rue d'Ulm.

+ +

Avec le thème « Entre Chien et Loup — À l’Orée de la Nuit », nous avons cette année choisi de vous faire découvrir une École aux multiples visages, entre ombre et lumière, pour une soirée exceptionnelle. La nuit tombée, l'École se pare de ses plus beaux atours et vous réserve bien des surprises. + +

Amateur·trice·s de musiques électroniques, de concerts, ou de danses, qu'il s'agisse de valse, de rock, de salsa ou de tango, vous trouverez votre bonheur entre sets de DJ et VJ, scènes présentant divers styles musicaux, et salles de danse libre et initiations.

+ +

Du crépuscule à l'aube, du buffet aux dernières minutes de la soirée, la Nuit vous réservera bien des surprises, avec la performance d'un magicien, des expositions artistiques, et de nombreux spectacles : danses, comédie musicale, joutes oratoires, improvisation, fanfare, pompoms...

+ + +
+ Facebook + Page Facebook +
+
+
+
+ +
+

Programme

+

Le buffet commencera à 20h00 et la soirée à 21h00.

+
+
+ 1 + Discours d'ouverture + 01/12/2018 21:55 + 01/12/2018 22:15 + Courô + Discours d'ouverture de la soirée +
+ +
+ 2 + Fanfare + 01/12/2018 23:30 + 02/12/2018 00:15 + Courô + Concert de l'Ernestophone +
+ +
+ 3 + Buffet + 01/12/2018 20:00 + 01/12/2018 22:00 + Pôt + Cocktail dinatoire. Réservation obligatoire +
+ +
+ 4 + Jean & Victoria + 01/12/2018 20:45 + 01/12/2018 21:45 + Pôt + Concert durant le buffet. +
+ +
+ 5 + Vestiaires + 01/12/2018 20:00 + 02/12/2018 04:00 + Pôt + Vestiaires de l'évènement. Entrée par le couloir venant de l'amphithéâtre Dussane +
+ +
+ 6 + Exposition Reflex + 01/12/2018 20:00 + 02/12/2018 04:00 + Petit Pôt + Exposition photographique du club Reflex +
+ +
+ 7 + Prêt de plaids + 01/12/2018 22:00 + 02/12/2018 04:00 + Petit Pôt + Prêt de plaids. Une caution de 5 euros sera demandée. Utile pour braver le froid de l'hiver. +
+ +
+ 8 + Art Ôratoire + 01/12/2018 22:15 + 01/12/2018 23:15 + Dussane + Discours d'éloquence du club Art Ôratoire. +
+ +
+ 9 + Les N'improte quoi + 01/12/2018 23:15 + 02/12/2018 00:45 + Dussane + Cabaret d'improvisation de la troupe des N'improte quoi. +
+ +
+ 10 + Spectacle de danse + 01/12/2018 22:15 + 01/12/2018 23:30 + Gymnase + Démonstration de danse des clubs de l'ENS. +
+ + + +
+ 11 + Danse libre rock + 01/12/2018 23:45 + 02/12/2018 04:00 + Gymnase + Danse libre rock 4 temps et rock 6 temps +
+ +
+ 12 + Initiation rock 4 temps + 01/12/2018 23:45 + 02/12/2018 00:30 + Gymnase + Initiation au rock 4 temps +
+ +
+ 13 + Initiation rock 6 temps + 02/12/2018 00:30 + 02/12/2018 01:15 + Gymnase + Initiation au rock 6 temps +
+ +
+ 14 + Danse libre valse + 01/12/2018 23:00 + 02/12/2018 04:00 + Salle des Actes + Danse libre valse. +
+ +
+ 15 + Initiation valse + 01/12/2018 23:15 + 01/12/2018 23:45 + Salle des Actes + Initiation à la valse. +
+ +
+ 16 + Danse libre salsa + 01/12/2018 23:00 + 02/12/2018 04:00 + Salle Résistants + Danse libre salsa. +
+ +
+ 17 + Initiation salsa + 01/12/2018 23:45 + 02/12/2018 00:15 + Salle Résistants + Initiation à la salsa. +
+ +
+ 18 + Danse libre tango + 01/12/2018 23:00 + 02/12/2018 04:00 + Salle Cavaillès + Danse libre tango. +
+ +
+ 19 + Initiation tango + 02/12/2018 00:15 + 02/12/2018 00:45 + Salle Cavaillès + Initiation au tango. +
+ +
+ 20 + Contes et légendes d'après la Nuit + 02/12/2018 02:30 + 02/12/2018 03:30 + Salle Celan + Il y a plusieurs centaines d'années, sur ces terres, vivaient des hommes et des femmes qui avaient bâti une civilisation très avancée. Ils avaient construit d'immenses immeubles, inventé des écrans magiques, percé le secret de la matière et même marché sur la Lune. De ce monde merveilleux, qui a brusquement disparu dans des conditions complexes et mystérieuses, il ne reste aujourd'hui que quelques vestiges. Et des histoires, qui se transmettent de génération en génération. Tout au bout de la Nuit, à l'heure où les pensées se mélangent, venez vous faire bercer un moment par quelques récits de ce temps révolu, tendres, tragiques ou comiques, qui nous informent de pourquoi il faut se méfier de l'herbe qui brille dans la nuit; de comment les hommes d'alors ont pu survivre au temps de l'effondrement; de ce à quoi pouvait ressembler la vie à cette époque... +
+ +
+ 21 + Exposition "Le Même et l'Autre" + 01/12/2018 20:00 + 02/12/2018 04:00 + Salle Weil + Qui est le Même ? Qui est l'Autre ? Comment consomme-t-on leur rupture, ou l'exprime-t-on à travers l'Art ? Comment valoriser à la foi l'extériorité comme parfaite indépendance et l'altérité comme au-delà ? La présente exposition développe ces thèmes sans proposer toutefois une solution laissée à des adeptes du logos. Si elle est intrusion ou intimité, indifférence ou indiscrétion, on laissera le spectateur en juger au contact de la dualité de l'artiste et de son sujet. +
+ +
+ 22 + Foodtruck + 01/12/2018 21:00 + 02/12/2018 04:00 + Cour du NIR + Foodtruck servant des menus à base de hamburgers. Des menus végétariens sont proposés. +
+ +
+ 23 + BrassENS + 01/12/2018 22:15 + 01/12/2018 22:45 + Barnum de la cour du NIR + Représentation du groupe de cuivre brassENS +
+ +
+ 24 + Whatever happens + 01/12/2018 22:50 + 02/12/2018 00:20 + Barnum de la cour du NIR + Concert de Funk, Soul et R&B +
+ +
+ 25 + B-Flat Quartet + 02/12/2018 00:35 + 02/12/2018 01:50 + Barnum de la cour du NIR + Concert de Swing et Jazz +
+ +
+ 26 + Duology + 02/12/2018 02:00 + 02/12/2018 03:00 + Barnum de la cour du NIR + Concert de jazz à la guitarre +
+ +
+ 27 + Musique électronique - DJs sets + 01/12/2018 21:00 + 02/12/2018 04:00 + K-Fêt + +
    +
  • 22h-22h30 : Gemini Croquet |
  • +
  • 22h30-23h : Melophor |
  • +
  • 23h-23h30 : Nil |
  • +
  • 23h30-minuit : Felix Hastings |
  • +
  • Minuit-1h30 : Tommy Kid |
  • +
  • 1h30-3h : Background |
  • +
  • 3h-4h : Artiste mystère
  • +
+
+
+ +
+ 27 + VJ + 01/12/2018 23:00 + 02/12/2018 03:00 + K-Fêt + Animation visuelle pour accompagner la musique électronique +
+ +
+ 28 + Rise Up + 01/12/2018 23:30 + 02/12/2018 00:15 + Rataud-Galois-Courtès + Version écourtée du concert de la comédie musicale Rise Up +
+ +
+ 29 + Karaoké + 02/12/2018 02:00 + 02/12/2018 04:00 + Rataud-Galois-Courtès + Karaoké +
+ +
+ 30 + Spectacle de magie + 01/12/2018 22:45 + 01/12/2018 23:15 + Salle d'expression artistique + Spectacle de magie, première représentation. +
+ +
+ 31 + Spectacle de magie + 01/12/2018 23:30 + 02/12/2018 00:00 + Salle d'expression artistique + Spectacle de magie, seconde représentation. +
+ +
+ 32 + Concert Cult + 02/12/2018 00:30 + 02/12/2018 02:30 + Salle d'expression artistique + Concert de Funk par le groupe Cult +
+ +
+ 33 + Stand photos + 01/12/2018 22:00 + 02/12/2018 04:00 + Monument aux morts + Stand photos de la Nuit. +
+ +
+ 34 + Bar + 01/12/2018 21:00 + 02/12/2018 04:00 + Barnum de la cour du NIR + Bar à champagne au RDC +
+ +
+ 35 + Bar + 01/12/2018 21:00 + 02/12/2018 04:00 + Hall du PB du NIR + Bar à champagne au PB du NIR +
+
+
+ +
+

Tarifs et billeterie

+
+

Les préventes physiques seront disponibles dès le lundi 12 novembre en Aqua le midi et au Burô du COF. + Une billetterie en ligne est aussi ouverte.

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
COFExté·e
Soirée (prévente)18€21€
Soirée (sur place)25€25€
Soirée avec Buffet28€33€
+ +

Attention : les places sont limitées pour le buffet. Réservez rapidement !

+ + +
+ Ticket + Billeterie en ligne (+1€) +
+
+
+
+ +
+

Comment venir ?

+
+

+ Emplacement + 45 rue d'Ulm 75005 Paris +

+ + +
+ +
+
+ Métro 7 +
+ Place Monge + +
+ RER B +
+ Luxembourg + +
+ Bus 21 + Bus 27 +
+ Feuillantines + +
+ Noctilien 14 + Noctilien 21 + Noctilien 122 +
+ Auguste Compte +
+
+ +
+

Nous contacter

+
+ +

+ Email + responuit[arobase]ens[point]fr +

+
+
+ +
+

Remerciements

+
+ +
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/js/calendar.js b/js/calendar.js new file mode 100644 index 0000000..789e96c --- /dev/null +++ b/js/calendar.js @@ -0,0 +1,1187 @@ +// Based on https://stackoverflow.com/a/15289883 +function computeDateDifferenceInHours (date1, date2) { + d1 = new Date(date1.getYear(), date1.getMonth(), date1.getDate(), date1.getHours()); + d2 = new Date(date2.getYear(), date2.getMonth(), date2.getDate(), date2.getHours()); + + const msPerHour = 60 * 60 * 1000; + return Math.abs(d2.getTime() - d1.getTime()) / msPerHour; +} + + + +class Calendar { + + constructor (calendarParameters = {}) { + this.containerNode = calendarParameters.containerNode !== undefined + ? calendarParameters.containerNode + : $("#cal-container"); + + this.eventContainerNode = null; + this.timeSlotsContainerNode = null; + this.eventDetailsContainerNode = null; + + this.startDate = calendarParameters.startDate !== undefined + ? calendarParameters.startDate + : new Date(); + this.endDate = calendarParameters.endDate !== undefined + ? calendarParameters.endDate + : new Date(Date.now() + (24 * 60 * 60 * 1000)); + + this.nbHoursToDisplay = 0; + this.firstHourToDisplay = 0; + this.endHourToDisplay = 0; + + this.events = []; + + this.onlyDisplaySubscribedEvents = calendarParameters.onlyDisplaySubscribedEvents !== undefined + ? calendarParameters.onlyDisplaySubscribedEvents + : false; + this.groupEventsByLocation = calendarParameters.groupEventsByLocation !== undefined + ? calendarParameters.groupEventsByLocation + : true; + + this.eventDetailURLFormat = calendarParameters.eventDetailURLFormat !== undefined + ? calendarParameters.eventDetailURLFormat + : ""; + this.subscriptionURLFormat = calendarParameters.subscriptionURLFormat !== undefined + ? calendarParameters.subscriptionURLFormat + : ""; + this.csrfToken = calendarParameters.csrfToken !== undefined + ? calendarParameters.csrfToken + : ""; + + // Map from locations to their CSS styles + this.locationStyles = new Map(); + + this.init(); + } + + init () { + this.updateHoursToDisplay(); + + this.createTimeSlotContainer(); + this.createEventContainer(); + this.createEventDetailsContainer(); + + this.updateTimeSlotContainerGridStyle(); + this.updateEventContainerGridStyle(); + + this.createTimeSlots(); + this.createEvents(); + + this.createLocationStyles(); + this.applyLocationStylesAsCSS(); + this.updateEventLocationStyleID(); + + //this.sortEventNodesByEndTimeAndLocation(); + this.sortEventNodesByIntervalGraphColoring(); + this.updateCalendarNodeHeight(); + + this.updateEventVisibilities(); + this.initEventOverflowTooltips(); + } + + + // Date change + + setStartDate (newStartDate) { + this.startDate = newStartDate; + + this.updateHoursToDisplay(); + this.updateEventContainerGridStyle(); + this.updateTimeSlots(); + + this.updateEventVisibilities(); + this.updateCalendarNodeHeight(); + this.sortEventNodesByIntervalGraphColoring(); + + this.startShowingEventOverflowTooltips(); + } + + setEndDate (newEndDate) { + this.endDate = newEndDate; + + this.updateHoursToDisplay(); + this.updateEventContainerGridStyle(); + this.updateTimeSlots(); + + this.updateEventVisibilities(); + this.updateCalendarNodeHeight(); + this.sortEventNodesByIntervalGraphColoring(); + + this.startShowingEventOverflowTooltips(); + } + + updateHoursToDisplay () { + this.startHourToDisplay = this.startDate.getHours(); + this.endHourToDisplay = this.endDate.getHours(); + + this.nbHoursToDisplay = Math.floor(computeDateDifferenceInHours(this.startDate, this.endDate)); + } + + + // Calendar container + + updateCalendarNodeHeight () { + // Time slot hour row + let timeSlotHourRowHeight = $(".cal-time-slot-hour").outerHeight(); + + // Event grid + this.containerNode.css("height", "calc(100% )"); + + let eventContainerHeight = this.eventContainerNode + .css("grid-template-rows") + .split("px ") + .reduce((heightAccumulator, currentRowHeight) => { + return heightAccumulator + parseInt(currentRowHeight); + }, 0); + + this.containerNode.css("height", timeSlotHourRowHeight + eventContainerHeight); + } + + + // Time slots + + createTimeSlotContainer () { + this.timeSlotsContainerNode = $("
") + .addClass("cal-time-slot-container") + .appendTo(this.containerNode); + } + + createTimeSlots () { + // Populate the container hour by hour + let self = this; + function getHourStringToDisplay (index, hour) { + if (index === self.nbHoursToDisplay - 1 + || hour === 23) { + return ""; + } + + if (hour >= 10) { + return hour + 1; + } + else { + return " " + (hour + 1); + } + } + + for (let i = 0; i < this.nbHoursToDisplay; i++) { + let hour = (this.startHourToDisplay + i) % 24; + + // Time slot hour + let timeSlotHourNode = $("
") + .addClass("cal-time-slot-hour") + .css({ + "grid-column-start": `${i + 1}`, + "grid-column-end" : "span 1", + "grid-row-start" : "1", + "grid-row-end" : "1" + }) + .html(getHourStringToDisplay(i, hour)) + .prependTo(this.timeSlotsContainerNode); + + // Time slot block + let timeSlotBlockNode = $("
") + .addClass("cal-time-slot") + .css({ + "grid-column-start": `${i + 1}`, + "grid-column-end" : "span 1", + "grid-row-start" : "2", + "grid-row-end" : "2" + }) + .appendTo(this.timeSlotsContainerNode); + + if (hour === 23) { + timeSlotHourNode.addClass("cal-last-hour"); + timeSlotBlockNode.addClass("cal-last-hour"); + } + + if (hour === 0) { + timeSlotHourNode.addClass("cal-first-hour"); + timeSlotBlockNode.addClass("cal-first-hour"); + } + } + } + + updateTimeSlotContainerGridStyle () { + this.timeSlotsContainerNode.css("grid-template-columns", + `repeat(${this.nbHoursToDisplay}, ${100 / this.nbHoursToDisplay }%)`); + } + + updateTimeSlots () { + this.timeSlotsContainerNode.empty(); + + this.createTimeSlots(); + this.updateTimeSlotContainerGridStyle(); + } + + getHourSlotWidth () { + return this.timeSlotsContainerNode.width() / this.nbHoursToDisplay; + } + + + // Events + + createEventContainer () { + this.eventContainerNode = $("
") + .addClass("cal-event-container") + .appendTo(this.containerNode); + } + + createEvents () { + // Move all event nodes into the event container + let eventElements = this.containerNode.find(".cal-event"); + eventElements.appendTo(this.eventContainerNode); + + // Create event objects from them all + for (let element of eventElements) { + let newEvent = new Event($(element), this); + this.events.push(newEvent); + } + } + + updateEventContainerGridStyle () { + this.eventContainerNode.css("grid-template-columns", + `repeat(${this.nbHoursToDisplay}, ${100 / this.nbHoursToDisplay }%)`); + } + + updateEventVisibilities () { + for (let event of this.events) { + event.updateVisibility(); + } + } + + + // Event details + + createEventDetailsContainer () { + this.eventDetailsContainerNode = $("
") + .addClass("cal-details-container") + .appendTo(this.containerNode); + } + + + // Location styles + + createLocationStyles () { + let locationIndices = new Map(); + for (let event of this.events) { + if (! locationIndices.has(event.location)) { + locationIndices.set(event.location, [...locationIndices.keys()].length); + } + } + + let nbUniqueLocations = [...locationIndices.keys()].length; + + let styleID = 0; + for (let [location, index] of locationIndices.entries()) { + let hue = (index / (nbUniqueLocations + 1)) * 255; + styleID += 1; + + this.locationStyles.set(location, { + id: styleID, + + normal: [ + `background-color: hsl(${hue}, 40%, 80%);`, + `border-color: hsl(${hue}, 40%, 50%);`, + `color: #000;` + ], + + hover: [ + `background-color: hsl(${hue}, 55%, 85%);`, + `border-color: hsl(${hue}, 45%, 55%);`, + `color: #000;` + ], + + subscribed: [ + `background-color: hsl(${hue}, 75%, 75%);`, + `border-color: hsl(${hue}, 60%, 50%);`, + `color: #000;` + ], + + selected: [ + `background-color: hsl(${hue}, 45%, 50%);`, + `border-color: hsl(${hue}, 40%, 35%);`, + `color: #FFF;` + ] + }); + } + } + + applyLocationStylesAsCSS () { + let styleNode = $("