Permalink
Browse files

Fixed root module CSS conflicts

Multiple root modules css files could conflict with each other due to
ambiguous rule definitions. Now each core module will define a css
class that is prefixed.
  • Loading branch information...
1 parent 18097dc commit 0cc773884703ed22e9040fa38b9b6be929792947 @darkspotinthecorner committed Dec 5, 2011
Showing with 243 additions and 154 deletions.
  1. +6 −2 DarkTip.js
  2. +83 −16 modules/github.css
  3. +6 −0 modules/github.js
  4. +18 −17 modules/github.user.js
  5. +98 −98 modules/wow.css
  6. +6 −0 modules/wow.js
  7. +16 −16 modules/youtube.css
  8. +6 −0 modules/youtube.js
  9. +4 −0 test.github.html
  10. +0 −5 test.wow.html
View
@@ -710,10 +710,14 @@ window.DarkTip = {
},
'attachTooltip': function(element, content, module){
- var width = this.read(module, 'layout.width.core');
+ var width = this.read(module, 'layout.width.core');
if(width == undefined) {
width = 300;
}
+ var cssclass = this.read(module, 'layout.css.class');
+ if(cssclass == undefined) {
+ cssclass = '';
+ }
this.jq(element).qtip({
'overwrite': false,
'show': {
@@ -743,7 +747,7 @@ window.DarkTip = {
'hide' :'mouseout',
'style': {
'width' : width+'px',
- 'classes': 'darktip-tooltip ui-tooltip-cluetip'
+ 'classes': ('ui-tooltip-cluetip darktip-tooltip ' + cssclass)
}
});
},
View
@@ -26,7 +26,7 @@
/* --- Override of 280 max-width -------------------------------------------- */
-.darktip-tooltip {
+.darktip-tooltip-github {
max-width: 750px;
min-width: 200px;
}
@@ -36,28 +36,28 @@
* -------------------------------------------------------------------------- */
.ajaxloading,
-.darktip-tooltip {
+.darktip-tooltip-github {
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 15px;
}
-.darktip-tooltip .ui-tooltip-titlebar,
-.darktip-tooltip .ui-tooltip-content {
+.darktip-tooltip-github .ui-tooltip-titlebar,
+.darktip-tooltip-github .ui-tooltip-content {
border-color: #333;
color: #fff;
}
-.darktip-tooltip .ui-tooltip-content {
+.darktip-tooltip-github .ui-tooltip-content {
background-color: #000;
background-color: rgba(0, 0, 0, 0.85);
}
-.darktip-tooltip .tooltip-404 {
+.darktip-tooltip-github .tooltip-404 {
padding:3 px;
}
-.darktip-tooltip .tooltip-404 .title {
+.darktip-tooltip-github .tooltip-404 .title {
font-size: 16px;
font-weight: bold;
border-bottom: 1px solid #444;
@@ -66,45 +66,112 @@
color: #FF3333;
}
-.darktip-tooltip .tooltip-404 .title .sub {
+.darktip-tooltip-github .tooltip-404 .title .sub {
font-size: 14px;
color: #808080;
}
-.darktip-tooltip .tooltip-404 div .value {
+.darktip-tooltip-github .tooltip-404 div .value {
color: #FFB100;
}
+.darktip-tooltip-github .row {
+ padding-bottom: 1px;
+}
+
+.darktip-tooltip-github .row.padded {
+ padding: 2px 4px;
+}
+
+.darktip-tooltip-github div {
+ position: relative;
+}
+
/* --------------------------------------------------------------------------
* Simple / Extended Rules
* -------------------------------------------------------------------------- */
-.darktip-tooltip div.darktip-only-s {
+.darktip-tooltip-github div.darktip-only-s {
display: block;
}
-.darktip-tooltip span.darktip-only-s {
+.darktip-tooltip-github span.darktip-only-s {
display: inline;
}
-body.darktip-extended-mode .darktip-tooltip .darktip-only-s {
+body.darktip-extended-mode .darktip-tooltip-github .darktip-only-s {
display: none;
}
-.darktip-tooltip .darktip-only-x {
+.darktip-tooltip-github .darktip-only-x {
display: none;
}
-body.darktip-extended-mode .darktip-tooltip div.darktip-only-x {
+body.darktip-extended-mode .darktip-tooltip-github div.darktip-only-x {
display: block;
}
-body.darktip-extended-mode .darktip-tooltip span.darktip-only-x {
+body.darktip-extended-mode .darktip-tooltip-github span.darktip-only-x {
display: inline;
}
-.darktip-tooltip .info-meta {
+.darktip-tooltip-github .info-meta {
color: #777;
padding-top: 6px;
padding-bottom: 3px;
}
+
+/* --------------------------------------------------------------------------
+ * More Rules
+ * -------------------------------------------------------------------------- */
+
+.darktip-tooltip-github .avatar {
+ float: left;
+ border: 4px solid rgba(0, 0, 0, 0.33);
+}
+
+.darktip-tooltip-github .col-98 {
+ padding: 4px 4px 4px 98px;
+}
+
+.darktip-tooltip-github .pos-right {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+/* --------------------------------------------------------------------------
+ * Specific Elements Rules
+ * -------------------------------------------------------------------------- */
+
+.darktip-tooltip-github .headline {
+ font-size: 14px;
+ font-weight: bold;
+ border-bottom: 1px solid #444;
+ margin-bottom: 5px;
+ padding-bottom: 3px;
+}
+
+.darktip-tooltip-github .headline-right {
+ float: right;
+ font-size: 13px;
+ padding-left: 10px;
+}
+
+.darktip-tooltip-github .realname {
+ color: #999;
+}
+
+.darktip-tooltip-github .username {
+ color: #ddf;
+}
+
+.darktip-tooltip-github label {
+ color: #db9;
+}
+
+.darktip-tooltip-github .bio {
+ font-style: italic;
+ color: #999;
+}
+
View
@@ -9,6 +9,12 @@ DarkTip.registerModule('github', {
'maps': {
},
+ 'layout': {
+ 'css': {
+ 'class': 'darktip-tooltip-github'
+ }
+ },
+
'validateData': function(data) {
if(typeof data === 'undefined') {
return false;
@@ -43,30 +43,31 @@ DarkTip.registerModule('github.user', {
'layout': {
'width': {
- 'core': 250
+ 'core': 350
}
},
'templates': {
'core':(
'<div class="tooltip-github-user">' +
- '<div class="headline">' +
- '<div class="avatar"><img src="<%= this["avatar_url"] %>" alt="<%= this["login"] %>" title="<%= this["login"] %>" /></div>' +
- '<div class="username"><%= this["login"] %><% if(this["name"]) { %> (<%= this["name"] %>)<% } %></div>' +
+ '<div class="avatar"><img src="<%= this["avatar_url"] %>" alt="<%= this["login"] %>" title="<%= this["login"] %>" /></div>' +
+ '<div class="col-98">' +
+ '<% if(this["name"]) { %><div class="headline-right realname "><%= this["name"] %></div><% } %>' +
+ '<div class="row headline username"><%= this["login"] %></div>' +
+ '<div class="githubbed">' +
+ '<% if(this["followers"]) { %><div class="followers"><label><%= this._loc("label.followers") %></label> <%= this["followers"] %></div><% } %>' +
+ '<% if(this["following"]) { %><div class="following"><label><%= this._loc("label.following") %></label> <%= this["following"] %></div><% } %>' +
+ '<% if(this["public_repos"]) { %><div class="public_repos"><label><%= this._loc("label.public_repos") %></label> <%= this["public_repos"] %></div><% } %>' +
+ '<% if(this["public_gists"]) { %><div class="public_gists"><label><%= this._loc("label.public_gists") %></label> <%= this["public_gists"] %></div><% } %>' +
+ '</div>' +
+ '<div class="personals">' +
+ '<% if(this["email"]) { %><div class="email"><label><%= this._loc("label.email") %></label> <%= this["email"] %></div><% } %>' +
+ '<% if(this["blog"]) { %><div class="blog"><label><%= this._loc("label.blog") %></label> <%= this["blog"] %></div><% } %>' +
+ '<% if(this["company"]) { %><div class="company"><label><%= this._loc("label.company") %></label> <%= this["company"] %></div><% } %>' +
+ '<% if(this["location"]) { %><div class="location"><label><%= this._loc("label.location") %></label> <%= this["location"] %></div><% } %>' +
+ '</div>' +
'</div>' +
- '<div class="githubbed">' +
- '<% if(this["followers"]) { %><div class="followers"><%= this._loc("label.followers") %> <%= this["followers"] %></div><% } %>' +
- '<% if(this["following"]) { %><div class="following"><%= this._loc("label.following") %> <%= this["following"] %></div><% } %>' +
- '<% if(this["public_repos"]) { %><div class="public_repos"><%= this._loc("label.public_repos") %> <%= this["public_repos"] %></div><% } %>' +
- '<% if(this["public_gists"]) { %><div class="public_gists"><%= this._loc("label.public_gists") %> <%= this["public_gists"] %></div><% } %>' +
- '</div>' +
- '<div class="personals">' +
- '<% if(this["email"]) { %><div class="email"><%= this._loc("label.email") %> <%= this["email"] %></div><% } %>' +
- '<% if(this["blog"]) { %><div class="blog"><%= this._loc("label.blog") %> <%= this["blog"] %></div><% } %>' +
- '<% if(this["company"]) { %><div class="company"><%= this._loc("label.company") %> <%= this["company"] %></div><% } %>' +
- '<% if(this["location"]) { %><div class="location"><%= this._loc("label.location") %> <%= this["location"] %></div><% } %>' +
- '</div>' +
- '<% if(this["bio"]) { %><div class="bio"><%= this["bio"] %></div><% } %>' +
+ '<% if(this["bio"]) { %><div class="row bio"><%= this["bio"] %></div><% } %>' +
'</div>'
),
'404':(
Oops, something went wrong.

0 comments on commit 0cc7738

Please sign in to comment.