minor css fixes

git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/user/news-feed@134851 82a268e6-3cf1-43bd-a215-b396298e98cf

src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.java

@@ -4,6 +4,7 @@ import org.gcube.portal.databook.shared.Attachment;
 import org.gcube.portlets.widgets.imagepreviewerwidget.client.EnhancedImage;
 import org.gcube.portlets.widgets.imagepreviewerwidget.client.ui.Carousel;
 
+import com.github.gwtbootstrap.client.ui.Image;
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.dom.client.Style.Cursor;
 import com.google.gwt.dom.client.Style.Unit;
@@ -14,7 +15,6 @@ import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.user.client.ui.Anchor;
 import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.HTMLPanel;
-import com.google.gwt.user.client.ui.Image;
 import com.google.gwt.user.client.ui.Label;
 import com.google.gwt.user.client.ui.Widget;
 
@@ -73,7 +73,8 @@ public class AttachmentPreviewer extends Composite {
 
 		// set image preview
 		imagePreview.setUrl(a.getThumbnailURL());
-
+		imagePreview.setStyleName("image-preview-attachment");
+		
 		// set file name (be careful on file name length)
 		String shownName = a.getName().length() > 21 ? a.getName().substring(0, 18) + "..." : a.getName();
 		fileNameLabel.setText(shownName);
@@ -83,6 +84,7 @@ public class AttachmentPreviewer extends Composite {
 		downloadLabel.setText("Download");
 		downloadLabel.setHref(attachment.getUri());
 		downloadLabel.setTarget("_blank");
+		
 
 		// preview in case of an image
 		if(a.getMimeType().contains("image/")){

src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.ui.xml

@@ -1,19 +1,7 @@
 <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
 <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
-	xmlns:g="urn:import:com.google.gwt.user.client.ui">
+	xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:b="urn:import:com.github.gwtbootstrap.client.ui">
 	<ui:style>
-	.image-preview {
-		align: left;
-		margin: 5px;
-		display: inline;
-		height: 40px;
-		width: 40px;
-		overflow: hidden;
-		float: left;
-		border: 1px solid #DDD;
-		border-radius: 4px;
-	}
-	
 	.container-style {
 		padding: 5px;
 		font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
@@ -51,7 +39,7 @@
 	}
 	</ui:style>
 	<g:HTMLPanel styleName="{style.container-style}" ui:field="attachmentContainer">
-		<g:Image styleName="{style.image-preview}" ui:field="imagePreview"></g:Image>
+		<b:Image ui:field="imagePreview"></b:Image>
 		<g:VerticalPanel styleName="{style.display-inline-style}">
 			<g:Label ui:field="fileNameLabel" styleName="{style.label-filename-style}"></g:Label>
 			<g:HorizontalPanel>

src/main/java/org/gcube/portlets/user/newsfeed/client/ui/Placeholder.java

@@ -3,6 +3,7 @@ import com.google.gwt.core.shared.GWT;
 import com.google.gwt.dom.client.Style.Unit;
 import com.google.gwt.event.dom.client.ClickEvent;
 import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.user.client.Window;
 import com.google.gwt.user.client.ui.Anchor;
 import com.google.gwt.user.client.ui.FlowPanel;
 import com.google.gwt.user.client.ui.SimplePanel;
@@ -17,7 +18,7 @@ import com.google.gwt.user.client.ui.WidgetCollection;
 public class Placeholder extends FlowPanel {
 
 	private static final String SHOW_OTHER_ATTACHMENTS_LABEL = "Show All";
-	
+
 	// check if we need to show more attachments
 	private boolean appendShowMoreLabel;
 
@@ -32,7 +33,13 @@ public class Placeholder extends FlowPanel {
 		// check the size 
 		int size = listOfChildren.size();
 
-		if(size % 2 == 0){
+		// look at NewsFeed.css ...
+		if(Window.getClientWidth() <= 1128){
+			
+			add((Widget)atPrev);
+			atPrev.changeAttachmentWidth(92, Unit.PCT);
+		}
+		else if(size % 2 == 0){
 			// in this case the next attachment we are going to add remains with the same width
 			add((Widget)atPrev);
 			GWT.log("added without changing size");
@@ -61,17 +68,17 @@ public class Placeholder extends FlowPanel {
 	public void appendShowMoreLabel(){
 
 		if(appendShowMoreLabel){
-			
+
 			final WidgetCollection listOfChildren = this.getChildren();
 
 			final SimplePanel sp = new SimplePanel();
 			sp.setStyleName("centered");
-			
+
 			final Anchor showMoreAttachments = new Anchor(SHOW_OTHER_ATTACHMENTS_LABEL);
 			showMoreAttachments.setTitle("Show all the attached files");
 			showMoreAttachments.setStyleName("link");
 			sp.add(showMoreAttachments);
-			
+
 			showMoreAttachments.addClickHandler(new ClickHandler() {
 
 				@Override

src/main/webapp/NewsFeed.css

@@ -1,6 +1,4 @@
-
 /* Media queries for phones at the bottom pf this page */
-
 table {
 	border-collapse: separate !important;
 	border-spacing: 0;
@@ -11,6 +9,18 @@ table {
 	font-size: 20px;
 }
 
+.image-preview-attachment {
+	align: left !important;
+	margin: 5px !important;
+	display: inline !important;
+	height: 40px !important;
+	width: 40px !important;
+	overflow: hidden !important;
+	float: left !important;
+	border: 1px solid #DDD !important;
+	border-radius: 4px !important;
+}
+
 /* Superpose TextArea and Highlight DIV trick starts here */
 #comment-supercontainer {
 	position: relative;
@@ -158,7 +168,8 @@ div#comment-inputContainer textarea.post-comment.comment-dark-color {
 
 .feed-filters li {
 	color: #444;
-	font-family: 'Lucida Grande', Verdana, 'Bitstream Vera Sans', Arial, sans-serif;
+	font-family: 'Lucida Grande', Verdana, 'Bitstream Vera Sans', Arial,
+		sans-serif;
 	font-size: 15px;
 	float: left;
 	height: 2em;
@@ -552,6 +563,9 @@ a.person-link {
 	.linkpreview-desc, .linkpreview-url, .linkpreview-image {
 		display: none;
 	}
+	.image-preview-attachment {
+		display: none !important;
+	}
 	.new-feeds-show {
 		width: 260px;
 	}
@@ -568,7 +582,6 @@ a.person-link {
 	}
 }
 
-
 @media screen and (max-width: 1128px) {
 	.commentsPanel {
 		width: 300px;
@@ -585,6 +598,9 @@ a.person-link {
 	.linkpreview-desc, .linkpreview-url, .linkpreview-image {
 		display: none;
 	}
+	.image-preview-attachment {
+		display: none !important;
+	}
 	.div-table-col {
 		display: block;
 		padding-left: 10px;