テーブル、フォントのデザイン対応
authorOHASHI, Norikazu <katz@neko-mori.sakura.ne.jp>
Sun, 12 May 2019 10:26:10 +0000 (19:26 +0900)
committerOHASHI, Norikazu <katz@neko-mori.sakura.ne.jp>
Sun, 12 May 2019 10:26:10 +0000 (19:26 +0900)
sinatra/app/controllers/web_gui.rb
sinatra/app/views/book_list.haml
sinatra/app/views/scss/classes.scss
sinatra/app/views/scss/list.scss [new file with mode: 0644]
sinatra/app/views/scss/main_tag.scss [new file with mode: 0644]
sinatra/app/views/scss/style.scss

index 88f957e..dd58a47 100644 (file)
@@ -418,7 +418,7 @@ class WebGui < Sinatra::Base
     if (id == nil)
       raise WebError.new(status: 408, message: "セッション期限切れです。再ログインをしてください。")
     end
-    session[:list_status] = {position: {start:0, step: 15},
+    session[:list_status] = {position: {start:0, step: 10},
                              find_status: nil}
     redirect "/book_list/main"
   end
index 041d8b3..27aee3d 100644 (file)
@@ -51,7 +51,7 @@
     %input{ :type => 'submit', :class => 'side_button', :formaction => '/book_list/before', :value => "《#{before_step}件戻る", :disabled => (before_step == 0) }
     %label{ :for => 'step' }
       表示件数
-    %input{ :name => 'step', :type => 'text', :class => 'input_text', :id => 'step', :size => 5, :value => step, :pattern => '[0-5]{1,4}'}
+    %input{ :name => 'step', :type => 'text', :class => 'input_text', :id => 'step', :size => 5, :value => step, :pattern => '[0-9]{1,4}'}
     %input{ :type => 'submit', :class => 'side_button', :formaction => '/book_list/change_step', :value => '表示件数変更'}
     %input{ :type => 'submit', :class => 'side_button', :formaction => '/book_list/next', :value => "#{next_step}件進む》", :disabled => (next_step == 0) }
     %input{ :type => 'hidden', :name => 'start', :value => start}
index c2093a7..5b53f01 100644 (file)
@@ -2,6 +2,8 @@
 .message {
     margin-left: 10px;
     margin-right: 10px;
+    font-family: "Sawarabi Mincho";
+    font-size: 1em;
     text-align: left;
 }
 
@@ -31,7 +33,7 @@
     }
 }
 
-.find_form, .book_list, seek_form {
+.find_form, seek_form {
     display: inline-block;
     align-items: center;
     text-align: center;
diff --git a/sinatra/app/views/scss/list.scss b/sinatra/app/views/scss/list.scss
new file mode 100644 (file)
index 0000000..14efa57
--- /dev/null
@@ -0,0 +1,58 @@
+@charset "utf-8";
+.book_list{
+    max-height: 32em;
+    margin: auto;
+    padding: 2px;
+    width: 98%;
+    overflow: auto;
+    display: inline-block;
+    align-items: center;
+    table {
+        border-collapse: collapse;
+    }
+    .number {
+        width: 2.5em;
+    }
+    .title {
+        width: 20em;
+    }
+    .author {
+        width: 6em;
+    }
+    .publisher {
+        width: 8em;
+    }
+    th {
+        height: 1.5em;
+        border: 1px solid #554738;
+    }
+    td {
+        height: 2.8em;
+        border: 1px solid #554738;
+        &.number {
+            text-align: right
+        }
+        &.title, &.author, &.publisher {
+            text-align: left
+        }
+    }
+}
+
+.book_info {
+    display: inline-block;
+    align-items: center;
+    text-align: center;
+    th {
+        width: 8em;
+        height: 2.5em;
+        text-align: right;
+        &:after {
+            content: ":";
+        }
+    }
+    td {
+        width: 30em;
+        height: 2.5em;
+        text-align: left;
+    }
+}
diff --git a/sinatra/app/views/scss/main_tag.scss b/sinatra/app/views/scss/main_tag.scss
new file mode 100644 (file)
index 0000000..84fe1e6
--- /dev/null
@@ -0,0 +1,34 @@
+@charset "utf-8";
+body {
+    color:#444;
+    align-items: center;
+    text-align: center;
+    margin: 10px auto;
+    max-width:60em;
+}
+
+h1 {
+    font-size: 2.5em;
+    font-family: 'Sawarabi Gothic';
+}
+
+h2 {
+    font-size: 1.7em;
+    font-family: 'Sawarabi Gothic';
+}
+    
+h3 {
+    font-size: 1.5em;
+    font-family: 'Sawarabi Mincho';
+}
+
+ul {
+    text-align: left;
+    font-size: 1em;
+    font-family: 'Sawarabi Mincho';
+}
+
+th, td, a, label {
+    font-size: 1em;
+    font-family: 'Sawarabi Mincho';
+}
index dfe9bbc..e6c0232 100644 (file)
@@ -1,20 +1,8 @@
 @charset "utf-8";
+@import url(https://fonts.googleapis.com/css?family=Sawarabi+Gothic);
+@import url(https://fonts.googleapis.com/css?family=Sawarabi+Mincho);
+@import 'main_tag';
 @import 'widget';
 @import 'layout';
 @import 'classes';
-body {
-    color:#444;
-    align-items: center;
-    text-align: center;
-    margin: 10px auto;
-    max-width:60em;
-}
-
-h1 {
-    font-size: 2.5em;
-    font-family: serif
-}
-
-ul {
-    text-align: left;
-}
+@import 'list';