You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cordova.apache.org by st...@apache.org on 2014/01/20 19:42:21 UTC
[31/32] git commit: Added in some more styling fixes. Added in CSS 3
mixins from Chris Coyier's blog. Added in fixes for home page to have the
utilize/contrib boxes and the plugins listed underneath
Added in some more styling fixes. Added in CSS 3 mixins from Chris Coyier's blog. Added in fixes for home page to have the utilize/contrib boxes and the plugins listed underneath
Project: http://git-wip-us.apache.org/repos/asf/cordova-registry-web/repo
Commit: http://git-wip-us.apache.org/repos/asf/cordova-registry-web/commit/9cc44953
Tree: http://git-wip-us.apache.org/repos/asf/cordova-registry-web/tree/9cc44953
Diff: http://git-wip-us.apache.org/repos/asf/cordova-registry-web/diff/9cc44953
Branch: refs/heads/refactor
Commit: 9cc4495371317aa948335d5b6def336910e2147b
Parents: 0384576
Author: Josh Bavari <jo...@raisemore.com>
Authored: Mon Jan 20 10:12:02 2014 -0600
Committer: Josh Bavari <jo...@raisemore.com>
Committed: Mon Jan 20 10:12:02 2014 -0600
----------------------------------------------------------------------
attachments/css/css_3_mixins.less | 139 ++++++++++++++++++++++++++++++
attachments/css/mixins.less | 2 +-
attachments/css/pages/home.less | 22 +++--
attachments/css/styles.css | 48 +++++++++--
attachments/css/styles.less | 1 +
attachments/index.html | 4 +-
attachments/partials/views/home.html | 42 +++++++--
7 files changed, 233 insertions(+), 25 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/cordova-registry-web/blob/9cc44953/attachments/css/css_3_mixins.less
----------------------------------------------------------------------
diff --git a/attachments/css/css_3_mixins.less b/attachments/css/css_3_mixins.less
new file mode 100644
index 0000000..c64071f
--- /dev/null
+++ b/attachments/css/css_3_mixins.less
@@ -0,0 +1,139 @@
+/* From css-tricks.com - http://css-tricks.com/snippets/css/useful-css3-less-mixins/ */
+.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
+ text-shadow: @string;
+}
+.box-shadow (@string) {
+ -webkit-box-shadow: @string;
+ -moz-box-shadow: @string;
+ box-shadow: @string;
+}
+.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
+ -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
+ -moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
+ box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
+}
+.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
+ -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
+ -moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
+ box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
+}
+
+.box-sizing (@type: border-box) {
+ -webkit-box-sizing: @type;
+ -moz-box-sizing: @type;
+ box-sizing: @type;
+}
+
+.border-radius (@radius: 5px) {
+ -webkit-border-radius: @radius;
+ -moz-border-radius: @radius;
+ border-radius: @radius;
+
+ -moz-background-clip: padding;
+ -webkit-background-clip: padding-box;
+ background-clip: padding-box;
+}
+.border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
+ -webkit-border-top-right-radius: @topright;
+ -webkit-border-bottom-right-radius: @bottomright;
+ -webkit-border-bottom-left-radius: @bottomleft;
+ -webkit-border-top-left-radius: @topleft;
+
+ -moz-border-radius-topright: @topright;
+ -moz-border-radius-bottomright: @bottomright;
+ -moz-border-radius-bottomleft: @bottomleft;
+ -moz-border-radius-topleft: @topleft;
+
+ border-top-right-radius: @topright;
+ border-bottom-right-radius: @bottomright;
+ border-bottom-left-radius: @bottomleft;
+ border-top-left-radius: @topleft;
+
+ -moz-background-clip: padding;
+ -webkit-background-clip: padding-box;
+ background-clip: padding-box;
+}
+
+.opacity (@opacity: 0.5) {
+ -webkit-opacity: @opacity;
+ -moz-opacity: @opacity;
+ opacity: @opacity;
+}
+
+.gradient (@startColor: #eee, @endColor: white) {
+ background-color: @startColor;
+ background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
+ background: -webkit-linear-gradient(top, @startColor, @endColor);
+ background: -moz-linear-gradient(top, @startColor, @endColor);
+ background: -ms-linear-gradient(top, @startColor, @endColor);
+ background: -o-linear-gradient(top, @startColor, @endColor);
+}
+.horizontal-gradient (@startColor: #eee, @endColor: white) {
+ background-color: @startColor;
+ background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
+ background-image: -webkit-linear-gradient(left, @startColor, @endColor);
+ background-image: -moz-linear-gradient(left, @startColor, @endColor);
+ background-image: -ms-linear-gradient(left, @startColor, @endColor);
+ background-image: -o-linear-gradient(left, @startColor, @endColor);
+}
+
+.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
+ -webkit-animation: @name @duration @delay @ease;
+ -moz-animation: @name @duration @delay @ease;
+ -ms-animation: @name @duration @delay @ease;
+}
+
+.transition (@transition) {
+ -webkit-transition: @transition;
+ -moz-transition: @transition;
+ -ms-transition: @transition;
+ -o-transition: @transition;
+}
+.transform(@string){
+ -webkit-transform: @string;
+ -moz-transform: @string;
+ -ms-transform: @string;
+ -o-transform: @string;
+}
+.scale (@factor) {
+ -webkit-transform: scale(@factor);
+ -moz-transform: scale(@factor);
+ -ms-transform: scale(@factor);
+ -o-transform: scale(@factor);
+}
+.rotate (@deg) {
+ -webkit-transform: rotate(@deg);
+ -moz-transform: rotate(@deg);
+ -ms-transform: rotate(@deg);
+ -o-transform: rotate(@deg);
+}
+.skew (@deg, @deg2) {
+ -webkit-transform: skew(@deg, @deg2);
+ -moz-transform: skew(@deg, @deg2);
+ -ms-transform: skew(@deg, @deg2);
+ -o-transform: skew(@deg, @deg2);
+}
+.translate (@x, @y:0) {
+ -webkit-transform: translate(@x, @y);
+ -moz-transform: translate(@x, @y);
+ -ms-transform: translate(@x, @y);
+ -o-transform: translate(@x, @y);
+}
+.translate3d (@x, @y: 0, @z: 0) {
+ -webkit-transform: translate3d(@x, @y, @z);
+ -moz-transform: translate3d(@x, @y, @z);
+ -ms-transform: translate3d(@x, @y, @z);
+ -o-transform: translate3d(@x, @y, @z);
+}
+.perspective (@value: 1000) {
+ -webkit-perspective: @value;
+ -moz-perspective: @value;
+ -ms-perspective: @value;
+ perspective: @value;
+}
+.transform-origin (@x:center, @y:center) {
+ -webkit-transform-origin: @x @y;
+ -moz-transform-origin: @x @y;
+ -ms-transform-origin: @x @y;
+ -o-transform-origin: @x @y;
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/cordova-registry-web/blob/9cc44953/attachments/css/mixins.less
----------------------------------------------------------------------
diff --git a/attachments/css/mixins.less b/attachments/css/mixins.less
index 4255aeb..cd9774a 100644
--- a/attachments/css/mixins.less
+++ b/attachments/css/mixins.less
@@ -1,4 +1,4 @@
-/* ----- mixins ------ */
+/* ----- mixins made locally ------ */
.border-radius( @radius: 8px ) {
-moz-border-radius: @radius;
http://git-wip-us.apache.org/repos/asf/cordova-registry-web/blob/9cc44953/attachments/css/pages/home.less
----------------------------------------------------------------------
diff --git a/attachments/css/pages/home.less b/attachments/css/pages/home.less
index 68dfbf8..cb2febf 100644
--- a/attachments/css/pages/home.less
+++ b/attachments/css/pages/home.less
@@ -14,9 +14,13 @@
padding-top: 120px;
}
+.grid-gradient {
+ .gradient(transparent, #EDEDED);
+}
+
.home-browse-all {
display: block;
- margin: 20px auto;
+ margin: 40px auto 20px auto;
width: 280px;
font-size: 20px;
}
@@ -32,13 +36,15 @@
text-align: center;
}
-.home-plugin-listing {
+.home-plugin-listing-headers {
border-bottom: dotted 2px @border-faded-color;
+ margin: 20px auto;
text-align: center;
h3 {
+ color: @header-bg-color;
font-weight: bolder;
- font-size: 25px;
+ font-size: 30px;
margin: 0;
}
@@ -47,6 +53,11 @@
}
}
+.home-plugin-listing {
+ text-align: left;
+ margin: 20px auto;
+}
+
.call-to-action-panes {
text-align: center;
}
@@ -66,6 +77,7 @@
div {
color: #F0F0F0;
font-size: 45px;
+ left: 13%;
position: absolute;
top: 40%;
}
@@ -76,7 +88,6 @@
}
.call-to-action-pane-left-triangle {
- width: 4%;
height: 100%;
overflow: hidden;
right: 0px;
@@ -91,7 +102,6 @@
}
.call-to-action-pane-right-triangle {
- width: 4%;
height: 100%;
overflow: hidden;
left: 0px;
@@ -100,7 +110,7 @@
width: 0px;
height: 0px;
border-style: solid;
- border-width: 105px 0px 105px 18px;
+ border-width: 105px 0 105px 18px;
border-color: transparent transparent transparent #ffffff;
}
}
http://git-wip-us.apache.org/repos/asf/cordova-registry-web/blob/9cc44953/attachments/css/styles.css
----------------------------------------------------------------------
diff --git a/attachments/css/styles.css b/attachments/css/styles.css
index 2ab9998..a5d3b45 100644
--- a/attachments/css/styles.css
+++ b/attachments/css/styles.css
@@ -3293,6 +3293,10 @@ a.dep-link {
font-size: 1.5em;
text-align: center;
text-decoration: none;
+ -webkit-transition: background;
+ -moz-transition: background;
+ -ms-transition: background;
+ -o-transition: background;
-webkit-transition: background 0.25s linear;
-moz-transition: background 0.25s linear;
transition: background 0.25s linear;
@@ -3325,6 +3329,9 @@ a.dep-link {
#tabs span {
background: #fff;
padding: 2% 2%;
+ -moz-background-clip: padding;
+ -webkit-background-clip: padding-box;
+ background-clip: padding-box;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
@@ -3344,6 +3351,10 @@ a.dep-link {
margin: 0 10px 0 0;
}
#tabs a {
+ -webkit-transition: background-color;
+ -moz-transition: background-color;
+ -ms-transition: background-color;
+ -o-transition: background-color;
-webkit-transition: background-color 0.25s linear;
-moz-transition: background-color 0.25s linear;
transition: background-color 0.25s linear;
@@ -3411,6 +3422,10 @@ a.dep-link {
color: #fff;
text-align: center;
text-decoration: none;
+ -webkit-transition: background;
+ -moz-transition: background;
+ -ms-transition: background;
+ -o-transition: background;
-webkit-transition: background 0.25s linear;
-moz-transition: background 0.25s linear;
transition: background 0.25s linear;
@@ -3628,6 +3643,10 @@ div.left {
padding: 20px 0;
}
#header a {
+ -webkit-transition: color;
+ -moz-transition: color;
+ -ms-transition: color;
+ -o-transition: color;
-webkit-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
transition: color 0.25s linear;
@@ -3730,9 +3749,17 @@ div.left {
.discover-message-container {
padding-top: 120px;
}
+.grid-gradient {
+ background-color: transparent;
+ background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#ededed));
+ background: -webkit-linear-gradient(top, transparent, #ededed);
+ background: -moz-linear-gradient(top, transparent, #ededed);
+ background: -ms-linear-gradient(top, transparent, #ededed);
+ background: -o-linear-gradient(top, transparent, #ededed);
+}
.home-browse-all {
display: block;
- margin: 20px auto;
+ margin: 40px auto 20px auto;
width: 280px;
font-size: 20px;
}
@@ -3745,18 +3772,24 @@ div.left {
margin: 1px;
text-align: center;
}
-.home-plugin-listing {
+.home-plugin-listing-headers {
border-bottom: dotted 2px #bfb7b9;
+ margin: 20px auto;
text-align: center;
}
-.home-plugin-listing h3 {
+.home-plugin-listing-headers h3 {
+ color: #3b4854;
font-weight: bolder;
- font-size: 25px;
+ font-size: 30px;
margin: 0;
}
-.home-plugin-listing div {
+.home-plugin-listing-headers div {
font-size: 14px;
}
+.home-plugin-listing {
+ text-align: left;
+ margin: 20px auto;
+}
.call-to-action-panes {
text-align: center;
}
@@ -3774,6 +3807,7 @@ div.left {
.call-to-action-mid-spacer div {
color: #F0F0F0;
font-size: 45px;
+ left: 13%;
position: absolute;
top: 40%;
}
@@ -3782,7 +3816,6 @@ div.left {
position: absolute;
}
.call-to-action-pane-left-triangle {
- width: 4%;
height: 100%;
overflow: hidden;
right: 0px;
@@ -3795,7 +3828,6 @@ div.left {
border-color: transparent #ffffff transparent transparent;
}
.call-to-action-pane-right-triangle {
- width: 4%;
height: 100%;
overflow: hidden;
left: 0px;
@@ -3804,7 +3836,7 @@ div.left {
width: 0px;
height: 0px;
border-style: solid;
- border-width: 105px 0px 105px 18px;
+ border-width: 105px 0 105px 18px;
border-color: transparent transparent transparent #ffffff;
}
.call-to-action-img {
http://git-wip-us.apache.org/repos/asf/cordova-registry-web/blob/9cc44953/attachments/css/styles.less
----------------------------------------------------------------------
diff --git a/attachments/css/styles.less b/attachments/css/styles.less
index 56c2ae5..3ed329e 100644
--- a/attachments/css/styles.less
+++ b/attachments/css/styles.less
@@ -1,3 +1,4 @@
+@import (reference) "css_3_mixins.less";
@import (reference) "mixins.less";
@import "variables.less";
http://git-wip-us.apache.org/repos/asf/cordova-registry-web/blob/9cc44953/attachments/index.html
----------------------------------------------------------------------
diff --git a/attachments/index.html b/attachments/index.html
index f7ee6d0..b3530ed 100644
--- a/attachments/index.html
+++ b/attachments/index.html
@@ -22,14 +22,14 @@
<div id="header" class="topcoat-grid">
<div class="header-content topcoat-grid__row">
- <div class="topcoat-grid__column--5 topcoat-grid__offset--1">
+ <div class="topcoat-grid__column--5 topcoat-grid__offset--2">
<a href="/" title="Home" class="logo-link">
<div class="registry-logo left pluggy-logo top-logo"></div>
<div class="top-project-text">Apache Cordova</div>
<div class="top-plugins-registry-text">Plugins Registry</div>
</a>
</div>
- <div class="topcoat-grid__column--5 topcoat-grid__offset--1">
+ <div class="topcoat-grid__column--4 topcoat-grid__offset--1">
<div class="topcoat-grid header-links">
<div class="topcoat-grid__column--12">
<div class="search-container" ng-controller="SearchController">
http://git-wip-us.apache.org/repos/asf/cordova-registry-web/blob/9cc44953/attachments/partials/views/home.html
----------------------------------------------------------------------
diff --git a/attachments/partials/views/home.html b/attachments/partials/views/home.html
index dd4f50f..e89e359 100644
--- a/attachments/partials/views/home.html
+++ b/attachments/partials/views/home.html
@@ -11,7 +11,7 @@
<div class="topcoat-grid__column--2"></div>
</div>
- <div class="topcoat-grid__row">
+ <div class="topcoat-grid__row grid-gradient">
<div class="topcoat-grid__column--10 topcoat-grid__offset--1">
<a href="/#/viewAll" class="home-browse-all">Browse all {{totalPlugins}} plugins</a>
</div>
@@ -73,24 +73,50 @@
</div>
</div>
- <div class="topcoat-grid__row home-plugin-listing">
- <div class="topcoat-grid__column--6">
+ <div class="topcoat-grid__row home-plugin-listing-headers">
+ <div class="topcoat-grid__column--4 topcoat-grid__offset--2">
<h3>Most Downloaded</h3>
</div>
- <div class="topcoat-grid__column--6">
+ <div class="call-to-action-mid-spacer">
+ </div>
+ <div class="topcoat-grid__column--4">
<h3>Last Updated</h3>
</div>
</div>
<div class="topcoat-grid__row home-plugin-listing">
- <div class="topcoat-grid__column--6">
+ <div class="topcoat-grid__column--4 topcoat-grid__offset--2">
<div ng-repeat="plugin in mostDownloaded">
- {{plugin.download_count}} {{plugin.bundle_id}}
+ <div class="topcoat-grid__row">
+ <div class="topcoat-grid__column--1">
+ {{plugin.download_count}}
+ </div>
+ <div class="topcoat-grid__column--1">
+ </div>
+ <div class="topcoat-grid__column--10">
+ <a href="/#/package/{{plugin.bundle_id}}">
+ {{plugin.bundle_id}}
+ </a>
+ </div>
+ </div>
</div>
</div>
- <div class="topcoat-grid__column--6">
+ <div class="call-to-action-mid-spacer">
+ </div>
+ <div class="topcoat-grid__column--4">
<div ng-repeat="plugin in lastUpdated">
- {{plugin.updated}} {{plugin.bundle_id}}
+ <div class="topcoat-grid__row">
+ <div class="topcoat-grid__column--1">
+ {{plugin.updated}}
+ </div>
+ <div class="topcoat-grid__column--1">
+ </div>
+ <div class="topcoat-grid__column--10">
+ <a href="/#/package/{{plugin.bundle_id}}">
+ {{plugin.bundle_id}}
+ </a>
+ </div>
+ </div>
</div>
</div>
</div>