richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Change default sidebar settings for docs

pull/1063/head
jlukic 10 years ago
parent
d317b5d682
commit
4106715fde
5 changed files with 91 additions and 66 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      server/files/javascript/semantic.js
  2. 19
      server/files/stylesheets/semantic.css
  3. 98
      server/layouts/default.html.eco
  4. 32
      src/definitions/collections/menu.less
  5. 6
      src/definitions/modules/sidebar.js

2
server/files/javascript/semantic.js
View File

@ -837,7 +837,7 @@ semantic.ready = function() {
;
$menu
.sidebar({
animation: 'slide along'
animation: 'scale down'
})
.sidebar('attach events', '.launch.button, .view-ui.button, .launch.item')
.sidebar('attach events', $hideMenu, 'hide')

19
server/files/stylesheets/semantic.css
View File

@ -871,7 +871,26 @@ body.guide .main.container > * {
#example .settings.table td:nth-child(2n) {
width: 100px;
}
#example.pushed {
background: #333333 url(../images/icons.png) !important;
-webkit-animation-name: masthead;
-moz-animation-name: masthead;
-o-animation-name: masthead;
animation-name: masthead;
-webkit-animation-duration: 30s;
-moz-animation-duration: 30s;
-ms-animation-duration: 30s;
-o-animation-duration: 30s;
animation-duration: 30s;
}
#example.pushed .page .main.menu {
top: -1px;
left: -1px;
width: calc(100% + 2px);
}
/* example code reskin */
#example div.code.hide {

98
server/layouts/default.html.eco
View File

@ -197,59 +197,63 @@
</div>
</div>
<div class="ui fixed transparent inverted main menu">
<div class="container">
<a class="launch item"><i class="content icon"></i> Content</a>
<div class="title item">
<b><%= @document.type %>:</b> <%= @document.title %>
</div>
<% if pageNumber > 1 and currentCollection[pageNumber - 2]?: %>
<a class="icon item" href="<%= currentCollection[pageNumber - 2].url %>"><i class="left chevron icon"></i></a>
<% else: %>
<div class="disabled icon item"><i class="left chevron icon"></i></div>
<% end %>
<div class="section ui dropdown link item">
<span class="count"><%= "#{pageNumber} of #{pageCount}" %></span>
<div class="menu">
<% for element, index in currentCollection: %>
<a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>">
<%= (index+1) %>. <%= element.title %>
</a>
<div class="pusher">
<div class="page">
<div class="ui fixed transparent inverted main menu">
<div class="container">
<a class="launch item"><i class="content icon"></i> Content</a>
<div class="title item">
<b><%= @document.type %>:</b> <%= @document.title %>
</div>
<% if pageNumber > 1 and currentCollection[pageNumber - 2]?: %>
<a class="icon item" href="<%= currentCollection[pageNumber - 2].url %>"><i class="left chevron icon"></i></a>
<% else: %>
<div class="disabled icon item"><i class="left chevron icon"></i></div>
<% end %>
<div class="section ui dropdown link item">
<span class="count"><%= "#{pageNumber} of #{pageCount}" %></span>
<div class="menu">
<% for element, index in currentCollection: %>
<a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>">
<%= (index+1) %>. <%= element.title %>
</a>
<% end %>
</div>
</div>
<% if pageNumber isnt pageCount and currentCollection[pageNumber]?: %>
<a class="icon item" href="<%= currentCollection[pageNumber].url %>"><i class="right chevron icon"></i></a>
<% else: %>
<div class="disabled icon item"><i class="right chevron icon"></i></div>
<% end %>
<div class="right menu">
<div class="vertically fitted borderless item">
<iframe src="http://ghbtns.com/github-btn.html?user=semantic-org&repo=semantic-ui&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
</div>
<% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
<a class="popup designer icon item" data-content="Designer Mode">
<i class="docs designer icon"></i>
</a>
<a class="popup developer icon item" data-content="Developer Mode">
<i class="docs developer icon"></i>
</a>
<% end %>
<a class="popup icon github item" data-content="View project on GitHub" href="https://github.com/quirkyinc/semantic">
<i class="alternate github icon"></i>
</a>
<!-- <a class="popup localization icon item" data-content="International">
<i class="docs globe icon"></i>
</a> -->
</div>
</div>
</div>
<% if pageNumber isnt pageCount and currentCollection[pageNumber]?: %>
<a class="icon item" href="<%= currentCollection[pageNumber].url %>"><i class="right chevron icon"></i></a>
<% else: %>
<div class="disabled icon item"><i class="right chevron icon"></i></div>
<% end %>
<div class="right menu">
<div class="vertically fitted borderless item">
<iframe src="http://ghbtns.com/github-btn.html?user=semantic-org&repo=semantic-ui&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
</div>
<% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
<a class="popup designer icon item" data-content="Designer Mode">
<i class="docs designer icon"></i>
</a>
<a class="popup developer icon item" data-content="Developer Mode">
<i class="docs developer icon"></i>
</a>
<% end %>
<a class="popup icon github item" data-content="View project on GitHub" href="https://github.com/quirkyinc/semantic">
<i class="alternate github icon"></i>
</a>
<!-- <a class="popup localization icon item" data-content="International">
<i class="docs globe icon"></i>
</a> -->
<div class="ui black huge launch right attached button">
<i class="content icon"></i>
<span class="text">Menu</span>
</div>
<%- @content %>
</div>
</div>
<div class="ui black huge launch right attached button">
<i class="content icon"></i>
<span class="text">Menu</span>
</div>
<%- @content %>
<script src="/javascript/library/less.js"></script>
</body>

32
src/definitions/collections/menu.less
View File

@ -1301,59 +1301,59 @@
/* Blue */
.ui.inverted.blue.menu {
background-color: @blue;
background-color: @lightBlue;
}
.ui.inverted.blue.pointing.menu .active.item:after {
background-color: @blue;
background-color: @lightBlue;
}
/* Green */
.ui.inverted.green.menu {
background-color: @green;
background-color: @lightGreen;
}
.ui.inverted.green.pointing.menu .active.item:after {
background-color: @green;
background-color: @lightGreen;
}
/* Orange */
.ui.inverted.orange.menu {
background-color: @orange;
background-color: @lightOrange;
}
.ui.inverted.orange.pointing.menu .active.item:after {
background-color: @orange;
background-color: @lightOrange;
}
/* Pink */
.ui.inverted.pink.menu {
background-color: @pink;
background-color: @lightPink;
}
.ui.inverted.pink.pointing.menu .active.item:after {
background-color: @pink;
background-color: @lightPink;
}
/* Purple */
.ui.inverted.purple.menu {
background-color: @purple;
background-color: @lightPurple;
}
.ui.inverted.purple.pointing.menu .active.item:after {
background-color: @purple;
background-color: @lightPurple;
}
/* Red */
.ui.inverted.red.menu {
background-color: @red;
background-color: @lightRed;
}
.ui.inverted.red.pointing.menu .active.item:after {
background-color: #F16883;
background-color: @lightRed;
}
/* Teal */
.ui.inverted.teal.menu {
background-color: @teal;
background-color: @lightTeal;
}
.ui.inverted.teal.pointing.menu .active.item:after {
background-color: @teal;
background-color: @lightTeal;
}
/* Yellow */
.ui.inverted.yellow.menu {
background-color: @yellow;
background-color: @lightYellow;
}
.ui.inverted.yellow.pointing.menu .active.item:after {
background-color: @yellow;
background-color: @lightYellow;
}

6
src/definitions/modules/sidebar.js
View File

@ -131,7 +131,9 @@ $.fn.sidebar = function(parameters) {
setup: {
layout: function() {
if($(selector.pusher).size() === 0) {
$pusher = $(selector.pusher);
if($pusher.size() === 0) {
module.debug('Adding wrapper element for sidebar');
module.verbose('Setting up page structure for sidebar');
$pusher = $('<div class="pusher" />');
@ -664,7 +666,7 @@ $.fn.sidebar.settings = {
sidebar : 'body > .ui.sidebar',
pusher : 'body > .pusher',
page : 'body > .pusher > .page',
omitted : '.ui.popup, .ui.modal, .ui.nag'
omitted : '.ui.modal, .ui.nag'
},
error : {

Write Preview
Loading…
Cancel
Save