Skip to content

Turn left hand nav into slide-in drawer #312

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Torgen wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Turn left hand nav into slide-in drawer #312

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
07f9cac
Put nav within blackboard in slide-in drawer.
Torgen Feb 4, 2018
c54cde7
Remove sidebar stuff obviated by slide-in drawer
Torgen Feb 4, 2018
b432bc2
Remove nav panel
Torgen Dec 6, 2017
f9047c5
Put blackboard drawer inside blackboard template.
Torgen Feb 4, 2018
2509592
Quote hash in matcher for fragment links`
Torgen Jul 17, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 34 additions & 31 deletions blackboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
<template name="blackboard">

<div class="bb-menu-button">
<button class="btn btn-inverse btn-small">
<i class="icon-white icon-list"></i>
</button>
</div>
<div class="bb-menu-drawer fade">
<ul class="nav nav-list bb-sidenav">
<li><a class="bb-wiki" href="{{wiki title=""}}"
target="_blank">Codex Wiki</a></li>
<li class="divider"></li>
{{#each roundgroups}}
<li class="nav-header">{{name}}</li>
{{#each rounds}}
<li><a title="r{{round_num}}" href="#r{{round._id}}"><i class="icon-chevron-right"></i>
{{round.name}}</a></li>
{{/each}}
{{/each}}
</ul>
</div>
<!-- puzzles w/ index -->
<div class="row-fluid">
<div id="bb-sidebar" class="span2">
<ul class="nav nav-list bb-sidenav span2">
<li><a class="bb-wiki" href="{{wiki title=""}}"
target="_blank">Codex Wiki</a></li>
<li class="divider"></li>
{{#each roundgroups}}
<li class="nav-header">{{name}}</li>
{{#each rounds}}
<li><a title="r{{round_num}}" href="#r{{round._id}}{{updateScrollSpy}}"><i class="icon-chevron-right"></i>
{{round.name}}</a></li>
{{/each}}
{{/each}}
</ul>
</div>
<div id="bb-tables" class="{{#if hideStatus}}span10{{else}}span8{{/if}} {{#if canEdit}}bb-canEdit{{/if}}">
<div id="bb-tables" class="{{#if hideStatus}}span12{{else}}span9{{/if}} {{#if canEdit}}bb-canEdit{{/if}}">
<!-- content div -->
<div class="btn-toolbar pull-right text-right bb-top-buttons">
{{#if canEdit}}
Expand Down Expand Up @@ -147,7 +151,7 @@ <h2 class="bb-editable" data-bbedit="roundgroups/{{_id}}/title">
{{#if hideStatus}}
<div class="bb-hide-status"><i class='icon-chevron-left'></i></div>
{{else}}
<div id="bb-right-sidebar" class="span2"><div>
<div id="bb-right-sidebar" class="span3"><div>
<div class="bb-hide-status"><i class='icon-chevron-right'></i></div>
{{> blackboard_status_grid}}
</div></div><!-- bb-right-sidebar -->
Expand All @@ -157,26 +161,25 @@ <h2 class="bb-editable" data-bbedit="roundgroups/{{_id}}/title">

<template name="blackboard_status_grid">
<div class="bb-status-grid">
<table>
<tbody>
{{#each roundgroups}}
<div class="bb-status-grid-row {{#if solved}}bb-status-solved{{else}}{{#if stuck this}}bb-status-stuck{{else}}bb-status-unsolved{{/if}}{{/if}}">{{link id=_id}}</div>
<tr><th colspan=2 class="bb-status-grid-roundgroup bb-status-{{#unless solved}}un{{/unless}}solved">{{link id=_id}}</th></tr>
{{#each rounds}}
<div class="bb-status-grid-row">
<div class="bb-status-grid-cell">
<div class="{{#if round.solved}}bb-status-solved{{else}}{{#if stuck round}}bb-status-stuck{{else}}bb-status-unsolved{{/if}}{{/if}}">
{{link id=round._id title=round.name text=rX}}:
</div>
</div><!--
-->{{#each puzzles}}<!--
--><div class="bb-status-grid-cell">
<div class="{{#if puzzle.solved}}bb-status-solved{{else}}{{#if stuck puzzle}}bb-status-stuck{{else}}bb-status-unsolved{{/if}}{{/if}}">
<tr>
<td class="bb-status-grid-round bb-status-{{#unless round.solved}}un{{/unless}}solved">
{{link id=round._id title="meta" text=round.name}}
</td><td class="bb-status-grid-puzzles">
{{#each puzzles}}<!--
--><div class="bb-status-grid-cell bb-status-{{#unless puzzle.solved}}un{{/unless}}solved">
{{link id=puzzle._id title=puzzle.name text=puzzle_num}}
</div>
</div><!--
-->{{/each}}
</div>
-->{{/each}}</td>
</tr>
{{/each}}
{{/each}}
</div><!-- bb-status-grid -->
</tbody>
</table></div><!-- bb-status-grid -->
</template>

<template name="blackboard_round">
Expand Down
83 changes: 51 additions & 32 deletions blackboard.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,48 @@ body.has-emojis {
font-family: "Noto Sans", sans-serif;
}
}
.bb-menu-button {
position: fixed;
bottom: 0px;
left:0px;
z-index: 1030;
}
.bb-menu-drawer {
&.fade {
opacity: 1;
}
position: fixed;
top: 0px;
bottom: 0px;
overflow-y: auto;
background-color: white;
width: 256px;
left: -256px;
z-index: 1050;
transition: left 0.25s ease-in-out;
border-right: 1px solid black;
&.in {
left: 0px;
}
ul {
margin-left: 5px;
li {
display: block;
a {
display: block;
&.bb-wiki { text-align: center; }
}
/* Chevrons */
.icon-chevron-right {
float: right;
margin-top: 2px;
margin-right: -6px;
opacity: .25;
}
}
}
}

.bb-puzzleround, .bb-chat-messages {
padding-top: 40px; /* allow space for breadcrumbs in navbar */
}
Expand Down Expand Up @@ -164,33 +206,6 @@ body.has-emojis {
text-transform: uppercase;
}
}
#bb-sidebar {
.bb-sidenav {
margin-top: 10px;
background-color: #fff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
box-shadow: 0 1px 4px rgba(0,0,0,.065);
border: 1px solid #e5e5e5;

position: fixed; /* for wide screens */

& > li:first-child { text-align: center; /* wiki link */ }
li.nav-header, li > a { .ellipsis; }

/* Chevrons */
.icon-chevron-right {
float: right;
margin-top: 2px;
margin-right: -6px;
opacity: .25;
}
}
}

#bb-right-sidebar {
position: fixed;
right: 14px;
Expand Down Expand Up @@ -226,10 +241,15 @@ body.has-emojis {
padding: 5px;
font-size: 80%;

.bb-status-grid-row {
padding-left: 1.5em;
text-indent: -1.5em;
& > * { text-indent: 0; }
.bb-status-grid-roundgroup {
font-weight: bold;
text-transform: uppercase;
}
td {
padding: 0px;
}
.bb-status-grid-round {
padding-right:2px;
}
.bb-status-grid-cell {
display: inline-block;
Expand Down Expand Up @@ -653,7 +673,6 @@ html.fullHeight {
body {
padding-top: 0;
}

#roomName { width:85px; } /* narrow room name input */
.bb-omit-when-narrow, .puzzle-working, .puzzle-update { display: none; }
.bb-buttonbar .bb-login { float: right }
Expand Down
20 changes: 10 additions & 10 deletions client/blackboard.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,16 @@ Template.blackboard_status_grid.helpers
return p
stuck: share.model.isStuck

Template.blackboard.events
"click .bb-menu-button .btn": (event, template) ->
template.$('.bb-menu-drawer').modal 'show'
"click a[href^='#']": (event, template) ->
event.preventDefault()
template.$('.bb-menu-drawer').modal 'hide'
$.scrollTo (event.target.getAttribute 'href'),
duration: 400
offset: { top: -110 }

Template.nick_presence.helpers
email: ->
cn = share.model.canonical(this.nick)
Expand All @@ -175,19 +185,9 @@ share.find_bbedit = (event) ->
return edit.split('/')

Template.blackboard.onRendered ->
$("#bb-sidebar").localScroll({ duration: 400, lazy: true })
$("body").scrollspy(target: "#bb-sidebar", offset: (NAVBAR_HEIGHT + 10))
ss = $("body").data("scrollspy")
# hack to ensure first element is selected on first reload
ss.activate(ss.targets[0]) if ss.targets.length
ss.process()
# page title
$("title").text("Codex Puzzle Blackboard")
# affix side menu
# XXX disabled because it doesn't play nice with narrow screens
#$("#bb-sidebar > .bb-sidenav").affix()
# tooltips
$('#bb-sidebar .nav > li > a').tooltip placement: 'right'
$('#bb-tables .bb-puzzle .puzzle-name > a').tooltip placement: 'left'
# see the global 'updateScrollSpy' helper for details on how
# we update scrollspy when the rounds list changes
Expand Down