Skip to content

GitLab

Commit 4be25621 authored by BERJON Matthieu's avatar BERJON Matthieu
Browse files

Rewriting of the webapp list template 



I rewrote the webapp list template. I changed the style completely using
bootstrap cards.
I added two specific template filters. One is dedicated to extract the
first and last name of the contact email (can be done because inria and
irisa email have coherent naming pattern). The other filter is to
prettify some apps names such as replacing underscores by spaces.

I removed as well the momentjs library call (that was commented) and use
the Django builtin library called `humanize` that display that has a
filter to display nice dates used in the template (such as relative
dates).
Signed-off-by: BERJON Matthieu's avatarMatthieu Berjon <matthieu.berjon@inria.fr>
parent b732a62d
Hide whitespace changes
Inline Side-by-side
django/allgo/main/templatetags/converters.py
View file @ 4be25621
......@@ -17,3 +17,23 @@ def markdown(value):
'quote',
))
return markdown(value)
@register.filter(name='email2name')
def email2name(email):
""" Convert INRIA/IRISA emails into firstname name pattern
"""
value = email.split('@')
print(len(value))
if '.' in value[0]:
data = value[0].split('.')
contact = data[0] + ' ' + data[1]
return email2name(contact.title())
else:
return value[0].capitalize()
@register.filter(name='fancy_webapp_name')
def fancy_name(webapp_name):
""" Replace underscores by spaces """
return webapp_name.replace('_', ' ')
django/allgo/static/css/allgo.css
View file @ 4be25621
......@@ -184,4 +184,45 @@ a {
margin-bottom: 0;
border-radius: 0;
}
.card-webapp {
margin-bottom: 1em;
}
.card-webapp .card-img-top {
margin-top: 1em;
max-width: 50px;
max-height: 50px;
/* border: 1px solid rgb(200, 200, 200); */
}
.card-webapp .card-subtitle {
font-size: 0.8em;
margin-bottom: 1.5em;
}
.card-webapp .navbar {
margin: 0;
z-index: 2;
}
.card-webapp .card-header, .card-webapp .card-footer {
background: #fff;
}
.card-webapp .navbar {
margin: 0;
padding: 0;
margin-top: -3.6em;
z-index: 100;
}
.card-webapp .nav {
margin: 0;
padding: 0;
}
.card-webapp .nav-link {
font-size: 2.5em;
}
.card-webapp .card-footer {
padding-bottom: 0;
}
.app-unfinished {
color: #B33A3A;
}
.app-unfinished:hover {
color: #6A2828;
}
django/allgo/templates/base.html
View file @ 4be25621
......@@ -47,7 +47,6 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script defer src="{% static 'js/fontawesome-all.min.js' %}"></script>
<!-- <script defer src="{% static 'js/moment.min.js' %}"></script> -->
<script defer src="{% static 'js/prism.js' %}"></script>
{% endblock %}
</body>
......
django/allgo/templates/webapp_list.html
View file @ 4be25621
{% extends "base.html" %}
{% load static groups %}
{% load static groups converters humanize %}
{% block title %}Available apps{% endblock %}
......@@ -16,6 +16,21 @@
<div class="container">
<div class="allgo-page">
<nav class="navbar">
{% comment %}
<form class="form-inline my-2 my-lg-0">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-search"></i></span>
</div>
<input class="form-control" type="search" placeholder="Search" aria-describedby="basic-addon1" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-primary" type="button">Search</button>
</div>
</div>
</form>
{% endcomment %}
{% if request.user|has_group:'inria' %}
<div class="dropdown show ml-auto mr-3 order-lg-last">
<a class="btn btn-light dropdown-toggle text-muted" href="#" id="dropdownMenuLink" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fas fa-cog"></i><span class="text-hide">Settings</span></a>
......@@ -26,81 +41,95 @@
{% endif %}
</nav>
<div class="row">
{% for webapp in webapps %}
<div class="app-card">
<div class="row border-bottom">
<div class="col-1">
<div class="app-logo align-middle">
{% if webapp.logo_file_name %}
<img class="card-img-top img-fluid align-middle rounded" src="{% get_media_prefix %}{{ webapp.docker_name }}/{{ webapp.logo_file_name }}" alt="{{ webapp.title }}">
{% else %}
<img class="card-img-top img-fluid align-middle rounded" src="{% static 'images/webapp-default-logo.svg' %}" alt="{{ webapp.title }}">
{% endif %}
</div>
</div>
<div class="col-8">
<div class="row">
<div class="col">
<h5 class="app-title"><a href="{% url 'main:webapp_detail' webapp.docker_name %}">{{ webapp.name }}</a></h5>
</div>
<div class="col text-right">
<small class="app-info text-muted">Updated a year ago - {{ webapp.contact }}</small>
</div>
</div>
<p class="app-description text-secondary">
<div class="col">
<div class="card card-webapp" style="width: 18rem;">
<div class="card-header">
{% if webapp.logo_file_name %}
<img class="card-img-top img-thumbnail rounded-circle mx-auto d-block" src="{% get_media_prefix %}{{ webapp.docker_name }}/{{ webapp.logo_file_name }}" alt="{{ webapp.title }} logo">
{% else %}
<img class="card-img-top img-thumbnail rounded-circle mx-auto d-block" src="{% static 'images/webapp-default-logo.svg' %}" alt="{{ webapp.title }} logo" style="opacity: 0.5;">
{% endif %}
<h5 class="card-title text-center"><a href="{% url 'main:webapp_detail' webapp.docker_name %}">{{ webapp.name | fancy_webapp_name }}</a></h5>
<h6 class="card-subtitle text-muted text-center">{{ webapp.contact | email2name }} - Updated {{ webapp.updated_at | naturalday }}</h6>
</div>
<div class="card-body">
{% if user.is_authenticated %}
<nav class="navbar">
<ul class="nav nav-bar mx-auto">
{% if webapp.sandbox_version_id %}
<li class="nav-item">
<a
class="nav-link"
href="{% url 'main:webapp_create_job' webapp.docker_name %}"
title="Start a job"
data-toggle="tooltip"
data-placement="bottom" ><i class="fas fa-play" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-circle"></i><span class="text-hide">Run a job</a></li>
{% if webapp.notebook_gitrepo %}
<li class="nav-item">
<a
class="nav-link"
href="/jupyter?repo={{ webapp.notebook_gitrepo }}"
title="Start a Jupyter notebook"
data-toggle="tooltip"
data-placement="bottom"><i class="fas fa-sticky-note" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-circle"></i><span class="text-hide">Run notebook</a></li>
{% endif %}
{% if webapp.user == user %}
<li class="nav-item">
<a
class="nav-link"
href="{% url 'main:webapp_update' webapp.docker_name %}"
title="Edit the application properties"
data-toggle="tooltip"
data-placement="bottom"><i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-circle"></i><span class="text-hide">Run notebook</a></li>
{% endif %}
{% else %}
<li class="nav-item">
<a
class="nav-link app-unfinished"
href="{% url 'main:webapp_sandbox_creation' webapp.docker_name %}"
title="Finish the configuration of your app"
data-toggle="tooltip"
data-placement="bottom"><i class="fas fa-exclamation-circle"></i><span class="text-hide">Finish the app configuration</span></a></li>
{% endif %}
</ul>
</nav>
{% else %}
<nav class="navbar">
<ul class="nav nav-bar mx-auto">
<li class="nav-item">
<a
class="nav-link"
href="{% url 'main:webapp_create_job' webapp.docker_name %}"
title="Start a job"
data-toggle="tooltip"
data-placement="bottom" ><i class="fas fa-play" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-circle"></i><span class="text-hide">Run a job</a></li>
</ul>
</nav>
{% endif %}
<p class="card-text">
{% if webapp.description %}
{{ webapp.description|truncatechars:300 }}
{{ webapp.description|truncatechars:200 }}
{% else %}
No description available for this application.
{% endif %}
</p>
<ul class="list-inline app-tags small">
<li class="list-inline-item"><i class="fas fa-tags"></i></li>
<li class="list-inline-item"><a href="#">one tag</a></li>
<li class="list-inline-item"><a href="#">another tag</a></li>
<li class="list-inline-item"><a href="#">until we get tired</a></li>
<li class="list-inline-item"><a href="#">I think it's enough</a></li>
</ul>
</div>
{% if user.is_authenticated %}
<div class="col-3 text-center">
<h5 class="text-hide">Actions</h5>
<div class="btn-group" role="toolbar" aria-label="Toolbar to manage the app">
<a
class="btn btn-outline-secondary run"
data-toggle="tooltip"
data-placement="top"
title="Create a job"
href="{% url 'main:webapp_create_job' webapp.docker_name %}"><i class="fas fa-play"></i><span class="text-hide">Run</span></a>
{% if webapp.user_id == user.id %}
<a
class="btn btn-outline-secondary edit"
data-toggle="tooltip"
data-placement="top"
title="Edit the app properties"
href="{% url 'main:webapp_update' webapp.docker_name %}"><i class="fas fa-pencil-alt"></i><span class="text-hide">Edit</span></a>
{% if webapp.notebook_gitrepo %}
<a
class="btn btn-outline-secondary notebook"
data-toggle="tooltip"
data-placement="top"
title="Run the Jupyter notebook"
target="_blank"
href="/jupyter?repo={{ webapp.notebook_gitrepo }}"><i class="fas fa-file-alt"></i><span class="text-hide">Notebook</span></a>
{% endif %}
{% endif %}
</div>
<div class="card-footer text-muted">
<ul class="list-inline app-tags small">
<li class="list-inline-item"><i class="fas fa-tags"></i></li>
<li class="list-inline-item"><a href="#">one tag</a></li>
<li class="list-inline-item"><a href="#">another tag</a></li>
<li class="list-inline-item"><a href="#">until we get tired</a></li>
<li class="list-inline-item"><a href="#">I think it's enough</a></li>
</ul>
</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
{% include "partials/_pagination.html" %}
</div>
......
django/config/settings.py
View file @ 4be25621
......@@ -99,6 +99,7 @@ DJANGO_APPS = [
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.humanize',
]
THIRD_PARTY_APPS = [
'allauth',
......
Markdown is supported
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