QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-06-06 16:19:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ui] hack bootswatch/cosmo theme to get better tabs for sql-lab (and other things) (#975)

Browse Source 
* start hacking cosmo theme and fixing small ui bugs on pages.

* straighten up welcome page

* fix tab styling

* remove paper theme files

* add tables to docs

* make alerts lighter
This commit is contained in:
Alanna Scott
2016-08-18 23:49:31 -07:00
committed by GitHub
parent 23a5463208
commit 30ef8eba37
14 changed files with 2022 additions and 1558 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
caravel/assets/stylesheets/caravel.css
View File

@@ -191,16 +191,7 @@ div.widget .slice_container {
overflow: auto;
}
.alert a:not(.close) {
color: gray !important;
}
.navbar .alert {
padding: 5px 10px;
margin-top: 15px;
}
.panel-title h5 {
margin-top: 0px;
margin-bottom: 10px;
}

6
caravel/assets/stylesheets/explore.css
View File

@@ -19,9 +19,5 @@
.star-edit-icons {
padding-left: 10px;
}
.slice-meta-controls {
margin-top: -5px;
margin-right: -5px;
font-size: 50%;
}

659
caravel/assets/stylesheets/less/bootswatch.less
View File

@@ -1,659 +0,0 @@
// Paper 3.3.5
// Bootswatch
// -----------------------------------------------------
@web-font-path: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700";
.web-font(@path) {
@import url("@{path}");
}
.web-font(@web-font-path);
// Navbar =====================================================================
.navbar {
border: none;
&-brand {
font-size: 24px;
padding: 17px 15px!important;
}
&-inverse {
.navbar-form {
input[type=text],
input[type=password] {
color: #fff;
.placeholder(@navbar-inverse-link-color);
&:focus {
}
}
}
}
}
.navbar-inverse .navbar-nav > li > a {
color: #333;
}
// Buttons ====================================================================
#btn(@class,@bg) {
.btn-@{class} {
background-size: 200%;
background-position: 50%;
border: 1px solid #AAA;
&:focus {
background-color: @bg;
outline:0;
}
&:hover,
&:active:hover {
background-color: darken(@bg, 12%);
border: 1px solid #888;
.box-shadow(0px 0px 2px rgba(0,0,0,.4));
}
&:active {
background-color: darken(@bg, 12%);
#gradient > .radial(darken(@bg, 12%) 10%, @bg 11%);
background-size: 1000%;
}
}
}
#btn(default,@btn-default-bg);
#btn(primary,@btn-primary-bg);
#btn(success,@btn-success-bg);
#btn(info,@btn-info-bg);
#btn(warning,@btn-warning-bg);
#btn(danger,@btn-danger-bg);
#btn(link,#fff);
.btn-group {
padding: 5px;
}
.btn {
text-transform: uppercase;
border: 1px solid #AAA;
.transition(all 0.4s);
&-link {
border-radius: @btn-border-radius-base;
color: @btn-default-color;
&:hover,
&:focus {
color: @btn-default-color;
text-decoration: none;
}
}
&-default {
&.disabled {
background-color: rgba(0, 0, 0, 0.3);
color: rgba(0, 0, 0, 0.4);
opacity: 1;
}
}
}
.btn-group {
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
margin-left: -2;
}
&-vertical {
> .btn + .btn,
> .btn + .btn-group,
> .btn-group + .btn,
> .btn-group + .btn-group {
margin-top: 0;
}
}
}
// Typography =================================================================
body {
-webkit-font-smoothing: antialiased;
letter-spacing: .1px;
}
p {
margin: 0 0 1em;
}
input,
button {
-webkit-font-smoothing: antialiased;
letter-spacing: .1px;
}
tbody a {
.transition(all 0.2s);
text-decoration: underline;
}
// Tables =====================================================================
.table-hover {
> tbody > tr,
> tbody > tr > th,
> tbody > tr > td {
.transition(all 0.2s);
}
}
// Forms ======================================================================
label {
font-weight: normal;
}
textarea,
textarea.form-control,
input.form-control,
input[type=text],
input[type=password],
input[type=email],
input[type=number],
[type=text].form-control,
[type=password].form-control,
[type=email].form-control,
[type=tel].form-control,
[contenteditable].form-control {
padding: 0;
border: none;
border-radius: 0;
-webkit-appearance: none;
font-size: 16px;
&:focus {
}
&[disabled],
&[readonly] {
.box-shadow(none);
border-bottom: 1px dotted #ddd;
}
&.input {
&-sm {
font-size: @font-size-small;
}
&-lg {
font-size: @font-size-large;
}
}
}
select,
select.form-control {
border: 0;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-left: 0;
padding-right: 0\9; // remove padding for < ie9 since default arrow can't be removed
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAJ1BMVEVmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmaP/QSjAAAADHRSTlMAAgMJC0uWpKa6wMxMdjkoAAAANUlEQVR4AeXJyQEAERAAsNl7Hf3X6xt0QL6JpZWq30pdvdadme+0PMdzvHm8YThHcT1H7K0BtOMDniZhWOgAAAAASUVORK5CYII=);
background-size: 13px;
background-repeat: no-repeat;
background-position: right center;
font-size: 16px;
line-height: 1.5;
&::-ms-expand {
display: none;
}
&.input {
&-sm {
font-size: @font-size-small;
}
&-lg {
font-size: @font-size-large;
}
}
&:focus {
.box-shadow(inset 0 -2px 0 @brand-primary);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAJ1BMVEUhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISF8S9ewAAAADHRSTlMAAgMJC0uWpKa6wMxMdjkoAAAANUlEQVR4AeXJyQEAERAAsNl7Hf3X6xt0QL6JpZWq30pdvdadme+0PMdzvHm8YThHcT1H7K0BtOMDniZhWOgAAAAASUVORK5CYII=);
}
&[multiple] {
background: none;
}
}
.radio,
.radio-inline,
.checkbox,
.checkbox-inline {
label {
padding-left: 25px;
}
input[type="radio"],
input[type="checkbox"] {
margin-left: -25px;
}
}
input[type="radio"],
.radio input[type="radio"],
.radio-inline input[type="radio"] {
position: relative;
margin-top: 6px;
margin-right: 4px;
vertical-align: top;
border: none;
background-color: transparent;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
&:focus {
outline: none;
}
&:before,
&:after {
content: "";
display: block;
width: 18px;
height: 18px;
border-radius: 50%;
.transition(240ms);
}
&:before {
position: absolute;
left: 0;
top: -3px;
background-color: @brand-primary;
.scale(0);
}
&:after {
position: relative;
top: -3px;
border: 2px solid @gray;
}
&:checked:before {
.scale(0.5);
}
&:disabled:checked:before {
background-color: @gray-light;
}
&:checked:after {
border-color: @brand-primary;
}
&:disabled:after,
&:disabled:checked:after {
border-color: @gray-light;
}
}
input[type="checkbox"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
position: relative;
border: none;
margin-bottom: -4px;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
&:focus {
outline: none;
}
&:focus:after {
border-color: @brand-primary;
}
&:after {
content: "";
display: block;
width: 18px;
height: 18px;
margin-top: -2px;
margin-right: 5px;
border: 1px solid #333;
border-radius: 2px;
.transition(240ms);
}
&:checked:before {
content: "";
position: absolute;
top: 0;
left: 6px;
display: table;
width: 6px;
height: 12px;
border: 2px solid #333;
border-top-width: 0;
border-left-width: 0;
.rotate(45deg);
}
&:checked:after {
background-color: #FFFFFF;
border-color: #333;
}
&:disabled:after {
border-color: @gray-light;
}
&:disabled:checked:after {
background-color: @gray-light;
border-color: transparent;
}
}
.has-warning {
input:not([type=checkbox]),
.form-control,
input.form-control[readonly],
input[type=text][readonly],
[type=text].form-control[readonly],
input:not([type=checkbox]):focus,
.form-control:focus {
border-bottom: none;
.box-shadow(inset 0 -2px 0 @brand-warning);
}
}
.has-error {
input:not([type=checkbox]),
.form-control,
input.form-control[readonly],
input[type=text][readonly],
[type=text].form-control[readonly],
input:not([type=checkbox]):focus,
.form-control:focus {
border-bottom: none;
.box-shadow(inset 0 -2px 0 @brand-danger);
}
}
.has-success {
input:not([type=checkbox]),
.form-control,
input.form-control[readonly],
input[type=text][readonly],
[type=text].form-control[readonly],
input:not([type=checkbox]):focus,
.form-control:focus {
border-bottom: none;
.box-shadow(inset 0 -2px 0 @brand-success);
}
}
// Remove the Bootstrap feedback styles for input addons
.input-group-addon {
.has-warning &, .has-error &, .has-success & {
color: @input-color;
border-color: @input-group-addon-border-color;
background-color: @input-group-addon-bg;
}
}
// Navs =======================================================================
.nav-tabs {
> li > a,
> li > a:hover,
> li > a:focus {
padding: 3px 10px;
background-color: #ddd;
border: 1px solid #aaa;
color: #888;
margin-right: 1px;
border-radius: 5px 5px 0px 0px;
.transition(all 0.2s);
&:hover {
margin-right: 1px;
border-color: #aaa;
background-color: #eee;
color: black;
}
}
& > li.active > a,
& > li.active > a:hover,
& > li.active > a:focus {
padding: 3px 10px;
border: 1px solid #aaa;
border-radius: 5px 5px 0px 0px;
color: @brand-primary;
background-color: #fff;
margin-right: 1px;
&:hover {
color: @brand-primary;
}
}
& > li.disabled > a {
}
&.nav-justified {
& > li > a,
& > li > a:hover,
& > li > a:focus,
& > .active > a,
& > .active > a:hover,
& > .active > a:focus {
border: none;
}
}
.dropdown-menu {
margin-top: 0;
}
}
.dropdown-menu {
margin-top: 0;
border: none;
}
// Indicators =================================================================
.alert {
border: none;
color: #fff;
&-success {
background-color: @alert-success-bg;
color: @alert-success-text;
border: @alert-success-border;
}
&-info {
background-color: @alert-info-bg;
color: @alert-info-text;
border: @alert-info-border;
}
&-warning {
background-color: @alert-warning-bg;
color: @alert-warning-text;
border: @alert-warning-border;
}
&-danger {
background-color: @alert-danger-bg;
color: @alert-danger-text;
border: @alert-danger-border;
}
a:not(.close),
.alert-link {
color: #fff;
font-weight: bold;
}
.close {
color: #fff;
}
}
.badge {
padding: 4px 6px 4px;
}
.progress {
position: relative;
z-index: 1;
height: 6px;
border-radius: 0;
.box-shadow(none);
&-bar {
.box-shadow(none);
&:last-child {
border-radius: 0 3px 3px 0;
}
&:last-child {
&:before {
display: block;
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
z-index: -1;
background-color: lighten(@progress-bar-bg, 35%);
}
}
&-success:last-child.progress-bar:before {
background-color: lighten(@brand-success, 35%);
}
&-info:last-child.progress-bar:before {
background-color: lighten(@brand-info, 45%);
}
&-warning:last-child.progress-bar:before {
background-color: lighten(@brand-warning, 35%);
}
&-danger:last-child.progress-bar:before {
background-color: lighten(@brand-danger, 25%);
}
}
}
// Progress bars ==============================================================
// Containers =================================================================
.close {
font-size: 34px;
font-weight: 300;
line-height: 24px;
opacity: 0.6;
.transition(all 0.2s);
&:hover {
opacity: 1;
}
}
.list-group {
&-item {
padding: 15px;
}
&-item-text {
color: @gray-light;
}
}
.well {
border-radius: 0;
.box-shadow(none);
}
.panel {
border: none;
border-radius: 0;
box-shadow: none;
&-heading {
border-bottom: none;
}
&-footer {
border-top: none;
}
}
.panel > .panel-heading {
border-bottom: 1px solid #aaa;
background-color: #fff;
margin: 0 1em;
padding: 1em 0 .5em 0;
font-weight: bold;
}
.panel-default > .panel-heading {
border-bottom: 1px solid #aaa;
}
.panel-info > .panel-heading {
border-bottom: 1px solid @info-color;
color: @info-color;
}
.panel-danger > .panel-heading {
border-bottom: 1px solid @danger-color;
color: @danger-color;
}
.panel-warning > .panel-heading {
border-bottom: 1px solid @warning-color;
color: @warning-color;
}
.panel-success > .panel-heading {
border-bottom: 1px solid @success-color;
color: @success-color;
}
.popover {
border: none;
}
.carousel {
&-caption {
h1, h2, h3, h4, h5, h6 {
color: inherit;
}
}
}

334
caravel/assets/stylesheets/less/cosmo/bootswatch.less Normal file
View File

@@ -0,0 +1,334 @@
// Forked Cosmo 3.3.7
// Bootswatch
// -----------------------------------------------------
@web-font-path: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700";
.web-font(@path) {
@import url("@{path}");
}
.web-font(@web-font-path);
// Navbar =====================================================================
.navbar {
border: none;
&-inverse {
.badge {
background-color: #fff;
color: @brand-primary;
}
}
}
// Buttons ====================================================================
.btn {
padding: 8px 12px 6px 12px;
}
.btn-default:hover {
background-color: #efefef;
border-color: #bbb;
}
// Typography =================================================================
body {
-webkit-font-smoothing: antialiased;
}
.text-primary,
.text-primary:hover {
color: @brand-primary;
}
.text-success,
.text-success:hover {
color: @brand-success;
}
.text-danger,
.text-danger:hover {
color: @brand-danger;
}
.text-warning,
.text-warning:hover {
color: @brand-warning;
}
.text-info,
.text-info:hover {
color: @brand-info;
}
// Tables =====================================================================
table,
.table {
a:not(.btn) {
text-decoration: underline;
}
.dropdown-menu a {
text-decoration: none;
}
.success,
.warning,
.danger,
.info {
color: #fff;
a {
color: #fff;
}
}
}
// Forms ======================================================================
.has-warning {
.help-block,
.control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline,
&.radio label,
&.checkbox label,
&.radio-inline label,
&.checkbox-inline label,
.form-control-feedback {
color: @brand-warning;
}
.form-control,
.form-control:focus,
.input-group-addon {
border: 1px solid @brand-warning;
}
}
.has-error {
.help-block,
.control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline,
&.radio label,
&.checkbox label,
&.radio-inline label,
&.checkbox-inline label,
.form-control-feedback {
color: @brand-danger;
}
.form-control,
.form-control:focus,
.input-group-addon {
border: 1px solid @brand-danger;
}
}
.has-success {
.help-block,
.control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline,
&.radio label,
&.checkbox label,
&.radio-inline label,
&.checkbox-inline label,
.form-control-feedback {
color: @brand-success;
}
.form-control,
.form-control:focus,
.input-group-addon {
border: 1px solid @brand-success;
}
}
.label-default {
color: @btn-default-color;
}
// Navs =======================================================================
.nav-pills {
& > li > a {
border-radius: 0;
}
}
.dropdown-menu {
& > li > a:hover,
& > li > a:focus {
background-image: none;
}
}
// Indicators =================================================================
.close {
text-decoration: none;
text-shadow: none;
opacity: 0.4;
&:hover,
&:focus {
opacity: 1;
}
}
.alert {
border: none;
}
.alert-link {
text-decoration: underline;
}
.alert-info .alert-link {
color: @alert-info-text;
}
.alert-danger .alert-link {
color: @alert-danger-text;
}
.alert-warning .alert-link {
color: @alert-warning-text;
}
.alert-success .alert-link {
color: @alert-success-text;
}
.label {
border-radius: 0;
}
label {
font-weight: normal;
}
// Progress bars ==============================================================
.progress {
height: 8px;
.box-shadow(none);
.progress-bar {
font-size: 8px;
line-height: 8px;
}
}
// Containers =================================================================
.panel {
border: none;
&-heading,
&-footer {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
&-default {
.panel-heading {
padding: 15px 15px 0 15px;
}
.panel-title {
font-size: 14px;
font-weight: bold;
padding-bottom: 5px;
border-bottom: 1px solid @gray-light;
h1, h2, h3, h4, h5, h6 {
margin: 10px 0 0 0;
font-weight: bold;
}
}
.close {
color: @text-color;
}
}
}
a.list-group-item {
&-success {
&.active {
background-color: @state-success-bg;
}
&.active:hover,
&.active:focus {
background-color: darken(@state-success-bg, 5%);
}
}
&-warning {
&.active {
background-color: @state-warning-bg;
}
&.active:hover,
&.active:focus {
background-color: darken(@state-warning-bg, 5%);
}
}
&-danger {
&.active {
background-color: @state-danger-bg;
}
&.active:hover,
&.active:focus {
background-color: darken(@state-danger-bg, 5%);
}
}
}
.modal {
.close {
color: @text-color;
}
}
.popover {
color: @text-color;
}
// Tabs ==============================================================
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
background-color: #fff;
font-weight: bold;
}
.tab-content {
padding-top: 20px;
}
// Tables ==============================================================
.table {
.info {
color: @state-info-text;
}
.danger {
color: @state-danger-text;
}
.warning {
color: @state-warning-text;
}
.success {
color: @state-success-text;
}
}

62
caravel/assets/stylesheets/less/cosmo/cosmoTheme.js Normal file
View File

@@ -0,0 +1,62 @@
(function(){
$(window).scroll(function () {
var top = $(document).scrollTop();
$('.splash').css({
'background-position': '0px -'+(top/3).toFixed(2)+'px'
});
if(top > 50)
$('#home > .navbar').removeClass('navbar-transparent');
else
$('#home > .navbar').addClass('navbar-transparent');
});
$("a[href='#']").click(function(e) {
e.preventDefault();
});
var $button = $("<div id='source-button' class='btn btn-primary btn-xs'>&lt; &gt;</div>").click(function(){
var html = $(this).parent().html();
html = cleanSource(html);
$("#source-modal pre").text(html);
$("#source-modal").modal();
});
$('.bs-component [data-toggle="popover"]').popover();
$('.bs-component [data-toggle="tooltip"]').tooltip();
$(".bs-component").hover(function(){
$(this).append($button);
$button.show();
}, function(){
$button.hide();
});
function cleanSource(html) {
html = html.replace(/×/g, "&times;")
.replace(/«/g, "&laquo;")
.replace(/»/g, "&raquo;")
.replace(/←/g, "&larr;")
.replace(/→/g, "&rarr;");
var lines = html.split(/\n/);
lines.shift();
lines.splice(-1, 1);
var indentSize = lines[0].length - lines[0].trim().length,
re = new RegExp(" {" + indentSize + "}");
lines = lines.map(function(line){
if (line.match(re)) {
line = line.substring(indentSize);
}
return line;
});
lines = lines.join("\n");
return lines;
}
})();

343
caravel/assets/stylesheets/less/variables.less → caravel/assets/stylesheets/less/cosmo/variables.less
View File

@@ -1,60 +1,24 @@
// Modified from Bootswatch Paper 3.3.6
// Forked Cosmo 3.3.7
// Variables
// --------------------------------------------------
//== Colors
//
//## Airbnb colors
@rausch: #ff5a5f; // coral
@kazan: #007a87; // dark teal
@hackberry: #7b0051; // purple
@babu: #00d1c1; // light teal
@lima: #8ce071; // bright green
@beach: #ffb400; // yellow
@ebisu: #ffaa91; // peach
@tirol: #b4a76c; // khaki
@foggy: #9CA299; // dark grey
@hof: #565A5C; // light grey
//## Gray and brand colors for use across Bootstrap.
@gray-base: #000;
@gray-darker: lighten(@gray-base, 13.5%); // #222
@gray-dark: #212121;
@gray: #333;
@gray-light: #bbb;
@gray-lighter: lighten(@gray-base, 93.5%); // #eee
@gray-dark: lighten(@gray-base, 20%); // #333
@gray: lighten(@gray-base, 33.5%); // #555
@gray-light: lighten(@gray-base, 70%); //
@gray-lighter: lighten(@gray-base, 90%); // #eee
@brand-primary: #000;
@brand-success: darken(@lima, 25%);
@brand-warning: darken(@beach, 10%);
@brand-info: darken(@babu, 10%);
@brand-danger: darken(@rausch, 15%);
@default-color: #444;
@default-bg: #fff;
@default-border: transparent;
@primary-color: white;
@primary-bg: @brand-primary;
@primary-border: transparent;
@success-color: @brand-success;
@success-bg: lighten(@brand-success, 50%);
@success-border: transparent;
@info-color: @brand-info;
@info-bg: lighten(@brand-info, 60%);
@info-border: transparent;
@warning-color: @brand-warning;
@warning-bg: lighten(@brand-warning, 50%);
@warning-border: transparent;
@danger-color: @brand-danger;
@danger-bg: lighten(@brand-danger, 40%);
@danger-border: transparent;
@brand-primary: #515152;
@brand-success: #4AC15F;
@brand-info: #2AB7CA;
@brand-warning: #FED766;
@brand-danger: #FE4A49;
//== Scaffolding
//
@@ -63,7 +27,7 @@
//** Background color for `<body>`.
@body-bg: #EDEDED;
//** Global text color on `<body>`.
@text-color: @gray;
@text-color: @gray-dark;
//** Global textual link color.
@link-color: @brand-primary;
@@ -78,32 +42,33 @@
//## Font, line-height, and color for body text, headings, and more.
@font-family-sans-serif: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 12px;
@font-size-large: ceil((@font-size-base * 1.25));
@font-size-small: ceil((@font-size-base * 0.75));
@font-size-base: 15px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: 56px;
@font-size-h2: 45px;
@font-size-h3: 34px;
@font-size-h4: 24px;
@font-size-h5: 20px;
@font-size-h6: 12px;
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
//** Unit-less `line-height` for use in components like buttons.
@line-height-base: 1.846; // 20/14
@line-height-base: 1.428571429; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
//** By default, this inherits from the `<body>`.
@headings-font-family: inherit;
@headings-font-weight: 900;
@headings-font-family: @font-family-base;
@headings-font-weight: 300;
@headings-line-height: 1.1;
@headings-color: #333;
@headings-color: inherit;
//== Iconography
@@ -122,11 +87,11 @@
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
@padding-base-vertical: 6px;
@padding-base-horizontal: 16px;
@padding-base-vertical: 10px;
@padding-base-horizontal: 18px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-large-vertical: 18px;
@padding-large-horizontal: 30px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@@ -137,16 +102,16 @@
@line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
@line-height-small: 1.5;
@border-radius-base: 2px;
@border-radius-large: 2px;
@border-radius-small: 2px;
@border-radius-base: 0;
@border-radius-large: 0;
@border-radius-small: 0;
//** Global color for active items (e.g., navs or dropdowns).
@component-active-color: #fff;
//** Global background color for active items (e.g., navs or dropdowns).
@component-active-bg: @brand-primary;
//** Width of the `border` for generating carets that indicator dropdowns.
//** Width of the `border` for generating carets that indicate dropdowns.
@caret-width-base: 4px;
//** Carets increase slightly in size for larger components.
@caret-width-large: 5px;
@@ -166,7 +131,7 @@
//** Background color used for `.table-striped`.
@table-bg-accent: #f9f9f9;
//** Background color used for `.table-hover`.
@table-bg-hover: @gray-lighter;
@table-bg-hover: #f5f5f5;
@table-bg-active: @table-bg-hover;
//** Border color for table and cell borders.
@@ -179,29 +144,29 @@
@btn-font-weight: normal;
@btn-default-color: @default-color;
@btn-default-bg: @default-bg;
@btn-default-border: @default-border;
@btn-primary-color: #fff;
@btn-primary-bg: @brand-primary;
@btn-primary-border: @btn-primary-bg;
@btn-primary-color: black;
@btn-primary-bg: #DDD;
@btn-primary-border: @primary-border;
@btn-default-color: @gray-dark;
@btn-default-bg: #fff;
@btn-default-border: @gray-light;
@btn-success-color: @success-color;
@btn-success-bg: @success-bg;
@btn-success-border: @success-border;
@btn-success-color: @btn-primary-color;
@btn-success-bg: @brand-success;
@btn-success-border: @btn-success-bg;
@btn-info-color: @info-color;
@btn-info-bg: @info-bg;
@btn-info-border: @info-border;
@btn-info-color: @btn-primary-color;
@btn-info-bg: @brand-info;
@btn-info-border: @btn-info-bg;
@btn-warning-color: @warning-color;
@btn-warning-bg: @warning-bg;
@btn-warning-border: @warning-border;
@btn-warning-color: @btn-default-color;
@btn-warning-bg: @brand-warning;
@btn-warning-border: @btn-warning-bg;
@btn-danger-color: @danger-color;
@btn-danger-bg: @danger-bg;
@btn-danger-border: @danger-border;
@btn-danger-color: @btn-primary-color;
@btn-danger-bg: @brand-danger;
@btn-danger-border: @btn-danger-bg;
@btn-link-disabled-color: @gray-light;
@@ -216,14 +181,14 @@
//##
//** `<input>` background color
@input-bg: transparent;
@input-bg: #fff;
//** `<input disabled>` background color
@input-bg-disabled: transparent;
@input-bg-disabled: @gray-lighter;
//** Text color for `<input>`s
@input-color: @gray;
@input-color: @text-color;
//** `<input>` border color
@input-border: transparent;
@input-border: #ccc;
// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
//** Default `.form-control` border radius
@@ -250,11 +215,11 @@
//** `.form-group` margin
@form-group-margin-bottom: 15px;
@legend-color: @gray-dark;
@legend-color: @text-color;
@legend-border-color: #e5e5e5;
//** Background color for textual input addons
@input-group-addon-bg: transparent;
@input-group-addon-bg: @gray-lighter;
//** Border color for textual input addons
@input-group-addon-border-color: @input-border;
@@ -276,14 +241,14 @@
@dropdown-divider-bg: #e5e5e5;
//** Dropdown link text color.
@dropdown-link-color: @text-color;
@dropdown-link-color: @gray-dark;
//** Hover color for dropdown links.
@dropdown-link-hover-color: darken(@gray-dark, 5%);
@dropdown-link-hover-color: #fff;
//** Hover background for dropdown links.
@dropdown-link-hover-bg: @gray-lighter;
@dropdown-link-hover-bg: @component-active-bg;
//** Active dropdown menu item text color.
@dropdown-link-active-color: @component-active-color;
@dropdown-link-active-color: #fff;
//** Active dropdown menu item background color.
@dropdown-link-active-bg: @component-active-bg;
@@ -294,7 +259,7 @@
@dropdown-header-color: @gray-light;
//** Deprecated `@dropdown-caret-color` as of v3.1.0
@dropdown-caret-color: @gray-light;
@dropdown-caret-color: #000;
//-- Z-index master list
@@ -359,7 +324,7 @@
//** Number of columns in the grid.
@grid-columns: 12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 30px;
@grid-gutter-width: 20px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-sm-min;
@@ -392,60 +357,60 @@
//##
// Basics of a navbar
@navbar-height: 64px;
@navbar-height: 50px;
@navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height: 340px;
@navbar-default-color: @gray-light;
@navbar-default-bg: #fff;
@navbar-default-border: transparent;
@navbar-default-color: #fff;
@navbar-default-bg: @gray-darker;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
// Navbar links
@navbar-default-link-color: @gray;
@navbar-default-link-hover-color: @gray-dark;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: @gray-dark;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 30%);
@navbar-default-link-color: #fff;
@navbar-default-link-hover-color: #fff;
@navbar-default-link-hover-bg: darken(@navbar-default-bg, 10%);
@navbar-default-link-active-color: @navbar-default-link-hover-color;
@navbar-default-link-active-bg: @navbar-default-link-hover-bg;
@navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent;
// Navbar brand label
@navbar-default-brand-color: @navbar-default-link-color;
@navbar-default-brand-hover-color: @navbar-default-link-hover-color;
@navbar-default-brand-hover-bg: transparent;
@navbar-default-brand-hover-color: #fff;
@navbar-default-brand-hover-bg: none;
// Navbar toggle
@navbar-default-toggle-hover-bg: transparent;
@navbar-default-toggle-icon-bar-bg: rgba(0,0,0,0.5);
@navbar-default-toggle-hover-bg: @navbar-default-link-hover-bg;
@navbar-default-toggle-icon-bar-bg: #fff;
@navbar-default-toggle-border-color: transparent;
//=== Inverted navbar
// Reset inverted navbar basics
@navbar-inverse-color: @gray-light;
@navbar-inverse-bg: white;
@navbar-inverse-color: @gray-dark;
@navbar-inverse-bg: #fff;
@navbar-inverse-border: transparent;
// Inverted navbar links
@navbar-inverse-link-color: #888;
@navbar-inverse-link-hover-color: #111;
@navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-color: @gray-dark;
@navbar-inverse-link-hover-color: @gray-dark;
@navbar-inverse-link-hover-bg: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-disabled-color: #444;
@navbar-inverse-link-active-bg: @navbar-inverse-link-hover-bg;
@navbar-inverse-link-disabled-color: @gray-lighter;
@navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar brand label
@navbar-inverse-brand-color: @navbar-inverse-link-color;
@navbar-inverse-brand-hover-color: @navbar-inverse-link-hover-color;
@navbar-inverse-brand-hover-bg: transparent;
@navbar-inverse-brand-hover-color: @gray-darker;
@navbar-inverse-brand-hover-bg: none;
// Inverted navbar toggle\
@navbar-inverse-toggle-hover-bg: transparent;
@navbar-inverse-toggle-icon-bar-bg: rgba(0,0,0,0.5);
// Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: @navbar-inverse-link-hover-bg;
@navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: transparent;
@@ -461,15 +426,15 @@
@nav-disabled-link-hover-color: @gray-light;
//== Tabs
@nav-tabs-border-color: transparent;
@nav-tabs-border-color: #ddd;
@nav-tabs-link-hover-border-color: @gray-lighter;
@nav-tabs-active-link-hover-bg: transparent;
@nav-tabs-active-link-hover-bg: @body-bg;
@nav-tabs-active-link-hover-color: @gray;
@nav-tabs-active-link-hover-border-color: transparent;
@nav-tabs-active-link-hover-border-color: #ddd;
@nav-tabs-justified-link-border-color: @nav-tabs-border-color;
@nav-tabs-justified-link-border-color: #ddd;
@nav-tabs-justified-active-link-border-color: @body-bg;
//== Pills
@@ -490,9 +455,9 @@
@pagination-hover-bg: @gray-lighter;
@pagination-hover-border: #ddd;
@pagination-active-color: #333;
@pagination-active-bg: #fff;
@pagination-active-border: #333;
@pagination-active-color: @gray-light;
@pagination-active-bg: #f5f5f5;
@pagination-active-border: #ddd;
@pagination-disabled-color: @gray-light;
@pagination-disabled-bg: #fff;
@@ -505,14 +470,14 @@
@pager-bg: @pagination-bg;
@pager-border: @pagination-border;
@pager-border-radius: 15px;
@pager-border-radius: @border-radius-base;
@pager-hover-bg: @pagination-hover-bg;
@pager-active-bg: @pagination-active-bg;
@pager-active-color: @pagination-active-color;
@pager-disabled-color: @pagination-disabled-color;
@pager-disabled-color: @gray-light;
//== Jumbotron
@@ -521,8 +486,8 @@
@jumbotron-padding: 30px;
@jumbotron-color: inherit;
@jumbotron-bg: #f9f9f9;
@jumbotron-heading-color: @headings-color;
@jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit;
@jumbotron-font-size: ceil((@font-size-base * 1.5));
@jumbotron-heading-font-size: ceil((@font-size-base * 4.5));
@@ -531,21 +496,21 @@
//
//## Define colors for form feedback states and, by default, alerts.
@state-success-text: @success-color;
@state-success-bg: @success-bg;
@state-success-border: @success-border;
@state-success-text: darken(@brand-success, 20%);
@state-success-bg: lighten(@brand-success, 35%);
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
@state-info-text: @info-color;
@state-info-bg: @info-bg;
@state-info-border: @info-border;
@state-info-text: darken(@brand-info, 22%);
@state-info-bg: lighten(@brand-info, 40%);
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
@state-warning-text: @warning-color;
@state-warning-bg: @warning-bg;
@state-warning-border: @warning-border;
@state-warning-text: darken(@brand-warning, 30%);
@state-warning-bg: lighten(@brand-warning, 20%);
@state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
@state-danger-text: @danger-color;
@state-danger-bg: @danger-bg;
@state-danger-border: @danger-border;
@state-danger-text: darken(@brand-danger, 25%);
@state-danger-bg: lighten(@brand-danger, 22%);
@state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
//== Tooltips
@@ -557,7 +522,7 @@
//** Tooltip text color
@tooltip-color: #fff;
//** Tooltip background color
@tooltip-bg: #727272;
@tooltip-bg: #000;
@tooltip-opacity: .9;
//** Tooltip arrow width
@@ -575,9 +540,9 @@
//** Popover maximum width
@popover-max-width: 276px;
//** Popover border color
@popover-border-color: transparent;
@popover-border-color: rgba(0,0,0,.2);
//** Popover fallback border color
@popover-fallback-border-color: transparent;
@popover-fallback-border-color: #ccc;
//** Popover title background color
@popover-title-bg: darken(@popover-bg, 3%);
@@ -590,7 +555,7 @@
//** Popover outer arrow width
@popover-arrow-outer-width: (@popover-arrow-width + 1);
//** Popover outer arrow color
@popover-arrow-outer-color: fadein(@popover-border-color, 7.5%);
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
//** Popover outer arrow fallback color
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
@@ -599,12 +564,18 @@
//
//##
@label-default-bg: @gray-light;
//** Default label background color
@label-default-bg: @btn-default-bg;
//** Primary label background color
@label-primary-bg: @brand-primary;
@label-success-bg: lighten(@brand-success, 30%);
@label-info-bg: lighten(@brand-info, 25%);
@label-warning-bg: lighten(@brand-warning, 30%);
@label-danger-bg: lighten(@brand-danger, 20%);
//** Success label background color
@label-success-bg: @brand-success;
//** Info label background color
@label-info-bg: @brand-info;
//** Warning label background color
@label-warning-bg: @brand-warning;
//** Danger label background color
@label-danger-bg: @brand-danger;
//** Default label text color
@label-color: #fff;
@@ -612,13 +583,12 @@
@label-link-hover-color: #fff;
//== Modals
//
//##
//** Padding applied to the modal body
@modal-inner-padding: 15px;
@modal-inner-padding: 20px;
//** Padding applied to the modal title
@modal-title-padding: 15px;
@@ -637,7 +607,7 @@
//** Modal backdrop opacity
@modal-backdrop-opacity: .5;
//** Modal header border color
@modal-header-border-color: transparent;
@modal-header-border-color: #e5e5e5;
//** Modal footer border color
@modal-footer-border-color: @modal-header-border-color;
@@ -671,13 +641,12 @@
@alert-danger-border: @state-danger-border;
//== Progress bars
//
//##
//** Background color of the whole progress component
@progress-bg: #f5f5f5;
@progress-bg: #ccc;
//** Progress bar text color
@progress-bar-color: #fff;
//** Variable for setting rounded corners on progress bar.
@@ -713,7 +682,7 @@
//** Background color of active list items
@list-group-active-bg: @component-active-bg;
//** Border color of active list elements
@list-group-active-border: @list-group-active-bg;
@list-group-active-border: @list-group-border;
//** Text color for content within active list items
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
@@ -735,7 +704,7 @@
@panel-bg: #fff;
@panel-body-padding: 15px;
@panel-heading-padding: 5px 15px 3px 0px;
@panel-heading-padding: 10px 15px;
@panel-footer-padding: @panel-heading-padding;
@panel-border-radius: @border-radius-base;
@@ -744,28 +713,28 @@
@panel-footer-bg: #f5f5f5;
@panel-default-text: @gray-dark;
@panel-default-border: #ddd;
@panel-default-heading-bg: #f5f5f5;
@panel-default-border: transparent;
@panel-default-heading-bg: #fff;
@panel-primary-text: black;
@panel-primary-border: gray;
@panel-primary-heading-bg: #eee;
@panel-primary-text: #fff;
@panel-primary-border: transparent;
@panel-primary-heading-bg: @brand-primary;
@panel-success-text: #fff;
@panel-success-border: @state-success-border;
@panel-success-heading-bg: @brand-success;
@panel-success-text: @state-success-text;
@panel-success-border: transparent;
@panel-success-heading-bg: @state-success-bg;
@panel-info-text: #fff;
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @brand-info;
@panel-info-text: @state-info-text;
@panel-info-border: transparent;
@panel-info-heading-bg: @state-info-bg;
@panel-warning-text: #fff;
@panel-warning-border: @state-warning-border;
@panel-warning-heading-bg: @brand-warning;
@panel-warning-text: @state-warning-text;
@panel-warning-border: transparent;
@panel-warning-heading-bg: @state-warning-bg;
@panel-danger-text: #fff;
@panel-danger-border: @state-danger-border;
@panel-danger-heading-bg: @brand-danger;
@panel-danger-text: @state-danger-text;
@panel-danger-border: transparent;
@panel-danger-heading-bg: @state-danger-bg;
//== Thumbnails
@@ -791,8 +760,8 @@
//
//##
@well-bg: #f9f9f9;
@well-border: transparent;
@well-bg: #f5f5f5;
@well-border: darken(@well-bg, 7%);
//== Badges
@@ -802,14 +771,14 @@
@badge-color: #fff;
//** Linked badge text color on hover
@badge-link-hover-color: #fff;
@badge-bg: @gray-light;
@badge-bg: @brand-primary;
//** Badge text color in active nav link
@badge-active-color: @link-color;
//** Badge background color in active nav link
@badge-active-bg: #fff;
@badge-font-weight: normal;
@badge-font-weight: bold;
@badge-line-height: 1;
@badge-border-radius: 10px;
@@ -851,9 +820,9 @@
//
//##
@close-font-weight: normal;
@close-color: #000;
@close-text-shadow: none;
@close-font-weight: bold;
@close-color: #fff;
@close-text-shadow: 0 1px 0 #fff;
//== Code

4
caravel/assets/stylesheets/less/index.less
View File

@@ -1,5 +1,5 @@
// Index .less, any imports here will be included in the final css build
@import "~bootstrap/less/bootstrap.less";
@import "./variables.less";
@import "./bootswatch.less";
@import "./cosmo/variables.less";
@import "./cosmo/bootswatch.less";

9
caravel/assets/stylesheets/welcome.css
View File

@@ -24,3 +24,12 @@ input {
padding: 20px;
background-color: #fff;
}
.search input {
width: 400px;
}
.search-container .fa-search {
float: left;
margin-left: -25px;
margin-top: 12px;
font-size: 18px;
}

2
caravel/templates/appbuilder/navbar.html
View File

@@ -10,7 +10,7 @@
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{appbuilder.get_url_for_index}}">
<img width="75" src="/static/assets/images/caravel.png" style="padding-top: 6px;" alt="">
<img width="75" src="/static/assets/images/caravel.png" style="padding-top: 2px;" alt="Caravel">
</a>
</div>
<div class="navbar-collapse collapse">

9
caravel/templates/caravel/dashboard.html
View File

@@ -74,11 +74,12 @@
<div class="title">
<div class="row">
<div class="col-md-8">
<h2>
{{ dashboard.dashboard_title }}
<h1>
<strong>
{{ dashboard.dashboard_title }}
</strong>
<span class="favstar" class_name="Dashboard" obj_id="{{ dashboard.id }}"></span>
</h2>
</h1>
</div>
<div class="col-md-4">
<div class="btn-group pull-right" role="group" >

319
caravel/templates/caravel/explore.html
View File

@@ -28,145 +28,147 @@
<div class="datasource container-fluid">
<form id="query" method="GET" style="display: none;">
<div id="form_container" class="col-left-fixed">
<div
id="js-query-and-save-btns"
class="query-and-save-btns-container"
data-can-add="{{ can_add }}"
></div>
<div id="form_container" class="row">
<div class="col-md-3">
<div
id="js-query-and-save-btns"
class="query-and-save-btns-container"
data-can-add="{{ can_add }}"
>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
Datasource & Chart Type
</div>
</div>
<div class="panel-body">
<div>
<!-- DATASOURCE -->
<span title="Data Source" data-toggle="tooltip">
<select id="datasource_id" class="select2">
{% for ds in datasources %}
<option url="{{ ds.explore_url }}" {{ "selected" if ds.id == datasource.id }} value="{{ ds.id }}">{{ ds.full_name }}<i class="fa fa-info"></i></option>
{% endfor %}
</select>
</span>
<a href="{{ datasource.url }}" data-toggle="tooltip" title="Edit/configure datasource">
<i class="fa fa-edit m-l-3"></i>
</a>
</div>
<br/>
<!-- CHART TYPE -->
<div title="Visualization Type" data-toggle="tooltip">
{{ form.get_field("viz_type")(class_="select2-with-images") }}
</div>
</div>
</div>
{% for fieldset in form.fieldsets %}
<div class="panel panel-default">
{% if fieldset.label %}
<div class="panel-heading">
<div class="panel-title">
{{ fieldset.label }}
{% if fieldset.description %}
<i class="fa fa-question-circle-o" data-toggle="tooltip"
data-placement="bottom"
title="{{ fieldset.description }}"></i>
{% endif %}
</div>
</div>
{% endif %}
<div class="panel-body">
{% for fieldname in fieldset.fields %}
{% if not fieldname %}
<hr/>
{% elif fieldname is string %}
{{ panofield(fieldname) }}
{% else %}
<div class="row">
<div class="form-group">
{% for name in fieldname %}
<div class="col-xs-{{ (12 / fieldname|length) | int }}">
{% if name %}
{{ panofield(name) }}
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endfor %}
<div id="filter_panel" class="panel panel-default">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
{{ _("Filters") }}
<i class="fa fa-question-circle-o" data-toggle="tooltip"
data-placement="bottom"
title="{{_("Filters are defined using comma delimited strings as in 'US,FR,Other'")}}. {{_("Leave the value field empty to filter empty strings or nulls")}}">
</i>
Datasource & Chart Type
</div>
</div>
<div class="panel-body">
<div id="flt0" style="display: none;">
<span class="">{{ form.flt_col_0(class_="form-control inc") }}</span>
<div class="row">
<span class="col col-sm-4">{{ form.flt_op_0(class_="form-control inc") }}</span>
<span class="col col-sm-6">{{ form.flt_eq_0(class_="form-control inc") }}</span>
<button type="button" class="btn btn-default btn-sm remove" aria-label="Delete filter">
<span class="fa fa-minus" aria-hidden="true"></span>
</button>
</div>
<div>
<!-- DATASOURCE -->
<span title="Data Source" data-toggle="tooltip">
<select id="datasource_id" class="select2">
{% for ds in datasources %}
<option url="{{ ds.explore_url }}" {{ "selected" if ds.id == datasource.id }} value="{{ ds.id }}">{{ ds.full_name }}<i class="fa fa-info"></i></option>
{% endfor %}
</select>
</span>
<a href="{{ datasource.url }}" data-toggle="tooltip" title="Edit/configure datasource">
<i class="fa fa-edit m-l-3"></i>
</a>
</div>
<br/>
<!-- CHART TYPE -->
<div title="Visualization Type" data-toggle="tooltip">
{{ form.get_field("viz_type")(class_="select2-with-images") }}
</div>
<div id="filters"></div>
<button type="button" id="plus" class="btn btn-default btn-sm" aria-label="Add a filter">
<span class="fa fa-plus" aria-hidden="true"></span>
<span>{{ _("Add filter") }}</span>
</button>
</div>
</div>
{% if form.having_col_0 %}
<div id="having_panel" class="panel panel-default">
{% for fieldset in form.fieldsets %}
<div class="panel panel-default">
{% if fieldset.label %}
<div class="panel-heading">
<div class="panel-title">
{{ fieldset.label }}
{% if fieldset.description %}
<i class="fa fa-question-circle-o" data-toggle="tooltip"
data-placement="bottom"
title="{{ fieldset.description }}"></i>
{% endif %}
</div>
</div>
{% endif %}
<div class="panel-body">
{% for fieldname in fieldset.fields %}
{% if not fieldname %}
<hr/>
{% elif fieldname is string %}
{{ panofield(fieldname) }}
{% else %}
<div class="row">
<div class="form-group">
{% for name in fieldname %}
<div class="col-xs-{{ (12 / fieldname|length) | int }}">
{% if name %}
{{ panofield(name) }}
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endfor %}
<div id="filter_panel" class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
Result Filters ("having" filters)
<i
class="fa fa-info-circle"
data-toggle="tooltip"
data-placement="bottom"
title="{{_("The filters to apply after post-aggregation.")}} {{_("Leave the value field empty to filter empty strings or nulls")}}">
{{ _("Filters") }}
<i class="fa fa-question-circle-o" data-toggle="tooltip"
data-placement="bottom"
title="{{_("Filters are defined using comma delimited strings as in 'US,FR,Other'")}}. {{_("Leave the value field empty to filter empty strings or nulls")}}">
</i>
</div>
</div>
<div class="panel-body">
<div id="having0" style="display: none;">
<span class="">{{ form.having_col_0(class_="form-control inc") }}</span>
<div id="flt0" style="display: none;">
<span class="">{{ form.flt_col_0(class_="form-control inc") }}</span>
<div class="row">
<span class="col col-sm-4">{{ form.having_op_0(class_="form-control inc") }}</span>
<span class="col col-sm-6">{{ form.having_eq_0(class_="form-control inc") }}</span>
<button type="button"
class="btn btn-default btn-sm remove"
aria-label="Delete filter">
<span class="fa fa-minus"
aria-hidden="true"></span>
<span class="col col-sm-4">{{ form.flt_op_0(class_="form-control inc") }}</span>
<span class="col col-sm-6">{{ form.flt_eq_0(class_="form-control inc") }}</span>
<button type="button" class="btn btn-default btn-sm remove" aria-label="Delete filter">
<span class="fa fa-minus" aria-hidden="true"></span>
</button>
</div>
</div>
<div id="filters"></div>
<button type="button" id="plus"
class="btn btn-default btn-sm"
aria-label="Add a filter">
<button type="button" id="plus" class="btn btn-default btn-sm" aria-label="Add a filter">
<span class="fa fa-plus" aria-hidden="true"></span>
<span>Add filter</span>
<span>{{ _("Add filter") }}</span>
</button>
</div>
</div>
{% endif %}
{% if form.having_col_0 %}
<div id="having_panel" class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
Result Filters ("having" filters)
<i
class="fa fa-info-circle"
data-toggle="tooltip"
data-placement="bottom"
title="{{_("The filters to apply after post-aggregation.")}} {{_("Leave the value field empty to filter empty strings or nulls")}}">
</i>
</div>
</div>
<div class="panel-body">
<div id="having0" style="display: none;">
<span class="">{{ form.having_col_0(class_="form-control inc") }}</span>
<div class="row">
<span class="col col-sm-4">{{ form.having_op_0(class_="form-control inc") }}</span>
<span class="col col-sm-6">{{ form.having_eq_0(class_="form-control inc") }}</span>
<button type="button"
class="btn btn-default btn-sm remove"
aria-label="Delete filter">
<span class="fa fa-minus"
aria-hidden="true"></span>
</button>
</div>
</div>
<div id="filters"></div>
<button type="button" id="plus"
class="btn btn-default btn-sm"
aria-label="Add a filter">
<span class="fa fa-plus" aria-hidden="true"></span>
<span>Add filter</span>
</button>
</div>
</div>
{% endif %}
{{ form.slice_id() }}
{{ form.slice_name() }}
{{ form.collapsed_fieldsets() }}
@@ -178,41 +180,44 @@
<input type="hidden" name="datasource_type" value="{{ datasource.type }}">
<input type="hidden" name="previous_viz_type" value="{{ viz.viz_type or "table" }}">
</div>
<div class="col-offset">
<div class="col-md-9">
{% block messages %}{% endblock %}
{% include 'appbuilder/flash.html' %}
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
{% if slice %}
<div class="panel-title">
<div class="row">
<div class="col-md-6">
<div class="panel-title">
<h5>
{{ slice.slice_name }}
<small class="star-edit-icons">
<span class="favstar" obj_id="{{ slice.id }}"></span>
<span>
<a
href="/slicemodelview/edit/{{ slice.id }}"
data-toggle="tooltip"
title="Edit Description"
class="edit-slice-description-icon"
>
{% if slice.description %}
<i
class="fa fa-question-circle-o"
data-toggle="tooltip"
data-placement="bottom"
title="{{ slice.description }}">
</i>
{% endif %}
<i class="fa fa-edit"></i>
</a>
</span>
</small>
</h5>
</div>
{% if slice %}
{% if slice.slice_name %}
<h2>
{{ slice.slice_name }}
<small class="star-edit-icons">
<span class="favstar" obj_id="{{ slice.id }}"></span>
<span>
<a
href="/slicemodelview/edit/{{ slice.id }}"
data-toggle="tooltip"
title="Edit Description"
class="edit-slice-description-icon"
>
{% if slice.description %}
<i
class="fa fa-question-circle-o"
data-toggle="tooltip"
data-placement="bottom"
title="{{ slice.description }}">
</i>
{% endif %}
<i class="fa fa-edit"></i>
</a>
</span>
</small>
</h2>
{% else %}
<h2>untitled</h2>
{% endif %}
{% endif %}
</div>
<div class="col-md-6">
<div class="slice-meta-controls pull-right">
@@ -234,24 +239,24 @@
<i class="fa fa-file-text-o"></i>.csv
</span>
<span
class="btn btn-warning notbtn"
id="timer"
title="{{ _("Query timer") }}"
data-toggle="tooltip">
class="btn btn-warning notbtn"
id="timer"
title="{{ _("Query timer") }}"
data-toggle="tooltip">
{{ _("0 sec") }}
</span>
<span
class="btn btn-info disabled view_query"
data-toggle="modal"
data-target="#query_modal">
<span data-toggle="tooltip" title="{{ _("View database query") }}">
{{ _("query") }}
</span>
class="btn btn-info disabled view_query"
data-toggle="modal"
data-target="#query_modal">
<span data-toggle="tooltip" title="{{ _("View database query") }}">
{{ _("query") }}
</span>
</span>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
<div class="panel-body">
@@ -337,7 +342,7 @@
<input type="text" name="new_dashboard_name" placeholder="[dashboard name]"> <br><br>
</div>
<div class="modal-footer">
<button type="button" id="btn_modal_save" class="btn btn-primary pull-left">
<button type="button" id="btn_modal_save" class="btn pull-left">
{{ _("Save") }}
</button>
<button type="button" id="btn_modal_save_goto_dash" class="btn btn-primary pull-left gotodash" disabled>

2
caravel/templates/caravel/sql.html
View File

@@ -9,7 +9,7 @@
<div class="row interactions">
<div class="col-xs-7">
<input type="hidden" id="database_id" value="{{ db.id }}">
<button class="btn btn-primary" id="run">{{_("Run!")}}</button>
<button class="btn btn-default" id="run">{{_("Run!")}}</button>
<button class="btn btn-default" id="create_view">{{_("Create View")}}</button>
</div>
<div class="col-xs-5">

1802
caravel/templates/caravel/theme.html
View File

File diff suppressed because it is too large Load Diff

20
caravel/templates/caravel/welcome.html
View File

@@ -18,15 +18,17 @@
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-12">
<span class="pull-left">
<h5><i class="fa fa-dashboard"></i> {{ _("Dashboards") }}</h5>
</span>
<span class="search pull-right"></span>
<span class="pull-right">
<h5><i class="fa fa-search"></i></h5>
</span>
<div class="panel-title">
<div class="row">
<div class="col-md-6">
<h2>{{ _("Dashboards") }}</h2>
</div>
<div class="col-md-6">
<div class="search-container pull-right">
<i class="fa fa-search"></i>
<span class="search"></span>
</div>
</div>
</div>
</div>
</div>