From 24d769dc4d95b819039b10d3d504a2de7bc67505 Mon Sep 17 00:00:00 2001
From: Hideki Shimizu <shimiz@cns.s.u-tokyo.ac.jp>
Date: Wed, 26 Feb 2020 23:00:32 +0900
Subject: [PATCH] [mod] pagination and list design

---
 layouts/partials/pagination.html | 17 ++------
 static/css/list.css              | 34 +++++++++++++--
 static/css/nav.css               | 18 --------
 static/css/pagination.css        | 71 ++++++++++++++++++++++++++++++++
 4 files changed, 106 insertions(+), 34 deletions(-)
 delete mode 100644 static/css/nav.css
 create mode 100644 static/css/pagination.css

diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
index 43c2bdf..133c875 100644
--- a/layouts/partials/pagination.html
+++ b/layouts/partials/pagination.html
@@ -1,13 +1,4 @@
-{{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
-<link rel="stylesheet" href="{{ $.Site.BaseURL }}css/nav.css">
-<nav>
-  <ul class="link justify-content-center">
-    {{ if .Paginator.HasPrev }}
-    <p><a class="page-link" href="{{ .Paginator.Prev.URL }}">&laquo; Prev</a></p>
-    {{ end }}
-    {{ if .Paginator.HasNext }}
-    <p><a class="page-link" href="{{ .Paginator.Next.URL }}">&raquo; Next</a></p>
-    {{ end }}
-  </ul>
-</nav>
-{{ end }}
+<link rel="stylesheet" href="{{ .Site.BaseURL }}css/pagination.css">
+<div class="pagination-class">
+    {{ template "_internal/pagination.html" . }}
+</div>
diff --git a/static/css/list.css b/static/css/list.css
index 1a5ae04..af39dae 100644
--- a/static/css/list.css
+++ b/static/css/list.css
@@ -1,15 +1,42 @@
 .year {
   width: 100%;
-  margin: auto;
-  text-align: center;
+  margin-left: 45px;
+  text-align: left;
 }
 
+/*
 .year h1 {
   position: relative;
   display: inline-block;
-  padding: 0 55px;
+  padding: 0 21px;
+}
+*/
+.year h1 {
+  position: relative;
+  padding-left: 25px;
+}
+
+.year h1:before {
+  position: absolute;
+  content: '';
+  bottom: -3px;
+  left: 0;
+  width: 0;
+  height: 0;
+  border: none;
+  border-left: solid 15px transparent;
+  border-bottom: solid 15px rgb(47, 79,79);
+}
+.year h1:after {
+  position: absolute;
+  content: '';
+  bottom: -3px;
+  left: 10px;
+  width: 70%;
+  border-bottom: solid 3px rgb(47, 79,79);
 }
 
+/*
 .year h1:before, .year h1:after {
   content: '';
   position: absolute;
@@ -26,3 +53,4 @@
 .year h1:after {
   right: 0;
 }
+*/
diff --git a/static/css/nav.css b/static/css/nav.css
deleted file mode 100644
index 784f586..0000000
--- a/static/css/nav.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.page-link {
-  margin-top: 20px;
-  width: auto;
-  font-size: 20px;
-  font-weight: bold;
-  /*padding: 0.25em 0.25em; */
-  padding: 1px 7px 1px 7px;
-  border-radius: 4px;
-  transition: .4s;
-  text-decoration: none;
-  border: solid 1px black;
-  color: black;
-}
-
-.page-link:hover {
-  background: black;
-  color: white;
-}
diff --git a/static/css/pagination.css b/static/css/pagination.css
new file mode 100644
index 0000000..252cb71
--- /dev/null
+++ b/static/css/pagination.css
@@ -0,0 +1,71 @@
+.pagination-class {
+    padding: 0px;
+    text-align:  center;
+    height: 50px;
+}
+
+.pagination {
+  display: inline-block;
+  padding-left: 0;
+  margin: 20px 0;
+  border-radius: 4px;
+}
+.pagination > li {
+  display: inline;
+}
+.pagination > li > a,
+.pagination > li > span {
+  position: relative;
+  float: left;
+  padding: 6px 12px;
+  margin-left: -1px;
+  line-height: 1.42857143;
+  color: #337ab7;
+  text-decoration: none;
+  background-color: #fff;
+  border: 1px solid #ddd;
+}
+.pagination > li:first-child > a,
+.pagination > li:first-child > span {
+  margin-left: 0;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.pagination > li:last-child > a,
+.pagination > li:last-child > span {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.pagination > li > a:hover,
+.pagination > li > span:hover,
+.pagination > li > a:focus,
+.pagination > li > span:focus {
+  z-index: 2;
+  color: #23527c;
+  background-color: #eee;
+  border-color: #ddd;
+}
+.pagination > .active > a,
+.pagination > .active > span,
+.pagination > .active > a:hover,
+.pagination > .active > span:hover,
+.agination > .active > a:focus,
+.pagination > .active > span:focus {
+  z-index: 3;
+  color: #fff;
+  cursor: default;
+  background-color: #337ab7;
+  border-color: #337ab7;
+}
+.pagination > .disabled > span,
+.pagination > .disabled > span:hover,
+.pagination > .disabled > span:focus,
+.pagination > .disabled > a,
+.pagination > .disabled > a:hover,
+.pagination > .disabled > a:focus {
+  color: #777;
+  cursor: not-allowed;
+  background-color: #fff;
+  border-color: #ddd;
+}
+
-- 
GitLab