portfolio modal polishing and bugfixes
This commit is contained in:
Karol Orzeł
parent
3c13612d61
commit
45a1208b09
7 changed files with 204 additions and 150 deletions
|
|
@ -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, .modal, .logo h3, .logo ul.social-icons li, .logo ul.social-icons li a, .notebook .screen .screen-content-hover {
|
||||
.default-animation, #body, .modal, .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 {
|
||||
-webkit-transition: all 0.5s ease;
|
||||
-moz-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease; }
|
||||
|
|
@ -724,6 +724,51 @@ td {
|
|||
#panel .navigation li ul li.active > a {
|
||||
background: #ccc; }
|
||||
|
||||
.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; }
|
||||
@media only all and (min-width: 48em) and (max-width: 59.938em) {
|
||||
.modal .modal-content {
|
||||
width: 100%; } }
|
||||
@media only all and (max-width: 47.938em) {
|
||||
.modal .modal-content {
|
||||
width: 100%; } }
|
||||
|
||||
.blog-header {
|
||||
padding-top: 1rem !important;
|
||||
padding-bottom: 1rem;
|
||||
|
|
@ -1476,45 +1521,6 @@ 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
|
|
@ -51,6 +51,9 @@
|
|||
// Pushy Panel
|
||||
@import "template/panel";
|
||||
|
||||
// Modal window
|
||||
@import "template/modal";
|
||||
|
||||
// Blog
|
||||
@import "template/blog";
|
||||
|
||||
|
|
|
|||
53
scss/template/_modal.scss
Normal file
53
scss/template/_modal.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
|
||||
// Modal Window
|
||||
.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;
|
||||
@include breakpoint(tablet-range) {
|
||||
width: 100%;
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -62,48 +62,3 @@ $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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,54 +1,56 @@
|
|||
<div class="modular-row portfolio">
|
||||
{{ content }}
|
||||
{% if page.header.portfolio %}
|
||||
<div class="notebooks">
|
||||
{% for row in page.header.portfolio|batch(4) %}
|
||||
<div class="notebook-row">
|
||||
{% for portfolio in row %}
|
||||
<div class="notebook">
|
||||
<div class="desc">
|
||||
<h4>{{ portfolio.title }}</h4>
|
||||
<p>{{ portfolio.desc }}</p>
|
||||
<div class="notebooks">
|
||||
{% for row in page.header.portfolio|batch(4) %}
|
||||
<div class="notebook-row">
|
||||
{% for portfolio in row %}
|
||||
<div class="notebook">
|
||||
<div class="desc">
|
||||
<h4>{{ portfolio.title }}</h4>
|
||||
<p>{{ portfolio.desc }}</p>
|
||||
</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 %}
|
||||
</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 %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</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 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>
|
||||
<a href="{{ portfolio.url }}">
|
||||
<img src="{{ page.media[portfolio.image].url }}" class="img-responsive img-centered" alt="{{ portfolio.alt }}">
|
||||
</a>
|
||||
<p>{{ portfolio.desc }}</p>
|
||||
<ul class="client-details">
|
||||
<li>Client:
|
||||
<strong>
|
||||
<a href="{{ portfolio.url }}">{{ portfolio.client }}</a>
|
||||
</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>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -1,35 +1,70 @@
|
|||
<div class="modular-row callout">
|
||||
{{ content }}
|
||||
{% if page.header.pricing %}
|
||||
{{ content }}
|
||||
{% if page.header.pricing %}
|
||||
<div class="pricing-container">
|
||||
{% for item in page.header.pricing %}
|
||||
<div class="pricing-item">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="price">{{ item.price }}</div>
|
||||
{% for line in item.options %}
|
||||
<div class="info">
|
||||
{{ line.line }}
|
||||
<div class="pricing-item">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="price">{{ item.price }}</div>
|
||||
{% for line in item.options %}
|
||||
<div class="info">
|
||||
{{ line.line }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="foot">
|
||||
<a class="button" href="{{ item.button_url }}">{{ item.button_text }}</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="foot">
|
||||
<a class="button" href="{{ item.button_url }}">{{ item.button_text }}</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if page.header.portfolio %}
|
||||
{% endif %}
|
||||
{% if page.header.portfolio %}
|
||||
<div class="notebooks">
|
||||
{% for portfolio in page.header.portfolio %}
|
||||
<div class="notebook">
|
||||
<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>
|
||||
<div class='keyboard'></div>
|
||||
<h4>{{ portfolio.description }}</h4>
|
||||
</div>
|
||||
<div class="notebook">
|
||||
<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>
|
||||
<h4>{{ portfolio.title }}</h4>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
<div class="callout-line"></div>
|
||||
<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>
|
||||
<a href="{{ portfolio.url }}">
|
||||
<img src="{{ page.media[portfolio.image].url }}" class="img-responsive img-centered" alt="{{ portfolio.alt }}">
|
||||
</a>
|
||||
<p>{{ portfolio.desc }}</p>
|
||||
<ul class="client-details">
|
||||
<li>Client:
|
||||
<strong>
|
||||
<a href="{{ portfolio.url }}">{{ portfolio.client }}</a>
|
||||
</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 a new issue