Mobile fixes for news feed

This commit is contained in:
Victoria Wang 2014-11-18 20:43:17 -06:00
parent d73afc4760
commit a673d851c1
2 changed files with 63 additions and 15 deletions

View file

@ -35,6 +35,18 @@
font-size: 2.5em;
margin-top: 15px;
}
.news-site-info {
@media (max-device-width:480px), screen and (max-width:800px) {
float: right;
width: 35%;
.col-50 {
width:100%;
margin-bottom: 1em!important;
}
}
}
.site-url {
font-size:18px;
margin-bottom: 8px;
@ -449,6 +461,10 @@
}
.news-feed .content.misc-page.columns .col-66 {
min-height: 56em;
@media (max-device-width:480px), screen and (max-width:800px) {
min-height: 0;
}
}
.content.misc-page.columns .col-33 {
width: 33%;
@ -475,10 +491,27 @@
}
.interior .header-Outro.with-columns .col-32 {
width: 33%;
h3 {
@media (max-device-width:480px), screen and (max-width:800px) {
display: none;
}
}
@media (max-device-width:480px), screen and (max-width:800px) {
width: 10em!important;
float: right;
padding: 0 0 18px 0;
margin-top: -28px;
}
}
.interior .header-Outro.with-columns .col-66 {
width: 67%;
border-right: 1px solid #0B0F11;
@media (max-device-width:480px), screen and (max-width:800px) {
border-right: 0;
padding: 15px 0 27px 30px;
}
}
.interior .header-Outro.with-columns .col-32 .edit {
margin-top: 4px;
@ -520,6 +553,10 @@
background-size: cover;
float: left;
margin-bottom: 20px;
@media (max-device-width:480px), screen and (max-width:800px) {
width: 60%;
}
}
.site-portrait {
border: 5px solid white;
@ -538,6 +575,15 @@
margin-top: .2em;
margin-bottom: -.2em;
}
.news-profile-button {
clear: both;
margin: 20px auto 2em auto;
text-align: center;
@media (max-device-width:480px), screen and (max-width:800px) {
text-align: left;
}
}
a.tag, a.tag:visited {
font-size: .7em;
text-transform: uppercase;

View file

@ -13,7 +13,7 @@
</div>
</div>
<div class="col col-32">
<h3>Your Website</h3>
<h3>Your Site</h3>
<a href="/dashboard" class="btn-Action edit"><i class="fa fa-edit" title="Edit"></i>Edit Site</a>
</div>
</div>
@ -87,25 +87,27 @@
</div>
<div class="col col-33">
<p class="site-url"><a href="//<%= current_site.host %>" target="_blank"><%= site.title %></a></p>
<div class="stats">
<div class="col col-50">
<% if site.updated_at %>
Last updated<br><strong><%= site.updated_at.ago %></strong>
<% else %>
Your new website!<br><strong><a href="/dashboard"><i class="fa fa-edit" title="Edit"></i> Start Building</a></strong>
<% end %>
</div>
<div class="col col-50">
<div><strong><%= site.views.format_large_number %></strong> unique views</div>
<div><strong><%= site.hits.format_large_number %></strong> hits</div>
<div><strong><%= site.follows_dataset.count.format_large_number %></strong> followers</div>
<div class="news-site-info">
<p class="site-url"><a href="//<%= current_site.host %>" target="_blank"><%= site.title %></a></p>
<div class="stats">
<div class="col col-50">
<% if site.updated_at %>
Last updated<br><strong><%= site.updated_at.ago %></strong>
<% else %>
Your new website!<br><strong><a href="/dashboard"><i class="fa fa-edit" title="Edit"></i> Start Building</a></strong>
<% end %>
</div>
<div class="col col-50">
<div><strong><%= site.views.format_large_number %></strong> views</div>
<div><strong><%= site.hits.format_large_number %></strong> hits</div>
<div><strong><%= site.follows_dataset.count.format_large_number %></strong> followers</div>
</div>
</div>
</div>
<a href="//<%= site.host %>" class="large-portrait" style="background-image:url(<%= site.screenshot_url('index.html', '540x405') %>);"></a>
<div style="margin-top: 20px; margin-bottom: 2em" class="txt-Center">
<div class="news-profile-button">
<a href="/site/<%= site.username %>" class="btn-Action">View Site Profile</a>
</div>