prototype mobile interface

app/assets/stylesheets/mobile.css.scss

@@ -0,0 +1,7 @@
+/*
+ *= require_self
+ *= require "./common/010_reset"
+ *= require "./common/020_base"
+ *= require "./common/030_links"
+ *= require_tree "./mobile"
+*/

app/assets/stylesheets/mobile/paginator.css.scss

@@ -0,0 +1,38 @@
+div.paginator {
+  display: block;
+  padding: 2em 0 1em 0;
+  font-size: 2em;
+  text-align: center;
+  font-weight: bold;
+  clear: both;
+  
+  a {
+    margin: 0 0.25em;
+    padding: 0 0.5em;
+    font-weight: bold;
+    border: 1px solid #EAEAEA;
+  }
+
+  a.arrow {
+    border: none;
+  }
+
+  a.arrow:hover {
+    background: white;
+    color: #9093FF;
+  }
+
+  a.current {
+    border: 1px solid #AAA;
+  }
+
+  a:hover {
+    background: rgb(60, 60, 220);
+    color: white;
+  }
+
+  span {
+    margin: 0 3px;
+    padding: 2px 6px;
+  }
+}

app/assets/stylesheets/mobile/posts.css.scss

@@ -0,0 +1,138 @@
+@import "../common/000_vars.css.scss";
+
+header {
+  margin: 0 0 10px 0;
+  padding: 0 10px;
+  
+  input {
+    font-size: 1.5em;
+  }
+  
+  menu {
+    margin: 0;
+    padding: 0;
+    
+    li {
+      margin: 0;
+      padding: 0;
+      width: 33%;
+      display: inline-block;
+      vertical-align: middle;
+    }
+    
+    li#search-item {
+      input {
+        font-size: 1.5em;
+      }
+    }
+    
+    li#site-item {
+      color: $link_color;
+      font-size: 1.5em;
+      text-align: center;
+    }
+    
+    li#sign-in-item {
+      text-align: right;
+      
+      a {
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+footer {
+  div.paginator {
+    overflow: visible;
+    
+    li {
+      a {
+        border: none;
+      }
+    }
+    
+    li:first-child {
+      float: left;
+    }
+    
+    li:last-child {
+      float: right;
+    }
+  }
+}
+
+div.post-previews {
+  overflow: visible;
+}
+
+article.post-preview {
+  height: 188px;
+  width: 188px;
+  display: inline-block;
+  float: left;
+  text-align: center;
+  vertical-align: middle;
+}
+
+article.post-preview.blacklisted-active {
+  display: none;
+}
+
+article.post-preview img {
+  border: 3px solid transparent;
+}
+
+article.post-preview.post-status-has-parent img {
+  border: 3px solid #CC0;
+}
+
+article.post-preview.post-status-has-children img {
+  border: 3px solid #0F0;
+}
+
+article.post-preview.post-status-pending img {
+  border: 3px solid #00F;
+}
+
+article.post-preview.post-status-flagged img {
+  border: 3px solid #F00;
+}
+
+img#image {
+  margin: 10px;
+}
+
+div#tag-list {
+  padding: 10px;
+  
+  li {
+    display: inline-block;
+
+    a {
+      background: #eee;
+      font-size: 1.5em;
+      font-weight: bold;
+      margin: 0 0.5em;
+      padding: 0.2em 0.5em;
+      border: 1px solid #666;
+      -moz-border-radius: 3px;
+      -webkit-border-radius: 3px;
+      border-radius: 3px;
+    }
+  }
+}
+
+div#c-posts {
+  li.category-1 a {
+    color: #A00;
+  }
+  
+  li.category-3 a {
+    color: #A0A;
+  }
+  
+  li.category-4 a {
+    color: #0A0;
+  }
+}

app/assets/stylesheets/specific/posts.css.scss

@@ -13,25 +13,6 @@ article.post-preview {
   float: left;
   text-align: center;
   vertical-align: middle;
-  
-  div.text-post-preview {
-    font-size: $h2_size;
-    font-weight: bold;
-    height: 150px;
-    width: 150px;
-    display: block;
-    text-align: center;
-    line-height: 150px;
-    border: 1px solid #CCC;
-  }
-}
-
-div.text-post-medium {
-  height: 150px;
-  width: 480px;
-  text-align: center;
-  line-height: 480px;
-  border: 1px solid #CCC;
 }
 
 article.post-preview.blacklisted-active {

app/controllers/m/posts_controller.rb

@@ -0,0 +1,14 @@
+module M
+  class PostsController < ApplicationController
+    layout "mobile"
+    
+    def index
+      @post_set = PostSets::Post.new(params[:tags], params[:page])
+      @posts = @post_set.posts
+    end
+    
+    def show
+      @post = Post.find(params[:id])
+    end
+  end
+end

app/presenters/post_presenter.rb

@@ -1,5 +1,5 @@
 class PostPresenter < Presenter
-  def self.preview(post)
+  def self.preview(post, options = {})
     if post.is_deleted? && !CurrentUser.is_privileged?
       return ""
     end
@@ -9,8 +9,10 @@ class PostPresenter < Presenter
     flags << "flagged" if post.is_flagged?
     flags << "deleted" if post.is_deleted?
     
+    path = options[:path_prefix] || "/posts"
+    
     html =  %{<article class="post-preview" id="post_#{post.id}" data-id="#{post.id}" data-tags="#{h(post.tag_string)}" data-uploader="#{h(post.uploader_name)}" data-rating="#{post.rating}" data-width="#{post.image_width}" data-height="#{post.image_height}" data-flags="#{flags.join(' ')}" data-parent-id="#{post.parent_id}" data-has-children="#{post.has_children?}">}
-    html << %{<a href="/posts/#{post.id}">}
+    html << %{<a href="#{path}/#{post.id}">}
     
     if post.is_image?
       html << %{<img src="#{post.preview_file_url}">}
@@ -51,8 +53,8 @@ class PostPresenter < Presenter
     end
   end
   
-  def tag_list_html(template)
+  def tag_list_html(template, options = {})
     @tag_set_presenter ||= TagSetPresenter.new(@post.tag_array)
-    @tag_set_presenter.tag_list_html(template, :show_extra_links => CurrentUser.user.is_privileged?)
+    @tag_set_presenter.tag_list_html(template, options.merge(:show_extra_links => CurrentUser.user.is_privileged?))
   end
 end

app/presenters/tag_set_presenter.rb

@@ -36,20 +36,26 @@ private
     html << %{<li class="category-#{categories[tag]}">}
     current_query = template.params[:tags] || ""
     
-    if categories[tag] == 1
-      html << %{<a class="wiki-link" href="/artists/show_or_new?name=#{u(tag)}">?</a> }
-    else
-      html << %{<a class="wiki-link" href="/wiki_pages?title=#{u(tag)}">?</a> }
-    end
+    unless options[:name_only]
+      if categories[tag] == 1
+        html << %{<a class="wiki-link" href="/artists/show_or_new?name=#{u(tag)}">?</a> }
+      else
+        html << %{<a class="wiki-link" href="/wiki_pages?title=#{u(tag)}">?</a> }
+      end
 
-    if CurrentUser.user.is_privileged?
-      html << %{<a href="/posts?tags=#{u(current_query)}+#{u(tag)}" class="search-inc-tag">+</a> }
-      html << %{<a href="/posts?tags=#{u(current_query)}+-#{u(tag)}" class="search-exl-tag">&ndash;</a> }
+      if CurrentUser.user.is_privileged?
+        html << %{<a href="/posts?tags=#{u(current_query)}+#{u(tag)}" class="search-inc-tag">+</a> }
+        html << %{<a href="/posts?tags=#{u(current_query)}+-#{u(tag)}" class="search-exl-tag">&ndash;</a> }
+      end
     end
     
     humanized_tag = tag.tr("_", " ")
-    html << %{<a href="/posts?tags=#{u(tag)}">#{h(humanized_tag)}</a> }
-    html << %{<span class="post-count">} + counts[tag].to_s + %{</span>}
+    path = options[:path_prefix] || "/posts"
+    html << %{<a href="#{path}?tags=#{u(tag)}">#{h(humanized_tag)}</a> }
+    
+    unless options[:name_only]
+      html << %{<span class="post-count">} + counts[tag].to_s + %{</span>}
+    end
     
     html << "</li>"
     html

app/views/layouts/mobile.html.erb

@@ -0,0 +1,12 @@
+<!DOCTYPE html> 
+<html> 
+	<head> 
+	<title><%= yield :page_title %></title> 
+  <%= csrf_meta_tag %>
+  <%= stylesheet_link_tag "mobile", :media => "screen" %>
+  <%= javascript_include_tag "mobile" %>
+</head> 
+<body>
+<%= yield :layout %>
+</body>
+</html>

app/views/m/posts/_header.html.erb

@@ -0,0 +1,19 @@
+<header>
+  <menu>
+    <li id="search-item">
+      <%= form_tag(m_posts_path, :method => :get) do %>
+        <%= search_field_tag :tags, params[:tags] %>
+      <% end %>
+    </li>
+    <li id="site-item">
+      <h1>
+        <%= Danbooru.config.app_name %>
+      </h1>
+    </li>
+    <li id="sign-in-item">
+      <% if true || CurrentUser.is_anonymous? %>
+        <%= link_to "Sign in", new_m_session_path %>
+      <% end %>
+    </li>
+  </menu>
+</header>

app/views/m/posts/_tags.html.erb

@@ -0,0 +1,3 @@
+<div id="tag-list">
+  <%= post.presenter.tag_list_html(self, :name_only => true, :path_prefix => "/m/posts") %>
+</div>

app/views/m/posts/index.html.erb

@@ -0,0 +1,19 @@
+<div id="c-m-posts">
+  <%= render "header" %>
+  
+  <% @post_set.posts.each do |post| %>
+    <%= PostPresenter.preview(post, :path_prefix => "/m/posts") %>
+  <% end %>
+  
+  <footer>
+    <%= sequential_paginator(@post_set.posts) %>
+  </footer>
+</div>
+
+<% content_for(:page_title) do %>
+  <% if params[:tags].present? %>
+    <%= params[:tags] %> - <%= Danbooru.config.app_name %>
+  <% else %>
+    <%= Danbooru.config.app_name %>
+  <% end %>
+<% end %>

app/views/m/posts/show.html.erb

@@ -0,0 +1,11 @@
+<div id="c-m-posts">
+  <%= render "header" %>
+  
+  <%= image_tag(@post.large_file_url, :width => @post.large_image_width, :height => @post.large_image_height, :id => "image") %>
+  
+  <%= render "tags", :post => @post %>
+</div>
+
+<% content_for(:page_title) do %>
+  <%= @post.tag_string %> - <%= Danbooru.config.app_name %>
+<% end %>

config/routes.rb

@@ -163,6 +163,11 @@ Danbooru::Application.routes.draw do
   end
   resources :wiki_page_versions, :only => [:index, :show]
 
+  namespace :m do
+    resources :posts
+    resource :session
+  end
+
   # aliases
   resources :wpages, :controller => "wiki_pages"
   resources :ftopics, :controller => "forum_topics"