From b6fb8f048f5e06e7db9e8fa2f6c2ef95a7fd4c5f Mon Sep 17 00:00:00 2001 From: Robert Sesek Date: Thu, 2 Sep 2010 11:01:42 -0400 Subject: [PATCH] * Add some basic styling * Hide the error element properly now that it's styled --- web_frontend/main.js | 18 +++-- web_frontend/reset.css | 172 +--------------------------------------- web_frontend/screen.css | 33 ++++++++ 3 files changed, 44 insertions(+), 179 deletions(-) diff --git a/web_frontend/main.js b/web_frontend/main.js index 75ae767..f71ded8 100644 --- a/web_frontend/main.js +++ b/web_frontend/main.js @@ -22,6 +22,9 @@ armadillo = function() { } this.list(start_path); this.listeners_ = new Array(); + this.errorEffect_ = + new goog.fx.dom.FadeInAndShow(goog.dom.getElement('error'), 2.0); + this.errorEffect_.hide(); goog.events.listen(window, goog.events.EventType.HASHCHANGE, this.hashChanged_, false, this); } @@ -45,12 +48,14 @@ armadillo.prototype.sendRequest_ = function(action, extra_data, callback) { */ armadillo.prototype.list = function(path) { var callback = function(e) { - app.clearError_(); var data = e.target.getResponseJson(); if (data['error']) { app.showError_(data['message']); return; // Error. + } else { + app.clearError_(); } + // Unlisten all current listeners. goog.array.forEach(app.listeners_, function(e) { goog.events.unlistenByKey(e); @@ -130,9 +135,8 @@ armadillo.prototype.stripLastPathComponent_ = function(path) { * Clears the error message. */ armadillo.prototype.clearError_ = function() { - var elm = goog.dom.getElement('error'); - goog.dom.setTextContent(elm, ''); - goog.dom.setProperties(elm, {'display':'none'}); + this.errorEffect_.hide(); + goog.dom.setTextContent(this.errorEffect_.element, ''); }; /** @@ -140,8 +144,6 @@ armadillo.prototype.clearError_ = function() { * @param {string} message */ armadillo.prototype.showError_ = function(message) { - this.clearError_(); - var elm = goog.dom.getElement('error'); - goog.dom.setTextContent(elm, message); - goog.fx.dom.FadeInAndShow(elm, 10.0); + goog.dom.setTextContent(this.errorEffect_.element, message); + this.errorEffect_.show(); }; diff --git a/web_frontend/reset.css b/web_frontend/reset.css index 57b9f8e..38f9c55 100644 --- a/web_frontend/reset.css +++ b/web_frontend/reset.css @@ -84,174 +84,4 @@ select, input, textarea { font:99% sans-serif; } * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */ pre, code, kbd, samp { font-family: monospace, sans-serif; } - - - -/* - * minimal base styles - */ - - -/* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ -body, select, input, textarea { color:#444; } - -/* Headers (h1,h2,etc) have no default font-size or margin, - you'll want to define those yourself. */ - -/* www.aestheticallyloyal.com/public/optimize-legibility/ */ -h1,h2,h3,h4,h5,h6 { font-weight: bold; text-rendering: optimizeLegibility; } - -/* maxvoltar.com/archive/-webkit-font-smoothing */ -html { -webkit-font-smoothing: antialiased; } - - -/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ -a:hover, a:active { outline: none; } - -a, a:active, a:visited { color:#607890; } -a:hover { color:#036; } - - -ul { margin-left:30px; } -ol { margin-left:30px; list-style-type: decimal; } - -small { font-size:85%; } -strong, th { font-weight: bold; } - -td, td img { vertical-align:top; } - -sub { vertical-align: sub; font-size: smaller; } -sup { vertical-align: super; font-size: smaller; } - -pre { - padding: 15px; - - /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ - white-space: pre; /* CSS2 */ - white-space: pre-wrap; /* CSS 2.1 */ - white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ - word-wrap: break-word; /* IE */ -} - -/* align checkboxes, radios, text inputs with their label - by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ -input[type="radio"] { vertical-align: text-bottom; } -input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; } -.ie6 input { vertical-align: text-bottom; } - -/* hand cursor on clickable input elements */ -label, input[type=button], input[type=submit], button { cursor: pointer; } - -/* j.mp/webkit-tap-highlight-color */ -a:link { -webkit-tap-highlight-color: #FF5E99; } - - -/* always force a scrollbar in non-IE */ -html { overflow-y: scroll; } - -/* make buttons play nice in IE: - www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ -button { width: auto; overflow: visible; } - -/* bicubic resizing for non-native sized IMG: - code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ -.ie7 img { -ms-interpolation-mode: bicubic; } - - - -/* - * Non-semantic helper classes - */ - -/* for image replacement */ -.ir { display:block; text-indent:-999em; overflow:hidden; background-repeat: no-repeat; } - -/* Hide for both screenreaders and browsers - css-discuss.incutio.com/wiki/Screenreader_Visibility */ -.hidden { display:none; visibility:hidden; } - -/* Hide only visually, but have it available for screenreaders - www.webaim.org/techniques/css/invisiblecontent/ - Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal! */ -.visuallyhidden { position:absolute !important; - clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ - clip: rect(1px, 1px, 1px, 1px); } - -/* Hide visually and from screenreaders, but maintain layout */ -.invisible { visibility: hidden; } - -/* >> The Magnificent CLEARFIX << */ -.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } -.clearfix { display: inline-block; } -* html .clearfix { height: 1%; } /* Hides from IE-mac \*/ -.clearfix { display: block; } - - - - - - /* Primary Styles - Author: - */ - - - - - - - - - - - -/* - * print styles - * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ - */ -@media print { - * { background: transparent !important; color: #444 !important; text-shadow: none; } - - a, a:visited { color: #444 !important; text-decoration: underline; } - - a:after { content: " (" attr(href) ")"; } - - abbr:after { content: " (" attr(title) ")"; } - - .ir a:after { content: ""; } /* Don't show links for images */ - - pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } - - img { page-break-inside: avoid; } - - @page { margin: 0.5cm; } - - p, h2, h3 { orphans: 3; widows: 3; } - - h2, h3{ page-break-after: avoid; } -} - - - -/* - * Media queries for responsive design - */ - -@media all and (orientation:portrait) { - /* Style adjustments for portrait mode goes here */ - -} - -@media all and (orientation:landscape) { - /* Style adjustments for landscape mode goes here */ - -} - -/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome) - Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ -@media screen and (max-device-width: 480px) { - - - /* Prevent iOS, WinMobile from adjusting font size */ - html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } -} - + \ No newline at end of file diff --git a/web_frontend/screen.css b/web_frontend/screen.css index e69de29..6c921b3 100644 --- a/web_frontend/screen.css +++ b/web_frontend/screen.css @@ -0,0 +1,33 @@ +/* + * Armadillo File Manager + * Copyright (c) 2010, Robert Sesek + * + * 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 3 of the License, or any later version. + */ + +body { + font-family: "Lucida Grande", Helvetica, Arial, sans-serif; + padding: 1.5em; + font-size: 1em; +} + +h1 { + font-size: 3em; +} + +#ls { + margin-left: 1.5em; +} + +#error { + border-style: solid; + border-width: .15em; + border-color: rgb(167, 40, 26); + border-radius: .2em; + padding: .2em; + + background-color: rgba(167, 40, 26, 0.1); + color: rgb(0, 30, 30); +} -- 2.22.5