Update layout.

This commit is contained in:
Lars Jung 2014-11-29 21:32:30 +01:00
parent b390b9fc42
commit 60b81a46ea
29 changed files with 136 additions and 355 deletions

View file

@ -1,96 +0,0 @@
-------------------------------
UBUNTU FONT LICENCE Version 1.0
-------------------------------
PREAMBLE
This licence allows the licensed fonts to be used, studied, modified and
redistributed freely. The fonts, including any derivative works, can be
bundled, embedded, and redistributed provided the terms of this licence
are met. The fonts and derivatives, however, cannot be released under
any other licence. The requirement for fonts to remain under this
licence does not require any document created using the fonts or their
derivatives to be published under this licence, as long as the primary
purpose of the document is not to be a vehicle for the distribution of
the fonts.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this licence and clearly marked as such. This may
include source files, build scripts and documentation.
"Original Version" refers to the collection of Font Software components
as received under this licence.
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to
a new environment.
"Copyright Holder(s)" refers to all individuals and companies who have a
copyright ownership of the Font Software.
"Substantially Changed" refers to Modified Versions which can be easily
identified as dissimilar to the Font Software by users of the Font
Software comparing the Original Version with the Modified Version.
To "Propagate" a work means to do anything with it that, without
permission, would make you directly or secondarily liable for
infringement under applicable copyright law, except executing it on a
computer or modifying a private copy. Propagation includes copying,
distribution (with or without modification and with or without charging
a redistribution fee), making available to the public, and in some
countries other activities as well.
PERMISSION & CONDITIONS
This licence does not grant any rights under trademark law and all such
rights are reserved.
Permission is hereby granted, free of charge, to any person obtaining a
copy of the Font Software, to propagate the Font Software, subject to
the below conditions:
1) Each copy of the Font Software must contain the above copyright
notice and this licence. These can be included either as stand-alone
text files, human-readable headers or in the appropriate machine-
readable metadata fields within text or binary files as long as those
fields can be easily viewed by the user.
2) The font name complies with the following:
(a) The Original Version must retain its name, unmodified.
(b) Modified Versions which are Substantially Changed must be renamed to
avoid use of the name of the Original Version or similar names entirely.
(c) Modified Versions which are not Substantially Changed must be
renamed to both (i) retain the name of the Original Version and (ii) add
additional naming elements to distinguish the Modified Version from the
Original Version. The name of such Modified Versions must be the name of
the Original Version, with "derivative X" where X represents the name of
the new work, appended to that name.
3) The name(s) of the Copyright Holder(s) and any contributor to the
Font Software shall not be used to promote, endorse or advertise any
Modified Version, except (i) as required by this licence, (ii) to
acknowledge the contribution(s) of the Copyright Holder(s) or (iii) with
their explicit written permission.
4) The Font Software, modified or unmodified, in part or in whole, must
be distributed entirely under this licence, and must not be distributed
under any other licence. The requirement for fonts to remain under this
licence does not affect any document created using the Font Software,
except any version of the Font Software extracted from a document
created using the Font Software may only be distributed under this
licence.
TERMINATION
This licence becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF
COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER
DEALINGS IN THE FONT SOFTWARE.

View file

@ -1,15 +0,0 @@
----------------------
Ubuntu Font Family
======================
The Ubuntu Font Family are a set of matching new libre/open fonts in
development during 2010--2011. The development is being funded by
Canonical Ltd on behalf the wider Free Software community and the
Ubuntu project. The technical font design work and implementation is
being undertaken by Dalton Maag.
Both the final font Truetype/OpenType files and the design files used
to produce the font family are distributed under an open licence and
you are expressly encouraged to experiment, modify, share and improve.
http://font.ubuntu.com/

View file

@ -1,17 +1,20 @@
#bottombar {
position: fixed;
z-index: 5;
width: 100%;
overflow: hidden;
flex: 0 0 auto;
order: 99;
height: 18px;
left: 0;
bottom: 0;
padding: 6px 0 8px 0;
background-color: @col-widget-back;
padding: 6px;
background: @col-widget-back;
border-top: @border-widget;
color: #999;
text-align: center;
text-align: right;
> * {
margin: 0 8px;
}
a, a:active, a:visited {
color: #555;
@ -24,28 +27,11 @@
opacity: 1;
}
}
.left {
position: absolute;
left: 0;
display: block;
padding: 0 8px;
}
.center {
display: block;
}
.right {
position: absolute;
right: 0;
display: block;
padding: 0 8px;
}
.noJsMsg {
color: @col-error;
margin-left: 16px;
}
.noBrowserMsg {
color: @col-error;
margin-left: 16px;
a, a:active, a:visited {
color: @col-error;
text-decoration: underline;
@ -55,19 +41,4 @@
}
}
}
.status {
.sep {
display: inline-block;
padding: 0 6px;
&:before {
content: '·'
}
}
&.default {
}
&.dynamic {
display: none;
}
}
}

View file

@ -1,11 +1,13 @@
#content {
max-width: 960px;
margin: 50px auto;
font-size: 15px;
overflow: auto;
flex: 1 1 auto;
order: 50;
}
#content-header, #content-footer {
margin: 24px;
color: #333;
a, a:active, a:visited {
@ -22,13 +24,3 @@
font-family: @font-family-mono;
}
}
#content-header {
padding-bottom: 12px;
margin-bottom: 32px;
}
#content-footer {
padding-top: 12px;
margin-top: 32px;
}

View file

@ -2,7 +2,7 @@
#fallback {
display: none;
max-width: 960px;
margin: 80px auto;
margin: 32px auto 64px;
table {
display: block;
@ -65,7 +65,21 @@
html.no-js, html.no-browser {
body {
position: static;
background: #fff;
}
#fallback {
display: block;
}
#bottombar {
display: block;
position: fixed;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
}
}

View file

@ -1,6 +1,5 @@
@col: rgb(85,85,85);
// @col-back: rgb(255,255,255);
@col-back: #eeeeee;
@col-hover: rgb(29,119,194);
@col-border: rgba(0,0,0,0.05);
@ -30,7 +29,7 @@
@font-family: Roboto, Ubuntu, Helvetica, Arial, sans-serif;
@font-weight: 400;
@font-family-mono: "Ubuntu Mono", monospace;
@font-family-mono: monospace;
::-moz-selection { background: #68A9FF; color: #fff; text-shadow: none; }
@ -51,7 +50,6 @@
html {
min-height: 100%;
overflow: auto;
overflow-y: scroll;
&.js .noJsMsg {
display: none;
@ -62,10 +60,34 @@ html {
}
body {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
font-family: @font-family;
font-size: 13px;
font-weight: @font-weight;
color: @col;
background-color: @col-back;
margin: 30px;
background: @col-back;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: flex-start;
align-items: stretch;
}
#main-row {
flex: 1 1 auto;
order: 50;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: flex-start;
align-items: stretch;
}

View file

@ -1,12 +1,10 @@
#sidebar {
position: fixed;
right: -220px;
width: 200px;
top: 31px;
height: 100%;
z-index: 3;
display: none;
overflow: auto;
flex: 0 0 auto;
order: 99;
width: 200px;
padding: 8px;
background-color: @col-widget-back;
border-left: @border-widget;

View file

@ -1,24 +1,16 @@
#topbar {
position: fixed;
z-index: 5;
width: 100%;
overflow: hidden;
flex: 0 0 auto;
order: 1;
min-height: 30px;
left: 0;
top: 0;
background-color: @col-widget-back;
border-bottom: @border-widget;
font-weight: lighter;
}
.topbar-highlight {
// background-color: @col-widget-back-highlight;
opacity: 1.0;
}
.topbar-hover {
.topbar-highlight;
color: @col-hover;
}
@ -43,7 +35,6 @@
color: @col;
cursor: pointer;
text-decoration: none;
// opacity: 0.7;
.transition(all 0.2s ease-in-out);
display: block;
@ -57,9 +48,6 @@
}
.current {
font-weight: bold;
a, span.element {
.topbar-highlight;
}
}
img {
position: relative;

View file

@ -1,17 +1,16 @@
#tree {
display: none;
position: fixed;
left: 0;
top: 31px;
height: 100%;
z-index: 3;
overflow: auto;
flex: 0 0 auto;
order: 1;
padding: 8px;
// background-color: @col-widget-back;
// border-right: @border-widget;
background: #eee;
border-right: 2px solid @col-border;
border-right: 1px solid @col-border;
font-weight: lighter;
.sp-scrollbar {
@ -34,7 +33,6 @@
width: 16px;
height: 22px;
float: left;
// opacity: 0.7;
cursor: pointer;
img {
@ -65,12 +63,9 @@
border: 1px solid rgba(0,0,0,0);
border-radius: 3px;
text-decoration: none;
// opacity: 0.7;
&:hover, &.hover {
color: @col-hover;
// background-color: @col-widget-back-hover;
// opacity: 1;
}
}
.icon {
@ -100,9 +95,6 @@
}
.current {
> a, > a:active, > a:visited {
// background-color: @col-widget-back-sel;
// border-color: @col-widget-sep;
// opacity: 1;
font-weight: bold;
}
}

View file

@ -24,7 +24,7 @@
}
.label {
margin: 0 230px 0 (@size + 16px);
margin: 0 246px 0 (@size + 32px);
}
}
}
@ -43,7 +43,6 @@
background: #fff;
a, a:active, a:visited {
// border-bottom: 1px solid @item-border-col-sep;
&:hover, &.hover {
border-color: @item-border-col-hover;
@ -59,19 +58,19 @@
.icon.square {
display: inline-block;
position: absolute;
left: 0;
left: 16px;
top: -1px;
}
.date {
position: absolute;
right: 100px;
right: 116px;
top: 0;
}
.size {
position: absolute;
right: 0;
right: 16px;
top: 0;
}

View file

@ -33,12 +33,13 @@
#view.view-grid {
margin: 8px;
li {
&.item {
float: left;
// margin: 2px;
margin: 4px;
margin: 8px;
background: #fff;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);

View file

@ -33,15 +33,17 @@
#view.view-icons {
margin: 8px;
li {
text-align: center;
&.item {
float: left;
margin: 2px;
margin: 8px;
a, a:active, a:visited {
padding: 8px;
// padding: 8px;
border: 1px solid rgba(0,0,0,0);
min-width: @minsize * 4/3;
min-height: @minsize + 28px;

View file

@ -2,7 +2,6 @@
@import "lib/h5bp-normalize";
@import "lib/h5bp-main-header";
// @import "inc/fonts";
@import "inc/general";
@import "inc/topbar";
@import "inc/bottombar";
@ -32,5 +31,4 @@
@import "lib/h5bp-main-footer";
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,700);
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,700);

View file

@ -15,7 +15,6 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e
'<span class="label"/>' +
'</a>' +
'</span>';
var statusHintTemplate = '<span class="hint"/>';
function update(item) {
@ -67,7 +66,6 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e
// is it the current folder?
if (item.isCurrentFolder()) {
$html.addClass('current');
// $img.attr('src', resource.image('folder-open'));
}
// does it have subfolders?
@ -151,19 +149,6 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e
};
}
function shiftTree(forceVisible, dontAnimate) {
var $tree = $("#tree");
var $view = $("#view");
var left = ((settings.slide && $tree.outerWidth() < $view.offset().left) || forceVisible || !$view.is(':visible')) ? 0 : 18 - $tree.outerWidth();
if (dontAnimate) {
$tree.stop().css({ left: left });
} else {
$tree.stop().animate({ left: left });
}
}
function fetchTree(item, callback) {
item.isContentVisible = true;
@ -177,19 +162,9 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e
});
}
function adjustSpacing() {
function updateScrollbar() {
var $tree = $('#tree');
var winHeight = $(window).height();
var navHeight = $('#topbar').outerHeight();
var footerHeight = $('#bottombar').outerHeight();
$tree.css({
top: navHeight,
height: winHeight - navHeight - footerHeight - 16
});
$tree.scrollpanel('update');
$('#tree').scrollpanel('update');
}
function onLocationChanged(item) {
@ -199,8 +174,7 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e
$('#tree')
.find('.sp-container').append(update(root)).end()
.show();
adjustSpacing();
shiftTree(false, true);
updateScrollbar();
});
}
@ -210,27 +184,15 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e
return;
}
var $tree = $('<div id="tree"/>')
.appendTo('body')
.scrollpanel()
.on('click', '.indicator', createOnIndicatorClick())
.on('mouseenter', function () {
$('<div id="tree"/>')
.appendTo('#main-row')
.scrollpanel()
.on('click', '.indicator', createOnIndicatorClick());
shiftTree(true);
})
.on('mouseleave', function () {
shiftTree();
});
event.sub('ready', adjustSpacing);
event.sub('ready', updateScrollbar);
event.sub('location.changed', onLocationChanged);
$(window).on('resize', function () {
adjustSpacing();
shiftTree();
});
$(window).on('resize', updateScrollbar);
}

View file

@ -3,7 +3,6 @@ modulejs.define('main', ['_', 'core/event'], function (_, event) {
modulejs.require('view/ensure');
modulejs.require('view/items');
modulejs.require('view/sidebar');
modulejs.require('view/spacing');
modulejs.require('view/viewmode');
_.each(modulejs.state(), function (state, id) {

View file

@ -1,44 +1,52 @@
modulejs.define('view/ensure', ['$', 'config', 'core/event'], function ($, config, event) {
var templateTopbar =
'<div id="topbar" class="clearfix">' +
'<ul id="navbar"></ul>' +
'</div>';
var templateMainRow =
'<div id="main-row">' +
'<div id="sidebar">' +
'<div id="settings">' +
'</div>' +
'</div>' +
'</div>';
var selb = '#bottombar';
var selr = selb + ' .right';
var sela = selr + ' a';
var sela = selb + ' > a';
var sequence = 'powered by h5ai ' + config.setup.VERSION;
var url = 'http://larsjung.de/h5ai/';
var isVisible = ':visible';
var styleKey = 'style';
var styleVal = 'display: inline !important';
function ensure() {
if (
$(selr).text() !== sequence ||
$(sela).text() !== sequence ||
$(sela).attr('href') !== url ||
$(sela).filter(isVisible).length !== 1 ||
$(selr).filter(isVisible).length !== 1 ||
$(selb).filter(isVisible).length !== 1
) {
if ($(selb).filter(isVisible).length !== 1) {
$(selb).remove();
$('<div id="bottombar"/>').attr(styleKey, styleVal).appendTo('body');
}
$(selr).remove();
$('<span><a/></span>')
.addClass('right')
.attr(styleKey, styleVal)
.find('a')
.attr('href', url)
.attr('title', sequence)
.text(sequence)
.attr(styleKey, styleVal)
.end()
.prependTo(selb);
$(selb).remove();
$('<div id="bottombar"/>')
.attr(styleKey, 'display: block !important')
.appendTo('body');
$('<a/>')
.attr(styleKey, 'display: inline !important')
.attr('href', url)
.attr('title', sequence)
.text(sequence)
.appendTo(selb);
}
}
function init() {
$(templateTopbar).appendTo('body');
$(templateMainRow).appendTo('body');
event.sub('ready', function () {
ensure();

View file

@ -160,7 +160,8 @@ modulejs.define('view/items', ['_', '$', 'core/settings', 'core/resource', 'core
event.sub('location.changed', onLocationChanged);
event.sub('location.refreshed', onLocationRefreshed);
$content.appendTo('body');
// $content.appendTo('body');
$content.appendTo('#main-row');
}

View file

@ -9,7 +9,7 @@ modulejs.define('view/sidebar', ['$', 'core/resource', 'core/store'], function (
'</li>';
function update(toggle, animate) {
function update(toggle) {
var $toggle = $('#sidebar-toggle');
var $sidebar = $('#sidebar');
@ -22,32 +22,24 @@ modulejs.define('view/sidebar', ['$', 'core/resource', 'core/store'], function (
if (isVisible) {
$toggle.addClass('current');
$sidebar.show();
} else {
$toggle.removeClass('current');
}
if (animate) {
$sidebar.stop().animate({
right: isVisible ? 0 : -$sidebar.outerWidth()-1
});
} else {
$sidebar.css({
right: store.get(storekey) ? 0 : -$sidebar.outerWidth()-1
});
$sidebar.hide();
}
}
function init() {
$(toggleTemplate)
.appendTo('#navbar')
.on('click', 'a', function (ev) {
update(true, true);
update(true);
ev.preventDefault();
})
.appendTo('#navbar');
});
update(false, false);
update(false);
}

View file

@ -1,34 +0,0 @@
modulejs.define('view/spacing', ['_', '$', 'core/settings', 'core/event'], function (_, $, allsettings, event) {
var settings = _.extend({
maxWidth: 960,
top: 50,
right: 'auto',
bottom: 50,
left: 'auto'
}, allsettings.spacing);
function adjustSpacing() {
$('#content').css({
'margin-top': settings.top + $('#topbar').outerHeight(),
'margin-bottom': settings.bottom + $('#bottombar').outerHeight()
});
}
function init() {
$('#content').css({
'max-width': settings.maxWidth,
'margin-right': settings.right,
'margin-left': settings.left
});
event.sub('ready', adjustSpacing);
$(window).on('resize', adjustSpacing);
}
init();
});

View file

@ -19,11 +19,7 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
function adjustSpacing() {
var contentWidth = $('#content').width();
var $view = $('#view');
var itemWidth = ($view.hasClass('view-icons') || $view.hasClass('view-grid')) ? ($view.find('.item').eq(0).outerWidth(true) || 1) : 1;
$view.width(Math.floor(contentWidth / itemWidth) * itemWidth + 4);
// kept here for later use
}
function update(mode, size) {

View file

@ -19,24 +19,15 @@ head
body
div#topbar.clearfix
ul#navbar
div#bottombar.clearfix
span.left
span.noJsMsg
| ⚡ JavaScript disabled! ⚡
span.noBrowserMsg
| ⚡ Works best in
a( href="http://browsehappy.com" ) modern browsers
| ! ⚡
span.right
a( href="#{pkg.homepage}", title="#{pkg.name} #{pkg.version} · #{pkg.description}" )
| powered by #{pkg.name} #{pkg.version}
span.center
div#sidebar
div#settings
div#bottombar
span.noJsMsg
| JavaScript disabled!
span.noBrowserMsg
| Works best in
a( href="http://browsehappy.com" ) modern browsers
| !
a( href="#{pkg.homepage}", title="#{pkg.name} #{pkg.version} · #{pkg.description}" )
| powered by #{pkg.name} #{pkg.version}
div#fallback !{fallback}