mirror of https://gitee.com/bigwinds/arangodb
some ui improvements
This commit is contained in:
Claudius Weinberger
parent
fadb568728
commit
7d29bfcf6a
|
|
@ -40,21 +40,25 @@ ul.headerButtonList > li {
|
|||
|
||||
a.headerButton {
|
||||
float: left;
|
||||
margin-top: 0px;
|
||||
margin-top: 2px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
min-height: 19px;
|
||||
margin-right: 3px;
|
||||
min-height: 15px;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
box-shadow: none;
|
||||
background: #8AA051 !important;
|
||||
/*
|
||||
background: #8f8d8c !important;
|
||||
*/
|
||||
color:#FFFFFF !important;
|
||||
height:20px;
|
||||
width:13px;
|
||||
padding: 5px 11px 2px 9px;
|
||||
background: #ddd;
|
||||
color: #555;
|
||||
height: 17px;
|
||||
width: 9px;
|
||||
padding: 4px 9px 2px 9px;
|
||||
border: 1px solid #222;
|
||||
}
|
||||
|
||||
a.headerButton:hover {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a.paginationButton, ul.arangoPagination a {
|
||||
|
|
@ -63,11 +67,16 @@ a.paginationButton, ul.arangoPagination a {
|
|||
|
||||
/* better look of some icons */
|
||||
a.headerButton .icon_arangodb_filter {
|
||||
top: 1px !important;
|
||||
top: 3px !important;
|
||||
}
|
||||
|
||||
a.headerButton .icon_arangodb_import {
|
||||
top: -1px !important;
|
||||
top: 1px !important;
|
||||
}
|
||||
|
||||
a.headerButton .icon_arangodb_checklist {
|
||||
top: 3px !important;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
a.headerButton .icon_arangodb_arrowleft,
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@
|
|||
|
||||
.span3 h5 {
|
||||
font-family: 'Open Sans', sans-serif !important;
|
||||
font-weight: 500;
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
|
|
@ -42,29 +43,27 @@
|
|||
|
||||
.span3 .ICON {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
margin-top: 5px;
|
||||
margin-right: 5px;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
font-size: 25px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.span3 .ICON:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.span3 .glyphicon-edit {
|
||||
margin-top: 4px !important;
|
||||
font-size: 19.5px;
|
||||
}
|
||||
|
||||
.span3 .ICON{
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.span3 .spanInfo {
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
.span3 .ICON:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.spanDisabled {
|
||||
right: 25px !important;
|
||||
opacity: 0.2 !important;
|
||||
|
|
@ -81,4 +80,5 @@
|
|||
|
||||
.badge, .label, .btn {
|
||||
text-shadow: none !important;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
#newCollection {
|
||||
position: relative;
|
||||
margin-left: 22px;
|
||||
font-size: 28px;
|
||||
font-size: 22px;
|
||||
margin-top: -5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
|
@ -35,7 +35,8 @@
|
|||
}
|
||||
|
||||
.thumbnails li {
|
||||
background-color: #f4f3f3;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
/* #f4f3f3; */
|
||||
}
|
||||
|
||||
.thumbnails a.add {
|
||||
|
|
@ -48,7 +49,7 @@
|
|||
.thumbnails .icon {
|
||||
padding-right:5px;
|
||||
padding-left: 5px;
|
||||
padding-top: 5px;
|
||||
padding-top: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -115,11 +115,11 @@
|
|||
}
|
||||
|
||||
.nv-axislabel {
|
||||
margin-left: 20px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.nv-axisMaxMin > text {
|
||||
font: 10px sans-serif;
|
||||
/* font: 10px 'Open Sans', sans-serif; */
|
||||
}
|
||||
|
||||
.svgCollections {
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
}
|
||||
|
||||
.svgClass {
|
||||
height: 155px;
|
||||
height: 142px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
|
|
@ -166,7 +166,7 @@ li:hover h6, li.hover h6 {
|
|||
}
|
||||
|
||||
.boxHeader h6 {
|
||||
opacity: 0.8;
|
||||
/* opacity: 0.8; */
|
||||
padding-top: 0 !important;
|
||||
color: black;
|
||||
margin-left: 5px;
|
||||
|
|
@ -207,7 +207,7 @@ li:hover h6, li.hover h6 {
|
|||
}
|
||||
|
||||
.nv-x .nv-axislabel {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nv-point {
|
||||
|
|
@ -525,6 +525,12 @@ li:hover h6, li.hover h6 {
|
|||
font-weight: 400;
|
||||
}
|
||||
|
||||
#dbThumbnailsIn .dashboardH6 {
|
||||
opacity: 1.0 !important;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
.svgClass{margin-top: 10px !important;}
|
||||
.statSingleClient{margin-top: 10.5px !important;}
|
||||
|
|
@ -532,8 +538,10 @@ li:hover h6, li.hover h6 {
|
|||
}
|
||||
|
||||
.nvd3 .nv-axis .nv-axisMaxMin text {
|
||||
/*
|
||||
font-weight: 400;
|
||||
font-size: 12px !important;
|
||||
*/
|
||||
}
|
||||
|
||||
.nvd3 .nv-wrap .nv-axis:last-child {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* Sets the default values shared for content views*/
|
||||
#content {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
background-color: rgba(0, 0, 0, 0.0675);
|
||||
margin-top: 25px;
|
||||
margin-bottom: 33px;
|
||||
min-height: 80px;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ div.headerBar {
|
|||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 5px;
|
||||
background-color: #686766;
|
||||
color: #FFFFFF;
|
||||
height: 36px;
|
||||
|
|
|
|||
|
|
@ -259,9 +259,9 @@ button {
|
|||
}
|
||||
|
||||
li a [class^="icon_arangodb"], li a [class*=" icon_arangodb"] {
|
||||
font-size: 22px;
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
right: 4px;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -93,11 +93,15 @@ svg {
|
|||
|
||||
|
||||
svg text {
|
||||
font: normal 12px Arial;
|
||||
font-weight: 300;
|
||||
font-size: 10px;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
svg .title {
|
||||
font: bold 14px Arial;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
.nvd3 .nv-background {
|
||||
|
|
@ -170,7 +174,6 @@ svg .title {
|
|||
}
|
||||
|
||||
.nvd3 .nv-axis .nv-axisMaxMin text {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nvd3 .x .nv-axis .nv-axisMaxMin text,
|
||||
|
|
@ -179,8 +182,6 @@ svg .title {
|
|||
text-anchor: middle
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**********
|
||||
* Brush
|
||||
*/
|
||||
|
|
@ -278,7 +279,7 @@ svg .title {
|
|||
}
|
||||
|
||||
.nvd3.nv-pie .hover path {
|
||||
fill-opacity: .7;
|
||||
fill-opacity: .8;
|
||||
/*
|
||||
stroke-width: 6px;
|
||||
stroke-opacity: 1;
|
||||
|
|
@ -296,7 +297,7 @@ svg .title {
|
|||
|
||||
.nvd3 .nv-groups path.nv-line {
|
||||
fill: none;
|
||||
stroke-width: 2.5px;
|
||||
stroke-width: 1.25px;
|
||||
/*
|
||||
stroke-linecap: round;
|
||||
shape-rendering: geometricPrecision;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
</div>
|
||||
|
||||
<div class="plain">
|
||||
<img src="<%= attributes.picture %>" height="60" width="60" alt="" class="icon">
|
||||
<img src="<%= attributes.picture %>" height="50" width="50" alt="" class="icon">
|
||||
<span class="badge badge-success <%= attributes.status %>"><div class="cornered"><%= attributes.status %></div></span>
|
||||
|
||||
<h5 class="collectionName">
|
||||
|
|
|
|||
|
|
@ -505,32 +505,38 @@
|
|||
|
||||
if (self.detailGraph === identifier) {
|
||||
d3.select("#detailGraphChart svg")
|
||||
.call(chart)
|
||||
.datum([{
|
||||
values: self.seriesData[identifier].values,
|
||||
key: identifier,
|
||||
color: "#8AA051"
|
||||
}])
|
||||
.transition().duration(500);
|
||||
.call(chart)
|
||||
.datum([{
|
||||
values: self.seriesData[identifier].values,
|
||||
key: identifier,
|
||||
color: "#8aa14c"
|
||||
}])
|
||||
.attr("stroke-width", "0.5")
|
||||
.transition().duration(500);
|
||||
}
|
||||
|
||||
|
||||
//disable ticks/label for small charts
|
||||
d3.select("#" + identifier + "Chart svg")
|
||||
.call(chart)
|
||||
.datum([ {
|
||||
values: self.seriesData[identifier].values,
|
||||
key: identifier,
|
||||
color: "#8AA051" }
|
||||
color: "#8aa14c" }
|
||||
])
|
||||
.transition().duration(500);
|
||||
.attr("stroke-width", "0.5")
|
||||
.transition().duration(500);
|
||||
|
||||
// Claudius: hide y-axis labels for small charts
|
||||
$('#' + identifier + ' .nv-y.nv-axis text').attr('display', 'none');
|
||||
});
|
||||
|
||||
this.loadGraphState();
|
||||
|
||||
// #8AA051
|
||||
//fix position for last x-value label in detailgraph
|
||||
$('.nv-x.nv-axis .nvd3.nv-wrap.nv-axis:last-child text').attr('x','-5');
|
||||
//fix position of small graphs
|
||||
$('.svgClass .nv-lineChart').attr('transform','translate(5,5)');
|
||||
|
||||
},
|
||||
|
||||
calculateSeries: function (flush) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue