From 545652722e6b9f5323dec20fb68a2981488b9f7c Mon Sep 17 00:00:00 2001 From: Victoria Wang Date: Thu, 14 Aug 2014 20:56:45 -0700 Subject: [PATCH] UI changes to Browse page --- public/assets/css/_base-sass/_forms.scss | 4 +- .../css/_project-sass/_project-Main.scss | 25 ++++ .../_project-Website-Gallery.scss | 28 ++-- public/assets/css/neo.css | 57 ++++++-- views/browse.erb | 130 ++++++++---------- 5 files changed, 146 insertions(+), 98 deletions(-) diff --git a/public/assets/css/_base-sass/_forms.scss b/public/assets/css/_base-sass/_forms.scss index 26c6f3ec..1de460cc 100644 --- a/public/assets/css/_base-sass/_forms.scss +++ b/public/assets/css/_base-sass/_forms.scss @@ -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{ diff --git a/public/assets/css/_project-sass/_project-Main.scss b/public/assets/css/_project-sass/_project-Main.scss index 4dd7a747..962a9db2 100644 --- a/public/assets/css/_project-sass/_project-Main.scss +++ b/public/assets/css/_project-sass/_project-Main.scss @@ -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; } \ No newline at end of file diff --git a/public/assets/css/_project-sass/_project-Website-Gallery.scss b/public/assets/css/_project-sass/_project-Website-Gallery.scss index aeef8a84..2173fea7 100644 --- a/public/assets/css/_project-sass/_project-Website-Gallery.scss +++ b/public/assets/css/_project-sass/_project-Website-Gallery.scss @@ -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%; } diff --git a/public/assets/css/neo.css b/public/assets/css/neo.css index fe6593c7..b4f9fc3a 100644 --- a/public/assets/css/neo.css +++ b/public/assets/css/neo.css @@ -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%; } diff --git a/views/browse.erb b/views/browse.erb index 116defbc..45c68c81 100644 --- a/views/browse.erb +++ b/views/browse.erb @@ -4,58 +4,59 @@ } -
+
- <% if params[:tag] %> -

Sites tagged <%= params[:tag] %> - <% else %> -

Sites on Neocities

- <% end %> -

+
+ <% if params[:tag] %> +

Sites tagged <%= params[:tag] %>

+ <% else %> +

Sites on Neocities

+ <% end %> +
+ +
+
+
+ <% if params[:tag] %> + + <% end %> + +
+ +
+ + +
+
+
+
+
+
+ + + +
+
+
+
-
-
-
-
- <% if params[:tag] %> - - <% end %> - -
- -
- -
- -
-
-
-
+
-
-

If you like a site, don't forget to follow it!
Visitor counts are updated hourly.

- <% unless signed_in? %> - Create your Neocities site now - <% end %> -
-
- -
<% if @sites.length == 0 %> -
+

No active sites found.
Try another search!

<% else %> @@ -67,20 +68,18 @@ <%= site.title %> -
- -
<%= site.title.shorten(35) %> - +
+ <%= site.title.shorten(35) %>
-
- - Profile - - +
+ +
<% end %> @@ -109,22 +108,11 @@ <% end %> <% end %> -
-
-

+
+

Tags

+

<% Tag.popular_names.each do |tag| %> <%= tag[:name] %>   <% end %> -

-
-
- -
-
-

Search by tag:

-
- - -
-
+

\ No newline at end of file