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) { changeSection: function (signedIn, section, userAvatar, userName) {
ReactDOM.render( ReactDOM.render(
React.createElement(Metamaps.ReactComponents.Header, { signedIn: signedIn, section: section, userAvatar: userAvatar, userName: userName }), 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%; width: 96%;
padding: 0 2%; padding: 0 2%;
} }
.homeWrapper.homeText {
margin-top: 80px;
}
.homeTitle { .homeTitle {
text-align: left; text-align: left;
} }
@ -37,7 +40,20 @@
} }
#yield { #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 { .wrapper div.mapInfoBox {
@ -94,4 +110,15 @@
#mobile_menu li { #mobile_menu li {
padding: 10px; 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 %> <% end %>
<% if current_user %> <% if current_user %>
<!-- we should add a page where they can create a new map --> <!-- we should add a page where they can create a new map -->
<li> <li class="mobileMenuUser">
Signed in as: <%= current_user.name %> <%= image_tag current_user.image.url(:sixtyfour), :size => "32x32" %>
<span><%= current_user.name %></span>
</li> </li>
<li> <li>
<%= link_to "My Maps", explore_mine_path %> <%= link_to "My Maps", explore_mine_path %>

View file

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

View file

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

View file

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

View file

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

View file

@ -33,48 +33,52 @@ class Header extends Component {
const apps = section == "registered" || section == "authorized" const apps = section == "registered" || section == "authorized"
return ( return (
<div className="exploreMapsCenter"> <div className="exploreMapsBar exploreElement">
<MapLink show={signedIn && explore} <div className="exploreMapsMenu">
href="/explore/mine" <div className="exploreMapsCenter">
linkClass={activeClass("my")} <MapLink show={signedIn && explore}
text="My Maps" href="/explore/mine"
/> linkClass={activeClass("my")}
<MapLink show={signedIn && explore} text="My Maps"
href="/explore/shared" />
linkClass={activeClass("shared")} <MapLink show={signedIn && explore}
text="Shared With Me" href="/explore/shared"
/> linkClass={activeClass("shared")}
<MapLink show={explore} text="Shared With Me"
href={signedIn ? "/" : "/explore/active"} />
linkClass={activeClass("active")} <MapLink show={explore}
text="Recently Active" href={signedIn ? "/" : "/explore/active"}
/> linkClass={activeClass("active")}
<MapLink show={!signedIn && explore} text="Recently Active"
href="/explore/featured" />
linkClass={activeClass("featured")} <MapLink show={!signedIn && explore}
text="Featured Maps" 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} /> {mapper ? (
<div className='exploreMapperName'>{this.props.userName}&rsquo;s Maps</div> <div className='exploreMapsButton active mapperButton'>
<div className='clearfloat'></div> <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> </div>
) : null } </div>
<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>
) )
} }