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; font-size: 2.5em;
margin-top: 15px; 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 { .site-url {
font-size:18px; font-size:18px;
margin-bottom: 8px; margin-bottom: 8px;
@ -449,6 +461,10 @@
} }
.news-feed .content.misc-page.columns .col-66 { .news-feed .content.misc-page.columns .col-66 {
min-height: 56em; min-height: 56em;
@media (max-device-width:480px), screen and (max-width:800px) {
min-height: 0;
}
} }
.content.misc-page.columns .col-33 { .content.misc-page.columns .col-33 {
width: 33%; width: 33%;
@ -475,10 +491,27 @@
} }
.interior .header-Outro.with-columns .col-32 { .interior .header-Outro.with-columns .col-32 {
width: 33%; 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 { .interior .header-Outro.with-columns .col-66 {
width: 67%; width: 67%;
border-right: 1px solid #0B0F11; 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 { .interior .header-Outro.with-columns .col-32 .edit {
margin-top: 4px; margin-top: 4px;
@ -520,6 +553,10 @@
background-size: cover; background-size: cover;
float: left; float: left;
margin-bottom: 20px; margin-bottom: 20px;
@media (max-device-width:480px), screen and (max-width:800px) {
width: 60%;
}
} }
.site-portrait { .site-portrait {
border: 5px solid white; border: 5px solid white;
@ -538,6 +575,15 @@
margin-top: .2em; margin-top: .2em;
margin-bottom: -.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 { a.tag, a.tag:visited {
font-size: .7em; font-size: .7em;
text-transform: uppercase; text-transform: uppercase;

View file

@ -13,7 +13,7 @@
</div> </div>
</div> </div>
<div class="col col-32"> <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> <a href="/dashboard" class="btn-Action edit"><i class="fa fa-edit" title="Edit"></i>Edit Site</a>
</div> </div>
</div> </div>
@ -87,6 +87,7 @@
</div> </div>
<div class="col col-33"> <div class="col col-33">
<div class="news-site-info">
<p class="site-url"><a href="//<%= current_site.host %>" target="_blank"><%= site.title %></a></p> <p class="site-url"><a href="//<%= current_site.host %>" target="_blank"><%= site.title %></a></p>
<div class="stats"> <div class="stats">
<div class="col col-50"> <div class="col col-50">
@ -97,15 +98,16 @@
<% end %> <% end %>
</div> </div>
<div class="col col-50"> <div class="col col-50">
<div><strong><%= site.views.format_large_number %></strong> unique views</div> <div><strong><%= site.views.format_large_number %></strong> views</div>
<div><strong><%= site.hits.format_large_number %></strong> hits</div> <div><strong><%= site.hits.format_large_number %></strong> hits</div>
<div><strong><%= site.follows_dataset.count.format_large_number %></strong> followers</div> <div><strong><%= site.follows_dataset.count.format_large_number %></strong> followers</div>
</div> </div>
</div> </div>
</div>
<a href="//<%= site.host %>" class="large-portrait" style="background-image:url(<%= site.screenshot_url('index.html', '540x405') %>);"></a> <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> <a href="/site/<%= site.username %>" class="btn-Action">View Site Profile</a>
</div> </div>