Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Item14219: Check in PatternSkinCssCookbookSidebarToggle
Not adding to MANIFEST or linking documentation yet. CSS needs review / cleanup.
- Loading branch information
Showing
2 changed files
with
73 additions
and
0 deletions.
There are no files selected for viewing
34 changes: 34 additions & 0 deletions
34
PatternSkin/data/System/PatternSkinCssCookbookSidebarToggle.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| %META:TOPICINFO{author="ProjectContributor" date="1479429261" format="1.1" version="1"}% | ||
| %META:TOPICPARENT{name="System.PatternSkinCssCookbook"}% | ||
| <!-- | ||
| * Set NOWYSIWYG = 1 | ||
| --> | ||
| ---+!! System.PatternSkinCssCookbook Recipe: Left Sidebar Toggle | ||
| (currently this Topic is in the Web [[Sandbox.StefanKrüger.WebHome][Sandbox.StefanKrüger]]) | ||
|
|
||
| Idea/Target: | ||
| currently the Sidebar is hidden for screens with width < 870px | ||
| this mod shoud allow to toggle the sidebar at small screens.. | ||
|
|
||
| <div class="foswikiHelp"> | ||
| This line loads the extra style definition: | ||
| <verbatim class="tml"> | ||
| * Set USERSTYLEURL = %PUBURLPATH{topic="Sandbox.StefanKrüger.PatternSkinCssCookbookSidebarToggle" "SidebarToggle.css"}% | ||
| </verbatim> | ||
| You can write these lines in %SYSTEMWEB%.%WIKIPREFSTOPIC%, in %LOCALSITEPREFS%, in %WEBPREFSTOPIC%, in your user topic, or on a single page. | ||
|
|
||
| To Add the Button to the Sidebar do the following: | ||
| Add a Macro | ||
| <verbatim class="tml"> | ||
| * Set SIDEBARTOGGLEBUTTON = <button class="sidebartoggle-button" onclick="$('body').toggleClass('showsidebar');">toggle</button> | ||
| </verbatim> | ||
| then you can use this in a topic or in the System.WebLeftBarWebsList to add it globaly.<br> | ||
| the formating/positioning is done in the css. if the button is part of the sidbar it will be positioned absolute so it | ||
| </div> | ||
| <!-- %JQREQUIRE{"chili"}% --> | ||
|
|
||
| test button: %SIDEBARTOGGLEBUTTON% <br> | ||
| this button only works if the sidebar is hidden (screen-width < 870px) | ||
|
|
||
| (this is based on [[System.PatternSkinCssCookbookNoLeftBar]]) | ||
| %META:FILEATTACHMENT{name="SidebarToggle.css" attachment="SidebarToggle.css" attr="" comment="StyleSheet to toggle left Sidebar in the PatternSkin" date="1479429261" size="784" user="ProjectContributor" version="1"}% |
39 changes: 39 additions & 0 deletions
39
PatternSkin/pub/System/PatternSkinCssCookbookSidebarToggle/SidebarToggle.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| /* Sidebar Toggle */ | ||
|
|
||
| button.sidebartoggle-button { | ||
| /* here comes some default formating */ | ||
| } | ||
|
|
||
| /* if button is in sidebar and display is wide enough hide it. */ | ||
| #patternSideBar button.sidebartoggle-button { | ||
| display: none; | ||
| } | ||
|
|
||
| /* for nice smooth effects: */ | ||
| #patternSideBar { | ||
| display:block; | ||
| } | ||
| #patternOuter { | ||
| transition: margin-left ease-in-out 0.5s; | ||
| } | ||
|
|
||
| /* only active if normally hidden: */ | ||
| @media(max-width:870px) { | ||
| body.showsidebar #patternOuter { | ||
| margin-left: 16em; | ||
| transition: margin-left ease-in-out 0.5s; | ||
| } | ||
|
|
||
| /* show button */ | ||
| #patternSideBar button.sidebartoggle-button { | ||
| display: block; | ||
| position: fixed; | ||
| left: 0; | ||
| bottom: 0; | ||
| width: 2em; | ||
| height: 2em; | ||
| border-radius: 0.5em; | ||
| border: solid 2px rgba(0,0,0, 0.4); | ||
| background-color: rgba(0,0,0, 0.3); | ||
| } | ||
| } |