Skip to content

Commit

Permalink
Mobile friendly index and navbar (#363)
Browse files Browse the repository at this point in the history 
* fixes index multi-background and compresses xray

* lower size of background image

* adds console link

* redesigns navbar to be mobile friendly

* fix whitespace

* merge in latest changes

* #361 Make sure hamburger menu opens on about page

* remove inline styles for bs classes

Co-authored-by: Hannah Gooden <hannah.gooden@jhuapl.edu>
  • Loading branch information
@dxenes1 @hannah-martinez
dxenes1 and hannah-martinez authored Nov 7, 2022
1 parent 65c2c4b commit e68dbe8
Show file tree
Hide file tree
Showing 10 changed files with 127 additions and 129 deletions.
4 changes: 1 addition & 3 deletions neuvue_project/templates/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,5 @@ <h2 class="pt-5 pb-3"> Contact Us </h2>

</div>
</div>
<script>

</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
{% endblock %}
173 changes: 88 additions & 85 deletions neuvue_project/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,101 +3,104 @@
{% load in_group %}
<!DOCTYPE html>
<html>
<head>
{% block header_includes %}{% endblock %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/workspace.css' %}">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500&family=Montserrat:wght@500;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'favicon/apple-touch-icon.png' %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'favicon/favicon-32x32.png' %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'favicon/favicon-16x16.png' %}">
<link rel="manifest" href="{% static 'favicon/site.webmanifest' %}">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css">
</head>

<head>
{% block header_includes %}{% endblock %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/workspace.css' %}">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500&family=Montserrat:wght@500;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'favicon/apple-touch-icon.png' %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'favicon/favicon-32x32.png' %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'favicon/favicon-16x16.png' %}">
<link rel="manifest" href="{% static 'favicon/site.webmanifest' %}">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css">
</head>

<body style="background-color: var(--background);">
<! Navigation Bar >
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="{% url "index" %}"> <img src="{% static 'images/axonolotl.png' %}" alt="" width="30" height="24" class="d-inline-block align-text-top"> NeuVue</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-row justify-content-end" id="navbarNav">
<ul class="navbar-nav ml-auto">

{% if request.user.is_staff %}

<body style="background-color: var(--background);">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="height:4vh;">
<div class="container-fluid">
<a class="navbar-brand" href="{% url "index" %}"> <img src="{% static 'images/axonolotl.png' %}" alt="" width="30" height="24" class="d-inline-block align-text-top"> NeuVue</a>
<ul class="navbar-nav ml-auto " style="flex-direction: row;">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Admin Tools
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdown">
<li> <a class="dropdown-item" href="{% url "admin:index" %}">Console</a></li>
<li> <a class="dropdown-item" href="{% url "dashboard" %}">Dashboard</a></li>
<li><a class="dropdown-item" href="{% url "lineage" %}">Lineage Viewer</a></li>
<li><a class="dropdown-item" href="{% url "report" %}">Reports</a></li>
<li><a class="dropdown-item" href="{% url "user-namespace" %}">User/Namespace Query</a></li>
</ul>
</li>

{% if request.user.is_staff %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Admin Tools
</a>
<ul class="dropdown-menu me-2 dropdown-menu-dark preferences" aria-labelledby="navbarDropdown">
<li> <a class="nav-link" href="{% url "dashboard" %}">Admin Dashboard</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="nav-link" href="{% url "lineage" %}">Lineage Viewer</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="nav-link" href="{% url "report" %}">Reports</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="nav-link" href="{% url "user-namespace" %}">User/Namespace Query</a></li>
</ul>
</li>
{% endif%}

{% if request.user|in_group:"AuthorizedUsers"%}
{% endif%}

{% if request.user|in_group:"AuthorizedUsers"%}

<li class="nav-item">
<a class="nav-link" href="{% url "getting-started" %}">Getting Started</a>
</li>

<li class="nav-item">
<a class="nav-link" href="{% url "inspect" %}">Inspect Task</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Neuron Viewers
</a>
<ul class="dropdown-menu me-2 dropdown-menu-dark preferences" aria-labelledby="navbarDropdown">
<li class="nav-item"> <a class="nav-link" href="{% url "synapse" %}">Synapse Viewer</a> </li>
<li><hr class="dropdown-divider"></li>
<li class="nav-item"> <a class="nav-link" href="{% url "nuclei" %}">Nuclei Viewer</a> </li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url "getting-started" %}">Getting Started</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url "inspect" %}">Inspect Task</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Neuron Viewers
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdown">
<li> <a class="dropdown-item" href="{% url "synapse" %}">Synapse Viewer</a> </li>
<li> <a class="dropdown-item" href="{% url "nuclei" %}">Nuclei Viewer</a> </li>
</ul>
</li>
<li class="nav-item">
<a class="btn btn-outline-success" href="{% url "tasks" %}">My Tasks</a>
</li>

<li class="nav-item">
<a class="nav-link" href="{% url "tasks" %}">My Tasks</a>
</li>
{% endif%}
{% endif%}

{% if request.user.is_authenticated %}
{% if request.user.is_authenticated %}

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<b> {{user.username}} </b>
</a>
<ul class="dropdown-menu me-2 dropdown-menu-dark preferences" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="{% url "preferences" %}" >Preferences</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="{% url "logout" %}">Logout</a></li>
</ul>
</li>
{% else %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<b> {{user.username}} </b>
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="{% url "preferences" %}" >Preferences</a></li>
<li><a class="dropdown-item" href="{% url "logout" %}">Sign Out</a></li>
</ul>
</li>

<li class="nav-item">
<a class="nav-link", href="{% url "about" %}"> About</a>
</li>
{% else %}

<li class="nav-item">
<a class="nav-link" href="{% provider_login_url 'google' %}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link", href="{% url "about" %}"> About</a>
</li>
<li class="nav-item">
<a class="btn btn-outline-secondary" href="{% provider_login_url 'google' %}">Sign In</a>
</li>

{% endif %}
</ul>
{% endif %}

</ul>
</div>
</nav>
</div>
</nav>

{% block content %}{% endblock %}

{% block content %}{% endblock %}
</body>
</body>
</html>
73 changes: 36 additions & 37 deletions neuvue_project/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,49 +4,48 @@

{% block content %}

<div class="basic workspace overflow-hidden">
<div class="intro">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="index-block d-flex justify-content-center" style="margin-top: 50%;">
<div class="title-container">
<div class="index-title-text ">Welcome to NeuVue</div>
{% if user.is_authenticated %}
<div class="d-flex justify-content-center">
<span class="index-title-sub-text">You are logged in as <b>{{ user.username }}. </b> </p>
</div>
{% else %}
<a class="index-title-sub-text d-flex justify-content-center" href="{% provider_login_url 'google' %}" ><img width="200"src="static/images/google.png" ></a>
{% endif %}

<div class="intro">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="index-block d-flex justify-content-center" style="margin-top: 50%;">
<div class="title-container">
<div class="index-title-text ">Welcome to NeuVue</div>
{% if user.is_authenticated %}
<div class="d-flex justify-content-center">
<span class="index-title-sub-text">You are logged in as <b>{{ user.username }}. </b> </p>
</div>
{% else %}
<a class="index-title-sub-text d-flex justify-content-center" href="{% provider_login_url 'google' %}" ><img width="200"src="static/images/google.png" ></a>
{% endif %}
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="index-card-container d-flex justify-content-center">
<div class="card index-card" id="bootstrap-overrides">
<div class="index-card-header card-header text-center">
Recent Changes
</div>
<div class="index-card-items">
{% if recent_updates %}
{% for update in recent_updates %}
<div class="index-card-item">
<div class="index-card-item-title">{{update.update_name}}</div>
<div class="index-card-item-date"><i>{{update.update_date}}</i></div>
<div class="index-card-item-description">{{update.update_description}}</div>
</div>
{% endfor %}
{% else %}
<div class="index-card-no-updates">There are no new updates to show</div>
{% endif %}
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="index-card-container d-flex justify-content-center">
<div class="card index-card" id="bootstrap-overrides">
<div class="index-card-header card-header text-center">
Recent Changes
</div>
<div class="index-card-items">
{% if recent_updates %}
{% for update in recent_updates %}
<div class="index-card-item">
<div class="index-card-item-title">{{update.update_name}}</div>
<div class="index-card-item-date"><i>{{update.update_date}}</i></div>
<div class="index-card-item-description">{{update.update_description}}</div>
</div>
{% endfor %}
{% else %}
<div class="index-card-no-updates">There are no new updates to show</div>
{% endif %}
</div>
</div>
</div>
<div class="index-card-column">
</div>
</div>
<div class="index-card-column">
</div>
</div>
</div>
Expand Down
6 changes: 2 additions & 4 deletions neuvue_project/workspace/static/css/workspace.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ ul li {
left:0vw;
}
.basic {
background-image: url('/static/images/neuron_background_sketch-01-min.png');
background-image: url('/static/images/neuron_background_sketch-01-min.jpg');
background-size: 70vw;
background-repeat: repeat;
min-height: 96vh;
Expand Down Expand Up @@ -89,14 +89,12 @@ ul li {
}

.intro {
background-image: url('/static/images/xrayneuron01-compressed.png');
background-image: url('/static/images/xray-neuron.jpg');
background-size: cover;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 95vh;
width: 100vw;
}


Expand Down
Binary file removed neuvue_project/workspace/static/images/background-large-01.png
View file
Binary file not shown.
Binary file added neuvue_project/workspace/static/images/neuron_background_sketch-01-min.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed neuvue_project/workspace/static/images/neuron_background_sketch-01-min.png
View file
Binary file not shown.
Binary file added neuvue_project/workspace/static/images/xray-neuron.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed neuvue_project/workspace/static/images/xrayneuron01-compressed.png
View file
Binary file not shown.
Binary file removed neuvue_project/workspace/static/images/xrayneuron01-min.png
View file
Binary file not shown.

0 comments on commit e68dbe8

Please sign in to comment.