mirror of
https://github.com/neocities/neocities.git
synced 2025-04-24 17:22:35 +02:00
UI changes to Browse page
This commit is contained in:
Victoria Wang
parent
c989819328
commit
545652722e
5 changed files with 146 additions and 98 deletions
|
|
@ -81,9 +81,9 @@ legend, .legend{
|
|||
/* Drop Down Selection Inputs */
|
||||
.select-Container{
|
||||
@extend %input-Area;
|
||||
background:url(../img/drop-Arrow.png) no-repeat 99% center #fff; display:inline-block; overflow:hidden;
|
||||
background:url(../img/drop-Arrow.png) no-repeat 99% center #fff; display:inline-block;
|
||||
}
|
||||
.input-Select{background:none; border:0; font-size:$base; padding-right:$spacing*4; width:120%; -webkit-appearance:textarea}
|
||||
.input-Select{background:none; border:0; font-size:$base; padding-right:$spacing*4; width:100%; -webkit-appearance:textarea}
|
||||
|
||||
// File Input Styling
|
||||
.file-Input-Area{
|
||||
|
|
|
|||
|
|
@ -781,4 +781,29 @@ a.tag:hover {
|
|||
.tt-dropdown-menu {
|
||||
padding: 0px 10px 0px 10px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.browse-page .select-Container {
|
||||
overflow: none!important;
|
||||
padding: 2px 4px;
|
||||
width: 40%;
|
||||
}
|
||||
.browse-page .input-Area {
|
||||
width: 100%;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
.header-Outro .btn-Action {
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
.browse-page .text-Label {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
font-weight: bold;
|
||||
line-height:31px;
|
||||
}
|
||||
.browse-page h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.interior .header-Outro.with-columns .col.filter {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
.website-Gallery{
|
||||
list-style:none;
|
||||
padding:10px 0;
|
||||
padding:30px 20px;
|
||||
|
||||
li{
|
||||
@extend .col-25;
|
||||
|
|
@ -16,34 +16,42 @@
|
|||
}
|
||||
}
|
||||
|
||||
a{
|
||||
padding:0 $spacing*2;
|
||||
li a {
|
||||
display:block;
|
||||
}
|
||||
.site-info a {
|
||||
color: #666;
|
||||
font-size: 80%;
|
||||
}
|
||||
.title {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
&.int-Gall{
|
||||
|
||||
li{
|
||||
border:1px solid #ccc;
|
||||
|
||||
margin:0 .5% 12px;
|
||||
width:24%;
|
||||
|
||||
background-color: white;
|
||||
border: 9px solid white;
|
||||
-moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
|
||||
-webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
|
||||
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
width:49%
|
||||
}
|
||||
a{
|
||||
padding:8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.neo-SS, .neo-Screen-Shot{
|
||||
background:#fff;
|
||||
@include box-shadow($bs-4);
|
||||
border: 1px solid #eee;
|
||||
display:block;
|
||||
height:auto!important;
|
||||
padding:$spacing*2;
|
||||
position:relative;
|
||||
width:100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -405,15 +405,14 @@ legend, .legend {
|
|||
/* Drop Down Selection Inputs */
|
||||
.select-Container {
|
||||
background: url(../img/drop-Arrow.png) no-repeat 99% center white;
|
||||
display: inline-block;
|
||||
overflow: hidden; }
|
||||
display: inline-block; }
|
||||
|
||||
.input-Select {
|
||||
background: none;
|
||||
border: 0;
|
||||
font-size: 0.9em;
|
||||
padding-right: 16px;
|
||||
width: 120%;
|
||||
width: 100%;
|
||||
-webkit-appearance: textarea; }
|
||||
|
||||
.file-Input-Area {
|
||||
|
|
@ -2017,6 +2016,31 @@ a.tag:hover {
|
|||
padding: 0px 10px 0px 10px;
|
||||
background: #FFFFFF; }
|
||||
|
||||
.browse-page .select-Container {
|
||||
overflow: none !important;
|
||||
padding: 2px 4px;
|
||||
width: 40%; }
|
||||
|
||||
.browse-page .input-Area {
|
||||
width: 100%;
|
||||
padding: 5px 5px; }
|
||||
|
||||
.header-Outro .btn-Action {
|
||||
margin: 0 0 0 10px; }
|
||||
|
||||
.browse-page .text-Label, .browse-page .option-Container {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
font-weight: bold;
|
||||
line-height: 31px; }
|
||||
|
||||
.browse-page h1 {
|
||||
margin-top: 0; }
|
||||
|
||||
.interior .header-Outro.with-columns .col.filter {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 4px; }
|
||||
|
||||
.footer-Base {
|
||||
color: #5e5b56;
|
||||
float: left;
|
||||
|
|
@ -2162,34 +2186,37 @@ a.tag:hover {
|
|||
|
||||
.website-Gallery {
|
||||
list-style: none;
|
||||
padding: 10px 0; }
|
||||
padding: 30px 20px; }
|
||||
.website-Gallery li {
|
||||
float: left;
|
||||
margin-bottom: 8px; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) {
|
||||
.website-Gallery li {
|
||||
width: 50%; } }
|
||||
.website-Gallery a {
|
||||
padding: 0 8px;
|
||||
.website-Gallery li a {
|
||||
display: block; }
|
||||
.website-Gallery .site-info a {
|
||||
color: #666;
|
||||
font-size: 80%; }
|
||||
.website-Gallery .title {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 2px; }
|
||||
.website-Gallery.int-Gall li {
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 .5% 12px;
|
||||
width: 24%; }
|
||||
width: 24%;
|
||||
background-color: white;
|
||||
border: 9px solid white;
|
||||
-moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
|
||||
-webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2); }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) {
|
||||
.website-Gallery.int-Gall li {
|
||||
width: 49%; } }
|
||||
.website-Gallery.int-Gall li a {
|
||||
padding: 8px; }
|
||||
|
||||
.neo-SS, .neo-Screen-Shot {
|
||||
background: #fff;
|
||||
-moz-box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2);
|
||||
-webkit-box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid #eee;
|
||||
display: block;
|
||||
height: auto !important;
|
||||
padding: 8px;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
|
||||
|
|
|
|||
130
views/browse.erb
130
views/browse.erb
|
|
@ -4,58 +4,59 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="header-Outro">
|
||||
<div class="header-Outro with-columns browse-page">
|
||||
<div class="row content">
|
||||
<% if params[:tag] %>
|
||||
<h1>Sites tagged <%= params[:tag] %>
|
||||
<% else %>
|
||||
<h1>Sites on Neocities</h1>
|
||||
<% end %>
|
||||
<h3 class="subtitle"></h3>
|
||||
<div class="col col-100">
|
||||
<% if params[:tag] %>
|
||||
<h1>Sites tagged <%= params[:tag] %></h1>
|
||||
<% else %>
|
||||
<h1>Sites on Neocities</h1>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="col col-50 filter">
|
||||
<form id="search_criteria" action="/browse" method="GET">
|
||||
<fieldset class="grouping">
|
||||
<% if params[:tag] %>
|
||||
<input name="tag" type="hidden" value="<%= params[:tag] %>">
|
||||
<% end %>
|
||||
<label class="text-Label" for="sort_by">Sort By:</label>
|
||||
<div class="select-Container">
|
||||
<select name="sort_by" id="sort_by" class="input-Select">
|
||||
<option value="last_updated" <%= params[:sort_by] == 'last_updated' ? 'selected' : '' %>>Last Updated</option>
|
||||
<option value="views" <%= params[:sort_by] == 'views' ? 'selected' : '' %>>Most Views</option>
|
||||
<option value="hits" <%= params[:sort_by] == 'hits' ? 'selected' : '' %>>Most Hits</option>
|
||||
<option value="newest" <%= params[:sort_by] == 'newest' ? 'selected' : '' %>>Newest</option>
|
||||
<option value="oldest" <%= params[:sort_by] == 'oldest' ? 'selected' : '' %>>Oldest</option>
|
||||
<option value="random" <%= params[:sort_by] == 'random' ? 'selected' : '' %>>Random</option>
|
||||
</select>
|
||||
</div>
|
||||
<!--
|
||||
<div>
|
||||
<input name="is_nsfw" type="checkbox" value="true" <%= params[:is_nsfw].to_s == 'true' ? 'checked' : '' %>> Show 18+ content
|
||||
</div>
|
||||
-->
|
||||
<input class="btn-Action" type="submit" value="Update">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col col-50 filter">
|
||||
<form method="GET" action="browse">
|
||||
<fieldset class="grouping">
|
||||
<label class="text-Label" for="tag">Search by tag:</label>
|
||||
<input class="input-Area typeahead" name="tag" placeholder="pokemon">
|
||||
<input type="submit" class="btn-Action" value="Search">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row content">
|
||||
<div class="col col-50">
|
||||
<form id="search_criteria" action="/browse" method="GET">
|
||||
<fieldset class="grouping">
|
||||
<% if params[:tag] %>
|
||||
<input name="tag" type="hidden" value="<%= params[:tag] %>">
|
||||
<% end %>
|
||||
<label class="text-Label" for="sort_by">Sort By:</label>
|
||||
<div class="select-Container">
|
||||
<select name="sort_by" id="sort_by" class="input-Select">
|
||||
<option value="last_updated" <%= params[:sort_by] == 'last_updated' ? 'selected' : '' %>>Last Updated</option>
|
||||
<option value="views" <%= params[:sort_by] == 'views' ? 'selected' : '' %>>Most Views</option>
|
||||
<option value="hits" <%= params[:sort_by] == 'hits' ? 'selected' : '' %>>Most Hits</option>
|
||||
<option value="newest" <%= params[:sort_by] == 'newest' ? 'selected' : '' %>>Newest</option>
|
||||
<option value="oldest" <%= params[:sort_by] == 'oldest' ? 'selected' : '' %>>Oldest</option>
|
||||
<option value="random" <%= params[:sort_by] == 'random' ? 'selected' : '' %>>Random</option>
|
||||
</select>
|
||||
</div>
|
||||
<!--
|
||||
<div>
|
||||
<input name="is_nsfw" type="checkbox" value="true" <%= params[:is_nsfw].to_s == 'true' ? 'checked' : '' %>> Show 18+ content
|
||||
</div>
|
||||
-->
|
||||
<div style="margin-top: 10px">
|
||||
<input class="btn-Action" type="submit" value="Update">
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div class="browse-page">
|
||||
|
||||
<div class="col col-50">
|
||||
<p>If you like a site, don't forget to follow it!<br>Visitor counts are updated hourly.</p>
|
||||
<% unless signed_in? %>
|
||||
<a class="btn-Action" href="/new" title="create a Neocities.org site today!">Create your Neocities site now</a>
|
||||
<% end %>
|
||||
</div>
|
||||
</div> <!-- end .row.content -->
|
||||
|
||||
<br />
|
||||
<% if @sites.length == 0 %>
|
||||
<div class="row content single-Col">
|
||||
<div class="row website-Gallery content int-Gall">
|
||||
<h2>No active sites found.<br>Try another search!</h2>
|
||||
</div>
|
||||
<% else %>
|
||||
|
|
@ -67,20 +68,18 @@
|
|||
<img src="/img/placeholder.png" alt="<%= site.title %>" />
|
||||
</span>
|
||||
</a>
|
||||
<div>
|
||||
<span>
|
||||
<center><a href="//<%= site.host %>" title="<%= site.title %>"><%= site.title.shorten(35) %></a>
|
||||
</span>
|
||||
<div class="title">
|
||||
<a href="//<%= site.host %>" title="<%= site.title %>"><%= site.title.shorten(35) %></a>
|
||||
</div>
|
||||
<div>
|
||||
<span style="float: left">
|
||||
<a href="/site/<%= site.username %>">Profile</a>
|
||||
</span>
|
||||
<span style="float: right">
|
||||
<div class="site-info">
|
||||
<div style="float: left">
|
||||
<a href="/site/<%= site.username %>" title="Profile"><i class="icon-user"></i> <%= site.username %></a>
|
||||
</div>
|
||||
<div style="float: right">
|
||||
<a href="/site/<%= site.username %>">
|
||||
<%= site.hits %> hit<%= site.hits == 1 ? '' : 's' %>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<% end %>
|
||||
|
|
@ -109,22 +108,11 @@
|
|||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<div class="row content">
|
||||
<div class="col col-100">
|
||||
<h3>
|
||||
<div class="row website-Gallery content int-Gall">
|
||||
<h4>Tags</h4>
|
||||
<p>
|
||||
<% Tag.popular_names.each do |tag| %>
|
||||
<a href="/browse?tag=<%= Rack::Utils.escape tag[:name] %>"><%= tag[:name] %></a>
|
||||
<% end %>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row content">
|
||||
<div class="col col-20">
|
||||
<h4>Search by tag:</h4>
|
||||
<form method="GET" action="browse">
|
||||
<input class="input-Area typeahead" name="tag" placeholder="pokemon">
|
||||
<input type="submit" class="btn-Action" value="Search" style="width: 100px">
|
||||
</form>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
Loading…
Add table
Reference in a new issue