Skip to content

Commit 2f3726a

Browse files
toddbirchardtoddbirchard
committed
Add styles for mobile viewports.
1 parent a837942 commit 2f3726a

File tree

17 files changed

+258
-115
lines changed

17 files changed

+258
-115
lines changed

‎config.py

-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ class Config:
1717
FLASK_APP = "wsgi.py"
1818
SECRET_KEY = environ.get("SECRET_KEY")
1919
FLASK_DEBUG = environ.get("FLASK_DEBUG")
20-
SOCK_SERVER_OPTIONS = {"ping_interval": 25}
2120

2221
# Flask-Assets
2322
LESS_BIN = environ.get("LESS_BIN")

‎flask_assets_tutorial/admin/routes.py

+3-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ def dashboard():
99
"""Admin dashboard route."""
1010
return render_template(
1111
"dashboard.jinja2",
12-
title="Admin Dashboard | Flask-Blueprint Tutorial",
12+
title="Admin Dashboard",
1313
template="dashboard-static account",
14-
body="Account",
14+
body="This is the admin dashboard.",
15+
logged_in=True,
1516
)

‎flask_assets_tutorial/admin/templates/dashboard.jinja2

+2-11
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,6 @@
55
{% endblock %}
66

77
{% block content %}
8-
{% include "navigation-loggedin.jinja2" %}
9-
10-
<div class="container">
11-
<h1>{{body}}</h1>
12-
<ul class="page-properties">
13-
<li><span class="attribute-title">Blueprint:</span> <span class="attribute-value">{{ request.blueprint }}</span></li>
14-
<li><span class="attribute-title">Template:</span> <span class="attribute-value">{{ self._TemplateReference__context.name }}</span></li>
15-
<li><span class="attribute-title">View:</span> <span class="attribute-value">{{ request.endpoint }}</span></li>
16-
<li><span class="attribute-title">Route:</span> <span class="attribute-value">{{ request.path }}</span></li>
17-
</ul>
18-
</div>
8+
<h1>{{title}}</h1>
9+
<p>{{body}}</p>
1910
{% endblock %}

‎flask_assets_tutorial/main/routes.py

+16-4
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,35 @@
66

77
@main_blueprint.route("/", methods=["GET"])
88
def home():
9-
"""Homepage route."""
9+
"""Home page route."""
1010
return render_template(
11-
"index.jinja2", title="Home | Flask-Blueprint Tutorial", template="home-static main", body="Home"
11+
"index.jinja2",
12+
title="Home",
13+
body="Welcome to the Flask-Assets tutorial demo!",
14+
template="home-static main",
15+
logged_in=False,
1216
)
1317

1418

1519
@main_blueprint.route("/about", methods=["GET"])
1620
def about():
1721
"""About page route."""
1822
return render_template(
19-
"index.jinja2", title="About | Flask-Blueprint Tutorial", template="about-static main", body="About"
23+
"index.jinja2",
24+
title="About",
25+
body="At HackersAndSlackers, we pride ourselves in stuff. That's why work tirelessly to build and deliver stuff, 24/7.",
26+
template="about-static main",
27+
logged_in=False,
2028
)
2129

2230

2331
@main_blueprint.route("/etc", methods=["GET"])
2432
def etc():
2533
"""Etc page route."""
2634
return render_template(
27-
"index.jinja2", title="Etc | Flask-Blueprint Tutorial", template="etc-static main", body="Etc"
35+
"index.jinja2",
36+
title="Etc.",
37+
body="Here's a third page, for good measure.",
38+
template="etc-static main",
39+
logged_in=False,
2840
)

‎flask_assets_tutorial/main/templates/index.jinja2

+11-11
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@
55
{% endblock %}
66

77
{% block content %}
8-
{% include "navigation-default.jinja2" %}
9-
<div class="container">
10-
<h1>{{body}}</h1>
11-
<ul class="page-properties">
12-
<li><span class="attribute-title">Blueprint:</span> <span class="attribute-value">{{ request.blueprint }}</span></li>
13-
<li><span class="attribute-title">Template:</span> <span class="attribute-value">{{ self._TemplateReference__context.name }}</span></li>
14-
<li><span class="attribute-title">View:</span> <span class="attribute-value">{{ request.endpoint }}</span></li>
15-
<li><span class="attribute-title">Route:</span> <span class="attribute-value">{{ request.path }}</span></li>
16-
</ul>
17-
</div>
18-
{% endblock %}
8+
<h1>{{title}}</h1>
9+
<p>{{body}}</p>
10+
<ul class="page-properties">
11+
<li><span class="attribute-title">Blueprint:</span> <span class="attribute-value">{{ request.blueprint }}</span></li>
12+
<li><span class="attribute-title">Template:</span> <span class="attribute-value">{{ self._TemplateReference__context.name }}</span></li>
13+
<li><span class="attribute-title">View:</span> <span class="attribute-value">{{ request.endpoint }}</span></li>
14+
<li><span class="attribute-title">Route:</span> <span class="attribute-value">{{ request.path }}</span></li>
15+
</ul>
16+
{% endblock %}
17+
18+

‎flask_assets_tutorial/static/dist/css/account.css

+72-23
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,28 @@
1+
/* Breakpoints */
12
nav {
23
background: #fff;
3-
padding: 15px 30px;
4-
width: auto;
5-
margin-bottom: 40px;
4+
padding: 25px 0;
5+
margin: 0 auto;
66
box-shadow: 0 0 5px #bec6cf;
77
}
8+
@media (max-width: 600px) {
9+
nav {
10+
box-shadow: unset;
11+
}
12+
}
813
nav .nav-wrapper {
9-
max-width: 900px;
14+
max-width: 85vw;
1015
display: flex;
1116
justify-content: space-between;
1217
align-items: center;
1318
width: auto;
1419
margin: 0 auto;
1520
}
21+
@media (max-width: 600px) {
22+
nav .nav-wrapper {
23+
max-width: 90vw;
24+
}
25+
}
1626
nav .nav-wrapper .left-nav {
1727
display: flex;
1828
justify-content: space-between;
@@ -45,12 +55,55 @@ html {
4555
background: #f0f0f0;
4656
height: 100%;
4757
}
58+
body .container,
59+
html .container {
60+
width: 850px;
61+
max-width: 80vw;
62+
min-height: 100%;
63+
background: white;
64+
margin: 40px auto 0;
65+
padding: 3vw;
66+
box-shadow: 0 0 5px #bec6cf;
67+
}
68+
@media (max-width: 600px) {
69+
body .container,
70+
html .container {
71+
width: 90vw;
72+
max-width: unset;
73+
padding: 5vw;
74+
margin: 0;
75+
box-shadow: 0 0 3px #bec6cf;
76+
}
77+
}
78+
body .container .attribute-value,
79+
html .container .attribute-value {
80+
font-weight: 300;
81+
font-size: 0.9em;
82+
}
83+
body .container h1,
84+
html .container h1 {
85+
margin-top: 0;
86+
font-size: 2.5em;
87+
line-height: 1;
88+
color: #393b40;
89+
}
90+
body .container p,
91+
html .container p {
92+
font-weight: 300;
93+
font-size: 1.1em;
94+
line-height: 1.4;
95+
}
4896
ul {
4997
list-style: none;
5098
width: 50%;
5199
border: 1px solid #e6e6e6;
52100
padding: 10px;
53101
}
102+
@media (max-width: 600px) {
103+
ul {
104+
width: unset;
105+
}
106+
}
54107
ul li {
55108
display: flex;
56109
justify-content: space-between;
@@ -64,37 +117,32 @@ ul li:last-of-type {
64117
margin-bottom: 0;
65118
padding-bottom: 0;
66119
}
67-
.container {
68-
max-width: 847px;
69-
margin: 0 auto;
70-
min-height: 100%;
71-
background: white;
72-
padding: 40px;
73-
box-shadow: 0 0 5px #bec6cf;
74-
}
75-
.container .attribute-value {
76-
font-weight: 300;
77-
font-size: 0.9em;
78-
}
79-
h1 {
80-
margin-top: 0;
81-
}
82120

121+
/* Breakpoints */
83122
nav {
84123
background: #fff;
85-
padding: 15px 30px;
86-
width: auto;
87-
margin-bottom: 40px;
124+
padding: 25px 0;
125+
margin: 0 auto;
88126
box-shadow: 0 0 5px #bec6cf;
89127
}
128+
@media (max-width: 600px) {
129+
nav {
130+
box-shadow: unset;
131+
}
132+
}
90133
nav .nav-wrapper {
91-
max-width: 900px;
134+
max-width: 85vw;
92135
display: flex;
93136
justify-content: space-between;
94137
align-items: center;
95138
width: auto;
96139
margin: 0 auto;
97140
}
141+
@media (max-width: 600px) {
142+
nav .nav-wrapper {
143+
max-width: 90vw;
144+
}
145+
}
98146
nav .nav-wrapper .left-nav {
99147
display: flex;
100148
justify-content: space-between;
@@ -119,6 +167,7 @@ nav a:hover {
119167
opacity: 0.7;
120168
}
121169

170+
/* Breakpoints */
122171

123172
p {
124173
width: 100%;

0 commit comments

Comments
 (0)