parent
483d1f5a16
commit
e448b45f0a
23
README.md
23
README.md
|
@ -99,3 +99,26 @@ You need both the re-frame-trace project _and_ a test project to develop it agai
|
||||||
```
|
```
|
||||||
|
|
||||||
- Now run your test project however you usually run it, and re-frame-trace should be in there. \o/
|
- Now run your test project however you usually run it, and re-frame-trace should be in there. \o/
|
||||||
|
|
||||||
|
- Additionally, if modifying the `.less` CSS files, compile the css by running within the re-frame-trace directory:
|
||||||
|
|
||||||
|
```
|
||||||
|
lein less auto
|
||||||
|
```
|
||||||
|
|
||||||
|
to watch for changes, or one time by running:
|
||||||
|
|
||||||
|
```
|
||||||
|
lein less once
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### Developing CSS
|
||||||
|
|
||||||
|
The CSS for the trace panel are defined both inline and within `src/day8/re_frame/less`. To develop the styles, run
|
||||||
|
|
||||||
|
```
|
||||||
|
lein less auto
|
||||||
|
```
|
||||||
|
|
||||||
|
and the .less file will automatically compile to css on file changes. Don't edit the file within `src/day8/re_frame/css` directly, or it will be overwriten. We are using css preprocessing because in order to isolate the panel styles, we are namespacing the panell styles with the id `#--re-frame-trace--`.
|
||||||
|
|
|
@ -7,6 +7,13 @@
|
||||||
[reagent "0.6.0"]
|
[reagent "0.6.0"]
|
||||||
[re-frame "0.9.0"]
|
[re-frame "0.9.0"]
|
||||||
[cljsjs/d3 "4.2.2-0"]]
|
[cljsjs/d3 "4.2.2-0"]]
|
||||||
|
:plugins [[lein-less "1.7.5"]]
|
||||||
:deploy-repositories {"releases" :clojars
|
:deploy-repositories {"releases" :clojars
|
||||||
"snapshots" :clojars}
|
"snapshots" :clojars}
|
||||||
|
|
||||||
|
:figwheel {:css-dirs ["src/day8/re_frame/css"]}
|
||||||
|
|
||||||
|
:less {:source-paths ["src/day8/re_frame/less"]
|
||||||
|
:target-path "src/day8/re_frame/css"}
|
||||||
|
|
||||||
:profiles {:dev {:dependencies [[binaryage/dirac "RELEASE"]]}})
|
:profiles {:dev {:dependencies [[binaryage/dirac "RELEASE"]]}})
|
||||||
|
|
|
@ -0,0 +1,108 @@
|
||||||
|
#--re-frame-trace-- {
|
||||||
|
background: white;
|
||||||
|
color: black;
|
||||||
|
font-family: 'courier new', monospace;
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
tr:hover {
|
||||||
|
transition: all 0.1s ease-out;
|
||||||
|
background: aliceblue;
|
||||||
|
filter: brightness(90%);
|
||||||
|
}
|
||||||
|
tr:nth-child(even) {
|
||||||
|
background: aliceblue;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
padding: 5px 5px 3px;
|
||||||
|
margin: 5px;
|
||||||
|
border-radius: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.text-button {
|
||||||
|
border-bottom: 1px dotted #888;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
.button:focus, .text-button:focus {
|
||||||
|
border-radius: 2px 2px 0 0;
|
||||||
|
-webkit-box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
|
||||||
|
-moz-box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
|
||||||
|
box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
.icon-button {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
button.tab {
|
||||||
|
|
||||||
|
}
|
||||||
|
.tab {
|
||||||
|
background: transparent;
|
||||||
|
border-radius: 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: monospace;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
.tab.active {
|
||||||
|
background: transparent;
|
||||||
|
border-bottom: 3px solid lightblue;
|
||||||
|
border-radius: 0;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
}
|
||||||
|
ul.filter-items {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 -5px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.filter-items li {
|
||||||
|
color: #333;
|
||||||
|
background: #efefef;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.9em;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
.filter-items {
|
||||||
|
li {
|
||||||
|
.filter-item-string {
|
||||||
|
color: #616cdb;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
stroke-width: 0;
|
||||||
|
stroke: currentColor;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
.icon-remove {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
select {
|
||||||
|
background: white;
|
||||||
|
font-family: 'courier new', monospace;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
.nav {
|
||||||
|
background: #efeef1;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
.panel-content-top {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.panel-content-scrollable {
|
||||||
|
margin: 10px 0 0 10px;
|
||||||
|
flex: 1 0 auto;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.filter-control {
|
||||||
|
margin: 10px 0 0 10px;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue