]> git.ipfire.org Git - ipfire.org.git/commitdiff
location: Update layout to Bulma
authorMichael Tremer <michael.tremer@ipfire.org>
Tue, 10 Oct 2023 17:23:07 +0000 (17:23 +0000)
committerMichael Tremer <michael.tremer@ipfire.org>
Tue, 10 Oct 2023 17:23:07 +0000 (17:23 +0000)
Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
Makefile.am
src/sass/main.sass
src/templates/location/blacklists.html [deleted file]
src/templates/location/download.html
src/templates/location/how-to-use.html
src/templates/location/index.html
src/templates/location/lookup.html
src/web/__init__.py
src/web/location.py

index 360d52424732915bcd6300c4d668dff8c0c04e11..ea3350be29aa34ac7ab0c9d67155218c818b9be0 100644 (file)
@@ -249,7 +249,6 @@ templates_fireinfo_modulesdir = $(templates_fireinfodir)/modules
 
 templates_location_DATA = \
        src/templates/location/base.html \
-       src/templates/location/blacklists.html \
        src/templates/location/download.html \
        src/templates/location/how-to-use.html \
        src/templates/location/index.html \
index 6eeedaa3439c1e32aed23ad8a0c5339ec34dfbd8..43fe50e2070c7f7f697a67b798725b3434d59e94 100644 (file)
@@ -87,3 +87,8 @@ html, body
 .wrap-text
     height: max-content;
     white-space: inherit;
+
+.map
+       width: 100%;
+       height: 100%;
+       min-height: 24rem;
diff --git a/src/templates/location/blacklists.html b/src/templates/location/blacklists.html
deleted file mode 100644 (file)
index fb3421a..0000000
+++ /dev/null
@@ -1,27 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}{{ _("Blacklist Status of %s") % address }}{% end block %}
-
-{% block main %}
-       <div class="card mb-4">
-               <div class="card-body">
-                       <h5 class="card-title mb-0">{{ _("Blacklists") }}</h5>
-               </div>
-
-               <ul class="list-group list-group-flush">
-                       {% for bl in sorted(blacklists) %}
-                               {% if blacklists[bl] %}
-                                       {% set code, reason = blacklists[bl] %}
-
-                                       <li class="list-group-item {% if code %}list-group-item-danger{% else %}list-group-item-success{% end %}">
-                                               <p class="mb-0">{{ bl }}</p>
-
-                                               {% if reason %}
-                                                       <small class="text-muted">{{ reason }}</small>
-                                               {% end %}
-                                       </li>
-                               {% end %}
-                       {% end %}
-               </ul>
-       </div>
-{% end block %}
index 448a9354bee048d27a45919211bf2ab943721f78..25b10f9d520ac63395b0ead919d148e76c47e2cc 100644 (file)
 {% block title %}{{ _("Download") }}{% end block %}
 
 {% block container %}
-       <section>
-               <div class="container">
-                       <div class="row">
-                               <div class="col col-lg-6">
-                                       <h1 class="display-2">{{ _("Download") }}</h1>
-
-                                       <p>
-                                               Learn how to download and install <code>libloc</code>
-                                       </p>
-                               </div>
+       <section class="hero is-primary">
+               <div class="hero-body">
+                       <div class="container">
+                               <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+                                       <ul>
+                                               <li>
+                                                       <a href="/">
+                                                               {{ _("Home") }}
+                                                       </a>
+                                               </li>
+                                               <li>
+                                                       <a href="#">
+                                                               {{ _("Projects") }}
+                                                       </a>
+                                               </li>
+                                               <li>
+                                                       <a href="/projects/location">
+                                                               {{ _("Location") }}
+                                                       </a>
+                                               </li>
+                                               <li class="is-active">
+                                                       <a href="#" aria-current="page">{{ _("Download") }}</a>
+                                               </li>
+                                       </ul>
+                               </nav>
+
+                               <h1 class="title is-1">{{ _("Download IPFire Location") }}</h1>
+                               <h6 class="subtitle is-6">
+                                       Learn how to download and install <code>libloc</code>
+                               </h6>
                        </div>
                </div>
        </section>
 
-       <section class="inverse">
-               <div class="container">
-                       <div class="row justify-content-between flex-lg-row-reverse">
-                               <div class="col-12 col-lg-4 text-center text-lg-end">
-                                       <i class="fas fa-download fa-10x"></i>
-                               </div>
-
-                               <div class="col-12 col-lg-8">
-                                       <h1>{{ _("Source") }}</h1>
-                                       
-                                       <p>
-                                               Build <code>libloc</code>, the software that powers IPFire Location
-                                               from source.
-                                       </p>
-
-                                       <div class="btn-toolbar">
-                                               <a class="btn btn-secondary mr-2" href="https://source.ipfire.org/releases/libloc/">
-                                                       {{ _("Download Source") }}
-                                               </a>
+       <section class="hero">
+               <div class="hero-body">
+                       <div class="container">
+                               <div class="columns is-vcentered">
+                                       <div class="column">
+                                               <h2 class="title is-2">{{ _("Source") }}</h2>
+
+                                               <div class="block">
+                                                       <p>
+                                                               Build <code>libloc</code>, the software that powers IPFire Location
+                                                               from source.
+                                                       </p>
+                                               </div>
+
+                                               <div class="buttons">
+                                                       <a class="button is-light" href="https://source.ipfire.org/releases/libloc/">
+                                                               {{ _("Download Source") }}
+                                                       </a>
+
+                                                       <a class="button is-light" href="https://git.ipfire.org/?p=location/libloc.git;a=summary">
+                                                               {{ _("Browse Source") }}
+                                                       </a>
+                                               </div>
+                                       </div>
 
-                                               <a class="btn btn-secondary" href="https://git.ipfire.org/?p=location/libloc.git;a=summary">
-                                                       {{ _("Browse Source") }}
-                                               </a>
+                                       <div class="column is-narrow">
+                                               <i class="fas fa-download fa-10x"></i>
                                        </div>
                                </div>
                        </div>
                </div>
        </section>
 
-       <section>
-               <div class="container">
-                       <p class="lead my-5">
-                               We provide pre-compiled packages for various distributions to get you
-                               started with <code>libloc</code> quicker
-                       </p>
-
-                       <div class="row justify-content-center flex-lg-row-reverse">
-                               <div class="col-12 col-sm-6 col-lg-2 text-center text-lg-end">
-                                       <img class="img-fluid w-100 my-5" src="{{ static_url("img/ipfire-tux.png") }}"
-                                               alt="{{ _("IPFire") }}">
-                               </div>
-
-                               <div class="col-12 col-lg-10">
-                                       <h1>{{ _("IPFire") }}</h1>
-
+       <section class="hero">
+               <div class="hero-body">
+                       <div class="container">
+                               <div class="block">
                                        <p>
-                                               IPFire Location comes pre-installed with every IPFire system
-                                               and powers firewall rules based on source/destination country
-                                               as well as geographic reports.
+                                               We provide pre-compiled packages for various distributions to get you
+                                               started with <code>libloc</code> quicker
                                        </p>
                                </div>
-                       </div>
 
-                       <div class="row justify-content-center flex-lg-row-reverse">
-                               <div class="col-12 col-sm-6 col-lg-2 text-center text-lg-end">
-                                       <img class="img-fluid w-100 my-5" src="{{ static_url("img/debian-logo.svg") }}"
-                                               alt="{{ _("Debian") }}">
+                               <div class="columns is-vcentered">
+                                       <div class="column">
+                                               <h2 class="title is-2">{{ _("IPFire") }}</h2>
+
+                                               <p>
+                                                       IPFire Location comes pre-installed with every IPFire system
+                                                       and powers firewall rules based on source/destination country
+                                                       as well as geographic reports.
+                                               </p>
+                                       </div>
+
+                                       <div class="column is-narrow">
+                                               <figure class="image is-256by256">
+                                                       <img src="{{ static_url("img/ipfire-tux.png") }}"
+                                                               alt="{{ _("IPFire") }}">
+                                               </figure>
+                                       </div>
                                </div>
 
-                               <div class="col-12 col-lg-10">
-                                       <h1>{{ _("Debian") }}</h1>
+                               <div class="columns is-vcentered">
+                                       <div class="column">
+                                               <h2 class="title is-2">{{ _("Debian") }}</h2>
 
-                                       <p>
-                                               The supported architectures are amd64, arm64, i386 and armhf.
-                                       </p>
+                                               <p>
+                                                       The supported architectures are amd64, arm64, i386 and armhf.
+                                               </p>
+                                       </div>
 
-                                       {% for release in ("buster", "bullseye", "sid") %}
-                                               <h4 class="mb-1">{{ _("Debian %s") % release }}</h4>
+                                       <div class="column is-narrow">
+                                               <figure class="image is-256by256">
+                                                       <img src="{{ static_url("img/debian-logo.svg") }}"
+                                                               alt="{{ _("Debian") }}">
+                                               </figure>
+                                       </div>
+                               </div>
+
+                               {% for release in ("buster", "bullseye", "sid") %}
+                                       <h4 class="title is-4">{{ _("Debian %s") % release }}</h4>
 
+                                       <div class="block">
                                                <p>
                                                        Create a new file <code>/etc/apt/sources.list.d/location.list</code>
                                                </p>
+                                       </div>
 
-                                               <pre class="pre-light mb-4"><code>deb&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;https://packages.ipfire.org/location {{ release }}/
+                                       <div class="block">
+                                               <pre><code>deb&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;https://packages.ipfire.org/location {{ release }}/
 deb-src&nbsp;https://packages.ipfire.org/location {{ release }}/</code></pre>
-                                       {% end %}
+                                       </div>
+                               {% end %}
 
+                               <div class="block">
                                        <p>
                                                All packages are cryptographically signed.
                                                To install the key, run this command:
                                        </p>
+                               </div>
 
-                                       <pre class="pre-light mb-4"><code>curl https://packages.ipfire.org/79842AA7CDBA7AE3-pub.asc | apt-key add -</code></pre>
+                               <div class="block">
+                                       <pre><code>curl https://packages.ipfire.org/79842AA7CDBA7AE3-pub.asc | apt-key add -</code></pre>
+                               </div>
 
+                               <div class="block">
                                        <p>
                                                Finally download the package lists and install <code>libloc</code>
                                        </p>
-                                       
+                               </div>
+
+                               <div class="block">
                                        <pre class="pre-light mb-4"><code>apt-get update
 apt-get install location</code></pre>
                                </div>
index 787053bd02ca1f0dd8c55626c968d05e4a22604c..07a5f8dce8bb4b64e53ffc56edf90c1418e60c5e 100644 (file)
 {% block title %}{{ _("How To Use") }}{% end block %}
 
 {% block container %}
-       <section>
-               <div class="container">
-                       <div class="row">
-                               <div class="col col-lg-6">
-                                       <h1 class="display-2">{{ _("How To Use") }}</h1>
-
-                                       <p>
-                                               <code>libloc</code> is versatile, fast and easy to use
-                                               in any application.
-                                       </p>
-                               </div>
+       <section class="hero is-primary">
+               <div class="hero-body">
+                       <div class="container">
+                               <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+                                       <ul>
+                                               <li>
+                                                       <a href="/">
+                                                               {{ _("Home") }}
+                                                       </a>
+                                               </li>
+                                               <li>
+                                                       <a href="#">
+                                                               {{ _("Projects") }}
+                                                       </a>
+                                               </li>
+                                               <li>
+                                                       <a href="/projects/location">
+                                                               {{ _("Location") }}
+                                                       </a>
+                                               </li>
+                                               <li class="is-active">
+                                                       <a href="#" aria-current="page">{{ _("How to use?") }}</a>
+                                               </li>
+                                       </ul>
+                               </nav>
+
+                               <h1 class="title is-1">{{ _("IPFire Location") }}</h1>
+                               <h6 class="subtitle is-6">
+                                       <code>libloc</code> is versatile, fast and easy to use
+                                       in any application.
+                               </h6>
                        </div>
                </div>
        </section>
 
-       <section class="inverse">
+       <section class="section">
                <div class="container">
-                       <div class="row justify-content-between flex-md-row-reverse">
-                               <div class="col-12 col-md-4 text-center text-md-end">
-                                       <img class="img-fluid w-100 my-5" src="{{ static_url("img/bash-logo.svg") }}"
-                                               alt="{{ _("CLI") }}">
+                       <div class="columns">
+                               <div class="column">
+                                       <h2 class="title is-2">{{ _("Command Line") }}</h2>
+
+                                       <div class="content">
+                                               <p>
+                                                       <code>libloc</code> comes with a command line tool which
+                                                       makes it easy to test the library or integrate it into
+                                                       your shell scripts.
+                                                       <code>location(8)</code> knows a couple of commands
+                                                       to retrieve country or Autonomous System of an IP address
+                                                       and can generate lists of networks to be imported into
+                                                       other software.
+                                               </p>
+
+                                               <p>
+                                                       Although this is not the fastest way to lookup a large number
+                                                       of IP addresses, <code>location(8)</code> is versatile
+                                                       and very easy to use.
+                                               </p>
+
+                                               <a class="button is-light" href="https://man-pages.ipfire.org/libloc/location.html">
+                                                       {{ _("Man Page") }}
+                                               </a>
+                                       </div>
                                </div>
 
-                               <div class="col-12 col-md-8">
-                                       <h1>{{ _("Command Line") }}</h1>
-
-                                       <p>
-                                               <code>libloc</code> comes with a command line tool which
-                                               makes it easy to test the library or integrate it into
-                                               your shell scripts.
-                                               <code>location(8)</code> knows a couple of commands
-                                               to retrieve country or Autonomous System of an IP address
-                                               and can generate lists of networks to be imported into
-                                               other software.
-                                       </p>
-
-                                       <p>
-                                               Although this is not the fastest way to lookup a large number
-                                               of IP addresses, <code>location(8)</code> is versatile
-                                               and very easy to use.
-                                       </p>
-
-                                       <a class="btn btn-secondary" href="https://man-pages.ipfire.org/libloc/location.html">
-                                               {{ _("Man Page") }}
-                                       </a>
+                               <div class="column is-narrow">
+                                       <figure class="image is-256x256">
+                                               <img src="{{ static_url("img/bash-logo.svg") }}" alt="{{ _("CLI") }}">
+                                       </figure>
                                </div>
                        </div>
 
-                       <div class="row">
-                               <div class="col-12">
-                                       <h6>{{ _("Search for an Autonomous System by Name") }}</h6>
+                       <div class="block">
+                               <h6 class="title is-6">{{ _("Search for an Autonomous System by Name") }}</h6>
 
-                                       <pre class="mb-4"><code>$ location search-as "Lightning Wire Labs"
+                               <pre><code>$ location search-as "Lightning Wire Labs"
 AS204867 (Lightning Wire Labs GmbH)</code></pre>
+                       </div>
 
-                                       <h6>{{ _("Lookup an IP Address") }}</h6>
+                       <div class="block">
+                               <h6 class="title is-6">{{ _("Lookup an IP Address") }}</h6>
 
-                                       <pre class="mb-4"><code>$ location lookup 81.3.27.38
+                               <pre><code>$ location lookup 81.3.27.38
 81.3.27.38 belongs to 81.3.27.0/24 which is a part of AS24679 (Hostway Deutschland GmbH)</code></pre>
-                               </div>
                        </div>
                </div>
        </section>
 
-       <section>
+       <section class="section">
                <div class="container">
-                       <div class="row justify-content-between flex-md-row-reverse">
-                               <div class="col-12 col-md-4 text-center text-md-end">
-                                       <img class="img-fluid w-100 my-5" src="{{ static_url("img/python-logo.svg") }}"
-                                               alt="{{ _("Python") }}">
+                       <div class="columns">
+                               <div class="column is-narrow">
+                                       <figure class="image is-256x256">
+                                               <img src="{{ static_url("img/python-logo.svg") }}"
+                                                       alt="{{ _("Python") }}">
+                                       </figure>
                                </div>
 
-                               <div class="col-12 col-md-6">
-                                       <h1>{{ _("Python") }}</h1>
-
-                                       <p>
-                                               <code>libloc</code> comes with native Python bindings which
-                                               are used by its main command-line tool
-                                               <a class="text-white" href="https://man-pages.ipfire.org/libloc/location.html">
-                                                       <code>location</code>
-                                               </a>.
-                                               They are the most advanced bindings as they support reading
-                                               from the database as well as writing to it.
-                                       </p>
+                               <div class="column">
+                                       <h2 class="title is-2">{{ _("Python") }}</h2>
+
+                                       <div class="content">
+                                               <p>
+                                                       <code>libloc</code> comes with native Python bindings which
+                                                       are used by its main command-line tool
+                                                       <a class="text-white" href="https://man-pages.ipfire.org/libloc/location.html">
+                                                               <code>location</code>
+                                                       </a>.
+                                                       They are the most advanced bindings as they support reading
+                                                       from the database as well as writing to it.
+                                               </p>
+                                       </div>
                                </div>
                        </div>
 
-                       <div class="row">
-                               <div class="col-12">
-                                       <h6>{{ _("Load the database") }}</h6>
+                       <div class="block">
+                               <h6 class="title is-6">{{ _("Load the database") }}</h6>
 
-                                       <pre class="pre-light mb-4"><code>Python 3.7.3 (default, Apr  3 2019, 05:39:12)
+                               <pre><code>Python 3.7.3 (default, Apr  3 2019, 05:39:12)
 [GCC 8.3.0] on linux
 Type "help", "copyright", "credits" or "license" for more information.
 &gt;&gt;&gt; import location
 &gt;&gt;&gt; d = location.Database("/usr/share/location/database.db")</code></pre>
+                       </div>
 
-                                       <h6>{{ _("Search for an Autonomous System by Name") }}</h6>
+                       <div class="block">
+                               <h6 class="title is-6">{{ _("Search for an Autonomous System by Name") }}</h6>
 
-                                       <pre class="pre-light mb-4"><code>&gt;&gt;&gt; for i in d.search_as("Lightning Wire Labs"):
+                               <pre><code>&gt;&gt;&gt; for i in d.search_as("Lightning Wire Labs"):
 ... &nbsp;&nbsp;print(i)
 ...
 AS204867 (Lightning Wire Labs GmbH)</code></pre>
+                       </div>
 
-                                       <h6>{{ _("Lookup an IP Address") }}</h6>
+                       <div class="block">
+                               <h6 class="title is-6">{{ _("Lookup an IP Address") }}</h6>
 
-                                       <pre class="pre-light"><code>&gt;&gt;&gt; n = d.lookup("81.3.27.38")
+                               <pre><code>&gt;&gt;&gt; n = d.lookup("81.3.27.38")
 &gt;&gt;&gt; n
 &lt;location.Network 81.3.27.0/24&gt;
 &gt;&gt;&gt; n.asn
 24679
 &gt;&gt;&gt; n.country_code
 'DE'</code></pre>
-                               </div>
                        </div>
                </div>
        </section>
index dd4ea4dbd07d5506fe7226c0ca54c26042a9347f..7db228870a2e703c81c509c61145f2c355896f22 100644 (file)
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "../base.html" %}
 
 {% block head %}
        <meta name="description" content="{{ _("A powerful location database to find people on the Internet") }}" />
@@ -7,71 +7,97 @@
 {% block title %}{{ _("Welcome to IPFire Location") }}{% end block %}
 
 {% block container %}
-       <div class="header">
-               <div class="container">
-                       <h1>{{ _("Welcome to IPFire Location") }}</h1>
+       <section class="hero is-primary">
+               <div class="hero-body">
+                       <div class="container">
+                               <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+                                       <ul>
+                                               <li>
+                                                       <a href="/">
+                                                               {{ _("Home") }}
+                                                       </a>
+                                               </li>
+                                               <li>
+                                                       <a href="#">
+                                                               {{ _("Projects") }}
+                                                       </a>
+                                               </li>
+                                               <li class="is-active">
+                                                       <a href="#" aria-current="page">{{ _("Location") }}</a>
+                                               </li>
+                                       </ul>
+                               </nav>
+
+                               <h1 class="title is-1">{{ _("IPFire Location") }}</h1>
+                               <h6 class="subtitle is-6">
+                                       {{ _("A powerful, free IP address location database") }}
+                               </h6>
+                       </div>
+               </div>
+       </section>
 
-                       <p class="text-muted">
-                               {% if address.country_code %}
+       {% if address.country_code %}
+               <section class="has-background-light">
+                       <div class="container">
+                               <p class="has-text-centered px-2 py-1">
                                        {{ _("We have detected you visiting us from %s.") % format_country_name(address.country_code) }}
-                               {% else %}
-                                       {{ _("Unfortunately we do not know where you are visiting us from.") }}
-                               {% end %}
+                                       <a href="/projects/location/lookup/{{ address }}">{{ _("Learn More") }}</a>
+                               </p>
+                       </div>
+               </section>
+       {% end %}
 
-                               <a href="/projects/location/lookup/{{ address }}">{{ _("Learn More") }}</a>
-                       </p>
-               </div>
-       </div>
+       <section class="section">
+               <div class="container">
+                       <div class="block">
+                               <p class="is-size-4">
+                                       IPFire<span class="has-text-primary">_</span> Location is being used in
+                                       firewalls or other threat detection software, load-balancers, online shops,
+                                       websites, analytics &amp; reporting tools and more to detect the
+                                       originating country by IP address.
+                                       We are proud that our software is faster than others
+                                       by maintaining a smaller memory footprint which puts it
+                                       first in performance.
+                               </p>
+                       </div>
+
+                       <div class="block">
+                               <p>
+                                       Our daily updated database does not only have information
+                                       about the originating country of all IPv6 and IPv4 addresses.
+                                       It identifies the Autonomous System (AS) these IP
+                                       addresses belong to, as well and more...
+                                       <code>libloc</code> is the C/C++ library that fires our
+                                       location services and runs on *nix, Mac OS X and more.
+                                       Integration into existing software is very easy and
+                                       bindings for languages like Python and Perl are available.
+                               </p>
+                       </div>
+
+                       <div class="buttons">
+                               <a class="button is-light" href="/projects/location/how-to-use">
+                                       {{ _("How To Use") }}
+                               </a>
 
-       <div class="container">
-               <section>
-                       <h3>{{ _("What is IPFire Location?") }}</h3>
-
-                       <p>
-                               IPFire Location can be used in firewalls or other threat
-                               detection software, load-balancers, online shops, websites,
-                               analytics &amp; reporting tools and more to detect the
-                               originating country by IP address.
-                               We are proud that our software is faster than others
-                               by maintaining a smaller memory footprint which puts it
-                               first in performance.
-                       </p>
-
-                       <p>
-                               Our daily updated database does not only have information
-                               about the originating country of all IPv6 and IPv4 addresses.
-                               It identifies the Autonomous System (AS) these IP
-                               addresses belong to, as well and more...
-                       </p>
-
-                       <p>
-                               <code>libloc</code> is the C/C++ library that fires our
-                               location services and runs on *nix, Mac OS X and more.
-                               Integration into existing software is very easy and
-                               bindings for languages like Python and Perl are available.
-                       </p>
-
-                       <div class="btn-toolbar">
-                               <a class="btn btn-secondary mr-2" href="/projects/location/how-to-use">{{ _("How To Use") }}</a>
-                               <a class="btn btn-primary" href="/donate">
+                               <a class="button is-primary" href="/donate">
                                        {{ _("Donate") }}
                                </a>
                        </div>
                </section>
        </div>
 
-       <section>
-               <div class="container">
-                       <div class="card bg-primary text-white p-5">
-                               <div class="card-body">
-                                       <div class="row">
-                                               <div class="col-md-12 col-lg-6 mb-3 d-flex">
-                                                       <div class="align-self-stretch">
-                                                               <span class="fas fa-biohazard fa-2x px-3"></span>
+       <section class="hero is-light">
+               <div class="hero-body">
+                       <div class="container">
+                               <div class="columns is-multiline">
+                                       <div class="column is-half">
+                                               <div class="columns is-mobile is-vcentered">
+                                                       <div class="column is-3 has-text-centered">
+                                                               <span class="fas fa-biohazard fa-5x"></span>
                                                        </div>
 
-                                                       <div class="flex-column">
-                                                               <h5 class="mb-3">{{ _("Threat Detection") }}</h5>
+                                                       <div class="column">
+                                                               <p class="title is-5">{{ _("Threat Detection") }}</p>
 
                                                                <p>
                                                                        {{ _("Location information is crucial to identify where an attacker is coming from.") }}
                                                                </p>
                                                        </div>
                                                </div>
+                                       </div>
 
-                                               <div class="col-md-12 col-lg-6 mb-3 d-flex">
-                                                       <div class="align-self-stretch">
-                                                               <span class="fas fa-balance-scale fa-2x px-3"></span>
+                                       <div class="column is-half">
+                                               <div class="columns is-mobile is-vcentered">
+                                                       <div class="column is-3 has-text-centered">
+                                                               <span class="fas fa-balance-scale fa-5x"></span>
                                                        </div>
 
-                                                       <div class="flex-column">
-                                                               <h5 class="mb-3">{{ _("Load-Balancing") }}</h5>
+                                                       <div class="column">
+                                                               <p class="title is-5">{{ _("Load-Balancing") }}</p>
 
                                                                <p>
                                                                        {{ _("Redirect your users to the nearest data center to given them a better user experience with faster websites and faster downloads.") }}
                                                                </p>
                                                        </div>
                                                </div>
+                                       </div>
 
-                                               <div class="col-md-12 col-lg-6 mb-3 d-flex">
-                                                       <div class="align-self-stretch">
-                                                               <span class="fas fa-route fa-2x px-3"></span>
+                                       <div class="column is-half">
+                                               <div class="columns is-mobile is-vcentered">
+                                                       <div class="column is-3 has-text-centered">
+                                                               <span class="fas fa-route fa-5x"></span>
                                                        </div>
 
-                                                       <div class="flex-column">
-                                                               <h5 class="mb-3">{{ _("Online Visitors") }}</h5>
+                                                       <div class="column">
+                                                               <p class="title is-5">{{ _("Online Visitors") }}</p>
 
                                                                <p>
                                                                        {{ _("Comply with legal requirements and show visitors the correct information depending on the country they are visiting from.") }}
                                                                </p>
                                                        </div>
                                                </div>
+                                       </div>
 
-                                               <div class="col-md-12 col-lg-6 mb-3 d-flex">
-                                                       <div class="align-self-stretch">
-                                                               <span class="fab fa-osi fa-2x px-3"></span>
+                                       <div class="column is-half">
+                                               <div class="columns is-mobile is-vcentered">
+                                                       <div class="column is-3 has-text-centered">
+                                                               <span class="fab fa-osi fa-5x"></span>
                                                        </div>
 
-                                                       <div class="flex-column">
-                                                               <h5 class="mb-3">{{ _("Open Source") }}</h5>
+                                                       <div class="column">
+                                                               <p class="title is-5">{{ _("Open Source") }}</p>
 
                                                                <p>
                                                                        {{ _("libloc is free software and relies on support from the community.") }}
                </div>
        </section>
 
-       <div class="container">
-               <section>
-                       <h3 class="mb-5">{{ _("Who Is Using IPFire Location?") }}</h3>
-
-                       <div class="row row-cols-2 row-cols-lg-4 justify-content-around align-items-center">
-                               <div class="col text-center">
-                                       <img src="{{ static_url("img/ipfire-tux.png") }}"
-                                               class="img-fluid mb-3" alt="{{ _("IPFire Logo") }}">
-
-                                       <h6>
-                                               <a href="https://www.ipfire.org/" rel="noopener">IPFire</a>
-                                       </h6>
-                               </div>
-
-                               <div class="col text-center">
-                                       <img src="{{ static_url("img/tor.svg") }}"
-                                               class="img-fluid mb-3" alt="{{ _("Tor Project Logo") }}">
+       <section class="hero">
+               <div class="hero-body">
+                       <div class="container">
+                               <p class="title">{{ _("Who Is Using IPFire Location?") }}</p>
+
+                               <div class="level">
+                                       <div class="level-item">
+                                               <a href="https://www.ipfire.org/" rel="noopener">
+                                                       <figure class="image is-128x128">
+                                                               <img src="{{ static_url("img/ipfire-tux.png") }}" alt="{{ _("IPFire") }}">
+                                                       </figure>
+                                               </a>
+                                       </div>
 
-                                       <h6>
-                                               The <a href="https://www.torproject.org/" rel="noopener">Tor Project</a>
-                                       </h6>
+                                       <div class="level-item">
+                                               <a href="https://www.torproject.org/" rel="noopener">
+                                                       <figure class="image is-128x128">
+                                                               <img src="{{ static_url("img/tor.svg") }}" alt="{{ _("The Tor Project") }}">
+                                                       </figure>
+                                               </a>
+                                       </div>
                                </div>
                        </div>
-               </section>
-       </div>
+               </div>
+       </section>
 {% end block %}
index 71e44933bef90b441a22785e5b37f6007ecbfb45..1e49e4fce6a30ad1e7894c8f2eee46d43ed6b972 100644 (file)
-{% extends "base.html" %}
+{% extends "../base.html" %}
 
 {% block title %}{{ _("Location of %s") % address }}{% end block %}
 
-{% block main %}
-       <div class="card">
-               {% if address.country_code %}
-                       <div class="card-img-top">
-                               {% module Map(address.country_code) %}
+{% block container %}
+       <section class="hero is-primary">
+               <div class="hero-body">
+                       <div class="container">
+                               <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+                                       <ul>
+                                               <li>
+                                                       <a href="/">
+                                                               {{ _("Home") }}
+                                                       </a>
+                                               </li>
+                                               <li>
+                                                       <a href="#">
+                                                               {{ _("Projects") }}
+                                                       </a>
+                                               </li>
+                                               <li>
+                                                       <a href="/projects/location">
+                                                               {{ _("Location") }}
+                                                       </a>
+                                               </li>
+                                               <li class="is-active">
+                                                       <a href="#" aria-current="page">{{ _("Lookup %s") % address }}</a>
+                                               </li>
+                                       </ul>
+                               </nav>
+
+                               <h1 class="title is-1">{{ _("Lookup %s") % address }}</h1>
                        </div>
-               {% end %}
-
-               <div class="card-body">
-                       <dl class="row">
-                               <dt class="col-sm-4">{{ _("Network") }}</dt>
-                               <dd class="col-sm-8">{{ address.network }}</dd>
-
-                               <dt class="col-sm-4">{{ _("Announced by") }}</dt>
-                               <dd class="col-sm-8">{{ address.autonomous_system or ("AS%s" % address.asn if address.asn else _("N/A")) }}</dd>
-
-                               {% if address.country_code %}
-                                       <dt class="col-sm-4">{{ _("Country") }}</dt>
-                                       <dd class="col-sm-8">
-                                               {{ format_country_name(address.country_code) }}
-                                       </dd>
-                               {% end %}
-
-                               <dt class="col-sm-4"></dt>
-                               <dd class="col-sm-8">
-                                       <span class="badge {% if address.is_anonymous_proxy() %}bg-success{% else %}bg-light{% end %}">
-                                               {{ _("Anonymous Proxy") }}
-                                       </span>
-
-                                       <span class="badge {% if address.is_satellite_provider() %}bg-success{% else %}bg-light{% end %}">
-                                               {{ _("Satellite Provider") }}
-                                       </span>
-
-                                       <span class="badge {% if address.is_anycast() %}bg-success{% else %}bg-light{% end %}">
-                                               {{ _("Anycast") }}
-                                       </span>
-                               </dd>
-                       </dl>
-
-                       <div class="d-grid">
-                               <a class="btn btn-light" href="/projects/location/lookup/{{ address }}/blacklists">
-                                       {{ _("Blacklist Status") }}
-                               </a>
+               </div>
+       </section>
+
+       <section class="section">
+               <div class="container">
+                       <div class="columns is-vcentered">
+                               <div class="column is-7 has-text-centered">
+                                       <div class="block">
+                                               <p class="heading">{{ _("Network") }}</p>
+                                               <p class="title">{{ address.network }}</p>
+                                       </div>
+
+                                       <div class="block">
+                                               <p class="heading">{{ _("Autonomous System") }}</p>
+                                               <p class="title">
+                                                       {{ address.autonomous_system or ("AS%s" % address.asn if address.asn else _("N/A")) }}
+                                               </p>
+                                       </div>
+
+                                       {% if address.country_code %}
+                                               <div class="block">
+                                                       <p class="heading">{{ _("Country") }}</p>
+                                                       <p class="title">
+                                                               {{ format_country_name(address.country_code) }}
+                                                       </p>
+                                               </div>
+                                       {% end %}
+
+                                       <div class="tags">
+                                               {% if address.is_anonymous_proxy() %}
+                                                       <span class="tag">
+                                                               {{ _("Anonymous Proxy") }}
+                                                       </span>
+                                               {% end %}
+
+                                               {% if address.is_satellite_provider() %}
+                                                       <span class="tag">
+                                                               {{ _("Satellite Provider") }}
+                                                       </span>
+                                               {% end %}
+
+                                               {% if address.is_anycast() %}
+                                                       <span class="tag">
+                                                               {{ _("Anycast") }}
+                                                       </span>
+                                               {% end %}
+                                       </div>
+                               </div>
+
+                               <div class="column">
+                                       {% if address.country_code %}
+                                               <div class="box">
+                                                       {% module Map(address.country_code) %}
+                                               </div>
+                                       {% end %}
+                               </div>
                        </div>
+
+                       {% if blacklists %}
+                               <nav class="panel">
+                                       <p class="panel-heading">
+                                               {{ _("Blacklists") }}
+                                       </p>
+
+                                       {% for bl in sorted(blacklists) %}
+                                               {% if blacklists[bl] %}
+                                                       {% set code, reason = blacklists[bl] %}
+
+                                                       <div class="panel-block {% if code %}is-active{% end %}">
+                                                               <span class="panel-icon">
+                                                                       {% if code %}
+                                                                               <i class="fa-solid fa-ban" aria-hidden="true"></i>
+                                                                       {% else %}
+                                                                               <i class="fa-solid fa-check" aria-hidden="true"></i>
+                                                                       {% end %}
+                                                               </span>
+
+                                                               <div>
+                                                                       <p>{{ bl }}</p>
+
+                                                                       {% if reason %}
+                                                                               <p class="has-text-danger">{{ reason }}</p>
+                                                                       {% end %}
+                                                               </div>
+                                                       </div>
+                                               {% end %}
+                                       {% end %}
+                               </nav>
+                       {% end %}
                </div>
-       </div>
+       </section>
 {% end block %}
index b710bcc2f7b031ec9ed949ec5c006d8941c53ec6..39ef3e0fab339e0dc135008abbdc3d2689e53cc2 100644 (file)
@@ -170,7 +170,6 @@ class Application(tornado.web.Application):
                        (r"/projects/location", location.IndexHandler),
                        (r"/projects/location/download", StaticHandler, { "template" : "../location/download.html" }),
                        (r"/projects/location/how\-to\-use", StaticHandler, { "template" : "../location/how-to-use.html" }),
-                       (r"/projects/location/lookup/(.+)/blacklists", location.BlacklistsHandler),
                        (r"/projects/location/lookup/(.+)", location.LookupHandler),
 
                        # Single-Sign-On for Discourse
index 98cb30a73dd6786eaa5dd36c2e3aed5448be09b1..de7a9cce59f66d30d1ef936078f87482e448bda3 100644 (file)
@@ -14,14 +14,6 @@ class IndexHandler(base.BaseHandler):
 
 
 class LookupHandler(base.BaseHandler):
-       async def get(self, address):
-               # Lookup address
-               address = util.Address(self.backend, address)
-
-               self.render("location/lookup.html", address=address)
-
-
-class BlacklistsHandler(base.BaseHandler):
        async def get(self, address):
                # Lookup address
                address = util.Address(self.backend, address)
@@ -29,5 +21,4 @@ class BlacklistsHandler(base.BaseHandler):
                # Lookup blacklists
                blacklists = await address.get_blacklists()
 
-               self.render("location/blacklists.html",
-                       address=address, blacklists=blacklists)
+               self.render("location/lookup.html", address=address, blacklists=blacklists)