diff options
author | Jonah Brüchert <jbb@kaidan.im> | 2022-10-22 21:43:17 +0200 |
---|---|---|
committer | Jonah Brüchert <jbb@kaidan.im> | 2022-10-22 22:45:25 +0200 |
commit | cd47946abdcc75f06bf61233aa5e50f6ecb77c70 (patch) | |
tree | eafe5633cd921cf0cb666c212e14ab9cf203a09f | |
parent | b6a9e83e6b84497f9ea842ea371908a478b34aaa (diff) | |
download | web-cd47946abdcc75f06bf61233aa5e50f6ecb77c70.tar.gz web-cd47946abdcc75f06bf61233aa5e50f6ecb77c70.tar.bz2 web-cd47946abdcc75f06bf61233aa5e50f6ecb77c70.zip |
Make layout mobile friendly
-rw-r--r-- | accounts/static/bootstrap-form.css | 67 | ||||
-rw-r--r-- | accounts/static/layout.css | 110 | ||||
-rw-r--r-- | accounts/static/spline.svg | 99 | ||||
-rw-r--r-- | accounts/templates/_macros.html | 2 | ||||
-rw-r--r-- | accounts/templates/base.html | 66 |
5 files changed, 202 insertions, 142 deletions
diff --git a/accounts/static/bootstrap-form.css b/accounts/static/bootstrap-form.css deleted file mode 100644 index fb5d24b..0000000 --- a/accounts/static/bootstrap-form.css +++ /dev/null @@ -1,67 +0,0 @@ -/*! - * based on - * Bootstrap v2.1.1 - * - * Copyright 2012 Twitter, Inc - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Designed and built with all the love in the world @twitter by @mdo and @fat. - */ - - -.form-horizontal .control-label, -.form-horizontal label { - float: left; - width: 20em; - text-align: right; -} - -.form-horizontal input, -.form-horizontal textarea, -.form-horizontal select { - display: inline-block; - *display: inline; - /* IE7 inline-block hack */ - - *zoom: 1; - margin-bottom: 0; - vertical-align: middle; -} -.control-group { - margin-bottom: .4em; -} -.form-horizontal .control-group:before, -.form-horizontal .control-group:after { - display: table; - content: ""; - line-height: 0; -} -.form-horizontal .control-group:after { - clear: both; -} -.form-horizontal .control-label { - float: left; - width: 20em; - text-align: right; -} -.form-horizontal .controls { - *display: inline-block; - *padding-left: 20px; - margin-left: 21em; - *margin-left: 0; -} -.form-horizontal .controls:first-child { - *padding-left: 11em; -} -.form-horizontal .help-block { - margin-bottom: 0; -} -.form-horizontal input + .help-block, -.form-horizontal select + .help-block, -.form-horizontal textarea + .help-block { - margin-top: 10px; -} -.form-horizontal .form-actions { - padding-left: 21em; -} diff --git a/accounts/static/layout.css b/accounts/static/layout.css index b4ac7b6..5d260c8 100644 --- a/accounts/static/layout.css +++ b/accounts/static/layout.css @@ -32,48 +32,64 @@ html, body { /* header */ -#header-background { - background-color: #333; - width: 100%; - height: 4em; - margin-bottom: 4em; -} -header { - position: absolute; - top: 0; - margin: 0; - padding: 1em 0; - width: 100%; -} -header h1 { - font-size: 2em; - margin: 0; - max-width: 50%; /* make image smaller on small screens */ - min-height: 3em; - padding: 0 1em 0; - display: inline-block; - background-color: #333; - border-bottom-right-radius: .8em; -} -header h1 img { - margin: 0; - max-width: 100%; -} -header #roundcornerb, -header #roundcornerw { - display: inline-block; - width: 50px; - height: 50px; - position: absolute; - top: 4em; - margin: 0; -} -header #roundcornerb { - background-color: #333; -} -header #roundcornerw { - background-color: white; - border-top-left-radius: 1.6em; +@media (min-width: 800px) { + #header-background { + background-color: #333; + width: 100%; + height: 4em; + margin-bottom: 4em; + } + header { + position: absolute; + top: 0; + margin: 0; + padding: 1em 0; + width: 100%; + } + header h1 { + font-size: 2em; + margin: 0; + min-height: 3em; + padding: 0 1em 0; + display: inline-block; + background-color: #333; + border-bottom-right-radius: .8em; + } + header h1 img { + margin: 0; + max-width: 100%; + height: 2em; + } + header #roundcornerb, + header #roundcornerw { + display: inline-block; + width: 50px; + height: 50px; + position: absolute; + top: 4em; + margin: 0; + } + header #roundcornerb { + background-color: #333; + } + header #roundcornerw { + background-color: white; + border-top-left-radius: 1.6em; + } +} + +@media (max-width: 800px) { + #header-background { + background-color: #333; + width: 100%; + height: 3em; + margin-bottom: 4em; + } + header h1 img { + margin: 0; + max-width: 100%; + height: 1.5em; + } } header nav#mainnav { @@ -105,11 +121,21 @@ header nav#mainnav ul li:not(:last-child):after { /* content */ +@media (min-width: 800px) { #content { margin: 0 auto; padding-top: 1em; max-width: 50em; } +} + +@media (max-width: 800px) { +#content { + margin: 0 auto; + padding: 1em; + max-width: 50em; +} +} #content h1 { font-size: 1.8em; diff --git a/accounts/static/spline.svg b/accounts/static/spline.svg new file mode 100644 index 0000000..bcc5581 --- /dev/null +++ b/accounts/static/spline.svg @@ -0,0 +1,99 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/" + width="1100" height="320" viewBox="-150 -195 1100 320"> + + <title>spline</title> + + <defs> + <style> + #bus { stroke: white; fill: none; } + .bus_circ { stroke-width: 23px; } + .bus_conn { stroke-width: 26px; } + .bus_mid { stroke-width: 25px; } + + #letters { stroke: none; fill: #4f0; } + #idot { fill: white; } + #_ { fill: white; } + </style> + </defs> + <metadata> + <rdf:RDF> + <cc:Work> + <dc:title>spline</dc:title> + <dc:description>spline.de</dc:description> + </cc:Work> + </rdf:RDF> + </metadata> + + <g id="bus"> + <circle cx="-80" cy="-75" r="25" class="bus_circ" /> + <circle cx="+80" cy="-75" r="25" class="bus_circ" /> + <circle cx=" 0" cy="+75" r="25" class="bus_circ" /> + + <line x1="-80" y1="-50" x2="-80" y2="0" class="bus_conn" /> + <line x1="+80" y1="-50" x2="+80" y2="0" class="bus_conn" /> + <line x1=" 0" y1="+50" x2=" 0" y2="0" class="bus_conn" /> + + <line x1="-130" y1="0" x2="+130" y2="0" class="bus_mid" /> + </g> + + <g id="letters" transform="translate(-367,-701.49937)"> + <path id="s" d="M 612.98938,589.24933 C 612.98938,589.24933 + 584.98936,583.49933 566.73938,583.49933 543.7394,583.49933 + 520.73938,594.49936 520.73938,622.99933 520.73938,648.7493 + 537.48941,655.24933 565.48938,660.99933 584.48936,664.74932 + 588.23938,666.99934 588.23938,674.74933 588.23938,684.74932 + 581.98936,688.99937 565.48938,688.99937 552.73939,688.99937 + 522.98938,688.99937 522.98938,688.99937 L 522.98938,713.99937 + C 522.98938,713.99937 550.4894,713.99937 568.23938,713.99937 + 596.73935,713.99937 616.73938,703.2493 616.73938,673.99933 + 616.73938,649.24935 604.98935,641.24932 573.98938,635.49933 + 554.2394,631.99933 549.23938,629.74932 549.23938,622.24933 + 549.23938,612.99934 555.98939,608.49933 568.73938,608.49933 + 581.73937,608.49933 612.48938,612.49933 612.48938,612.49933 + L 612.98938,589.24933" /> + <path id="p" d="M 650.52454,764.74933 679.02454,764.74933 + 679.02454,711.99933 C 680.27453,712.24933 690.52455,713.99933 + 700.77454,713.99933 737.0245,713.99933 755.77454,697.49928 + 755.77454,647.49933 755.77454,603.74937 739.27451,583.49933 + 708.77454,583.49933 694.52455,583.49933 679.02454,592.99933 + 679.02454,592.99933 L 679.02454,586.49933 650.52454,586.49933 + 650.52454,764.74933 M 703.52454,609.24933 C 719.52452,609.24933 + 726.77454,624.24935 726.77454,647.49933 726.77454,674.2493 + 720.27451,688.99933 698.77454,688.99933 689.02455,688.99933 + 680.02454,687.24933 679.02454,686.99933 L 679.02454,616.24933 + C 679.02454,616.24933 692.52455,609.24933 703.52454,609.24933" /> + <path id="l" d="M 785.005,711.24933 813.505,711.24933 813.505,534.74933 + 785.005,534.74933 785.005,711.24933" /> + <path id="i" d="M 849.69641,711.24933 878.19641,711.24933 + 878.19641,586.49933 849.69641,586.49933 849.69641,711.24933" /> + <circle id="idot" cx="863.94641" cy="552.97433" r="18" /> +<!--<path id="idot" d="M 849.69641,567.74933 878.19641,567.74933 + 878.19641,537.99933 849.69641,537.99933 849.69641,567.74933" />--> + <path id="n" d="M 944.64954,711.24933 944.64954,615.74933 C + 944.64954,615.74933 960.14955,609.49933 971.14954,609.49933 + 987.64952,609.49933 990.64954,624.99935 990.64954,646.24933 L + 990.64954,711.24933 1019.1495,711.24933 1019.1495,645.99933 C + 1019.1495,606.49937 1009.3995,583.49933 976.64954,583.49933 + 962.89955,583.49933 944.64954,592.74933 944.64954,592.74933 L + 944.64954,586.49933 916.14954,586.49933 916.14954,711.24933 + 944.64954,711.24933" /> + <path id="e" d="M 1103.5245,688.99933 C 1084.0246,688.99933 + 1077.0245,677.24931 1076.7745,660.74933 L 1151.0245,660.74933 + 1153.0245,640.49933 C 1153.0245,604.49936 1136.0245,583.49933 + 1101.0245,583.49933 1066.2746,583.49933 1048.0245,608.24937 + 1048.0245,650.24933 1048.0245,691.74929 1062.5246,713.99918 + 1101.2745,713.99918 1125.2745,713.99918 1149.873,713.99918 + 1149.873,713.99918 L 1149.873,688.99918 C 1149.873,688.99918 + 1121.2745,688.99918 1103.5245,688.99918 M 1076.5245,638.99933 C + 1076.7745,618.99935 1083.7746,607.49933 1101.0245,607.49933 + 1118.2745,607.49933 1124.7745,618.24935 1124.7745,638.99933 L + 1076.5245,638.99933" /> + <path id="_" d="M 1180.7736,688.99881 1180.7736,713.99918 + 1299.774,713.99918 1299.7736,688.99881 1180.7736,688.99918" /> + </g> + +</svg> diff --git a/accounts/templates/_macros.html b/accounts/templates/_macros.html index 31d388e..f92a623 100644 --- a/accounts/templates/_macros.html +++ b/accounts/templates/_macros.html @@ -17,7 +17,7 @@ <div class="control-group"> <label class="form-label">{{ field.label }}</label> <div class="controls"> - {{ field(class_="form-control", **kwargs)|safe }} + {{ field(class_="form-control mb-4", **kwargs)|safe }} {{ render_errors(field.errors) }} </div> </div> diff --git a/accounts/templates/base.html b/accounts/templates/base.html index baf1656..10c146e 100644 --- a/accounts/templates/base.html +++ b/accounts/templates/base.html @@ -1,8 +1,9 @@ -{%- set styles = ['layout.css', 'bootstrap-form.css', 'bootstrap.min.css'] + styles|default([]) %} +{%- set styles = ['layout.css', 'bootstrap.min.css'] + styles|default([]) %} {%- set scripts = ['script.js', 'jquery-1.8.2.min.js'] + scripts|default([]) %} <!doctype html> <html> <head> <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width"> <title>{% if title %}{{ title }} – {% endif %}spline accounts</title> {%- for script in scripts %} <script type="text/javascript" src="{{ url_for('static', filename=script) }}"></script> @@ -13,40 +14,41 @@ </head> <body> - <div id="header-background"> </div> - <header> - <h1> - <a href="{{ url_for('default.index') }}"> - <img src="{{ url_for('static', filename='logo.png') }}" alt="spline accounts" /> - </a> - </h1> - <span id="roundcornerb"> </span> - <span id="roundcornerw"> </span> + <div id="header-background"> + <header> + <h1> + <a href="{{ url_for('default.index') }}"> + <img src="{{ url_for('static', filename='spline.svg') }}" alt="spline accounts" /> + </a> + </h1> + <span id="roundcornerb"> </span> + <span id="roundcornerw"> </span> - <nav id="mainnav"> - <ul> - <li><a href="http://spline.de">spline.de</a></li> - <li><a href="{{ url_for('default.about') }}">FAQ</a></li> - </ul> - </nav> + <nav id="mainnav"> + <ul> + <li><a href="http://spline.de">spline.de</a></li> + <li><a href="{{ url_for('default.about') }}">FAQ</a></li> + </ul> + </nav> - {%- if not no_login_message %} - <nav id="usermenu"> - <ul> - {%- if current_user.is_authenticated() %} - <li>Angemeldet als <strong>{{ current_user.uid }}</strong></li> - {%- if current_user.uid in config.get('ADMIN_USERS', []) %} - <li><a href="{{ url_for('admin.index') }}">Admin</a></li> + {%- if not no_login_message %} + <nav id="usermenu"> + <ul> + {%- if current_user.is_authenticated %} + <li>Angemeldet als <strong>{{ current_user.uid }}</strong></li> + {%- if current_user.uid in config.get('ADMIN_USERS', []) %} + <li><a href="{{ url_for('admin.index') }}">Admin</a></li> + {%- endif %} + <li><a href="{{ url_for('login.logout') }}">Abmelden</a></li> + {%- else %} + <li>Nicht angemeldet</li> + <li><a href="{{ url_for('login.login') }}">Login</a></li> {%- endif %} - <li><a href="{{ url_for('login.logout') }}">Abmelden</a></li> - {%- else %} - <li>Nicht angemeldet</li> - <li><a href="{{ url_for('login.login') }}">Login</a></li> - {%- endif %} - </ul> - </nav> - {%- endif %} - </header> + </ul> + </nav> + {%- endif %} + </header> + </div> <section id="content"> {% with messages = get_flashed_messages(with_categories=true) %} |