template: rebuild to use flex

diff --git a/src/newslash_web/css/newslash.less b/src/newslash_web/css/newslash.less
index 94eef23..206784b 100644 (file)
--- a/src/newslash_web/css/newslash.less
+++ b/src/newslash_web/css/newslash.less
@@ -9,3 +9,6 @@
 @import "newslash/layout.less";
 @import "newslash/article.less";
 @import "newslash/sidebar.less";
+@import "newslash/comment.less";
+@import "newslash/content.less";
+@import "newslash/motd.less";
\ No newline at end of file

diff --git a/src/newslash_web/css/newslash/article.less b/src/newslash_web/css/newslash/article.less
index e9ba8fe..c488f2f 100644 (file)
--- a/src/newslash_web/css/newslash/article.less
+++ b/src/newslash_web/css/newslash/article.less
@@ -1,6 +1,6 @@
 /* article related styles */
 
-.main-column article {
+article {
     &:extend(.bordered-box);
 
     header {
@@ -54,6 +54,10 @@
     }
 }
 
+
+
+
+
 /*
 .read-more {
     border: 1px solid @border-color-inactive;

diff --git a/src/newslash_web/css/newslash/layout.less b/src/newslash_web/css/newslash/layout.less
index cd2c394..dddb2d2 100644 (file)
--- a/src/newslash_web/css/newslash/layout.less
+++ b/src/newslash_web/css/newslash/layout.less
@@ -1,19 +1,44 @@
 /* main page layout for newslash */
 
-.main-wrapper {
-    display: flex;
-}
+@sidebar-width: 300px;
 
-.main-column {
-    flex: 1;
-    order: 0;
+.main-contents {
     margin: 0 @component-horizontal-margin;
 }
 
 .sidebar {
-    order: 1;
-    width: 300px;
+    width: @sidebar-width;
+    margin: 0 @component-horizontal-margin;
+}
+
+.timeline-wrapper {
+    display: flex;
+    .main-contents {
+        flex: 1 1 auto;
+        order: 0;
+    }
+    .sidebar {
+        flex: 0 0 auto;
+        order: 1;
+    }
+}
+
+.article-wrapper {
     margin: 0 @component-horizontal-margin;
-    
+    .content-wrapper {
+        float: left;
+        width: 100%;
+        margin-right: -(@sidebar-width + @component-horizontal-margin * 2);
+        .main-contents {
+            margin-right: (300px + @component-horizontal-margin * 3) ;
+            paddding: 0;
+        }
+    }
+    .sidebar {
+        float: left;
+    }
 }
 
+#comments {
+    clear: both;
+}
\ No newline at end of file

diff --git a/src/newslash_web/templates/common/layout.html.tt2 b/src/newslash_web/templates/common/layout.html.tt2
index d0a5515..50983de 100644 (file)
--- a/src/newslash_web/templates/common/layout.html.tt2
+++ b/src/newslash_web/templates/common/layout.html.tt2
@@ -7,7 +7,7 @@
     [%- IF user.is_admin %][% INCLUDE admin/admin_bar %][% END -%]
     [%- INCLUDE ads/super_banner -%]
     [%- INCLUDE common/site_header -%]
-    <div class="main-wrapper">
+    <div class="content">
       [% content %]
     </div>
   </body>

diff --git a/src/newslash_web/templates/common/single.html.tt2 b/src/newslash_web/templates/common/single.html.tt2
index fed4422..b5b2024 100644 (file)
--- a/src/newslash_web/templates/common/single.html.tt2
+++ b/src/newslash_web/templates/common/single.html.tt2
@@ -1,80 +1,82 @@
-[%- WRAPPER common/layout enable_sidebar=1 short_header=1 -%]
+[%- WRAPPER common/layout -%]
 [%- INCLUDE common/components/comment_tree -%]
 
 [%- IF (item.content_type == 'journal' && item.uid == user.uid) || user.is_admin -%]
 [% INCLUDE common/components/article_item %]
 [% END -%]
 
-<div class="main-column">
-  <div class="[% page.type %] [% page.content_type %] main-contents">
-
-    [%- IF page.content_type == "comment" && page.type == "single" -%]
-    <div class="content-notice alert alert-info">
-      <p>このコンテンツは、
-        [%- IF discussion.kind == "story" -%]
-        「<span><a href="/story/[% discussion.sid %]">[% parent_item.title %]</a></span>」記事
-        [%- ELSIF discussion.kind == "journal-story" -%]
-        「<span><a href="/story/[% discussion.sid %]">[% parent_item.title %]</a></span>」記事
-        [%- ELSIF discussion.kind == "journal" -%]
-        日記「<span><a href="/journal/[% parent_item.id %]">[% parent_item.title %]</a></span>」
-        [%- ELSIF discussion.kind == "poll" -%]
-        国民投票「<span><a href="/poll/[% parent_item.id %]">[% parent_item.title %]</a></span>」
-        [%- ELSIF discussion.kind == "submission" -%]
-        タレコミ「<span><a href="/journal/[% parent_item.id %]">[% parent_item.title %]</a></span>」
-        [%- ELSE -%]
-        「<span>[% discussion.title %]</span>」記事
-        [%- END -%]に対するコメントです。
-      </p>
-      
-      [%- IF parent -%]
-      <p>親コメントは「<span><a href="/comment/[% parent.cid %]">[% parent.title %]</a></span>」です。</p>
+<div class="article-wrapper">
+  <div class="content-wrapper">
+    <div class="[% page.type %] [% page.content_type %] main-contents">
+      [%- IF page.content_type == "comment" && page.type == "single" -%]
+      <div class="content-notice alert alert-info">
+        <p>このコンテンツは、
+          [%- IF discussion.kind == "story" -%]
+          「<span><a href="/story/[% discussion.sid %]">[% parent_item.title %]</a></span>」記事
+          [%- ELSIF discussion.kind == "journal-story" -%]
+          「<span><a href="/story/[% discussion.sid %]">[% parent_item.title %]</a></span>」記事
+          [%- ELSIF discussion.kind == "journal" -%]
+          日記「<span><a href="/journal/[% parent_item.id %]">[% parent_item.title %]</a></span>」
+          [%- ELSIF discussion.kind == "poll" -%]
+          国民投票「<span><a href="/poll/[% parent_item.id %]">[% parent_item.title %]</a></span>」
+          [%- ELSIF discussion.kind == "submission" -%]
+          タレコミ「<span><a href="/journal/[% parent_item.id %]">[% parent_item.title %]</a></span>」
+          [%- ELSE -%]
+          「<span>[% discussion.title %]</span>」記事
+          [%- END -%]に対するコメントです。
+        </p>
+        
+        [%- IF parent -%]
+        <p>親コメントは「<span><a href="/comment/[% parent.cid %]">[% parent.title %]</a></span>」です。</p>
+        [%- END -%]
+      </div>
       [%- END -%]
-    </div>
-    [%- END -%]
-
-    <div id="content-body">
-      [%- INCLUDE common/article/article hide_more_link=1 -%]
-      <article-item></article-item>
-    </div>
-
-    [%- IF page.type == "single" && page.content_type == "story" -%]
-    <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>
+      
+      <div id="content-body">
+        [%- INCLUDE common/article/article hide_more_link=1 -%]
+        <article-item></article-item>
+      </div>
+      
+      [%- IF page.type == "single" && page.content_type == "story" -%]
+      <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">
+        [%- INCLUDE ads/native_contents -%]
+      </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>
+      
+      [%- IF !discussion -%]
+      <div class="alert alert-info">
+        この投稿に対するコメントは設定により無効にされています。
+      </div>
+      [%- ELSIF discussion.commentstatus == "disabled" -%]
+      <div class="alert alert-info">
+        この投稿に対するコメントは設定により無効にされています。
+      </div>
+      [%- ELSIF discussion.commentstatus == "logged_in" -%]
+      <div class="alert alert-info">
+        この投稿に対するコメントはログインユーザーにのみ許可されています。
+      </div>
+      [%- ELSIF discussion.commentstatus != "enabled" -%]
+      <div class="alert alert-info clear">
+        この投稿に対するコメントは一部のユーザーのみに許可されています。
+      </div>
       [%- END -%]
-    </div>
-    <div class="related">
-      [%- INCLUDE ads/native_contents -%]
-    </div>
-    [%- END -%]
-
-    [%- IF !discussion -%]
-    <div class="alert alert-info">
-      この投稿に対するコメントは設定により無効にされています。
-    </div>
-    [%- ELSIF discussion.commentstatus == "disabled" -%]
-    <div class="alert alert-info">
-      この投稿に対するコメントは設定により無効にされています。
-    </div>
-    [%- ELSIF discussion.commentstatus == "logged_in" -%]
-    <div class="alert alert-info">
-      この投稿に対するコメントはログインユーザーにのみ許可されています。
-    </div>
-    [%- ELSIF discussion.commentstatus != "enabled" -%]
-    <div class="alert alert-info clear">
-      この投稿に対するコメントは一部のユーザーのみに許可されています。
-    </div>
-    [%- END -%]
-
-  </div><!-- .story -->
-
+      
+    </div><!-- .content-wrapper -->
+  </div><!-- .main-contents -->
+  [%- INCLUDE common/sidebar -%]
+</div><!-- .article-wrapper -->
 
 [%#- INCLUDE common/comment/comments_nojs -%]
 [%#- INCLUDE common/comment/comments -%]
@@ -91,8 +93,4 @@
 <script>articleItem.run({el: '#content-body'});</script>
 [%- END -%]
 
-</div><!-- .main-column -->
-
-[%- INCLUDE common/sidebar -%]
-
 [% END %]

diff --git a/src/newslash_web/templates/timeline/base.html.tt2 b/src/newslash_web/templates/timeline/base.html.tt2
index bf73495..f7bd609 100644 (file)
--- a/src/newslash_web/templates/timeline/base.html.tt2
+++ b/src/newslash_web/templates/timeline/base.html.tt2
@@ -1,6 +1,6 @@
 [% WRAPPER common/layout enable_sidebar=1 %]
 
-<div class="main-column">
+<div class="timeline-wrapper">
   <div class="index main-contents">
     [%- FOREACH item IN items -%]
     [%- INCLUDE common/article/article hide_bodytext=1 %]
@@ -15,8 +15,8 @@
     [%- END -%]
     
   </div><!-- .index -->
-</div>
 
-[%- INCLUDE common/sidebar -%]
+  [%- INCLUDE common/sidebar -%]
 
+</div><!-- .timeline-wrapper -->
 [% END %]