]> git.ipfire.org Git - ipfire.org.git/commitdiff
Updated Navbar & Footer to new design
authorRico Hoppe <rico.hoppe@ipfire.org>
Mon, 13 Mar 2023 18:41:19 +0000 (18:41 +0000)
committerRico Hoppe <rico.hoppe@ipfire.org>
Mon, 13 Mar 2023 18:41:19 +0000 (18:41 +0000)
src/templates/base.html

index db7879f62b72b97aff212d0dd38823c21ed152f6..1e579737e994362be1a91d8d6838f9299a0509f1 100644 (file)
                {% block head %}{% end block %}
        </head>
 
-       <body class="{{ hostname.replace(".", "-") }}">
+       <body>
                {% block container_large %}
-                       <nav class="navbar navbar-light navbar-expand-lg">
+                       <nav class="navbar" role="navigation" aria-label="main navigation">
                                <div class="container">
-                                       <a class="navbar-brand" href="/">
-                                               {% if hostname == "fireinfo.ipfire.org" %}
-                                                       IPFire<span class="text-primary">_</span>Fireinfo
-                                               {% elif hostname == "nopaste.ipfire.org" %}
-                                                       IPFire<span class="text-primary">_</span>Nopaste
-                                               {% elif hostname == "people.ipfire.org" %}
-                                                       IPFire<span class="text-primary">_</span>People
-                                               {% else %}
-                                                       IPFire<span class="text-primary">_</span>
-                                               {% end %}
-
-                                               {% if hostname == "location.ipfire.org" %}
-                                                       {{ _("Location") }}
-                                               {% elif hostname == "wiki.ipfire.org" %}
-                                                       {{ _("Wiki") }}
-                                               {% end %}
-                                       </a>
-
-                                       {% block menu %}
-                                               {% if hostname in ("www.ipfire.org", "dev.ipfire.org") %}
-                                                       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
-                                                                       aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
-                                                               <span class="fas fa-bars"></span>
-                                                       </button>
-
-                                                       <div class="collapse navbar-collapse" id="navbar">
-                                                               <ul class="navbar-nav ml-auto">
-                                                                       <li class="nav-item d-sm-block d-md-block d-lg-none">
-                                                                               <a class="nav-link {% if request.path == "/" %}active{% end %}" href="/">{{ _("Home") }}</a>
-                                                                       </li>
-
-                                                                       <li class="nav-item">
-                                                                               <a class="nav-link {% if request.path == "/about" %}active{% end %}" href="/about">{{ _("About") }}</a>
-                                                                       </li>
-
-                                                                       <li class="nav-item">
-                                                                               <a class="nav-link {% if request.path.startswith("/download") %}active{% end %}" href="/download">{{ _("Download") }}</a>
-                                                                       </li>
+                                       <div class="navbar-brand">
+                                               <a href="/">
+                                                       {% if hostname.startswith("fireinfo.") %}
+                                                               <span class="is-size-4 has-text-weight-bold">IPFire</span><span class="has-text-primary is-size-4 has-text-weight-bold">_</span><span class="is-size-4 has-text-weight-bold">Fireinfo</span>
+                                                       {% elif hostname.startswith("nopaste.") %}
+                                                               <span class="is-size-4 has-text-weight-bold">IPFire</span><span class="has-text-primary is-size-4 has-text-weight-bold">_</span><span class="is-size-4 has-text-weight-bold">Nopaste</span>
+                                                       {% elif hostname.startswith("people.") %}
+                                                               <span class="is-size-4 has-text-weight-bold">IPFire</span><span class="has-text-primary is-size-4 has-text-weight-bold">_</span><span class="is-size-4 has-text-weight-bold">People</span>
+                                                       {% else %}
+                                                               <span class="is-size-4 has-text-weight-bold">IPFire</span><span class="has-text-primary is-size-4 has-text-weight-bold">_</span>
+                                                       {% end %}
+
+                                                       {% if hostname.startswith("location.") %}
+                                                               {{ _("Location") }}
+                                                       {% elif hostname.startswith("wiki.") %}
+                                                               {{ _("Wiki") }}
+                                                       {% end %}
+                                               </a>
+                                               <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
+                                                       <span aria-hidden="true"></span>
+                                                       <span aria-hidden="true"></span>
+                                                       <span aria-hidden="true"></span>
+                                               </a>
+                                       </div>
+                                       <div class="navbar-menu">
+                                               {% block menu %}
+                                                       {% if hostname.startswith("www.") or hostname.startswith("dev.") %}
+
+                                                               <div class="navbar-end">
+                                                                       <div class="navbar-item">
+                                                                               <a class="nav-link {% if request.path == "/features" %}active{% end %}" href="/features">{{ _("Features") }}</a>
+                                                                       </div>
 
-                                                                       <li class="nav-item">
+                                                                       <div class="navbar-item">
                                                                                <a class="nav-link {% if request.path == "/support" %}active{% end %}" href="/support">{{ _("Support") }}</a>
-                                                                       </li>
+                                                                       </div>
 
-                                                                       <li class="nav-item">
+                                                                       <div class="navbar-item">
                                                                                <a class="nav-link {% if request.path.startswith("/blog") %}active{% end %}" href="/blog">{{ _("Blog") }}</a>
-                                                                       </li>
-                                                               </ul>
+                                                                       </div>
 
-                                                               <a class="btn btn-primary mt-2 mt-lg-0 ml-lg-2" href="/donate">
-                                                                       {{ _("Donate") }}
-                                                               </a>
+                                                                       <div class="navbar-item">
+                                                                               <a class="nav-link {% if request.path == "/community" %}active{% end %}" href="/community">{{ _("Community") }}</a>
+                                                                       </div>
+
+                                                                       <div class="navbar-item">
+                                                                               <a class="nav-link {% if request.path.startswith("/download") %}active{% end %}" href="/download">{{ _("Download") }}</a>
+                                                                       </div>
+
+                                                                       <button class="button is-primary is-focused" href="https://www.ipfire.org/donate">
+                                                                               <p class="has-text-centered has-text-weight-bold is-uppercase">
+                                                                                       {{ _("Donate") }}
+                                                                               </p>
+                                                                       </button>
+                                                               </div>
+
+
+
+                                                               </div>
+                                                       {% elif hostname == "fireinfo.ipfire.org" %}
+                                                               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
+                                                                               aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+                                                                       <span class="fas fa-bars"></span>
+                                                               </button>
+
+                                                               <div class="collapse navbar-collapse" id="navbar">
+                                                                       <ul class="navbar-nav ml-auto">
+                                                                               {% if current_user and current_user.is_staff() %}
+                                                                                       <li class="nav-item">
+                                                                                               <a class="nav-link {% if request.path.startswith("/admin") %}active{% end %}" href="/admin">
+                                                                                                       {{ _("Admin") }}
+                                                                                               </a>
+                                                                                       </li>
+                                                                               {% end %}
 
-                                                               <a class="btn btn-lwl mt-2 mt-lg-0 ml-lg-2" href="https://store.lightningwirelabs.com/">
-                                                                       {{ _("Buy") }}
-                                                               </a>
-                                                       </div>
-                                               {% elif hostname == "fireinfo.ipfire.org" %}
-                                                       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
-                                                                       aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
-                                                               <span class="fas fa-bars"></span>
-                                                       </button>
-
-                                                       <div class="collapse navbar-collapse" id="navbar">
-                                                               <ul class="navbar-nav ml-auto">
-                                                                       {% if current_user and current_user.is_staff() %}
                                                                                <li class="nav-item">
-                                                                                       <a class="nav-link {% if request.path.startswith("/admin") %}active{% end %}" href="/admin">
-                                                                                               {{ _("Admin") }}
+                                                                                       <a class="nav-link {% if request.path.startswith("/vendors") %}active{% end %}" href="/vendors">
+                                                                                               {{ _("Vendors") }}
                                                                                        </a>
                                                                                </li>
-                                                                       {% end %}
-
-                                                                       <li class="nav-item">
-                                                                               <a class="nav-link {% if request.path.startswith("/vendors") %}active{% end %}" href="/vendors">
-                                                                                       {{ _("Vendors") }}
-                                                                               </a>
-                                                                       </li>
-                                                               </ul>
-                                                       </div>
-                                               {% elif hostname == "location.ipfire.org" %}
-                                                       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
-                                                                       aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
-                                                               <span class="fas fa-bars"></span>
-                                                       </button>
-
-                                                       <div class="collapse navbar-collapse" id="navbar">
-                                                               <ul class="navbar-nav ml-auto">
-                                                                       <li class="nav-item">
-                                                                               <a class="nav-link {% if request.path == "/how-to-use" %}active{% end %}" href="/how-to-use">
-                                                                                       {{ _("How To Use") }}
-                                                                               </a>
-                                                                       </li>
-
-                                                                       <li class="nav-item">
-                                                                               <a class="nav-link {% if request.path == "/download" %}active{% end %}" href="/download">
-                                                                                       {{ _("Download") }}
-                                                                               </a>
-                                                                       </li>
-                                                               </ul>
-
-                                                               <a class="btn btn-primary ml-lg-2" href="https://www.ipfire.org/donate">
-                                                                       {{ _("Donate") }}
-                                                               </a>
-                                                       </div>
-                                               {% elif hostname == "nopaste.ipfire.org" %}
-                                                       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
-                                                                       aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
-                                                               <span class="fas fa-bars"></span>
-                                                       </button>
-
-                                                       <div class="collapse navbar-collapse" id="navbar">
-                                                               <ul class="navbar-nav ml-auto">
-                                                                       <li class="nav-item">
-                                                                               <a class="nav-link" href="/?mode=upload">{{ _("Upload File") }}</a>
-                                                                       </li>
-                                                               </ul>
-                                                       </div>
-                                               {% elif hostname == "people.ipfire.org" %}
-                                                       {% if current_user %}
+                                                                       </ul>
+                                                               </div>
+                                                       {% elif hostname == "location.ipfire.org" %}
                                                                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
                                                                                aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
                                                                        <span class="fas fa-bars"></span>
                                                                </button>
 
                                                                <div class="collapse navbar-collapse" id="navbar">
-                                                                       <ul class="navbar-nav ml-auto mr-3">
+                                                                       <ul class="navbar-nav ml-auto">
                                                                                <li class="nav-item">
-                                                                                       <a class="nav-link {% if request.path == "/users/%s" % current_user.uid %}active{% end %}" href="/users/{{ current_user.uid }}">
-                                                                                               {{ _("My Profile") }}
+                                                                                       <a class="nav-link {% if request.path == "/how-to-use" %}active{% end %}" href="/how-to-use">
+                                                                                               {{ _("How To Use") }}
                                                                                        </a>
                                                                                </li>
 
-                                                                               {% if current_user.is_staff() %}
-                                                                                       <li class="nav-item">
-                                                                                               <a class="nav-link {% if request.path == "/users" %}active{% end %}" href="/users">
-                                                                                                       {{ _("Users") }}
-                                                                                               </a>
-                                                                                       </li>
+                                                                               <li class="nav-item">
+                                                                                       <a class="nav-link {% if request.path == "/download" %}active{% end %}" href="/download">
+                                                                                               {{ _("Download") }}
+                                                                                       </a>
+                                                                               </li>
+                                                                       </ul>
 
-                                                                                       <li class="nav-item">
-                                                                                               <a class="nav-link {% if request.path.startswith("/groups") %}active{% end %}" href="/groups">
-                                                                                                       {{ _("Groups") }}
-                                                                                               </a>
-                                                                                       </li>
+                                                                       <a class="btn btn-primary ml-lg-2" href="https://www.ipfire.org/donate">
+                                                                               {{ _("Donate") }}
+                                                                       </a>
+                                                               </div>
+                                                       {% elif hostname == "nopaste.ipfire.org" %}
+                                                               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
+                                                                               aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+                                                                       <span class="fas fa-bars"></span>
+                                                               </button>
 
+                                                               <div class="collapse navbar-collapse" id="navbar">
+                                                                       <ul class="navbar-nav ml-auto">
+                                                                               <li class="nav-item">
+                                                                                       <a class="nav-link" href="/?mode=upload">{{ _("Upload File") }}</a>
+                                                                               </li>
+                                                                       </ul>
+                                                               </div>
+                                                       {% elif hostname == "people.ipfire.org" %}
+                                                               {% if current_user %}
+                                                                       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
+                                                                                       aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+                                                                               <span class="fas fa-bars"></span>
+                                                                       </button>
+
+                                                                       <div class="collapse navbar-collapse" id="navbar">
+                                                                               <ul class="navbar-nav ml-auto mr-3">
                                                                                        <li class="nav-item">
-                                                                                               <a class="nav-link {% if request.path == "/stats" %}active{% end %}" href="/stats">
-                                                                                                       {{ _("Stats") }}
+                                                                                               <a class="nav-link {% if request.path == "/users/%s" % current_user.uid %}active{% end %}" href="/users/{{ current_user.uid }}">
+                                                                                                       {{ _("My Profile") }}
                                                                                                </a>
                                                                                        </li>
-                                                                               {% end %}
 
-                                                                               {% if current_user.has_sip() %}
-                                                                                       <li class="nav-item">
-                                                                                               <a class="nav-link {% if request.path.startswith("/conferences") %}active{% end %}" href="/conferences">
-                                                                                                       {{ _("Conferences") }}
-                                                                                               </a>
-                                                                                       </li>
-                                                                               {% end %}
-                                                                       </ul>
+                                                                                       {% if current_user.is_staff() %}
+                                                                                               <li class="nav-item">
+                                                                                                       <a class="nav-link {% if request.path == "/users" %}active{% end %}" href="/users">
+                                                                                                               {{ _("Users") }}
+                                                                                                       </a>
+                                                                                               </li>
+
+                                                                                               <li class="nav-item">
+                                                                                                       <a class="nav-link {% if request.path.startswith("/groups") %}active{% end %}" href="/groups">
+                                                                                                               {{ _("Groups") }}
+                                                                                                       </a>
+                                                                                               </li>
+
+                                                                                               <li class="nav-item">
+                                                                                                       <a class="nav-link {% if request.path == "/stats" %}active{% end %}" href="/stats">
+                                                                                                               {{ _("Stats") }}
+                                                                                                       </a>
+                                                                                               </li>
+                                                                                       {% end %}
+
+                                                                                       {% if current_user.has_sip() %}
+                                                                                               <li class="nav-item">
+                                                                                                       <a class="nav-link {% if request.path.startswith("/conferences") %}active{% end %}" href="/conferences">
+                                                                                                               {{ _("Conferences") }}
+                                                                                                       </a>
+                                                                                               </li>
+                                                                                       {% end %}
+                                                                               </ul>
+
+                                                                               <form class="my-2 my-lg-0" action="/search" method="GET">
+                                                                                       <input class="form-control form-control-sm mr-sm-2" type="search" name="q"
+                                                                                               placeholder="{{ _("Search") }}" aria-label="{{ _("Search") }}" value="{% try %}{{ q }}{% except %}{% end %}">
+                                                                               </form>
+                                                                       </div>
+                                                               {% end %}
+                                                       {% elif hostname == "wiki.ipfire.org" %}
+                                                               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
+                                                                               aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+                                                                       <span class="fas fa-bars"></span>
+                                                               </button>
 
-                                                                       <form class="my-2 my-lg-0" action="/search" method="GET">
-                                                                               <input class="form-control form-control-sm mr-sm-2" type="search" name="q"
-                                                                                       placeholder="{{ _("Search") }}" aria-label="{{ _("Search") }}" value="{% try %}{{ q }}{% except %}{% end %}">
+                                                               <div class="collapse navbar-collapse" id="navbar">
+                                                                       <form class=" ml-auto my-2 my-lg-0" action="/search" method="GET">
+                                                                               <input class="form-control form-control-sm" type="search" name="q"
+                                                                                       placeholder="{{ _("Search...") }}" aria-label="{{ _("Search") }}" value="{% try %}{{ q }}{% except %}{% end %}">
                                                                        </form>
+
+                                                                       <a class="btn btn-primary ml-lg-2" href="https://www.ipfire.org/donate">
+                                                                               {{ _("Donate") }}
+                                                                       </a>
                                                                </div>
                                                        {% end %}
-                                               {% elif hostname == "wiki.ipfire.org" %}
-                                                       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
-                                                                       aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
-                                                               <span class="fas fa-bars"></span>
-                                                       </button>
-
-                                                       <div class="collapse navbar-collapse" id="navbar">
-                                                               <form class=" ml-auto my-2 my-lg-0" action="/search" method="GET">
-                                                                       <input class="form-control form-control-sm" type="search" name="q"
-                                                                               placeholder="{{ _("Search...") }}" aria-label="{{ _("Search") }}" value="{% try %}{{ q }}{% except %}{% end %}">
-                                                               </form>
-
-                                                               <a class="btn btn-primary ml-lg-2" href="https://www.ipfire.org/donate">
-                                                                       {{ _("Donate") }}
-                                                               </a>
-                                                       </div>
-                                               {% end %}
-                                       {% end block %}
+                                               {% end block %}
+                                       </div>
                                </div>
                        </nav>
 
 
                {% block footer %}
                        <footer>
-                               <div class="container">
-                                       <div class="footer border-top">
-                                               <div class="row">
-                                                       <div class="col-12 col-lg-5 mb-3">
-                                                               <h5>IPFire<span class="text-primary">_</span>People</h5>
-
-                                                               <p>
-                                                                       Join the community and sign up for our newsletter
-                                                               </p>
-
-                                                               <a class="btn btn-outline-primary text-uppercase" href="https://people.ipfire.org/">
-                                                                       {{ _("Join Now") }}
-                                                               </a>
+                               <div class="content">
+                                       <div class="container">
+                                               <div class="columns">
+                                                       <div class="column is-two-fifths">
+                                                               <section class="section">
+                                                                       <p class="is-size-4">
+                                                                               <span class="has-text-weight-bold">IPFire</span><span class="has-text-primary has-text-weight-bold">_</span>People
+                                                                       </p>
+                                                                       <p>
+                                                                               Join the community and sign up for our newsletter
+                                                                       </p>
+
+                                                                       <button class="button is-primary is-outlined is-medium"><span class="has-text-black has-text-weight-bold">JOIN NOW</span></button>
+
+                                                               </section>
                                                        </div>
+                                                       <section class="section">
+                                                               <div class="column is-one-fifth">
+                                                                               <button class="button is-ghost">
+                                                                                               <a href="/about"><span class="is-underlined">{{ _("About") }}</span></a>
+                                                                               </button>
+                                                                               <br>
+                                                                               <button class="button is-ghost">
+                                                                                               <a  href="https://wiki.ipfire.org"><span class="is-underlined">{{ _("Wiki") }}</span></a>
+                                                                               </button>
+                                                                               <br>
+                                                                               <button class="button is-ghost">
+                                                                                               <a  href="/support"><span class="is-underlined">{{ _("Support") }}</span></a>
+                                                                               </button>
+                                                                               <br>
+                                                                               <button class="button is-ghost">
+                                                                                               <a  href="https://wiki.ipfire.org/devel"><span class="is-underlined">{{ _("Development") }}</span></a>
+                                                                               </button>
+                                                               </div>
+                                                       </section>
+                                                       <section class="section">
+                                                               <div class="column is-one-fifth">
+                                                                       <button class="button is-ghost">
+                                                                               <a href="/download"><span class="is-underlined">{{ _("Download") }}</span></a>
+                                                                       </button>
+                                                                       <br>
+                                                                       <button class="button is-ghost">
+                                                                               <a href="/blog"><span class="is-underlined">{{ _("Blog") }}</span></a>
+                                                                       </button>
+                                                                       <br>
+                                                                       <button class="button is-ghost">
+                                                                               <a href="https://community.ipfire.org/"><span class="is-underlined">{{ _("Community") }}</span></a>
+                                                                       </button>
+                                                                       <br>
+                                                                       <button class="button is-ghost">
+                                                                               <a href="/legal"><span class="is-underlined">{{ _("Legal") }}</span></a>
+                                                                       </button>
+                                                               </div>
+                                                       </section>
+                                                       <section class="section">
+                                                               <div class="column is-one-fifth">
+
+                                                                       <button class="button is-ghost">
+                                                                               <a  href="https://twitter.com/ipfire"><span class="is-underlined">{{ _("Twitter") }}</span></a>
+                                                                       </button>
+                                                                       <br>
+                                                                       <button class="button is-ghost">
+                                                                               <a  href="https://de.linkedin.com/company/ipfire"><span class="is-underlined">{{ _("LinkedIn") }}</span></a>
+                                                                       </button>
+                                                                       <br>
+                                                                       <button class="button is-primary is-medium is-focused" href="https://www.ipfire.org/donate">
+                                                                               <p class="has-text-centered has-text-weight-bold is-uppercase">
+                                                                                       {{ _("Donate") }}
+                                                                               </p>
+                                                                       </button>
 
-                                                       <div class="col-12 col-lg-1">
-                                                               <!-- spacer -->
-                                                       </div>
-
-                                                       <div class="col-12 col-lg-2">
-                                                               <ul>
-                                                                       <li>
-                                                                               <a class="footer-link" href="/about">{{ _("About") }}</a>
-                                                                       </li>
-
-                                                                       <li>
-                                                                               <a class="footer-link" href="https://wiki.ipfire.org">{{ _("Wiki") }}</a>
-                                                                       </li>
-
-                                                                       <li>
-                                                                               <a class="footer-link" href="/support">{{ _("Support") }}</a>
-                                                                       </li>
-
-                                                                       <li>
-                                                                               <a class="footer-link" href="https://wiki.ipfire.org/devel">{{ _("Development") }}</a>
-                                                                       </li>
-                                                               </ul>
-                                                       </div>
-
-                                                       <div class="col-12 col-lg-2">
-                                                               <ul>
-                                                                       <li>
-                                                                               <a class="footer-link" href="/download">{{ _("Download") }}</a>
-                                                                       </li>
-
-                                                                       <li>
-                                                                               <a class="footer-link" href="/blog">{{ _("Blog") }}</a>
-                                                                       </li>
-
-                                                                       <li>
-                                                                               <a class="footer-link" href="https://community.ipfire.org/">{{ _("Community") }}</a>
-                                                                       </li>
-
-                                                                       <li>
-                                                                               <a class="footer-link" href="/legal">{{ _("Legal") }}</a>
-                                                                       </li>
-                                                               </ul>
-                                                       </div>
-
-                                                       <div class="col-12 col-lg-2">
-                                                               <div class="d-grid gap-2">
-                                                                       <a class="btn btn-primary text-uppercase" href="https://www.ipfire.org/donate">
-                                                                               {{ _("Donate") }}
-                                                                       </a>
-
-                                                                       <a class="btn btn-lwl text-uppercase" href="https://store.lightningwirelabs.com/">
-                                                                               {{ _("Buy") }}
-                                                                       </a>
                                                                </div>
                                                        </div>
+                                                       </section>
                                                </div>
                                        </div>
                                </div>