Преглед изворни кода

Add page for image with nice display

JoostSijm пре 6 година
родитељ
комит
db3be555eb

+ 6 - 0
app/flaskr.py

@@ -19,6 +19,12 @@ def index():
     return send_from_directory('static', 'index.html')
 
 
+@app.route("/tutorial/<image>_afbeelding")
+def tutorial_image_page(image):
+    """Display tutorial image"""
+    return send_from_directory('static', 'tutorial/%s_afbeelding.html' % image)
+
+
 @app.route("/tutorial/<document>.pdf", defaults={"document": "book"})
 def tutorial_document(document):
     """Display tutorial document"""

+ 1 - 1
app/static/404.html

@@ -2,9 +2,9 @@
 <html>
 <head>
     <title>404 - Rival Regions Tutorial</title>
-    <link href="static/style.css" rel="stylesheet">
     <link rel="shortcut icon" href="/static/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="static/style.css" rel="stylesheet">
 </head>
 <body>
     <div class="page">

+ 3 - 3
app/static/index.html

@@ -2,9 +2,9 @@
 <html>
 <head>
     <title>Rival Regions Tutorial</title>
-    <link href="static/style.css" rel="stylesheet">
     <link rel="shortcut icon" href="/static/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="static/style.css" rel="stylesheet">
 </head>
 <body>
     <div class="page">
@@ -24,8 +24,8 @@
         </ul>
         <h3>Afbeelding versie</h3>
         <ul>
-            <li><a href="/tutorial/article.png">Artikel</a> -  met zwart tekst.</li>
-            <li><a href="/tutorial/dist.png">Artikel</a> - met witte tekst.</li>
+            <li><a href="/tutorial/article_afbeelding">Artikel</a> -  met zwart tekst.</li>
+            <li><a href="/tutorial/dist_afbeelding">Artikel</a> - met witte tekst.</li>
         </ul>
         <h2>Repository</h2>
         Help mee dit project te verbeteren:

+ 14 - 0
app/static/style.css

@@ -15,6 +15,12 @@ body
     width: 550px;
 }
 
+.image-page,
+.image-page img
+{
+    width: 17.5cm;
+}
+
 h1,
 h2,
 h3
@@ -52,6 +58,14 @@ ul
 {
     font-family: sans-serif;
 }
+@media (max-width: 17.5cm)
+{
+    .image-page,
+    .image-page img
+    {
+        width: 100%;
+    }
+}
 
 @media (max-width: 560px)
 {

+ 14 - 0
app/static/tutorial/article_afbeelding.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Artikel - Rival Regions Tutorial</title>
+    <link rel="shortcut icon" href="/static/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="static/style.css" rel="stylesheet">
+</head>
+<body>
+    <div class="image-page">
+		<img src="/tutorial/article.png">
+    </div>
+</body>
+</html>

+ 14 - 0
app/static/tutorial/dist_afbeelding.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Artikel - Rival Regions Tutorial</title>
+    <link rel="shortcut icon" href="/static/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="static/style.css" rel="stylesheet">
+</head>
+<body style="background: #393939">
+    <div class="image-page">
+		<img src="/tutorial/dist.png">
+    </div>
+</body>
+</html>