Skip to content
GitLab
Commit 9ee4cd8d authored by BERJON Matthieu's avatar BERJON Matthieu
Browse files

Update of the home page template 



I updated the home page by tweaking several components. I rewrote the
header in order to take all the width but still have the menu centered.
I added a sticky footer. Rewrote the css by eleminating everything that
are not necessary at this stage.

Signed-off-by: BERJON Matthieu's avatarMatthieu Berjon <matthieu.berjon@inria.fr>
parent c54be635
Hide whitespace changes
Inline Side-by-side
django/static/css/allgo.scss
View file @ 9ee4cd8d
@font-face {
font-family: Roboto;
src: url(/static/fonts/Roboto-Regular.ttf);
}
@font-face {
font-family: Offside;
src: url(/static/fonts/Offside-Regular.ttf);
}
$fonts_body : Roboto, sans-serif;
$fonts_big_title: Offside, cursive;
$navbar_bg_color: #3399CC; //also h1 color
$navbar_font_color: white; //also h1 color
$navbar_hover_color: #ff6000;
//$second_color: #3399CC;
$second_color: #ff6000;
$fonts_title_color: #ff6000;
$webapp_border_color: #ff6000;
$webapp_hover_border_color: #3399CC;
$navbar_bg_color: #3399cc;
/* Body */
html, body, h3, h4, h5, p {
font-family: $fonts_body;
}
@media (min-width: 1300px) {
.container{
width: 1300px;
}
/*
* Common
*/
html {
position: relative;
min-height: 100%;
}
h1, h2 {
font-family: $fonts_big_title;
font-weight:normal;
color: $fonts_title_color;
}
h1 {
font-size: 72px;
}
.allgo-title, .brand {
font-family: $fonts_big_title;
}
.brand {
font-size: 26px;
}
h3, h4, h5 {
color: $second_color;
/*
* Header
*/
header {
background-color: $navbar_bg_color;
border-bottom: 1px solid rgb(110, 110, 100);
margin-bottom: 3em;
}
#main-text {
color: $navbar_bg_color;
.brand {
font-family: Offside;
}
.btn-success {
background-color: $second_color;
border-color: $second_color;
/*
* Footer
*/
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
border-top: 1px solid rgb(220, 220, 220);
}
.btn-success:hover {
background-color: #ff6100;
border-color: #ff6100;
.footer img {
height: 43px;
}
/* Navbar */
@media screen and (max-width: 1000px) {
.navbar {
height: 50px;
}
}
.navbar {
background-color: $navbar_bg_color;
font-size: 20px;
.link-avatar {
padding: 0;
}
.avatar {
margin-top: 9px;
}
}
.navbar-inverse .navbar-nav > li > a {
color: $navbar_font_color;
}
.navbar-inverse .navbar-nav > li > a:hover {
color: $navbar_hover_color;
}
/* mod navbar for no collapse on small screen */
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
/* end of mod navbar, thanks Armand ! */
/* bloc to be used for inserting an anchor and ensure that we are not below the navbar
* http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors
*/
.jumptarget {
margin-top: -50px;
height:50px;
visibility: hidden;
}
body {
padding-top: 70px;
}
.webapp {
border: 4px solid $webapp_hover_border_color;
}
.webapp:hover{
border: 4px solid $webapp_border_color;
cursor: pointer;
}
/* Content */
.progress {
margin-top: 7px;
}
.logo {
text-align: center;
margin-top: 12px;
}
.pop {
color: #337ab7;
}
.app-info {
background-color: #f5f5f5;
border-radius: 4px;
padding: 7px;
}
.app-img {
float: right;
}
.presentation {
background-image: image-url("containers.png");
padding: 30px 0 20px 0;
margin-top: -20px;
margin-bottom: 20px;
}
.margin-20 {
margin-top: 20px;
}
.margin-30 {
margin-top: 30px;
}
.text-muted {
font-size: 14px;
}
@media screen and (min-width: 1000px) {
.webapp {
width: 15em;
height: 20em;
}
}
.centered {
text-align: center;
}
.cloud {
.s { font-size: 10px; }
.m { font-size: 16px; }
.l { font-size: 22px; }
.xl { font-size: 28px; }
}
.cloud-all {
display: block;
margin-top: 15px;
margin-bottom: 20px;
}
// Footer
.footer-space {
min-height: 43px;
}
.footer {
position:fixed;
bottom: 0;
height: 43px;
width: 100%;
background-color: #f5f5f5;
border-top: 1px solid #e7e7e7;
img {
height: 43px;
}
.credits {
padding-left: 0;
}
.container .credit {
margin-top: 12px;
}
}
/* Wrapper for page content to push down footer */
#wrap {
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
code {
font-size: 80%;
}
.caption > p {
color : black;
font-size:medium;
}
/* form errors */
.field_with_errors > label {
color: red
// padding: 2px;
// background-color: red;
}
.field_with_errors > input {
border: solid 2px red;
}
django/templates/base.html
View file @ 9ee4cd8d
......@@ -19,10 +19,14 @@
</head>
<body>
<header>{% include "partials/_header.html" %}</header>
{% include "partials/_header.html" %}
{% block content %}
{% endblock %}
<div class="container">
{% include 'partials/_messages.html' %}
{% block content %}
{% endblock %}
</div>
{% include "partials/_footer.html" %}
......
django/templates/home.html
View file @ 9ee4cd8d
......@@ -16,9 +16,7 @@
<div class="container">
<div class="text-center">
<!-- <div class="text-center" style="color: yellow;transform-origin: 50% 100%;transform: perspective(300px) rotateX(25deg);"> -->
<h1>
A||GO
</h1>
<h1 class="brand">A||GO</h1>
<br />
<h3 id="main-text">
Allgo is a platform for building deploying apps that analyze massive data in Linux containers, it has been specifically designed for use in scientific applications.
......
django/templates/partials/_footer.html
View file @ 9ee4cd8d
{% load static %}
<div class="container footer-space">
&nbsp;
</div>
<footer class="footer">
<div class="container">
<div class="col-md-4 credits">
<img class="img-responsive" src="{% static 'images/credit.png' %}" alt="inria">
</div>
<div class="col-md-8">
<p class="credit pull-right">
<a href="https://wiki.inria.fr/sed_ren/">SED</a>
<a href="http://www.irisa.fr/">IRISA</a> /
<a href="http://www.inria.fr/centre/rennes">INRIA</a>,
{% now "Y" %}<br />
</p>
</div>
<div class="container">
<div class="row">
<div class="col">
<img class="img-responsive" src="{% static 'images/credit.png' %}" alt="inria">
</div>
<div class="col">
<p class="text-center">{% now "Y" %}</p>
</div>
<div class="col">
<ul class="nav justify-content-end">
<li class="nav-item"><a class="nav-link" href="http://www.inria.fr/centre/rennes">INRIA</a></li>
<li class="nav-item"><a class="nav-link" href="http://www.irisa.fr/">IRISA</a></li>
<li class="nav-item"><a class="nav-link" href="https://wiki.inria.fr/sed_ren/">SED</a></li>
</ul>
</div>
</div>
</div>
</footer>
django/templates/partials/_header.html
View file @ 9ee4cd8d
<nav class="navbar navbar-inverse navbar-fixed-top">
<header class="container-fluid">
<div class="container">
<div>
{% comment %}
# function generating a button in the navigation bar, with:
# - a glyphicon and a tooltip (in devices given by 'hide')
# - a glyphicon and a text (in other configuration)
def nav_button (glyph, text, hide=[])
if hide.empty?
raw "<span class='glyphicon #{glyph}'></span> #{h text}</span>"
else
raw("
<span class='#{hide.map{|x| "visible-#{x}-inline"}.join " "} glyphicon #{glyph}'
data-toggle='tooltip' data-placement='bottom' #{raw "title='#{text}'"}></span>
<span class='#{hide.map{|x| "hidden-#{x}"}.join " "}'><span class='glyphicon #{glyph}'></span> #{h text}</span>
")
end
end
{% endcomment %}
<ul class="nav navbar-nav">
<li class="hidden-md hidden-sm hidden-xs">
<a class="navbar-brand brand" href="/">A||GO</a>
</li>
<li class="{% if active_tab == 'apps' %} active{% endif %}"><i class="fas fa-cloud"></i><a href="#">apps</a></li>
<li class="{% if active_tab == 'docs' %} active{% endif %}"><i class="fas fa-book"></i><a href="#">docs</a></li>
{% if user.is_authenticated %}
<li class="{% if active_tab == 'jobs' %} active{% endif %}"><a href="#">my jobs</a></li>
{# The menu below should appears only for specific users who have the right to create new app-> hence irisa/inria members #}
<li class="{% if active_tab == 'add-app' %} active{% endif %}"><a href="#">add apps</a></li>
<li class="{% if active_tab == 'my-apps' %} active{% endif %}"><a href="#">my apps</a></li>
{% if user.is_admin %}
<li class="{% if active_tab == 'dashboard' %} active{% endif %}"><a href="#">dashboard</a></li>
{% endif %}
{% endif %}
<li class="{% if active_tab == 'my-apps' %} active{% endif %}"><a href="#">my apps</a></li>
{% comment %}
<% if user_signed_in? %>
<li class="dropdown">
<%# the hepldesk is accessible only by inria users %>
<% if User.valid_email(current_user.email) %>
<a data-toggle="dropdown" role="button" aria-expanded="false">
<%= nav_button "glyphicon-question-sign", "Help", ["xs", "sm"] %>
</a>
<ul class="dropdown-menu">
<% Rails.configuration.helpdesk_links.each do|text, url| %>
<li> <a href="<%= url %>"><%= text %></a></li>
<%end%>
</ul>
<% end %>
</li>
<li>
<%= link_to image_tag(avatar_url(current_user.email), alt: '', title: '', size: "30x30", class: "avatar"), edit_user_registration_path, class: "link-avatar" %>
<nav class="allgo-main-nav navbar navbar-expand-lg navbar-light">
<a class="navbar-brand brand" href="{% url 'poc_home' %}">A||GO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="{% url 'list_webapps' %}"><i class="fas fa-cloud"></i> apps</a>
</li>
<li class="dropdown">
<a data-toggle="dropdown" role="button" aria-expanded="false"><i class="glyphicon glyphicon-menu-down"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu" id="user-options">
<li>
<%= link_to 'My account', edit_user_registration_path %>
</li>
<li>
<%= link_to 'Quotas of my apps', quotas_path %>
</li>
<li>
<%= link_to 'Logout', destroy_user_session_path, method: "delete" %>
</li>
</ul>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-book"></i> Docs</a>
</li>
<% else %>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="glyphicon glyphicon-user"></i> Log In</a>
<ul class="dropdown-menu" role="menu" style="padding: 15px;">
<%= form_for("user", url: user_session_path) do |f| %>
<%= f.email_field :email, class: "form-control", placeholder: "Email address" %>
<%= f.password_field :password, class: "form-control", placeholder: "Password" %>
<%= f.submit "Login", class: "btn btn-success btn-block" %>
<% end %>
<span style="padding-left: 27px;"><%= link_to 'Forgot your password?', '/users/password/new' %></span>
</ul>
{% if not user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}"><i class="fas fa-sign-in-alt"></i></i> Login</a>
</li>
<li>
<%= link_to "<i class=\"glyphicon glyphicon-glyphicon glyphicon-pencil\"></i> Sign Up".html_safe, new_user_registration_path %>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'logout' %}"><i class="fas fa-sign-out-alt"></i> Sign out</a>
</li>
<% end %>
{% endcomment %}
</ul>
</div>
{% endif %}
</ul>
</div>
</nav>
</div>
</nav>
</header>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment