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

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

@ -1,102 +1,54 @@
.bottom-sheet { .bottom-sheet {
display: block; @media (max-width: @screen-sm-max) {
visibility: hidden; .dropdown-menu {
display: block;
position: fixed; visibility: hidden;
left: 0;
right: 0; position: fixed;
bottom: 0; left: 0;
right: 0;
margin: 0; bottom: 0;
padding: 0 5px;
max-height: 60%; margin: 0;
padding: 0 5px;
background: #fff; max-height: 60%;
box-shadow: 0 2px 6px rgba(0,0,0,0.35);
overflow: auto; background: #fff;
-webkit-overflow-scrolling: touch; box-shadow: 0 2px 6px rgba(0,0,0,0.35);
transform: translate3d(0, 350px, 0); overflow: auto;
transition: transform 0.3s, visibility 0s 0.3s; -webkit-overflow-scrolling: touch;
z-index: 995; transform: translate3d(0, 350px, 0);
padding: 5px 0 10px; transition: transform 0.3s, visibility 0s 0.3s;
z-index: 995;
padding: 5px 0 10px;
li {
li {
a { a {
padding: 10px 20px; padding: 10px 20px;
} }
&.divider { &.divider {
padding: 0; padding: 0;
} }
&.active { &.active {
background-color: @btn-primary-bg; background-color: @btn-primary-bg;
color: @btn-primary-color; 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);
}
} }
}
.category { &.open {
[component="topic/watch"], [component="thread/sort"], .thread-tools {
.dropdown-menu { .dropdown-menu {
.bottom-sheet; transform: none;
} visibility: visible;
transition-delay: 0s;
&.open { top: initial;
.dropdown-menu { }
.bottom-sheet-open;
}
}
.dropdown-backdrop {
background-color: rgba(0, 0, 0, .3);
}
} }
}
.unread {
.btn-group {
.dropdown-menu {
.bottom-sheet;
}
&.open {
.dropdown-menu {
.bottom-sheet-open;
}
}
.dropdown-backdrop { .dropdown-backdrop {
background-color: rgba(0, 0, 0, .3); 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"> <button type="button" class="fab dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-v"></i> <i class="fa fa-ellipsis-v"></i>
</button> </button>

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

@ -1,5 +1,5 @@
<!-- IF loggedIn --> <!-- 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"> <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-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="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 --> <!-- 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"> <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-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> <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 --> <!-- 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"> <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 --> <!-- 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"> <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-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> <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> <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> <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
</span> </span>

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

@ -1,5 +1,5 @@
<!-- IF config.loggedIn --> <!-- 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> <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> <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"> <ul class="dropdown-menu dropdown-menu-right">

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

@ -1,5 +1,5 @@
<!-- IF config.loggedIn --> <!-- 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"> <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> <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