Difference between revisions of "Navigation"

From Tweeki
Jump to: navigation, search
 
(40 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
[[Category:Components]]
 
[[Category:Components]]
 +
 +
see also [[Navigation examples]]
 +
 +
 
=== Navigational Sections ===
 
=== Navigational Sections ===
  
 
You can change the content of these via system [[Messages|messages]] and control the visibility via the <code><nowiki>{{#tweekihide:}}</nowiki></code> [[Parser Functions#Tweekihide parser function|parser function]] and [[Configuration_Options#Hiding_Page_Elements|configuration options]].
 
You can change the content of these via system [[Messages|messages]] and control the visibility via the <code><nowiki>{{#tweekihide:}}</nowiki></code> [[Parser Functions#Tweekihide parser function|parser function]] and [[Configuration_Options#Hiding_Page_Elements|configuration options]].
  
 +
''Example:'' If you want to change the content of the right sidebar edit [[MediaWiki:tweeki-sidebar-right]].
  
−
==== navbar ====
+
{| style="border-spacing:3px;border-collapse:separate; width:100%"
 +
| colspan="3" style="background-color:#eee;text-align:center;height:40px" | '''navbar'''
 +
|-
 +
| rowspan="2" style="background-color:#eee;text-align:center" | '''sidebar-<br>left'''
 +
| style="background-color:#eee;text-align:center;height:30px" | '''subnav'''
 +
| rowspan="2" style="background-color:#eee;text-align:center" | '''sidebar-<br>right'''
 +
|-
 +
| style="background-color:#f5f5f5;text-align:center;height:100px" | '''main content''' <br>(including firstHeading)
 +
|-
 +
| colspan="3" style="background-color:#eee;text-align:center;height:40px" | '''footer'''
 +
|}
 +
 
 +
 
 +
{| class="table table-bordered"
 +
! style="min-width:100px" | <span class="fa fa-cubes"></span> navbar
 +
|
  
 
The main navigation on the top of the page. In this demo installation it is hidden for anonymous users. It can scroll with the page or it can be fixed and always visible (configure it via [[MediaWiki:Tweeki-navbar-class]]).
 
The main navigation on the top of the page. In this demo installation it is hidden for anonymous users. It can scroll with the page or it can be fixed and always visible (configure it via [[MediaWiki:Tweeki-navbar-class]]).
  
−
It consists of three parts whose contents can be changed via system messages: navbar-brand, navbar-left, and navbar-right
+
It consists of three parts whose contents can be changed via system messages: <code>navbar-brand</code>, <code>navbar-left</code>, and <code>navbar-right</code>
  
−
<div class="navbar navbar-default">
+
<div class="navbar navbar-default navbar-light navbar-expand-sm">
 
<div class="container-fluid">
 
<div class="container-fluid">
−
<div class="navbar-header"><btn class="navbar-brand">Tweeki</btn></div>
+
<div class="navbar-header"><btn class="navbar-brand">navbar-brand</btn></div>
−
<ul class="nav navbar-nav" style="margin:0">
+
<div class="navbar-collapse collapse>
−
<btn wrapper="li" wrapperclass="" class="">
+
<ul class="navbar-nav mr-auto" style="margin:0">
−
Link
+
<btn wrapper="li" wrapperclass="nav-item" class="nav-link">
−
Link
+
navbar-left
−
*Link
+
*navbar-left
 +
</btn>
 +
</ul>
 +
<ul class="navbar-nav" style="margin:0">
 +
<btn wrapper="li" wrapperclass="nav-item" class="nav-link">
 +
navbar-right
 +
*navbar-right
 +
navbar-right
 
</btn>
 
</btn>
 
</ul>
 
</ul>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
  
−
==== subnav ====
+
|-
 +
!<span class="fa fa-cubes"></span> subnav  
 +
|
  
 
The subnavigation, using Bootstrap's <code>.nav</code> classes.
 
The subnavigation, using Bootstrap's <code>.nav</code> classes.
 +
 +
'''Pills'''
  
 
<ul class="nav nav-pills">
 
<ul class="nav nav-pills">
−
<btn class="" wrapper="li" wrapperclass="active">
+
<btn class="nav-link active" wrapper="li" wrapperclass="nav-item">
 +
#|Link
 +
</btn>
 +
<btn class="nav-link" wrapper="li" wrapperclass="nav-item">
 
#|Link
 
#|Link
 +
Link
 +
*#|Link
 
</btn>
 
</btn>
−
<btn class="" wrapper="li" wrapperclass="">
+
</ul>
 +
 
 +
 
 +
'''Tabs'''
 +
 
 +
<ul class="nav nav-tabs">
 +
<btn class="nav-link active" wrapper="li" wrapperclass="nav-item">
 +
#|Link
 +
</btn>
 +
<btn class="nav-link" wrapper="li" wrapperclass="nav-item">
 
#|Link
 
#|Link
 
Link
 
Link
Line 39: Line 85:
 
</ul>
 
</ul>
  
−
==== sidebar ====
+
|-
 +
!<span class="fa fa-cubes"></span> sidebar-left
 +
|
 +
 
 +
The left sidebar is empty by default.
 +
 
 +
|-
 +
!<span class="fa fa-cubes"></span> sidebar-right
 +
|
 +
 
 +
The right sidebar contains the edit button and the table of contents by default.
  
−
The sidebar typically contains the edit button and the table of contents.
+
|-
 +
!<span class="fa fa-cubes"></span> footer
 +
|
  
−
==== firstHeading ====
+
The footer is fully customizable. See [[Footer Examples]] for an overview. It's default contents are
 +
* <code>footer-info</code> („This page was last modified at … by …“, „This page was viewed … times“),
 +
* <code>footer-places</code> (Privacy policy, About, Disclaimers),
 +
* <code>footer-custom</code>, and
 +
* <code>footer-icons</code> (MediaWiki etc.).
 +
|}
 +
 
 +
{| class="table table-bordered"
 +
|firstHeading  
 +
|
  
 
This element's content can not be changed directly but it can be hidden on certain pages or for certain users.
 
This element's content can not be changed directly but it can be hidden on certain pages or for certain users.
  
−
==== footer ====
+
|-
−
 
+
|footer-info
−
Fully customizable.
+
|
 +
<code>footer-info-lastmod</code>, <code>footer-info-viewcount</code>
 +
|-
 +
|footer-places
 +
|
 +
<code>footer-places-privacy</code>, <code>footer-places-about</code>, <code>footer-places-disclaimer</code>
 +
|-
 +
|footer-custom
 +
|
 +
fully customizable via [[MediaWiki:Tweeki-footer-custom]] – Shows a login link by default and is hidden for logged-in users.
 +
|-
 +
|footer-icons
 +
|
 +
<code>footer-poweredbyico</code>
 +
|}
  
 
=== Navigational Elements ===
 
=== Navigational Elements ===
  
−
Use these elements to define content for the navigational sections above.
+
These are some standard building blocks for the navigation. Use these elements to define content for the navigational sections above and add your own custom items using [[Buttons|button markup]]. You can also define your own building blocks, so called [[Configuration_Options#Special_Navigational_Elements|Special Navigational Elements]].  
  
−
==== EDIT ====
+
And you can always link to internal or external pages or build semantic dropdowns using [[Buttons|Tweeki's Button syntax]].
  
−
<btn icon="pencil" class="btn-primary">
+
{| class="table table-bordered"
 +
! style="min-width:150px" | <span class="fa fa-cube"></span>&nbsp;EDIT
 +
|
 +
<btn icon="pen" class="btn-primary">
 
#|Edit
 
#|Edit
 
</btn>
 
</btn>
Line 63: Line 147:
 
A simple "Edit" button for the current page
 
A simple "Edit" button for the current page
  
−
==== EDIT-EXT ====
+
|-
−
 
+
! <span class="fa fa-cube"></span>&nbsp;EDIT-EXT
 +
|
 
<btn class="btn-primary">
 
<btn class="btn-primary">
−
#|<span class="glyphicon glyphicon-pencil"></span> Edit
+
#|<span class="fa fa-pen"></span> Edit
 
*#|History
 
*#|History
 
*
 
*
Line 74: Line 159:
 
*#|Move
 
*#|Move
 
*#|Delete
 
*#|Delete
 +
</btn> <span class="fa fa-arrows-alt-h mr-2"></span> <btn icon="pen" class="btn-primary">
 +
#|Edit
 
</btn>
 
</btn>
  
−
A split dropdown with "Edit Page" and the other ACTIONS in the dropdown menu
+
A split dropdown with "Edit Page" and the other ACTIONS in the dropdown menu. For users or contexts in which <code>EDIT-EXT-special</code> is hidden via configuration setting, hook or parser function the button will be reduced to the appearance of EDIT.
  
−
==== TALK ====
+
''Note that the standard configuration hides EDIT-EXT for users who don't explicitly opt in to see „advanced features“ (see the [[Configuration_Options#Hiding_Page_Elements|$wgTweekiSkinHideNonAdvanced]] configuration parameter).''
  
−
A link to the talk page or the main page if you already are on the talk page.
+
''Also note: in order to completely hide the edit button for non-advanced users (e.g. anonymous users) you have to use <code>EDIT-EXT</code> in the respective parser function or configuration option.''
  
−
==== TOOLBOX ====
+
|-
 +
! <span class="fa fa-cube"></span>&nbsp;TALK
 +
|
 +
<btn icon="comments">
 +
Talk
 +
</btn> <span class="fa fa-arrows-alt-h mr-2"></span> <btn>
 +
Page
 +
</btn>
 +
A link to the talk page or the page itself if you already are on it's talk page.
 +
 
 +
|-
 +
! <span class="fa fa-cube"></span>&nbsp;TOOLBOX
 +
|
 +
<btn>
 +
Tools
 +
*Page information
 +
*Special pages
 +
*Upload file
 +
*Related changes
 +
*What links here
 +
</btn>
 +
The tools (depending on context): page information, special pages, upload file, related changes, what links here
 +
|-
 +
! <span class="fa fa-cube"></span>&nbsp;TOOLBOX-EXT
 +
|
 +
<btn>
 +
Tools
 +
*Page information
 +
*Special pages
 +
*Upload file
 +
*Related changes
 +
*What links here
 +
*
 +
*Recent changes
 +
</btn>
 +
The tools (depending on context): page information, special pages, upload file, related changes, what links here PLUS recent changes (for the whole site)
 +
|-
 +
! <span class="fa fa-cube"></span>&nbsp;VIEWS
 +
|
 +
<btn>
 +
Views
 +
*Read
 +
*Edit
 +
*History
 +
</btn>
 +
MediaWiki standard views: read, edit, history.
 +
 
 +
|-
 +
! <span class="fa fa-cube"></span>&nbsp;HISTORY
 +
|
 +
<btn icon="history">
 +
History
 +
</btn> <span class="fa fa-arrows-alt-h mr-2"></span> <btn>
 +
Page
 +
</btn>
 +
A link to the page history or the page itself if you already are on the history page.
  
−
The tools: page information, special pages, upload file, related changes, ...
 
  
−
==== VIEWS ====
+
|-
 +
! <span class="fa fa-cube"></span>&nbsp;ACTIONS
 +
|
 +
<btn>
 +
Actions
 +
*Purge
 +
*Watch
 +
*Move
 +
*Delete
 +
</btn>
 +
MediaWiki standard actions like purge, watch, move, delete.
  
−
MediaWiki standard views: read, edit, history.
+
|-
 +
! <span class="fa fa-cube"></span>&nbsp;WATCH
 +
|
 +
<btn>
 +
{{FULLPAGENAME}}?action=watch|Watch
 +
</btn>
 +
Link to watch/unwatch page.
  
−
==== ACTIONS ====
+
|-
 +
! <span class="fa fa-cube"></span>&nbsp;ICONWATCH
 +
|
 +
[[{{FULLPAGENAME}}|<span class="fa fa-star"></span>]]
  
−
MediaWiki standard actions like purge, watch, move, delete.
+
Icon to watch/unwatch page.
  
−
==== PERSONAL ====
+
''Note that the [[Configuration_Options#Use Star Icon for Watchlist|$wgTweekiSkinUseIconWatch]] configuration parameter has to be set to true for this to work.''
  
 +
|-
 +
! <span class="fa fa-cube"></span>&nbsp;PERSONAL
 +
|
 +
<btn>
 +
Log in
 +
</btn> <span class="fa fa-arrows-alt-h mr-2"></span> <btn>
 +
#|<span class="fa fa-user"></span> User
 +
*User
 +
*Discussion
 +
*Preferences
 +
*Watchlist
 +
*Contributions
 +
*Log Out
 +
</btn>
 
A link to the log in form for anonymous users, a dropdown with the personal tools if already logged in.
 
A link to the log in form for anonymous users, a dropdown with the personal tools if already logged in.
  
−
==== LOGIN ====
+
''Note: PERSONAL by default is hidden via configuration settings. If you want the link to the log in form to show up, you need to add the following line to LocalSettings.php:<br> <code>$wgTweekiSkinHideAnon['PERSONAL'] = false;</code>''
 +
|-
 +
! <span class="fa fa-cube"></span>&nbsp;PERSONAL-EXT
 +
|
 +
Same as PERSONAL but using LOGIN-EXT's dropdown.
  
 +
|-
 +
! <span class="fa fa-cube"></span>&nbsp;LOGIN
 +
|
 +
<btn>
 +
Log in
 +
</btn>
 
A link to the log in form for anonymous users, empty if already logged in.
 
A link to the log in form for anonymous users, empty if already logged in.
  
−
==== LOGIN-EXT ====
+
|-
−
 
+
! <span class="fa fa-cube"></span>&nbsp;LOGIN-EXT
 +
|
 
A dropdown to allow logging in while staying on the same page.
 
A dropdown to allow logging in while staying on the same page.
  
−
==== SIDEBAR ====
+
|-
−
 
+
! <span class="fa fa-cube"></span>&nbsp;SIDEBAR
 +
|
 
The original content of the sidebar for Mediawiki's standard skins as defined in [[Mediawiki:Sidebar]].
 
The original content of the sidebar for Mediawiki's standard skins as defined in [[Mediawiki:Sidebar]].
  
−
==== LANGUAGES ====
+
|-
−
 
+
! <span class="fa fa-cube"></span>&nbsp;LANGUAGES
 +
|
 
Select different languages if your wiki supports it.
 
Select different languages if your wiki supports it.
  
−
==== SEARCH ====
+
|-
−
 
+
! <span class="fa fa-cube"></span>&nbsp;SEARCH
 +
|
 
The standard search box including autocomplete.
 
The standard search box including autocomplete.
  
−
==== FIRSTHEADING ====
+
|-
−
 
+
! <span class="fa fa-cube"></span>&nbsp;FIRSTHEADING
 +
|
 
You can place the first heading in any navigational section. Note that you can control the visibility of this element with <code>FIRSTHEADING</code> and the original heading in the content with <code>firstHeading</code>, i.e. it is case sensitive.
 
You can place the first heading in any navigational section. Note that you can control the visibility of this element with <code>FIRSTHEADING</code> and the original heading in the content with <code>firstHeading</code>, i.e. it is case sensitive.
  
−
==== TOC ====
+
|-
−
 
+
! <span class="fa fa-cube"></span>&nbsp;TOC
 +
|
 
Table of contents, if placed in the sidebar it makes use of Bootstrap's [http://getbootstrap.com/javascript/#scrollspy scrollspy] feature.
 
Table of contents, if placed in the sidebar it makes use of Bootstrap's [http://getbootstrap.com/javascript/#scrollspy scrollspy] feature.
  
−
==== LOGO ====
+
|-
 +
! <span class="fa fa-cube"></span>&nbsp;LOGO
 +
|
 +
the Logo as set via <code>$wgLogo</code> in LocalSettings.php. Use <code>#p-logo</code> to adapt the styling.
  
−
the Logo as set via <code>$wgLogo</code> in LocalSettings.php. Use <code>#p-logo</code> to adapt the styling.
+
''Note: This is to place the logo in one of the navigational sections. To put a logo in <code>navbar-brand</code> follow the [[How-Tos#Logo|How-To]].''
 +
|}

Latest revision as of 18:20, 7 September 2023


see also Navigation examples


Navigational Sections

You can change the content of these via system messages and control the visibility via the {{#tweekihide:}} parser function and configuration options.

Example: If you want to change the content of the right sidebar edit MediaWiki:tweeki-sidebar-right.

navbar
sidebar-
left 		subnav sidebar-
right
main content
(including firstHeading)
footer


navbar

The main navigation on the top of the page. In this demo installation it is hidden for anonymous users. It can scroll with the page or it can be fixed and always visible (configure it via MediaWiki:Tweeki-navbar-class).

It consists of three parts whose contents can be changed via system messages: navbar-brand, navbar-left, and navbar-right

navbar-brand
subnav

The subnavigation, using Bootstrap's .nav classes.

Pills


Tabs

sidebar-left

The left sidebar is empty by default.

sidebar-right

The right sidebar contains the edit button and the table of contents by default.

footer

The footer is fully customizable. See Footer Examples for an overview. It's default contents are

  • footer-info („This page was last modified at … by …“, „This page was viewed … times“),
  • footer-places (Privacy policy, About, Disclaimers),
  • footer-custom, and
  • footer-icons (MediaWiki etc.).
firstHeading

This element's content can not be changed directly but it can be hidden on certain pages or for certain users.

footer-info

footer-info-lastmod, footer-info-viewcount

footer-places

footer-places-privacy, footer-places-about, footer-places-disclaimer

footer-custom

fully customizable via MediaWiki:Tweeki-footer-custom – Shows a login link by default and is hidden for logged-in users.

footer-icons

footer-poweredbyico

Navigational Elements

These are some standard building blocks for the navigation. Use these elements to define content for the navigational sections above and add your own custom items using button markup. You can also define your own building blocks, so called Special Navigational Elements.

And you can always link to internal or external pages or build semantic dropdowns using Tweeki's Button syntax.

 EDIT
Edit

A simple "Edit" button for the current page

 EDIT-EXT
EditToggle Dropdown
Page history
RefreshWatchProtectMoveDelete
Edit

A split dropdown with "Edit Page" and the other ACTIONS in the dropdown menu. For users or contexts in which EDIT-EXT-special is hidden via configuration setting, hook or parser function the button will be reduced to the appearance of EDIT.

Note that the standard configuration hides EDIT-EXT for users who don't explicitly opt in to see „advanced features“ (see the $wgTweekiSkinHideNonAdvanced configuration parameter).

Also note: in order to completely hide the edit button for non-advanced users (e.g. anonymous users) you have to use EDIT-EXT in the respective parser function or configuration option.

 TALK
Discussion
Page

A link to the talk page or the page itself if you already are on it's talk page.

 TOOLBOX
Tools
Page informationSpecial pagesUpload fileRelated changesWhat links here

The tools (depending on context): page information, special pages, upload file, related changes, what links here

 TOOLBOX-EXT
Tools
Page informationSpecial pagesUpload fileRelated changesWhat links here
Recent changes

The tools (depending on context): page information, special pages, upload file, related changes, what links here PLUS recent changes (for the whole site)

 VIEWS
Views
ReadEditPage history

MediaWiki standard views: read, edit, history.

 HISTORY
Page history
Page

A link to the page history or the page itself if you already are on the history page.


 ACTIONS
Actions
PurgeWatchMoveDelete

MediaWiki standard actions like purge, watch, move, delete.

 WATCH
Watch

Link to watch/unwatch page.

 ICONWATCH

Icon to watch/unwatch page.

Note that the $wgTweekiSkinUseIconWatch configuration parameter has to be set to true for this to work.

 PERSONAL
Log in
UserToggle Dropdown
UserDiscussionPreferencesWatchlistUser contributionsLog Out

A link to the log in form for anonymous users, a dropdown with the personal tools if already logged in.

Note: PERSONAL by default is hidden via configuration settings. If you want the link to the log in form to show up, you need to add the following line to LocalSettings.php:
$wgTweekiSkinHideAnon['PERSONAL'] = false;

 PERSONAL-EXT

Same as PERSONAL but using LOGIN-EXT's dropdown.

 LOGIN
Log in

A link to the log in form for anonymous users, empty if already logged in.

 LOGIN-EXT

A dropdown to allow logging in while staying on the same page.

 SIDEBAR

The original content of the sidebar for Mediawiki's standard skins as defined in Mediawiki:Sidebar.

 LANGUAGES

Select different languages if your wiki supports it.

 SEARCH

The standard search box including autocomplete.

 FIRSTHEADING

You can place the first heading in any navigational section. Note that you can control the visibility of this element with FIRSTHEADING and the original heading in the content with firstHeading, i.e. it is case sensitive.

 TOC

Table of contents, if placed in the sidebar it makes use of Bootstrap's scrollspy feature.

 LOGO

the Logo as set via $wgLogo in LocalSettings.php. Use #p-logo to adapt the styling.

Note: This is to place the logo in one of the navigational sections. To put a logo in navbar-brand follow the How-To.

Retrieved from "https://tweeki.kollabor.at/w/index.php?title=Navigation&oldid=880"