hyperzlib
/
nodebb-theme-persona
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #327 from pichalite/master

Browse Source 
generic class for bottom-sheet
main
psychobunny 8 years ago committed by GitHub
parent 28f21f4277 f036559e46
commit 4befdd484b
9 changed files with 55 additions and 103 deletions
Show Stats Download Patch File Download Diff File

142
less/modules/bottom-sheet.less
Unescape Escape View File

@ -1,102 +1,54 @@
.bottom-sheet {
display: block;
visibility: hidden;
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0 5px;
max-height: 60%;
background: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.35);
overflow: auto;
-webkit-overflow-scrolling: touch;
transform: translate3d(0, 350px, 0);
transition: transform 0.3s, visibility 0s 0.3s;
z-index: 995;
padding: 5px 0 10px;
li {
a {
padding: 10px 20px;
}
&.divider {
padding: 0;
}
&.active {
background-color: @btn-primary-bg;
color: @btn-primary-color;
}
}
}
.bottom-sheet-open {
transform: none;
visibility: visible;
transition-delay: 0s;
top: initial;
}
@media (max-width: @screen-sm-max) {
.post-bar {
.thread-tools, [component="thread/sort"], [component="topic/watch"] {
.dropdown-menu {
.bottom-sheet;
}
&.open {
.dropdown-menu {
.bottom-sheet-open;
}
}
.dropdown-backdrop {
background-color: rgba(0, 0, 0, .3);
}
@media (max-width: @screen-sm-max) {
.dropdown-menu {
display: block;
visibility: hidden;
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0 5px;
max-height: 60%;
background: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.35);
overflow: auto;
-webkit-overflow-scrolling: touch;
transform: translate3d(0, 350px, 0);
transition: transform 0.3s, visibility 0s 0.3s;
z-index: 995;
padding: 5px 0 10px;
li {
a {
padding: 10px 20px;
}
&.divider {
padding: 0;
}
&.active {
background-color: @btn-primary-bg;
color: @btn-primary-color;
}
}
}
}
.category {
[component="topic/watch"], [component="thread/sort"], .thread-tools {
&.open {
.dropdown-menu {
.bottom-sheet;
}
&.open {
.dropdown-menu {
.bottom-sheet-open;
}
}
.dropdown-backdrop {
background-color: rgba(0, 0, 0, .3);
}
transform: none;
visibility: visible;
transition-delay: 0s;
top: initial;
}
}
}
.unread {
.btn-group {
.dropdown-menu {
.bottom-sheet;
}
&.open {
.dropdown-menu {
.bottom-sheet-open;
}
}
.dropdown-backdrop {
background-color: rgba(0, 0, 0, .3);
}
.dropdown-backdrop {
background-color: rgba(0, 0, 0, .3);
}
}
}

2
templates/partials/account/menu.tpl
Unescape Escape View File

@ -1,4 +1,4 @@
<div class="btn-group account-fab">
<div class="btn-group account-fab bottom-sheet">
<button type="button" class="fab dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-v"></i>
</button>

2
templates/partials/category/sort.tpl
Unescape Escape View File

@ -1,5 +1,5 @@
<!-- IF loggedIn -->
<div class="btn-group" component="thread/sort">
<div class="btn-group bottom-sheet" component="thread/sort">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:sort_by]]</span>
<span class="visible-xs-inline"><i class="fa fa-fw fa-sort"></i></span>

2
templates/partials/category/tools.tpl
Unescape Escape View File

@ -1,5 +1,5 @@
<!-- IF privileges.editable -->
<div class="btn-group thread-tools">
<div class="btn-group thread-tools bottom-sheet">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:thread_tools.title]]</span>
<span class="visible-xs-inline"><i class="fa fa-fw fa-gear"></i></span>

2
templates/partials/category/watch.tpl
Unescape Escape View File

@ -1,5 +1,5 @@
<!-- IF config.loggedIn -->
<div class="btn-group topic-watch-dropdown" component="topic/watch">
<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">

2
templates/partials/thread_tools.tpl
Unescape Escape View File

@ -1,5 +1,5 @@
<!-- IF privileges.view_thread_tools -->
<div class="btn-group thread-tools">
<div class="btn-group thread-tools bottom-sheet">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:thread_tools.title]]</span>
<span class="visible-xs-inline"><i class="fa fa-fw fa-gear"></i></span>

2
templates/partials/topic/post-menu.tpl
Unescape Escape View File

@ -1,4 +1,4 @@
<span component="post/tools" class="dropdown moderator-tools <!-- IF !posts.display_post_menu -->hidden<!-- ENDIF !posts.display_post_menu -->">
<span component="post/tools" class="dropdown moderator-tools bottom-sheet <!-- IF !posts.display_post_menu -->hidden<!-- ENDIF !posts.display_post_menu -->">
<a href="#" data-toggle="dropdown"><i class="fa fa-fw fa-ellipsis-v"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
</span>

2
templates/partials/topic/sort.tpl
Unescape Escape View File

@ -1,5 +1,5 @@
<!-- IF config.loggedIn -->
<div class="btn-group" component="thread/sort">
<div class="btn-group bottom-sheet" component="thread/sort">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:sort_by]]</span>
<span class="visible-xs-inline"><i class="fa fa-fw fa-sort"></i></span> <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">

2
templates/partials/topic/watch.tpl
Unescape Escape View File

@ -1,5 +1,5 @@
<!-- IF config.loggedIn -->
<div class="btn-group topic-watch-dropdown" component="topic/watch">
<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
<span component="topic/following/menu" <!-- IF !isFollowing -->class="hidden"<!-- ENDIF !isFollowing -->><i class="fa fa-fw fa-bell-o"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:watching]]</span></span>

Write Preview
Loading…
Cancel
Save