Skip to content

Commit

Permalink
new navigation rebased (#1049)
Browse files Browse the repository at this point in the history 
* New navigation (#760)

* Implement the new navigation concept for Newshub (#808)

* add navigation

* changes after review

* fix lint

* chages after review

* fix e2e error

* fix lint

* fix sass warnings

---------

Co-authored-by: fritzSF <[email protected]>
Co-authored-by: Nikola Stojanovic <[email protected]>
  • Loading branch information
@petrjasek @fritzSF @dzonidoo
3 people authored Jan 22, 2025
1 parent a96f5ca commit 6de440e
Show file tree
Hide file tree
Showing 12 changed files with 550 additions and 342 deletions.
37 changes: 34 additions & 3 deletions assets/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,6 @@ import {gettext, isTouchDevice} from 'utils';
import {registerCoverageFieldComponent} from './agenda/components/preview';
import {Button} from './ui/components/Button';

if (isTouchDevice()) {
document.documentElement.classList.add('no-touch');
}

interface IExtensions {
prepareWirePreview?(content: HTMLElement, item: IArticle): HTMLElement;
Expand Down Expand Up @@ -49,3 +46,37 @@ export const exposed: IExposedForExtensions = {
};

import 'app';

// navigation scripts
if (isTouchDevice()) {
document.documentElement.classList.add('no-touch');
}

const navigation = document.getElementById('nav');
const pinButton = document.getElementById('pin-btn');

if (pinButton != null) {
pinButton.addEventListener('click', () => {
handleNavToggle();
});
}

if (sessionStorage.getItem('navigation-pinned')) {
handleNavToggle();
}

function handleNavToggle() {
if (navigation == null || pinButton == null) {
return null;
}

if (navigation.classList.contains('nav-block--pinned')) {
sessionStorage.removeItem('navigation-pinned');
navigation.classList.remove('nav-block--pinned');
pinButton.setAttribute('title', gettext('Expand'));
} else {
sessionStorage.setItem('navigation-pinned', 'true');
navigation.classList.add('nav-block--pinned');
pinButton.setAttribute('title', gettext('Collapse'));
}
}
1 change: 1 addition & 0 deletions assets/styles/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
@import './color-functions.scss';
@import './custom.scss'; // Bootstrap customized
@import './index.scss';
@import './sidenav.scss';
@import './article-list.scss';
@import './icon-font.scss';
@import './icon-font-small.scss';
Expand Down
6 changes: 6 additions & 0 deletions assets/styles/breakpoints.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,12 @@
}
}

@mixin large_phone {
@media only screen and (max-width: 768px) {
@content;
}
}

@mixin tablet {
@media only screen and (orientation: portrait) and (min-width: 576px) and (max-width: 1439px), (orientation: landscape) and (min-width: 992px) and (max-width: 1439px) {
@content;
Expand Down
4 changes: 4 additions & 0 deletions assets/styles/custom-display.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@
.d-phone-none {display: none;}
.d-phone-block {display: block;}
}
@include large_phone {
.d-phone-none {display: none;}
.d-phone-block {display: block;}
}

@include tablet {
.d-tablet-none {display: none;}
Expand Down
22 changes: 17 additions & 5 deletions assets/styles/custom-variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -405,25 +405,37 @@ $container-max-widths: (
--sidenav-color-bg: var(--color-primary);
--sidenav-color-item-bg: transparent;
--sidenav-color-item-fg: hsla(0, 0%, 100%, 1);
--sidenav-color-item-bg--hover: hsla(0, 0%, 0%, 0.16);
--sidenav-color-item-bg--active: hsla(0, 0%, 100%, 1);
--sidenav-color-item-fg--active: var(--color-primary);
--sidenav-color-badge-bg: hsla(0, 0%, 16%, 1);
--sidenav-color-badge-bg--active: hsla(0, 0%, 16%, 1);
--sidenav-color-badge-fg: hsla(0, 0%, 98%, 1);
--sidenav-color-badge-fg--active: hsla(0, 0%, 98%, 1);
--sidenav-color-badge-outline--active: var(--sidenav-color-item-bg--active);
--sidenav-item-size: var(--space--5);
--sidenav-item-font-size: 0.875rem;
--sidenav-item-badge-size: 1.25rem;
--sidenav-item-badge-font-size: 0.6875rem;
--sidenav-item-helper-icon-size: 1.25rem;
--sidenav-item-helper-icon-size: 1.125rem;
--sidenav-item-helper-icon-fg: var(--sidenav-color-bg);
--sidenav-item-border-radius: var(--border-radius--s);
--separator-dot-size: 3px;
--separator-dot-color-bg: var(--sidenav-color-item-fg);
// Title and size options
--sidenav-item-title-display: block; // set to none to hide the title
--sidenav-size-width: 80px; // width of the sidenav on desktop
--sidenav-item-gap: 8px; // left and right spacing between item and the bar on desktop
--sidenav-item-width: calc(var(--sidenav-size-width) - var(--sidenav-item-gap)); // width of the sidenav item on desktop
//--sidenav-item-title-display: block; // set to none to hide the title
// --sidenav-size-width: 56px; // width of the sidenav on desktop
// --sidenav-item-gap: 8px; // left and right spacing between item and the bar on desktop
// --sidenav-item-width: calc(var(--sidenav-size-width) - var(--sidenav-item-gap)); // width of the sidenav item on desktop
--sidenav-item-radius: var(--border-radius--s);
--sidenav-size: 3.5rem;
--sidenav-size-overlay: 14rem;
--sidenav-size-pinned: 14rem;
--sidenav-shadow-overlay: 4px 0 8px hsla(0, 0%, 0%, 0.24);
--sidenav-pin-button-color-bg-default: hsla(0, 0%, 16%, 0.2);
--sidenav-pin-button-color-bg-hover: hsla(0, 0%, 100%, 0.8);
--sidenav-pin-button-color-fg-default: hsla(0, 0%, 100%, 1);
--sidenav-pin-button-color-fg-hover: var(--color-primary);

// COMPONENT: PROFILE MODAL
--profile-header-height: 56px;
Expand Down
259 changes: 5 additions & 254 deletions assets/styles/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -363,259 +363,6 @@ body.print {
overflow: auto;
}

.sidenav {
flex: 0 0 var(--navbar-height--mobile);
background-color: var(--sidenav-color-bg);
position: relative;
padding: 0 4px;
display: flex;
overflow-y: auto;

&:dir(rtl) {
box-shadow: inset 3px 0px 8px rgba(0, 0, 0, 0.1);
}

@include phone {
padding: 0 2px;
overflow-y: hidden;
}
@include md {
flex: 0 0 var(--sidenav-size-width);
}
}

.sidenav-icons {
display: flex;
flex-direction: row;
margin: 0 auto;
gap: var(--space--0-5);
width: 100vw;
padding: 0;
list-style-type: none;

@include md {
padding-block-start: var(--space--1);
flex-direction: column;
overflow: visible;
width: auto;
}


.sidenav-icons__item {
margin: 4px 0;
align-self: stretch;
position: relative;
display: flex !important;
justify-content: center;
a {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 2px;
&:hover {
text-decoration: none;
}
@include sm {
gap: 4px;
}


}
a, span {
border-radius: var(--sidenav-item-border-radius);
text-decoration: none;
width: 40px;
height: calc(var(--navbar-height--mobile) - var(--space--1));
min-height: auto;
padding: 2px 0;
line-height: var(--navbar-height--mobile);
text-align: center;
background-color: var(--sidenav-color-item-bg);

@include md {
width: var(--sidenav-item-width);
min-height: var(--navbar-height);
line-height: var(--navbar-height);
height: auto;
}
&:focus {
outline: none;
}
&:focus-visible {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 3px 4px rgba(255, 255, 255, .7);
}
i.icon--more {
opacity: .3;
@include sm {
transform: rotate(90deg);
}
}
}
span {
display: block;
min-height: 34px;
line-height: 34px;
@include phone {
width: 20px;
height: 24px;
line-height: 50px;
}
}
.sidenav-icons__item-title {
display: none;
color: var(--sidenav-color-item-fg);
font-size: 10px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.3px;
text-transform: uppercase;
overflow-wrap: break-word;
align-self: stretch;
@include md {
display: var(--sidenav-item-title-display);
}
}
.badge {
background-color: var(--sidenav-color-badge-bg);
color: var(--sidenav-color-badge-fg);
outline: 2px solid var(--sidenav-color-bg);
&.badge--icon {
background-color: var(--sidenav-color-item-bg--active);
[class^="icon-small--"],
[class^="icon-small--"] {
color: var(--sidenav-color-item-fg--active) !important;
}
}
}
.sidenav-icons__badge,
.sidenav-icons__helper-icon {
position: absolute;
font-size: var(--sidenav-item-badge-font-size);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius--full);
background-color: var(--sidenav-color-badge-bg);
color: var(--sidenav-color-badge-fg);
outline: 2px solid var(--sidenav-color-bg);
}
.sidenav-icons__badge {
height: var(--sidenav-item-badge-size);
min-width: var(--sidenav-item-badge-size);
font-size: var(--sidenav-item-badge-font-size);
font-weight: 700;
line-height: 1;
inset-block-start: 3px;
inset-inline-end: 3px;
background-color: var(--sidenav-color-badge-bg);
color: var(--sidenav-color-badge-fg);
padding: 0.35em 0.6em;
&:empty {
display: none;
}
@include phone {
inset-block-start: 2px;
inset-inline-end: -4px;
}
}

.sidenav-icons__helper-icon {
height: var(--sidenav-item-helper-icon-size);
width: var(--sidenav-item-helper-icon-size);
background-color: var(--sidenav-color-item-fg);
color: var(--sidenav-item-helper-icon-fg);
padding: 0;
inset-block-start: 2px;
inset-inline-end: 8px;
[class^="icon-small--"],
[class^="icon-small--"] {
color: var(--sidenav-item-helper-icon-fg) !important;
}
@include phone {
inset-block-start: 2px;
inset-inline-end: -4px;
}
}

&.active {
.sidenav-icons__badge {
outline: 2px solid var(--sidenav-color-badge-outline--active);
background-color: var(--sidenav-color-badge-bg--active);
color: var(--sidenav-color-badge-fg--active);
}

a {
background-color: var(--sidenav-color-item-bg--active);
border-radius: 4px;
text-decoration: none;
}
i, .sidenav-icons__item-title {
color: var(--sidenav-color-item-fg--active);
}
}
.badge--icon {
inset-block-start: 2px;
inset-inline-end: 7px;
}
[class^="icon--"], [class*=" icon--"] {
color: var(--sidenav-color-item-fg);
}
&--report {
position: absolute;
inset-block-end: 0;
inset-inline-start: auto;
inset-inline-end: 50px;
@include sm {
inset-inline-start: auto;
inset-inline-end: auto;
inset-block-end: 56px;
}
}
&--admin {
position: absolute;
inset-block-end: 0;
inset-inline-start: auto;
inset-inline-end: 4px;

@include sm {
inset-inline-end: auto;
}
}
}
.sidenav-icons__stretch-separator {
flex-grow: 1;
align-self: stretch;
justify-self: stretch;
margin: auto;
}
.sidenav-icons__separator {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-grow: 0;
flex-shrink: 0;
gap: calc(var(--separator-dot-size) * 1);
margin-block: auto;
margin-inline: var(--space--0-5);
.separator__dot {
border-radius: var(--border-radius--full);
display: block;
height: var(--separator-dot-size);
width: var(--separator-dot-size);
background-color: var(--separator-dot-color-bg);
opacity: 0.4;
}
@include md {
flex-direction: row;
margin-block: var(--space--1-5);
gap: calc(var(--separator-dot-size) * 1.5);
}

}
}

.content-header {
position: relative;
}
Expand All @@ -624,7 +371,7 @@ body.print {
position: relative;
}

.divider:after{
.divider:after {
content: "";
position: absolute;
height: 0px;
Expand Down Expand Up @@ -4467,3 +4214,7 @@ article.list {
color: var(--color-text--muted);
font-size: inherit;
}

.tooltip {
pointer-events: none;
}
Loading

0 comments on commit 6de440e

Please sign in to comment.