Visual updates & refactor.

toddbirchard · toddbirchard · commit dffad6579b5e · 2020-04-24T04:40:39.000-04:00
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+custom: ['https://www.buymeacoffee.com/hackersslackers']
diff --git a/.gitignore b/.gitignore
@@ -130,3 +130,6 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+
+# etc
+.idea
diff --git a/README.md b/README.md
@@ -12,5 +12,31 @@
 [![GitHub Stars](https://img.shields.io/github/stars/toddbirchard/plotlydash-flask-tutorial.svg?style=flat-square&colorB=ebcb8b&colorA=4c566a)](https://github.com/toddbirchard/plotlydash-flask-tutorial/stargazers)
 [![GitHub Forks](https://img.shields.io/github/forks/toddbirchard/plotlydash-flask-tutorial.svg?style=flat-square&colorA=4c566a&colorB=ebcb8b)](https://github.com/toddbirchard/plotlydash-flask-tutorial/network)
 
+![Plot Dash Tutorial](https://storage.googleapis.com/hackersandslackers-cdn/2018/12/Dash@2x.jpg)
 
 Source code for the accompanying tutorial found here: https://hackersandslackers.com/plotly-dash-with-flask/
+
+## Getting Started
+
+Installation is recommended with [Pipenv](https://pipenv-fork.readthedocs.io/en/latest/):
+
+```shell
+$ git clone https://github.com/toddbirchard/plotlydash-flask-tutorial.git
+$ cd plotlydash-flask-tutorial
+$ pipenv shell
+$ pipenv update
+$ flask run
+```
+
+Alternatively, try installing via `requirements.txt`:
+
+```shell
+$ git clone https://github.com/toddbirchard/plotlydash-flask-tutorial.git
+$ cd plotlydash-flask-tutorial
+$ python3 -m pip install -r requirements.txt
+$ flask run
+```
+
+-----
+
+**Hackers and Slackers** tutorials are free of charge. If you found this tutorial helpful, a [small donation](https://www.buymeacoffee.com/hackersslackers) would be greatly appreciated to keep us in business. All proceeds go towards coffee, and all coffee goes towards more content.
diff --git a/application/dash_application/layout.py b/application/dash_application/layout.py
@@ -6,11 +6,12 @@
                             {%favicon%}
                             {%css%}
                         </head>
-                        <body>
+                        <body class="dash-template">
                             <header>
                               <div class="nav-wrapper">
-                                <a href="/" class="logo">
+                                <a href="/">
                                     <img src="/static/img/logo.png" class="logo" />
+                                    <h1>Plotly Dash Flask Tutorial</h1>
                                   </a>
                                 <nav>
                                   <a href="/dashapp/"><i class="fas fa-chart-line"></i> Embdedded Plotly Dash</a>
diff --git a/application/static/dist/css/styles.css b/application/static/dist/css/styles.css
diff --git a/application/static/less/header.less b/application/static/less/header.less
@@ -1,7 +1,6 @@
 header {
   position: relative;
   width: 100%;
-  margin-bottom: 50px!important;
   padding: 30px 0 !important;
   background: white!important;
   box-shadow: 0 0 5px #bec6cf;
@@ -21,10 +20,10 @@ header {
 
     .logo {
       width: 50px;
+      display: inline-block;
     }
 
     a {
-      margin-left: 30px;
       color: #70829d;
       font-size: 1em;
       text-decoration: none;
diff --git a/application/static/less/home.less b/application/static/less/home.less
@@ -44,5 +44,10 @@
       text-decoration: none;
       transition: all .2s ease;
     }
+
+    .dash-link {
+      margin-top: 30px;
+      display: block;
+    }
   }
 }
diff --git a/application/static/less/table.less b/application/static/less/table.less
@@ -6,10 +6,28 @@ html {
   font-family: 'Lato';
 }
 
+.dash-template {
+  h1 {
+    margin: 0;
+    display: inline-block;
+    font-size: 1.8em;
+  }
+
+  .logo {
+    margin-right: 20px;
+    width: 40px;
+  }
+
+  .nav-wrapper a {
+    display: flex;
+    align-items: center;
+  }
+}
+
 #dash-container {
   width: 1000px;
   max-width: 95%;
-  margin: 100px auto 0;
+  margin: 50px auto 0;
 }
 
 .container {
diff --git a/application/templates/index.jinja2 b/application/templates/index.jinja2
@@ -6,6 +6,6 @@
   <h1 class="site-title">{{ title }}</h1>
   <p class="subtitle">Demo for embedding Plotly Dash within Flask Apps (View source on <a href="https://github.com/toddbirchard/plotlydash-flask-tutorial">Github</a>).</p>
 
-  <a href="/dashapp/"><i class="fas fa-chart-line"></i> Embdedded Plotly Dash</a>
+  <a href="/dashapp/" class="dash-link"><i class="fas fa-chart-line"></i> Embdedded Plotly Dash</a>
 </div>
 {% endblock %}
diff --git a/setup.py b/setup.py

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# These are supported funding model platforms`
	`2`	`+`
	`3`	`+custom: ['https://www.buymeacoffee.com/hackersslackers']`
-Original file line number
+Diff line change
 # Pyre type checker
 .pyre/
++
 +# etc
 +.idea
Original file line number	Diff line number	Diff line change
`@@ -44,5 +44,10 @@`
`44`	`44`	`text-decoration: none;`
`45`	`45`	`transition: all .2s ease;`
`46`	`46`	`}`
	`47`	`+`
	`48`	`+ .dash-link {`
	`49`	`+ margin-top: 30px;`
	`50`	`+ display: block;`
	`51`	`+ }`
`47`	`52`	`}`
`48`	`53`	`}`