From f6ce2608a47d6a84b55f7291f067569f41facda8 Mon Sep 17 00:00:00 2001
From: Jan-Hendrik Willms <jan.hendrik.willms@uni-oldenburg.de>
Date: Wed, 18 Mar 2015 15:44:10 +0100
Subject: [PATCH] lessify styles + minor touchups
---
PluginMarket.class.php | 14 +-
assets/pluginmarket.css | 349 +++++++++++++++++++++++--------------
assets/pluginmarket.less | 161 +++++++++++++++++
controllers/approving.php | 1 -
controllers/myplugins.php | 1 -
controllers/presenting.php | 17 +-
6 files changed, 397 insertions(+), 146 deletions(-)
create mode 100644 assets/pluginmarket.less
diff --git a/PluginMarket.class.php b/PluginMarket.class.php
index 07d7ae2..c468fe7 100644
--- a/PluginMarket.class.php
+++ b/PluginMarket.class.php
@@ -17,12 +17,12 @@ class PluginMarket extends StudIPPlugin implements SystemPlugin, HomepagePlugin
parent::__construct();
$top = new Navigation($this->getDisplayTitle(), PluginEngine::getURL($this, array(), "presenting/overview"));
$top->setImage($this->getPluginURL()."/assets/topicon.svg");
-
+
$overview = new Navigation($this->getDisplayTitle(), PluginEngine::getURL($this, array(), "presenting/overview"));
$top->addSubNavigation("presenting", $overview);
$overview->addSubNavigation("overview", new AutoNavigation(_('�bersicht'), PluginEngine::getURL($this, array(), "presenting/overview")));
$overview->addSubNavigation("all", new AutoNavigation(_('Alle Plugins'), PluginEngine::getURL($this, array(), "presenting/all")));
-
+
if ($GLOBALS['perm']->have_perm("autor")) {
$top->addSubNavigation("myplugins", new Navigation(_("Meine Plugins"), PluginEngine::getURL($this, array(), "myplugins/overview")));
}
@@ -47,8 +47,11 @@ class PluginMarket extends StudIPPlugin implements SystemPlugin, HomepagePlugin
NotificationCenter::addObserver($this, "triggerFollowingStudips", "PluginReleaseDidUpdateCode");
}
-
- public function initialize() {
+
+ public function initialize()
+ {
+ $this->addStylesheet('assets/pluginmarket.less');
+
$sidebar = Sidebar::Get();
$sidebar->setImage('../../'.$this->getPluginPath().'/assets/sidebar-marketplace.png');
}
@@ -60,7 +63,8 @@ class PluginMarket extends StudIPPlugin implements SystemPlugin, HomepagePlugin
public function getHomepageTemplate($user_id)
{
- PageLayout::addStylesheet($this->getPluginURL()."/assets/pluginmarket.css");
+ $this->addStylesheet('assets/pluginmarket.less');
+
$templatefactory = new Flexi_TemplateFactory(__DIR__."/views");
$template = $templatefactory->open("presenting/users_plugins.php");
$plugins = MarketPlugin::findBySQL("user_id = ? AND publiclyvisible = 1 AND approved = 1 ORDER BY mkdate DESC", array($user_id));
diff --git a/assets/pluginmarket.css b/assets/pluginmarket.css
index 5489e70..3a4cce6 100644
--- a/assets/pluginmarket.css
+++ b/assets/pluginmarket.css
@@ -1,163 +1,252 @@
+.clearfix {
+ *zoom: 1;
+}
+.clearfix:before,
+.clearfix:after {
+ display: table;
+ content: "";
+ line-height: 0;
+}
+.clearfix:after {
+ clear: both;
+}
+.hide-text {
+ font: 0/0 a;
+ color: transparent;
+ text-shadow: none;
+ background-color: transparent;
+ border: 0;
+}
+.input-block-level {
+ display: block;
+ width: 100%;
+ min-height: 30px;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+/*
+ * studip-mixins.less
+ *
+ * This file contains all mixins created specifically for Stud.IP
+ * while mixins.less should contain a copy of the mixins from
+ * twitter's bootstrap.
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License as
+ * published by the Free Software Foundation; either version 2 of
+ * the License, or (at your option) any later version.
+ *
+ * @author Jan-Hendrik Willms <tleilax+studip@gmail.com>
+ * @license http://www.gnu.org/licenses/gpl-2.0.html GPL version 2
+ * @category Stud.IP
+ * @since 2.4
+ */
+.scrollbox-vertical {
+ overflow: auto;
+ background: /* Shadow covers */ linear-gradient(#ffffff 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), #ffffff 70%) 0 100%, /* Shadows */ radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
+ background: /* Shadow covers */ linear-gradient(#ffffff 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), #ffffff 70%) 0 100%, /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
+ background-repeat: no-repeat;
+ background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+ /* Opera doesn't support this in the shorthand */
+ background-attachment: local, local, scroll, scroll;
+}
+.scrollbox-horizontal {
+ overflow: auto;
+ background: /* Shadow covers */ linear-gradient(90deg, #ffffff 30%, rgba(255, 255, 255, 0)), linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 70%) 100% 0, /* Shadows */ radial-gradient(0 50%, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(100% 50%, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 100% 0;
+ background: /* Shadow covers */ linear-gradient(90deg, #ffffff 30%, rgba(255, 255, 255, 0)), linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 70%) 100% 0, /* Shadows */ radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 100% 0;
+ background-repeat: no-repeat;
+ background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
+ /* Opera doesn't support this in the shorthand */
+ background-attachment: local, local, scroll, scroll;
+}
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ border: 0;
+}
+/*
+ * arrow.less - CSS arrows mixin
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License as
+ * published by the Free Software Foundation; either version 2 of
+ * the License, or (at your option) any later version.
+ *
+ * @author Jan-Hendrik Willms <tleilax+studip@gmail.com>
+ * @license http://www.gnu.org/licenses/gpl-2.0.html GPL version 2
+ * @category Stud.IP
+ * @since 2.4
+ */
#pluginmarket_galery_view {
- max-height: 500px;
- overflow: auto;
+ max-height: 500px;
+ overflow: auto;
}
.pluginmarket_galery {
- list-style-type: none;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: center;
- align-items: center;
+ list-style-type: none;
+ display: -ms-flexbox;
+ display: -webkit-box;
+ display: -webkit-box-flex;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ -moz-box-direction: normal;
+ -moz-box-orient: horizontal;
+ -webkit-box-orient: horizontal;
+ flex-direction: row;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ -moz-box-align: center;
+ align-items: center;
}
.pluginmarket_galery > .image {
- padding: 5px;
- border: 5px solid #eeeeee;
- margin: 5px;
+ padding: 5px;
+ border: 5px solid #eeeeee;
+ margin: 5px;
}
.pluginmarket_galery > .image img {
- display: block;
- max-height: 180px;
+ display: block;
+ max-height: 180px;
}
.pluginmarket_galery > .image input[type=checkbox] {
- display: none;
+ display: none;
}
.pluginmarket_galery > .image input[type=checkbox]:checked + * {
- opacity: 0.2;
+ opacity: 0.2;
}
-
.plugins_shortview {
- list-style-type: none;
- text-align: center;
+ list-style-type: none;
+ text-align: center;
}
-
.plugins_shortview > article {
- display: inline-block;
- margin: 7px;
- width: 250px;
- height: 260px;
- max-width: 250px;
- max-height: 260px;
- overflow: hidden;
-}
-
+ display: inline-block;
+ margin: 7px;
+ width: 250px;
+ height: 260px;
+ max-width: 250px;
+ max-height: 260px;
+ overflow: hidden;
+}
.plugins_shortview > article .image {
- margin: 4px;
- width: calc(100%-8px);
- height: 150px;
- background-position: center center;
- background-size: auto calc(100% - 6px);
- background-repeat: no-repeat;
- background-color: white;
- box-shadow: inset 0px 0px 4px rgba(0,0,0,0.3);
+ display: block;
+ margin: 4px;
+ height: 150px;
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-color: white;
+ box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.3);
}
.plugins_shortview > article .shortdescription {
- font-size: 0.9em;
- height: 70px;
- /*max-height: 70px; */
- overflow: hidden;
- margin-bottom: 0px;
+ font-size: 0.9em;
+ height: 70px;
+ /*max-height: 70px; */
+ overflow: hidden;
+ margin-bottom: 0px;
}
-
.plugins_shortview.new > article {
- -webkit-animation: scaling 700ms ease-out;
- -ms-animation: scaling 700ms ease-out;
- animation: scaling 700ms ease-out;
+ -webkit-animation: scaling 700ms ease-out;
+ -ms-animation: scaling 700ms ease-out;
+ animation: scaling 700ms ease-out;
}
-
-
-@keyframes scaling {
- from {
- opacity: 0.8;
- transform: scale(0.8,0.8) rotate(-3deg);
- }
- to {
- opacity: 1;
- transform: scale(1,1) rotate(0deg);
- }
-}
-
-/* Safari, Chrome and Opera > 12.1 */
-@-webkit-keyframes scaling {
- from {
- opacity: 0.8;
- transform: scale(0.8,0.8) rotate(-3deg);
- }
- to {
- opacity: 1;
- transform: scale(1,1) rotate(0deg);
- }
-}
-
-/* Internet Explorer */
-@-ms-keyframes scaling {
- from {
- opacity: 0.8;
- transform: scale(0.8,0.8) rotate(-3deg);
- }
- to {
- opacity: 1;
- transform: scale(1,1) rotate(0deg);
- }
-}
-
-/* Opera < 12.1 */
-@-o-keyframes scaling {
- from {
- opacity: 0.8;
- transform: scale(0.8,0.8) rotate(-3deg);
- }
- to {
- opacity: 1;
- transform: scale(1,1) rotate(0deg);
- }
-}
-
#tagcloud td {
- transition: font-size 0.5s;
+ -webkit-transition: font-size 0.5s;
+ -moz-transition: font-size 0.5s;
+ -o-transition: font-size 0.5s;
+ transition: font-size 0.5s;
}
#tagcloud td:hover {
- font-size: 1.2em;
- transition: font-size 0.5s;
+ font-size: 1.2em;
+ transition: font-size 0.5s;
}
-
-
.starscore {
- white-space: nowrap;
+ white-space: nowrap;
}
-
article.contentbox {
- border-color: #D0D7E3;
- border-style: solid;
- border-width: 1px;
- transition: all 300ms ease 0s;
- position: relative;
+ border: 1px solid #d0d7e3;
+ border-style: solid;
+ border-width: 1px;
+ -webkit-transition: all 300ms ease 0s;
+ -moz-transition: all 300ms ease 0s;
+ -o-transition: all 300ms ease 0s;
+ transition: all 300ms ease 0s;
+ position: relative;
}
-
article.contentbox header {
- width: 100%;
- background-color: #E7EBF1;
- color: #24437C;
- font-size: 12pt;
- font-weight: bold;
- text-align: left;
- line-height: 2em;
-}
-
+ width: 100%;
+ background-color: #e7ebf1;
+ color: #24437c;
+ font-size: 12pt;
+ font-weight: bold;
+ text-align: left;
+ line-height: 2em;
+}
article.contentbox h1 {
- padding: 5px;
- margin: 0px;
- color: #28497C;
- border-bottom: medium none;
- font-size: medium;
+ padding: 5px;
+ margin: 0px;
+ color: #28497c;
+ border-bottom: medium none;
+ font-size: medium;
}
-
article.contentbox footer {
- position: absolute;
- bottom: 0px;
- background-color: white;
- width: 100%;
- border-top-color: #D0D7E3;
- border-top-style: solid;
- border-top-width: 1px;
-}
\ No newline at end of file
+ position: absolute;
+ bottom: 0px;
+ background-color: white;
+ width: 100%;
+ border-top: 1px solid #d0d7e3;
+}
+@keyframes scaling {
+ from {
+ opacity: 0.8;
+ transform: scale(0.8, 0.8) rotate(-3deg);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1, 1) rotate(0deg);
+ }
+}
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes scaling {
+ from {
+ opacity: 0.8;
+ transform: scale(0.8, 0.8) rotate(-3deg);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1, 1) rotate(0deg);
+ }
+}
+/* Internet Explorer */
+@-ms-keyframes scaling {
+ from {
+ opacity: 0.8;
+ transform: scale(0.8, 0.8) rotate(-3deg);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1, 1) rotate(0deg);
+ }
+}
+/* Opera < 12.1 */
+@-o-keyframes scaling {
+ from {
+ opacity: 0.8;
+ transform: scale(0.8, 0.8) rotate(-3deg);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1, 1) rotate(0deg);
+ }
+}
diff --git a/assets/pluginmarket.less b/assets/pluginmarket.less
new file mode 100644
index 0000000..df6b592
--- /dev/null
+++ b/assets/pluginmarket.less
@@ -0,0 +1,161 @@
+#pluginmarket_galery_view {
+ max-height: 500px;
+ overflow: auto;
+}
+.pluginmarket_galery {
+ list-style-type: none;
+ .flex();
+ .flex-direction-row();
+ .flex-wrap(wrap);
+ .flex-justify-content(center);
+ .flex-align-items(center);
+
+ > .image {
+ padding: 5px;
+ border: 5px solid #eeeeee;
+ margin: 5px;
+
+ img {
+ display: block;
+ max-height: 180px;
+ }
+ input[type=checkbox] {
+ display: none;
+
+ &:checked + * {
+ opacity: 0.2;
+ }
+ }
+ }
+}
+.plugins_shortview {
+ list-style-type: none;
+ text-align: center;
+
+ > article {
+ display: inline-block;
+ margin: 7px;
+ width: 250px;
+ height: 260px;
+ max-width: 250px;
+ max-height: 260px;
+ overflow: hidden;
+
+ .image {
+ display: block;
+ margin: 4px;
+ height: 150px;
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-color: white;
+ box-shadow: inset 0px 0px 4px fadeout(#000, 70%);
+ }
+
+ .shortdescription {
+ font-size: 0.9em;
+ height: 70px;
+ /*max-height: 70px; */
+ overflow: hidden;
+ margin-bottom: 0px;
+ }
+ }
+
+ &.new > article {
+ -webkit-animation: scaling 700ms ease-out;
+ -ms-animation: scaling 700ms ease-out;
+ animation: scaling 700ms ease-out;
+ }
+}
+
+#tagcloud td {
+ .transition(font-size 0.5s);
+
+ &:hover {
+ font-size: 1.2em;
+ transition: font-size 0.5s;
+ }
+}
+
+.starscore {
+ white-space: nowrap;
+}
+
+article.contentbox {
+ border: 1px solid @content-color-40;
+ border-style: solid;
+ border-width: 1px;
+ .transition(all 300ms ease 0s);
+ position: relative;
+
+ header {
+ width: 100%;
+ background-color: @content-color-20;
+ color: @brand-color-dark;
+ font-size: 12pt;
+ font-weight: bold;
+ text-align: left;
+ line-height: 2em;
+ }
+ h1 {
+ padding: 5px;
+ margin: 0px;
+ color: @base-color;
+ border-bottom: medium none;
+ font-size: medium;
+ }
+ footer {
+ position: absolute;
+ bottom: 0px;
+ background-color: white;
+ width: 100%;
+ border-top: 1px solid @content-color-40;
+ }
+}
+
+@keyframes scaling {
+ from {
+ opacity: 0.8;
+ transform: scale(0.8,0.8) rotate(-3deg);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1,1) rotate(0deg);
+ }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes scaling {
+ from {
+ opacity: 0.8;
+ transform: scale(0.8,0.8) rotate(-3deg);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1,1) rotate(0deg);
+ }
+}
+
+/* Internet Explorer */
+@-ms-keyframes scaling {
+ from {
+ opacity: 0.8;
+ transform: scale(0.8,0.8) rotate(-3deg);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1,1) rotate(0deg);
+ }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes scaling {
+ from {
+ opacity: 0.8;
+ transform: scale(0.8,0.8) rotate(-3deg);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1,1) rotate(0deg);
+ }
+}
diff --git a/controllers/approving.php b/controllers/approving.php
index 8c348f5..3732a70 100644
--- a/controllers/approving.php
+++ b/controllers/approving.php
@@ -12,7 +12,6 @@ class ApprovingController extends PluginController {
Navigation::activateItem("/pluginmarket/approving");
$this->set_content_type('text/html;charset=windows-1252');
- PageLayout::addStylesheet($this->plugin->getPluginURL()."/assets/pluginmarket.css");
}
public function overview_action()
diff --git a/controllers/myplugins.php b/controllers/myplugins.php
index 5c511d6..198e27a 100644
--- a/controllers/myplugins.php
+++ b/controllers/myplugins.php
@@ -9,7 +9,6 @@ class MypluginsController extends PluginController {
Navigation::activateItem("/pluginmarket/myplugins");
$this->set_content_type('text/html;charset=windows-1252');
- PageLayout::addStylesheet($this->plugin->getPluginURL()."/assets/pluginmarket.css");
}
public function overview_action()
diff --git a/controllers/presenting.php b/controllers/presenting.php
index b82e906..bdb52cf 100644
--- a/controllers/presenting.php
+++ b/controllers/presenting.php
@@ -16,10 +16,9 @@ class PresentingController extends PluginController {
$_SESSION['last_pluginmarket_visit'] = time();
$config->store("last_pluginmarket_visit", $_SESSION['last_pluginmarket_visit']);
}
- PageLayout::addStylesheet($this->plugin->getPluginURL()."/assets/pluginmarket.css");
PageLayout::addScript($this->plugin->getPluginURL()."/assets/studiptable.js");
PageLayout::addScript($this->plugin->getPluginURL()."/assets/pluginmarket.js");
-
+
$statement = DBManager::get()->prepare("
SELECT pluginmarket_tags.tag, COUNT(*) AS number
FROM pluginmarket_tags
@@ -33,21 +32,21 @@ class PresentingController extends PluginController {
");
$statement->execute();
$this->tags = $statement->fetchAll(PDO::FETCH_ASSOC);
-
+
// Set view
$_SESSION['pluginmarket']['view'] = Request::get('view') ? : $_SESSION['pluginmarket']['view'];
if (!isset($_SESSION['pluginmarket']['view'])) {
$_SESSION['pluginmarket']['view'] = 'tiles';
}
-
+
// Sidebar
$sidebar = Sidebar::Get();
-
+
// Create search widget
$searchWidget = new SearchWidget($this->url_for('presenting/all'));
$searchWidget->addNeedle(_('Suche'), 'search', true);
$sidebar->addWidget($searchWidget);
-
+
// Create cloud
$tagWidget = new LinkCloudWidget();
$tagWidget->setTitle(_("Beliebte Tags"));
@@ -55,7 +54,7 @@ class PresentingController extends PluginController {
$tagWidget->addLink($tag['tag'], $this->url_for('presenting/all', array('tag' => $tag['tag'])), $tag['number']);
}
$sidebar->addWidget($tagWidget);
-
+
// Create view widget
if ($action != 'details') {
$viewWidget = new ViewsWidget();
@@ -63,7 +62,7 @@ class PresentingController extends PluginController {
$viewWidget->addLink(_('Liste'), URLHelper::getLink('', array('view' => 'list')))->setActive($_SESSION['pluginmarket']['view'] == 'list');
$sidebar->addWidget($viewWidget);
}
-
+
}
public function overview_action() {
@@ -74,7 +73,7 @@ class PresentingController extends PluginController {
}
$this->plugins = MarketPlugin::findBySQL("publiclyvisible = 1 AND approved = 1 ORDER BY RAND() LIMIT 6");
-
+
$this->render_action('overview_'.$_SESSION['pluginmarket']['view']);
}
--
GitLab