Portfolio page creation, start of big picture popup

README.md

@@ -1,2 +1,17 @@
 # website
 Site de l'asso @ http://assos.utc.fr/utcoupe
+
+## Comment ajouter un album photo ?
+Mais oui Jamy, comment on fait ça ?
+ - ajouter les photos dans le dossier qui va bien (`/images/[annee]/`). De préférence en jpg, 1000 px sur le plus long côté, 80% de qualité.
+ - modifier la page `pictures.html` en ajoutant un item au menu et une section. Bien modifier le `section id` et vérifier qu'il correspond avec le `a href="#machin"` dans le menu.
+ - ajoutez les photos toutes fraîches à la nouvelle section. Ajouter autant d'`article` que nécessaire, en essayant d'équilibrer les colonnes (`<div class="4u 12u$(mobile)">`). Pensez à mettre à jours la légende et le texte d'intro en cas de copier collé.
+ - voir partie suivante pour pousser les changements
+
+## Mise à jours du site
+D'une extrême simplicité :
+ - faire les modifs chez vous bien au chaud
+ - pousser les commit sur Github
+ - ssh sur le serveur des assos (avec un ptit VPN si nécessaire)
+ - `cd public_html/website && git pull`
+ - boire un coup, ça a faillit être fatigant !

assets/css/custom.css

@@ -116,3 +116,54 @@ header > p.no-margin {
 	max-width: 100%;
 	margin: 1em auto;
 }
+
+
+/* Picture in fullscreen */
+#overlay {
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.7);
+	text-align: center;
+	display: none;
+}
+
+#big-picture {
+	margin: auto;
+	padding: 0 0 0.5em 0;
+	max-height: 96%;
+	top: 2%;
+	position: relative;
+	background: #fff;
+	width: fit-content;
+	width: -webkit-fit-content;
+	width: -moz-fit-content;
+	box-shadow: 0 0.05em 0.15em 0 rgba(0, 0, 0, 0.05);
+	border-radius: 0.3em;
+	overflow: hidden;
+}
+
+#big-picture img {
+	max-width: 100%;
+	width: auto;
+	max-height: 80%;
+}
+
+#big-picture p {
+	max-width: 60%;
+	margin: auto;
+}
+
+#big-picture #controls {
+	position: fixed;
+	margin: 0.4em;
+	right: 0px;
+	bottom: 0px;
+	line-height: 1em;
+}
+
+#big-picture #controls span {
+	font-size: 0.7em;
+}

assets/js/custom.js

@@ -1,4 +1,3 @@
-var truc = "";
 (function($){
   $(function(){
 
@@ -7,15 +6,8 @@ var truc = "";
 
         $.get( "blog/", function( data ) {
             var postBeginning = "<div class=\"post\" id=\"";
-            var postEnd = String.raw`				 </div>
-			</div>`; // be carefull, there must be tabs in this ! Not spaces !! (see blog/index.html)
             idxStart = data.indexOf(postBeginning);
             idxEnd = data.indexOf(postBeginning, idxStart + postBeginning.length);
-	    truc = data;
-            console.log(data);
-            console.log(idxStart);
-            console.log(idxEnd);
-            console.log(idxEnd - idxStart);
             postTxt = data.substring(idxStart,idxEnd);
 
             $( "#last-blog-post" ).removeClass("hide");

assets/js/custom_pictures.js

@@ -0,0 +1,42 @@
+(function($){
+  $(function(){
+    function closeBigPicture () {
+        $("#overlay").fadeOut();
+        return false;
+    }
+
+    function openBigPicture (evt) {
+        $("#overlay").fadeIn();
+    }
+
+    function updateBigPicture (article) {
+        // TODO
+    }
+
+    function previousBigPicture (evt) {
+        // TODO
+        // updateBigPicture (article);
+    }
+
+    function nextBigPicture (evt) {
+        // TODO
+        // updateBigPicture (article);
+    }
+
+    $("#close-big-picture").click(closeBigPicture);
+    $("#previous-big-picture").click(previousBigPicture);
+    $("#next-big-picture").click(nextBigPicture);
+    $("#overlay").click(closeBigPicture);
+    $("#big-picture").on("click", function(evt) {
+        evt.stopPropagation();
+    });
+
+    $("a.open-big-picture").click(function (evt) {
+        updateBigPicture(evt);
+        openBigPicture(evt);
+        return false;
+    });
+
+
+  }); // end of document ready
+})(jQuery); // end of jQuery name space

index.html

@@ -196,9 +196,9 @@ <h3><a href="https://www.smeal.fr/" target="_blank">Smeal</a></h3>
 								</div>
 							</div>
 
-							<!-- <footer>
-								<a href="photos.html" class="scrolly"><span class="icon fa-th">  Voir toutes les photos</span></a>
-							</footer> -->
+							<footer>
+								<a href="pictures.html" class="scrolly"><span class="icon fa-th">  Voir toutes les photos</span></a>
+							</footer>
 
 						</div>
 					</section>