Skip to content
Extraits de code Groupes Projets
Valider 99922141 rédigé par Matthieu Napoli's avatar Matthieu Napoli
Parcourir les fichiers

#7652 CSS style guide and UI components demo

parent 9a835b47
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Masquer les modifications d'espaces
En ligne Côte à côte
plugins/Morpheus/Controller.php 0 → 100644
+ 23
− 0
Voir le fichier @ 99922141
<?php
/**
* Piwik - free/libre analytics platform
*
* @link http://piwik.org
* @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
*/
namespace Piwik\Plugins\Morpheus;
use Piwik\Development;
use Piwik\View;
class Controller extends \Piwik\Plugin\Controller
{
public function demo()
{
if (! Development::isEnabled()) {
return;
}
return $this->renderTemplate('demo');
}
}
plugins/Morpheus/templates/demo.twig 0 → 100644
+ 297
− 0
Voir le fichier @ 99922141
{% extends 'layout.twig' %}
{% block head %}
{{ parent() }}
<style>
.grid-demo .row {
font-size: 13px;
margin-bottom: 15px;
}
.grid-demo [class^=col-] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
}
.demo {
margin: 0 0 15px 0;
background-color: #fff;
border: solid 1px #ddd;
border-radius: 4px 4px 0 0;
padding: 25px;
}
.demo-code {
font-size: 14px;
padding: 9px 14px;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
margin: -16px 0 15px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.demo .div-block {
max-width: 400px;
margin-right: auto;
margin-left: auto;
min-height: 20px;
padding: 19px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
}
</style>
{% endblock %}
{% block root %}
<div class="container">
<h1>Piwik UI demo</h1>
<p>
This page is intended to show all the UI components and styles available to use in Piwik.
</p>
<h2>Containers</h2>
<p>
All HTML should be in a container:
</p>
<ul>
<li><code>.container-fluid</code>: this container is fluid and will take 100% of the width</li>
<li><code>.container</code>: this container has a max-width that adapts to the screen size</li>
</ul>
<p>
Read more about <a href="http://getbootstrap.com/css/#overview-container">Bootstrap's containers</a>.
</p>
<h2>Grid system</h2>
<p>
Bootstrap's grid system allows to organize the content in columns, all the while staying responsive for smaller screens.
</p>
<div class="grid-demo">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
<p>
Read more about <a href="http://getbootstrap.com/css/#grid">Bootstrap's grid system</a>.
</p>
<h2>Typography</h2>
<div class="demo">
<h1>h1. heading</h1>
<h2>h2. heading</h2>
<h3>h3. heading</h3>
<h4>h4. heading</h4>
<h5>h5. heading</h5>
<h6>h6. heading</h6>
<p>
This is a paragraph, and <a href="#">this is a link</a>.
</p>
<p>
Another paragraph, lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Alignment classes</h3>
<div class="demo">
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
</div>
<div class="demo-code">
<pre>&lt;p class=&quot;text-left&quot;&gt;Left aligned text.&lt;/p&gt;
&lt;p class=&quot;text-center&quot;&gt;Center aligned text.&lt;/p&gt;
&lt;p class=&quot;text-right&quot;&gt;Right aligned text.&lt;/p&gt;</pre>
</div>
<h3>Lists</h3>
<div class="demo">
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
</div>
<div class="demo-code">
<pre>&lt;ul&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;</pre>
</div>
<h2>Buttons</h2>
<div class="demo">
<a class="btn" href="#">Link</a>
<input type="button" class="btn" value="Input">
<input type="submit" value="Submit">
<button type="submit">Button</button>
</div>
<div class="demo-code">
<pre>&lt;a class=&quot;btn&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt;
&lt;input type=&quot;button&quot; class=&quot;btn&quot; value=&quot;Input&quot;&gt;
&lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
&lt;button type=&quot;submit&quot;&gt;Button&lt;/button&gt;</pre>
</div>
<div class="demo">
<a class="btn btn-lg" href="#">Large button</a>
</div>
<div class="demo-code">
<pre>&lt;a class=&quot;btn btn-lg&quot; href=&quot;#&quot;&gt;Large button&lt;/a&gt;</pre>
</div>
<div class="demo">
<div class="div-block">
<a class="btn btn-block" href="#">Block button</a>
<a class="btn btn-lg btn-block" href="#">Large block button</a>
</div>
</div>
<div class="demo-code">
<pre>&lt;a class=&quot;btn btn-block&quot; href=&quot;#&quot;&gt;Block button&lt;/a&gt;
&lt;a class=&quot;btn btn-lg btn-block&quot; href=&quot;#&quot;&gt;Large block button&lt;/a&gt;</pre>
</div>
<h2>Alerts</h2>
<div class="demo">
<div class="alert alert-success">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
</div>
<div class="demo-code">
<pre>&lt;div class=&quot;alert alert-success&quot;&gt;...&lt;/div&gt;
&lt;div class=&quot;alert alert-info&quot;&gt;...&lt;/div&gt;
&lt;div class=&quot;alert alert-warning&quot;&gt;...&lt;/div&gt;
&lt;div class=&quot;alert alert-danger&quot;&gt;...&lt;/div&gt;</pre>
</div>
<p>
Read more about <a href="http://getbootstrap.com/components/#alerts">Bootstrap's alerts</a>.
</p>
<h2>Forms</h2>
<h3>Simple form</h3>
<div class="demo">
<form action="#">
<label>
Username:
<input type="text" placeholder="Some text here..."/>
</label>
<label>
Email:
<input type="text" placeholder="Some email here..."/>
</label>
<button type="submit">Submit</button>
</form>
</div>
<div class="demo-code">
<pre>&lt;form action=&quot;#&quot;&gt;
&lt;label&gt;
Username:
&lt;input type=&quot;text&quot; placeholder=&quot;Some text here...&quot;/&gt;
&lt;/label&gt;
&lt;label&gt;
Email:
&lt;input type=&quot;text&quot; placeholder=&quot;Some email here...&quot;/&gt;
&lt;/label&gt;
&lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
&lt;/form&gt;</pre>
</div>
<h2>Code</h2>
<h3>Inline</h3>
<div class="demo">
<p>
You can put code in a text using the <code>code</code> tag.
</p>
</div>
<div class="demo-code">
<pre>You can put code in a text using the &lt;code&gt;code&lt;/code&gt; tag.</pre>
</div>
<h3>Block</h3>
<div class="demo">
<pre>&lt;!-- Piwik --&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
&lt;/script&gt;
&lt;!-- End Piwik Code --&gt;</pre>
</div>
<div class="demo-code">
&lt;pre&gt;...&lt;/pre&gt;
</div>
<h2>Tables</h2>
<div class="demo">
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
{% endblock %}
tests/UI/specs/Morpheus_spec.js 0 → 100644
+ 18
− 0
Voir le fichier @ 99922141
/*!
* Piwik - free/libre analytics platform
*
* @link http://piwik.org
* @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
*/
describe("Morpheus", function () {
this.timeout(0);
var url = "?module=Morpheus&action=demo";
it("should show all UI components and CSS classes", function (done) {
expect.screenshot('load').to.be.capture(function (page) {
page.load(url);
}, done);
});
});
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter