test iFixIt-style assembly guide

Signed-off-by: Michel-FK <michel.stempin@funkey-project.com>

docs/assets/css/custom.css

@@ -25,3 +25,93 @@ a.boxedThumb:hover {
   transform: scale(1.05);
   z-index: 5;
 }
+
+.step {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -ms-flex-direction: column;
+    -webkit-flex-direction: column;
+    flex-direction: column
+}
+
+.step-container {
+    -ms-align-items: flex-start;
+    -webkit-align-items: flex-start;
+    align-items: flex-start;
+    -ms-flex-align: start
+}
+
+@media only screen and (max-width:599px) {
+    .step-container {
+	-ms-flex-direction: column;
+	-webkit-flex-direction: column;
+	flex-direction: column
+    }
+}
+
+.row {
+    position: relative;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -ms-flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    margin-bottom: 20px
+}
+
+.thumb {
+    border-radius: 3px;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
+    color: rgb(99, 102, 95);
+    margin-right: 10px;
+    margin-left: 10px;
+    display: block;
+    max-width: 110px;
+    max-height: 90px;
+    object-fit: cover;
+    opacity: .7;
+    -ms-flex: 0 1 110px;
+    -webkit-flex: 0 1 110px;
+    flex: 0 1 110px;
+    box-shadow: 0 0 0 0 transparent;
+    transition: box-shadow .2s, border-color .2s, opacity .2s;
+    white-space: nowrap
+}
+
+.thumb.active,
+.thumb:hover {
+    transform: translateY(-4px);
+    opacity: 1;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, .5)
+}
+
+@media only screen and (max-width:599px) {
+    .thumb.active,
+    .thumb:hover {
+	transform: translateY(0);
+	box-shadow: 0 0 2px rgba(0, 0, 0, .75)
+    }
+}
+
+.large-image {
+    -ms-flex: 1 2;
+    -webkit-flex: 1 2;
+    flex: 1 2;
+    width: 575px;
+    max-height: 432px;
+    object-fit: cover;
+    display: flex;
+    -ms-justify-content: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -ms-flex-pack: center;
+    -ms-align-items: center;
+    -webkit-align-items: center;
+    align-items: center;
+    -ms-flex-align: center;
+    -ms-flex-direction: column;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+}

docs/assets/js/custom.js

@@ -1,24 +1,45 @@
 $(document).ready(function () {
-  let imageGroups = []
-  $(".lightbox").each(function () {
-    let imageSource = $(this).attr('src')
-    let imageAlt = $(this).attr('alt').replace(/ /g,"")
-    let imageTitle = $(this).attr('alt')
-    if (imageTitle) {
-      imageTitle = 'title="' + imageTitle + '" '
-    }
-    else {
-      imageTitle = ''
-    }
-    $(this).
-        wrap('<a class="boxedThumb ' + imageAlt + '" ' +
-            imageTitle + 'href="' + imageSource + '"></a>')
-    imageGroups.push('.' + imageAlt)
-  })
-  jQuery.unique(imageGroups)
-  imageGroups.forEach(imageGroupsSet)
+    $(".step-container img:first-child").each(function () {
+	$(this)
+	    .clone()
+	    .removeClass("thumb")
+	    .addClass("large-image")
+	    .insertBefore($(this));
+	$(this).addClass("active");
+    })
 
-  function imageGroupsSet (value) {
-    $(value).simpleLightbox()
-  }
+    let imageGroups = []
+    $(".lightbox").each(function () {
+	let imageSource = $(this).attr('src')
+	let imageAlt = $(this).attr('alt').replace(/ /g,"")
+	let imageTitle = $(this).attr('alt')
+	if (imageTitle) {
+	    imageTitle = 'title="' + imageTitle + '" '
+	}
+	else {
+	    imageTitle = ''
+	}
+	$(this).
+            wrap('<a class="boxedThumb ' + imageAlt + '" ' +
+		 imageTitle + 'href="' + imageSource + '"></a>')
+	imageGroups.push('.' + imageAlt)
+    })
+    jQuery.unique(imageGroups)
+    imageGroups.forEach(imageGroupsSet)
+
+    function imageGroupsSet (value) {
+	$(value).simpleLightbox()
+    }
 })
+
+// Attach a delegate function on mouse over thumbnail
+$(".thumb").on("mouseover", function() {
+
+    // Set large image source to the thumbnail image source
+    $(this).siblings("img:first")
+	.attr("src", $(this).attr("src"));
+
+    // Activate the corresponding step-thumbnail and deactivate all others
+    $(this).addClass("active")
+	.siblings().removeClass("active");
+});

docs/tutorials/hardware/disassembling_console.md

@@ -1,4 +1,20 @@
+## Step 1
+<div class="step">
+    <div class="row step-container">
+        <img class="thumb" src="/assets/images/IMG_8800.jpg" />
+        <img class="thumb" src="/assets/images/IMG_8801.jpg" />
+        <img class="thumb" src="/assets/images/IMG_8802.jpg" />
+    </div>
+</div>
+
+## Step 2
+<div class="step">
+    <div class="row step-container">
+        <img class="thumb" src="/assets/images/IMG_8803.jpg" />
+        <img class="thumb" src="/assets/images/IMG_8804.jpg" />
+    </div>
+</div>
 
 --8<--
 includes/glossary.md
---8<--
+--8<--