status-im
/
re-frame-10x
mirror of https://github.com/status-im/re-frame-10x.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fixup flexbox styling 

Fixes #97
This commit is contained in:
Daniel Compton 2017-11-09 15:06:50 +13:00
parent d646c1bb4d
commit 7b23f85b2f
6 changed files with 44 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
resources/day8/re_frame/trace/main.css
View File

@ -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 {

24
resources/day8/re_frame/trace/main.less
View File

@ -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 {

4
src/day8/re_frame/trace.cljs
View File

@ -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)

2
src/day8/re_frame/trace/components/container.cljs
View File

@ -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"))

2
src/day8/re_frame/trace/events.cljs
View File

@ -56,7 +56,7 @@
",resizable=yes,scrollbars=yes,status=no,directories=no,toolbar=no,menubar=no"))
d (.-document w)]
(.open d)
(.write d "<head></head><body><div id=\"--re-frame-trace--\"></div></body>" #_html-doc)
(.write d "<head></head><body><div id=\"--re-frame-trace--\" class=\"external-window\"></div></body>")
(aset w "onload" #(mount w d))
(.close d)))

4
src/day8/re_frame/trace/panels/app_db.cljs
View File

@ -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]