Initial implementation of portfolio modals
This commit is contained in:
Karol Orzeł
parent
22f4d62697
commit
3c13612d61
|
|
@ -68,7 +68,7 @@ b, strong, label, th {
|
|||
src: url("./fonts/Novecentosanswide-Medium-webfont.eot?#iefix") format("embedded-opentype"), url("./fonts/Novecentosanswide-Medium-webfont.woff2") format("woff2"), url("./fonts/Novecentosanswide-Medium-webfont.woff") format("woff"), url("./fonts/Novecentosanswide-Medium-webfont.ttf") format("truetype"), url("./fonts/Novecentosanswide-Medium-webfont.svg#novecento_sans_widemedium") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal; }
|
||||
.default-animation, #body, .archive-list button, .modular .showcase .button, .modular .showcase .archive-list button, .archive-list .modular .showcase button, .modular .showcase .contact button, .contact .modular .showcase button, .modular .slideme_container .arrow, .modular .slideme_container .pagination .numbers li, .modular .bottom .button, .modular .bottom .archive-list button, .archive-list .modular .bottom button, .modular .bottom .contact button, .contact .modular .bottom button, .contact input, .contact textarea, .contact button, .callout .pricing-container .pricing-item, .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .foot, .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .archive-list button, .archive-list .callout .pricing-container .pricing-item .foot button, .callout .pricing-container .pricing-item .foot .contact button, .contact .callout .pricing-container .pricing-item .foot button, .team .members .social-icons li, .team .members .social-icons li a, .logo h3, .logo ul.social-icons li, .logo ul.social-icons li a, .notebook .screen .screen-content-hover {
|
||||
.default-animation, #body, .archive-list button, .modular .showcase .button, .modular .showcase .archive-list button, .archive-list .modular .showcase button, .modular .showcase .contact button, .contact .modular .showcase button, .modular .slideme_container .arrow, .modular .slideme_container .pagination .numbers li, .modular .bottom .button, .modular .bottom .archive-list button, .archive-list .modular .bottom button, .modular .bottom .contact button, .contact .modular .bottom button, .contact input, .contact textarea, .contact button, .callout .pricing-container .pricing-item, .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .foot, .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .archive-list button, .archive-list .callout .pricing-container .pricing-item .foot button, .callout .pricing-container .pricing-item .foot .contact button, .contact .callout .pricing-container .pricing-item .foot button, .team .members .social-icons li, .team .members .social-icons li a, .modal, .logo h3, .logo ul.social-icons li, .logo ul.social-icons li a, .notebook .screen .screen-content-hover {
|
||||
-webkit-transition: all 0.5s ease;
|
||||
-moz-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease; }
|
||||
|
|
@ -1476,6 +1476,45 @@ ul.pagination {
|
|||
.portfolio .notebooks .notebook-row .notebook .desc {
|
||||
width: 100%; } }
|
||||
|
||||
.portfolio-modal .close-modal {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 3rem; }
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1050;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
outline: 0;
|
||||
background: #fff;
|
||||
text-align: center; }
|
||||
.modal.in {
|
||||
opacity: 1; }
|
||||
.modal .client-details {
|
||||
list-style-type: none; }
|
||||
.modal .client-details li {
|
||||
display: inline-block; }
|
||||
.modal .client-details li strong, .modal .client-details li label, .modal .client-details li th {
|
||||
color: #87b672;
|
||||
font-weight: normal; }
|
||||
.modal .modal-content {
|
||||
margin: 0 auto;
|
||||
width: 35rem;
|
||||
min-height: 100%;
|
||||
margin-top: 10rem; }
|
||||
|
||||
.logo {
|
||||
border-bottom: 1px solid #eaeaea; }
|
||||
.logo h3 {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -35,4 +35,17 @@ jQuery(document).ready(function($){
|
|||
|
||||
});
|
||||
|
||||
$('div.modal').on('show.bs.modal', function() {
|
||||
var modal = this;
|
||||
var hash = modal.id;
|
||||
window.location.hash = hash;
|
||||
window.onhashchange = function() {
|
||||
if (!location.hash){
|
||||
$(modal).modal('hide');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Minified Bootstrap Modal Function
|
||||
+function(a){"use strict";function b(b,d){return this.each(function(){var e=a(this),f=e.data("bs.modal"),g=a.extend({},c.DEFAULTS,e.data(),"object"==typeof b&&b);f||e.data("bs.modal",f=new c(this,g)),"string"==typeof b?f[b](d):g.show&&f.show(d)})}var c=function(b,c){this.options=c,this.$body=a(document.body),this.$element=a(b),this.$backdrop=this.isShown=null,this.scrollbarWidth=0,this.options.remote&&this.$element.find(".modal-content").load(this.options.remote,a.proxy(function(){this.$element.trigger("loaded.bs.modal")},this))};c.VERSION="3.2.0",c.DEFAULTS={backdrop:!0,keyboard:!0,show:!0},c.prototype.toggle=function(a){return this.isShown?this.hide():this.show(a)},c.prototype.show=function(b){var c=this,d=a.Event("show.bs.modal",{relatedTarget:b});this.$element.trigger(d),this.isShown||d.isDefaultPrevented()||(this.isShown=!0,this.checkScrollbar(),this.$body.addClass("modal-open"),this.setScrollbar(),this.escape(),this.$element.on("click.dismiss.bs.modal",'[data-dismiss="modal"]',a.proxy(this.hide,this)),this.backdrop(function(){var d=a.support.transition&&c.$element.hasClass("fade");c.$element.parent().length||c.$element.appendTo(c.$body),c.$element.show().scrollTop(0),d&&c.$element[0].offsetWidth,c.$element.addClass("in").attr("aria-hidden",!1),c.enforceFocus();var e=a.Event("shown.bs.modal",{relatedTarget:b});d?c.$element.find(".modal-dialog").one("bsTransitionEnd",function(){c.$element.trigger("focus").trigger(e)}).emulateTransitionEnd(300):c.$element.trigger("focus").trigger(e)}))},c.prototype.hide=function(b){b&&b.preventDefault(),b=a.Event("hide.bs.modal"),this.$element.trigger(b),this.isShown&&!b.isDefaultPrevented()&&(this.isShown=!1,this.$body.removeClass("modal-open"),this.resetScrollbar(),this.escape(),a(document).off("focusin.bs.modal"),this.$element.removeClass("in").attr("aria-hidden",!0).off("click.dismiss.bs.modal"),a.support.transition&&this.$element.hasClass("fade")?this.$element.one("bsTransitionEnd",a.proxy(this.hideModal,this)).emulateTransitionEnd(300):this.hideModal())},c.prototype.enforceFocus=function(){a(document).off("focusin.bs.modal").on("focusin.bs.modal",a.proxy(function(a){this.$element[0]===a.target||this.$element.has(a.target).length||this.$element.trigger("focus")},this))},c.prototype.escape=function(){this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.bs.modal",a.proxy(function(a){27==a.which&&this.hide()},this)):this.isShown||this.$element.off("keyup.dismiss.bs.modal")},c.prototype.hideModal=function(){var a=this;this.$element.hide(),this.backdrop(function(){a.$element.trigger("hidden.bs.modal")})},c.prototype.removeBackdrop=function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},c.prototype.backdrop=function(b){var c=this,d=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var e=a.support.transition&&d;if(this.$backdrop=a('<div class="modal-backdrop '+d+'" />').appendTo(this.$body),this.$element.on("click.dismiss.bs.modal",a.proxy(function(a){a.target===a.currentTarget&&("static"==this.options.backdrop?this.$element[0].focus.call(this.$element[0]):this.hide.call(this))},this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),!b)return;e?this.$backdrop.one("bsTransitionEnd",b).emulateTransitionEnd(150):b()}else if(!this.isShown&&this.$backdrop){this.$backdrop.removeClass("in");var f=function(){c.removeBackdrop(),b&&b()};a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one("bsTransitionEnd",f).emulateTransitionEnd(150):f()}else b&&b()},c.prototype.checkScrollbar=function(){document.body.clientWidth>=window.innerWidth||(this.scrollbarWidth=this.scrollbarWidth||this.measureScrollbar())},c.prototype.setScrollbar=function(){var a=parseInt(this.$body.css("padding-right")||0,10);this.scrollbarWidth&&this.$body.css("padding-right",a+this.scrollbarWidth)},c.prototype.resetScrollbar=function(){this.$body.css("padding-right","")},c.prototype.measureScrollbar=function(){var a=document.createElement("div");a.className="modal-scrollbar-measure",this.$body.append(a);var b=a.offsetWidth-a.clientWidth;return this.$body[0].removeChild(a),b};var d=a.fn.modal;a.fn.modal=b,a.fn.modal.Constructor=c,a.fn.modal.noConflict=function(){return a.fn.modal=d,this},a(document).on("click.bs.modal.data-api",'[data-toggle="modal"]',function(c){var d=a(this),e=d.attr("href"),f=a(d.attr("data-target")||e&&e.replace(/.*(?=#[^\s]+$)/,"")),g=f.data("bs.modal")?"toggle":a.extend({remote:!/#/.test(e)&&e},f.data(),d.data());d.is("a")&&c.preventDefault(),f.one("show.bs.modal",function(a){a.isDefaultPrevented()||f.one("hidden.bs.modal",function(){d.is(":visible")&&d.trigger("focus")})}),b.call(f,g,this)})}(jQuery)
|
||||
|
|
@ -32,7 +32,7 @@ $image-margin: 2rem;
|
|||
width: 100%;
|
||||
}
|
||||
@include breakpoint(desktop-range) {
|
||||
min-width: 24%;
|
||||
min-width: 24%;
|
||||
float: none;
|
||||
}
|
||||
h4 {
|
||||
|
|
@ -62,3 +62,48 @@ $image-margin: 2rem;
|
|||
}
|
||||
}
|
||||
}
|
||||
.portfolio-modal .close-modal {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 3rem;
|
||||
}
|
||||
.modal {
|
||||
@extend .default-animation;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1050;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
outline: 0;
|
||||
background: $white;
|
||||
text-align: center;
|
||||
&.in {
|
||||
opacity: 1;
|
||||
}
|
||||
.client-details {
|
||||
list-style-type: none;
|
||||
li {
|
||||
display: inline-block;
|
||||
strong {
|
||||
color: $core-accent;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-content {
|
||||
margin: 0 auto;
|
||||
width: 35rem;
|
||||
min-height: 100%;
|
||||
margin-top: 10rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -10,7 +10,9 @@
|
|||
<h4>{{ portfolio.title }}</h4>
|
||||
<p>{{ portfolio.desc }}</p>
|
||||
</div>
|
||||
<div class='screen'><div class="screen-content" style="background-image: url({{ page.media[portfolio.image].url }})" ></div><div class="screen-content-hover"><i class="fa fa-plus-square"></i></div></div>
|
||||
<a href="#portfolioModal{{ portfolio.modalid }}" class="portfolio-link" data-toggle="modal">
|
||||
<div class='screen'><div class="screen-content" style="background-image: url({{ page.media[portfolio.image].url }})" ></div><div class="screen-content-hover"><i class="fa fa-plus-square"></i></div></div>
|
||||
</a>
|
||||
<div class='keyboard'></div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
|
@ -18,7 +20,35 @@
|
|||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
<div class="callout-line"></div>
|
||||
</div>
|
||||
|
||||
{% for portfolio in page.header.portfolio %}
|
||||
<div class="portfolio-modal modal" id="portfolioModal{{ portfolio.modalid }}" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-content">
|
||||
<div class="close-modal" data-dismiss="modal"><i class="fa fa-times"></i></div>
|
||||
<div class="modal-body">
|
||||
<h1>{{ portfolio.title }}</h1>
|
||||
<img src="{{ page.media[portfolio.image].url }}" class="img-responsive img-centered" alt="{{ portfolio.alt }}">
|
||||
<p>{{ portfolio.desc }}</p>
|
||||
<ul class="client-details">
|
||||
<li>Client:
|
||||
<strong>
|
||||
{{ portfolio.client }}
|
||||
</strong>
|
||||
</li>
|
||||
<li>Date:
|
||||
<strong>
|
||||
{{ portfolio.date }}
|
||||
</strong>
|
||||
</li>
|
||||
<li>Service:
|
||||
<strong>
|
||||
{{ portfolio.category }}
|
||||
</strong>
|
||||
</li>
|
||||
</ul>
|
||||
<button type="button" class="button" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue