From 61a377e3083a530cb1859bcab38fd6a7c5433eba Mon Sep 17 00:00:00 2001 From: bogdanmir Date: Thu, 11 Jul 2019 10:50:45 +0300 Subject: [PATCH] Work on responsive --- packages/style/src/demo/full-demo.css | 251 ++++++++- .../style/website/static/demos/kb-view.html | 504 +++++++++--------- packages/style/website/static/js/script.js | 59 +- 3 files changed, 535 insertions(+), 279 deletions(-) diff --git a/packages/style/src/demo/full-demo.css b/packages/style/src/demo/full-demo.css index 02105817..10365940 100644 --- a/packages/style/src/demo/full-demo.css +++ b/packages/style/src/demo/full-demo.css @@ -159,16 +159,17 @@ a:hover { } .dp-po-main { - /*background-color: var(--grey-lightest);*/ color: var(--grey-darkest); } @media (min-width: 1280px) { .dp-po-main .dp-po-col-3 { - margin-left: 30px; - margin-right: -30px; - padding-left: 0; + /*margin-left: 30px; + margin-right: -30px; + padding-left: 0;*/ + padding-left: 30px; + padding-right: 0; } .dp-po-main .dp-po-col-9 { @@ -413,6 +414,10 @@ a:hover { padding: 30px; } +.dp-po-add-comments + .dp-po-comments-wrap { + padding: 0; +} + .dp-po-comments-wrap .dp-po-Button { background: var(--brand-primary); color: var(--white); @@ -500,7 +505,7 @@ a:hover { } .dp-po-comments-wrap .dp-po-Upload { - font: var(--p-3); + /*font: var(--p-3);*/ padding: 17px; } @@ -1321,13 +1326,10 @@ a:hover { display: none; } -/* .dp-po-main { - background-color: var(--white); - }*/ - .dp-po-md-12 { flex: 0 0 100%; max-width: 100%; + padding: 0; } .dp-po-hidden-md { @@ -1338,20 +1340,33 @@ a:hover { background-size: 40px 40px; height: 40px; width: 40px; + margin-left: 0; } .dp-po-Header-container { background: transparent; border-bottom: 1px solid var(--grey-lighter); - padding: 20px 8px; + padding: 12px 8px; } .dp-po-Breadcrumbs-wrap { border: none; } + .dp-po-container { + padding: 0 5px; + } + + .dp-po-main .dp-po-container .dp-po-row { + margin: 0; + } + + .dp-po-Breadcrumbs-wrap .dp-po-Breadcrumbs { + padding: 0; + } + .dp-po-Breadcrumb-item:not(:last-child) .dp-po-Breadcrumb-link { - max-width: 100px; + max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -1382,14 +1397,38 @@ a:hover { display: flex; } + .dp-po-nav .dp-po-nav-control, + .dp-po-nav .dp-po-Logo-wrap { + margin: 0; + } + .dp-po-nav li, .dp-po-nav-control li { margin: 0 15px 0 0; } + .dp-po-nav-control li:last-child { + margin: 0; + } + + .dp-po-nav-control .dp-po-Button { + min-width: 90px; + height: 35px; + } + .dp-po-Header-container .dp-po-Forms.dp-po-Search-bar input { border: 0; background-color: var(--grey-lighter); font: var(--mh-3); + height: 45px; + } + + .dp-po-main .dp-po-Title-page { + font: var(--mh-1); + margin-top: 8px; + } + + .dp-po-publish-date .dp-po-description { + font: var(--mp-1); } .dp-po-description-wrap .dp-IconsWrapper { @@ -1404,12 +1443,13 @@ a:hover { border-top: 1px solid var(--grey-light); border-bottom: 1px solid var(--grey-light); padding: 11px 0; - margin-top: 30px; + margin-top: 25px; display: flex; align-items: center; justify-content: space-between; position: relative; flex-direction: row-reverse; + z-index: 3; } .Dropdown-share .dp-po-title { @@ -1447,6 +1487,7 @@ a:hover { color: var(--brand-primary); font: var(--p-2-bold); line-height: 1; + padding: 7px 15px; } .dp-po-Dropdown-container.subscribe--dropdown .dp-po-dropdown-Title:hover { @@ -1501,8 +1542,11 @@ a:hover { } .dp-po-mobile-subscribe .dp-po-dropdown-share > .dp-po-Icon { - width: 20px; - cursor: pointer; + width: 30px; + cursor: pointer; + background-size: 7px 25px; + height: 35px; + background-position: 90% 70%; } .dp-po-mobile-subscribe .Dropdown-share .dp-po-dropdown-menu-item { @@ -1511,6 +1555,7 @@ a:hover { .dp-po-mobile-subscribe .Dropdown-share .dp-po-dropdown-menu-item:hover { background-color: transparent; + opacity: 1; } .Dropdown-share .dp-po-dropdown-menu { @@ -1537,6 +1582,15 @@ a:hover { box-shadow: none; font: var(--mp-1); padding: 0; + margin-bottom: 20px; + } + + .dp-po-tex-wrap li + li { + margin-top: 10px; + } + + .dp-po-title.dp-po-copy-clipboard { + margin: 24px 0 12px; } .dp-Template.is-open .dp-po-overlay:after { @@ -1552,10 +1606,179 @@ a:hover { z-index: 2; position: fixed; } + + .dp-po-Image-knowledgabse { + border: 5px solid var(--grey-lighter); + margin: 0 -5px; + } + + .dp-po-Image-knowledgabse img { + border: 0; + } + + .dp-po-image-description { + display: none; + } + + .Voting-section .dp-po-title { + color: var(--grey-darkest); + font: var(--mh-2); + border-bottom: 1.5px solid var(--grey-light); + padding-bottom: 12px; + margin-bottom: 20px; + } + + .dp-po-wrap-collapse-md { + margin-top: 30px; + display: flex; + flex-direction: column; + } + + .dp-po-wrap-collapse-md .dp-po-wrap-item { + border: none; + padding: 0; + /*margin-bottom: 25px;*/ + } + + .dp-po-comments.dp-po-add-comments.is-active { + margin-bottom: 60px; + } + + .dp-po-comments.comments-list + .dp-po-comments-wrap { + padding: 0; + } + + .dp-po-wrap-collapse-md .dp-po-md-collapse-title.dp-po-title { + display: flex; + align-items: center; + border-bottom: 1.5px solid var(--grey-light); + color: var(--grey-darkest); + font: var(--mh-2); + border-bottom: 1.5px solid var(--grey-light); + padding-bottom: 12px; + cursor: pointer; + } + + .dp-po-comments-item .dp-po-Avatar .dp-po-Avatar-name, + .dp-po-comments.comments-list + .dp-po-comments-wrap .dp-po-username, + .dp-po-comments-wrap .dp-po-Upload-item label, + .dp-po-attachment-item, + .dp-po-comments-wrap .dp-po-Dragdrop-btn { + font: var(--mp-1); + } + + .dp-po-Upload-wrapper .dp-po-Upload { + min-width: auto; + padding: 10px; + } + + .dp-po-list.comment--item { + margin-bottom: 60px; + } + + .dp-po-comments.comments-list + .dp-po-comments-wrap > .dp-po-comments-item .dp-po-comment-subtitle { + font: var(--mp-1); + margin: 18px 0 20px; + max-width: 100%; + padding-left: 40px; + } + + .dp-po-comments-item .dp-po-attachments { + padding: 10px; + } + + .dp-po-comments.comments-list + .dp-po-comments-wrap .label--time { + margin: 0; + } + + .dp-po-md-collapse-content { + padding: 10px 0; + display: none; + } + + .dp-po-md-collapse-title.dp-po-title .dp-po-Icon { + margin-left: auto; + } + + .dp-po-comments-wrap { + box-shadow: none; + margin-bottom: 0; + } + + .dp-po-comments.dp-po-add-comments { + display: flex; + justify-content: center; + background: var(--brand-primary); + color: var(--white); + font: var(--mp-1-bold); + max-height: 44px; + padding: 11px 0 12px; + width: 200px; + border-radius: 4px; + margin: 35px auto 60px; + } + + .dp-po-comments { + margin: 0; + justify-content: flex-start; + } + + .dp-po-comments-collapse { + order: 4; + } + + .dp-po-related-wrap { + order: 1; + } + + .dp-po-labels-wrap { + order: 2; + } + + .dp-po-article-details-wrap { + order: 3; + } + + .dp-po-main .dp-po-Sidebar { + padding: 0; + margin-top: 0; + } + + .dp-po-sort { + margin-left: 15px; + } + + .dp-po-comments-item { + padding: 20px 10px 20px 0px; + } + + .dp-po-show-more { + display: flex; + flex-direction: column; + align-items: center; + } + + .dp-po-show-more .dp-po-description { + font: var(--mp-1); + color: var(--grey-dark); + margin: 35px 0 0; + cursor: pointer; + } + } @media (min-width: 992px) { + .dp-po-main { background-color: var(--grey-lightest); } + + .Voting-section .dp-po-title { + display: none; + } + + .dp-po-hidden-md-up { + display: none; + } + } \ No newline at end of file diff --git a/packages/style/website/static/demos/kb-view.html b/packages/style/website/static/demos/kb-view.html index 3837c9a7..9c1b3a69 100644 --- a/packages/style/website/static/demos/kb-view.html +++ b/packages/style/website/static/demos/kb-view.html @@ -18,7 +18,7 @@ -
+
  • @@ -78,7 +78,7 @@
    -

    Deskpro for IT teams

    +

    Deskpro for IT teams

    • @@ -141,27 +141,6 @@

      Deskpro

    - -
    @@ -201,6 +180,7 @@

    Dynamic Contact Forms +
    Rate this article
    - -
    - Comments (2) - - Sort by -
      -
    • Helpfulness
      • -
    • Date
      • -
    -     -
    - -
    -
    -
    - - - Melinda Stanley - - - 2 days - -
      -
    • Permalink
      • -
    • Reply to this comment
      • +
      + +
      +
      + Comments (2) + + Sort by +
        +
      • Helpfulness
        • +
      • Date
       +
      -

      Product market fit customer development acquihire technical cofounder.

      -
      - 2 - 0 -
      - - -
        - -
      • +
        +
        - - - Nick Green - Agent + + + Melinda Stanley 2 days @@ -267,15 +224,60 @@

        Dynamic Contact Forms Hi Melinda, partnership seed money user experience social proof z entrepreneur social media investor gen-z graphical user interface

        -

        • - -
      • +

        Product market fit customer development acquihire technical cofounder.

        +
        + 2 + 0 +
        + + +
          + +
        • +
          + + + Nick Green + Agent + + + 2 days + +
            +
          • Permalink
            • +
          • Reply to this comment
            • +
          +           +
          +

          Hi Melinda, partnership seed money user experience social proof z entrepreneur social media investor gen-z graphical user interface

          +
          • + +
        • +
          + + + Wendy pride + Agent + + + 2 days + +
            +
          • Permalink
            • +
          • Reply to this comment
            • +
          +           +
          +

          Nick, Wendy, this is a great idea. Partnership seed money user experience social proof z entrepreneur social media investor gen-z graphical user interface.

          +
          • +
        +
      + +
      - - - Wendy pride - Agent + + + Nick Green 2 days @@ -286,111 +288,98 @@

      Dynamic Contact Forms Nick, Wendy, this is a great idea. Partnership seed money user experience social proof z entrepreneur social media investor gen-z graphical user interface.

      - -

    -
    - -
    -
    - - - Nick Green - - - 2 days - -
      -
    • Permalink
      • -
    • Reply to this comment
      • -
    -     -
    -

    Partnership seed money user experience social proof z entrepreneur social media investor gen-z graphical user interface.

    -
    - 3 - 0 -
    -
    - - -
    -
    - - - Melinda Stanley - - - 2 days - -
    -

    Product market fit customer development acquihire technical cofounder.

    -
    -
    Attachments
    - - - craft-sync-user-guide.pdf (220 kB) - - - - craft-sync-photoshop-help.pdf (112 kB) - -
    -
    - 2 - 0 -
    -
    - - -
    -
    - - - - Nick Green - - Cancel - - -
    - Your comment* - - +

    Partnership seed money user experience social proof z entrepreneur social media investor gen-z graphical user interface.

    +
    + 3 + 0
    - +
    -
    - Add attachment - - - - + +
    +
    + + + Melinda Stanley - or - - - Drag and drop + + 2 days - +
    +

    Product market fit customer development acquihire technical cofounder.

    +
    +
    Attachments
    + + + craft-sync-user-guide.pdf (220 kB) + + + + craft-sync-photoshop-help.pdf (112 kB) + +
    +
    + 2 + 0 +
    -
    - - - - - +
    +

    Show more comments

    - + + +
    +
    + + + + Nick Green + + Cancel + + +
    + Your comment* + + +
    +     + +
    + Add attachment + + + + + + or + + + Drag and drop + + +
    + +
    + + + + + +
    +
    +
    +
    +
    - Add comment + Add comment
    @@ -437,9 +426,9 @@
    Attachments
    -
    -
    + +

- Contents - -
- Labels - Getting started +
+ Contents +
+ +
-
- Related content - +
+ Labels +
+ Getting started +
- -
-
- Share -
    -
    • -
    • -
    • -
    • -
    • -
  • - -
      -
    • Share this on
      • -
    • Linkedin
      • -
    • Facebook
      • -
    • Twitter
      • -
    • Whats app
      • -
    • Instagram
      • -
    • Pinterest
      • -
    • Messenger
      • -
    • www.support.deskpro.com
      • -
    -
    • +
    + Related content +
    +
    -
    -
      -
    • - Created by - Nicholas Green -
      • -
    • - First published - 12 Jun 2019 -
      • -
    • - Custom Field X - Value Y -
      • -
    • - Translations - Updated -
      • - -
    • - - - French - - 23 days -
      • - -
    • - - - German - - 2 weeks -
      • +
      +
      + Share +
      +
        +
        • +
        • +
        • +
        • +
        • +
      • + +
          +
        • Share this on
          • +
        • Linkedin
          • +
        • Facebook
          • +
        • Twitter
          • +
        • Whats app
          • +
        • Instagram
          • +
        • Pinterest
          • +
        • Messenger
          • +
        • www.support.deskpro.com
          • +
        +
        • +
      +
      +
      +
      -
    • - Unpublished date - - - Viewed by agents only +
      +
      Article details
      +
      +
        +
      • + Created by + Nicholas Green +
        • +
      • + First published + 12 Jun 2019 +
        • +
      • + Custom Field X + Value Y +
        • +
      • + Translations + Updated +
        • + +
      • + + + French - - 26 June 2020 -
        • -
      + 23 days +
      • + +
    • + + + German + + 2 weeks +
      • + +
    • + Unpublished date + + + Viewed by agents only + + + 26 June 2020 +
      • +
    +
diff --git a/packages/style/website/static/js/script.js b/packages/style/website/static/js/script.js index 0a884370..eade45ee 100644 --- a/packages/style/website/static/js/script.js +++ b/packages/style/website/static/js/script.js @@ -65,6 +65,10 @@ $(document).ready(function(){ $(this).parents('.Voting-section').removeClass('is-like') $(this).parents('.Voting-section').addClass('is-dislike') }) + + $('body').on('click', '.dp-po-vote .dp-po-item-vote', function(event) { + $(this).addClass('is-active') + }) // Reply comment @@ -100,18 +104,20 @@ $(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).find('.dp-po-dropdown-menu.Menu--tick').slideToggle(200); + return false; }) $('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); + $(this).find('.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').find('.dp-Template').removeClass('is-open'); + $(this).find('.dp-po-dropdown-menu').slideDown(200); }) $('body').on('click', '.dp-po-share-btn', function(event) { @@ -121,33 +127,58 @@ $(document).ready(function(){ $('body').on('click', '.dp-po-dropdown-menu .dp-po-back-btn', function(event) { $('body').find('.Dropdown-share .dp-po-dropdown-menu').removeClass('is-active'); }) + $('body').on('click', '.dp-po-md-collapse-title', function(event) { + if($('body').outerWidth() < 992){ + if($(this).closest('.dp-po-md-collapse').find('.dp-po-md-collapse-content').hasClass('is-active')){ + $(this).closest('.dp-po-md-collapse').find('.dp-po-md-collapse-content').removeClass('is-active'); + $(this).closest('.dp-po-md-collapse').find('.dp-po-md-collapse-content').slideUp(200); + $(this).removeClass('is-active'); + }else{ + $(this).closest('.dp-po-md-collapse').find('.dp-po-md-collapse-content').slideDown(200); + $(this).closest('.dp-po-md-collapse').find('.dp-po-md-collapse-content').addClass('is-active'); + $(this).addClass('is-active'); + } + return false; + } + }) + $(window).resize(function(event) { + if($('body').outerWidth() > 992){ + $('body').find('.dp-po-md-collapse-content').removeClass('is-active'); + $('body').find('.dp-po-md-collapse-title').removeClass('is-active'); + $('body').find('.dp-po-md-collapse-content').attr('style',''); + } + }); }) // cut function subscribe btn function filterView_subscribe(){ - if (window.matchMedia('(max-width: 767px)').matches) { + if (window.matchMedia('(max-width: 992px)').matches) { $('.Sidebar--right .dp-po-Dropdown-container.subscribe--dropdown').detach().appendTo('.dp-po-col-9 .mobileCutBtn'); }else{ $('.mobileCutBtn .dp-po-Dropdown-container.subscribe--dropdown').detach().prependTo('.Sidebar--right'); } } -// cut function Share btn +// cut function Related content -// function filterView_share(){ -// if (window.matchMedia('(max-width: 767px)').matches) { -// $('.mobileCutShare .Dropdown-share').detach().appendTo('.dp-po-col-9 .mobileCutBtn'); -// }else{ -// $('.mobileCutBtn .Dropdown-share').detach().prependTo('.Sidebar--right .mobileCutShare'); -// } -// } +function filterView_collapse(){ + if (window.matchMedia('(max-width: 992px)').matches) { + $('.dp-po-related-wrap').detach().appendTo('.dp-po-col-9 .dp-po-wrap-collapse-md'); + $('.dp-po-labels-wrap').detach().appendTo('.dp-po-col-9 .dp-po-wrap-collapse-md'); + $('.dp-po-article-details-wrap').detach().appendTo('.dp-po-col-9 .dp-po-wrap-collapse-md'); + }else{ + $('.dp-po-wrap-collapse-md .dp-po-related-wrap').detach().appendTo('.dp-po-Sidebar.Sidebar--right'); + $('.dp-po-wrap-collapse-md .dp-po-labels-wrap').detach().appendTo('.dp-po-Sidebar.Sidebar--right'); + $('.dp-po-wrap-collapse-md .dp-po-article-details-wrap').detach().appendTo('.dp-po-Sidebar.Sidebar--right'); + } +} $(document).ready(function() { filterView_subscribe(); - // filterView_share(); + filterView_collapse(); $(window).resize(function() { filterView_subscribe(); - // filterView_share(); + filterView_collapse(); }); });