From 8b8b0d7d05aab3f5b7f9c221987991aac7aa45fa Mon Sep 17 00:00:00 2001 From: Luke Shumaker Date: Tue, 13 Dec 2016 21:39:29 -0500 Subject: Add jarmon graphing for Proton. --- jarmon-style/jquerytools.tabs.tabs-no-images.scss | 69 +++++++++++++ jarmon-style/loading.gif | 1 + jarmon-style/next.gif | 1 + jarmon-style/prev.gif | 1 + jarmon-style/style.scss | 120 ++++++++++++++++++++++ 5 files changed, 192 insertions(+) create mode 100644 jarmon-style/jquerytools.tabs.tabs-no-images.scss create mode 120000 jarmon-style/loading.gif create mode 120000 jarmon-style/next.gif create mode 120000 jarmon-style/prev.gif create mode 100644 jarmon-style/style.scss (limited to 'jarmon-style') diff --git a/jarmon-style/jquerytools.tabs.tabs-no-images.scss b/jarmon-style/jquerytools.tabs.tabs-no-images.scss new file mode 100644 index 0000000..d97f579 --- /dev/null +++ b/jarmon-style/jquerytools.tabs.tabs-no-images.scss @@ -0,0 +1,69 @@ +/* Skin for jQuery Tools tabs. + * + * Based on . + * + * Documentation on tabs: + */ + +$tabs-tab-height: 15px; +$tabs-tab-vpad: 2px; +$tabs-tab-hpad: 10px; +$tabs-border-width: 1px; +$tabs-border-style: solid #666; +$tabs-background-primary: #ddd; +$tabs-background-secondary: #efefef; + +/* root element for tab bar */ +ul.css-tabs { + margin: 0; + padding: 0; + height: $tabs-tab-height; + border-bottom: $tabs-border-width $tabs-border-style; + + /* single tab */ + li { + float: left; + margin: 0; + padding: 0; + list-style-type: none; + + /* link inside the tab */ + a { + display:block; + height: $tabs-tab-height; /* $tabs-tab-height - 2*($tabs-tab-vpad+$tabs-border-width) */ + padding: $tabs-tab-vpad $tabs-tab-hpad; + border: $tabs-border-width $tabs-border-style; + border-bottom: 0; + + margin-right: 2px; + border-radius: 4px 4px 0 0; + text-decoration: none; + + background: $tabs-background-secondary; + color: #777; + + &:hover { + background-color: #F7F7F7; + color: #333; + } + + /* selected tab */ + &.current { + background: $tabs-background-primary; + border-bottom: $tabs-border-width solid $tabs-background-primary; + color: #000; + cursor:default; + } + } + } +} + +/* tab pane */ +.css-panes > div { + display: none; + border: $tabs-border-width $tabs-border-style; + border-top: 0; + background: $tabs-background-primary; + + padding: 15px 20px; +} diff --git a/jarmon-style/loading.gif b/jarmon-style/loading.gif new file mode 120000 index 0000000..03b9781 --- /dev/null +++ b/jarmon-style/loading.gif @@ -0,0 +1 @@ +../../graph/jarmon-git/docs/examples/assets/icons/loading.gif \ No newline at end of file diff --git a/jarmon-style/next.gif b/jarmon-style/next.gif new file mode 120000 index 0000000..16a6d9d --- /dev/null +++ b/jarmon-style/next.gif @@ -0,0 +1 @@ +../../graph/jarmon-git/docs/examples/assets/icons/next.gif \ No newline at end of file diff --git a/jarmon-style/prev.gif b/jarmon-style/prev.gif new file mode 120000 index 0000000..72199f2 --- /dev/null +++ b/jarmon-style/prev.gif @@ -0,0 +1 @@ +../../graph/jarmon-git/docs/examples/assets/icons/prev.gif \ No newline at end of file diff --git a/jarmon-style/style.scss b/jarmon-style/style.scss new file mode 100644 index 0000000..6e12541 --- /dev/null +++ b/jarmon-style/style.scss @@ -0,0 +1,120 @@ +.jarmon-proton { + width: 50%; + border: solid 1px black; + padding: -1px; + border-radius: 4px; + + .chartRangeControl { + .range-inputs { + display: flex; + flex-direction: row; + align-items: center; + & > * { + width: 20%; + margin: 1px; + padding: 0; + border: solid 1px #666; + border-radius: 2px; + &[type="button"] { + width: auto; + } + &[type="datetime-local"] { + width: 25%; + } + } + } + .range-preview { + display: none; + height: 32px; + width: 100%; + } + } + + .css-panes > div { + padding: 0; + padding-left: 15px; + } + + h2 { + margin: 0; + font-size: 100%; + text-align: center; + } + + .tabbed-chart-interface { + .css-panes { + height: 550px; + & > div { + height: 100%; + overflow-y: scroll; + overflow-x: hidden; + } + } + .chart-container { + &.loading .title { + background-repeat: no-repeat; + background-position: 0 50%; + background-image: url(loading.gif); + } + + .chart { + height: 125px; + width: 100%; + margin: 0 auto 0 auto; + clear: both; + + .tickLabel { + overflow:hidden; + } + + .yaxisUnitLabel { + /* Y */ + position: absolute; + top: 50%; + /* In this translateY, the 75% is: 50% for the `top:50%` overshooting + * by our `height/2`; the additional 25% accounts + * for 1 line-height being chopped off the bottom + * of the graph for the x-axis labels. */ + transform: translateY(-75%); + + /* X */ + width: 100px; + margin-left: -100px; + text-align: right; + + /* styling */ + padding: 2px; + + /* rotate */ + transform: rotate(-90deg); + width: 0; + margin-left: -10px; + } + } + + .graph-legend { + width: 100%; + padding: 2px 0; + margin: 2px auto 0; + background-color: #f7f7f7; + + .legendItem { + float: left; + cursor: pointer; + margin-right: 20px; + margin-top: 5px; + margin-left: 5px; + + .legendColorBox { + float: left; + margin-right: 5px; + } + + &.disabled { + text-decoration: line-through; + } + } + } + } + } +} -- cgit v1.2.3-2-g168b