Skip to content

Commit

Permalink
refs #4053 use less instead of css
Browse files Browse the repository at this point in the history
  • Loading branch information
@tsteur
tsteur committed Sep 19, 2013
1 parent b258bc4 commit 8b9cce1
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 88 deletions.
6 changes: 6 additions & 0 deletions plugins/CorePluginsAdmin/CorePluginsAdmin.php
View file
Expand Up @@ -26,9 +26,15 @@ public function getListHooksRegistered()
return array(
'AdminMenu.add' => 'addMenu',
'AssetManager.getJsFiles' => 'getJsFiles',
'AssetManager.getStylesheetFiles' => 'getStylesheetFiles',
);
}

public function getStylesheetFiles($stylesheets)
{
$stylesheets[] = "plugins/CorePluginsAdmin/stylesheets/marketplace.less";
}

function addMenu()
{
Piwik_AddAdminSubMenu('CorePluginsAdmin_MenuPlatform', null, "", Piwik::isUserIsSuperUser(), $order = 15);
Expand Down
114 changes: 114 additions & 0 deletions plugins/CorePluginsAdmin/stylesheets/marketplace.less
View file
@@ -0,0 +1,114 @@
.pluginslist {
margin-top: 20px;
max-width: 980px;
clear: right;

.plugin {
width: 280px;
float: left;
border: 1px solid #dadada;
padding: 15px;
background-color: #F6F5F3;
margin-right: 14px;
margin-bottom: 15px;
position: relative;

&:hover {
background-color: #EFEEEC;
}

li {
display: inline-block;
padding-right: 50px;
font-size: 90%;

&.even {
padding-right: 0px;
}
}
ul {
list-style: none;
margin-left: 0;
line-height: 140%;
}
.header {
margin-top: 0px;
margin-bottom: 15px;
}
.description {
padding-bottom: 10px;
}
.install {
float: right;
}
.more {
font-weight: bold;
text-decoration: none;
color: #255792;
}
.content {
margin-bottom: 46px;
}
.footer {
height: 58px;
position: absolute;
bottom: 6px;
left: 0px;
right: 0px;
}
.metadataSeparator {
background-color: lightgray;
color: #333;
border: 0px;
height: 1px;
width: 100%;
}
.metadata {
margin-top: 10px;
margin-left: 15px;
margin-right: 15px;
}
}

&.themes .plugin {
.header {
display: inline;
}
.content {
margin-bottom: 57px;
}
.preview {
width: 250px;
height: 250px;
}
.footer {
height: 55px;
position: absolute;
bottom: 7px;
left: 0px;
right: 0px;
}
}
}

.pluginslistActionBar {
min-width: 650px;
max-width: 980px;

form {
display: inline;
}

.infoBox {
font-size: 14px;
margin: 0px 0px 10px 10px;
padding: 15px;
color: #301901;
display: inline-block;
background-color: #ffffe0;
border: 1px solid #e6db55;
border-radius: 3px;
width: 250px;
float: right;
}
}
54 changes: 10 additions & 44 deletions plugins/CorePluginsAdmin/templates/browsePlugins.twig
View file
@@ -1,43 +1,8 @@
{% extends 'admin.twig' %}

{% block content %}
<style type="text/css">
.plugin {
width: 280px; float: left; border: 1px solid #dadada; padding: 15px; background-color: #F6F5F3;
margin-right: 14px; margin-bottom: 15px;
}
.plugin:hover {
background-color: #EFEEEC;
}
.plugin li { display: inline-block;padding-right: 50px;font-size: 90%; }
.plugin ul { list-style: none;margin-left: 0; line-height: 140%; }
.plugin .header { margin-top: 0px; margin-bottom: 15px; }
.plugin .description { padding-bottom: 10px; }
.plugin .install { float: right; }
.plugin .more { font-weight: bold; text-decoration: none; color: #255792; }
.pluginslist { margin-top: 20px;max-width:980px;clear: right; }
.infoBox {
font-size: 14px;
margin: 0px 0px 10px 10px;
padding: 15px;
color: #301901;
display: inline-block;
background-color: #ffffe0;
border: 1px solid #e6db55;
border-radius: 3px;
width: 250px;
float: right;
}
.plugin .metadataSeparator {
background-color: lightgray;
color: #333;
border: 0px;
height: 1px;
width: 100%;
}
</style>

<div style="min-width: 650px;max-width:980px;">
<div class="pluginslistActionBar">

<h2>Extend Piwik by installing a new plugin</h2>

Expand All @@ -52,25 +17,26 @@
|
<a href="{{ linkTo({'sort': 'alpha', 'query': ''}) }}">alpha</a>
|
<form action="{{ linkTo({'sort': ''}) }}" method="POST" style="display:inline">
<form action="{{ linkTo({'sort': ''}) }}" method="POST">
<input value="{{ query }}" placeholder="Search" type="text" name="query"/>
<button type="submit">Search</button>
</form>
</div>
</div>

<div class="pluginslist" style="">
<div class="pluginslist">

{% if plugins|length %}
{% for plugin in plugins %}

<div class="plugin" style="position:relative;">
<div class="plugin">

<div style="margin-bottom: 47px;">
<div class="content">
{% if plugin.isInstalled %}
<span class="install">Installed</span>
{% else %}
<a href="{{ linkTo({'action': 'installPlugin', 'pluginName': plugin.name, 'nonce': nonce}) }}" class="install">Install</a>
<a href="{{ linkTo({'action': 'installPlugin', 'pluginName': plugin.name, 'nonce': nonce}) }}"
class="install">Install</a>
{% endif %}

<h3 class="header"><a href="javascript:return;" class="more">{{ plugin.name }}</a></h3>
Expand All @@ -79,11 +45,11 @@
</p>
</div>

<div style="height:58px;position: absolute;bottom: 7px;left: 0px;right: 0px;">
<div class="footer">
<hr class="metadataSeparator">
<ul style="margin-left: 15px;margin-right: 15px;margin-top: 10px;">
<ul class="metadata">
<li>Version: <strong>{{ plugin.latestVersion }}</strong></li>
<li style="padding-right: 0px;">Updated: <strong>{{ plugin.lastUpdated }}</strong></li>
<li class="even">Updated: <strong>{{ plugin.lastUpdated }}</strong></li>
<li>Downloads: <strong>{{ plugin.numDownloads }}</strong></li>
</ul>
</div>
Expand Down
54 changes: 10 additions & 44 deletions plugins/CorePluginsAdmin/templates/browseThemes.twig
View file
@@ -1,43 +1,8 @@
{% extends 'admin.twig' %}

{% block content %}
<style type="text/css">
.plugin li { display: inline-block;padding-right: 50px;font-size: 90%; }
.plugin ul { list-style: none;margin-left: 0; line-height: 140%; }
.plugin .description { padding-bottom: 10px; }
.plugin .install { float: right; }
.plugin .more { font-weight: bold; text-decoration: none; color: #1D3256 }
.plugin .metadata { margin-top: 10px; }
.plugin h3 { display: inline; }
.plugin { width: 280px; float: left; border: 1px solid #dadada; padding: 15px; background-color: #F6F5F3;
margin-right: 14px; margin-bottom: 15px; position: relative;
}
.plugin:hover {
background-color: #EFEEEC;
}
.themeslist { margin-top: 20px;max-width:980px;clear:right; }
.infoBox {
font-size: 14px;
margin: 0px 0px 10px 10px;
padding: 15px;
color: #301901;
display: inline-block;
background-color: #ffffe0;
border: 1px solid #e6db55;
border-radius: 3px;
width: 250px;
float: right;
}
.plugin .metadataSeparator {
background-color: lightgray;
color: #333;
border: 0px;
height: 1px;
width: 100%;
}
</style>

<div style="min-width: 650px;max-width:980px;">
<div class="pluginslistActionBar">

<h2>Enjoy another look & feel by installing a new theme</h2>

Expand All @@ -52,36 +17,37 @@
|
<a href="{{ linkTo({'sort': 'alpha', 'query': ''}) }}">alpha</a>
|
<form action="{{ linkTo({'sort': ''}) }}" method="POST" style="display:inline">
<form action="{{ linkTo({'sort': ''}) }}" method="POST">
<input value="{{ query }}" placeholder="Search" type="text" name="query"/>
<button type="submit">Search</button>
</form>
</div>
</div>

<div class="themeslist" style="">
<div class="pluginslist themes">

{% if plugins|length %}
{% for plugin in plugins %}

<div class="plugin">
<div style="margin-bottom: 57px;">
<div class="content">
{% if plugin.isInstalled %}
<span class="install">Installed</span>
{% else %}
<a href="{{ linkTo({'action': 'installPlugin', 'pluginName': plugin.name, 'nonce': nonce}) }}" class="install">Install</a>
<a href="{{ linkTo({'action': 'installPlugin', 'pluginName': plugin.name, 'nonce': nonce}) }}"
class="install">Install</a>
{% endif %}

<h3 class="header"><a href="javascript:return;" class="more">{{ plugin.name }}</a></h3>
<p class="description">{{ plugin.description }}</p>
<a href="javascript:return;" class="more"><img src="{{ plugin.screenshots|first }}?w=250&h=250" height="250" width="250"/></a>
<a href="javascript:return;" class="more"><img class="preview" src="{{ plugin.screenshots|first }}?w=250&h=250"/></a>
</div>

<div style="height:55px;position: absolute;bottom: 7px;left: 0px;right: 0px;">
<div class="footer">
<hr class="metadataSeparator">
<ul style="margin-left: 15px;margin-right: 15px;" class="metadata">
<ul class="metadata">
<li>Version: <strong>{{ plugin.latestVersion }}</strong></li>
<li style="padding-right: 0px;">Updated: <strong>{{ plugin.lastUpdated }}</strong></li>
<li class="even">Updated: <strong>{{ plugin.lastUpdated }}</strong></li>
<li>Downloads: <strong>{{ plugin.numDownloads }}</strong></li>
</ul>
</div>
Expand Down

0 comments on commit 8b9cce1

Please sign in to comment.