Infrastructure/verdaccio
0
Fork 0
mirror of https://github.com/verdaccio/verdaccio.git synced 2024-12-16 21:56:25 -05:00
Code Issues Activity

web-gui/updating display, layout, and styling

Browse source
This commit is contained in:
Alex Vernacchia 2014-10-06 17:37:23 -04:00
parent d38606f409
commit 326c7355ed
9 changed files with 343 additions and 277 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

237
lib/GUI/css/main.less
View file

@ -7,15 +7,27 @@
body {
margin: 0;
font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
* {
box-sizing: border-box;
}
}
a, a:visited {
a {
text-decoration: none;
color: #0D5AFF;
&:visited {
text-decoration: none;
color: #0D5AFF;
}
&:hover {
text-decoration: underline;
}
}
a:hover {
text-decoration: underline;
.npm-red {
color: #cc3d33;
}
.center {
@ -24,35 +36,147 @@ a:hover {
@contentWidth: 880px;
@headerPadding: 10px;
@headerHeight: 165px;
@headerLogoSetupHeight: 80px;
header {
position: fixed;
position: absolute;
height: @headerHeight;
width: 100%;
background: #FFF;
min-width: 600px;
top: 0;
left: 0;
right: 0;
background: #FFF;
z-index: 1;
#header-inner {
.header-container {
max-width: @contentWidth + @headerPadding*2;
margin: 0 auto;
height: @headerLogoSetupHeight;
&:first-child {
position: relative;
top: 18px;
}
&:last-child {
height: auto;
}
.logo-container {
width: 400px; // width of npm logo
float: left;
margin: 0 auto;
#logo {
height: @headerLogoSetupHeight;
display: block;
}
}
.registry-info {
float: right;
/*** Setup ***/
.setup {
background: #DB4141;
padding: 15px 20px;
display: inline-block;
.border-radius(4px);
text-align: left;
color: #FFF;
height: @headerLogoSetupHeight;
box-sizing: border-box;
line-height: 1.4em;
code {
font-family: Consolas, monaco, monospace;
}
}
}
@media (max-width: 540px) {
.registry-info,
.logo-container {
float: none;
}
}
}
}
#content {
max-width: @contentWidth;
position: absolute;
top: @headerHeight;
right: 0;
bottom: 0;
left: 0;
max-width: @contentWidth + @headerPadding * 2;
margin: 0 auto;
padding: 20px;
}
#logo {
margin: 20px auto 0;
width: 400px;
height: 200px;
display: block;
overflow: hidden;
overflow-y: auto;
/*** Package Entries ***/
.entry {
.transition(height .3s);
padding: 12px 15px 15px;
overflow: hidden;
border-bottom: 1px solid #E7E7E7;
&:last-child {
border-bottom: none;
}
&:nth-child( even ) {
background: #F3F3F3;
}
.title {
margin: 0 0 5px;
}
.description {
margin: 0 0 0 9px;
font-size: 13px;
}
.name:hover {
text-decoration: none;
}
.name:before {
margin: 0;
margin-left: -10px;
.transformTransition(.2s);
}
&.open .name:before {
.rotate(90deg);
}
.version {
font-size: 16px;
color: #666;
}
.author {
font-size: 16px;
float: right;
color: #666;
}
p {
margin: 0;
}
.readme {
font-size: 14px;
margin-top: 10px;
background: #FFF;
padding: 10px 12px;
.border-radius(3px);
}
}
}
h1 {
@ -63,21 +187,6 @@ h1 {
}
}
/*** Setup ***/
#setup {
background: #DB4141;
padding: 15px 20px;
display: inline-block;
.border-radius(4px);
text-align: left;
color: #FFF;
margin-top: 20px;
code {
font-family: Consolas, monaco, monospace;
}
}
/*** Search Box ***/
#search-form {
float: right;
@ -127,58 +236,6 @@ h2 {
padding: 0 @headerPadding 10px;
}
/*** Package Entries ***/
.entry {
background: #F3F3F3;
.border-radius(4px);
padding: 12px 15px 15px;
.transition(height .3s);
overflow: hidden;
margin-bottom: 12px;
h3 {
font-size: 24px;
margin: 0 0 10px;
}
.name:hover {
text-decoration: none;
}
.name:before {
margin: 0;
margin-left: -10px;
.transformTransition(.2s);
}
&.open .name:before {
.rotate(90deg);
}
.version {
font-size: 16px;
color: #666;
}
.author {
font-size: 16px;
float: right;
color: #666;
}
p {
margin: 0;
}
.readme {
font-size: 14px;
margin-top: 10px;
background: #FFF;
padding: 10px 12px;
.border-radius(3px);
}
}
/*** Search Results ***/
.state-search #all-packages {
display: none;
@ -203,3 +260,17 @@ h2 {
font-size: 1.2em;
}
}
.clearfix{
zoom:1;
&:before,
&:after {
content:"";
display:table;
}
&:after {
clear: both;
}
}

12
lib/GUI/entry.hbs
View file

@ -1,8 +1,10 @@
<article class='entry' data-name='{{ name }}' data-version='{{ version }}'>
<h3>
<a class='name icon-angle-right' href='javascript:void(0)'>{{ name }}</a>
<h3 class='title'>
<a class='name icon-angle-right npm-red' href='javascript:void(0)'>{{ name }}</a>
<small class='version'>v{{ version }}</small>
<div class='author'>By: {{ _npmUser.name }}</div>
<div class='author'>
<small>By: {{ _npmUser.name }}</small>
</div>
</h3>
<p>{{ description }}</p>
</article>
<p class="description">{{ description }}</p>
</article>

9
lib/GUI/index.hbs
View file

@ -10,18 +10,19 @@
</head>
<body>
<header>
<div id='header-inner'>
<div class='header-container clearfix'>
<div class="logo-container">
<a href='/'><img id='logo' alt='{{ name }}' title='{{ name }}' src='/-/logo' /></a>
</div>
<div class='center'>
<article id='setup'>
<div class='center registry-info'>
<article class='setup'>
<code>npm set registry {{ baseUrl }}</code><br>
<code>npm adduser --registry {{ baseUrl }}</code>
</article>
</div>
</div>
<div class="header-container">
<h2>
Available Packages:
<form id='search-form'>

22
lib/GUI/js/entry.js
View file

@ -17,7 +17,7 @@ $(function() {
$entry.css('height', $entry.attr('data-height') + 'px');
}, 0);
transitionComplete(function() {
transitionComplete(function() {
$entry.find('.readme').remove();
$entry.css('height', 'auto');
});
@ -28,17 +28,17 @@ $(function() {
$('.entry.open').each(function() {
var $entry = $(this);
$entry
.height($entry.height())
.removeClass('open');
.height($entry.outerHeight())
.removeClass('open');
setTimeout(function() {
$entry.css('height', $entry.attr('data-height') + 'px');
}, 0);
setTimeout(function() {
$entry.css('height', $entry.attr('data-height') + 'px');
}, 0);
transitionComplete(function() {
$entry.find('.readme').remove();
$entry.css('height', 'auto');
});
transitionComplete(function() {
$entry.find('.readme').remove();
$entry.css('height', 'auto');
});
});
//Add the open class
@ -68,4 +68,4 @@ $(function() {
});
}
});
});
});

29
lib/GUI/js/header.js
View file

@ -1,29 +0,0 @@
var $ = require('unopinionate').selector,
onScroll = require('onscroll');
$(function() {
var $header = $('header'),
$content = $('#content'),
bottomOffset = 52;
var scrollFunc = function(top) {
var limit = $header.outerHeight() - bottomOffset;
if(top < 0) {
$header.css('top', 0);
}
else if(top > limit) {
$header.css('top', -limit + 'px');
}
else {
$header.css('top', -top + 'px');
}
};
onScroll(scrollFunc);
scrollFunc();
$(window).resize(function() {
$content.css('margin-top', $header.outerHeight());
}).resize();
});

1
lib/GUI/js/main.js
View file

@ -1,3 +1,2 @@
require('./search');
require('./entry');
require('./header');

BIN
lib/static/logo.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

221
lib/static/main.css
View file

File diff suppressed because one or more lines are too long

89
lib/static/main.js
View file

@ -13,7 +13,7 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
if (helper = helpers.version) { stack1 = helper.call(depth0, {hash:{},data:data}); }
else { helper = (depth0 && depth0.version); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
buffer += escapeExpression(stack1)
+ "'>\n <h3>\n <a class='name icon-angle-right' href='javascript:void(0)'>";
+ "'>\n <h3 class='title'>\n <a class='name icon-angle-right npm-red' href='javascript:void(0)'>";
if (helper = helpers.name) { stack1 = helper.call(depth0, {hash:{},data:data}); }
else { helper = (depth0 && depth0.name); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
buffer += escapeExpression(stack1)
@ -21,16 +21,16 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
if (helper = helpers.version) { stack1 = helper.call(depth0, {hash:{},data:data}); }
else { helper = (depth0 && depth0.version); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
buffer += escapeExpression(stack1)
+ "</small>\n <div class='author'>By: "
+ "</small>\n <div class='author'>\n <small>By: "
+ escapeExpression(((stack1 = ((stack1 = (depth0 && depth0._npmUser)),stack1 == null || stack1 === false ? stack1 : stack1.name)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
+ "</div>\n </h3>\n <p>";
+ "</small>\n </div>\n </h3>\n <p class=\"description\">";
if (helper = helpers.description) { stack1 = helper.call(depth0, {hash:{},data:data}); }
else { helper = (depth0 && depth0.description); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
buffer += escapeExpression(stack1)
+ "</p>\n</article>";
+ "</p>\n</article>\n";
return buffer;
});
},{"handlebars/runtime":12}],2:[function(require,module,exports){
},{"handlebars/runtime":11}],2:[function(require,module,exports){
var $ = require('unopinionate').selector,
onClick = require('onclick'),
transitionComplete = require('transition-complete');
@ -50,7 +50,7 @@ $(function() {
$entry.css('height', $entry.attr('data-height') + 'px');
}, 0);
transitionComplete(function() {
transitionComplete(function() {
$entry.find('.readme').remove();
$entry.css('height', 'auto');
});
@ -61,17 +61,17 @@ $(function() {
$('.entry.open').each(function() {
var $entry = $(this);
$entry
.height($entry.height())
.removeClass('open');
.height($entry.outerHeight())
.removeClass('open');
setTimeout(function() {
$entry.css('height', $entry.attr('data-height') + 'px');
}, 0);
setTimeout(function() {
$entry.css('height', $entry.attr('data-height') + 'px');
}, 0);
transitionComplete(function() {
$entry.find('.readme').remove();
$entry.css('height', 'auto');
});
transitionComplete(function() {
$entry.find('.readme').remove();
$entry.css('height', 'auto');
});
});
//Add the open class
@ -102,41 +102,12 @@ $(function() {
}
});
});
},{"onclick":13,"transition-complete":15,"unopinionate":16}],3:[function(require,module,exports){
var $ = require('unopinionate').selector,
onScroll = require('onscroll');
$(function() {
var $header = $('header'),
$content = $('#content'),
bottomOffset = 52;
var scrollFunc = function(top) {
var limit = $header.outerHeight() - bottomOffset;
if(top < 0) {
$header.css('top', 0);
}
else if(top > limit) {
$header.css('top', -limit + 'px');
}
else {
$header.css('top', -top + 'px');
}
};
onScroll(scrollFunc);
scrollFunc();
$(window).resize(function() {
$content.css('margin-top', $header.outerHeight());
}).resize();
});
},{"onscroll":14,"unopinionate":16}],4:[function(require,module,exports){
},{"onclick":12,"transition-complete":14,"unopinionate":15}],3:[function(require,module,exports){
require('./search');
require('./entry');
require('./header');
},{"./entry":2,"./header":3,"./search":5}],5:[function(require,module,exports){
},{"./entry":2,"./search":4}],4:[function(require,module,exports){
var $ = require('unopinionate').selector,
template = require('../entry.hbs'),
onScroll = require('onscroll');
@ -208,7 +179,7 @@ $(function() {
});
},{"../entry.hbs":1,"onscroll":14,"unopinionate":16}],6:[function(require,module,exports){
},{"../entry.hbs":1,"onscroll":13,"unopinionate":15}],5:[function(require,module,exports){
"use strict";
/*globals Handlebars: true */
var base = require("./handlebars/base");
@ -241,7 +212,7 @@ var Handlebars = create();
Handlebars.create = create;
exports["default"] = Handlebars;
},{"./handlebars/base":7,"./handlebars/exception":8,"./handlebars/runtime":9,"./handlebars/safe-string":10,"./handlebars/utils":11}],7:[function(require,module,exports){
},{"./handlebars/base":6,"./handlebars/exception":7,"./handlebars/runtime":8,"./handlebars/safe-string":9,"./handlebars/utils":10}],6:[function(require,module,exports){
"use strict";
var Utils = require("./utils");
var Exception = require("./exception")["default"];
@ -422,7 +393,7 @@ exports.log = log;var createFrame = function(object) {
return obj;
};
exports.createFrame = createFrame;
},{"./exception":8,"./utils":11}],8:[function(require,module,exports){
},{"./exception":7,"./utils":10}],7:[function(require,module,exports){
"use strict";
var errorProps = ['description', 'fileName', 'lineNumber', 'message', 'name', 'number', 'stack'];
@ -451,7 +422,7 @@ function Exception(message, node) {
Exception.prototype = new Error();
exports["default"] = Exception;
},{}],9:[function(require,module,exports){
},{}],8:[function(require,module,exports){
"use strict";
var Utils = require("./utils");
var Exception = require("./exception")["default"];
@ -589,7 +560,7 @@ exports.program = program;function invokePartial(partial, name, context, helpers
exports.invokePartial = invokePartial;function noop() { return ""; }
exports.noop = noop;
},{"./base":7,"./exception":8,"./utils":11}],10:[function(require,module,exports){
},{"./base":6,"./exception":7,"./utils":10}],9:[function(require,module,exports){
"use strict";
// Build out our basic SafeString type
function SafeString(string) {
@ -601,7 +572,7 @@ SafeString.prototype.toString = function() {
};
exports["default"] = SafeString;
},{}],11:[function(require,module,exports){
},{}],10:[function(require,module,exports){
"use strict";
/*jshint -W004 */
var SafeString = require("./safe-string")["default"];
@ -678,12 +649,12 @@ exports.escapeExpression = escapeExpression;function isEmpty(value) {
}
exports.isEmpty = isEmpty;
},{"./safe-string":10}],12:[function(require,module,exports){
},{"./safe-string":9}],11:[function(require,module,exports){
// Create a simple path alias to allow browserify to resolve
// the runtime on a supported path.
module.exports = require('./dist/cjs/handlebars.runtime');
},{"./dist/cjs/handlebars.runtime":6}],13:[function(require,module,exports){
},{"./dist/cjs/handlebars.runtime":5}],12:[function(require,module,exports){
var $ = require('unopinionate').selector;
var $document = $(document),
@ -848,7 +819,7 @@ $(document).bind('mousedown', click._doAnywheres);
module.exports = click;
},{"unopinionate":16}],14:[function(require,module,exports){
},{"unopinionate":15}],13:[function(require,module,exports){
var $ = require('unopinionate').selector;
var bodyScrollers = [];
@ -871,7 +842,7 @@ var onScroll = function(callback) {
};
module.exports = onScroll;
},{"unopinionate":16}],15:[function(require,module,exports){
},{"unopinionate":15}],14:[function(require,module,exports){
(function(root) {
var callbacks = [];
@ -935,7 +906,7 @@ module.exports = onScroll;
}
})(this);
},{}],16:[function(require,module,exports){
},{}],15:[function(require,module,exports){
(function (global){
(function(root) {
var unopinionate = {
@ -962,4 +933,4 @@ module.exports = onScroll;
})(typeof window != 'undefined' ? window : global);
}).call(this,typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{}]},{},[4]);
},{}]},{},[3]);