From: OHASHI, Norikazu <katz@neko-mori.sakura.ne.jp>
Date: Sat, 11 May 2019 15:24:54 +0000 (+0900)
Subject: テキスト入力およびセレクトボックスのスタイルを修正
X-Git-Url: http://www.wald-der-katze.sakura.ne.jp/git/gitweb.cgi?a=commitdiff_plain;h=6d8573e1af30f26cdbcf406bbf9df1fe953ab917;p=book_server.git

テキスト入力およびセレクトボックスのスタイルを修正
---

diff --git a/sinatra/app/controllers/web_gui.rb b/sinatra/app/controllers/web_gui.rb
index eab9c41..dd58a47 100644
--- a/sinatra/app/controllers/web_gui.rb
+++ b/sinatra/app/controllers/web_gui.rb
@@ -471,6 +471,7 @@ class WebGui < Sinatra::Base
       find_status[find_key] = find_value
     end
     session[:list_status][:find_status] = find_status
+    session[:list_status][:position][:start] = 0
     redirect "/book_list/main"
   end
   
diff --git a/sinatra/app/models/books_db.rb b/sinatra/app/models/books_db.rb
index c74758b..282ae4b 100644
--- a/sinatra/app/models/books_db.rb
+++ b/sinatra/app/models/books_db.rb
@@ -528,7 +528,7 @@ class BookManager
         break
       end
       if (value =~ /^\/(.+)\/$/)
-        reg_value = value[1...-1]
+        reg_value = $~[1]
         books = books.with_regexp(key, reg_value)
       else
         books = books.where(key => value)
diff --git a/sinatra/app/views/book_list.haml b/sinatra/app/views/book_list.haml
index 49e9415..041d8b3 100644
--- a/sinatra/app/views/book_list.haml
+++ b/sinatra/app/views/book_list.haml
@@ -24,7 +24,7 @@
           
       %tr
         %td
-          %select{:name => 'kind', :id => 'kind'}
+          %select{ :name => 'kind', :class => 'pulldown', :id => 'kind'}
             %option{ :value => 'title' }
               書名
             %option{ :value => 'author' }
@@ -42,7 +42,7 @@
             %option{ :value => 'series' }
               単行本シリーズ
         %td
-          %input{ :type => 'text', :name => 'find_value', :id => 'find_value', :size => 40}
+          %input{ :type => 'text', :class => 'input_text', :name => 'find_value', :id => 'find_value', :size => 40}
         %td
           %input{ :type => 'submit', :class => 'side_button', :value => '検索'}
 
@@ -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', :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-5]{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}
diff --git a/sinatra/app/views/book_regist.haml b/sinatra/app/views/book_regist.haml
index 5e7b133..b730be4 100644
--- a/sinatra/app/views/book_regist.haml
+++ b/sinatra/app/views/book_regist.haml
@@ -26,73 +26,73 @@
         %label{ :for => 'isbn' }
           %span
             ISBN：
-        %input{ :name => 'isbn', :type => 'text', :id => 'isbn', :value => book_info[:isbn], :readonly => isbn_regist_f, :required => isbn_regist_f}
+        %input{ :name => 'isbn', :type => 'text', :class => 'input_text', :id => 'isbn', :value => book_info[:isbn], :readonly => isbn_regist_f, :required => isbn_regist_f}
         %input{ :type => 'submit', :class => 'side_button', :value => 'ISBN探索', :formaction => '/book_search_isbn' }
 
       .item
         %label{ :for => 'title' }
           %span
             書名：
-        %input{ :name => 'title', :type => 'text', :id => 'title', :value => book_info[:title]}
+        %input{ :name => 'title', :type => 'text', :class => 'input_text', :id => 'title', :value => book_info[:title]}
       
         %label{ :for => 'volume' }
           巻数：
-        %input{ :name => 'volume', :type => 'text', :id => 'volume', :size => 3, :value => book_info[:volume]}
+        %input{ :name => 'volume', :type => 'text', :class => 'input_text', :id => 'volume', :size => 3, :value => book_info[:volume]}
         
       .item
         %label{ :for => 'series' }
           %span
             単行本シリーズ：
-        %input{ :name => 'series', :type => 'text', :id => 'series', :value => book_info[:series]}
+        %input{ :name => 'series', :type => 'text', :class => 'input_text', :id => 'series', :value => book_info[:series]}
         
       .item
         %label{ :for => 'author' }
           %span
             著者：
-        %input{ :name => 'author', :type => 'text', :id => 'author', :value => book_info[:author]}
+        %input{ :name => 'author', :type => 'text', :class => 'input_text', :id => 'author', :value => book_info[:author]}
 
       .item
         %label{ :for => 'original_author'}
           %span
             原作：
-        %input{ :name => 'original_author', :type => 'text', :id => 'original_author', :value => book_info[:orignal_author]}
+        %input{ :name => 'original_author', :type => 'text', :class => 'input_text', :id => 'original_author', :value => book_info[:orignal_author]}
 
       .item
         %label{ :for => 'illustrator' }
           %span
             作画：
-        %input{ :name => 'illustrator', :type => 'text', :id => 'illustrator', :value => book_info[:illustrator]}
+        %input{ :name => 'illustrator', :type => 'text', :class => 'input_text', :id => 'illustrator', :value => book_info[:illustrator]}
       
       .item
         %label{ :for => 'translator' }
           %span
             翻訳：
-        %input{ :name => 'translator', :type => 'text', :id => 'translator', :value => book_info[:translator]}
+        %input{ :name => 'translator', :type => 'text', :class => 'input_text', :id => 'translator', :value => book_info[:translator]}
 
       .item
         %label{ :for => 'supervisor' }
           %span
             監修：
-        %input{ :name => 'supervisor', :type => 'text', :id => 'supervisor', :value => book_info[:supervisor]}
+        %input{ :name => 'supervisor', :type => 'text', :class => 'input_text', :id => 'supervisor', :value => book_info[:supervisor]}
        
       .item
         %label{ :for => 'publisher' }
           %span
             出版社：
-        %input{ :name => 'publisher', :type => 'text', :id => 'publisher', :value => book_info[:publisher]}
+        %input{ :name => 'publisher', :type => 'text', :class => 'input_text', :id => 'publisher', :value => book_info[:publisher]}
        
       .item
         %label{ :for => 'pubdate' }
           %span
             出版日：
-        %input{ :name => 'pubdate', :type => 'text', :id => 'pubdate', :value => book_info[:pubdate], :oninput => 'validDateForm(this)'}
+        %input{ :name => 'pubdate', :type => 'text', :class => 'input_text', :id => 'pubdate', :value => book_info[:pubdate], :oninput => 'validDateForm(this)'}
 
       .item
         %label{ :for => 'cover_file'}
           %span
             書影：
         %input{ :name => 'cover_file', :type => 'file', :id => 'cover_file', :accept => 'image/png, image/jpeg', :style => "display:none"}
-        %input{ :type => 'text', :id => 'file_name', :value => ''}
+        %input{ :type => 'text', :class => 'input_text', :id => 'file_name', :value => ''}
         %input{ :type => 'submit', :class => 'side_button', :value => '書影Upload', :formaction => '/book_upload_cover' }
         :javascript
           var file = document.getElementById( 'cover_file' );
@@ -119,14 +119,14 @@
         %label{ :for => 'summary' }
           %span
             概説：
-        %textarea{ :name => 'summary', :rows => '5', :cols => '35', :id => 'summary'}
+        %textarea{ :name => 'summary', :class => 'input_text', :rows => '5', :cols => '35', :id => 'summary'}
           #{book_info[:summary]}
 
       .item
         %label{ :for => 'book_rank' }
           %span
             評価：
-        %input{:name => 'book_rank', :type => 'text', :id => 'book_rank', :value => book_info[:book_rank], :pattern => '[0-5]'}
+        %input{:name => 'book_rank', :type => 'text', :class => 'input_text', :id => 'book_rank', :value => book_info[:book_rank], :pattern => '[0-5]'}
         
     .buttons
       %hr
diff --git a/sinatra/app/views/login.haml b/sinatra/app/views/login.haml
index d8d254e..676631f 100644
--- a/sinatra/app/views/login.haml
+++ b/sinatra/app/views/login.haml
@@ -14,12 +14,12 @@
         %label{ :for => 'name' }
           %span
             アカウント：
-        %input{ :name => 'name', :size => 10, :maxlength => 10, :id => 'name', :required => true}
+        %input{ :name => 'name', :type => 'text', :class => 'input_text', :size => 10, :maxlength => 10, :id => 'name', :required => true}
       .item
         %label{ :for => 'passwd' }
           %span
             パスワード：
-        %input{ :name => 'passwd', :type => 'password', :id => 'passwd', :pattern => '.{6,}',  :required => true}
+        %input{ :name => 'passwd', :type => 'password', :class => 'input_text', :id => 'passwd', :pattern => '.{6,}',  :required => true}
   
   .buttons
     %hr
diff --git a/sinatra/app/views/scss/classes.scss b/sinatra/app/views/scss/classes.scss
new file mode 100644
index 0000000..c368b31
--- /dev/null
+++ b/sinatra/app/views/scss/classes.scss
@@ -0,0 +1,67 @@
+@charset "utf-8";
+.message {
+    margin-left: 10px;
+    margin-right: 10px;
+    text-align: left;
+}
+
+.formstyle {
+    margin: 0, auto;
+    .params {
+        max-height: 37em;
+        overflow: auto;
+        margin-left: 20px;
+        text-align: left;
+        display: block;
+        .item {
+            margin: 5px auto;
+            label {
+                margin-right: 10px;
+                span {
+                    width:220px;
+                    display: inline-block;
+                    vertical-align: top;
+                }
+            }
+        }
+        .item_center {
+            align-items: center;
+            text-align: center;
+        }
+    }
+}
+
+.find_form, .book_list, seek_form {
+    display: inline-block;
+    align-items: center;
+    text-align: center;
+}
+
+.buttons {
+    margin: 5px 0px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    hight: 5em;
+    margin: 0px auto;
+    padding-bottom: 20px;
+}
+
+.side_item {
+    padding: 5px 5px;
+    margin: 2px 0px;
+}
+
+
+.error {
+    background: #cd5e3c;
+    position: absolute;
+    top: 30px;
+    bottom: 30px;
+    left: 30px;
+    right: 30px;
+    margin: auto;
+}
+
+
diff --git a/sinatra/app/views/scss/layout.scss b/sinatra/app/views/scss/layout.scss
new file mode 100644
index 0000000..0a1c041
--- /dev/null
+++ b/sinatra/app/views/scss/layout.scss
@@ -0,0 +1,46 @@
+@charset "utf-8";
+#main1 {
+    position: relative;
+    background: #f8e58c;
+    align-items: center;
+    text-align: center;
+    height: 30em;
+    padding: 20px 5px;
+}
+
+#head {
+    background: #a8c97f;
+    text-align: center;
+    padding: 5px 5px;
+}
+
+#center {
+    block: float;
+    overflow: hidden;
+}
+
+#sidebar {
+    float: left;
+    width: 15%;
+    background: #fddea5;
+    text-align: left;
+    padding-bottom: 3267px;
+    margin-bottom: -3267px;
+}
+
+#main2 {
+    position: relative;
+    float: right;
+    width: 85%;
+    background: #f8e58c;
+    align-items: center;
+    text-align: center;
+    height: 50em;
+    padding: 5px 0px;
+    overflow: auto;
+}
+
+#foot {
+    background: #a8c97f;
+    padding: 5px 5px;
+}
diff --git a/sinatra/app/views/scss/style.scss b/sinatra/app/views/scss/style.scss
index a95b2f7..c40b648 100644
--- a/sinatra/app/views/scss/style.scss
+++ b/sinatra/app/views/scss/style.scss
@@ -1,25 +1,13 @@
 @charset "utf-8";
-
-@mixin button_color {
-    background-color: #f08300;
-    color: #3e62ad;
-    border: 1px solid #000000;
-    &:hover {
-        background-color:#f6ad49;
-        color: #3e62ad;
-    }
-    &:disabled {
-        background-color: #e49e61;
-        color: #bbc8e6;
-    }
-}
-
+@import 'widget';
+@import 'layout';
+@import 'classes';
 body {
     color:#444;
     align-items: center;
     text-align: center;
     margin: 10px auto;
-    max-width:52em;
+    max-width:65em;
 }
 
 h1 {
@@ -30,137 +18,3 @@ h1 {
 ul {
     text-align: left;
 }
-
-input.push_button{
-    font-size: 1em;
-    padding: 5px,20px;
-    width: 200px;
-    height: 25px;
-    margin-left: 20px;
-    @include button_color;
-}
-
-input.side_button{
-    font-size: 0.7em;
-    padding: 2px,2px;
-    min-width: 20px;
-    max-width: 80px;
-    height: 20px;
-    margin-left: 2px;
-    border-radius: 8px;
-    @include button_color;
-}
-
-#main1 {
-    position: relative;
-    background: #f8e58c;
-    align-items: center;
-    text-align: center;
-    height: 25em;
-    padding: 20px 5px;
-}
-
-#head {
-    background: #a8c97f;
-    text-align: center;
-    padding: 5px 5px;
-}
-
-#center {
-    block: float;
-    overflow: hidden;
-}
-
-#sidebar {
-    float: left;
-    width: 20%;
-    background: #fddea5;
-    text-align: left;
-    padding-bottom: 3267px;
-    margin-bottom: -3267px;
-}
-
-#main2 {
-    position: relative;
-    float: right;
-    width: 80%;
-    background: #f8e58c;
-    align-items: center;
-    text-align: center;
-    height: 40em;
-    padding: 5px 0px;
-    overflow: auto;
-}
-
-#foot {
-    background: #a8c97f;
-    padding: 5px 5px;
-}
-
-
-.message {
-    margin-left: 10px;
-    margin-right: 10px;
-    text-align: left;
-}
-
-.formstyle {
-    margin: 0, auto;
-    .params {
-        height: 27em;
-        overflow: auto;
-        margin-left: 20px;
-        text-align: left;
-        display: block;
-        .item {
-            margin: 2px auto;
-            label {
-                margin-right: 10px;
-                span {
-                    width:220px;
-                    display: inline-block;
-                    vertical-align: top;
-                }
-            }
-        }
-        .item_center {
-            align-items: center;
-            text-align: center;
-        }
-    }
-}
-
-.find_form, .book_list, seek_form {
-    display: inline-block;
-    align-items: center;
-    text-align: center;
-}
-
-.buttons {
-    margin: 5px 0px;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    hight: 5em;
-    margin: 0px auto;
-    padding-bottom: 20px;
-}
-
-.side_item {
-    padding: 5px 5px;
-    margin: 2px 0px;
-}
-
-
-.error {
-    background: #cd5e3c;
-    position: absolute;
-    top: 30px;
-    bottom: 30px;
-    left: 30px;
-    right: 30px;
-    margin: auto;
-}
-
-
diff --git a/sinatra/app/views/scss/widget.scss b/sinatra/app/views/scss/widget.scss
new file mode 100644
index 0000000..3f5bf4b
--- /dev/null
+++ b/sinatra/app/views/scss/widget.scss
@@ -0,0 +1,103 @@
+@charset "utf-8";
+@mixin button_color {
+    background-color: #f08300;
+    color: #3e62ad;
+    border: 1px solid #554738;
+    &:hover {
+        background-color:#f6ad49;
+        color: #3e62ad;
+    }
+    &:disabled {
+        border: 1px solid #554738;
+        color: #bbc8e6;
+    }
+}
+
+@mixin text_style {
+    border-radius: 5px;
+    border: solid 1px #554738;
+    background-color: #f8fbf8;
+    color: #1c305c;
+    &:hover {
+        border: 1px solid #db8449;
+    }
+    &:focus {
+        outline: 0;
+        border: 2px solid #db8449;
+    }
+        
+}
+
+@mixin select_style {
+    padding: 2px 10px;
+    border-radius: 5px;
+    background-image: url(/down.png);
+    background-repeat: no-repeat;
+    background-position: right 50%;
+    background-size: 10px, 80%;
+    background-color: #f08300;
+    color: #3e62ad;
+    border: 1px solid #554738;
+
+    &:hover {
+        background-color:#f6ad49;
+        color: #3e62ad;
+    }
+    &:focus {
+        outline: 0;
+    }
+}
+
+input, button, textarea, select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+input.push_button{
+    font-size: 1em;
+    padding: 5px,20px;
+    width: 200px;
+    height: 25px;
+    margin-left: 20px;
+    border-radius: 5px;
+    @include button_color;
+}
+
+input.side_button{
+    font-size: 0.7em;
+    padding: 2px,2px;
+    min-width: 20px;
+    max-width: 80px;
+    height: 22px;
+    margin-left: 2px;
+    border-radius: 5px;
+    @include button_color;
+}
+
+input.input_text {
+    font-size: 0.9em;
+    padding: 2px,2px;
+    margin-left: 2px;
+    height: 22px;
+    @include text_style;
+}
+
+textarea.input_text {
+    font-size: 0.9em;
+    padding: 2px, 2px;
+    hieght: 60px;
+    @include text_style;
+}
+
+select.pulldown
+{
+    font-size: 0.7em;
+    min-width: 20px;
+    max-width: 180px;
+    height: 22px;
+    
+    @include select_style;
+    
+}
+
diff --git a/sinatra/app/views/user_edit.haml b/sinatra/app/views/user_edit.haml
index da45f5b..10c6f29 100644
--- a/sinatra/app/views/user_edit.haml
+++ b/sinatra/app/views/user_edit.haml
@@ -22,43 +22,43 @@
           %label{ :for => 'user_id' }
             %span
               ユーザID：
-          %input{ :name => 'usr_id', :id => 'user_id', :value => account, :readonly => true}
+          %input{ :name => 'usr_id', :type => 'text', :class => 'input_text', :id => 'user_id', :value => account, :readonly => true}
         
       .item
         %label{ :for => 'name' }
           %span
             アカウント：
-        %input{ :name => 'name', :id => 'name', :value => account, :readonly => true}
+        %input{ :name => 'name', :type => 'text', :class => 'input_text', :id => 'name', :value => account, :readonly => true}
       
       .item  
         %label{ :for => 'full_name' }
           %span
             フルネーム：
-        %input{ :name => 'full_name', :id => 'full_name', :size => 30, :value => username, :maxlength => 127}
+        %input{ :name => 'full_name', :type => 'text', :class => 'input_text', :id => 'full_name', :size => 30, :value => username, :maxlength => 127}
         
       .item
         %label{ :for => 'old_passwd' }
           %span
             現在のパスワード：
-        %input{ :name => 'try_pass', :type => 'password', :id => 'old_passwd'}
+        %input{ :name => 'try_pass', :type => 'password', :class => 'input_text', :id => 'old_passwd'}
         
       .item
         %label{ :for => 'passwd' }
           %span
             新しいパスワード：
-        %input{ :name => 'new_pass', :type => 'password', :id => 'passwd', :pattern => '.{6,}', :oninput => 'checkDifferentForm(this, "old_passwd", "現在のパスワードと新しいパスワードが同じです。")' }
+        %input{ :name => 'new_pass', :type => 'password', :class => 'input_text', :id => 'passwd', :pattern => '.{6,}', :oninput => 'checkDifferentForm(this, "old_passwd", "現在のパスワードと新しいパスワードが同じです。")' }
 
       .item
         %label{ :for => 'passwdConfirm'}
           %span
             新しいパスワード(確認用)：
-        %input{ :type => 'password', :id => 'passwdConfirm', :pattern => '.{6,}', :oninput => 'checkSameForm(this, "passwd", "新しいパスワードが一致しません。")' }
+        %input{ :type => 'password', :class => 'input_text', :id => 'passwdConfirm', :pattern => '.{6,}', :oninput => 'checkSameForm(this, "passwd", "新しいパスワードが一致しません。")' }
 
       .item
         %label{ :for => 'email' }
           %span
             Eメールアドレス：
-        %input{ :name => 'email', :type => 'email', :id => 'email', :size => 30, :maxlength => 127, :value => email }
+        %input{ :name => 'email', :type => 'email', :class => 'input_text', :id => 'email', :size => 30, :maxlength => 127, :value => email }
       
     .buttons
       %hr
diff --git a/sinatra/public/down.png b/sinatra/public/down.png
new file mode 100644
index 0000000..02f7fea
Binary files /dev/null and b/sinatra/public/down.png differ