gnunet-svn
[Top][All Lists]
Advanced
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[taler-taler-merchant-demos] 01/18: Re-Designed blog

From: gnunet
Subject: [taler-taler-merchant-demos] 01/18: Re-Designed blog
Date: Sat, 10 Oct 2020 22:55:35 +0200 
This is an automated email from the git hooks/post-receive script.

grothoff pushed a commit to branch master
in repository taler-merchant-demos.

commit 3b46ba1c8e72c0ad4ec67b8693f1298f7740140f
Author: Torsten Grothoff <tg@wafflepowered.com>
AuthorDate: Sun Sep 6 13:19:00 2020 +0200

    Re-Designed blog
---
 talermerchantdemos/.vscode/launch.json       | 15 +++++++++
 talermerchantdemos/blog/templates/base.html  | 50 +++++++++++++++++++++-------
 talermerchantdemos/blog/templates/index.html |  2 +-
 talermerchantdemos/static/__init__.py        |  1 +
 talermerchantdemos/static/demo.css           | 27 +++++++++++----
 talermerchantdemos/static/navbar.css         | 50 ++++++++++++++++++++++++++++
 6 files changed, 125 insertions(+), 20 deletions(-)

diff --git a/talermerchantdemos/.vscode/launch.json 
b/talermerchantdemos/.vscode/launch.json
new file mode 100644
index 0000000..7a9dfa0
--- /dev/null
+++ b/talermerchantdemos/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: 
https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080";,
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/talermerchantdemos/blog/templates/base.html 
b/talermerchantdemos/blog/templates/base.html
index 3d7d0f0..493e77d 100644
--- a/talermerchantdemos/blog/templates/base.html
+++ b/talermerchantdemos/blog/templates/base.html
@@ -23,11 +23,20 @@
   <title>Taler Essay Shop Demo</title>
   <link rel="stylesheet" type="text/css" href="{{ url_for('static', 
filename='pure.css') }}" />
   <link rel="stylesheet" type="text/css" href="{{ url_for('static', 
filename='demo.css') }}" />
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', 
filename='navbar.css') }}" />
   <style>
     .warn {
       background-color: #aa393977;
       padding: 1em;
     }
+    @keyframes hoveranim {
+      from {left:0;}
+      to {left:1vw;}
+    }
+    @keyframes hoveranimrevert {
+      from {left:1vw;}
+      to {left:0;}
+    }
     .notice {
       border-radius: 1em;
       background: #0333;
@@ -38,16 +47,28 @@
       margin-top: 2em;
       margin-bottom: 2em;
     }
+    .notice {
+      position: relative;
+      left: 0;
+      animation-name: hoveranimrevert;
+      animation-duration: 1s;
+    }
+    .notice:hover {
+      left: 1vw;
+      animation-name: hoveranim;
+      animation-duration: 1s;
+    }
     #main a:link, #main a:visited, #main a:hover, #main a:active {
         color: black;
     }
   </style>
+  
   {% block styles %}{% endblock %}
   {% block scripts %}{% endblock %}
 </head>
 
 <body>
-  <div class="demobar" style="display: flex; flex-direction: column;">
+  <header class="demobar" style="display: flex; flex-direction: column;">
     <h1><span class="tt adorn-brackets">Taler Demo</span></h1>
     <h1><span class="it"><a href="{{ env('TALER_ENV_URL_MERCHANT_BLOG') 
}}">Shop</a></span></h1>
     <p>On this page you can buy articles using an imaginary currency (for now).
@@ -56,17 +77,16 @@
       <a 
href="http://shop.fsf.org/product/free-software-free-society-2/";>published by 
the FSF</a>
       and available gratis at <a href="http://www.gnu.org/";>gnu.org</a>.
     </p>
-    <ul>
-      <li><a href="{{ env('TALER_ENV_URL_INTRO', '#') }}">Introduction</a></li>
-      <li><a href="{{ env('TALER_ENV_URL_BANK', '#') }}">Bank</a></li>
-      <li><a href="{{ env('TALER_ENV_URL_MERCHANT_BLOG', '#') }}">Essay 
Shop</a></li>
-      <li><a href="{{ env('TALER_ENV_URL_MERCHANT_DONATIONS', '#') 
}}">Donations</a></li>
-      <li><a href="{{ env('TALER_ENV_URL_MERCHANT_SURVEY', '#') 
}}">Tipping/Survey</a></li>
-      <li><a href="{{ env('TALER_ENV_URL_BACKOFFICE', '#') 
}}">Back-office</a></li>
-    </ul>
-    <p>You can learn more about Taler on our main <a 
href="https://taler.net";>website</a>.</p>
-    <div style="flex-grow:1"></div>
-    <p>Copyright &copy; 2014&mdash;2018 Inria</p>
+  </header>
+  <div style="display:flex; flex-direction: column;" class="navcontainer">
+    <nav class="demolist">
+      <a href="{{ env('TALER_ENV_URL_INTRO', '#') }}">Introduction</a>
+      <a href="{{ env('TALER_ENV_URL_BANK', '#') }}">Bank</a>
+      <a href="{{ env('TALER_ENV_URL_MERCHANT_BLOG', '#') }}" 
class="active">Essay Shop</a>
+      <a href="{{ env('TALER_ENV_URL_MERCHANT_DONATIONS', '#') 
}}">Donations</a>
+      <a href="{{ env('TALER_ENV_URL_MERCHANT_SURVEY', '#') 
}}">Tipping/Survey</a>
+      <a href="{{ env('TALER_ENV_URL_BACKOFFICE', '#') }}">Back-office</a>
+    </nav>
   </div>
 
   <section id="main" class="content">
@@ -74,6 +94,12 @@
       This is the main content of the page.
     {% endblock %}
     <hr />
+    <div>
+      <p>You can learn more about Taler on our main <a 
href="https://taler.net";>website</a>.</p>
+      <div style="flex-grow:1"></div>
+      <p>Copyright &copy; 2014&mdash;2020 Taler Systems SA</p>
+    </div>
   </section>
 </body>
 </html>
+
diff --git a/talermerchantdemos/blog/templates/index.html 
b/talermerchantdemos/blog/templates/index.html
index 0159779..89ac3b8 100644
--- a/talermerchantdemos/blog/templates/index.html
+++ b/talermerchantdemos/blog/templates/index.html
@@ -30,7 +30,7 @@
     <div>
       {% for article in articles %}
       <div class="notice">
-      <h3><a href="{{ url_for('article', article_name=article.slug) 
}}">{{article.title}}</a></h3>
+      <h3><a href="{{ url_for('article', article_name=article.slug) }}" 
class="articleTitle">{{article.title}}</a></h3>
       <p>{{ article.teaser|safe }} <a href="{{ url_for('article', 
article_name=article.slug) }}">(Pay to read more...)</a></p>
       </div>
       {% else %}
diff --git a/talermerchantdemos/static/__init__.py 
b/talermerchantdemos/static/__init__.py
new file mode 100644
index 0000000..6b61bdc
--- /dev/null
+++ b/talermerchantdemos/static/__init__.py
@@ -0,0 +1 @@
+app.static_folder = 'static'
diff --git a/talermerchantdemos/static/demo.css 
b/talermerchantdemos/static/demo.css
index b2688ad..7733515 100644
--- a/talermerchantdemos/static/demo.css
+++ b/talermerchantdemos/static/demo.css
@@ -44,26 +44,39 @@
 }
 
 body {
-  overflow-y: scroll;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+body * {
+  /* margin-left: 0.5vw; */
+  left: 0.1vw;
 }
 
 @media (min-width: 500px) {
   .content {
-    margin-left: 25%;
+    /* margin-left: 0vw; */
     padding-left: 2em;
     margin-right: 1em;
-    overflow-x: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
   }
   .demobar {
-    height: 100%;
+    /* height: 100%; */
+    /* width: 25%; */
+    /* NOTE: Please use "vh"/"vw" instead of "%" when possible, in the future. 
*/
+    height: min-content;
+    width: 100vw;
     margin: 0;
     top: 0;
     left: 0;
     background-color: #033;
     color: white;
-    position: fixed;
-    width: 25%;
+    position: relative;
     padding-right: 1em;
-    overflow: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+    text-align: center;
   }
 }
+
diff --git a/talermerchantdemos/static/navbar.css 
b/talermerchantdemos/static/navbar.css
new file mode 100644
index 0000000..21d73a7
--- /dev/null
+++ b/talermerchantdemos/static/navbar.css
@@ -0,0 +1,50 @@
+/**
+ * @author      Torsten Grothoff
+ * @name        navbar.css
+ * @description Makes the navigation bar have styles
+ */
+ 
+ 
+.navcontainer{
+    overflow:hidden;
+    background:#144;
+    margin-bottom:50px;
+    width:100%; 
+    color:white; 
+    position:-webkit-sticky;
+    position:sticky;
+    top:0px;
+    width: 100vw;
+    backdrop-filter: blur(10px);
+    opacity: 1;
+    z-index: 10000;
+}
+nav {
+    left: 1vw;
+    position: relative;
+    background:#144;
+    z-index: 10000;
+}
+
+nav a {
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    background: #00000000;
+}
+
+nav a:hover {
+    background: #00000022;
+}
+
+nav a.active {
+    background-color: #4CAF50;
+}
+
+nav a.active:hover {
+    background: #377c39;
+}
\ No newline at end of file

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
reply via email to
[Prev in Thread] Current Thread [Next in Thread]