From: hylom <hylom@users.sourceforge.jp>
Date: Fri, 6 Oct 2017 10:57:33 +0000 (+0900)
Subject: fix design & layout for mobile
X-Git-Tag: v0.1.1~314
X-Git-Url: http://git.osdn.net/view?a=commitdiff_plain;h=8eeee1a31d05b5cb9114292dbe92c5b0defd5718;p=newslash%2Fnewslash.git

fix design & layout for mobile
---

diff --git a/src/newslash_web/css/main/responsive.less b/src/newslash_web/css/main/responsive.less
index 52c40432..15b12107 100644
--- a/src/newslash_web/css/main/responsive.less
+++ b/src/newslash_web/css/main/responsive.less
@@ -1,6 +1,7 @@
 @import "colors.less";
 
 @media(max-width:480px) {
+    body { font-size: 14px; }
     span.abbrevable, div.abbrevable {
         display: none;
     }
@@ -8,6 +9,9 @@
         .btn-text {display: none;}
     }
 
+    .ads-native-contents {
+        height: 260px;
+    }
     #admin-bar-spacer { height: 60px; }
     #account-bar-brand {
         float: none;
@@ -56,13 +60,15 @@
     }
 
 
-    .contents-text blockquote,
-    .contents-text div.quote {
-        margin: 0 0 0 -6px;
-        padding-left: 6px;
-    }
-    .form-control {
-        width: 100%;
+    .contents-text {
+        blockquote,
+        div.quote {
+            margin: 0 0 0 -6px;
+            padding-left: 6px;
+        }
+        p {
+            line-height: 160%;
+        }
     }
 
     /* comment related */
@@ -79,6 +85,7 @@
         padding: 0;
         margin: 0 0 4px;
         font-size: 85%;
+        text-align: center;
     }
     .comment-item {
         header {
@@ -89,7 +96,7 @@
         padding: 0 5px;
     }
     #comments ol {
-        margin-left: 16px;
+        margin-left: 8px;
     }
     #comments .comment-tree-body > ol {
         margin-left: 0;
diff --git a/src/newslash_web/css/main/story.less b/src/newslash_web/css/main/story.less
index a427f858..eb57da64 100644
--- a/src/newslash_web/css/main/story.less
+++ b/src/newslash_web/css/main/story.less
@@ -14,10 +14,18 @@
         .prev {
             display: block;
             float: left;
+            margin: 4px 0;
+        }
+        .prev:before {
+            content: "<<";
         }
         .next {
             display: block;
             float: right;
+            margin: 4px 0;
+        }
+        .next:after {
+            content: ">>";
         }
     }
     .related {
diff --git a/src/newslash_web/templates/comment/single.html.tt2 b/src/newslash_web/templates/comment/single.html.tt2
index 88ebcdfc..4969e19f 100644
--- a/src/newslash_web/templates/comment/single.html.tt2
+++ b/src/newslash_web/templates/comment/single.html.tt2
@@ -23,27 +23,15 @@
       [%- INCLUDE common/article/article story=comment hide_more_link=1 -%]
       <article-item></article-item>
     </div>
-    <div class="next-prev-story">
-      [%- IF params.prev_stoid && params.prev_stoid.story -%]
-      <div class="prev"><a href="/story/[% params.prev_stoid.story.sid %]">
-          ≪ [% params.prev_stoid.story.title %]
-      </a></div>
-      [%- END -%]
-      [%- IF params.next_stoid && params.next_stoid.story -%]
-      <div class="next"><a href="/story/[% params.next_stoid.story.sid %]">
-          [% params.next_stoid.story.title %] ≫
-      </a></div>
-      [%- END -%]
-    </div>
     <div class="related">
-      <div class="ads-native-contents">
+      <div id="story-ads-native-contents" class="ads-native-contents">
         [%- INCLUDE ads/native_contents -%]
       </div>
     </div>
   </div><!-- .story -->
 </div><!-- .main-column -->
 
-[%- INCLUDE common/sidebar mode="story" -%]
+[%- INCLUDE common/sidebar mode="comment" -%]
 
 [%#- INCLUDE common/comment/comments_nojs -%]
 [%#- INCLUDE common/comment/comments -%]
diff --git a/src/newslash_web/templates/common/sidebar.html.tt2 b/src/newslash_web/templates/common/sidebar.html.tt2
index 70435eeb..787b000b 100644
--- a/src/newslash_web/templates/common/sidebar.html.tt2
+++ b/src/newslash_web/templates/common/sidebar.html.tt2
@@ -1,6 +1,6 @@
 <div class="sidebar">
   [%- IF mode == "story" -%]
-  <div class="banner-sample" style="width: 300px; height: 250px; border: 1px solid;">
+  <div class="banner-sample abbrevable" style="width: 300px; height: 250px; border: 1px solid;">
     Sample Rectangle
   </div>
   <div class="sidebar-item related">
@@ -26,6 +26,10 @@
     </span>
     [%- END -%]
   </div>
+  [%- ELSIF mode == "comment" -%]
+  <div class="banner-sample abbrevable" style="width: 300px; height: 250px; border: 1px solid;">
+    Sample Rectangle
+  </div>
   [%- ELSIF mode == "journal" -%]
   <div class="abbrevable">
     [% INCLUDE common/user %]
diff --git a/src/newslash_web/templates/story/story.html.tt2 b/src/newslash_web/templates/story/story.html.tt2
index 2d2022d9..10b73bf5 100644
--- a/src/newslash_web/templates/story/story.html.tt2
+++ b/src/newslash_web/templates/story/story.html.tt2
@@ -14,17 +14,17 @@
     <div class="next-prev-story">
       [%- IF params.prev_stoid && params.prev_stoid.story -%]
       <div class="prev"><a href="/story/[% params.prev_stoid.story.sid %]">
-          ≪ [% params.prev_stoid.story.title %]
+          [% params.prev_stoid.story.title %]
       </a></div>
       [%- END -%]
       [%- IF params.next_stoid && params.next_stoid.story -%]
       <div class="next"><a href="/story/[% params.next_stoid.story.sid %]">
-          [% params.next_stoid.story.title %] ≫
+          [% params.next_stoid.story.title %]
       </a></div>
       [%- END -%]
     </div>
     <div class="related">
-      <div class="ads-native-contents">
+      <div id="story-ads-native-contents" class="ads-native-contents">
         [%- INCLUDE ads/native_contents -%]
       </div>
     </div>