Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Changeset list revamp #204

Closed
wants to merge 9 commits into from

4 participants

@samanpwbb

This pull request reworks the changeset list page so the map is fixed and the changesets scroll alongside the map.

Here's a screenshot:
Screen Shot 2013-01-25 at 5 22 22 PM

Addresses issues brought up in #203

@tomhughes
Owner

I've pushed this to http://tomh.apis.dev.openstreetmap.org/ for people to have a look at. I think the main thing I'm not sure about is the limiting of the heading to the left hand column, as it's not very consistent with all the other pages.

@samanpwbb

@tomhughes I hear you! This is definitely a little disjointed right now, but I'd say a step in the right direction. In fact, I'd like to move some other pages closer to this, rather than the other way around. I like the idea of a significant map presence on more OSM pages: make the whole site feel like "panels on top of a map" rather than webpages with little map viewports every once in a while.

@lxbarth

From staging I can't tell: is the map sticky now? The problem right now is that when I scroll down the changelist, I lose the map.

@samanpwbb

@lxbarth it's a lot more like the owlviewer design I originally did. Basically, map is totally sticky and the changeset list is what scrolls.

@tomhughes
Owner

I've added some more changesets on the staging instance now to make things a bit clearer.

@samanpwbb

This is making me realize that the 'no changesets' state needs to be better, and needs to still show a map.

@jfirebaugh

I think the main thing I'm not sure about is the limiting of the heading to the left hand column, as it's not very consistent with all the other pages.

What this could be consistent with is the look and feel of the "Data" and "Export" sidebars, which would make sense, as "History" appears to be another tab next to "Export" -- but currently behaves quite differently.

@samanpwbb samanpwbb referenced this pull request
Closed

Fixed changeset map #298

@samanpwbb

Replaced with #298

@samanpwbb samanpwbb closed this
@samanpwbb samanpwbb referenced this pull request
Closed

Fixed changeset map #299

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
View
62 app/assets/stylesheets/common.css.scss
@@ -114,6 +114,12 @@ h6:first-child {
margin-top: 0;
}
+.wrapper {
+ margin-left: 185px;
+ border-left: 1px solid #ccc;
+ text-align: left;
+}
+
.column-1 {
width: 50%;
margin-bottom: 20px;
@@ -167,6 +173,8 @@ table {
#left {
position: absolute;
height: 100%;
+ left: 0;
+ top: 0;
width: 185px;
font-size: 11px;
line-height: 1.1;
@@ -424,10 +432,12 @@ table {
.site-edit #top-bar,
.site-index #top-bar,
-.site-export #top-bar {
+.site-export #top-bar,
+.changeset-list #top-bar {
position: fixed;
left: 0;
right: 0;
+ top: 0;
}
#tabnav {
@@ -535,13 +545,15 @@ table {
}
.site-index .leaflet-top,
-.site-export .leaflet-top {
+.site-export .leaflet-top,
+.changeset-list .leaflet-top {
top: 10px !important;
.leaflet-control {
margin-top: 0px !important;
}
}
+.changeset-list #map .olControlScaleLine,
.site-index #map .olControlScaleLine,
.site-export #map .olControlScaleLine {
left: 10px !important;
@@ -770,6 +782,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
position: relative;
}
+/* Exceptions for big map */
.site-edit #content,
.site-index #content,
.site-export #content {
@@ -780,12 +793,6 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
border-left: 1px solid #ccc;
}
-.wrapper {
- margin-left: 185px;
- border-left: 1px solid #ccc;
- text-align: left;
-}
-
.site-edit #content {
top: 30px;
}
@@ -894,10 +901,34 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
/* Rules for the changeset list shown by the history tab etc */
+.changeset-list #content {
+ padding: 0;
+ height: 100%;
+ overflow: auto;
+ margin-top: 30px;
+}
+
+.changeset-list .wrapper {
+ position: absolute;
+ right: 45%;
+ height: 100%;
+ overflow: hidden;
+ margin-top: 0;
+ margin-left: 0;
+ left: 185px;
+ text-align: left;
+}
+
+.changeset-list ul.secondary-actions.pager {
+ padding: 10px 20px;
+ margin: 0;
+ display: block;
+}
+
#changeset_list {
width: 100%;
ul {
- padding: 10px 0;
+ padding: 10px 20px;
margin-bottom: 0px;
border-top: 1px solid #ccc;
&:last-child {
@@ -916,14 +947,13 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
}
#changeset_list_map {
- position: absolute;
- bottom: 20px;
- top: 20px;
- right: 20px;
+ position: fixed;
+ bottom: 0px;
+ top: 30px;
+ right: 0px;
width: 45%;
- min-height: 398px;
- max-height: 598px;
- border: 1px solid #ccc;
+ overflow: hidden;
+ border-left: 1px solid #ccc;
}
/* Rules for the data browser */
View
22 app/assets/stylesheets/small.css.scss
@@ -26,7 +26,8 @@ h2, h3, h4 {
.site-edit #top-bar,
.site-index #top-bar,
-.site-export #top-bar {
+.site-export #top-bar,
+.changeset-list #top-bar {
position: relative;
}
@@ -249,13 +250,30 @@ p.search_results_entry {
clear: both;
}
+.changeset-list #content {
+ padding: 0px;
+ height: 100%;
+ overflow: auto;
+ margin-top: 0px;
+}
+
+.changeset-list .wrapper {
+ position: relative;
+ right: auto;
+ height: auto;
+ overflow: auto;
+ margin-top: auto;
+ left: auto;
+ text-align: left;
+}
+
#changeset_list_map {
position: relative;
width: 100%;
right: 0;
left: 0;
top: 0px;
- margin-bottom: 20px;
+ margin-bottom: 0px;
float: none;
height: 300px !important;
max-height: auto;
View
12 app/views/changeset/list.html.erb
@@ -2,8 +2,7 @@
<%= javascript_include_tag "changeset" %>
<% end -%>
-<% content_for :heading do %>
-
+<div class='content-heading'>
<h1><%= @heading %></h1>
<ul class='secondary-actions clearfix'>
<li><%= raw(@description) %></li>
@@ -11,16 +10,12 @@
<li><%= atom_link_to params.merge({ :page => nil, :action => :feed }) %></li>
<% end -%>
</ul>
-
-<% end %>
-
+</div>
<%= render :partial => 'changeset_paging_nav' %>
<% if @edits.size > 0 %>
<%= render :partial => 'map' %>
- <div class='column-1'>
<%= render :partial => 'changesets', :locals => { :showusername => !params.has_key?(:display_name) } %>
- </div>
<%= render :partial => 'changeset_paging_nav' %>
<% elsif @user and @user.display_name == params[:display_name] %>
<h4><%= t('changeset.list.empty_user_html') %></h4>
@@ -32,4 +27,5 @@
<% content_for :head do -%>
<%= auto_discovery_link_tag :atom, params.merge({ :page => nil, :action => :feed }) %>
<% end -%>
-<% end -%>
+<% end -%>
+</div>
Something went wrong with that request. Please try again.