From 7b23f85b2fb0332747c3300cd10c0520adc3ec1e Mon Sep 17 00:00:00 2001 From: Daniel Compton Date: Thu, 9 Nov 2017 15:06:50 +1300 Subject: [PATCH] Fixup flexbox styling Fixes #97 --- resources/day8/re_frame/trace/main.css | 21 ++++++++++++---- resources/day8/re_frame/trace/main.less | 24 +++++++++++++++---- src/day8/re_frame/trace.cljs | 4 +++- .../re_frame/trace/components/container.cljs | 2 +- src/day8/re_frame/trace/events.cljs | 2 +- src/day8/re_frame/trace/panels/app_db.cljs | 4 ++-- 6 files changed, 44 insertions(+), 13 deletions(-) diff --git a/resources/day8/re_frame/trace/main.css b/resources/day8/re_frame/trace/main.css index 3e3ea0f..467f235 100644 --- a/resources/day8/re_frame/trace/main.css +++ b/resources/day8/re_frame/trace/main.css @@ -317,6 +317,8 @@ #--re-frame-trace-- .popout-icon { max-width: 15px; cursor: pointer; + padding: 0 5px; + margin: 0 5px; } #--re-frame-trace-- .tab { background: transparent; @@ -414,15 +416,26 @@ #--re-frame-trace-- .filter .filter-control .filter-control-input input { border: none; } +#--re-frame-trace-- .filter-control-input { + display: flex; + flex: 1 0 auto; +} #--re-frame-trace-- .nav { background: #efeef1; color: #222222; } -#--re-frame-trace-- .panel-content-scrollable { - flex: 1 1 auto; +#--re-frame-trace--.external-window { + display: flex; height: 100%; - overflow: auto; - padding-top: 10px; + flex: 1 1 auto; +} +#--re-frame-trace-- .panel-content-scrollable { + padding-top: 20px; + display: flex; + flex-direction: column; + flex: 1 1 auto; + overflow-x: auto; + overflow-y: auto; z-index: 1000; } #--re-frame-trace-- .tab-contents { diff --git a/resources/day8/re_frame/trace/main.less b/resources/day8/re_frame/trace/main.less index a66f267..519c7a4 100644 --- a/resources/day8/re_frame/trace/main.less +++ b/resources/day8/re_frame/trace/main.less @@ -411,6 +411,8 @@ .popout-icon { max-width: 15px; cursor: pointer; + padding: 0 5px; + margin: 0 5px; } .tab { @@ -498,18 +500,32 @@ } } } + + .filter-control-input { + display: flex; + flex: 1 0 auto; + } .nav { background: @light-gray; color: @text-color; } + + &.external-window { + display: flex; + height: 100%; + flex: 1 1 auto; + } + .panel-content-top { + } .panel-content-scrollable { - padding-top: 10px; + padding-top: 20px; + display: flex; + flex-direction: column; flex: 1 1 auto; - height: 100%; - overflow: auto; - padding-top: 10px; + overflow-x: auto; + overflow-y: auto; z-index: 1000; } .tab-contents { diff --git a/src/day8/re_frame/trace.cljs b/src/day8/re_frame/trace.cljs index 16cdc4d..c270939 100644 --- a/src/day8/re_frame/trace.cljs +++ b/src/day8/re_frame/trace.cljs @@ -160,7 +160,7 @@ (defn resizer-style [draggable-area] {:position "absolute" :z-index 2 :opacity 0 - :left (str (- (/ draggable-area 2)) "px") :width "10px" :top "0px" :height "100%" :cursor "col-resize"}) + :left (str (- (/ draggable-area 2)) "px") :width "10px" :top "0px" :cursor "col-resize"}) (def ease-transition "left 0.2s ease-out, top 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out") @@ -169,6 +169,7 @@ (enable-tracing!) (disable-tracing!))) + (defn devtools-outer [traces opts] ;; Add clear button ;; Filter out different trace types @@ -226,6 +227,7 @@ {:style {:position "fixed" :width "0px" :height "0px" :top "0px" :left "0px" :z-index 99999999}} [:div.panel {:style {:position "fixed" :z-index 1 :box-shadow "rgba(0, 0, 0, 0.3) 0px 0px 4px" :background "white" + :display "flex" :left left :top "0px" :width (str (inc (int (* 100 @panel-width%))) "%") :height "100%" :transition transition}} [:div.panel-resizer {:style (resizer-style draggable-area) diff --git a/src/day8/re_frame/trace/components/container.cljs b/src/day8/re_frame/trace/components/container.cljs index 29cbeff..4d3d1f9 100644 --- a/src/day8/re_frame/trace/components/container.cljs +++ b/src/day8/re_frame/trace/components/container.cljs @@ -10,7 +10,7 @@ (let [selected-tab (rf/subscribe [:settings/selected-tab]) panel-type (:panel-type opts)] [:div.panel-content - {:style {:width "100%" :height "100%" :display "flex" :flex-direction "column"}} + {:style {:width "100%" :display "flex" :flex-direction "column"}} [:div.panel-content-top [:div.nav [:button {:class (str "tab button " (when (= @selected-tab :traces) "active")) diff --git a/src/day8/re_frame/trace/events.cljs b/src/day8/re_frame/trace/events.cljs index 0e03be2..ee6b35a 100644 --- a/src/day8/re_frame/trace/events.cljs +++ b/src/day8/re_frame/trace/events.cljs @@ -56,7 +56,7 @@ ",resizable=yes,scrollbars=yes,status=no,directories=no,toolbar=no,menubar=no")) d (.-document w)] (.open d) - (.write d "
" #_html-doc) + (.write d "
") (aset w "onload" #(mount w d)) (.close d))) diff --git a/src/day8/re_frame/trace/panels/app_db.cljs b/src/day8/re_frame/trace/panels/app_db.cljs index 9b07440..dff3c1d 100644 --- a/src/day8/re_frame/trace/panels/app_db.cljs +++ b/src/day8/re_frame/trace/panels/app_db.cljs @@ -119,8 +119,8 @@ subtree-paths (rf/subscribe [:app-db/paths]) input-error (r/atom false)] (fn [] - [:div {:style {:flex "1 0 auto" :width "100%" :height "100%" :display "flex" :flex-direction "column"}} - [:div.panel-content-scrollable {:style {:margin 10}} + [:div {:style {:flex "1 1 auto" :display "flex" :flex-direction "column"}} + [:div.panel-content-scrollable {:style {:margin-left "10px"}} [:div.filter-control-input [components/search-input {:placeholder ":path :into :app-state" :on-save (fn [path]