From 1014c84a2d25af1e3a0f33c5973b6329a2e589bb Mon Sep 17 00:00:00 2001 From: Robert Kirsz Date: Tue, 18 Oct 2016 19:10:06 +0200 Subject: [PATCH] Responsiveness updates to the print modal window MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixed radio inputs’ margins and made modal window scrollable and it’s width contained inside the main window --- web/client/plugins/Print.jsx | 4 +--- web/client/product/assets/css/viewer.css | 19 +++++++++++++++---- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/web/client/plugins/Print.jsx b/web/client/plugins/Print.jsx index 4d3672e10b..8f9e02dcc1 100644 --- a/web/client/plugins/Print.jsx +++ b/web/client/plugins/Print.jsx @@ -141,9 +141,7 @@ const Print = React.createClass({ }, glyph: "print" }, - style: { - width: "840px !important" - } + style: {} }; }, componentWillMount() { diff --git a/web/client/product/assets/css/viewer.css b/web/client/product/assets/css/viewer.css index d4cc29baf5..34f18bb81d 100644 --- a/web/client/product/assets/css/viewer.css +++ b/web/client/product/assets/css/viewer.css @@ -317,15 +317,22 @@ html, body, #container, .fill { opacity: 0.5; color: white; } + @media (min-width: 992px) { #mapstore-print-panel { - width: 825px !important; + width: 825px; } } @media (max-width: 991px) { #mapstore-print-panel { - width: 500px !important; + width: 700px; + } +} + +@media (max-width: 767px) { + #mapstore-print-panel { + width: 98%; } } @@ -341,8 +348,10 @@ html, body, #container, .fill { float: right; } -#mapstore-print-panel input[type=radio] { - margin-left: 20px; +@media (min-width: 768px) { + #mapstore-print-panel input[type=radio] { + margin: 0 8px 0 20px; + } } #mapstore-print-panel .print-map-preview { @@ -435,6 +444,8 @@ html, body, #container, .fill { .modal-body { background-color: white; + height: calc(100vh - 190px); + overflow-y: auto; } #mapstore-shapefile-upload {