diff options
| -rw-r--r-- | ihatemoney/static/css/main.css | 110 | ||||
| -rw-r--r-- | ihatemoney/static/images/book.svg | 1 | ||||
| -rw-r--r-- | ihatemoney/static/images/cog.svg | 1 | ||||
| -rw-r--r-- | ihatemoney/static/images/github.svg | 1 | ||||
| -rw-r--r-- | ihatemoney/static/images/mobile-alt.svg | 1 | ||||
| -rw-r--r-- | ihatemoney/static/images/plus.svg | 1 | ||||
| -rw-r--r-- | ihatemoney/templates/layout.html | 191 | ||||
| -rw-r--r-- | ihatemoney/templates/sidebar_table_layout.html | 2 |
8 files changed, 210 insertions, 98 deletions
diff --git a/ihatemoney/static/css/main.css b/ihatemoney/static/css/main.css index 47ede77..73ea513 100644 --- a/ihatemoney/static/css/main.css +++ b/ihatemoney/static/css/main.css @@ -7,7 +7,6 @@ body { /* For fixed navbar */ padding-top: 3.5rem; - padding-bottom: 2rem; } /* Navbar */ @@ -130,16 +129,91 @@ body { } footer { - margin-left: -15px; - margin-right: -15px; - margin-top: 30px; - position: fixed; - bottom: 0px; - height: 2em; width: 100%; + font: normal 16px sans-serif; + padding: 45px 50px; +} + +@media (min-width: 768px) { + footer { + padding-left: calc(25% + 50px); + } +} + +footer .footer-limiter { + max-width: 880px; + margin: 0 auto; +} + +footer .footer-left p { + color: #8f9296; + font-size: 14px; + margin: 0; +} + +/* Footer links */ +footer p.footer-links { + font-size: 18px; + font-weight: bold; + color: #ffffff; + margin: 0 0 10px; + padding: 0; +} + +footer p.footer-links a { + display: inline-block; + line-height: 1.8; + text-decoration: none; + color: inherit; +} + +footer .footer-right { + float: right; + margin-top: 6px; + max-width: 180px; +} + +footer .footer-right a { + display: inline-block; + width: 35px; + height: 35px; + background-color: #33383b; + border-radius: 2px; + + font-size: 20px; + color: #ffffff; text-align: center; - background-color: #fff; - opacity: 0.8; + line-height: 35px; + + margin-left: 3px; + border-radius: 50%; + opacity: 0.5; +} +footer .footer-right a:hover { + opacity: 1; +} + +footer .footer-left { + padding-top: 6px; + line-height: 35px; +} + +/* If you don't want the footer to be responsive, remove these media queries */ + +@media (max-width: 600px) { + footer .footer-left, + footer .footer-right { + text-align: center; + } + + footer .footer-right { + float: none; + margin: 0 auto 20px; + } + + footer .footer-left p.footer-links { + line-height: 1.8; + } } .identifier { @@ -330,14 +404,22 @@ tr:hover .extra-info { } .globe-europe svg { + fill: rgba(255, 255, 255, 0.5); +} +.navbar-nav .dropdown-toggle:hover .globe-europe svg { + fill: rgba(255, 255, 255, 0.75); +} +.navbar-dark .navbar-nav .show > .nav-link svg { + fill: white; +} +.icon svg { display: inline-block; border-bottom: 0.2em solid transparent; height: 1.2em; - fill: rgba(255,255,255,.5) } -.navbar-nav .dropdown-toggle:hover .globe-europe svg { - fill: rgba(255,255,255,.75); +.icon.plus svg { + margin-right: 3px; } -.navbar-dark .navbar-nav .show > .nav-link svg { +footer .icon svg { fill: white; -}
\ No newline at end of file +} diff --git a/ihatemoney/static/images/book.svg b/ihatemoney/static/images/book.svg new file mode 100644 index 0000000..d27fdae --- /dev/null +++ b/ihatemoney/static/images/book.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z"/></svg>
\ No newline at end of file diff --git a/ihatemoney/static/images/cog.svg b/ihatemoney/static/images/cog.svg new file mode 100644 index 0000000..fb5bd35 --- /dev/null +++ b/ihatemoney/static/images/cog.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"/></svg>
\ No newline at end of file diff --git a/ihatemoney/static/images/github.svg b/ihatemoney/static/images/github.svg new file mode 100644 index 0000000..7870c06 --- /dev/null +++ b/ihatemoney/static/images/github.svg @@ -0,0 +1 @@ +<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>
\ No newline at end of file diff --git a/ihatemoney/static/images/mobile-alt.svg b/ihatemoney/static/images/mobile-alt.svg new file mode 100644 index 0000000..e808459 --- /dev/null +++ b/ihatemoney/static/images/mobile-alt.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v312z"/></svg>
\ No newline at end of file diff --git a/ihatemoney/static/images/plus.svg b/ihatemoney/static/images/plus.svg new file mode 100644 index 0000000..95992e1 --- /dev/null +++ b/ihatemoney/static/images/plus.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"/></svg>
\ No newline at end of file diff --git a/ihatemoney/templates/layout.html b/ihatemoney/templates/layout.html index 10bb628..5f61949 100644 --- a/ihatemoney/templates/layout.html +++ b/ihatemoney/templates/layout.html @@ -1,6 +1,6 @@ {% import "forms.html" as forms %} <!DOCTYPE html> -<html> +<html class="h-100"> <head> <title>{{ _("Account manager") }}{% block title %}{% endblock %}</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> @@ -26,100 +26,125 @@ }); </script> </head> -<body> - <div class="container"> - <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark"> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> - <h1><a class="navbar-brand" href="{{ url_for("main.home") }}">#! money?</a></h1> - {% if g.project %} - <ul class="navbar-nav mr-auto"> +<body class="d-flex flex-column h-100"> + <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark"> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <h1><a class="navbar-brand" href="{{ url_for("main.home") }}">#! money?</a></h1> + {% if g.project %} + <ul class="navbar-nav mr-auto"> + <li class="nav-item dropdown"> + <a href="#" class="nav-link dropdown-toggle" id="navbarProjectsLinks" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <strong class="text-white">{{ g.project.name }}</strong> + <b class="caret"></b> + </a> + <ul class="dropdown-menu" aria-labelledby="navbarProjectsLinks"> + <li> + <a class="dropdown-item" href="{{ url_for("main.create_project") }}"> + <i class="icon plus">{{ static_include("images/plus.svg") | safe }}</i> + {{ _("Start a new project") }} + </a> + </li> + + {% if (session['projects'] | length) > 1 %} + <li class="dropdown-divider"></li> + <li class="dropdown-header">{{ _('Other projects :') }}</li> + {% for id, name in session['projects'] %} + {% if id != g.project.id %} + <li><a class="dropdown-item" href="{{ url_for("main.list_bills", project_id=id) }}">{{ _("switch to") }} {{ name }}</a></li> + {% endif %} + {% endfor %} + {% endif %} + </ul> + </li> + </ul> + {% endif %} + + <div class="collapse navbar-collapse" id="navbarToggler"> + <ul class="navbar-nav ml-auto mr-auto"> + {% if g.project %} + {% block navbar %} + <li class="nav-item{% if current_view == 'list_bills' %} active{% endif %}"><a class="nav-link" href="{{ url_for("main.list_bills") }}">{{ _("Bills") }}</a></li> + <li class="nav-item{% if current_view == 'settle_bill' %} active{% endif %}"><a class="nav-link" href="{{ url_for("main.settle_bill") }}">{{ _("Settle") }}</a></li> + <li class="nav-item{% if current_view == 'statistics' %} active{% endif %}"><a class="nav-link" href="{{ url_for("main.statistics") }}">{{ _("Statistics") }}</a></li> + <li class="nav-item{% if current_view == 'edit_project' %} active{% endif %}""><a class="nav-link" href="{{ url_for("main.edit_project") }}">{{ _("Settings") }}</a></li> + {% endblock %} + {% endif %} + </ul> + <ul class="navbar-nav ml-auto"> <li class="nav-item dropdown"> - <a href="#" class="nav-link dropdown-toggle" id="navbarProjectsLinks" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> - <strong class="text-white">{{ g.project.name }}</strong> + <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="langMenuButton"> + <i class="icon globe-europe">{{ static_include("images/globe.svg") | safe }}</i> + {% if g.lang %} + {{ locale_from_iso(g.lang).display_name | capitalize }} + {% else %} + {{ _('Languages') }} + {% endif %} <b class="caret"></b> </a> - <ul class="dropdown-menu" aria-labelledby="navbarProjectsLinks"> - <li><a class="dropdown-item" href="{{ url_for("main.create_project") }}">{{ _("Start a new project") }}</a></li> - - {% if (session['projects'] | length) > 1 %} - <li class="dropdown-divider"></li> - <li class="dropdown-header">{{ _('Other projects :') }}</li> - {% for id, name in session['projects'] %} - {% if id != g.project.id %} - <li><a class="dropdown-item" href="{{ url_for("main.list_bills", project_id=id) }}">{{ _("switch to") }} {{ name }}</a></li> + <div class="dropdown-menu" aria-labelledby="langMenuButton"> + <h6 class="dropdown-header">{{ _('Languages') }}</h6> + {% for lang in config['SUPPORTED_LANGUAGES'] %} + {% if g.lang != lang %} + <a class="dropdown-item" href="{{ url_for("main.change_lang", lang=lang)}}">{{ locale_from_iso(lang).display_name | capitalize }}</a> {% endif %} {% endfor %} - {% endif %} - </ul> + </div> </li> + {% if (session['projects'] | length) > 0 or session['is_admin'] %} + <li class="nav-item"> + <a class="nav-link" href="{{ url_for("main.exit") }}">{{ _("Logout") }}</a> + </li> + {% endif %} </ul> - {% endif %} + </div> + </nav> - <div class="collapse navbar-collapse" id="navbarToggler"> - <ul class="navbar-nav ml-auto mr-auto"> - {% if g.project %} - {% block navbar %} - <li class="nav-item{% if current_view == 'list_bills' %} active{% endif %}"><a class="nav-link" href="{{ url_for("main.list_bills") }}">{{ _("Bills") }}</a></li> - <li class="nav-item{% if current_view == 'settle_bill' %} active{% endif %}"><a class="nav-link" href="{{ url_for("main.settle_bill") }}">{{ _("Settle") }}</a></li> - <li class="nav-item{% if current_view == 'statistics' %} active{% endif %}"><a class="nav-link" href="{{ url_for("main.statistics") }}">{{ _("Statistics") }}</a></li> - <li class="nav-item{% if current_view == 'edit_project' %} active{% endif %}""><a class="nav-link" href="{{ url_for("main.edit_project") }}">{{ _("Settings") }}</a></li> - {% endblock %} - {% endif %} - </ul> - <ul class="navbar-nav ml-auto"> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="langMenuButton"> - <i class="globe-europe">{{ static_include("images/globe.svg") | safe }}</i> - {% if g.lang %} - {{ locale_from_iso(g.lang).display_name | capitalize }} - {% else %} - {{ _('Languages') }} - {% endif %} - <b class="caret"></b> - </a> - <div class="dropdown-menu" aria-labelledby="langMenuButton"> - <h6 class="dropdown-header">{{ _('Languages') }}</h6> - {% for lang in config['SUPPORTED_LANGUAGES'] %} - {% if g.lang != lang %} - <a class="dropdown-item" href="{{ url_for("main.change_lang", lang=lang)}}">{{ locale_from_iso(lang).display_name | capitalize }}</a> - {% endif %} - {% endfor %} - </div> - </li> - {% if (session['projects'] | length) > 0 or session['is_admin'] %} - <li class="nav-item"> - <a class="nav-link" href="{{ url_for("main.exit") }}">{{ _("Logout") }}</a> - </li> - {% endif %} - </ul> - </div> - </nav> + <div class="container-fluid flex-shrink-0"> + {% block body %} + <main class="content offset-1 col-10"> + {% block content %}{% endblock %} + </main> + {% endblock %} </div> -<div class="container-fluid"> -{% block body %} - <main class="content offset-1 col-10"> - {% block content %}{% endblock %} - </main> -</div> -{% endblock %} + <div class="messages"> + {% for message in get_flashed_messages() %} + <div class="flash alert alert-success">{{ message }}</div> + {% endfor %} + </div> -<div class="messages"> - {% for message in get_flashed_messages() %} - <div class="flash alert alert-success">{{ message }}</div> - {% endfor %} -</div> + {% block footer %} + <footer class="footer mt-auto py-3"> + <div class="footer-limiter"> + + <div class="footer-right"> + <a target="_blank" rel="noopener" n data-toggle="tooltip" data-placement="top" title="{{ _('Code') }}" href="https://github.com/spiral-project/ihatemoney"> + <i class="icon github">{{ static_include("images/github.svg") | safe }}</i> + </a> + <a target="_blank" rel="noopener" n data-toggle="tooltip" data-placement="top" title="{{ _('Mobile Application') }}" href="https://gitlab.com/eneiluj/moneybuster"> + <i class="icon mobile">{{ static_include("images/mobile-alt.svg") | safe }}</i> + </a> + <a target="_blank" rel="noopener" n data-toggle="tooltip" data-placement="top" title="{{ _('Documentation') }}" href="https://ihatemoney.readthedocs.io/en/latest/"> + <i class="icon book">{{ static_include("images/book.svg") | safe }}</i> + </a> + {% if g.show_admin_dashboard_link %} + <a target="_blank" rel="noopener" n data-toggle="tooltip" data-placement="top" title="{{ _('Administation Dashboard') }}" href="{{ url_for("main.dashboard") }}"> + <i class="icon admin">{{ static_include("images/cog.svg") | safe }}</i> + </a> + {% endif %} + </div> -{% block footer %} -<footer> - <p> - <a href="https://github.com/spiral-project/ihatemoney">{{ _("This is a free software") }}</a><span class="d-none d-sm-inline">, - {{ _("you can contribute and improve it!") }}</span> - </p> -</footer> -{% endblock %} + <div class="footer-left"> + <p> + <a href="https://github.com/spiral-project/ihatemoney">{{ _("\"I hate money\" is a free software") }}</a><span class="d-none d-sm-inline"></span>, + {{ _("you can contribute and improve it!") }}</span> + </p> + </div> + </div> + </footer> + {% endblock %} </body> </html> diff --git a/ihatemoney/templates/sidebar_table_layout.html b/ihatemoney/templates/sidebar_table_layout.html index 239acb3..9d588a3 100644 --- a/ihatemoney/templates/sidebar_table_layout.html +++ b/ihatemoney/templates/sidebar_table_layout.html @@ -1,7 +1,7 @@ {% extends "layout.html" %} {% block body %} -<div class="row" style="height: 100%"> +<div class="row"> <aside id="sidebar" class="sidebar col-xs-12 col-md-3 " style="height: 100%"> {% block sidebar %}{% endblock %} </aside> |
