[checkmk-commits] Check_MK Git: check_mk: Fixed aligns/widths of snapin contents

Module: check_mk Branch: master Commit: 495f7becfabd29cb254abd0f8447181a9471603b URL: http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=495f7becfabd29… Author: Lars Michelsen &lt;lm(a)mathias-kettner.de&gt; Date: Fri Jan 28 11:27:27 2011 +0100 Fixed aligns/widths of snapin contents --- .bugs/91 | 4 ++++ ChangeLog | 3 +++ web/htdocs/check_mk.css | 35 ++++++++++++++++++++++------------- web/htdocs/sidebar.py | 2 +- web/plugins/sidebar/search.py | 20 ++++++++++++++------ web/plugins/sidebar/shipped.py | 21 +++++++++++---------- 6 files changed, 55 insertions(+), 30 deletions(-) diff --git a/.bugs/91 b/.bugs/91 index d829eb5..2d035b6 100644 --- a/.bugs/91 +++ b/.bugs/91 @@ -10,3 +10,7 @@ Since shortly the small blue bullets lefts to links like in "Site status" are indented too much left (on Firefox). This could be the effect of fixing this for IE and Chrome. + +-- + + diff --git a/ChangeLog b/ChangeLog index c7c910c..75737ef 100644 --- a/ChangeLog +++ b/ChangeLog @@ -15,6 +15,9 @@ * drbd: Fixed var typo which prevented inventory of drbd general check (Thanks to Andreas Behler) + Multisite: + * Fixed aligns/widths of snapin contents + 1.1.9i5: Multisite: diff --git a/web/htdocs/check_mk.css b/web/htdocs/check_mk.css index fce269c..583f1d4 100644 --- a/web/htdocs/check_mk.css +++ b/web/htdocs/check_mk.css @@ -107,7 +107,7 @@ body.side { font-size: 9pt; padding: 0; margin: 0; - width: 100%; + width: 280px; height: 100%; overflow:hidden; } @@ -160,7 +160,6 @@ div#check_mk_sidebar div#side_content { height: 500px; overflow: hidden; color: #000000; - padding-left: 5px; padding-top: 60px; padding-bottom: 5px; } @@ -187,7 +186,7 @@ div#check_mk_sidebar div#side_footer div.button { top: 10px; left: 15px; float: left; -padding: 0px; + padding: 0px; } div#check_mk_sidebar div#side_footer div.button a { width: 75px; @@ -200,7 +199,7 @@ div#check_mk_sidebar div#side_footer div.button a { text-decoration: none; background-repeat: repeat; background-image: url("images/sidebar_button_lo.png"); -margin: 0px; + margin: 0px; } div#check_mk_sidebar div#side_footer div.button a:hover { background-image: url("images/sidebar_button_hi.png"); @@ -223,8 +222,8 @@ color: white; /* General layout of snapins */ div.snapin { - width: 100%; - margin: 0; + width: 275px; + margin: 0 0 0 5px; padding: 0; } @@ -233,7 +232,7 @@ div.snapin div.head { width: 260px; text-align: center; color: white; - padding-top: 9px; + padding-top: 9px; } div.snapin div.head.open { @@ -257,11 +256,12 @@ div.snapin div.content { background-image: url("images/snapin_background.png"); background-repeat: repeat-y; background-position: left; - padding-top: 10px; - padding-left: 12px; - padding-right: 12px; - padding-bottom: 5px; - width: 240px; + + /* It's important for the left/right padding to be substracted + * from the width defined below. The regular width would be 260px. */ + padding: 10px 15px 5px; + width: 230px; + margin: 0; } div.snapin div.foot { @@ -272,7 +272,15 @@ div.snapin div.foot { line-height: 10px; } -/* General styles for snapin contents */ +/* + * General styles for snapin contents + */ + +div.snapin .content_center { + margin-left: auto; + margin-right: auto; +} + div.snapin { font-family: arial, helvetica, sans-serif; } @@ -280,6 +288,7 @@ div.snapin { div.snapin td { color: #fff; } + div.snapin h3 { margin: 2px 0px; color: #fff; diff --git a/web/htdocs/sidebar.py b/web/htdocs/sidebar.py index 1403ebe..2e3e553 100644 --- a/web/htdocs/sidebar.py +++ b/web/htdocs/sidebar.py @@ -30,7 +30,7 @@ from lib import * sidebar_snapins = {} # Constants to be used in snapins -snapin_width = 229 +snapin_width = 230 # Load all snapins snapins_dir = defaults.web_dir + "/plugins/sidebar" diff --git a/web/plugins/sidebar/search.py b/web/plugins/sidebar/search.py index 18e84b0..a89b806 100644 --- a/web/plugins/sidebar/search.py +++ b/web/plugins/sidebar/search.py @@ -45,7 +45,7 @@ def render_searchform(): except: limit = 80 - html.write('<div id="mk_side_search" onclick="mkSearchClose();">') + html.write('<div id="mk_side_search" class="content_center" onclick="mkSearchClose();">') html.write('<input id="mk_side_search_field" type="text" name="search" autocomplete="off" />') html.write('</div>') html.write("<script type='text/javascript' src='js/search.js'></script>\n") @@ -96,14 +96,22 @@ sidebar_snapins["search"] = { "allowed" : [ "user", "admin", "guest" ], "styles" : """ div#mk_side_search { - padding-left: 1px; width: %dpx; + padding: 0; } -div#mk_side_search input{ - margin: 0px 1px 0px 0px; - width: 100%%; +div#mk_side_search input { + margin: 0; + padding: 0; font-size: 8pt; + /* The padding and border defined below stretch the object by 2px in each + * direction. This needs to be substracted from the width to position the + * field correctly + */ + width: %dpx; + padding: 1px; + border: 1px #73767A solid; + outline: 1px solid #fff; } div#mk_side_search #mk_search_results { @@ -129,5 +137,5 @@ div#mk_side_search #mk_search_results a:hover, div#mk_side_search #mk_search_res background-color: #BFBFBF; } -""" % (snapin_width - 1) +""" % (snapin_width - 4, snapin_width - 8) } diff --git a/web/plugins/sidebar/shipped.py b/web/plugins/sidebar/shipped.py index b8b2704..a24a282 100644 --- a/web/plugins/sidebar/shipped.py +++ b/web/plugins/sidebar/shipped.py @@ -309,7 +309,7 @@ def render_hostmatrix(): style = 'height: %dpx; ' % (snapin_width) if rows > 10: style += "border-collapse: collapse;" - html.write('<table class=hostmatrix style="%s">\n' % style) + html.write('<table class="content_center hostmatrix" style="%s">\n' % style) col = 1 row = 1 for site, host, state, has_been_checked, worstsvc, downtimedepth in hosts: @@ -495,7 +495,7 @@ def render_tactical_overview(): except livestatus.MKLivestatusNotFoundError: html.write("<center>No data from any site</center>") return - html.write("<table class=tacticaloverview cellspacing=2 cellpadding=0 border=0>\n") + html.write("<table class=\"content_center tacticaloverview\" cellspacing=2 cellpadding=0 border=0>\n") for title, data, view, what in [ ("Hosts", hstdata, 'hostproblems', 'host'), ("Services", svcdata, 'svcproblems', 'service'), @@ -535,12 +535,12 @@ table.tacticaloverview { * border-spacing: 5px 2px; */ width: %dpx; - margin-top: 0px; + margin-top: 0; } -table.tacticaloverview th { font-size: 7pt; text-align: left; font-weight: normal; padding: 0px; padding-top: 2px; } +table.tacticaloverview th { font-size: 7pt; text-align: left; font-weight: normal; padding: 0; padding-top: 2px; } table.tacticaloverview td { text-align: right; border: 1px solid #444; padding: 0px; } table.tacticaloverview td a { display: block; margin-right: 2px; } -""" % (snapin_width + 8) +""" % snapin_width } # table.tacticaloverview td.prob { font-weight: bold; } @@ -554,7 +554,7 @@ table.tacticaloverview td a { display: block; margin-right: 2px; } # -------------------------------------------------------------- def render_performance(): data = html.live.query("GET status\nColumns: service_checks_rate host_checks_rate external_commands_rate connections_rate forks_rate log_messages_rate cached_log_messages\n") - html.write("<table class=performance>\n") + html.write("<table class=\"content_center performance\">\n") for what, col, format in \ [("Service checks", 0, "%.2f/s"), ("Host checks", 1, "%.2f/s"), @@ -580,19 +580,19 @@ sidebar_snapins["performance"] = { "allowed" : [ "admin", ], "styles" : """ table.performance { + width: %dpx; -moz-border-radius: 5px; font-size: 8pt; - width: %dpx; - border-style: solid; background-color: #589; + border-style: solid; border-color: #444 #bbb #eee #666; + /* The border needs to be substracted from the width */ border-width: 1px; - padding: 2px; } table.performance td { padding: 0px; } table.Performance td.right { text-align: right; font-weight: bold; padding: 0px; } -""" % snapin_width +""" % (snapin_width - 2) } # -------------------------------------------------------------- @@ -619,6 +619,7 @@ div.time { text-align: center; font-size: 18pt; font-weight: bold; + /* The border needs to be substracted from the width */ border: 1px solid #8cc; -moz-border-radius: 10px; background-color: #588;