mirror of https://github.com/Evolix/chexpire.git
Merge pull request #53 from Evolix/graphic-design-1
First version of a new graphic design
This commit is contained in:
Gregory Colpart
GitHub
commit
ebcf037a22
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
|
|
@ -1,13 +1,15 @@
|
|||
// Copyright (C) 2018 Colin Darie <colin@darie.eu>, 2018 Evolix <info@evolix.fr>
|
||||
// License: GNU AGPL-3+ (see full text in LICENSE file)
|
||||
|
||||
$input-placeholder-color: #adb5bd;
|
||||
$input-placeholder-color: #013d3a;
|
||||
$enable-rounded: false;
|
||||
$theme-colors: (
|
||||
"primary": #259EDB,
|
||||
"secondary": #565554,
|
||||
"success": #42935C,
|
||||
"primary": #118b83, //light-green
|
||||
"secondary": #013d3a, //dark-green
|
||||
"tertiary": #be0c04, //red
|
||||
"quaternary": #d6b20e, // yellow
|
||||
"success": #118b83, //light-green
|
||||
"warning": #F6AE2D,
|
||||
"danger": #E94F37,
|
||||
"danger": #be0c04, //red
|
||||
"info": #2E86AB,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,3 +6,41 @@
|
|||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-sm {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.SSL, .ssl:hover, .btn.btn-sm.btn-info.active.ssl {
|
||||
background-color: map-get($theme-colors, quaternary);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn.btn-sm.btn-outline-info.domain:hover, .btn.btn-sm.btn-outline-info.ssl:hover, .btn.btn-sm.btn-outline-info.with_error:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn.btn-sm.btn-info.ssl, .btn.btn-sm.btn-outline-info.ssl {
|
||||
border-color: map-get($theme-colors, quaternary);
|
||||
color: map-get($theme-colors, quaternary);
|
||||
}
|
||||
|
||||
.Domaine, .Domain, .domain:hover, .btn.btn-sm.btn-info.active.domain {
|
||||
background-color: map-get($theme-colors, primary);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn.btn-sm.btn-info.domain, .btn.btn-sm.btn-outline-info.domain {
|
||||
border-color: map-get($theme-colors, primary);
|
||||
color: map-get($theme-colors, primary);
|
||||
}
|
||||
|
||||
.btn.btn-sm.btn-outline-info.with_error {
|
||||
border-color: map-get($theme-colors, tertiary);
|
||||
color: map-get($theme-colors, tertiary);
|
||||
}
|
||||
|
||||
.btn.btn-sm.btn-outline-info.with_error:hover, .btn.btn-sm.btn-info.active.with_error {
|
||||
background-color: map-get($theme-colors, tertiary);
|
||||
border-color: map-get($theme-colors, tertiary);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,14 +5,147 @@
|
|||
@import '~bootstrap/scss/_variables';
|
||||
@import '~bootstrap/scss/mixins/_breakpoints';
|
||||
|
||||
.navbar {
|
||||
margin-bottom: 30px;
|
||||
/*
|
||||
* === GENERAL ===
|
||||
*/
|
||||
body,
|
||||
html {
|
||||
color: map-get($theme-colors, secondary);
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin-bottom: 20px;
|
||||
h1, h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* — Navbar —
|
||||
*/
|
||||
.navbar {
|
||||
margin-bottom: 50px;
|
||||
background-color: map-get($theme-colors, quaternary);
|
||||
}
|
||||
|
||||
a.nav-link,
|
||||
a.navbar-item.navbar-link {
|
||||
color: map-get($theme-colors, tertiary);
|
||||
font-weight: bold;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: #118b83;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-layout {
|
||||
margin-bottom: 30px;
|
||||
.navbar-dark .navbar-nav .nav-link {
|
||||
color: #ffffff;
|
||||
|
||||
&:hover {
|
||||
color: #118b83;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* — Alert —
|
||||
*/
|
||||
.alert-layout {
|
||||
margin-bottom: 50px;
|
||||
|
||||
&.alert {
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
|
||||
&.alert-success {
|
||||
background-color: #118b83;
|
||||
}
|
||||
|
||||
&.alert-danger {
|
||||
background-color: #be0c04;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* — Forms —
|
||||
*/
|
||||
.form-control:focus {
|
||||
color: map-get($theme-colors, secondary);
|
||||
background-color: #fff;
|
||||
border-color: map-get($theme-colors, primary);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* === UN-LOGGED HOME ===
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
* — Header —
|
||||
*/
|
||||
.container-fluid.header {
|
||||
margin: -50px 0 50px 0;
|
||||
padding: 50px;
|
||||
background-color: map-get($theme-colors, quaternary);
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
|
||||
.btn {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu.show {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
a:hover {
|
||||
color: #ffffff;
|
||||
background-color: #118b83;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* — Description —
|
||||
*/
|
||||
#description {
|
||||
p {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.abstract,
|
||||
.details {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.abstract h2::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 40px;
|
||||
margin: 40px auto;
|
||||
border-top: 2px solid #013D3A;
|
||||
}
|
||||
|
||||
.details {
|
||||
padding: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.row {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.homepage-img {
|
||||
border: 1px solid map-get($theme-colors, secondary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,13 +7,13 @@
|
|||
<% Check.kinds.keys.map(&:to_sym).each do |kind_name| %>
|
||||
<%= link_to t(".kind_#{kind_name}"),
|
||||
checks_path(check_button_criterias(kind: kind_name)),
|
||||
class: check_button_scope_class(kind: kind_name) %>
|
||||
class: check_button_scope_class(kind: kind_name) + " " + kind_name.to_s %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<%= link_to t(".with_error"),
|
||||
checks_path(check_button_criterias(recurrent_failures: true)),
|
||||
class: check_button_scope_class(recurrent_failures: true) %>
|
||||
class: check_button_scope_class(recurrent_failures: true) + " with_error" %>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<% checks.each do |check| %>
|
||||
<tr class="check-row <%= check_row_class(check) %>">
|
||||
<td class="kind">
|
||||
<span class="badge badge-info"><%= t(".kind_labels.#{check.kind}") %></span>
|
||||
<span class="badge badge-info <%= t(".kind_labels.#{check.kind}") %>"><%= t(".kind_labels.#{check.kind}") %></span>
|
||||
</td>
|
||||
<td>
|
||||
<%= check_error(check) if check_in_error?(check) %>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,9 @@
|
|||
|
||||
<body>
|
||||
<%= render "shared/navbar" %>
|
||||
<% if params[:action] == 'home' %>
|
||||
<%= render 'shared/home_header' %>
|
||||
<%end%>
|
||||
<%= render "shared/notices" %>
|
||||
|
||||
<%= yield %>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,40 @@
|
|||
<% # Copyright (C) 2018 Colin Darie <colin@darie.eu>, 2018 Evolix <info@evolix.fr> %>
|
||||
<% # License: GNU AGPL-3+ (see full text in LICENSE file) %>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-lg-10">
|
||||
<h1><%= t(".welcome") %></h1>
|
||||
<section id="description">
|
||||
|
||||
<p><%= t(".intro") %></p>
|
||||
<div class="container">
|
||||
|
||||
<div class="abstract">
|
||||
<center>
|
||||
<h2><%= t(".why") %></h2>
|
||||
<p><%= t(".description") %></p>
|
||||
</center>
|
||||
</div>
|
||||
|
||||
<div class="details row align-content-end justify-content-between">
|
||||
<div class="col-md-6 details">
|
||||
<div class="row flex-column justify-content-center">
|
||||
<h2><%= t(".centralization") %></h2>
|
||||
<p><%= t(".centralization-details") %></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<%= image_tag 'dashboard.png', width: "100%", alt: 'Expirations list dashboard', class: "homepage-img" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="details row align-content-end justify-content-between flex-md-row-reverse">
|
||||
<div class="col-md-6 details">
|
||||
<div class="row flex-column justify-content-center">
|
||||
<h2><%= t(".customised") %></h2>
|
||||
<p><%= t(".customised-details") %></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<%= image_tag 'form_example.png', width: "100%", alt: 'Expirations list dashboard', class: "homepage-img" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<div class="container-fluid header">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="d-flex flex-wrap justify-content-center flex-column align-items-center">
|
||||
<div class="d-flex flex-wrap justify-content-center flex-column align-items-center">
|
||||
<h1><%= t(".welcome") %></h1>
|
||||
<p><%= t(".intro") %></p>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap justify-content-around align-items-center">
|
||||
<%= link_to "Learn More", root_path(@root, anchor: "description"), :class => "btn btn-primary" %>
|
||||
<%= link_to "Sign Up", new_user_registration_path, :class => "btn btn-tertiary" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,43 +1,49 @@
|
|||
<% # Copyright (C) 2018 Colin Darie <colin@darie.eu>, 2018 Evolix <info@evolix.fr> %>
|
||||
<% # License: GNU AGPL-3+ (see full text in LICENSE file) %>
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-between">
|
||||
<%= link_to "Chexpire", root_path , class: "navbar-brand" %>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<% if user_signed_in? %>
|
||||
<li class="nav-item">
|
||||
<%= link_to(t(".my_checks"), checks_path, class: "nav-link") %>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<%= link_to(t(".new_domain_check"), new_check_path(kind: :domain), class: "nav-link") %>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<%= link_to(t(".new_ssl_check"), new_check_path(kind: :ssl), class: "nav-link") %>
|
||||
</li>
|
||||
<% # License: GNU AGPL-3+ (see full text in LICENSE file) %>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark justify-content-between">
|
||||
<div class="container-fluid">
|
||||
<%= link_to root_path , class: "navbar-brand" do %>
|
||||
<%= image_tag 'chexpire10.png', width: 200, alt: 'chexpire logo' %>
|
||||
<% end %>
|
||||
</ul>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="my-2 my-lg-0">
|
||||
<% if user_signed_in? %>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<% if user_signed_in? %>
|
||||
<li class="nav-item">
|
||||
<%= link_to(t(".my_checks"), checks_path, class: "nav-link") %>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<%= link_to(t(".new_domain_check"), new_check_path(kind: :domain), class: "nav-link") %>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<%= link_to(t(".new_ssl_check"), new_check_path(kind: :ssl), class: "nav-link") %>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<%= link_to(t(".GitHub"), "https://github.com/Evolix/chexpire", class: "nav-link") %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
|
||||
<div class="navbar-item">
|
||||
<div class="dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#"
|
||||
id="navbarDropdown" role="button" data-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
<%= current_user.email %>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<%= link_to edit_user_registration_path, class: "dropdown-item" do %>
|
||||
<i class="fa fa-user"></i> <%= t(".profile", default: "Profile") %>
|
||||
<% end %>
|
||||
<div class="my-2 my-lg-0">
|
||||
<% if user_signed_in? %>
|
||||
|
||||
<%= link_to destroy_user_session_path, method: :delete, class: "dropdown-item" do %>
|
||||
<i class="fa fa-sign-out"></i> <%= t(".sign_out", default: "Log out") %>
|
||||
<div class="navbar-item">
|
||||
<div class="dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<%= current_user.email %>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<%= link_to edit_user_registration_path, class: "dropdown-item" do %>
|
||||
<i class="fa fa-user"></i>
|
||||
<%= t(".profile", default: "Profile") %>
|
||||
<% end %>
|
||||
|
||||
<%= link_to destroy_user_session_path, method: :delete, class: "dropdown-item" do %>
|
||||
<i class="fa fa-sign-out"></i>
|
||||
<%= t(".sign_out", default: "Log out") %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -46,7 +52,9 @@
|
|||
<!-- Login link (when logged out) -->
|
||||
<%= link_to t(".sign_in"), new_user_session_path, class: "navbar-item navbar-link" %>
|
||||
<%= link_to t(".sign_up"), new_user_registration_path, class: "navbar-item navbar-link" %>
|
||||
<%= link_to t(".GitHub"), "https://github.com/Evolix/chexpire", class: "navbar-item navbar-link" %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -72,11 +72,20 @@ en:
|
|||
sign_in: "Sign in"
|
||||
sign_out: "Sign out"
|
||||
profile: "Profile"
|
||||
home_header:
|
||||
welcome: "Welcome on Chexpire"
|
||||
intro: "With Chexpire, you'll never forget to renew a domain name or SSL certificate."
|
||||
|
||||
|
||||
pages:
|
||||
|
||||
home:
|
||||
welcome: "Welcome on Chexpire"
|
||||
intro: "With Chexpire, you'll never forget to renew a domain name or SSL certificate Chexpire."
|
||||
why: "The benefits of Chexpire"
|
||||
description: "Chexpire is an Open Source Software that checks domain name and SSL Certificates expirations. You've got a lot of domain name with differents Domain Registrars? You want a centralization of all the expirations dates? You need customised notifications? Chexpire is for you!"
|
||||
centralization: "Easy centralization of expiry dates"
|
||||
centralization-details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Collige omnia, quae soletis: Praesidium amicorum. Duo Reges: constructio interrete. Bonum valitudo: miser morbus. Quae duo sunt, unum facit. Sic enim censent, oportunitatis esse beate vivere. Beatus sibi videtur esse moriens. Aliter homines, aliter philosophos loqui putas oportere?"
|
||||
customised: "Custom notification"
|
||||
customised-details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Collige omnia, quae soletis: Praesidium amicorum. Duo Reges: constructio interrete. Bonum valitudo: miser morbus. Quae duo sunt, unum facit. Sic enim censent, oportunitatis esse beate vivere. Beatus sibi videtur esse moriens. Aliter homines, aliter philosophos loqui putas oportere?"
|
||||
|
||||
checks:
|
||||
index:
|
||||
|
|
|
|||
|
|
@ -104,12 +104,20 @@ fr:
|
|||
sign_in: "Connexion"
|
||||
sign_out: "Déconnexion"
|
||||
profile: "Profil"
|
||||
|
||||
pages:
|
||||
home:
|
||||
home_header:
|
||||
welcome: "Bienvenue sur Chexpire"
|
||||
intro: "Grâce à Chexpire, vous n'oublierez plus jamais de renouveler un nom de domaine ou un certificat SSL."
|
||||
|
||||
pages:
|
||||
|
||||
home:
|
||||
why: "Les avantages de Chexpire"
|
||||
description: "Chexpire est un Logiciel Libre qui vérifie les expirations des noms de domaines et des certificats SSL. Vous avez beaucoup de noms de domaines avec des Registrars différents ? Vous souhaitez une centralisation des dates d'expirations ? Vous avez besoin de notifications sur mesure ? Chexpire est fait pour vous !"
|
||||
centralization: "Centralisez simplement les dates d'expiration"
|
||||
centralization-details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Collige omnia, quae soletis: Praesidium amicorum. Duo Reges: constructio interrete. Bonum valitudo: miser morbus. Quae duo sunt, unum facit. Sic enim censent, oportunitatis esse beate vivere. Beatus sibi videtur esse moriens. Aliter homines, aliter philosophos loqui putas oportere?"
|
||||
customised: "Paramétrez vos notifications"
|
||||
customised-details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Collige omnia, quae soletis: Praesidium amicorum. Duo Reges: constructio interrete. Bonum valitudo: miser morbus. Quae duo sunt, unum facit. Sic enim censent, oportunitatis esse beate vivere. Beatus sibi videtur esse moriens. Aliter homines, aliter philosophos loqui putas oportere?"
|
||||
|
||||
checks:
|
||||
index:
|
||||
title: "Liste de vos vérifications"
|
||||
|
|
|
|||
Loading…
Reference in New Issue