Style and metadata updates.

toddbirchard · toddbirchard · commit 5805414611d0 · 2020-05-13T22:45:57.000-04:00
diff --git a/.gitignore b/.gitignore
@@ -17,7 +17,6 @@ __pycache__/
 .Python
 build/
 develop-eggs/
-dist/
 downloads/
 eggs/
 .eggs/
@@ -132,4 +131,4 @@ dmypy.json
 .pyre/
 
 # etc
-.idea
+.idea
diff --git a/application/plotlydash/dashboard.py b/application/plotlydash/dashboard.py
@@ -20,6 +20,7 @@ def create_dashboard(server):
 
     # Prepare a DataFrame
     df = pd.read_csv('data/311-calls.csv', parse_dates=['created_date'])
+    df['created_date'] = df['created_date'].dt.date
     num_complaints = df['complaint_type'].value_counts()
     to_remove = num_complaints[num_complaints <= 20].index
     df.replace(to_remove, np.nan, inplace=True)
@@ -43,7 +44,7 @@ def create_dashboard(server):
                 ],
                 'layout': {
                     'title': 'NYC 311 Calls category.',
-                    'height': 600,
+                    'height': 500,
                     'padding': 150
                 }
             }),
diff --git a/application/routes.py b/application/routes.py
@@ -6,7 +6,10 @@
 @app.route('/')
 def home():
     """Landing page."""
-    return render_template('index.jinja2',
-                           title='Plotly Dash & Flask Tutorial',
-                           template='home-template',
-                           body="This is a homepage served with Flask.")
+    return render_template(
+        'index.jinja2',
+        title='Plotly Dash Flask Tutorial',
+        description='Embed Plotly Dash into your Flask applications.',
+        template='home-template',
+        body="This is a homepage served with Flask."
+    )
diff --git a/application/static/dist/css/styles.css b/application/static/dist/css/styles.css
diff --git a/application/static/less/table.less b/application/static/less/table.less
@@ -96,7 +96,7 @@ nav {
   }
 
   th {
-    padding: 25px 15px !important;
+    padding: 25px 12px !important;
     border-top: 0 !important;
     border-right: 0 !important;
     border-bottom: 1px solid #e5e7eb !important;
@@ -143,7 +143,7 @@ nav {
   }
 
   td {
-    padding: 15px !important;
+    padding: 12px !important;
     font-size: .95em;
     text-align: left !important;
 
@@ -200,7 +200,7 @@ table {
       }
 
       td {
-        padding: 15px 10px !important;
+        padding: 12px 10px !important;
         overflow: hidden !important;
         border: 0 !important;
         font-size: 0.65em !important;
@@ -238,7 +238,7 @@ table {
 
 #histogram-graph {
   margin-bottom: 30px;
-  padding-bottom: 50px;
+  padding-bottom: 176px !important;
   overflow: hidden;
   border-radius: 4px;
   background: white;
diff --git a/application/templates/layout.jinja2 b/application/templates/layout.jinja2
@@ -3,14 +3,30 @@
 <head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <title>{{title}}</title>
+  <title>{{ title }}</title>
+  <meta property="og:site_name" content="{{ title }}"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:title" content="{{ title }} - Hackers and Slackers"/>
+  <meta property="og:description" content="{{ description }}"/>
+  <meta property="og:url" content="https://plotlydashflask.hackersandslackers.app/"/>
+  <meta name="twitter:title" content="{{ title }}"/>
+  <meta name="twitter:description" content="{{ description }}"/>
+  <meta name="twitter:url" content="https://plotlydashflask.hackersandslackers.app/"/>
+  <meta name="twitter:site" content="@hackersslackers"/>
+  <meta name="twitter:creator" content="@toddrbirchard"/>
+  <meta name="twitter:card" content="summary_large_image"/>
+  <meta name="twitter:image"
+        content=" https://storage.googleapis.com/hackersandslackers-cdn/2018/12/Dash@2x.jpg"/>
+  <meta property="og:image" content=" https://storage.googleapis.com/hackersandslackers-cdn/2018/12/Dash@2x.jpg"/>
+  <meta property="og:image:width" content="1000"/>
+  <meta property="og:image:height" content="523"/>
   <meta name="HandheldFriendly" content="True" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
   <link rel="stylesheet" href="{{ url_for('static', filename='dist/css/styles.css') }}" />
   <link rel="stylesheet" href="https://use.typekit.net/uqq2lcv.css">
-  <link rel="shortcut icon" href="{{ url_for('static', filename='dist/img/favicon.png') }}" type="image/x-icon" />
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
+  <link rel="shortcut icon" href="{{ url_for('static', filename='dist/img/favicon.png') }}" type="image/x-icon" />
 </head>
 <body class="{{template}}">
   <div class="container">
