Shipping with a CSS template out of the box

apache · Mar 4, 2016 · 0a8ab6c · 0a8ab6c
1 parent a7e75a2
commit 0a8ab6c
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 11 deletions.
diff --git a/panoramix/assets/stylesheets/panoramix.css b/panoramix/assets/stylesheets/panoramix.css
@@ -11,6 +11,17 @@ body {
     margin-left: 365px;
 }
 
+.modal-content.css {
+    transition: opacity 0.5s ease;
+    opacity: 0.5;
+    border-color: black;
+}
+
+.modal-content.css:hover {
+    transition: opacity 0.5s ease;
+    opacity: 1;
+}
+
 .slice_description{
     padding: 8px;
     margin: 5px;

diff --git a/panoramix/assets/visualizations/pivot_table.css b/panoramix/assets/visualizations/pivot_table.css
@@ -2,7 +2,12 @@
     overflow: auto !important;
 }
 
-.widget.pivot_table td,th {
-    padding: 1px 5px;
-    font-size: small;
+.table tr>th {
+    padding: 1px 5px !important;
+    font-size: small !important;
+}
+
+.table tr>td {
+    padding: 1px 5px !important;
+    font-size: small !important;
 }
diff --git a/panoramix/assets/visualizations/table.css b/panoramix/assets/visualizations/table.css
@@ -7,7 +7,12 @@
     color: white;
 }
 
-.widget.table td {
-    padding: 1px 5px;
-    font-size: small;
+.table tr>th {
+    padding: 1px 5px !important;
+    font-size: small !important;
+}
+
+.table tr>td {
+    padding: 1px 5px !important;
+    font-size: small !important;
 }
diff --git a/panoramix/assets/visualizations/table.js b/panoramix/assets/visualizations/table.js
@@ -1,9 +1,8 @@
 var $ = window.$ = require('jquery');
 var jQuery = window.jQuery = $;
 
-require('datatables');
-// CSS
 require('./table.css');
+require('datatables');
 require('../node_modules/datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css');
 
 function tableVis(slice) {

diff --git a/panoramix/data/__init__.py b/panoramix/data/__init__.py
@@ -1,6 +1,7 @@
 import gzip
 import json
 import os
+import textwrap
 
 import pandas as pd
 from sqlalchemy import String, DateTime
@@ -300,6 +301,105 @@ def load_birth_names():
     print("Done loading table!")
     print("-" * 80)
 
+    print('Creating default CSS templates')
+    CSS = models.CssTemplate
+
+    obj = db.session.query(CSS).filter_by(template_name='Flat').first()
+    if not obj:
+        obj = CSS(template_name="Flat")
+    css = textwrap.dedent("""\
+    .gridster li.widget {
+        transition: background-color 0.5s ease;
+        background-color: #FAFAFA;
+        border: 1px solid #CCC;
+        overflow: hidden;
+        box-shadow: none;
+        border-radius: 0px;
+    }
+    .gridster li.widget:hover {
+        border: 1px solid #000;
+        background-color: #EAEAEA;
+    }
+    .navbar {
+        transition: opacity 0.5s ease;
+        opacity: 0.05;
+    }
+    .navbar:hover {
+        opacity: 1;
+    }
+    .slice_header .header{
+        font-weight: normal;
+        font-size: 12px;
+    }
+    /*
+    var bnbColors = [
+        //rausch    hackb      kazan      babu      lima        beach     barol
+        '#ff5a5f', '#7b0051', '#007A87', '#00d1c1', '#8ce071', '#ffb400', '#b4a76c',
+        '#ff8083', '#cc0086', '#00a1b3', '#00ffeb', '#bbedab', '#ffd266', '#cbc29a',
+        '#ff3339', '#ff1ab1', '#005c66', '#00b3a5', '#55d12e', '#b37e00', '#988b4e',
+     ];
+    */
+    """)
+    obj.css = css
+    db.session.merge(obj)
+    db.session.commit()
+
+    obj = (
+        db.session.query(CSS).filter_by(template_name='Courier Black').first())
+    if not obj:
+        obj = CSS(template_name="Courier Black")
+    css = textwrap.dedent("""\
+    .gridster li.widget {
+        transition: background-color 0.5s ease;
+        background-color: #EEE;
+        border: 2px solid #444;
+        overflow: hidden;
+        border-radius: 15px;
+        box-shadow: none;
+    }
+    h2 {
+        color: white;
+        font-size: 52px;
+    }
+    .navbar {
+        box-shadow: none;
+    }
+    .gridster li.widget:hover {
+        border: 2px solid #000;
+        background-color: #EAEAEA;
+    }
+    .navbar {
+        transition: opacity 0.5s ease;
+        opacity: 0.05;
+    }
+    .navbar:hover {
+        opacity: 1;
+    }
+    .slice_header .header{
+        font-weight: normal;
+        font-size: 12px;
+    }
+    .nvd3 text {
+        font-size: 12px;
+        font-family: inherit;
+    }
+    body{
+        background: #000;
+        font-family: Courier, Monaco, monospace;;
+    }
+    /*
+    var bnbColors = [
+        //rausch    hackb      kazan      babu      lima        beach     barol
+        '#ff5a5f', '#7b0051', '#007A87', '#00d1c1', '#8ce071', '#ffb400', '#b4a76c',
+        '#ff8083', '#cc0086', '#00a1b3', '#00ffeb', '#bbedab', '#ffd266', '#cbc29a',
+        '#ff3339', '#ff1ab1', '#005c66', '#00b3a5', '#55d12e', '#b37e00', '#988b4e',
+     ];
+    */
+    """)
+    obj.css = css
+    db.session.merge(obj)
+    db.session.commit()
+
     print("Creating table reference")
     obj = db.session.query(TBL).filter_by(table_name='birth_names').first()
     if not obj:

diff --git a/panoramix/models.py b/panoramix/models.py
@@ -67,7 +67,7 @@ class CssTemplate(Model, AuditMixinNullable):
     __tablename__ = 'css_templates'
     id = Column(Integer, primary_key=True)
     template_name = Column(String(250))
-    css = Column(Text)
+    css = Column(Text, default='')
 
 
 class Slice(Model, AuditMixinNullable):

diff --git a/panoramix/templates/panoramix/dashboard.html b/panoramix/templates/panoramix/dashboard.html
@@ -4,7 +4,7 @@
     {{ super() }}
     <link rel="stylesheet" href="{{ url_for('static', filename="assets/node_modules/gridster/dist/jquery.gridster.min.css") }}">
     <style id="user_style" type="text/css">
-      {{ dashboard.css }}
+      {{ dashboard.css or '' }}
     </style>
 {% endblock %}
 
@@ -14,7 +14,7 @@
 <!-- Modal -->
 <div class="modal fade" id="css_modal" tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
-    <div class="modal-content">
+    <div class="modal-content css">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <h4 class="modal-title" id="myModalLabel">Dashboard CSS</h4>