Fixed layout of upload/share buttons when the page is shrink (they are now within a panel with inline-block property set)

git-svn-id: https://svn.research-infrastructures.eu/d4science/gcube/trunk/portlets/user/share-updates@128787 82a268e6-3cf1-43bd-a215-b396298e98cf

.settings/org.eclipse.wst.common.component

@@ -5,9 +5,6 @@
     <wb-resource deploy-path="/WEB-INF/classes" source-path="/src/main/java"/>
         <wb-resource deploy-path="/WEB-INF/classes" source-path="/target/generated-sources/gwt"/>
         <wb-resource deploy-path="/WEB-INF/classes" source-path="/src/main/resources"/>
-        <dependent-module archiveName="gcube-widgets-2.0.0-SNAPSHOT.jar" deploy-path="/WEB-INF/lib" handle="module:/resource/gcube-widgets/gcube-widgets">
-            <dependency-type>uses</dependency-type>
-        </dependent-module>
     <property name="java-output-path" value="/${module}/target/www/WEB-INF/classes"/>
         <property name="context-root" value="share-updates"/>
   </wb-module>

src/main/java/org/gcube/portlets/user/shareupdates/client/view/ShareUpdateForm.java

@@ -173,8 +173,6 @@ public class ShareUpdateForm extends Composite {
 		// set the style and on which devices we show the buttons
 		submitButtonScreen.addStyleName("upload-btn-m");
 		attachButtonScreen.addStyleName("upload-btn-m");
-		submitButtonPhoneTablet.addStyleName("upload-btn-m");
-		attachButtonPhoneTablet.addStyleName("upload-btn-m");
 
 		submitButtonScreen.setShowOn(Device.DESKTOP);
 		attachButtonScreen.setShowOn(Device.DESKTOP);

src/main/java/org/gcube/portlets/user/shareupdates/client/view/ShareUpdateForm.ui.xml

@@ -6,6 +6,12 @@
 	.attachment-container {
 		width: 100%;
 	}
+	
+	.paragraph-inline {
+		display: inline-block;
+		width: 25%;
+		vertical-align: middle;
+	}
 	</ui:style>
 	<g:HTMLPanel ui:field="mainPanel">
 		<table class="share-updates-table">
@@ -43,17 +49,19 @@
 						<b:ListBox styleName="wizardListbox" ui:field="notifyListbox"
 							visible="false" />
 
-						<b:Button ui:field="attachButtonScreen" icon="UPLOAD_ALT"
-							visible="false" />
-						<b:Button ui:field="submitButtonScreen" type="PRIMARY"
-							text="Share" visible="false" />
+						<g:HorizontalPanel styleName="{style.paragraph-inline}">
+							<b:Button ui:field="attachButtonScreen" icon="UPLOAD_ALT"
+								visible="false" />
+							<b:Button ui:field="submitButtonScreen" type="PRIMARY"
+								text="Share" visible="false" />
 
-						<!-- Other devices are  smartphones and tablet-->
+						</g:HorizontalPanel>
+
+						<!-- Other devices are smartphones and tablet -->
 						<b:Button ui:field="attachButtonPhoneTablet" icon="UPLOAD_ALT"
 							visible="false" />
 						<b:Button ui:field="submitButtonPhoneTablet" type="PRIMARY"
 							text="Share" visible="false" />
-
 					</b:Form>
 				</td>
 			</tr>

src/main/webapp/ShareUpdates.css

@@ -1,72 +1,18 @@
 @media screen and (max-width: 1430px) {
-	select.wizardListbox {
-		width: 65% !important;
-		background: #F2F2F2 url(images/white-grad.png) repeat-x scroll left top;
-		border-color: #BBB;
-		color: #444;
-		font-size: 12px;
-		border-width: 1px;
-		border-style: solid;
-		cursor: pointer;
-		cursor: hand;
-		margin-left: 0px;
-		-moz-border-radius: 4px;
-		-webkit-border-radius: 4px;
-		border-radius: 4px;
-		margin-top: 2px;
-		margin-bottom: 5px;
-	}
-	
 	.upload-btn-m {
-		margin-right: 10px;
-		margin-bottom: 15px;
-		width: 45px;
+		width: 40px !important;
 	}
 }
 
 @media screen and (max-width: 1200px) {
-	select.wizardListbox {
-		width: 60% !important;
-		background: #F2F2F2 url(images/white-grad.png) repeat-x scroll left top;
-		border-color: #BBB;
-		color: #444;
-		font-size: 12px;
-		border-width: 1px;
-		border-style: solid;
-		cursor: pointer;
-		cursor: hand;
-		margin-left: 0px;
-		-moz-border-radius: 4px;
-		-webkit-border-radius: 4px;
-		border-radius: 4px;
-		margin-top: 2px;
-		margin-bottom: 5px;
-	}
-	
 	.upload-btn-m {
-		margin-right: 10px;
-		margin-bottom: 15px;
-		width: 35px;
+		width: 35px !important;
 	}
 }
 
-@media screen and (max-width: 979px) {
+@media screen and (max-width: 1050px) {
 	select.wizardListbox {
 		width: 100% !important;
-		background: #F2F2F2 url(images/white-grad.png) repeat-x scroll left top;
-		border-color: #BBB;
-		color: #444;
-		font-size: 12px;
-		border-width: 1px;
-		border-style: solid;
-		cursor: pointer;
-		cursor: hand;
-		margin-left: 0px;
-		-moz-border-radius: 4px;
-		-webkit-border-radius: 4px;
-		border-radius: 4px;
-		margin-top: 2px;
-		margin-bottom: 5px;
 	}
 	.attachment-container-full-width {
 		padding: 5px;
@@ -134,6 +80,7 @@ td>form {
 }
 
 .upload-btn-m {
+	width: 45px;
 	margin-right: 10px;
 	margin-bottom: 15px;
 }