From c42d710840006b3b1ade51553d0eb31dd589fc86 Mon Sep 17 00:00:00 2001 From: Massimiliano Assante Date: Thu, 5 May 2016 17:07:36 +0000 Subject: [PATCH] responsivness completed git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/user/news-feed@128484 82a268e6-3cf1-43bd-a215-b396298e98cf --- .../newsfeed/client/panels/NewsFeedPanel.java | 8 +- .../newsfeed/client/ui/ShowMoreFeeds.java | 14 +- .../user/newsfeed/server/NewsServiceImpl.java | 4 +- src/main/webapp/NewsFeed.css | 128 ++++++++++++------ 4 files changed, 90 insertions(+), 64 deletions(-) diff --git a/src/main/java/org/gcube/portlets/user/newsfeed/client/panels/NewsFeedPanel.java b/src/main/java/org/gcube/portlets/user/newsfeed/client/panels/NewsFeedPanel.java index f853d39..a3dd2b0 100644 --- a/src/main/java/org/gcube/portlets/user/newsfeed/client/panels/NewsFeedPanel.java +++ b/src/main/java/org/gcube/portlets/user/newsfeed/client/panels/NewsFeedPanel.java @@ -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); diff --git a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/ShowMoreFeeds.java b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/ShowMoreFeeds.java index 8142862..b145793 100644 --- a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/ShowMoreFeeds.java +++ b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/ShowMoreFeeds.java @@ -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 { } - 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()); - } + } diff --git a/src/main/java/org/gcube/portlets/user/newsfeed/server/NewsServiceImpl.java b/src/main/java/org/gcube/portlets/user/newsfeed/server/NewsServiceImpl.java index 5bae44a..59052b5 100644 --- a/src/main/java/org/gcube/portlets/user/newsfeed/server/NewsServiceImpl.java +++ b/src/main/java/org/gcube/portlets/user/newsfeed/server/NewsServiceImpl.java @@ -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; } /** diff --git a/src/main/webapp/NewsFeed.css b/src/main/webapp/NewsFeed.css index 0fcd0ec..0685586 100644 --- a/src/main/webapp/NewsFeed.css +++ b/src/main/webapp/NewsFeed.css @@ -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; + } +} \ No newline at end of file