From dcd5bf483ef05aeb18a73c121b929bf5e3ca637e Mon Sep 17 00:00:00 2001
From: bachy <git@g-u-i.net>
Date: Tue, 7 Feb 2012 19:42:20 +0100
Subject: [PATCH] design improvement

table tr hover
views filter and vbo css
add pager on top of view

Signed-off-by: bachy <git@g-u-i.net>
---
 css/guibik.css               |  2 +-
 less/guibik.less             | 60 ++++++++++++++++++++--
 templates/views-view.tpl.php | 98 ++++++++++++++++++++++++++++++++++++
 3 files changed, 154 insertions(+), 6 deletions(-)
 create mode 100644 templates/views-view.tpl.php

diff --git a/css/guibik.css b/css/guibik.css
index 5da96963..60b73706 100644
--- a/css/guibik.css
+++ b/css/guibik.css
@@ -1 +1 @@
-.inline-block{display:inline-block;display:moz-inline-stack;*display:inline;*zoom:1}a{color:#0092d2}table th{background-color:#e0e0e0}.block,.item-list,.help-items ul,.form-item,.confirmation ul,.admin-list,.node-type-list,.admin-panel{border-width:0;border-style:solid;border-color:#fff}.text-format-wrapper .form-item{background:#f4f4f4;margin:0 0 10px;border-width:0;border-style:solid;border-color:#ddd;padding:9px}.form-item label{color:#1a1a1a;font-weight:normal;font-size:12px;text-transform:none}input.form-autocomplete,input.form-text,textarea.form-textarea,select.form-select{padding:3px;border-width:1px;border-style:solid;border-color:#bfbfbf;background:#fff;color:#1a1a1a;max-width:100%}.fieldset{margin:0 0 10px;display:block;position:relative;min-height:28px;border:0 solid #eee}.item-list h3,.block .block-title,.fieldset-title,.collapsible .fieldset-legend a{display:block;font-size:14px;margin:0;padding:4px 9px 5px;color:#1a1a1a;background:#e0e0e0}.block .block-content,.container-inline .fieldset-content,.fieldset-content{padding:10px 9px 9px;background:#f4f4f4}.page-content .form-item .description{color:#0092d2;border-top:1px solid #e0e0e0}.page-content .form-item .description a{text-decoration:underline}li{list-style:none inside url()}.node-form div.form-type-checkboxes>label,.node-form div.form-type-checkboxes>div.form-checkboxes{display:inline-block}.node-form .form-item-language>label,.node-form .form-item-language>select{display:inline-block}.node-form .form-type-textfield>label,.node-form .form-type-textfield>input.form-text{display:inline-block;margin:0}.node-form .form-type-textfield>label{width:35%}.node-form .form-type-textfield>input.form-text{max-width:60%}.node-form fieldset.filter-wrapper{display:none}.node-form input.fid.form-text{display:none}.node-form .form-region-right{position:relative}.node-form .form-region-right fieldset.form-wrapper{max-width:100%;padding:0;margin:0}.node-form .form-region-right .fieldset-wrapper{padding:0}.node-form .form-region-right input.form-text{width:100%}.vertical-tabs{background:#f4f4f4;border:1px solid #bfbfbf;margin:0 0 10px;position:relative}.vertical-tabs .fieldset-content,.vertical-tabs fieldset.titled .fieldset-content{border:0;padding:10px}.vertical-tabs .fieldset-content .fieldset-content{margin-top:20px}.vertical-tabs-list li a{display:block;text-shadow:#fff 0 1px 0;padding:5px 10px 4px 10px;border-bottom:1px solid #bfbfbf;border-right:1px solid #bfbfbf;color:#494949;background:#e0e0e0}.vertical-tabs-list li.last a{border-bottom:0 solid #bfbfbf}.vertical-tabs-list .selected a,.vertical-tabs-list li:hover a{background:#f4f4f4;color:#1a1a1a}.vertical-tabs-list .selected a{border-right:0 solid #f4f4f4}.vertical-tabs-list .summary{font-size:11px}.page-admin table tr.even{background:#efefef}.page-admin table tr.even td,.page-admin table tr.odd td,.page-admin table tr.even h3,.page-admin table tr.odd h3{background-color:transparent}.admin-block-description,.help-items ul li,.confirmation ul li,.item-list ul li,.prose .item-list li,.menu li{border-bottom:0 solid #f4f4f4}form .form-actions{background:#eee;border:0 solid #ddd;padding:9px}input.teaser-button,input.form-submit,.node-edit,.button,.node-delete{cursor:pointer;padding:2px 7px;color:#333;text-align:center;font-size:10px;font-weight:normal;border-width:1px;border-style:solid;border-color:#ddd #ddd #ccc;background:#bdf url();-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}input.form-submit:hover,.node-edit:hover,.button:hover,.node-delete:hover{border-color:#ddd #ddd #ccc;-webkit-box-shadow:#ace 0 0 0;color:#bdf;background-color:#848484}input.button-yes,.node-edit{background-color:#ccff2f}input.button-yes:hover,.node-edit:hover{color:#ccff2f}input.button-no,.node-delete{background-color:#ea4b4a}input.button-no:hover,.node-delete:hover{color:#ea4b4a}body.admin-vertical #admin-menu{background:#222;background-image:none}body.admin-vertical #admin-menu-wrapper{margin-left:35px!important}body.admin-vertical.admin-expanded #admin-menu-wrapper{border-left:1px solid #323232;margin-left:260px!important}#admin-toolbar{z-index:1000!important}#views-ui-edit-form div.changed{background-color:#fff98e}#views-ui-edit-form .views-ui-display-tab-bucket h3{font-weight:bold;background-color:#d8d8d8}#views-ui-edit-form .defaulted,#views-ui-edit-form .views-ui-display-tab-bucket .views-display-setting.even,#views-ui-edit-form .views-ui-display-tab-bucket .views-display-setting.odd{color:#666;background-color:#e0e0e0;font-style:italic}#views-ui-edit-form .defaulted a,#views-ui-edit-form .views-ui-display-tab-bucket .views-display-setting.even a,#views-ui-edit-form .views-ui-display-tab-bucket .views-display-setting.odd a{color:#3f80b3}#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting,#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting,#views-ui-edit-form .views-display-setting.overridden,#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting.even,#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting.even,#views-ui-edit-form .views-display-setting.overridden.even,#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting.odd,#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting.odd,#views-ui-edit-form .views-display-setting.overridden.odd{color:#7f7f7f;background-color:#f9f9f9;font-style:normal}#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting a,#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting a,#views-ui-edit-form .views-display-setting.overridden a,#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting.even a,#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting.even a,#views-ui-edit-form .views-display-setting.overridden.even a,#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting.odd a,#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting.odd a,#views-ui-edit-form .views-display-setting.overridden.odd a{color:#3188d1}.view.inline-block-list .views-row{display:inline-block;display:moz-inline-stack;*display:inline;*zoom:1;vertical-align:top;padding:5px;margin:5px;width:250px;min-height:150px;background-color:#e3e3e3;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ddd;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:0 1px 2px rgba(0,0,0,0.1);box-shadow:0 1px 2px rgba(0,0,0,0.1)}.view.inline-block-list .views-row .float-left{float:left}.view.inline-block-list .views-row .float-left>div{margin:0 10px 10px 0}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both}.clearfix{zoom:1}.path-admin-content-nodes span.icon{background-position:0 -30px}
\ No newline at end of file
+.inline-block{display:inline-block;display:moz-inline-stack;*display:inline;*zoom:1}a{color:#0092d2}table th{background-color:#e0e0e0}.block,.item-list,.help-items ul,.form-item,.confirmation ul,.admin-list,.node-type-list,.admin-panel{border-width:0;border-style:solid;border-color:#fff}.text-format-wrapper .form-item{background:#f4f4f4;margin:0 0 10px;border-width:0;border-style:solid;border-color:#ddd;padding:9px}.form-item label{color:#1a1a1a;font-weight:normal;font-size:12px;text-transform:none}input.form-autocomplete,input.form-text,textarea.form-textarea,select.form-select{padding:3px;border-width:1px;border-style:solid;border-color:#bfbfbf;background:#fff;color:#1a1a1a;max-width:100%}.fieldset{margin:0 0 10px;display:block;position:relative;min-height:28px;border:0 solid #eee}.item-list h3,.block .block-title,.fieldset-title,.collapsible .fieldset-legend a{display:block;font-size:14px;margin:0;padding:4px 9px 5px;color:#1a1a1a;background:#e0e0e0}.block .block-content,.container-inline .fieldset-content,.fieldset-content{padding:10px 9px 9px;background:#f4f4f4}.page-content .form-item .description{color:#0092d2;border-top:1px solid #e0e0e0}.page-content .form-item .description a{text-decoration:underline}li{list-style:none inside url()}.node-form div.form-type-checkboxes>label,.node-form div.form-type-checkboxes>div.form-checkboxes{display:inline-block}.node-form .form-item-language>label,.node-form .form-item-language>select{display:inline-block}.node-form .form-type-textfield>label,.node-form .form-type-textfield>input.form-text{display:inline-block;margin:0}.node-form .form-type-textfield>label{width:35%}.node-form .form-type-textfield>input.form-text{max-width:60%}.node-form fieldset.filter-wrapper{display:none}.node-form input.fid.form-text{display:none}.node-form .form-region-right{position:relative}.node-form .form-region-right fieldset.form-wrapper{max-width:100%;padding:0;margin:0}.node-form .form-region-right .fieldset-wrapper{padding:0}.node-form .form-region-right input.form-text{width:100%}.vertical-tabs{background:#f4f4f4;border:1px solid #bfbfbf;margin:0 0 10px;position:relative}.vertical-tabs .fieldset-content,.vertical-tabs fieldset.titled .fieldset-content{border:0;padding:10px}.vertical-tabs .fieldset-content .fieldset-content{margin-top:20px}.vertical-tabs-list li a{display:block;text-shadow:#fff 0 1px 0;padding:5px 10px 4px 10px;border-bottom:1px solid #bfbfbf;border-right:1px solid #bfbfbf;color:#494949;background:#e0e0e0}.vertical-tabs-list li.last a{border-bottom:0 solid #bfbfbf}.vertical-tabs-list .selected a,.vertical-tabs-list li:hover a{background:#f4f4f4;color:#1a1a1a}.vertical-tabs-list .selected a{border-right:0 solid #f4f4f4}.vertical-tabs-list .summary{font-size:11px}.page-admin table tr.even{background:#efefef}.page-admin table tr.even td,.page-admin table tr.odd td,.page-admin table tr.even h3,.page-admin table tr.odd h3{background-color:transparent}.page-admin table tr.even:hover,.page-admin table tr.odd:hover{background:#d4efee}.admin-block-description,.help-items ul li,.confirmation ul li,.item-list ul li,.prose .item-list li,.menu li{border-bottom:0 solid #f4f4f4}form .form-actions{background:#eee;border:0 solid #ddd;padding:9px}input.teaser-button,input.form-submit,.node-edit,.button,.node-delete{cursor:pointer;padding:.3em .9em;color:#333;text-align:center;font-size:12px;font-weight:normal;border-width:1px;border-style:solid;border-color:#ddd #ddd #ccc;background:#bdf url();-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}.node-edit,.button,.node-delete{font-size:10px;padding:.1em .6em}input.form-submit:hover,.node-edit:hover,.button:hover,.node-delete:hover{border-color:#ddd #ddd #ccc;-webkit-box-shadow:#ace 0 0 0;color:#bdf;background-color:#848484}input.button-yes,.node-edit{background-color:#ccff2f}input.button-yes:hover,.node-edit:hover{color:#ccff2f}input.button-no,.node-delete{background-color:#ea4b4a}input.button-no:hover,.node-delete:hover{color:#ea4b4a}body.admin-vertical #admin-menu{background:#222;background-image:none}body.admin-vertical #admin-menu-wrapper{margin-left:35px!important}body.admin-vertical.admin-expanded #admin-menu-wrapper{border-left:1px solid #323232;margin-left:260px!important}#admin-toolbar{z-index:1000!important}#views-ui-edit-form div.changed{background-color:#fff98e}#views-ui-edit-form .views-ui-display-tab-bucket h3{font-weight:bold;background-color:#d8d8d8}#views-ui-edit-form .defaulted,#views-ui-edit-form .views-ui-display-tab-bucket .views-display-setting.even,#views-ui-edit-form .views-ui-display-tab-bucket .views-display-setting.odd{color:#666;background-color:#e0e0e0;font-style:italic}#views-ui-edit-form .defaulted a,#views-ui-edit-form .views-ui-display-tab-bucket .views-display-setting.even a,#views-ui-edit-form .views-ui-display-tab-bucket .views-display-setting.odd a{color:#3f80b3}#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting,#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting,#views-ui-edit-form .views-display-setting.overridden,#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting.even,#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting.even,#views-ui-edit-form .views-display-setting.overridden.even,#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting.odd,#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting.odd,#views-ui-edit-form .views-display-setting.overridden.odd{color:#7f7f7f;background-color:#f9f9f9;font-style:normal}#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting a,#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting a,#views-ui-edit-form .views-display-setting.overridden a,#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting.even a,#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting.even a,#views-ui-edit-form .views-display-setting.overridden.even a,#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting.odd a,#views-ui-edit-form .views-ui-display-tab-bucket.overridden .views-display-setting.odd a,#views-ui-edit-form .views-display-setting.overridden.odd a{color:#3188d1}.view .pager{padding:1em 0;margin:0;text-align:right;height:auto}.view .pager ul{display:inline-block;display:moz-inline-stack;*display:inline;*zoom:1;padding:0}.view .pager ul li{height:20px}.view .pager ul li a,.view .pager ul li span{padding:1px 10px 2px}.view .view-filters{padding:1em 0;margin:0 0 1em 0;border:1px solid #CCC;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.view .view-filters>span.title,.view .view-filters>form{display:inline-block;display:moz-inline-stack;*display:inline;*zoom:1;width:auto;position:relative;vertical-align:top}.view .view-filters>span.title{padding:.7em 1em}.view .view-filters .views-exposed-form label{font-weight:normal;font-size:.75em}.view .view-filters .views-exposed-form .form-item{padding:0}.view .view-filters .views-exposed-form .form-item select,.view .view-filters .views-exposed-form .form-item input{font-size:.8em}.view fieldset#edit-select{padding:1em 0;margin:0 0 1em 0;border:1px solid #CCC;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.view fieldset#edit-select legend,.view fieldset#edit-select .fieldset-content{display:inline-block;display:moz-inline-stack;*display:inline;*zoom:1}.view fieldset#edit-select legend{width:auto}.view fieldset#edit-select legend *{background-color:transparent}.view fieldset#edit-select .fieldset-content{padding:0}.view fieldset#edit-select .fieldset-content select,.view fieldset#edit-select .fieldset-content input{font-size:.8em}.view.inline-block-list .views-row{display:inline-block;display:moz-inline-stack;*display:inline;*zoom:1;vertical-align:top;padding:5px;margin:5px;width:250px;min-height:150px;background-color:#e3e3e3;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ddd;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:0 1px 2px rgba(0,0,0,0.1);box-shadow:0 1px 2px rgba(0,0,0,0.1)}.view.inline-block-list .views-row .float-left{float:left}.view.inline-block-list .views-row .float-left>div{margin:0 10px 10px 0}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both}.clearfix{zoom:1}.path-admin-content-nodes span.icon{background-position:0 -30px}
\ No newline at end of file
diff --git a/less/guibik.less b/less/guibik.less
index 77aa98bf..41446c61 100644
--- a/less/guibik.less
+++ b/less/guibik.less
@@ -157,7 +157,10 @@ li{list-style: none inside url();}
   background: #EFEFEF;
 }
 .page-admin table tr{
-	&.even, &.odd{ td, h3 {background-color: transparent;} }
+	&.even, &.odd{ 
+		td, h3 {background-color: transparent;} 
+		&:hover{  background: #D4EFEE;}
+	}
 }
 
 
@@ -182,12 +185,12 @@ input.teaser-button,
 input.form-submit,
 .node-edit, .button, .node-delete{
   cursor:pointer;
-  padding:2px 7px;
+  padding:0.3em 0.9em;
   color:#333;
 
   text-align:center;
 	
-	font-size:10px;
+	font-size:12px;
   font-weight:normal;
   border-width:1px;
   border-style:solid;
@@ -198,6 +201,10 @@ input.form-submit,
 		border-radius: 5px;
 		
 }
+.node-edit, .button, .node-delete{font-size:10px;padding:0.1em 0.6em;}
+
+
+
 input.form-submit:hover,
 .node-edit:hover, .button:hover, .node-delete:hover{
 	border-color:#ddd #ddd #ccc;
@@ -269,10 +276,53 @@ body.admin-vertical.admin-expanded #admin-menu-wrapper{border-left:1px solid #32
 				a{color: #3188D1;}
 		}
 	}	
-
-	
 }
+.view{
+	.pager{
+		padding:1em 0; margin:0; text-align: right; height:auto;
+		ul{
+			.inline-block; padding:0;
+			li{
+        height:20px;
+				a, span{padding:1px 10px 2px;}				
+			}
 
+		}
+	}
+	
+	// EXPOSED
+	.view-filters{
+		padding:1em 0; margin:0 0 1em 0;
+		border: 1px solid  #CCC; .border-radius(5px,5px,5px,5px);
+		
+		&>span.title, &>form{.inline-block;width:auto;position:relative;vertical-align: top;} 
+		&>span.title{padding:0.7em 1em;}
+		.views-exposed-form{ 
+			label{font-weight:normal; font-size:0.75em;}
+			.form-item{padding:0; 
+				select, input{font-size:0.8em;}
+			}
+	 	}
+	}
+
+	// VBO
+	fieldset#edit-select{
+		padding:1em 0; margin:0 0 1em 0;
+		border: 1px solid  #CCC; .border-radius(5px,5px,5px,5px);
+		
+		legend, .fieldset-content{.inline-block;}
+		
+		legend{
+			width:auto;
+			*{background-color: transparent;}
+		}
+		
+		.fieldset-content{
+			padding:0;
+			select, input{font-size:0.8em;}
+		}
+	}
+}
 
 /** media browser */
 .view.inline-block-list{
diff --git a/templates/views-view.tpl.php b/templates/views-view.tpl.php
new file mode 100644
index 00000000..517373f7
--- /dev/null
+++ b/templates/views-view.tpl.php
@@ -0,0 +1,98 @@
+<?php
+/**
+ * @file views-view.tpl.php
+ * Main view template
+ *
+ * Variables available:
+ * - $classes_array: An array of classes determined in
+ *   template_preprocess_views_view(). Default classes are:
+ *     .view
+ *     .view-[css_name]
+ *     .view-id-[view_name]
+ *     .view-display-id-[display_name]
+ *     .view-dom-id-[dom_id]
+ * - $classes: A string version of $classes_array for use in the class attribute
+ * - $css_name: A css-safe version of the view name.
+ * - $css_class: The user-specified classes names, if any
+ * - $header: The view header
+ * - $footer: The view footer
+ * - $rows: The results of the view query, if any
+ * - $empty: The empty text to display if the view is empty
+ * - $pager: The pager next/prev links to display, if any
+ * - $exposed: Exposed widget form/info to display
+ * - $feed_icon: Feed icon to display, if any
+ * - $more: A link to view more, if any
+ *
+ * @ingroup views_templates
+ */
+?>
+<div class="<?php print $classes; ?>">
+  <?php print render($title_prefix); ?>
+  <?php if ($title): ?>
+    <?php print $title; ?>
+  <?php endif; ?>
+  <?php print render($title_suffix); ?>
+  <?php if ($header): ?>
+    <div class="view-header">
+      <?php print $header; ?>
+    </div>
+  <?php endif; ?>
+
+  <?php if ($exposed): ?>
+    <div class="view-filters">
+			<span class="title"><?php print t('Filters'); ?></span>
+      <?php print $exposed; ?>
+    </div>
+  <?php endif; ?>
+
+  <?php if ($pager): ?>
+    <div class="pager">
+			<?php print $pager; ?> 
+		</div>
+  <?php endif; ?>
+
+  <?php if ($attachment_before): ?>
+    <div class="attachment attachment-before">
+      <?php print $attachment_before; ?>
+    </div>
+  <?php endif; ?>
+
+  <?php if ($rows): ?>
+    <div class="view-content">
+      <?php print $rows; ?>
+    </div>
+  <?php elseif ($empty): ?>
+    <div class="view-empty">
+      <?php print $empty; ?>
+    </div>
+  <?php endif; ?>
+
+  <?php if ($pager): ?>
+		<div class="pager">
+    	<?php print $pager; ?>
+		</div>
+  <?php endif; ?>
+
+  <?php if ($attachment_after): ?>
+    <div class="attachment attachment-after">
+      <?php print $attachment_after; ?>
+    </div>
+  <?php endif; ?>
+
+  <?php if ($more): ?>
+    <?php print $more; ?>
+  <?php endif; ?>
+
+  <?php if ($footer): ?>
+    <div class="view-footer">
+      <?php print $footer; ?>
+    </div>
+  <?php endif; ?>
+
+  <?php if ($feed_icon): ?>
+    <div class="feed-icon">
+      <?php print $feed_icon; ?>
+    </div>
+  <?php endif; ?>
+
+</div><?php /* class view */ ?>