diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml index 3d2ef9d..ef65610 100644 --- a/.idea/jsLibraryMappings.xml +++ b/.idea/jsLibraryMappings.xml @@ -1,6 +1,6 @@ - + \ No newline at end of file diff --git a/assets/css/photos.css b/assets/css/photos.css index 0142fec..d87554a 100644 --- a/assets/css/photos.css +++ b/assets/css/photos.css @@ -1,6 +1,5 @@ .photos_folder { width: 100%; - display: flex; border: 1px solid #5a5a5a; border-radius: 5px; } @@ -19,7 +18,7 @@ height: 100px; padding: 10px; margin: 5px; - display: flex; + display: inline-flex; align-items: center; justify-content: center; background-color: #1a1a1a; @@ -57,10 +56,10 @@ } .photos_path { - margin: 5px; width: 100%; display: flex; list-style: none; + padding: 0; } .photos_path a { @@ -69,7 +68,7 @@ border-radius: 5px; padding: 5px; margin: 5px; - display: flex; + display: inline-flex; align-items: center; justify-content: center; background-color: #1a1a1a; @@ -79,36 +78,96 @@ } #img_big { + margin: 0; + padding: 0; position: fixed; max-width: 100%; - max-height: 70%; + max-height: 100%; + z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); } -#close, #right, #left { +#close, #right, #left, #fullscreen { color: white; - position: fixed; - width: 50px; - height: 50px; + width: 25px; + height: 25px; transition: 0.3s; cursor: pointer; + z-index: 7; } #right { + position: fixed; + height: 100%; right: 0; - bottom: 0; + top: 50%; + transform: translateY(-50%); + background: linear-gradient(to left, #1c1c1c, transparent 90%); } #left { + position: fixed; + height: 100%; + left: 0; + top: 50%; + transform: translateY(-50%); + background: linear-gradient(to right, #1c1c1c, transparent 90%); +} + +#close { + color: #ca0600; + position: absolute; left: 0; bottom: 0; } -#close { - top: 50px; +#fullscreen { + color: #2377c6; + position: absolute; right: 0; + bottom: 0; +} + +#right:hover, #left:hover { + width: 50px; +} + +#right:active, #left:active { + width: 40px; +} + +#close:hover, #fullscreen:hover { + height: 50px; + width: 50px; +} + +#close:active, #fullscreen:active { + height: 40px; + width: 40px; +} + +#photo_control { + position: fixed; + bottom: 0; + right: 50%; + transform: translateX(50%); + background: #1c1c1c; + height: 25px; + width: 75px; + border-radius: 5px; + transition: 0.3s; +} + +#photo_control:hover { + height: 50px; +} + +#photo_buttons{ + position: fixed; + display: block; + z-index: 10; } #close_back { @@ -117,12 +176,14 @@ height: 100%; } -#close:hover, #right:hover, #left:hover { - width: 70px; -} - -#close:active, #right:active, #left:active { - width: 55px; +#photo_overlay { + top: 0; + left: 0; + position: fixed; + width: 100%; + height: 100%; + background-color: #212121; + z-index: 5; } @media screen and (max-width: 480px) { diff --git a/assets/css/style.css b/assets/css/style.css index 32b5f0a..911e461 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -31,8 +31,8 @@ Theme Styles body { /*Full page background*/ - background-size: cover; background: url("../images/bg.jpg") no-repeat fixed center; + background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; @@ -50,7 +50,7 @@ h1, h2, h3, h4, h5, h6 { margin: 10px 0; color: #e0e0e0; font-family: 'Work Sans', sans-serif; - font-weight: bold; + font-weight: normal; letter-spacing: -1px; text-align: center; } @@ -278,8 +278,8 @@ Full-Width Styles #table_coms{ width: 100%; table-layout: auto; - text-align: left; - border: none; + text-align: center; + border: 1px solid #5c5c5c; } #table_coms td{ @@ -293,11 +293,6 @@ Full-Width Styles font-weight: bold; } -.com_logo{ - width: 100px; - min-width: 50px; -} - #back_button{ top: 0; left: 0; @@ -310,22 +305,27 @@ Full-Width Styles transition: 0.3s; } -#photo_back_button{ - top: 0; - left: 0; - position: fixed; - width: 100%; - height: 100%; - background-color: #212121cc; - z-index: 5; - transition: 0.3s; -} - .active_background { z-index: 100 !important; opacity: 0.7 !important; } +.main_button { + background: #1a1a1a; + padding: 10px; + border: 1px solid #5a5a5a; + border-radius: 5px; + font-size: 25px; + color: #b5b5b5; + box-shadow: 0 0 4px #000; +} + +.main_button:hover { + box-shadow: 0 0 10px #000; + background-color: #e0e0e0; + color: black; +} + /******************************************************************************* Small Device Styles diff --git a/assets/scripts/photosScript.js b/assets/scripts/photosScript.js index 5e24f59..86d5816 100644 --- a/assets/scripts/photosScript.js +++ b/assets/scripts/photosScript.js @@ -1,6 +1,10 @@ var showcase = $("#img_big"); +var showcaseButton = $("#photo_buttons"); var showcaseLink = $("#img_big_link"); -var photoBackButton = $("#photo_back_button"); +var photoOverlay = $("#photo_overlay"); +var headerTop = $("#header_top"); +var sideNav = $("#menuSidenav"); + /* * Display selected image in showcase @@ -8,17 +12,59 @@ var photoBackButton = $("#photo_back_button"); */ function displayBig(elem) { changeImage($(elem).attr('src')); - photoBackButton.css("display", "block"); + disableFullscreen(); + photoOverlay.fadeIn(500); } - /* * Hide showcase image */ function closeBig() { - photoBackButton.css("display", "none") + disableFullscreen(); + photoOverlay.fadeOut(500); } +/* + * Toggle display of buttons/header + */ +function toggleFullscreen() { + if (showcaseButton.css("display") == "none") + disableFullscreen(); + else + enableFullscreen(); +} + +function enableFullscreen() { + showcaseButton.fadeOut(500); + headerTop.fadeOut(500); + sideNav.fadeOut(500); +} + +function disableFullscreen() { + showcaseButton.fadeIn(500); + headerTop.fadeIn(500); + sideNav.fadeIn(500); +} + +/* + * Control images with keyboard arrows + */ +$(document).keydown(function(e) { + switch(e.which) { + case 37: // left + displayNext(-1); + break; + + case 39: // right + displayNext(1); + break; + + default: return; // exit this handler for other keys + } + e.preventDefault(); // prevent the default action (scroll / move caret) +}); + + /* * Display next/last image in showcase. When reaching end/start, loop back to start/end diff --git a/coms.php b/coms.php index 7b98fde..1e725ec 100644 --- a/coms.php +++ b/coms.php @@ -6,73 +6,63 @@ ob_start(); // Start reading html

Tous les mails cités sur cette page se terminent par @etud.insa-toulouse.fr

"> - diff --git a/includes/sidenav.html b/includes/sidenav.html index b4c6f3c..1008aba 100644 --- a/includes/sidenav.html +++ b/includes/sidenav.html @@ -1,10 +1,10 @@ diff --git a/index.php b/index.php index 79ac654..c5b7015 100644 --- a/index.php +++ b/index.php @@ -24,6 +24,10 @@ include("includes/sidenav.html"); meilleures conditions.


Utilise le menu en haut à gauche pour naviguer sur le site.

+

Voici les pages les plus importantes :

+ Planning + Parrainage + diff --git a/photos.php b/photos.php index b8cf2b7..b48a6f0 100644 --- a/photos.php +++ b/photos.php @@ -24,7 +24,7 @@ function getDirectories($dir) $path = realpath($dir . DIRECTORY_SEPARATOR . $value); if (is_dir($path) && $value != "." && $value != "..") { $folderTitle = $value; - $folderLink = "?folder=" . getActiveFolder() . $value . DIRECTORY_SEPARATOR; + $folderLink = "?folder=" . getActiveFolder() . $value; $folderClass = ""; include("includes/photos/folder_template.php"); $displayedItems++; @@ -47,7 +47,7 @@ function getPhotos($dir) if (!is_dir($path)) { $ext = pathinfo($path, PATHINFO_EXTENSION); if ($ext == "bmp" || $ext == "jpg" || $ext == "jpeg" || $ext == "png") { - $imageSrc = getActiveFolder() . $value; + $imageSrc = $dir . $value; $imageId = "photo-" . $displayedItems; include("includes/photos/photo_template.php"); $displayedItems++; @@ -79,19 +79,30 @@ function generatePath($dir) } ?> -