Skip to content
Snippets Groups Projects
Verified Commit b71a99b6 authored by Frank Sauerburger's avatar Frank Sauerburger
Browse files

Migrate to semantic css for ssh and nav

parent 9150c140
No related branches found
No related tags found
1 merge request!3Draft: Resolve "Improve design"
Hide whitespace changes
Inline Side-by-side
keys_home/static/keys_home/css/main.scss
+ 126
− 31
View file @ b71a99b6
......@@ -5,6 +5,78 @@ $light: #f4f6f9;
@import 'bootstrap/bootstrap.scss';
a:hover {
text-decoration: none;
}
.h-control {
display: flex;
justify-content: space-between;
}
pre {
margin-bottom: 0;
}
.breakline {
white-space: normal;
word-break: break-all;
}
i.fas {
padding-left: 1.2em;
}
main {
@extend .container, .mt-3;
}
/********************************************************/
/* Navigation */
/********************************************************/
.nav-breadcrumb {
display: none;
@extend .d-md-block;
ol {
@extend .breadcrumb;
}
li {
@extend .breadcrumb-item;
}
li:last-child {
@extend .active;
}
}
.nav-main {
@extend .navbar, .navbar-expand-lg, .navbar-light, .bg-light, .shadow-sm, .border-bottom;
.nav-container {
@extend .container;
}
.navbar-brand img {
height: 2.5rem;
width: auto;
}
.navbar-nav {
margin-left: auto;
}
li {
@extend .nav-item;
a {
@extend .nav-link;
}
}
li + .navbar-login {
@extend .ml-4;
}
.navbar-login + li{
@extend .ml-4;
}
}
/********************************************************/
/* Footer
/********************************************************/
html {
position: relative;
min-height: 100%;
......@@ -12,7 +84,7 @@ html {
body {
margin-bottom: 14rem;
}
.page-footer {
.footer-main {
position: absolute;
bottom: 0;
width: 100%;
......@@ -20,41 +92,64 @@ body {
padding-top: 2rem;
margin-top: 2rem;
font-size: smaller;
color: #6c757d !important;
}
.page-footer ul {
@extend .text-muted, .border-top;
.footer-container {
@extend .container;
}
.footer-left {
@extend .col-md-5;
text-align: left;
}
.footer-center {
@extend .col-md-2;
text-align: center;
img {
height: 3rem;
width: auto;
}
}
.footer-right {
@extend .col-md-5;
text-align: right;
}
.footer-copy {
@extend .mb-3;
}
ul {
list-style: none;
}
.page-footer a {
}
a {
color: $dark;
}
.page-footer a:hover {
color: $primary;
&:hover {
color: $primary;
}
}
}
/********************************************************/
/* Home page */
/********************************************************/
.mainlist {
list-style: none;
padding-left: 0;
flex-direction: row;
justify-content: space-around;
margin-top: 10vh;
}
.mainlist li {
list-style: none;
padding-left: 0;
flex-direction: row;
justify-content: space-around;
margin-top: 10vh;
@extend .d-lg-flex;
i, svg {
@extend .display-1;
}
li {
text-align: center;
margin-top: 3rem !important;
margin-bottom: 3rem !important;
}
a:hover {
text-decoration: none;
}
pre {
margin-bottom: 0;
}
.breakline {
white-space: normal;
word-break: break-all;
}
}
/********************************************************/
......@@ -103,9 +198,9 @@ pre {
@extend .bg-light;
}
.sshkey-finerprint-title {
.sshkey-fingerprint-title {
@extend .text-muted, .mb-1;
i.fas {
i, svg {
@extend .mr-1;
}
}
......@@ -131,7 +226,7 @@ pre {
.sshkey-content-title {
@extend .d-lg-flex, .mb-1, .text-muted;
justify-content: space-between;
i.fas {
i, svg {
@extend .mr-1;
}
}
......
keys_home/templates/keys_home/base.html
+ 41
− 43
View file @ b71a99b6
......@@ -16,42 +16,40 @@
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm border-bottom">
<div class="container">
<nav class="nav-main">
<div class="nav-container">
<a class="navbar-brand" href="/">
<h1 class="sr-only">Sauerburger Keys</h1>
<img src="{% static 'keys_home/img/logo.svg' %}" alt="Sauerburger IT &bullet; Keys" style="height: 2.5rem; width: auto" />
<img src="{% static 'keys_home/img/logo.svg' %}" alt="Sauerburger IT &bullet; Keys" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'ssh-list' %}">
<i class="fas fa-server"></i> SSH
<ul class="navbar-nav">
<li>
<a href="{% url 'ssh-list' %}">
<i class="fas fa-server"></i> SSH
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'publickey-list' %}">
<i class="fas fa-envelope-open-text"></i> OpenPGP
<li>
<a href="{% url 'publickey-list' %}">
<i class="fas fa-envelope-open-text"></i> OpenPGP
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'ca-list' %}">
<i class="fas fa-network-wired"></i> PKI
<li>
<a href="{% url 'ca-list' %}">
<i class="fas fa-network-wired"></i> PKI
</a>
</li>
<li class="ml-4 nav-item">
<li class="navbar-login">
{% if request.user.is_anonymous %}
<a class="nav-link" href="">
<i class="fas fa-sign-in-alt"></i>
Login
<a href="">
<i class="fas fa-sign-in-alt"></i> Login
</a>
{% else %}
<a class="nav-link" href="">
<i class="fas fa-user"></i>
{{ request.user.username }}
<a href="">
<i class="fas fa-user"></i> {{ request.user.username }}
</a>
{% endif %}
</li>
......@@ -60,34 +58,34 @@
</div>
</nav>
<main class="container mt-3">
<main>
{% block content %}
{% endblock %}
</main>
<footer class="page-footer border-top">
<div class="container">
<div class="row">
<div class="col-md-5" style="text-align: left;">
<ul class="pl-0">
<li class="mb-3">Copyright 2020-{% now "Y" %}, Frank Sauerburger</li>
<li><a href="https://sauerburger.com/">sauerburger.com</a></li>
<li><a href="https://gitlab.sauerburger.com/">gitlab.sauerburger.com</a></li>
<li><a href="https://frank.sauerburger.com/">frank.sauerburger.io</a></li>
</ul>
</div>
<div class="col-md-2" style="text-align: center;">
<img src="{% static 'keys_home/img/icon.light.svg' %}" alt="SIT" style="height: 3rem; width: auto"/>
</div>
<div class="col-md-5" style="text-align: right">
<ul>
<li><a href="mailto:frank@sauerburger.com">Contact</a></li>
<li><a href="">Legal notice</a></li>
<li><a href="">Privacy policy</a></li>
</ul>
<footer class="footer-main">
<div class="footer-container">
<div class="row">
<div class="footer-left">
<ul class="pl-0">
<li class="footer-copy">Copyright 2020-{% now "Y" %}, Frank Sauerburger</li>
<li><a href="https://sauerburger.com/">sauerburger.com</a></li>
<li><a href="https://gitlab.sauerburger.com/">gitlab.sauerburger.com</a></li>
<li><a href="https://frank.sauerburger.com/">frank.sauerburger.io</a></li>
</ul>
</div>
<div class="footer-center">
<img src="{% static 'keys_home/img/icon.light.svg' %}" alt="SIT" />
</div>
<div class="footer-right">
<ul>
<li><a href="mailto:frank@sauerburger.com">Contact</a></li>
<li><a href="">Legal notice</a></li>
<li><a href="">Privacy policy</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
......
keys_home/templates/keys_home/home.html
+ 6
− 6
View file @ b71a99b6
......@@ -3,18 +3,18 @@
{% block content %}
<h2>Public key directory</h2>
<ul class="d-lg-flex mainlist">
<ul class="mainlist">
<li><h3><a href="{% url 'ssh-list' %}">
<i class="fas fa-server display-1"></i><br />
SSH Public Keys
<i class="fas fa-server"></i><br />
SSH Public Keys
</a></h3></li>
<li><h3><a href="{% url 'publickey-list' %}">
<i class="fas fa-envelope-open-text display-1"></i><br />
<i class="fas fa-envelope-open-text"></i><br />
OpenPGP Public Keys
</a></h3></li>
<li><h3><a href="{% url 'ca-list' %}">
<i class="fas fa-network-wired display-1"></i><br />
<h3>CAs and Certificates</h3>
<i class="fas fa-network-wired"></i><br />
CAs and Certificates
</a></h3></li>
</ul>
......
ssh/templates/ssh/sshpublickey_detail.html
+ 10
− 10
View file @ b71a99b6
......@@ -2,16 +2,16 @@
{% block content %}
<nav class="d-md-block d-none" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
<li class="breadcrumb-item"><a href="{% url 'ssh-list' %}">SSH Keys</a></li>
<li class="breadcrumb-item active" aria-current="page">
<a href="{% url 'ssh-detail' publickey.pk %}">{{ publickey.server }}</a>
</li>
</ol>
</nav>
<nav class="nav-breadcrumb" aria-label="breadcrumb">
<ol>
<li><a href="{% url 'home' %}">Home</a></li>
<li><a href="{% url 'ssh-list' %}">SSH Keys</a></li>
<li aria-current="page">
<a href="{% url 'ssh-detail' publickey.pk %}">{{ publickey.server }}</a>
</li>
</ol>
</nav>
{% include 'ssh/sshpublickey_item.html' %}
{% include 'ssh/sshpublickey_item.html' %}
{% endblock %}
ssh/templates/ssh/sshpublickey_item.html
+ 1
− 1
View file @ b71a99b6
......@@ -17,7 +17,7 @@
</h3>
<div class="sshkey-fingerprint">
<div class="sshkey-fignerprint-title">
<div class="sshkey-fingerprint-title">
<i class="fas fa-fingerprint"></i> Fingerprint
{% if not publickey.client_cert %}<small>compare on first connect</small>{% endif %}
</div>
......
ssh/templates/ssh/sshpublickey_list.html
+ 9
− 9
View file @ b71a99b6
......@@ -2,16 +2,16 @@
{% block content %}
<nav class="d-md-block d-none" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">
<a href="{% url 'ssh-list' %}">SSH Keys</a>
</li>
</ol>
</nav>
<nav class="nav-breadcrumb" aria-label="breadcrumb">
<ol>
<li><a href="{% url 'home' %}">Home</a></li>
<li aria-current="page">
<a href="{% url 'ssh-list' %}">SSH Keys</a>
</li>
</ol>
</nav>
<h2 class="d-flex justify-content-between">
<h2 class="h-control">
<div>SSH Public Keys</div>
{% if perms.ssh.add_sshpublickey %}
<a class="btn btn-outline-primary" href="{% url 'ssh-create' %}">
......
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