From b71a99b608deaf6f7242c67f57c278a2f5dcea49 Mon Sep 17 00:00:00 2001
From: Frank Sauerburger <frank@sauerburger.com>
Date: Wed, 24 Feb 2021 21:05:26 +0100
Subject: [PATCH] Migrate to semantic css for ssh and nav
---
keys_home/static/keys_home/css/main.scss | 157 +++++++++++++++++----
keys_home/templates/keys_home/base.html | 84 ++++++-----
keys_home/templates/keys_home/home.html | 12 +-
ssh/templates/ssh/sshpublickey_detail.html | 20 +--
ssh/templates/ssh/sshpublickey_item.html | 2 +-
ssh/templates/ssh/sshpublickey_list.html | 18 +--
6 files changed, 193 insertions(+), 100 deletions(-)
diff --git a/keys_home/static/keys_home/css/main.scss b/keys_home/static/keys_home/css/main.scss
index 19c7c3a..0389298 100644
--- a/keys_home/static/keys_home/css/main.scss
+++ b/keys_home/static/keys_home/css/main.scss
@@ -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;
}
}
diff --git a/keys_home/templates/keys_home/base.html b/keys_home/templates/keys_home/base.html
index 454bf10..3418959 100644
--- a/keys_home/templates/keys_home/base.html
+++ b/keys_home/templates/keys_home/base.html
@@ -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 • Keys" style="height: 2.5rem; width: auto" />
+ <img src="{% static 'keys_home/img/logo.svg' %}" alt="Sauerburger IT • 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>
diff --git a/keys_home/templates/keys_home/home.html b/keys_home/templates/keys_home/home.html
index 779dd03..9d42d21 100644
--- a/keys_home/templates/keys_home/home.html
+++ b/keys_home/templates/keys_home/home.html
@@ -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>
diff --git a/ssh/templates/ssh/sshpublickey_detail.html b/ssh/templates/ssh/sshpublickey_detail.html
index 7d08e15..0388940 100644
--- a/ssh/templates/ssh/sshpublickey_detail.html
+++ b/ssh/templates/ssh/sshpublickey_detail.html
@@ -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 %}
diff --git a/ssh/templates/ssh/sshpublickey_item.html b/ssh/templates/ssh/sshpublickey_item.html
index b92cf08..7097326 100644
--- a/ssh/templates/ssh/sshpublickey_item.html
+++ b/ssh/templates/ssh/sshpublickey_item.html
@@ -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>
diff --git a/ssh/templates/ssh/sshpublickey_list.html b/ssh/templates/ssh/sshpublickey_list.html
index 4706b44..a3885eb 100644
--- a/ssh/templates/ssh/sshpublickey_list.html
+++ b/ssh/templates/ssh/sshpublickey_list.html
@@ -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' %}">
--
GitLab