Merge branch 'master' of github.com:kascote/lamernews

kascote · Feb 1, 2012 · 616961e · 616961e
2 parents 4a2dba9 + fcd33c9
commit 616961e
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 15 deletions.
diff --git a/public/css/bp5.css b/public/css/bp5.css
@@ -84,12 +84,12 @@ td { vertical-align: top; }
 .lnk:hover,
 .lnk:visited,
 .lnk                                          { color: #444; }
-.header                                       { padding: 10px 0; height: 30px; border-bottom: 5px double #ddd; }
+.header                                       { padding: 10px 0; border-bottom: 5px double #ddd; }
 .header .logo                                 { font-weight: 300; font-style: normal; color: #000; display: inline; margin: 30px; font-size: 28px; }
 .header .menu                                 { display: inline; padding: 0 10px; font-weight: 300; }
 .header .link-nav:visited,
 .header .link-nav                             { color: #666; padding: 0 10px; }
-.header .account                              { position: absolute; top: 21px; right: 20px; font-weight: 300; }
+.header .account                              { float: right; font-weight: 300; }
 .footer                                       { margin-top: 50px; border-top: 5px double #ddd; text-align: center; padding: 20px 0;  }
 #login                                        { margin: 20px 0; }
 #profileform,
@@ -128,6 +128,7 @@ td { vertical-align: top; }
 #cse-search-form                              { float: right; margin-right: 30px; }
 .profile-form                                 { border: 1px solid #DDD; padding: 20px; background-color: whiteSmoke; border-image: initial; }
 .profile-form legend                          { font-weight: normal; font-size: 18px; background-color: #FFA; padding: 0 20px; line-height: 1.4em; }
+.mini-cont                                    { display: inline; }
 
 
 
@@ -152,12 +153,15 @@ td { vertical-align: top; }
 
 /* ==|== media queries ====================================================== */
 
-@media only screen and (min-width: 480px) {
+@media only screen and (max-width: 480px) {
 
-  /*
-.header .logo { margin: 10px; }
-.header .menu { display: block; margin: 10px 30px 0; font-weight: 300; }
-*/
+  .header                                     {  }
+  .header .logo                               { margin: 25px 10px 0; display: block; }
+  .header .menu                               { display: block; margin: 10px 0 0; padding: 0; font-weight: 300; }
+  #main                                       { margin: 20px 5px 0 5px; }
+  .news-title                                 { line-height: 1.4em; }
+  .news-article .meta-data                    { margin: 10px 0 0 0; }
+  .mini-cont                                  { display: block; }
 
 }
 

diff --git a/public/mq.html b/public/mq.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Responsive Design Testing</title>
+    <style>
+        body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }
+        .wrapper { width: 6000px; }
+        .frame { float: left; }
+        h2 { margin: 0 0 5px 0; }
+        iframe { margin: 0 20px 20px 0; border: 1px solid #666; }
+    </style>
+</head>
+<body>
+    <div class="wrapper">
+        <div class="frame">
+            <h2>320 &times; 480 <small>(mobile)</small></h2>
+            <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="320" height="480"></iframe>
+        </div>
+        <div class="frame">
+            <h2>480 &times; 640 <small>(small tablet)</small></h2>
+            <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="480" height="640"></iframe>
+        </div>
+        <div class="frame">
+            <h2>768 &times; 1024 <small>(tablet - portrait)</small></h2>
+            <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="768" height="1024"></iframe>
+        </div>
+        <div class="frame">
+            <h2>1024 &times; 768 <small>(tablet - landscape)</small></h2>
+            <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="1024" height="768"></iframe>
+        </div>
+        <div class="frame">
+            <h2>1200 &times; 800 <small>(desktop)</small></h2>
+            <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="1200" height="800"></iframe>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/views/layout.erb b/views/layout.erb
@@ -35,6 +35,14 @@
 
   <div id="container">
     <header class="header">
+      <nav class="account">
+      <% if is_logged_in? %>
+        <a class="link-nav" href="/user/<%= urlencode($user['username']) %>"><%= "#{entities($user['username'])} (#{$user['karma']})" %></a>
+        <a class="link-nav" href="/logout?apisecret=<%= $user['apisecret'] %>">desconectarse</a>
+      <% else %>
+        <a class="link-nav" href="/login">conectarse / registrarse</a>
+      <% end %>
+      </nav>
       <h1 class="logo"><a href="/">Nerds in Press</a></h1>
       <nav class="menu">
         <a class="link-nav" href="/">lo último</a>
@@ -45,14 +53,6 @@
         <% end %>
         <a class="link-nav" href="http://amphibia.com.ar" target="_blank">blog</a>
       </nav>
-      <nav class="account">
-      <% if is_logged_in? %>
-        <a class="link-nav" href="/user/<%= urlencode($user['username']) %>"><%= "#{entities($user['username'])} (#{$user['karma']})" %></a>
-        <a class="link-nav" href="/logout?apisecret=<%= $user['apisecret'] %>">desconectarse</a>
-      <% else %>
-        <a class="link-nav" href="/login">conectarse / registrarse</a>
-      <% end %>
-      </nav>
     </header>
     <!-- div id="cse-search-form" style="text-align: right; width: 400px"></div -->
     <div id="main" role="main">

diff --git a/views/news.erb b/views/news.erb
@@ -1,13 +1,15 @@
       <article class="news-article" data-news-id="<%= news['id'] %>">
         <a href="#up" title="vote up" class="uparrow <%= get_arrow_class(news['voted'], :up) %>">&#9650;</a>
         <h1 class="news-title"><a href="<%= news_url(news) %>"><%= entities(news['title']) %></a></h1>
+        <div class="mini-cont">
         <address class="domain">
           <%= get_domain(news) %>
           <% if is_editable?(news) %>
             <a href="/editnews/<%= news['id'] %>">[editar]</a>
           <% end %>
         </address>
         <a href="#down" title="vote down" class="downarrow <%= get_arrow_class(news['voted'], :down) %>">&#9660;</a>
+        </div>
         <p class="meta-data">
           <%# "#{news["up"]} up y #{news["down"]} down, compartida por " %>
           <%= "compartida por " %>