template: update story/story

diff --git a/src/newslash_web/css/main.less b/src/newslash_web/css/main.less
index d0ac753..2968481 100644 (file)
--- a/src/newslash_web/css/main.less
+++ b/src/newslash_web/css/main.less
@@ -4,5 +4,7 @@
 @import "main/contents-text.less";
 @import "main/article.less";
 @import "main/comment.less";
+@import "main/comment_form.less";
+@import "main/story.less";
 @import "main/site-header.less";
 @import "admin/admin-bar.less";
\ No newline at end of file

diff --git a/src/newslash_web/css/main/article.less b/src/newslash_web/css/main/article.less
index c922632..c21deae 100644 (file)
--- a/src/newslash_web/css/main/article.less
+++ b/src/newslash_web/css/main/article.less
@@ -52,6 +52,14 @@ article {
     }
 
     footer {
+        .comment-counter {
+            padding: 6px;
+            .counter {
+                font-size: 160%;
+                font-weight: bold;
+                padding: 0 4px;
+            }
+        }
        .link-to-story {
            text-align: center;
            margin-bottom: 6px;

diff --git a/src/newslash_web/css/main/comment.less b/src/newslash_web/css/main/comment.less
index 1064b08..f787352 100644 (file)
--- a/src/newslash_web/css/main/comment.less
+++ b/src/newslash_web/css/main/comment.less
@@ -3,10 +3,12 @@
 @import "colors.less";
 
 #comments {
+    clear: left;
+    padding: 0 10px;
     ol {
        margin: 0;
        padding: 0;
-    margin-left: 16px;
+        margin-left: 16px;
        list-style-type: none;
     }
 }

diff --git a/src/newslash_web/css/main/comment_form.less b/src/newslash_web/css/main/comment_form.less
new file mode 100644 (file)
index 0000000..e16ec06
--- /dev/null
+++ b/src/newslash_web/css/main/comment_form.less
@@ -0,0 +1,16 @@
+@import "colors.less";
+
+#comment_form {
+    border: 1px solid @border-color-inactive;
+    padding: 0 6px;
+    margin: 10px;
+    box-shadow: 0 0 1px @border-color-inactive;
+
+    clear: left;
+    paddingt: 0 10px;
+}
+
+#post-comment {
+    padding: 12px 6px;
+}
+

diff --git a/src/newslash_web/css/main/form.less b/src/newslash_web/css/main/form.less
index fe70050..9c402d8 100644 (file)
--- a/src/newslash_web/css/main/form.less
+++ b/src/newslash_web/css/main/form.less
@@ -1,5 +1,8 @@
+.form-group { margin-top: 0; margin-bottom: 15px; }
+
 .form-control {
     height: auto;
+    width: 97%;
 }
 
 textarea.form-control {

diff --git a/src/newslash_web/css/main/main.less b/src/newslash_web/css/main/main.less
index e9f9b7f..ed2be92 100644 (file)
--- a/src/newslash_web/css/main/main.less
+++ b/src/newslash_web/css/main/main.less
@@ -2,15 +2,14 @@
 @import "colors.less";
 
 @sidebar-width: 300px;
-@sidebar-margin-left: 10px;
+
+@main-contents-margin-left: 10px;
+@main-sidebar-margin: 10px;
 @sidebar-margin-right: 10px;
 
-@main-contents-margin-left: 0px;
-@main-contents-margin-right: 10px;
 @main-contents-padding-left: 4px;
 @main-contents-padding-right: 4px;
 
-@main-column-padding-left: 10px;
 
 a { text-decoration: none; }
 a:hover { text-decoration: underline; }
@@ -26,17 +25,17 @@ body {
     text-align: center;
 }
 
-@main-col-offset: @sidebar-width + @sidebar-margin-right + @sidebar-margin-left;
+@main-col-offset: @sidebar-width + @main-sidebar-margin + @sidebar-margin-right;
 
 .main-column {
     float: left;
     width: 100%;
-    margin: 0 -(@main-column-padding-left + @main-col-offset) 0 0;
-    padding: 0 0 0 @main-column-padding-left;
+    margin: 0 -(@main-col-offset) 0 0;
+    padding: 0;
 }
 
 .main-contents {
-    margin-right: @main-col-offset + @main-contents-margin-right + @main-column-padding-left;
+    margin-right: @main-col-offset + @main-sidebar-margin;
     margin-left: @main-contents-margin-left;
     padding: 0 0 0 @main-contents-padding-left;
 }
@@ -44,7 +43,7 @@ body {
 .sidebar {
     float: right;
     width: @sidebar-width;
-    margin: 0 @sidebar-margin-right @sidebar-margin-left;
+    margin: 0 @sidebar-margin-right 0 0;
 }
 
 .main-column {

diff --git a/src/newslash_web/css/main/story.less b/src/newslash_web/css/main/story.less
new file mode 100644 (file)
index 0000000..9529812
--- /dev/null
+++ b/src/newslash_web/css/main/story.less
@@ -0,0 +1,30 @@
+// LESS for story
+
+@import "colors.less";
+
+.story {
+    .related {
+        border: 1px solid @border-color-inactive;
+        padding: 6px;
+        margin: 0 0 10px;
+        box-shadow: 0 0 1px @border-color-inactive;
+        font-size: 95%;
+
+        * {
+            padding: 0 0 0 1px;
+            margin: 0;
+            font-size: 100%;
+            line-height: 120%;
+        }
+        h3 {
+           background: @article-header-background;
+           border: 1px solid @article-header-border;
+           line-height: 110%;
+           margin: 0 0 3px;
+           padding: 1px 3px;
+        }
+
+        ul { list-style-type: none; }
+    }
+}
+

diff --git a/src/newslash_web/templates/common/article.html.tt2 b/src/newslash_web/templates/common/article.html.tt2
index 89fe3e6..fb1689d 100644 (file)
--- a/src/newslash_web/templates/common/article.html.tt2
+++ b/src/newslash_web/templates/common/article.html.tt2
@@ -23,6 +23,10 @@
     <div class="link-to-story"><a href="[% url %]">
        記事[% IF story.commentcount %]と[% story.commentcount%]件のコメント[% END %]を読む
     </a></div>
+    [%- ELSE -%]
+    <div class="comment-counter">
+      <a href="#comments"><span class="counter">[% story.commentcount %]</span>コメント</a>
+    </div>
     [%- END -%]
     <div class="tag-bar">
       <ul class="tags">

diff --git a/src/newslash_web/templates/common/comment_form.html.tt2 b/src/newslash_web/templates/common/comment_form.html.tt2
new file mode 100644 (file)
index 0000000..17ac8c8
--- /dev/null
+++ b/src/newslash_web/templates/common/comment_form.html.tt2
@@ -0,0 +1,22 @@
+<form id="post-comment" v-show="show_form">
+  <p class="form-group">
+    <label for="post-title">コメントタイトル：</label>
+    <input id="post-title" type="text" class="form-control" name="title" v-model="title" placeholder="タイトル" />
+  </p>
+    <label for="post-introtext">コメント本文：</label>
+    <textarea id="post-introtext" name="introtext" class="form-control" v-model="introtext" placeholder="本文をここに記述してください" ></textarea>
+  </p>
+  <p>
+    <button type="submit" class="btn btn-default" v-on:click.prevent="show_preview">投稿確認</button>
+    <button type="reset" class="btn">リセット</button>
+  </p>
+</form>
+
+<form id="post-submit" v-show="show_submit">
+  <p>
+    <button type="submit" class="btn btn-default" v-on:click.prevent="post_submission">投稿</button>
+    <button type="button" class="btn" v-on:click="leave_preview">戻る</button>
+  </p>
+</form>
+
+</div><!-- #post-comment -->

diff --git a/src/newslash_web/templates/story/story.html.tt2 b/src/newslash_web/templates/story/story.html.tt2
index f2a7d1b..c141782 100644 (file)
--- a/src/newslash_web/templates/story/story.html.tt2
+++ b/src/newslash_web/templates/story/story.html.tt2
@@ -3,11 +3,34 @@
 <div class="main-column">
   <div class="story main-contents">
     [%- INCLUDE common/article hide_more_link = 1 %]
+    <div class="related">
+      <h3>関連リンク</h3>
+      <ul>
+        [%- FOREACH item IN related -%]
+        <li><a href="/[% item.type %]/[% item.key_id %]">[% item.title %]</a></li>
+        [%- END -%]
+        [%- IF params.prev_stoid && params.prev_stoid.story -%]
+        <li>前の記事：<a href="/story/[% params.prev_stoid.story.sid %]">
+            [% params.prev_stoid.story.title %]
+        </a></li>
+        [%- END -%]
+        [%- IF params.next_stoid && params.next_stoid.story -%]
+        <li>次の記事：<a href="/story/[% params.next_stoid.story.sid %]">
+            [% params.next_stoid.story.title %]
+        </a></li>
+        [%- END -%]
+      </ul>
+    </div>
   </div><!-- .story -->
+</div><!-- .main-column -->
 
-  [%- INCLUDE common/comments -%]
+[%- INCLUDE common/sidebar -%]
+
+[%- INCLUDE common/comments -%]
+
+<div id="comment_form">
+  [%- INCLUDE common/comment_form %]
 </div>
 
-[%- INCLUDE common/sidebar -%]
 
 [% END %]