summaryrefslogtreecommitdiff
path: root/talermerchantdemos
diff options
context:
space:
mode:
authorChristian Grothoff <christian@grothoff.org>2020-09-06 18:48:48 +0200
committerChristian Grothoff <christian@grothoff.org>2020-09-06 18:48:48 +0200
commit06c708def001b20b6e15d02c5224d835559e4f71 (patch)
tree7be3fd806190087ca30e631e7d1846dbba4d7141 /talermerchantdemos
parentd6459ab53ef80f1c799324ea5fa9709f6652db38 (diff)
parent3b378dd884ffd9580e95d0b20964eb57b87f7552 (diff)
downloadtaler-merchant-demos-06c708def001b20b6e15d02c5224d835559e4f71.tar.gz
taler-merchant-demos-06c708def001b20b6e15d02c5224d835559e4f71.tar.bz2
taler-merchant-demos-06c708def001b20b6e15d02c5224d835559e4f71.zip
fix merge issue
Diffstat (limited to 'talermerchantdemos')
-rw-r--r--talermerchantdemos/.vscode/launch.json15
-rw-r--r--talermerchantdemos/blog/templates/base.html63
-rw-r--r--talermerchantdemos/blog/templates/index.html2
-rw-r--r--talermerchantdemos/static/__init__.py1
-rw-r--r--talermerchantdemos/static/demo.css27
-rw-r--r--talermerchantdemos/static/navbar.css75
-rw-r--r--talermerchantdemos/static/navbar.css.map1
-rw-r--r--talermerchantdemos/static/navbar.scss103
8 files changed, 267 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..114b08a 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,24 +77,42 @@
<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>
+ <span class="right">
+ Language
+ <!-- <input type="checkbox"> -->
+ <div class="nav">
+ <br>
+ <a href="" class="navbtn">EN</a><br>
+ <a href="" class="navbtn">DE</a><br>
+ <a href="" class="navbtn">FR</a><br>
+ <a href="" class="navbtn">IT</a><br>
+ <a href="" class="navbtn">JP</a>
+ </div>
+ </span>
+ </nav>
</div>
+ <!-- <input type="checkbox" class="r"><label>test</label> -->
<section id="main" class="content">
{% block main %}
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 0702bf7..e139bd2 100644
--- a/talermerchantdemos/blog/templates/index.html
+++ b/talermerchantdemos/blog/templates/index.html
@@ -31,7 +31,7 @@
<div>
{% for article in articles %}
<div class="notice">
- <h3><a href="{{ url_for('article', lang=article.lang, article_name=article.slug) }}">{{article.title}}</a></h3>
+ <h3><a href="{{ url_for('article', lang=article.lang, article_name=article.slug) }}" class="articleTitle">{{article.title}}</a></h3>
<p>{{ article.teaser|safe }} <a href="{{ url_for('article', lang=article.lang, 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..aabacc3
--- /dev/null
+++ b/talermerchantdemos/static/navbar.css
@@ -0,0 +1,75 @@
+/**
+ * @author Torsten Grothoff
+ * @name navbar.css
+ * @description Makes the navigation bar have styles
+ * @license LGPL-3.0-or-later
+ */
+.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, nav span, .navbtn {
+ border: none;
+ color: white;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ background: #00000000;
+ height: inherit;
+}
+
+nav a, nav span, .navbtn {
+ padding: 15px 32px;
+}
+
+nav a:hover, nav span:hover, .navbtn:hover {
+ background: #00000022;
+}
+
+nav a.active, nav span.active, .navbtn.active {
+ background-color: #4CAF50;
+}
+
+nav a.active:hover, nav span.active:hover, .navbtn.active:hover {
+ background: #377c39;
+}
+
+nav a, nav span, .navbtn {
+ cursor: pointer;
+}
+
+nav .right {
+ float: right;
+ margin-right: 5vw;
+}
+nav .right div.nav {
+ display: none;
+}
+nav .right div.nav:hover {
+ display: block;
+}
+
+nav .right:hover div.nav {
+ display: block;
+}
+
+/*# sourceMappingURL=navbar.css.map */
diff --git a/talermerchantdemos/static/navbar.css.map b/talermerchantdemos/static/navbar.css.map
new file mode 100644
index 0000000..1725bd6
--- /dev/null
+++ b/talermerchantdemos/static/navbar.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["navbar.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAEJ;EAiCI;EACA;;AAPA;EACI;;AAEJ;EACI;;;AAMJ;EACI","file":"navbar.css"} \ No newline at end of file
diff --git a/talermerchantdemos/static/navbar.scss b/talermerchantdemos/static/navbar.scss
new file mode 100644
index 0000000..312bf0c
--- /dev/null
+++ b/talermerchantdemos/static/navbar.scss
@@ -0,0 +1,103 @@
+/**
+ * @author Torsten Grothoff
+ * @name navbar.css
+ * @description Makes the navigation bar have styles
+ * @license LGPL-3.0-or-later
+ */
+
+
+.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, nav span,.navbtn {
+ border: none;
+ color: white;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ background: #00000000;
+ height: inherit;
+}
+nav a, nav span,.navbtn{
+ padding: 15px 32px;
+}
+
+nav a:hover, nav span:hover,.navbtn:hover {
+ background: #00000022;
+}
+
+nav a.active, nav span.active,.navbtn.active {
+ background-color: #4CAF50;
+}
+
+nav a.active:hover, nav span.active:hover,.navbtn.active:hover {
+ background: #377c39;
+}
+
+nav a, nav span,.navbtn {
+ cursor: pointer;
+}
+nav .right {
+ // input[type=checkbox] {
+ // // // opacity: 0;
+ // // // position: absolute;
+ // // position: relative;
+ // // left:0.5vw;
+ // // // top:0;
+ // // width: inherit;
+ // // height: inherit;
+
+ // // $sx: 1.5;
+ // // $sy: 1.5;
+
+ // // -ms-transform: scale($sx,$sy); /* IE */
+ // // -moz-transform: scale($sx,$sy); /* FF */
+ // // -webkit-transform: scale($sx,$sy); /* Safari and Chrome */
+ // // -o-transform: scale($sx,$sy); /* Opera */
+ // // transform: scale($sx,$sy);
+ // // float:right;
+ // opacity: 0;
+ // }
+ // input[type=checkbox]:checked + div.nav {
+ // display: block;
+ // }
+ // input[type=checkbox] + div.nav {
+ // display: none;
+ // }
+ div.nav {
+ display: none;
+ }
+ div.nav:hover {
+ display: block;
+ }
+ float:right;
+ margin-right: 5vw;
+}
+nav .right:hover {
+ div.nav {
+ display:block;
+ }
+}
+
+// input[type=checkbox]:checked + label {
+// color: red;
+// } \ No newline at end of file