From c67c5590c11b73e4fd5abba248dc2dfe15e76929 Mon Sep 17 00:00:00 2001
From: ornanovitch <ornanovitch@felinn.org>
Date: Sat, 20 Feb 2021 15:19:47 +0100
Subject: [PATCH] base templates
---
assets/app.js | 1 +
assets/vendor.js | 2 +-
hiboo/account/templates/account_home.html | 2 +-
.../templates/application_pick.html | 26 ++--
hiboo/templates/base.html | 145 ++++++++++--------
hiboo/templates/macros.html | 20 +--
hiboo/templates/sidebar.html | 84 +++++-----
package.json | 1 +
webpack.config.js | 2 +-
9 files changed, 150 insertions(+), 133 deletions(-)
diff --git a/assets/app.js b/assets/app.js
index 8419eed..d98b199 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -1,4 +1,5 @@
require('./app.scss');
+require('@fortawesome/fontawesome-free/css/all.min.css');
import $ from "jquery";
import 'bootstrap';
diff --git a/assets/vendor.js b/assets/vendor.js
index 90073f5..84282e4 100644
--- a/assets/vendor.js
+++ b/assets/vendor.js
@@ -5,7 +5,7 @@ import jQuery from 'jquery';
import 'bootstrap/dist/js/bootstrap.min.js';
// FA
-import '@fortawesome/fontawesome-free/css/fontawesome.min.css';
+import '@fortawesome/fontawesome-free/css/all.min.css';
// select2
import 'select2/dist/css/select2.min.css'
diff --git a/hiboo/account/templates/account_home.html b/hiboo/account/templates/account_home.html
index afdc5c2..7ad0f15 100644
--- a/hiboo/account/templates/account_home.html
+++ b/hiboo/account/templates/account_home.html
@@ -9,7 +9,7 @@
<section class="content">
<div class="row">
<div class="col-md-6 col-xs-12">
- {{ macros.infobox(_("Account age"), "{} days".format((current_user.created_at.today() - current_user.created_at).total_seconds() // 86400), "aqua", "calendar") }}
+ {{ macros.infobox(_("Account age"), "{} days".format((current_user.created_at.today() - current_user.created_at).total_seconds() // 86400), "blue", "calendar") }}
</div>
<div class="col-md-6 col-xs-12">
{{ macros.infobox(_("Profile count"), current_user.profiles.filter_by(status="active").count(), "red", "users") }}
diff --git a/hiboo/application/templates/application_pick.html b/hiboo/application/templates/application_pick.html
index 8e87f3b..48ad558 100644
--- a/hiboo/application/templates/application_pick.html
+++ b/hiboo/application/templates/application_pick.html
@@ -4,18 +4,22 @@
{% block content %}
<div class="row">
-{% for application_id, application in applications.items() %}
-<div class="col-md-4 col-s-6 col-xs-12">
- <div class="box box-widget widget-user-2">
- <div class="widget-user-header bg-{{ macros.colors[loop.index0 % 7] }}">
- <a href="{{ url_for(route, application_id=application_id, **kwargs) }}" style="opacity: 0.8" class="btn btn-lg bg-gray text-black pull-right">
- {% trans %}Select{% endtrans %}
- </a>
- <h3 class="widget-header-username">{{ application.name }}</h3>
- <h5 class="widget-header-desc">{{ application.__doc__ }} </h5>
+ {% for application_id, application in applications.items() %}
+ <div class="col-md-4 col-s-6 col-xs-12">
+ <div class="card bg-{{ macros.colors[loop.index0 % 7] }}">
+ <div class="card-header">
+ <h3>{{ application.name }}</h3>
+ </div>
+ <div class="card-body">
+ <p class="card-text">
+ {{ application.__doc__ }}
+ </p>
+ <a href="{{ url_for(route, application_id=application_id, **kwargs) }}" style="opacity: 0.8" class="btn btn-secondary">
+ {% trans %}Select{% endtrans %}
+ </a>
+ </div>
</div>
</div>
-</div>
-{% endfor %}
+ {% endfor %}
</div>
{% endblock %}
diff --git a/hiboo/templates/base.html b/hiboo/templates/base.html
index c08a33a..c5b2ef7 100644
--- a/hiboo/templates/base.html
+++ b/hiboo/templates/base.html
@@ -8,78 +8,89 @@
<link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
<title>{{ config['WEBSITE_NAME'] }}</title>
</head>
- <body class="hold-transition skin-red sidebar-mini">
- <div class="wrapper">
+ <body class="sidebar-mini layout-fixed layout-navbar-fixed">
+ <div class="wrapper">
- <header class="main-header">
- <a href="#" class="logo">
- <span class="logo-mini">H</span>
- <span class="logo-lg">Hiboo</span>
- </a>
+ <nav class="main-header navbar navbar-expand navbar-danger navbar-light">
+ <ul class="navbar-nav">
+ <li class="nav-item">
+ <a href="#" class="nav-link" data-widget="push-menu" role="button">
+ <i class="fas fa-bars"></i>
+ <span class="sr-only">{% trans %}Toggle navigation{% endtrans %}</span>
+ </a>
+ </li>
+ </ul>
+ <ul class="navbar-nav ml-auto">
+ {% if current_user.is_authenticated %}
+ <li class="nav-item user">
+ <div class="nav-link"><i class="fa fa-user"></i> {{ current_user.username }}</div>
+ </li>
+ <li class="nav-item user">
+ <a href="{{ url_for("account.signout") }}" class="nav-link">
+ <i class="fa fa-sign-out"></i>
+ {% trans %}Sign out{% endtrans %}
+ </a>
+ </li>
+ {% else %}
+ <li class="nav-item user">
+ <a href="{{ url_for("account.signin") }}" class="nav-link">
+ <i class="fa fa-sign-in"></i>
+ {% trans %}Sign in{% endtrans %}
+ </a>
+ </li>
+ {% endif %}
+ </ul>
+ </nav>
- <nav class="navbar navbar-static-top">
- <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
- <span class="sr-only">{% trans %}Toggle navigation{% endtrans %}</span>
- </a>
- <div class="navbar-custom-menu">
- <ul class="nav navbar-nav">
- {% if current_user.is_authenticated %}
- <li class="dropdown user">
- <a class="dropdown-toggle">
- <i class="fa fa-user"></i>{{ current_user.username }}
- </a>
- </li>
- <li class="dropdown user">
- <a href="{{ url_for("account.signout") }}" class="dropdown-toggle">
- <i class="fa fa-sign-out"></i>
- {% trans %}Sign out{% endtrans %}
- </a>
- </li>
- {% else %}
- <li class="dropdown user">
- <a href="{{ url_for("account.signin") }}" class="dropdown-toggle">
- <i class="fa fa-sign-in"></i>
- {% trans %}Sign in{% endtrans %}
- </a>
- </li>
- {% endif %}
- </ul>
- </div>
- </nav>
-
- </header>
-
- <aside class="main-sidebar">
- <section class="sidebar">
- <ul class="sidebar-menu" data-widget="tree">
- {% include "sidebar.html" %}
- </ul>
- </section>
- </aside>
+ <aside class="main-sidebar sidebar-dark-primary elevation-4">
+ <a href="#" class="brand-link logo-switch">
+ <span class="brand-text-xl logo-xs">H</span>
+ <span class="brand-text-xs logo-xl">Hiboo</span>
+ </a>
+ <div class="sidebar os-host os-theme-light os-host-overflow os-host-overflow-y os-host-resize-disabled os-host-scrollbar-horizontal-hidden os-host-transition">
+ <div class="os-padding">
+ <div class="os-viewport os-viewport-native-scrollbars-invisible">
+ <div class="os-content" style="padding: 0px 8px; height: 100%; width: 100%;">
+ <nav class="mt-2">
+ <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
+ {% include "sidebar.html" %}
+ </ul>
+ </nav>
+ </div>
+ </div>
+ </div>
+ </div>
+ </aside>
- <div class="content-wrapper">
- <section class="content-header">
- <div class="pull-right">
- {% block actions %}
- {% endblock %}
+ <div class="content-wrapper">
+ <section class="content-header">
+ <div class="container-fluid">
+ <div class="d-flex justify-content-between">
+ <h1>
+ {% block title %}{{ title }}{% endblock %}
+ <small>{% block subtitle %}{{ subtitle }}{% endblock %}</small>
+ </h1>
+ <div>
+ {% block actions %}
+ {% endblock %}
+ </div>
+ </div>
+ </div>
+ </section>
+ <section class="content">
+ <div class="container-fluid">
+ {% for category, message in get_flashed_messages(with_categories=True) or [] %}
+ <div class="alert alert-{{ category or "info" }}">{{ message }}</div>
+ {% endfor %}
+ {% block content %}{% endblock %}
+ </div>
+ </section>
</div>
- <h1>
- {% block title %}{{ title }}{% endblock %}
- <small>{% block subtitle %}{{ subtitle }}{% endblock %}</small>
- </h1>
- </section>
- <section class="content container-fluid">
- {% for category, message in get_flashed_messages(with_categories=True) or [] %}
- <div class="alert alert-{{ category or "info" }}">{{ message }}</div>
- {% endfor %}
- {% block content %}{% endblock %}
- </section>
- </div>
- <footer class="main-footer">
- {% trans %}Hiboo is free software distributed under the MIT license{% endtrans %}
- </footer>
- </div>
+ <footer class="main-footer">
+ {% trans %}Hiboo is free software distributed under the MIT license{% endtrans %}
+ </footer>
+ </div>
<script src="{{ url_for('static', filename='vendor.js') }}"></script>
<script src="{{ url_for('static', filename='app.js') }}"></script>
diff --git a/hiboo/templates/macros.html b/hiboo/templates/macros.html
index 1bf87ff..dc372f3 100644
--- a/hiboo/templates/macros.html
+++ b/hiboo/templates/macros.html
@@ -1,20 +1,20 @@
{% set colors = ['blue', 'green', 'orange', 'teal', 'red', 'purple', 'maroon'] %}
{% macro timeline(events, public_only=True) %}
-<ul class="timeline">
+<div class="timeline">
{% set dates = [] %}
{% for event in events | reverse %}
{% if event.public or not public_only %}
{% if not event.created_at.date() == dates[-1] %}
{% set _ = dates.append(event.created_at.date()) %}
- <li class="time-label">
+ <div class="time-label">
<span class="bg-red">{{ event.created_at.date() }}</span>
- </li>
+ </div>
{% endif %}
- <li>
- <i class="fa fa-{{ {"signup": "address-card-o", "password": "lock"}[event.category] }} bg-blue"></i>
+ <div>
+ <i class="fa fa-{{ {"signup": "address-card", "password": "lock"}[event.category] }} bg-blue"></i>
<div class="timeline-item">
- <span class="time"><i class="fa fa-clock-o"></i> {{ event.created_at.time().strftime("%H:%M") }}</span>
+ <span class="time"><i class="fa fa-clock"></i> {{ event.created_at.time().strftime("%H:%M") }}</span>
<h3 class="timeline-header">
<strong>{{ event.actor.username or event.user.username }}</strong>
{{ event.description }}
@@ -25,10 +25,10 @@
</div>
{% endif %}
</div>
- </li>
+ </div>
{% endif %}
{% endfor %}
-</ul>
+</div>
{% endmacro %}
{% macro profile_status(profile) %}
@@ -40,13 +40,13 @@
<i class="fa fa-arrow-right"></i>
<span class="badge bg-{{ target[0] }}">{{ target[1] }}</span>
{% if profile.transition_step == profile.INIT %}
- <i class="fa fa-clock-o"></i> {{ transition.delta(profile) }}
+ <i class="fa fa-clock"></i> {{ transition.delta(profile) }}
{% elif profile.transition_step == profile.START %}
<i class="fa fa-rocket"></i>
{% elif profile.transition_step == profile.DONE %}
<i class="fa fa-check"></i>
{% elif profile.transition_step == profile.MANUAL %}
- <a href="{{ url_for("profile.complete_transition", profile_uuid=profile.uuid) }}"><i class="fa fa-hand-o-up"></i></a>
+ <a href="{{ url_for("profile.complete_transition", profile_uuid=profile.uuid) }}"><i class="fa fa-hand-point-up"></i></a>
{% endif %}
{% endif %}
{% endmacro %}
diff --git a/hiboo/templates/sidebar.html b/hiboo/templates/sidebar.html
index 3b118ac..4ef0892 100644
--- a/hiboo/templates/sidebar.html
+++ b/hiboo/templates/sidebar.html
@@ -1,75 +1,75 @@
-<li class="header">{% trans %}Account{% endtrans %}</li>
{% if current_user.is_authenticated %}
-<li>
- <a href="{{ url_for("account.home") }}">
- <i class="fa fa-home"></i> <span>{% trans %}My account{% endtrans %}</span>
+<li class="nav-header text-uppercase">{% trans %}Account{% endtrans %}</li>
+<li class="nav-item">
+ <a class="nav-link" href="{{ url_for("account.home") }}">
+ <i class="nav-icon fa fa-home"></i> <span>{% trans %}My account{% endtrans %}</span>
</a>
</li>
-<li>
- <a href="{{ url_for("account.profiles") }}">
- <i class="fa fa-address-card"></i> <span>{% trans %}My profiles{% endtrans %}</span>
+<li class="nav-item">
+ <a class="nav-link" href="{{ url_for("account.profiles") }}">
+ <i class="nav-icon fa fa-address-card"></i> <span>{% trans %}My profiles{% endtrans %}</span>
</a>
</li>
-<li>
- <a href="{{ url_for("account.contact") }}">
- <i class="fa fa-envelope"></i> <span>{% trans %}My contact info{% endtrans %}</span>
+<li class="nav-item">
+ <a class="nav-link" href="{{ url_for("account.contact") }}">
+ <i class="nav-icon fa fa-envelope"></i> <span>{% trans %}My contact info{% endtrans %}</span>
</a>
</li>
-<li>
- <a href="{{ url_for("account.password") }}">
- <i class="fa fa-lock"></i> <span>{% trans %}Change password{% endtrans %}</span>
+<li class="nav-item">
+ <a class="nav-link" href="{{ url_for("account.password") }}">
+ <i class="nav-icon fa fa-lock"></i> <span>{% trans %}Change password{% endtrans %}</span>
</a>
</li>
-<li>
- <a href="{{ url_for("account.signout") }}">
- <i class="fa fa-sign-out"></i> <span>{% trans %}Sign out{% endtrans %}</span>
+<li class="nav-item">
+ <a class="nav-link" href="{{ url_for("account.signout") }}">
+ <i class="nav-icon fa fa-sign-out-alt"></i> <span>{% trans %}Sign out{% endtrans %}</span>
</a>
</li>
{% else %}
-<li>
- <a href="{{ utils.url_for("account.signup") }}">
- <i class="fa fa-address-card-o"></i> <span>{% trans %}Sign up{% endtrans %}</span>
+<li class="nav-item">
+ <a class="nav-link" href="{{ utils.url_for("account.signup") }}">
+ <i class="nav-icon fa fa-address-card-o"></i> <span>{% trans %}Sign up{% endtrans %}</span>
</a>
</li>
-<li>
- <a href="{{ utils.url_for("account.signin") }}">
- <i class="fa fa-sign-in"></i> <span>{% trans %}Sign in{% endtrans %}</span>
+<li class="nav-item">
+ <a class="nav-link" href="{{ utils.url_for("account.signin") }}">
+ <i class="nav-icon fa fa-sign-in"></i> <span>{% trans %}Sign in{% endtrans %}</span>
</a>
</li>
{% endif %}
{% if current_user.is_admin %}
-<li class="header">{% trans %}Admin{% endtrans %}</li>
-<li>
- <a href="{{ url_for("service.list") }}">
- <i class="fa fa-th-large"></i> <span>{% trans %}Services{% endtrans %}</span>
+<li class="nav-header text-uppercase">{% trans %}Admin{% endtrans %}</li>
+<li class="nav-item">
+ <a class="nav-link" href="{{ url_for("service.list") }}">
+ <i class="nav-icon fa fa-th-large"></i> <span>{% trans %}Services{% endtrans %}</span>
</a>
</li>
-<li>
- <a href="{{ url_for("user.list") }}">
- <i class="fa fa-users"></i> <span>{% trans %}Users{% endtrans %}</span>
+<li class="nav-item">
+ <a class="nav-link" href="{{ url_for("user.list") }}">
+ <i class="nav-icon fa fa-users"></i> <span>{% trans %}Users{% endtrans %}</span>
</a>
</li>
-<li>
- <a href="{{ url_for("profile.list_for_status", status="request") }}">
- <i class="fa fa-hourglass-2"></i> <span>{% trans %}Requested profiles{% endtrans %}</span>
+<li class="nav-item">
+ <a class="nav-link" href="{{ url_for("profile.list_for_status", status="request") }}">
+ <i class="nav-icon fa fa-hourglass-half"></i> <span>{% trans %}Requested profiles{% endtrans %}</span>
</a>
</li>
-<li>
- <a href="{{ url_for("profile.list_for_status", status="blocked") }}">
- <i class="fa fa-minus-circle"></i> <span>{% trans %}Blocked profiles{% endtrans %}</span>
+<li class="nav-item">
+ <a class="nav-link" href="{{ url_for("profile.list_for_status", status="blocked") }}">
+ <i class="nav-icon fa fa-minus-circle"></i> <span>{% trans %}Blocked profiles{% endtrans %}</span>
</a>
</li>
{% endif %}
-<li class="header">{% trans %}About{% endtrans %}</li>
-<li>
- <a href="#">
- <i class="fa fa-book"></i> <span>{% trans %}User guide{% endtrans %}</span>
+<li class="nav-header text-uppercase">{% trans %}About{% endtrans %}</li>
+<li class="nav-item">
+ <a class="nav-link" href="#">
+ <i class="nav-icon fa fa-book"></i> <span>{% trans %}User guide{% endtrans %}</span>
</a>
</li>
-<li>
- <a href="#">
- <i class="fa fa-book"></i> <span>{% trans %}Admin guide{% endtrans %}</span>
+<li class="nav-item">
+ <a class="nav-link" href="#">
+ <i class="nav-icon fa fa-book"></i> <span>{% trans %}Admin guide{% endtrans %}</span>
</a>
</li>
diff --git a/package.json b/package.json
index 2cef5ef..515e9c2 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"select2": "^4.1.0-rc.0",
+ "url-loader": "^4.1.1",
"webpack": "^5.22.0",
"webpack-cli": "^4.5.0"
}
diff --git a/webpack.config.js b/webpack.config.js
index 759228d..ca3e669 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -38,7 +38,7 @@ module.exports = {
test: require.resolve("jquery"),
loader: "expose-loader",
options: {
- exposes: ["$", "jQuery"],
+ exposes: ["$", "jquery"],
},
}
]
--
GitLab