Skip to content

Commit

Permalink
Sidebar and top menu fixes (#151)
Browse files Browse the repository at this point in the history
* Sidebar and top menu fixes

- Fixed bug with active state on top menu
- Add sidebar filling from HUGO config - commented for a while
- Banner - redefined string values of appearing to boolean, for consistence

* Update base font-size

Set basic font-size 16px
Simplify sidebar ul selector
Fix overview page props

---------

Co-authored-by: atarakanovdes <atarakanov@kontur.io>
  • Loading branch information
dqunbp and atarakanovdes authored Jan 10, 2024
1 parent d756dde commit 86ad68e
Show file tree
Hide file tree
Showing 16 changed files with 352 additions and 142 deletions.
7 changes: 7 additions & 0 deletions config.toml
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,13 @@ sectionPagesMenu = 'main'
#pre = "<i class='fa fa-heart mr-1'></i>"
weight = 50 # Sets the menu order

[[menu.main]]
parent = "About"
name = "Applications"
url = "/apps/"
#pre = "<i class='fa fa-heart mr-1'></i>"
weight = 50 # Sets the menu order

# Submenus are done this way: parent -> identifier
[[menu.main]]
parent = "Resources"
Expand Down
2 changes: 1 addition & 1 deletion content/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ draft: false
heroSize: "is-medium"
heroLogo: "img/logosign.svg"
HeroImage: "img/hegobg.png"
HasBanner: "yes"
HasBanner: true
ButtonText: "Download"
ButtonLink: "/download/"
LastVersion: "Version: 3.30.1"
Expand Down
4 changes: 2 additions & 2 deletions content/about/index.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
type: "page"
title: "About QGIS"
subtitle: ""
title: "QGIS - The Leading Open Source Desktop GIS"
subtitle: "QGIS is a professional GIS application that is built on top of and proud to be itself Free and Open Source Software (FOSS)."
draft: false
heroImage: "img/banners/banner4.png"
sidebar: true
Expand Down
2 changes: 1 addition & 1 deletion content/community/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: "Our Community"
subtitle: "Experience the world’s most vibrant community of geospatial experts and enthusiasts"
draft: false
heroImage: "img/banners/banner4.png"
sidebar: "true"
sidebar: true
---
{{< content-start >}}
{{< block
Expand Down
6 changes: 4 additions & 2 deletions content/showcase/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ title: "Gallery"
subtitle: "Amazing work from our community"
draft: false
heroImage: "img/banners/banner3.png"
HasBanner: true
# Which second level menu to show
sidebar: true
submenus: showcase
---

Expand All @@ -14,8 +16,8 @@ submenus: showcase

QGIS is an incredibly powerful toolset, capable of a range of diverse functionality. In this showcase you can discover some the capabilities of QGIS and the work and stories of users from around the world who have applied QGIS to help achieve their goals.

Name | Description
------|-------------
| Name | Description |
| ---- | ----------- |
{{< button
fullwidth = "true"
icon = "fa-solid fa-calendar"
Expand Down
4 changes: 2 additions & 2 deletions static/img/eva_external-link-fill.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
127 changes: 116 additions & 11 deletions themes/hugo-bulma-blocks-theme/assets/css/custom.css
Original file line number Diff line number Diff line change
@@ -1,18 +1,123 @@
@font-face {
font-family: "fa-regular-400";
src: url("/fonts/fa-regular-400.eot");
src: url("/fonts/fa-regular-400.woff") format("woff"),
url("/fonts/fa-regular-400.otf") format("opentype"),
url("/fonts/fa-regular-400.svg#filename") format("svg");
font-family: "fa-regular-400";
src: url("/fonts/fa-regular-400.eot");
src:
url("/fonts/fa-regular-400.woff") format("woff"),
url("/fonts/fa-regular-400.otf") format("opentype"),
url("/fonts/fa-regular-400.svg#filename") format("svg");
}


/* displaying the left border of the follow section for the footer */
.follow-us {
border-left-style: solid;
border-left-color: white;
border-left-style: solid;
border-left-color: white;
}

.sidebar {
position: sticky;
overflow-y: scroll;
top: 100px;
max-height: calc(100vh - 175px);
padding-bottom: 30px;
}

::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-thumb {
background: rgb(225, 225, 225);
}

.sidebar ul {
list-style: none;
margin-left: 0rem;
padding-left: 1rem;
list-style-type: none !important;
}

/**
* Hidden fallback
*/
[hidden] {
display: none;
visibility: hidden;
}

/**
* Styling top level items
*/
.sidebar > ul {
padding-right: 2rem;
}

.sidebar li a,
.sidebar label {
display: inline-block;
padding: 0.5rem 1rem;
text-decoration: none;
color: #000000;
transition: all 0.025s ease-in;
border-radius: 5px;
width: 100%;
}

.sidebar li::marker {
margin-left: 2rem;
margin-right: 0rem;
}

.text-nowrap {
white-space: nowrap;
}
.sidebar li .has-child {
display: flex;
align-items: center;
justify-content: space-between;
}

.sidebar li .has-child .drop-arrow {
max-width: 26px;
padding: 0.5rem;
}

.sidebar li:has(.is-active) a {
color: black;
}
.sidebar .has-active > .has-child a,
.sidebar .is-active > a {
/* background: #d5e39b3d; */
font-weight: bold;
}
.sidebar li .is-active > a {
background: linear-gradient(to right, #589732, #93b022);
color: #fff;
font-weight: bold;
}
.sidebar li a:hover {
background: #ededed;
color: black;
}
.sidebar li .is-active > a:hover {
background: linear-gradient(to right, #589732, #93b022);
color: #fff;
font-weight: bold;
opacity: 0.9;
}

.sidebar label {
cursor: pointer;
}

.sidebar li:has(> ul) {
}

/* .sidebar li:has(>ul)>a::after {
content: url(../img/arrow.svg);
border-color: none;
transform: rotate(0deg);
right: 2.75rem;
position: absolute;
} */
.sidebar .external-link a::after {
content: url(../img/eva_external-link-fill.svg);
margin-left: 0.5rem;
margin-top: 0.25rem;
position: absolute;
}
13 changes: 5 additions & 8 deletions themes/hugo-bulma-blocks-theme/assets/css/menu.css
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
a.is-active > span {
border-bottom: solid gray 1px;
.is-active > a > span,
.is-active > span {
border-bottom: solid #589632 3px;
margin-bottom: -3px;
}

.is-semi-transparent {
opacity:0.9;
opacity: 0.9;
}

#menu > div > a > span:hover {
border-bottom: solid 1px;
color: black;
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@import "../utilities/mixins"

$body-background-color: $scheme-main !default
$body-size: 14px !default
$body-size: 16px !default
$body-min-width: 300px !default
$body-rendering: optimizeLegibility !default
$body-family: $family-primary !default
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ $navbar-fixed-z: 30 !default
$navbar-item-color: $black !default
$navbar-item-hover-color: $link !default
$navbar-item-hover-background-color: $scheme-main-bis !default
$navbar-item-active-color: $scheme-invert !default
$navbar-item-active-color: $black !default
$navbar-item-active-background-color: transparent !default
$navbar-item-img-max-height: 1.75rem !default

Expand Down Expand Up @@ -77,7 +77,7 @@ $navbar-colors: $colors !default
&:hover,
&.is-active
background-color: bulmaDarken($color, 5%)
color: $color-invert
color: $black
.navbar-link
&::after
border-color: $color-invert
Expand All @@ -95,21 +95,21 @@ $navbar-colors: $colors !default
&:hover,
&.is-active
background-color: bulmaDarken($color, 5%)
color: $color-invert
color: $black
.navbar-link
&::after
border-color: $color-invert
.navbar-item.has-dropdown:focus .navbar-link,
.navbar-item.has-dropdown:hover .navbar-link,
.navbar-item.has-dropdown.is-active .navbar-link
background-color: bulmaDarken($color, 5%)
color: $color-invert
color: $black
.navbar-dropdown
a.navbar-item
font-weight: 400 !important
&.is-active
background-color: $color
color: $color-invert
color: $black
& > .container
align-items: stretch
display: flex
Expand Down Expand Up @@ -342,7 +342,6 @@ a.navbar-item,
bottom: 100%
box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
top: auto
&.is-active,
&.is-hoverable:focus,
&.is-hoverable:focus-within,
&.is-hoverable:hover
Expand Down
42 changes: 22 additions & 20 deletions themes/hugo-bulma-blocks-theme/layouts/partials/banner.html
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
{{/* see https://bulma.io/documentation/layout/hero/ for size options */}}
{{ if .Params.HasBanner }}
{{ $size := .Params.HeroSize | default "is-small" }}
<section class="hero is-dark {{ $size }} has-bg-img"
{{ if ( .Params.HeroImage ) }}
style="background: url('{{ absURL .Params.HeroImage | safeCSS }}');
background-position: center;
background-size: cover;"
{{ end }}>

<section
class="hero is-dark {{ $size }} has-bg-img"
{{ if ( .Params.HeroImage ) }}
style="background: url('{{ absURL .Params.HeroImage | safeCSS }}');
background-position: center; background-size: cover;"
{{ end }}
>
<div class="hero-body">
<div class="columns container">
<div class="column is-1">
</div>

<div class="column is-flex hero-text has-text-left">
<div class="hero-container">
{{ if .Params.LabelText }}
Expand All @@ -26,11 +25,14 @@ <h1 class="title hero-title pr-3">
<p class="subtitle is-size-4 hero-subtitle">
{{ .Params.SubTitle }}
</p>
{{ end }}
{{ end }}
</div>
<div class="is-vcentered">
{{ if .Params.ButtonText }}
<a class="button is-primary1 is-size-5" href="{{ .Params.ButtonLink | absURL }}">
<a
class="button is-primary1 is-size-5"
href="{{ .Params.ButtonLink | absURL }}"
>
{{ .Params.ButtonText }}
</a>
{{ end }}
Expand All @@ -40,17 +42,17 @@ <h1 class="title hero-title pr-3">
</p>
{{ end }}
</div>

</div>
{{ if ( .Params.HeroLogo ) }}
<div class="column is-4 is-justify-content-center" style="display: flex">
</div>
{{ if ( .Params.HeroLogo ) }}
<div
class="column is-4 is-justify-content-center"
style="display: flex"
>
<figure class="image">
<img src='{{ absURL .Params.HeroLogo | safeCSS }}'>
<img src="{{ absURL .Params.HeroLogo | safeCSS }}" />
</figure>
</div>
<div class="column is-1">
</div>
{{ end }}
{{ end }}
</div>
</section>
{{ end }}
{{ end }}
Loading

0 comments on commit 86ad68e

Please sign in to comment.