Skip to content

Commit

Permalink
Work on feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@bogdanmir
bogdanmir committed Jul 10, 2019
1 parent fd787b6 commit 1229052
Show file tree
Hide file tree
Showing 5 changed files with 205 additions and 16 deletions.
1 change: 0 additions & 1 deletion packages/style/src/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
.dp-po-container {
/*max-width: 540px;*/
max-width: 100%;
padding: 0 8px;
}
}

Expand Down
134 changes: 126 additions & 8 deletions packages/style/src/demo/full-demo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ body {
color: var(--grey-darkest);
}

.dp-Template {
position: relative;
}

.dp-po-nav {
justify-content: space-between;
margin: 0;
Expand Down Expand Up @@ -151,7 +155,7 @@ body {
}

.dp-po-main {
background-color: var(--grey-lightest);
/*background-color: var(--grey-lightest);*/
color: var(--grey-darkest);
}

Expand Down Expand Up @@ -414,6 +418,10 @@ body {
width: 140px;
}

.dp-po-comments-wrap .dp-po-Button:hover {
opacity: .8;
}

.dp-po-comments-wrap .dp-po-CustomCheckbox.CustomCheckbox--medium {
letter-spacing: -1px;
padding: 8px 10px 7px 29px;
Expand Down Expand Up @@ -745,7 +753,7 @@ body {
display: block;
}

.dp-po-comments-wrap.dp-po-reply-comment .dp-po-Button {
.dp-po-comments-wrap.dp-po-reply-comment .comment--item .dp-po-subtitle .dp-po-Button {
background-color: var(--white);
color: var(--grey-dark);
font: var(--p-2-bold);
Expand Down Expand Up @@ -822,16 +830,22 @@ body {
color: var(--grey-darkest);
display: none;
font: var(--p-3-semibold);
left: 100%;
left: calc(100% + 5px);
line-height: 1.5;
max-width: 270px;
padding: 10px;
position: absolute;
top: 100%;
top: 60%;
width: max-content;
z-index: 2;
}

.dp-po-Tooltip-article-info .dp-po-tooltip-wrap .dp-po-tooltip {
left: calc(100% + 32px);
padding: 0 6px 2px;
line-height: 1.3;
}

.dp-po-Sidebar.Sidebar--right .dp-po-Dropdown-container {
max-width: 100%;
}
Expand Down Expand Up @@ -932,6 +946,9 @@ body {
.dp-po-share-list .dp-po-dropdown-menu .dp-po-dropdown-menu-item .dp-po-Icon {
margin-right: 17px;
}
.subscribe--dropdown .dp-po-dropdown-menu .dp-po-dropdown-menu-item .dp-po-Icon.Icon--success {
margin-right: 4px;
}

.dp-po-dropdown-menu.subscribe--dropdown .dp-po-dropdown-menu-item:hover {
color: var(--brand-primary);
Expand Down Expand Up @@ -1017,6 +1034,10 @@ body {
font: var(--h-3);
}

.dp-po-wrap-item.Dropdown-share:hover {
border-color: var(--brand-primary);
}

.dp-po-labels-wrap .dp-po-label {
margin-top: 10px;
}
Expand All @@ -1034,6 +1055,7 @@ body {
display: flex;
height: 20px;
min-width: 25px;
margin-right: 6px;
}

.dp-po-related-list li {
Expand Down Expand Up @@ -1187,7 +1209,7 @@ body {
}

.dp-po-Flag-item-list .dp-po-time-status {
margin-top: 4px;
margin-top: 6px;
}

.is-success {
Expand Down Expand Up @@ -1266,19 +1288,23 @@ body {
opacity: 1;
}

.dp-po-mobile-subscribe {
display: none;
}

/* mobile -v */

@media (max-width: 768px) {
@media (max-width: 992px) {
.dp-po-nav .dp-po-Logo-descript,
.dp-po-Logo-wrap .dp-po-Icon::after,
.dp-po-nav .dp-po-Button::after,
.dp-po-nav-control li.dp-po-Select-Language {
display: none;
}

.dp-po-main {
/* .dp-po-main {
background-color: var(--white);
}
}*/

.dp-po-md-12 {
flex: 0 0 100%;
Expand Down Expand Up @@ -1421,4 +1447,96 @@ body {
margin: 0 10px 0 0;
}

.dp-po-mobile-subscribe .Icon--Dots + .dp-po-dropdown-menu {
position: absolute;
top: 0;
right: 0;
left: 0;
background-color: var(--white);
box-shadow: var(--shadow-left);
border-radius: 4px;
padding: 0 10px;
height: 100vh;
}

.dp-po-mobile-subscribe .Icon--Dots + .dp-po-dropdown-menu .dp-po-Icon {
margin-right: 10px;
}

.dp-po-mobile-subscribe .Dropdown-share .dp-po-dropdown-menu-item.dp-po-close {
display: flex;
justify-content: flex-end;
border-bottom: 1.5px solid var(--grey-light);
margin: 0;
padding: 10px 0;
cursor: pointer;
}

.dp-po-mobile-subscribe .Dropdown-share .dp-po-Icon.Icon--caret-right {
margin-left: auto;
margin-right: 0;
cursor: pointer;
width: 25px;
height: 25px;
background-position: 100% 50%;
}

.dp-po-mobile-subscribe .dp-po-dropdown-share > .dp-po-Icon {
width: 20px;
cursor: pointer;
}

.dp-po-mobile-subscribe .Dropdown-share .dp-po-dropdown-menu-item {
padding: 10px 15px;
}

.dp-po-mobile-subscribe .Dropdown-share .dp-po-dropdown-menu-item:hover {
background-color: transparent;
}

.Dropdown-share .dp-po-dropdown-menu {
background-color: var(--white);
display: none;
width: 100%;
left: 0;
top: 38px;
position: absolute;
}

.Dropdown-share .dp-po-dropdown-menu.is-active {
display: block;
}

.dp-po-dropdown-share .dp-po-back-btn {
display: block;
position: absolute;
top: -39px;
cursor: pointer;
}

.dp-po-tex-wrap {
box-shadow: none;
font: var(--mp-1);
padding: 0;
}

.dp-Template.is-open .dp-po-overlay:after {
display: block;
content: '';
background: rgba(139, 146, 147, .4);
bottom: 0;
left: 0;
right: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
position: fixed;
}
}

@media (min-width: 992px) {
.dp-po-main {
background-color: var(--grey-lightest);
}
}
6 changes: 6 additions & 0 deletions packages/style/src/demo/icons-demo.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

59 changes: 53 additions & 6 deletions packages/style/website/static/demos/kb-view.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,53 @@ <h2 class="dp-po-Title-page"><span class="dp-po-Icon Icon--book"></span>Deskpro
</span>
</div>

<div class="dp-po-mobile-subscribe mobileCutBtn">
<div class="dp-po-dropdown-share">
<div class="dp-po-Icon Icon--Dots Icon--grey-darkest"></div>
<ul class="dp-po-dropdown-menu Dropdown-share">
<li class="dp-po-dropdown-menu-item dp-po-close"><span class="dp-po-Icon Icon--close"></span></li>
<li class="dp-po-dropdown-menu-item"><span class="dp-po-Icon Icon--share"></span>Share<span class="dp-po-Icon Icon--caret-right dp-po-share-btn"></span>
<ul class="dp-po-dropdown-menu">
<li class="dp-po-dropdown-menu-item dp-po-back-btn"><span class="dp-po-Icon Icon--back"></span></li>
<li class="dp-po-dropdown-menu-item"><span class="dp-po-Icon Icon--ticket"></span>Email</li>
<li class="dp-po-dropdown-menu-item"><span class="dp-po-Icon Icon--fb"></span>Facebook</li>
<li class="dp-po-dropdown-menu-item"><span class="dp-po-Icon Icon--Messenger"></span>Messenger</li>
<li class="dp-po-dropdown-menu-item"><span class="dp-po-Icon Icon--tw"></span>Twitter</li>
<li class="dp-po-dropdown-menu-item"><span class="dp-po-Icon Icon--whatsapp"></span>Whats app</li>
<li class="dp-po-dropdown-menu-item"><span class="dp-po-Icon Icon--linkedin"></span>Linkedin</li>
<li class="dp-po-dropdown-menu-item"><span class="dp-po-Icon Icon--Instagram"></span>Instagram</li>
<li class="dp-po-dropdown-menu-item">Copy this link</li>
<li class="dp-po-dropdown-menu-item"><a href="" class="dp-po-support-btn">www.support.deskpro.com/guides/admin/h...</a></li>
</ul>
</li>
<li class="dp-po-dropdown-menu-item"><span class="dp-po-Icon Icon--pdf-file"></span>Download this article</li>
<li class="dp-po-dropdown-menu-item"><span class="dp-po-Icon Icon--print"></span>Print this article</li>
</ul>
</div>

<!-- <div class="dp-po-wrap-item dp-po-related-wrap mobileCutShare">
<div class="dp-po-Dropdown-container Dropdown-share">
<ul class="dp-po-dropdown-atom dp-po-share-list">
<li class="dp-po-share">
<a href="#"><span class="dp-po-Icon Icon--share"></span></a>
<ul class="dp-po-dropdown-menu">
<li class="dp-po-dropdown-menu-item dp-po-title-list">Share this on</li>
<li class="dp-po-dropdown-menu-item"><span class="dp-po-Icon Icon--linkedin"></span>Linkedin</li>
<li class="dp-po-dropdown-menu-item"><span class="dp-po-Icon Icon--fb"></span>Facebook</li>
<li class="dp-po-dropdown-menu-item"><span class="dp-po-Icon Icon--tw"></span>Twitter</li>
<li class="dp-po-dropdown-menu-item"><span class="dp-po-Icon Icon--whatsapp"></span>Whats app</li>
<li class="dp-po-dropdown-menu-item"><span class="dp-po-Icon Icon--Instagram"></span>Instagram</li>
<li class="dp-po-dropdown-menu-item"><span class="dp-po-Icon Icon--Pinterest"></span>Pinterest</li>
<li class="dp-po-dropdown-menu-item"><span class="dp-po-Icon Icon--Messenger"></span>Messenger</li>
<li class="dp-po-dropdown-menu-item"><a href="" class="dp-po-support-btn">www.support.deskpro.com</a><span class="dp-po-Icon Icon--copy"></span></li>
</ul>
</li>
</ul>
</div>
</div> -->

</div>

<div class="dp-po-publish-date">
<span class="dp-po-publish-icon"><span class="dp-po-Icon Icon-calendar Icon--danger"></span></span>
<span class="dp-po-description">This article will unpublish on 1 July 2019.</span>
Expand All @@ -140,10 +187,9 @@ <h2 class="dp-po-Title-page"><span class="dp-po-Icon Icon--book"></span>Deskpro

<h2 class="dp-po-title dp-po-copy-clipboard">Dynamic Contact Forms <span class="dp-po-Icon Icon--Anchor"></span></h2>

<p>When dealing with IT-related requests, ensuring that users provide key information about their issue or request upfront helps you to manage their request more efficiently, reducing the amount of communication back and forth and avoiding the need to prompt the
<span class="dp-po-tooltip-wrap"> user <span class="dp-po-Icon Icon--info Icon--primary"></span><span class="dp-po-tooltip"><span class="dp-po-tooltip-title">User</span>Partnership seed money user experience social proof z entrepreneur social media investor gen-z graphical user interface.</span></span> for the vital information.</p>
<p>When dealing with IT-related requests, ensuring that users provide key information about their issue or request upfront helps you to manage their request more efficiently, reducing the amount of communication back and forth and avoiding the need to prompt the<span class="dp-po-tooltip-wrap"> user <span class="dp-po-Icon Icon--info Icon--primary"></span><span class="dp-po-tooltip"><span class="dp-po-tooltip-title">User</span>Partnership seed money user experience social proof z entrepreneur social media investor gen-z graphical user interface.</span></span> for the vital information.</p>

<p>You can define the information the form collects by adding your own <span class="dp-po-tooltip-wrap"> custom fields <span class="dp-po-Icon Icon--info Icon--primary"></span><span class="dp-po-tooltip"><span class="dp-po-tooltip-title">custom fields</span>Partnership seed money user experience social proof z entrepreneur social media investor gen-z graphical user interface.</span></span> and designing your form layouts.</p>
<p>You can define the information the form collects by adding your own<span class="dp-po-tooltip-wrap"> custom fields <span class="dp-po-Icon Icon--info Icon--primary"></span><span class="dp-po-tooltip"><span class="dp-po-tooltip-title">custom fields</span>Partnership seed money user experience social proof z entrepreneur social media investor gen-z graphical user interface.</span></span>and designing your form layouts.</p>

<p>You can follow our guide to <a href="">setting up an effective, customized contact form.</a></p>

Expand Down Expand Up @@ -431,8 +477,8 @@ <h6 class="dp-po-title">Attachments</h6>
</ul>
</div>

<div class="dp-po-wrap-item dp-po-related-wrap mobileCutShare">
<div class="dp-po-Dropdown-container Dropdown-share">
<div class="dp-po-wrap-item Dropdown-share dp-po-related-wrap mobileCutShare">
<div class="dp-po-Dropdown-container">
<span class="dp-po-title">Share</span>
<ul class="dp-po-dropdown-atom dp-po-share-list">
<li><a href="#"><span class="dp-po-Icon Icon--linkedin"></span></a></li>
Expand Down Expand Up @@ -493,7 +539,7 @@ <h6 class="dp-po-title">Attachments</h6>
<span class="dp-po-time-status">2 weeks</span>
</li>

<li>
<li class="dp-po-Tooltip-article-info">
<span class="dp-po-title">Unpublished date
<span class="dp-po-tooltip-wrap">
<span class="dp-po-Icon Icon--info Icon--primary"></span>
Expand All @@ -510,6 +556,7 @@ <h6 class="dp-po-title">Attachments</h6>
</div>
</div>
</section>
<div class="dp-po-overlay"></div>

<footer class="dp-po-footer">
<div class="dp-po-frame-copyright">Powered by <span class="dp-po-copyright-deskpro"><span class="dp-po-Icon Icon--elephant Icon--primary"></span>Deskpro</span></div>
Expand Down
21 changes: 20 additions & 1 deletion packages/style/website/static/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,26 @@ $(document).ready(function(){

$('body').on('click', '.dp-po-sort', function(event) {
$(this).toggleClass('is-active');
$(this)('.dp-po-dropdown-menu.Menu--tick').slideToggle(200)
$(this)('.dp-po-dropdown-menu.Menu--tick').slideToggle(200);
})

$('body').on('click', '.dp-po-mobile-subscribe .Icon--Dots', function(event) {
$(this).addClass('is-active');
$('body').find('.dp-Template').addClass('is-open');
$(this)('.dp-po-dropdown-menu').slideUp(200);
})

$('body').on('click', '.dp-po-mobile-subscribe .Icon--close', function(event) {
$('.dp-po-mobile-subscribe .Icon--Dots').removeClass('is-active');
$(this)('.dp-po-dropdown-menu').slideDown(200);
})

$('body').on('click', '.dp-po-share-btn', function(event) {
$('body').find('.Dropdown-share .dp-po-dropdown-menu').addClass('is-active');
})

$('body').on('click', '.dp-po-dropdown-menu .dp-po-back-btn', function(event) {
$('body').find('.Dropdown-share .dp-po-dropdown-menu').removeClass('is-active');
})
})

Expand Down

0 comments on commit 1229052

Please sign in to comment.