From a60f38c572c642c933b2ea1563221ac96d4dbcbb Mon Sep 17 00:00:00 2001 From: RaNaN Date: Mon, 18 Feb 2013 19:43:41 +0100 Subject: worked on webui --- module/web/static/css/default/admin.less | 4 -- module/web/static/css/default/dashboard.less | 86 ++++++++++++++--------- module/web/static/css/default/style.less | 44 +++++++++--- module/web/static/css/fontawesome.css | 79 +++++++++++---------- module/web/static/fonts/fontawesome-webfont.eot | Bin 18832 -> 22914 bytes module/web/static/fonts/fontawesome-webfont.ttf | Bin 10084 -> 10852 bytes module/web/static/fonts/fontawesome-webfont.woff | Bin 6048 -> 16344 bytes module/web/static/fonts/fontawesome.txt | 5 ++ module/web/templates/default/base.html | 21 +++--- module/web/templates/default/dashboard.html | 44 ++++++------ pavement.py | 8 +-- 11 files changed, 171 insertions(+), 120 deletions(-) diff --git a/module/web/static/css/default/admin.less b/module/web/static/css/default/admin.less index 604027dda..2ea99da00 100644 --- a/module/web/static/css/default/admin.less +++ b/module/web/static/css/default/admin.less @@ -4,10 +4,6 @@ Admin */ -.iconf-8x { - font-size: 8em; -} - .popover { width: auto } diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less index fedf4acdb..531dc9be3 100644 --- a/module/web/static/css/default/dashboard.less +++ b/module/web/static/css/default/dashboard.less @@ -27,15 +27,16 @@ margin-left: 0; } -@frame-border: 20px; +@frame-top: 20px; +@frame-bottom: 18px; .package-frame { position: absolute; border-radius: 5px; - top: -@frame-border; - left: -@frame-border / 2; - right: -@frame-border / 2; - bottom: -@frame-border + 4px; // + size of visible bar + top: -@frame-top; + left: -@frame-top / 2; + right: -@frame-top / 2; + bottom: -@frame-bottom + 4px; // + size of visible bar z-index: -1; // lies under package } @@ -56,8 +57,8 @@ .progress { position: absolute; - height: @frame-border; - line-height: @frame-border; + height: @frame-bottom; + line-height: @frame-bottom; border-radius: 0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; @@ -89,15 +90,57 @@ } .package-indicator { - color: @blue; position: absolute; - height: @frame-border; - line-height: @frame-border; top: 0; right: 0; float: right; + color: @blue; + text-shadow: @yellowDark 1px 1px; + height: @frame-top; + line-height: @frame-top; + + i { + cursor: pointer; + } + + i:hover { + color: @green; + } + + i.iconf-trash:hover { + color: @red; + } } +// Tag area with different effect on hover +.tag-area { + position: absolute; + top: -2px; + left: 0; + + .badge { + font-size: 11px; + line-height: 11px; + } + + .badge i { + cursor: pointer; + &:hover:before { + content: "\f024"; // show Remove icon + } + } + + .badge-ghost { + visibility: hidden; + cursor: pointer; + opacity: 0.5; + } + + &:hover .badge-ghost { + visibility: visible; + } + +} /* Package View */ @@ -166,29 +209,6 @@ color: @light; } -// Tag area with different effect on hover -.tag-area { - display: inline-block; - - .badge i { - cursor: pointer; - &:hover { - background-position: -312px 0; // Remove icon - } - } - - .badge-ghost { - visibility: hidden; - cursor: pointer; - opacity: 0.5; - } - - &:hover .badge-ghost { - visibility: visible; - } - -} - // Box containing the files .package-view > ul { overflow: hidden; diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less index a6df51625..964895f38 100644 --- a/module/web/static/css/default/style.less +++ b/module/web/static/css/default/style.less @@ -105,7 +105,16 @@ a:hover { border-bottom-color: #FFFFFF; border-top-color: #FFFFFF; } +} + +.iconf-8x { + font-size: 8em; +} +// Will not work well in buttons/navs, would require more rules +.iconf-larger { + vertical-align: -10%; + font-size: 1.5em; } /* @@ -179,24 +188,25 @@ header .logo { // } .btn { - margin-top: 12px; + margin-top: 6px; } } -.menu-block { - margin-top: 0px; -} - -#notifications-area { +.iconbar { display: inline-block; width: 100%; - padding: 3px 0; text-align: center; - line-height: 14px; - font-size: small; - background-color: @greyDark; - border-radius: 0 0 6px 6px; + text-shadow: @blue 2px 2px 2px; + + i { + cursor: pointer; + } + + i:hover { + color: @yellow; + } + } // Responsive Borders @@ -303,6 +313,18 @@ header .logo { Actionbar */ +#notifications-area { + display: inline-block; + width: 100%; + padding: 4px 0 6px 0; + text-align: center; + line-height: 18px; + font-size: small; + color: @light; + background-color: @greyDark; + border-radius: 0 0 6px 6px; +} + .nav > li > a:hover { color: @blue; } diff --git a/module/web/static/css/fontawesome.css b/module/web/static/css/fontawesome.css index d314e7d68..64aa5fc64 100644 --- a/module/web/static/css/fontawesome.css +++ b/module/web/static/css/fontawesome.css @@ -268,40 +268,45 @@ ul.icons li [class*=" iconf-"] { .btn .iconf-spin.iconf-large { height: .75em; } -}.iconf-search:before { content: "\f002"; } -.iconf-user:before { content: "\f007"; } -.iconf-ok:before { content: "\f00c"; } -.iconf-remove:before { content: "\f00d"; } -.iconf-cog:before { content: "\f013"; } -.iconf-trash:before { content: "\f014"; } -.iconf-list-alt:before { content: "\f022"; } -.iconf-tag:before { content: "\f02b"; } -.iconf-tags:before { content: "\f02c"; } -.iconf-list:before { content: "\f03a"; } -.iconf-check:before { content: "\f046"; } -.iconf-play:before { content: "\f04b"; } -.iconf-pause:before { content: "\f04c"; } -.iconf-stop:before { content: "\f04d"; } -.iconf-check-empty:before { content: "\f096"; } -.iconf-globe:before { content: "\f0ac"; } -.iconf-tasks:before { content: "\f0ae"; } -.iconf-filter:before { content: "\f0b0"; } -.iconf-plus-sign:before { content: "\f055"; } -.iconf-chevron-left:before { content: "\f053"; } -.iconf-chevron-right:before { content: "\f054"; } -.iconf-chevron-up:before { content: "\f077"; } -.iconf-chevron-down:before { content: "\f078"; } -.iconf-key:before { content: "\f084"; } -.iconf-inbox:before { content: "\f01c"; } -.iconf-share:before { content: "\f045"; } -.iconf-hdd:before { content: "\f0a0"; } -.iconf-group:before { content: "\f0c0"; } -.iconf-cloud:before { content: "\f0c2"; } -.iconf-carret-left:before { content: "\f0d9"; } -.iconf-sort-down:before { content: "\f0dd"; } -.iconf-sort-up:before { content: "\f0de"; } -.iconf-sitemap:before { content: "\f0e8"; } -.iconf-folder-open:before { content: "\f07c"; } -.iconf-folder-open-alt:before { content: "\f115"; } -.iconf-folder-close:before { content: "\f07b"; } -.iconf-folder-close-alt:before { content: "\f114"; } +}.iconf-search:before { content: "\f021"; } +.iconf-user:before { content: "\f022"; } +.iconf-ok:before { content: "\f023"; } +.iconf-remove:before { content: "\f024"; } +.iconf-cog:before { content: "\f025"; } +.iconf-trash:before { content: "\f026"; } +.iconf-refresh:before { content: "\f027"; } +.iconf-list-alt:before { content: "\f028"; } +.iconf-tag:before { content: "\f029"; } +.iconf-tags:before { content: "\f02a"; } +.iconf-list:before { content: "\f02b"; } +.iconf-edit:before { content: "\f02c"; } +.iconf-share:before { content: "\f02d"; } +.iconf-check:before { content: "\f02e"; } +.iconf-play:before { content: "\f02f"; } +.iconf-pause:before { content: "\f030"; } +.iconf-stop:before { content: "\f031"; } +.iconf-eye-open:before { content: "\f032"; } +.iconf-eye-close:before { content: "\f033"; } +.iconf-check-empty:before { content: "\f034"; } +.iconf-globe:before { content: "\f035"; } +.iconf-tasks:before { content: "\f036"; } +.iconf-filter:before { content: "\f037"; } +.iconf-plus-sign:before { content: "\f038"; } +.iconf-chevron-left:before { content: "\f039"; } +.iconf-chevron-right:before { content: "\f03a"; } +.iconf-chevron-up:before { content: "\f03b"; } +.iconf-chevron-down:before { content: "\f03c"; } +.iconf-key:before { content: "\f03d"; } +.iconf-inbox:before { content: "\f03e"; } +.iconf-share:before { content: "\f03f"; } +.iconf-hdd:before { content: "\f040"; } +.iconf-group:before { content: "\f041"; } +.iconf-cloud:before { content: "\f042"; } +.iconf-carret-left:before { content: "\f043"; } +.iconf-sort-down:before { content: "\f044"; } +.iconf-sort-up:before { content: "\f045"; } +.iconf-sitemap:before { content: "\f046"; } +.iconf-folder-open:before { content: "\f047"; } +.iconf-folder-open-alt:before { content: "\f048"; } +.iconf-folder-close:before { content: "\f049"; } +.iconf-folder-close-alt:before { content: "\f04a"; } diff --git a/module/web/static/fonts/fontawesome-webfont.eot b/module/web/static/fonts/fontawesome-webfont.eot index ffeb5c0d1..2fe20b6db 100644 Binary files a/module/web/static/fonts/fontawesome-webfont.eot and b/module/web/static/fonts/fontawesome-webfont.eot differ diff --git a/module/web/static/fonts/fontawesome-webfont.ttf b/module/web/static/fonts/fontawesome-webfont.ttf index e9b0d3fd3..9211ba40d 100644 Binary files a/module/web/static/fonts/fontawesome-webfont.ttf and b/module/web/static/fonts/fontawesome-webfont.ttf differ diff --git a/module/web/static/fonts/fontawesome-webfont.woff b/module/web/static/fonts/fontawesome-webfont.woff index d8d28851b..12c2755d3 100644 Binary files a/module/web/static/fonts/fontawesome-webfont.woff and b/module/web/static/fonts/fontawesome-webfont.woff differ diff --git a/module/web/static/fonts/fontawesome.txt b/module/web/static/fonts/fontawesome.txt index dcc11c11b..e93b01db7 100644 --- a/module/web/static/fonts/fontawesome.txt +++ b/module/web/static/fonts/fontawesome.txt @@ -6,14 +6,19 @@ ok 00c remove 00d cog 013 trash 014 +refresh 021 list-alt 022 tag 02b tags 02c list 03a +edit 044 +share 045 check 046 play 04b pause 04c stop 04d +eye-open 06e +eye-close 070 check-empty 096 globe 0ac tasks 0ae diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html index d6aeb7b6b..d195471e1 100644 --- a/module/web/templates/default/base.html +++ b/module/web/templates/default/base.html @@ -40,15 +40,15 @@
{% if user %} -