add profile image and fix exploreMaps bar

This commit is contained in:
Connor Turland 2016-08-12 05:03:28 +00:00
parent b4c75649ba
commit dc60c3f3ed
8 changed files with 82 additions and 60 deletions

View file

@ -16,7 +16,7 @@ Metamaps.Header = {
changeSection: function (signedIn, section, userAvatar, userName) {
ReactDOM.render(
React.createElement(Metamaps.ReactComponents.Header, { signedIn: signedIn, section: section, userAvatar: userAvatar, userName: userName }),
document.getElementById('headerMenuItems')
document.getElementById('exploreMapsHeader')
);
}
}

View file

@ -16,6 +16,9 @@
width: 96%;
padding: 0 2%;
}
.homeWrapper.homeText {
margin-top: 80px;
}
.homeTitle {
text-align: left;
}
@ -37,7 +40,20 @@
}
#yield {
margin-top: 50px;
height: 100%;
}
.new_session, .new_user, .edit_user, .login, .forgotPassword {
position: relative;
top: auto;
left: auto;
width: 78%;
padding: 16px 10%;
margin: 50px auto 0 auto;
}
.centerGreyForm input[type="text"], .centerGreyForm input[type="email"], .centerGreyForm input[type="password"] {
width: 100%;
}
.wrapper div.mapInfoBox {
@ -94,4 +110,15 @@
#mobile_menu li {
padding: 10px;
list-style: none;
}
li.mobileMenuUser {
border-bottom: 1px solid #BBB;
}
.mobileMenuUser img {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}

View file

@ -13,8 +13,9 @@
<% end %>
<% if current_user %>
<!-- we should add a page where they can create a new map -->
<li>
Signed in as: <%= current_user.name %>
<li class="mobileMenuUser">
<%= image_tag current_user.image.url(:sixtyfour), :size => "32x32" %>
<span><%= current_user.name %></span>
</li>
<li>
<%= link_to "My Maps", explore_mine_path %>

View file

@ -45,12 +45,7 @@
<%= render :partial => 'layouts/lowermapelements' %>
<div id="exploreMaps"></div>
<div id="exploreMapsHeader">
<div className="exploreMapsBar exploreElement">
<div id="headerMenuItems" className="exploreMapsMenu">
</div>
</div>
</div>
<div id="exploreMapsHeader"></div>
<div id="infovis"></div>
<%= render :partial => 'layouts/mobilemenu' %>
<div id="instructions">

View file

@ -33,14 +33,7 @@
<% end %>
<%= render :partial => 'layouts/lowermapelements' %>
<div id="exploreMapsHeader">
<div className="exploreMapsBar exploreElement">
<div className="exploreMapsMenu">
<div id="headerMenuItems" className="exploreMapsCenter">
</div>
</div>
</div>
</div>
<div id="exploreMapsHeader"></div>
<div id="loading"></div>
</div>

View file

@ -15,6 +15,7 @@
#%>
<% content_for :title, @topic.name + " | Metamaps" %>
<% content_for :mobile_title, @topic.name %>
<script>
Metamaps.currentSection = "topic";
Metamaps.currentPage = <%= @topic.id.to_s %>;

View file

@ -52,5 +52,6 @@
</div>
<div id="accountPageLoading"></div>
<%= form.submit "Update", class: "update", onclick: "Metamaps.Account.showLoading()" %>
<div class="clearfloat"></div>
<% end %>
</div>

View file

@ -33,48 +33,52 @@ class Header extends Component {
const apps = section == "registered" || section == "authorized"
return (
<div className="exploreMapsCenter">
<MapLink show={signedIn && explore}
href="/explore/mine"
linkClass={activeClass("my")}
text="My Maps"
/>
<MapLink show={signedIn && explore}
href="/explore/shared"
linkClass={activeClass("shared")}
text="Shared With Me"
/>
<MapLink show={explore}
href={signedIn ? "/" : "/explore/active"}
linkClass={activeClass("active")}
text="Recently Active"
/>
<MapLink show={!signedIn && explore}
href="/explore/featured"
linkClass={activeClass("featured")}
text="Featured Maps"
/>
<div className="exploreMapsBar exploreElement">
<div className="exploreMapsMenu">
<div className="exploreMapsCenter">
<MapLink show={signedIn && explore}
href="/explore/mine"
linkClass={activeClass("my")}
text="My Maps"
/>
<MapLink show={signedIn && explore}
href="/explore/shared"
linkClass={activeClass("shared")}
text="Shared With Me"
/>
<MapLink show={explore}
href={signedIn ? "/" : "/explore/active"}
linkClass={activeClass("active")}
text="Recently Active"
/>
<MapLink show={!signedIn && explore}
href="/explore/featured"
linkClass={activeClass("featured")}
text="Featured Maps"
/>
{mapper ? (
<div className='exploreMapsButton active mapperButton'>
<img className='exploreMapperImage' width='24' height='24' src={this.props.userAvatar} />
<div className='exploreMapperName'>{this.props.userName}&rsquo;s Maps</div>
<div className='clearfloat'></div>
{mapper ? (
<div className='exploreMapsButton active mapperButton'>
<img className='exploreMapperImage' width='24' height='24' src={this.props.userAvatar} />
<div className='exploreMapperName'>{this.props.userName}&rsquo;s Maps</div>
<div className='clearfloat'></div>
</div>
) : null }
<MapLink show={apps}
href="/oauth/applications"
linkClass={"activeMaps exploreMapsButton" + (section == "registered" ? " active" : "")}
data-bypass="true"
text="Registered Apps"
/>
<MapLink show={apps}
href="/oauth/applications"
linkClass={"activeMaps exploreMapsButton" + (section == "authorized" ? " active" : "")}
data-bypass="true"
text="Authorized Apps"
/>
</div>
) : null }
<MapLink show={apps}
href="/oauth/applications"
linkClass={"activeMaps exploreMapsButton" + (section == "registered" ? " active" : "")}
data-bypass="true"
text="Registered Apps"
/>
<MapLink show={apps}
href="/oauth/applications"
linkClass={"activeMaps exploreMapsButton" + (section == "authorized" ? " active" : "")}
data-bypass="true"
text="Authorized Apps"
/>
</div>
</div>
)
}