]> git.ipfire.org Git - pbs.git/commitdiff
CSS: Convert base template to Bulma
authorMichael Tremer <michael.tremer@ipfire.org>
Wed, 19 Oct 2022 00:53:19 +0000 (00:53 +0000)
committerMichael Tremer <michael.tremer@ipfire.org>
Wed, 19 Oct 2022 00:53:19 +0000 (00:53 +0000)
Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
src/static/css/site.scss
src/templates/base.html

index 642b83a54b0fc2110fa0a8f5c827a9f188b024cf..d688e8ef3bad3fcd22e79a8fbea31f9b7689c440 100644 (file)
@@ -1,16 +1,25 @@
 /*
        Global Settings
 */
-$body-font-family:                             Prompt, sans-serif;
+$family-sans-serif:                            Prompt, sans-serif;
 
 // Colour Palette
-$foundation-palette: (
-       primary:                                        #ff2e53,
-       secondary:                                      #767676,
-       success:                                        #3adb76,
-       warning:                                        #e7e247,
-       alert:                                          #cc4b37,
-);
+$primary:                                              #ff2e53;
+$green:                                                        #3adb76;
+$yellow:                                               #e7e247;
+$red:                                                  #cc4b47;
+
+/*
+       Import Bulma
+*/
+@import "../../third-party/bulma/sass/base/_all";
+@import "../../third-party/bulma/sass/components/_all";
+@import "../../third-party/bulma/sass/elements/_all";
+@import "../../third-party/bulma/sass/form/_all";
+@import "../../third-party/bulma/sass/grid/_all";
+@import "../../third-party/bulma/sass/helpers/_all";
+@import "../../third-party/bulma/sass/layout/_all";
+@import "../../third-party/bulma/sass/utilities/_all";
 
 // Import fonts
 @import "fonts";
@@ -18,70 +27,6 @@ $foundation-palette: (
 // Import icons
 @import "icons";
 
-/*
-       Import Foundation Sites
-*/
-@import "../../third-party/foundation-sites/scss/foundation";
-
-// Global styles
-@include foundation-global-styles;
-@include foundation-forms;
-@include foundation-typography;
-
-// Enable the XY Grid
-@include foundation-xy-grid-classes;
-
-// Generic components
-@include foundation-button;
-@include foundation-button-group;
-@include foundation-close-button;
-@include foundation-label;
-@include foundation-progress-bar;
-@include foundation-slider;
-@include foundation-switch;
-@include foundation-table;
-
-// Basic components
-@include foundation-badge;
-@include foundation-breadcrumbs;
-@include foundation-callout;
-@include foundation-card;
-@include foundation-dropdown;
-@include foundation-pagination;
-@include foundation-tooltip;
-
-// Containers
-@include foundation-accordion;
-@include foundation-media-object;
-@include foundation-orbit;
-@include foundation-responsive-embed;
-@include foundation-tabs;
-@include foundation-thumbnail;
-
-// Menu-based containers
-@include foundation-menu;
-@include foundation-menu-icon;
-@include foundation-accordion-menu;
-@include foundation-drilldown-menu;
-@include foundation-dropdown-menu;
-
-// Layout components
-@include foundation-off-canvas;
-@include foundation-reveal;
-@include foundation-sticky;
-@include foundation-title-bar;
-@include foundation-top-bar;
-
-// Helpers
-@include foundation-float-classes;
-@include foundation-flex-classes;
-@include foundation-visibility-classes;
-// @include foundation-prototype-classes;
-
 /*
        Custom CSS
 */
-
-.top-bar {
-       margin-bottom: 1rem;
-}
index 06b23d67d345a4322ddc7d0af4237559ecb8c70f..97fba2bba812a5dafd5ea6e4d6c3727dc72e2763 100644 (file)
        </head>
 
        <body>
-               <div class="grid-container">
-                       <div class="grid-y">
-                               <div class="cell header">
-                                       <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
-                                               <button class="menu-icon" type="button" data-toggle="main-menu"></button>
-                                               <div class="title-bar-title">{{ _("Menu") }}</div>
-                                       </div>
+               <nav class="navbar is-primary" role="navigation" aria-label="main navigation">
+                       <div class="navbar-brand">
+                               <a class="navbar-item" href="/">
+                                       Pakfire Build Service
+                               </a>
 
-                                       <div class="top-bar" id="main-menu">
-                                               <div class="top-bar-left">
-                                                       <ul class="dropdown menu" data-dropdown-menu>
-                                                               <li class="menu-text">{{ _("Pakfire Build Service") }}</li>
-
-                                                               {# Some important links... #}
-                                                               <li>
-                                                                       <a href="/packages">{{ _("Packages") }}</a>
-                                                               </li>
-                                                               <li>
-                                                                       <a href="/builds">{{ _("Builds") }}</a>
-                                                               </li>
-
-                                                               {# Dropdown menu with more stuff... #}
-                                                               <li>
-                                                                       <a href="#">{{ _("More") }}</a>
-
-                                                                       <ul class="menu vertical">
-                                                                               <li>
-                                                                                       <a href="/distros">{{ _("Distributions") }}</a>
-                                                                               </li>
-                                                                               <li>
-                                                                                       <a href="/builders">{{ _("Builders") }}</a>
-                                                                               </li>
-                                                                               <li>
-                                                                                       <a href="/mirrors">{{ _("Mirrors") }}</a>
-                                                                               </li>
-                                                                               {% if current_user %}
-                                                                                       <li>
-                                                                                               <a href="/users">{{ _("Users") }}</a>
-                                                                                       </li>
-                                                                               {% end %}
-                                                                               <li>
-                                                                                       <a href="/log">{{ _("Log") }}</a>
-                                                                               </li>
-                                                                       </ul>
-                                                               </li>
-                                                       </ul>
-                                               </div>
+                               <a role="button" class="navbar-burger" aria-label="menu"
+                                       aria-expanded="false" data-target="navbarMainMenu">
+                                       <span aria-hidden="true"></span>
+                                       <span aria-hidden="true"></span>
+                                       <span aria-hidden="true"></span>
+                               </a>
+                       </div>
+
+                       <div id="navbarMainMenu" class="navbar-menu">
+                               <div class="navbar-start">
+                                       {# Some important links... #}
+
+                                       <a class="navbar-item" href="/packages">
+                                               {{ _("Packages") }}
+                                       </a>
 
-                                               <div class="top-bar-right">
-                                                       <ul class="dropdown menu" data-dropdown-menu>
-                                                               <li>
-                                                                       <form method="GET" action="/search">
-                                                                               <input type="search" placeholder="Search" name="q">
-                                                                       </form>
-                                                               </li>
-
-                                                               {% if current_user %}
-                                                                       <li>
-                                                                               <a href="#">{{ current_user }}</a>
-
-                                                                               <ul class="menu vertical">
-                                                                                       <li>
-                                                                                               <a href="/users/{{ current_user.name }}">{{ _("My Profile") }}</a>
-                                                                                       </li>
-                                                                                       <li>
-                                                                                               <a href="/profile/builds">{{ _("My Builds") }}</a>
-                                                                                       </li>
-                                                                                       <li>
-                                                                                               <a href="/logout">{{ _("Log Out") }}</a>
-                                                                                       </li>
-                                                                               </ul>
-                                                                       </li>
-                                                               {% else %}
-                                                                       <li>
-                                                                               <a href="/login">{{ _("Sign In") }}</a>
-                                                                       </li>
-                                                               {% end %}
-                                                       </ul>
+                                       <a class="navbar-item" href="/builds">
+                                               {{ _("Builds") }}
+                                       </a>
+
+                                       {# Dropdown menu with more stuff... #}
+
+                                       <div class="navbar-item has-dropdown is-hoverable">
+                                               <a class="navbar-link" href="#">
+                                                       {{ _("More") }}
+                                               </a>
+
+                                               <div class="navbar-dropdown is-boxed">
+                                                       <a class="navbar-item" href="/distros">
+                                                               {{ _("Distributions") }}
+                                                       </a>
+                                                       <a class="navbar-item" href="/builders">
+                                                               {{ _("Builders") }}
+                                                       </a>
+                                                       <a class="navbar-item" href="/mirrors">
+                                                               {{ _("Mirrors") }}
+                                                       </a>
+                                                       {% if current_user %}
+                                                               <a class="navbar-item" href="/users">
+                                                                       {{ _("Users") }}
+                                                               </a>
+                                                       {% end %}
+                                                       <a class="navbar-item" href="/log">
+                                                               {{ _("Log") }}
+                                                       </a>
                                                </div>
                                        </div>
                                </div>
 
-                               {# Main Stuff #}
+                               <div class="navbar-end">
+                                       <div class="navbar-item">
+                                               <div class="field">
+                                                       <p class="control">
+                                                               <form method="GET" action="/search">
+                                                                       <input class="input" type="text" name="q"
+                                                                               placeholder="{{ _("Search...") }}">
+                                                               </form>
+                                                       </p>
+                                               </div>
+                                       </div>
+
+                                       {% if current_user %}
+                                               <div class="navbar-item has-dropdown is-hoverable">
+                                                       <a class="navbar-link" href="/users/{{ current_user.name }}">
+                                                               {{ current_user }}
+                                                       </a>
 
-                               <div class="cell">
-                                       {% block container %}
-                                               <div class="grid-x grid-padding-x">
-                                                       {% block body %}EMPTY BODY{% end block %}
+                                                       <div class="navbar-dropdown is-boxed">
+                                                               <a class="navbar-item" href="/profile/builds">
+                                                                       {{ _("My Builds") }}
+                                                               </a>
+                                                               <hr class="navbar-divider">
+                                                               <a class="navbar-item" href="/logout">
+                                                                       {{ _("Logout") }}
+                                                               </a>
+                                                       </div>
                                                </div>
-                                       {% end block %}
+                                       {% else %}
+                                               <div class="navbar-item">
+                                                       <a class="button" href="/login">
+                                                               {{ _("Sign In") }}
+                                                       </a>
+                                               </div>
+                                       {% end %}
                                </div>
+                       </div>
+               </nav>
 
-                               {# Footer #}
+               {# Main Stuff #}
 
-                               <div class="cell footer">
-                                       <p>
-                                               &copy; {{ year }} - Pakfire Build Service {{ version }}
-                                       </p>
-                               </div>
+               <section class="section">
+                       <div class="container">
+                               {% block container %}
+                                       <div class="grid-x grid-padding-x">
+                                               {% block body %}EMPTY BODY{% end block %}
+                                       </div>
+                               {% end block %}
                        </div>
-               </div>
+               </section>
 
-               <!-- include javascript files -->
-               <script src="{{ static_url("js/jquery.min.js") }}"></script>
-               <script src="{{ static_url("js/foundation.min.js") }}"></script>
-               <script src="{{ static_url("js/prettify.js") }}"></script>
-               <script src="{{ static_url("js/pbs.js") }}"></script>
+               {# Footer #}
+
+               <footer class="footer">
+                       <div class="content has-text-centered">
+                               <p>
+                                       &copy; {{ year }} - Pakfire Build Service {{ version }}
+                               </p>
+                       </div>
+               </footer>
        </body>
 </html>