Accordion without jQuery / bootstrap js
it's not quite 100% as nice though
This commit is contained in:
Lorenz Hübschle-Schneider
parent
23fb4da05a
commit
7d5bc0f078
|
|
@ -423,6 +423,20 @@ h2 span, h2 small {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.panel[data-state=active] .panel-collapse {
|
||||
transition: max-height 0.5s;
|
||||
max-height: 35em;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
.panel[data-state=collapsed] .panel-collapse {
|
||||
transition: max-height 0.5s;
|
||||
max-height: 0;
|
||||
}
|
||||
.panel[data-state=collapsed] {
|
||||
border: 0px solid transparent;
|
||||
}
|
||||
|
||||
/* */
|
||||
/* Mobile layout */
|
||||
/* */
|
||||
|
|
|
|||
32
index.html
32
index.html
|
|
@ -47,18 +47,18 @@
|
|||
<div class="alert alert-danger" ng-show="securityError">
|
||||
<strong>Secure connection error</strong> Unable to connect to unencrypted relay when your are connecting to Glowing Bear over HTTPS. Please use an encrypted relay or load the page without using HTTPS.
|
||||
</div>
|
||||
<div class="panel-group" id="accordion">
|
||||
<div class="panel">
|
||||
<div class="panel-group accordion">
|
||||
<div class="panel" data-state="active">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
|
||||
<a class="accordion-toggle" ng-click="toggleAccordion($event)">
|
||||
Connection settings
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseOne" class="panel-collapse collapse in">
|
||||
<div class="panel-body">
|
||||
<form class="form-signin" role="form">
|
||||
<form class="form-signin" role="form">
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="host">WeeChat relay hostname and port number</label>
|
||||
<div class="input-group">
|
||||
|
|
@ -89,15 +89,15 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel" data-state="collapsed">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
|
||||
<a class="accordion-toggle" ng-click="toggleAccordion($event)">
|
||||
Usage instructions
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseTwo" class="panel-collapse collapse">
|
||||
<div id="collapseTwo" class="panel-collapse collapse in">
|
||||
<div class="panel-body">
|
||||
<h3>Configuring the relay</h3>
|
||||
<div>To start using glowing bear, please enable the relay plugin in your WeeChat client:
|
||||
|
|
@ -125,15 +125,15 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel ">
|
||||
<div class="panel" data-state="collapsed">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
|
||||
<a class="accordion-toggle" ng-click="toggleAccordion($event)">
|
||||
Encryption instructions
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseThree" class="panel-collapse collapse">
|
||||
<div id="collapseThree" class="panel-collapse collapse in">
|
||||
<div class="panel-body">
|
||||
<p>If you check the encryption box, the communication between browser and WeeChat will be encrypted with SSL.</p>
|
||||
<p><strong>Note</strong>: If you are using a self-signed certificate, you have to visit <a href="https://{{ host }}:{{ port }}/">https://{{ host || 'weechathost' }}:{{ port || 'relayport' }}/</a> in your browser first to add a security exception. You can close that tab once you confirmed the certificate, no content will appear. The necessity of this process is a bug in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=594502">Firefox</a> and other browsers.</p>
|
||||
|
|
@ -151,15 +151,15 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel" ng-hide="isinstalled">
|
||||
<div class="panel" data-state="collapsed" ng-hide="isinstalled">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
|
||||
<a class="accordion-toggle" ng-click="toggleAccordion($event)">
|
||||
Install app
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseFour" class="panel-collapse collapse">
|
||||
<div id="collapseFour" class="panel-collapse collapse in">
|
||||
<div class="panel-body">
|
||||
<p>You don't need to install anything to use this app, it should work with any modern browser. Start using it <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">right now</a>! However, there are a few ways to improve integration with your operating system.</p>
|
||||
<h3>Firefox</h3>
|
||||
|
|
@ -170,15 +170,15 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel" data-state="collapsed">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
|
||||
<a class="accordion-toggle" ng-click="toggleAccordion($event)">
|
||||
Get involved
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseFive" class="panel-collapse collapse">
|
||||
<div id="collapseFive" class="panel-collapse collapse in">
|
||||
<div class="panel-body">
|
||||
<p>Glowing bear is built by a small group of developers in their free time. As we're always trying to improve it, we would love getting your feedback and help. If that sounds like something you might enjoy, check out our <a href="https://github.com/glowing-bear/glowing-bear">project page</a> on GitHub!</p>
|
||||
<p>If you're interested in contributing or simply want to say hello, head over to <strong>#glowing-bear</strong> on <strong>freenode!</strong> We won't bite, promise (-ish).</p>
|
||||
|
|
|
|||
|
|
@ -1090,6 +1090,23 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
|
|||
event.stopPropagation();
|
||||
};
|
||||
|
||||
$scope.toggleAccordion = function(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
var target = event.target.parentNode.parentNode.parentNode;
|
||||
target.setAttribute('data-state', target.getAttribute('data-state') === 'active' ? 'collapsed' : 'active');
|
||||
|
||||
// Hide all other siblings
|
||||
var siblings = target.parentNode.children;
|
||||
for (var childId in siblings) {
|
||||
var child = siblings[childId];
|
||||
if (child.nodeType === 1 && child !== target) {
|
||||
child.setAttribute('data-state', 'collapsed');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/* Function gets called from bufferLineAdded code if user should be notified */
|
||||
$rootScope.createHighlight = function(buffer, message) {
|
||||
var title = '';
|
||||
|
|
|
|||
Loading…
Reference in a new issue