responsivness completed

git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/user/news-feed@128484 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
Massimiliano Assante 2016-05-05 17:07:36 +00:00
parent ad3689ba5d
commit c42d710840
4 changed files with 90 additions and 64 deletions

View File

@ -65,6 +65,7 @@ import org.gcube.portlets.widgets.userselection.client.events.UsersFetchedEvent;
import org.gcube.portlets.widgets.userselection.shared.ItemSelectableBean;
import org.jsonmaker.gwt.client.base.Defaults;
import com.github.gwtbootstrap.client.ui.Row;
import com.google.gwt.core.client.GWT;
import com.google.gwt.core.client.RunAsyncCallback;
import com.google.gwt.dom.client.Document;
@ -106,7 +107,7 @@ public class NewsFeedPanel extends Composite {
private HorizontalPanel filterPanelWrapper = new HorizontalPanel();
private FilterPanel filterPanel;
private SimplePanel newUpdatesPanel = new SimplePanel();
private VerticalPanel showMoreUpdatesPanel = new VerticalPanel();
private Row showMoreUpdatesPanel = new Row();
private VerticalPanel newsPanel = new VerticalPanel();
private NewFeedsAvailable newsFeedAlert;
@ -262,7 +263,7 @@ public class NewsFeedPanel extends Composite {
initWidget(mainPanel);
newsPanel.clear();
newsPanel.setWidth("100%");
showMoreUpdatesPanel.setWidth("100%");
showMoreUpdatesPanel.setWidth("60%");
newsPanel.setHeight("300px");
newsPanel.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);
newsPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_TOP);
@ -621,7 +622,6 @@ public class NewsFeedPanel extends Composite {
// add widget to lookup more feeds: if the size of the returned data is less
// than the required disable this feature.
if(feeds.size() == SEARCHED_FEEDS_TO_SHOW){
showMoreUpdatesPanel.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);
showMoreWidget = new ShowMoreFeeds(eventBus);
showMoreUpdatesPanel.add(showMoreWidget);
newsPanel.add(showMoreUpdatesPanel);
@ -783,6 +783,7 @@ public class NewsFeedPanel extends Composite {
newsPanel.setHeight("");
newsPanel.setHorizontalAlignment(HasAlignment.ALIGN_LEFT);
newsPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_TOP);
for (EnhancedFeed feed : feeds) {
newsPanel.add(new TweetTemplate(false, showFeedTimelineSource, myUserInfo, feed, eventBus)); //in the view
allUpdates.add(feed); //in the model
@ -793,7 +794,6 @@ public class NewsFeedPanel extends Composite {
//if you are showing more than feedsMaxPerCategory-1 feeds there is probably more
if (feeds.size() >= NewsConstants.FEEDS_MAX_PER_CATEGORY-1 && (!isInfrastructure)) {
GWT.log("Show MORE " + NewsConstants.FEEDS_NO_PER_CATEGORY);
showMoreUpdatesPanel.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);
showMoreWidget = new ShowMoreFeeds(eventBus);
showMoreUpdatesPanel.add(showMoreWidget);
newsPanel.add(showMoreUpdatesPanel);

View File

@ -1,15 +1,11 @@
package org.gcube.portlets.user.newsfeed.client.ui;
import org.gcube.portlets.user.newsfeed.client.event.ShowMoreUpdatesEvent;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.dom.client.Style.Visibility;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.shared.HandlerManager;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HTMLPanel;
@ -25,15 +21,11 @@ public class ShowMoreFeeds extends Composite {
UiBinder<Widget, ShowMoreFeeds> {
}
private HandlerManager eventBus;
@UiField HTML caption;
@UiField HTMLPanel panel;
public ShowMoreFeeds(HandlerManager eventBus) {
initWidget(uiBinder.createAndBindUi(this));
this.eventBus = eventBus;
panel.getElement().getStyle().setMarginTop(10, Unit.PX);
caption.addStyleName("new-feeds-show");
caption.getElement().getStyle().setBackgroundColor("transparent");
@ -41,11 +33,7 @@ public class ShowMoreFeeds extends Composite {
caption.setHTML("Show more feeds");
//done after
panel.getElement().getStyle().setVisibility(Visibility.HIDDEN);
panel.setWidth("260px");
}
@UiHandler("caption")
void onClick(ClickEvent e) {
eventBus.fireEvent(new ShowMoreUpdatesEvent());
}
}

View File

@ -84,7 +84,7 @@ public class NewsServiceImpl extends RemoteServiceServlet implements NewsService
private static final String SESSION_ADMIN_ATTR = "SESSION_ADMIN_ATTR";
private static final String USER_SETTINGS_ATTR = "USER_SETTINGS_ATTR";
public static final String TEST_SCOPE = "/gcube/devsec/devVRE";
public static final String TEST_SCOPE = "/gcube/devsec/OpenAireDevVRE";
private String APP_ID;
@ -139,7 +139,7 @@ public class NewsServiceImpl extends RemoteServiceServlet implements NewsService
*/
public String getDevelopmentUser() {
String user = NewsConstants.TEST_USER;
//user = "costantino.perciante";
// user = "costantino.perciante";
return user;
}
/**

View File

@ -1,48 +1,8 @@
@import url(https://fonts.googleapis.com/css?family=Architects+Daughter);
/* For phones*/
@media screen and (max-width: 520px) {
#comment-highlighterContainer {
width: 260px;
}
.comment-highlighter {
width: 230px;
}
div#comment-inputContainer textarea.post-comment {
width: 230px;
}
.link-preview {
width: 260px;
}
div.attachment-preview-container {
width: 300px;
}
.linkpreview-desc, .linkpreview-url, .linkpreview-image {
display: none;
}
}
@media screen and (max-width: 1024px) {
.link-preview {
width: 260px;
}
div.attachment-preview-container {
width: 300px;
}
.linkpreview-desc, .linkpreview-url, .linkpreview-image {
display: none;
}
}
/**
*Media queries for phones at the bottom pf this page
*
*/
table {
border-collapse: separate !important;
border-spacing: 0;
@ -161,6 +121,7 @@ div#comment-inputContainer textarea.post-comment.comment-dark-color {
opacity: 1;
background: #D6E2FC;
height: 18px;
width: 70%;
}
.new-feeds-available:hover {
@ -178,7 +139,7 @@ div#comment-inputContainer textarea.post-comment.comment-dark-color {
.feed-filters {
margin-top: -5px;
width: 600px;
width: 90%;
}
.feed-filters ul {
@ -588,3 +549,80 @@ a.person-link {
transition: background .45s ease-in-out;
-moz-transition: background .45s ease-in-out;
-webkit-transition: background .45s ease-in-out;
}
/* For phones*/
@media screen and (max-width: 520px) {
#comment-highlighterContainer {
width: 260px;
}
.comment-highlighter {
width: 230px;
}
div#comment-inputContainer textarea.post-comment {
width: 230px;
}
.link-preview {
width: 260px;
}
div.attachment-preview-container {
width: 300px;
}
.linkpreview-desc, .linkpreview-url, .linkpreview-image {
display: none;
}
.new-feeds-show {
width: 260px;
}
.div-table {
padding-left: 0;
padding-right: 0;
margin-left: -15px;
}
.tweet-actions {
width: 280px;
}
}
@media screen and (max-width: 1024px) {
.link-preview {
width: 260px;
}
div.attachment-preview-container {
width: 300px;
}
.new-feeds-show {
width: 260px;
}
.linkpreview-desc, .linkpreview-url, .linkpreview-image {
display: none;
}
.div-table-col {
display: block;
padding-left: 10px;
padding-bottom: 5px;
}
.div-table {
padding-left: 0;
padding-right: 0;
margin-left: -10px;
}
.tweet-actions {
width: 280px;
}
}