mirror of
https://github.com/FunKey-Project/FunKey-Project.github.io.git
synced 2026-03-19 10:22:42 +01:00
working iFixIt steps
Signed-off-by: Michel-FK <michel.stempin@funkey-project.com>
This commit is contained in:
Michel-FK
@@ -1,117 +1,91 @@
|
||||
/* custom.css */
|
||||
a.boxedThumb {
|
||||
display: block;
|
||||
padding: 4px;
|
||||
line-height: 20px;
|
||||
border: 1px solid #ddd;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
|
||||
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
|
||||
-webkit-transition: -webkit-transform .15s ease;
|
||||
-moz-transition: -moz-transform .15s ease;
|
||||
-o-transition: -o-transform .15s ease;
|
||||
-ms-transition: -ms-transform .15s ease;
|
||||
transition: transform .15s ease;
|
||||
}
|
||||
|
||||
a.boxedThumb:hover {
|
||||
-webkit-transform: scale(1.05);
|
||||
-moz-transform: scale(1.05);
|
||||
-o-transform: scale(1.05);
|
||||
-ms-transform: scale(1.05);
|
||||
transform: scale(1.05);
|
||||
z-index: 5;
|
||||
@CHARSET "UTF-8";
|
||||
body {
|
||||
font-family: Helvetica;
|
||||
font-size: 12px;
|
||||
color: #63665F
|
||||
}
|
||||
|
||||
.step {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"step-title step-title"
|
||||
"step-picture step-thumbs"
|
||||
"step-picture step-contents";
|
||||
grid-template-rows: auto auto 1fr;
|
||||
grid-template-columns: 50% 50%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.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
|
||||
/* Stack the layout on small devices/viewports. */
|
||||
@media all and (max-width: 479px) {
|
||||
.step {
|
||||
grid-template-areas:
|
||||
"step-title"
|
||||
"step-picture"
|
||||
"step-thumbs"
|
||||
"step-contents";
|
||||
grid-template-rows: auto 1fr 90px auto;
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.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
|
||||
.step-title {
|
||||
grid-area: step-title;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
.step-picture {
|
||||
grid-area: step-picture;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Make the picture fill width on small devices/viewports. */
|
||||
@media only screen and (max-width: 479px) {
|
||||
.step-picture {
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.step-thumbs {
|
||||
grid-area: step-thumbs;
|
||||
}
|
||||
|
||||
.step-contents {
|
||||
grid-area: step-contents;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.step-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;
|
||||
margin: 10px 10px 0px 10px;
|
||||
display: inline-block;
|
||||
max-width: 27%!important;
|
||||
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 {
|
||||
/* Make thumbnails on a separate row on small devices/viewports.*/
|
||||
@media only screen and (max-width: 479px) {
|
||||
.step-thumb {
|
||||
width: 30%;
|
||||
max-height: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.step-thumb.active,
|
||||
.step-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)
|
||||
/* No translation and smaller shadow on small devices/viewports. */
|
||||
@media all and (max-width: 479px) {
|
||||
.step-thumb.active,
|
||||
.step-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;
|
||||
}
|
||||
|
||||
@@ -1,45 +1,115 @@
|
||||
$(document).ready(function () {
|
||||
$(".step-container img:first-child").each(function () {
|
||||
$(this)
|
||||
.clone()
|
||||
.removeClass("thumb")
|
||||
.addClass("large-image")
|
||||
.insertBefore($(this));
|
||||
$(this).addClass("active");
|
||||
})
|
||||
|
||||
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)
|
||||
/* Convert a loose structure of:
|
||||
|
||||
function imageGroupsSet (value) {
|
||||
$(value).simpleLightbox()
|
||||
}
|
||||
article
|
||||
.step-title
|
||||
.step-thumb
|
||||
.step-thumb
|
||||
<content>
|
||||
.step-title
|
||||
.step-thumb
|
||||
.step-thumb
|
||||
<content>
|
||||
|
||||
into a strict hierarchy of containers:
|
||||
|
||||
article
|
||||
.step
|
||||
.step-title
|
||||
.step-thumbs
|
||||
.step-thumb
|
||||
.step-thumb
|
||||
.step-contents
|
||||
<content>
|
||||
.step
|
||||
.step-title
|
||||
.step-thumbs
|
||||
.step-thumb
|
||||
.step-thumb
|
||||
.step-contents
|
||||
<content>
|
||||
*/
|
||||
|
||||
/* First, wrap all "step-title" article elements and all elements
|
||||
until next such element or end of article into a "step" div */
|
||||
$("article").each(function () {
|
||||
var step = $();
|
||||
var wrap = false;
|
||||
$(this).contents().each(function () {
|
||||
if ($(this).hasClass("step-title")) {
|
||||
if (wrap && step.length > 1) {
|
||||
step.wrapAll('<div class="step" />');
|
||||
}
|
||||
step = $();
|
||||
wrap = true;
|
||||
}
|
||||
step = step.add($(this));
|
||||
});
|
||||
if (wrap && step.length > 1) {
|
||||
step.wrapAll('<div class="step" />');
|
||||
}
|
||||
});
|
||||
|
||||
/* Then wrap all "step step-thumb" elements into a "step-thumbs"
|
||||
div */
|
||||
$(".step p").each(function () {
|
||||
var thumbs = $();
|
||||
$(this).contents().each(function () {
|
||||
if ($(this).hasClass("step-thumb")) {
|
||||
thumbs = thumbs.add($(this));
|
||||
}
|
||||
});
|
||||
if (thumbs.length > 0) {
|
||||
thumbs.unwrap();
|
||||
thumbs.wrapAll('<div class="step-thumbs" />');
|
||||
}
|
||||
});
|
||||
|
||||
/* Then wrap all other except "step step-title" ones into a
|
||||
"step-contents" div */
|
||||
$(".step").each(function () {
|
||||
var contents = $();
|
||||
$(this).contents().each(function () {
|
||||
if (!$(this).hasClass("step-title") &&
|
||||
!$(this).hasClass("step-thumbs") &&
|
||||
!$(this).hasClass("step-thumb")) {
|
||||
contents = contents.add($(this));
|
||||
}
|
||||
});
|
||||
if (contents.length > 0) {
|
||||
contents.wrapAll('<div class="step-contents" />');
|
||||
}
|
||||
});
|
||||
|
||||
/* Create the large "step-picture" from the first thumbnail in a
|
||||
"step-thumbs" */
|
||||
|
||||
/* For each first thumbnail in a "step-thumbs" */
|
||||
$(".step-thumbs img:first-child").each(function () {
|
||||
|
||||
/* Clone first thumbnail, change its class to create the
|
||||
"step-picture" by default and insert it in the parent
|
||||
step */
|
||||
$(this)
|
||||
.clone()
|
||||
.removeClass("step-thumb")
|
||||
.addClass("step-picture")
|
||||
.insertBefore($(this).parent());
|
||||
|
||||
/* Make the first thumbnail active by default */
|
||||
$(this).addClass("active");
|
||||
})
|
||||
})
|
||||
|
||||
/* Attach a delegate function on mouse over thumbnail to change the
|
||||
step main picture and radio-toggle the thumbnails */
|
||||
$(".step-thumb").on("mouseover", function() {
|
||||
|
||||
// Attach a delegate function on mouse over thumbnail
|
||||
$(".thumb").on("mouseover", function() {
|
||||
/* Set picture image source to the thumbnail image source */
|
||||
$(this).closest(".step").find(".step-picture").attr("src", $(this).attr("src"));
|
||||
|
||||
// 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
|
||||
/* Activate the corresponding thumbnail and deactivate all others */
|
||||
$(this).addClass("active")
|
||||
.siblings().removeClass("active");
|
||||
.siblings().removeClass("active");
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user