Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit dffad65

Browse files
Visual updates & refactor.
2 parents 6ef2878 + 7b6e982 commit dffad65

File tree

10 files changed

+62
-54
lines changed

10 files changed

+62
-54
lines changed

‎.github/FUNDING.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# These are supported funding model platforms
2+
3+
custom: ['https://www.buymeacoffee.com/hackersslackers']

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,3 +130,6 @@ dmypy.json
130130

131131
# Pyre type checker
132132
.pyre/
133+
134+
# etc
135+
.idea

‎README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,31 @@
1212
[![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)
1313
[![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)
1414

15+
![Plot Dash Tutorial](https://storage.googleapis.com/hackersandslackers-cdn/2018/12/Dash@2x.jpg)
1516

1617
Source code for the accompanying tutorial found here: https://hackersandslackers.com/plotly-dash-with-flask/
18+
19+
## Getting Started
20+
21+
Installation is recommended with [Pipenv](https://pipenv-fork.readthedocs.io/en/latest/):
22+
23+
```shell
24+
$ git clone https://github.com/toddbirchard/plotlydash-flask-tutorial.git
25+
$ cd plotlydash-flask-tutorial
26+
$ pipenv shell
27+
$ pipenv update
28+
$ flask run
29+
```
30+
31+
Alternatively, try installing via `requirements.txt`:
32+
33+
```shell
34+
$ git clone https://github.com/toddbirchard/plotlydash-flask-tutorial.git
35+
$ cd plotlydash-flask-tutorial
36+
$ python3 -m pip install -r requirements.txt
37+
$ flask run
38+
```
39+
40+
-----
41+
42+
**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.

‎application/dash_application/layout.py‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@
66
{%favicon%}
77
{%css%}
88
</head>
9-
<body>
9+
<body>
1010
<header>
1111
<div class="nav-wrapper">
12-
<a href="/" class="logo">
12+
<a href="/">
1313
<img src="/static/img/logo.png" class="logo" />
14+
<h1>Plotly Dash Flask Tutorial</h1>
1415
</a>
1516
<nav>
1617
<a href="/dashapp/"><i class="fas fa-chart-line"></i> Embdedded Plotly Dash</a>

‎application/static/dist/css/styles.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎application/static/less/header.less‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
header {
22
position: relative;
33
width: 100%;
4-
margin-bottom: 50px!important;
54
padding: 30px 0 !important;
65
background: white!important;
76
box-shadow: 0 0 5px #bec6cf;
@@ -21,10 +20,10 @@ header {
2120

2221
.logo {
2322
width: 50px;
23+
display: inline-block;
2424
}
2525

2626
a {
27-
margin-left: 30px;
2827
color: #70829d;
2928
font-size: 1em;
3029
text-decoration: none;

‎application/static/less/home.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,5 +44,10 @@
4444
text-decoration: none;
4545
transition: all .2s ease;
4646
}
47+
48+
.dash-link {
49+
margin-top: 30px;
50+
display: block;
51+
}
4752
}
4853
}

‎application/static/less/table.less‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,28 @@ html {
66
font-family: 'Lato';
77
}
88

9+
.dash-template {
10+
h1 {
11+
margin: 0;
12+
display: inline-block;
13+
font-size: 1.8em;
14+
}
15+
16+
.logo {
17+
margin-right: 20px;
18+
width: 40px;
19+
}
20+
21+
.nav-wrapper a {
22+
display: flex;
23+
align-items: center;
24+
}
25+
}
26+
927
#dash-container {
1028
width: 1000px;
1129
max-width: 95%;
12-
margin: 100px auto 0;
30+
margin: 50px auto 0;
1331
}
1432

1533
.container {

‎application/templates/index.jinja2‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
<h1 class="site-title">{{ title }}</h1>
77
<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>
88

9-
<a href="/dashapp/"><i class="fas fa-chart-line"></i> Embdedded Plotly Dash</a>
9+
<a href="/dashapp/"class="dash-link"><i class="fas fa-chart-line"></i> Embdedded Plotly Dash</a>
1010
</div>
1111
{% endblock %}

‎setup.py‎

Lines changed: 0 additions & 47 deletions
This file was deleted.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /