redesign of all pages that are rendered by backend code

This commit is contained in:
Levko Kravets 2018-02-15 21:48:15 +02:00
parent d6cc7489b1
commit f1aad2545e
11 changed files with 282 additions and 201 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"><defs><path id="a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z"/><path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/><path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/><path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/></svg>

After

Width:  |  Height:  |  Size: 688 B

View File

@ -0,0 +1,90 @@
/** LESS Plugins **/
@import 'inc/less-plugins/for';
/** Load Main Bootstrap LESS files **/
@import '~bootstrap/less/bootstrap';
@import '~material-design-iconic-font/dist/css/material-design-iconic-font.css';
@import 'inc/variables';
@import 'inc/mixins';
@import 'inc/font';
@import 'inc/print';
@import 'inc/bootstrap-overrides';
@import 'inc/base';
@import 'inc/generics';
@import 'inc/form';
@import 'inc/button';
@import 'inc/404';
@import 'inc/ie-warning';
@import 'inc/flex';
@import 'redash/redash-newstyle';
@default-spacing: 26px;
html, body {
height: 100%;
margin: 0;
padding: 0;
background: #F6F8F9;
}
.m-t-default {
margin-top: @default-spacing !important;
}
.m-b-default {
margin-bottom: @default-spacing !important;
}
.m-l-default {
margin-left: @default-spacing !important;
}
.m-r-default {
margin-right: @default-spacing !important;
}
hr {
border-top-width: 2px;
margin: @default-spacing 0;
}
.tiled {
padding: @default-spacing;
}
.header {
margin-top: -100px;
img {
height: 40px;
}
}
.fixed-width-page {
width: 500px;
}
.login-button {
display: flex;
align-items: center;
justify-content: center;
margin: 20px 0;
&:first-of-type {
margin-top: 0;
}
&:last-of-type {
margin-bottom: 0;
}
img {
height: 25px;
margin-right: 5px;
}
&:before {
content: "";
display: inline-block;
height: 25px;
}
}

View File

@ -1,8 +1,16 @@
{% extends "layouts/signed_out.html" %}
{% block title %}Error :-({% endblock %}
{% block content %}
<h2>Error :-(</h2>
<p class="lead">
{{ error_message }}
</p>
<div class="fixed-width-page">
<div class="bg-white tiled error-state m-t-0">
<div class="error-state__icon">
<i class="zmdi zmdi-alert-circle-o"></i>
</div>
<div class="error-state__details">
<h4>{{ error_message }}</h4>
</div>
</div>
</div>
{% endblock %}

View File

@ -1,21 +1,21 @@
{% extends "layouts/signed_out.html" %}
{% block title %}Password Reset{% endblock %}
{% block content %}
{% if submitted %}
<h2>Password Reset</h2>
<hr>
<p class="lead">
If we found an account associated with that email address, you will find an email from us in your inbox shortly.
</p>
{% else %}
<h2>Password Reset</h2>
<hr>
<form role="form" method="post">
<div class="form-group ">
<label for="email">Enter the email address you used for this account:</label>
<input type="email" class="form-control" name="email" value="{{email}}">
</div>
<button type="submit" class="btn btn-primary">Reset my password</button>
</form>
{% endif %}
<div class="fixed-width-page">
<div class="bg-white tiled">
{% if submitted %}
<div>
If we found an account associated with that email address, you will find an email from us in your inbox shortly.
</div>
{% else %}
<form role="form" method="post">
<div class="form-group">
<label for="email">Enter the email address you used for this account:</label>
<input type="email" class="form-control" name="email" value="{{email}}">
</div>
<button type="submit" class="btn btn-primary btn-block m-t-default">Reset my password</button>
</form>
{% endif %}
</div>
</div>
{% endblock %}

View File

@ -1,36 +1,39 @@
{% extends "layouts/signed_out.html" %}
{% block content %}
{% block title %}Welcome to Redash!{% endblock %}
{% block content %}
<div class="fixed-width-page">
<div class="bg-white tiled">
<div class="m-b-default">
{% if google_auth_url %}
To create your account, please choose a password or login with your Google account ({{ user.email }}).
{% else %}
To create your account, please choose a password.
{% endif %}
</div>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-danger" role="alert">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
<h2>Welcome to Redash!</h2>
<p class="lead">
{% if google_auth_url %}
To create your account, please choose a password or login with your Google account ({{ user.email }}).
{% else %}
To create your account, please choose a password.
<a href="{{ google_auth_url }}" class="login-button btn btn-default btn-block">
<img src="/static/images/google_logo.svg">
Login with Google
</a>
<hr>
{% endif %}
</p>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-danger" role="alert">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
{% if google_auth_url %}
<div class="row">
<a href="{{ google_auth_url }}"><img src="/static/images/google_login.png" class="login-button"/></a>
</div>
<div class="login-or">
<hr class="hr-or">
<span class="span-or">or</span>
</div>
{% endif %}
<form role="form" method="post" name="invite">
<div class="form-group">
<form role="form" method="post" name="invite">
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<button type="submit" class="btn btn btn-primary">Set Password</button>
</form>
</div>
<button type="submit" class="btn btn-primary btn-block m-t-default">Set Password</button>
</form>
</div>
</div>
{% endblock %}

View File

@ -1,42 +1,31 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<html class="no-js">
<head>
<title>{% block title %}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{% block title %}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="{{ asset_url('app.css') }}">
<link rel="stylesheet" href="/static/styles/login.css">
<link rel="stylesheet" href="{{ asset_url('server.css') }}">
<link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/static/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/static/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
</head>
<body>
<body class="d-flex flex-column justify-content-center align-items-center">
<div style="position: absolute; width: 100%; height: 100%;">
<div class="logo-container">
<div style="display:table-cell; vertical-align:middle;" class="text-center">
<img src="/static/images/logo_white.png" style="width: 184px; height: 96px;">
</div>
</div>
<div class="content-container">
<div class="" style="display:table-cell;vertical-align:middle;">
<div style="max-width:500px; margin: auto;">
{% block content %}
{% endblock %}
</div>
<div class="d-flex flex-column justify-content-center align-items-center">
<div class="header">
<div class="text-center">
<a href="/"><img src="/static/images/redash_icon_small.png"></a>
</div>
<h3 class="text-center m-b-default">{{ self.title() }}</h3>
</div>
{% block content %}{% endblock %}
</div>
<script src="/static/js/jquery.min.js"></script>
{% block scripts %}
{% endblock %}
{% block scripts %}{% endblock %}
{% include '_includes/signed_out_tail.html' %}

View File

@ -1,79 +1,60 @@
{% extends "layouts/signed_out.html" %}
{% block title %}Login | Redash{% endblock %}
{% block title %}Login to Redash{% endblock %}
{% block content %}
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-danger" role="alert">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
{% if show_google_openid %}
<div class="row">
<a href="{{ google_auth_url }}"><img src="/static/images/google_login.png" class="login-button"/></a>
<div class="fixed-width-page">
<div class="bg-white tiled">
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-danger" role="alert">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
{% if show_google_openid %}
<a href="{{ google_auth_url }}" class="login-button btn btn-default btn-block">
<img src="/static/images/google_logo.svg">
Login with Google
</a>
{% endif %}
{% if show_saml_login %}
<a href="/saml/login" class="login-button btn btn-default btn-block">SAML Login</a>
{% endif %}
{% if show_remote_user_login %}
<a href="/remote_user/login" class="login-button btn btn-default btn-block">Remote User Login</a>
{% endif %}
{% if show_ldap_login %}
<a href="/ldap_auth/login" class="login-button btn btn-default btn-block">LDAP/SSO Login</a>
{% endif %}
{% if show_google_openid or show_saml_login or show_remote_user_login or show_ldap_login %}
<hr>
{% endif %}
<form role="form" method="post" name="login">
<input type="hidden" name="remember" value="on">
<div class="form-group">
<label for="inputEmail">{{ username_prompt or 'Email' }}</label>
<input type="text" class="form-control" id="inputEmail" name="email" value="{{email}}">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" name="password">
</div>
<button type="submit" class="btn btn-primary btn-block m-t-default">Log In</button>
</form>
{% if not hide_forgot_password %}
<div class="m-t-default">
<a href="{{ url_for("redash.forgot_password", org_slug=org_slug) }}">I forgot my password</a>
</div>
{% endif %}
</div>
<div class="login-or">
<hr class="hr-or">
<span class="span-or">or</span>
</div>
{% endif %}
{% if show_saml_login %}
<div class="row">
<a href="/saml/login">SAML Login</a>
</div>
<div class="login-or">
<hr class="hr-or">
<span class="span-or">or</span>
</div>
{% endif %}
{% if show_remote_user_login %}
<div class="row">
<a href="/remote_user/login">Remote User Login</a>
</div>
<div class="login-or">
<hr class="hr-or">
<span class="span-or">or</span>
</div>
{% endif %}
{% if show_ldap_login %}
<div class="row">
<a href="/ldap_auth/login">LDAP/SSO Login</a>
</div>
<div class="login-or">
<hr class="hr-or">
<span class="span-or">or</span>
</div>
{% endif %}
<form role="form" method="post" name="login">
<div class="form-group">
<label for="inputEmail">{{ username_prompt or 'Email' }}</label>
<input type="text" class="form-control" id="inputEmail" name="email" value="{{email}}">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" name="password">
</div>
<div class="checkbox pull-right">
<label>
<input type="checkbox" name="remember">
Remember me </label>
</div>
<button type="submit" class="btn btn btn-primary">
Log In
</button>
</form>
{% if not hide_forgot_password %}
<hr>
<a href="{{ url_for("redash.forgot_password", org_slug=org_slug) }}">I forgot my password</a>
{% endif %}
</div>
{% endblock %}

View File

@ -1,15 +1,14 @@
{% extends "layouts/signed_out.html" %}
{% block title %}Password Reset{% endblock %}
{% block content %}
<h2>Password Reset</h2>
<div class="row">
<div class="col-md-6" style="">
<hr>
<div class="fixed-width-page">
<div class="bg-white tiled">
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-danger" role="alert">{{ message }}</div>
<div class="alert alert-danger" role="alert">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
@ -18,7 +17,7 @@
<label for="password">Enter your new password:</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
<button type="submit" class="btn btn btn-primary">Change my password</button>
<button type="submit" class="btn btn-primary btn-block m-t-default">Change my password</button>
</form>
</div>
</div>

View File

@ -3,62 +3,64 @@
{% block title %}Redash Initial Setup{% endblock %}
{% macro render_field_errors(field) -%}
{% if field.errors %}
{% for e in field.errors %}
<p class="help-block">{{ e }}</p>
{% endfor %}
{% endif %}
{% if field.errors %}
{% for e in field.errors %}
<p class="help-block">{{ e }}</p>
{% endfor %}
{% endif %}
{%- endmacro %}
{% macro render_field(field, help_block=None) -%}
<div class="form-group {% if field.errors %}has-error{% endif %}">
{{ field.label() }}
{{ field(class='form-control') }}
{% if help_block %}
<p class="help-block">{{ help_block }}</p>
{% endif %}
{{ render_field_errors(field) }}
</div>
<div class="form-group {% if field.errors %}has-error{% endif %}">
{{ field.label() }}
{{ field(class='form-control') }}
{% if help_block %}
<p class="help-block">{{ help_block }}</p>
{% endif %}
{{ render_field_errors(field) }}
</div>
{%- endmacro %}
{% block content %}
<h2>
Welcome to Redash!<br/><small>Before you can use your instance, you need to do a quick setup.</small>
</h2>
<div class="fixed-width-page">
<div class="bg-white tiled">
<h4 class="m-t-0">Welcome to Redash!</h4>
<div>Before you can use your instance, you need to do a quick setup.</div>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-warning" role="alert">{{ message }}</div>
{% endfor %}
{% endif %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-warning" role="alert">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
<form role="form" method="post" name="create_account">
<h3>Admin User</h3>
{{ render_field(form.name) }}
{{ render_field(form.email) }}
{{ render_field(form.password) }}
<h4 class="m-t-default">Admin User</h4>
{{ render_field(form.name) }}
{{ render_field(form.email) }}
{{ render_field(form.password) }}
<div class="checkbox">
<label>
{{ form.security_notifications() }}
Subscribe to Security Notifications
</label>
</div>
<div class="checkbox">
<label>
{{ form.security_notifications() }}
Subscribe to Security Notifications
</label>
</div>
<div class="checkbox">
<label>
{{ form.newsletter() }}
Subscribe to newsletter (version updates, no more than once a month)
</label>
</div>
<div class="checkbox">
<label>
{{ form.newsletter() }}
Subscribe to newsletter (version updates, no more than once a month)
</label>
</div>
<h3>General</h3>
<h4 class="m-t-default">General</h4>
{{ render_field(form.org_name, help_block="Used in email notifications and the UI.") }}
{{ render_field(form.org_name, help_block="Used in email notifications and the UI.") }}
<button type="submit" class="btn btn btn-primary">Setup</button>
<button type="submit" class="btn btn-primary btn-block m-t-default">Setup</button>
</form>
</div>
</div>
{% endblock %}

View File

@ -13,7 +13,13 @@ const redashBackend = process.env.REDASH_BACKEND || 'http://localhost:5000';
const config = {
entry: {
app: ['./client/app/index.js', './client/app/assets/less/main.less'],
app: [
'./client/app/index.js',
'./client/app/assets/less/main.less',
],
server: [
'./client/app/assets/less/server.less',
],
},
output: {
path: path.join(__dirname, 'client', 'dist'),
@ -54,13 +60,15 @@ const config = {
new HtmlWebpackPlugin({
template: './client/app/index.html',
filename: 'index.html',
excludeChunks: ['server'],
}),
new HtmlWebpackPlugin({
template: './client/app/multi_org.html',
filename: 'multi_org.html',
excludeChunks: ['server'],
}),
new ExtractTextPlugin({
filename: 'styles.[chunkhash].css',
filename: '[name].[chunkhash].css',
}),
new ManifestPlugin({
fileName: 'asset-manifest.json'