チェンジセット 235 : SPARQLBuilderWWW/web

更新日時:

2015/02/12 15:09:08 (10 年 前)

更新者:

lenz

ログメッセージ:

エンドポイントのセレクトボックスが狭く選択内容が見えない問題をレイアウト変更で改良
他細かなGUI修正
（newtopのみ。newguiは崩壊中）

パス:

SPARQLBuilderWWW/web

ファイル:

• newsparqlbuilder.css (変更) (4 diff)
• newsparqlbuilder.js (変更) (7 diff)
• newtop.html (変更) (2 diff)

SPARQLBuilderWWW/web/newsparqlbuilder.css

@@ -46 +46 @@
 }
 
+.SBModalContents .SBForms{
+        float: left;
+        background-color: #eeeeff;
+}
+
 .SBModalContents .SBSelects{
-        float: left;
-        background-color: #eeeeff;
+        width: 85%;
+        float: left;
 }
 
 .SBModalContents .SBSelects select{
-        width: 28%;
+        width: 50%;
         height: 2em;
 }
 
-.SBModalContents .SBSelects input{
+.SBModalContents .SBSelects .SBEndPointSelect{
+        width: 100%;
+        height: 2em;
+}
+
+
+.SBModalContents .SBPermaLink{
+        width: 15%;
+        height: 100%;
+        float: left;
+        text-align: center;
+}
+
+.SBModalContents .SBPermaLinkButton{
         display: inline-block;
-        width: 13.5%;
-        margin: 0 1% 0;
-        height: 2em;
+        margin-top: 10px;
+        width: 90%;
+        height: 36px;
         -webkit-border-radius: 3;
         -moz-border-radius: 3;
@@ -79 +97 @@
 .SBModalContents .SBResult{
         display: none;
-        float: left;
-        margin-top: 0.3em;
-        margin-left: 0.3em;
+        height: 28px;
+        font-size: 24px;
 }
 
 .SBModalContents .SBViewAll{
         display: none;
-        float: left;
-        margin-top: 1px;
-        margin-left: 0.5em;
-        height: 2em;
+        height: 28px;
         -webkit-border-radius: 3;
         -moz-border-radius: 3;
@@ -123 +137 @@
 }
 
-.SBModalContents .SBSelectedPath{
+.SBModalContents .SBPath{
         float: left;
         padding: 10px;
         text-align: center;
         word-wrap: break-word;
+}
+
+.SBGenButton{
+        margin: 1.5em;
+        -webkit-border-radius: 7;
+        -moz-border-radius: 7;
+        border-radius: 7px;
+        border: none;
+        color: #ffffff;
+        font-size: 1.2em;
+        background: hsl(200, 50%, 75%);
+        padding: 5px 15px 5px 15px;
+        cursor: pointer;
+}
+
+.SBGenButton:hover{
+        background: hsl(200, 50%, 85%);
 }
 
 .SBRootNode{
         margin: 0.5em;
-        margin-top: 1.5em;
         -webkit-border-radius: 10;
         -moz-border-radius: 10;
@@ -163 +193 @@
         background: hsl(150, 50%, 75%);
         padding: 5px 15px 5px 15px;
-}
-
-.SBGenButton{
-        margin: 1.5em;
-        -webkit-border-radius: 7;
-        -moz-border-radius: 7;
-        border-radius: 7px;
-        border: none;
-        color: #ffffff;
-        font-size: 1.2em;
-        background: hsl(200, 50%, 75%);
-        padding: 5px 15px 5px 15px;
-        cursor: pointer;
-}
-
-.SBGenButton:hover{
-        background: hsl(200, 50%, 85%);
 }
 

SPARQLBuilderWWW/web/newsparqlbuilder.js

@@ -97 +97 @@
         $('.SBModalView').css('top', $(window).scrollTop()).css('height', window.innerHeight).fadeIn();
 
-        var mvw = $('.SBModalContents').width();
-        var mvh = $('.SBModalContents').height();
-
-        $('.SBModalContents .SBSelects').css('width', (mvw - 201) + 'px').css('height', 30 + 'px');
-        $('.SBModalContents .SBMessage').css('width', 200 + 'px').css('height', 30 + 'px');
-        $('.SBModalContents .SBGraph').css('width', (mvw - 201) + 'px').css('height', (mvh - 31) + 'px');
-        $('.SBModalContents .SBSelectedPath').css('width', 180 + 'px').css('height', (mvh - 51 - 26) + 'px');
-        $('.SBModalContents .SBModalButtons').css('width', 200 + 'px').css('height', '26px');
+        resizeModalView();
 
         $(".SBEndPointSelect").select2();
@@ -146 +139 @@
                 event.preventDefault();
         });
+}
+
+function resizeModalView(){
+
+        if($('.SBModalView').css('display') == 'block'){
+                var mvw = $('.SBModalContents').width();
+                var mvh = $('.SBModalContents').height();
+                $('.SBModalContents .SBForms').css('width', (mvw - 201) + 'px').css('height', 56 + 'px');
+                $('.SBModalContents .SBMessage').css('width', 200 + 'px').css('height', 56 + 'px');
+                $('.SBModalContents .SBGraph').css('width', (mvw - 201) + 'px').css('height', (mvh - 57) + 'px');
+                $('.SBModalContents .SBPath').css('width', 180 + 'px').css('height', (mvh - 77 - 26) + 'px');
+                $('.SBModalContents .SBModalButtons').css('width', 200 + 'px').css('height', '26px');
+
+                var selw = $('.SBModalContents .SBSelects').width();
+                if(selw % 2 == 1){
+                        $('.SBModalContents .SBSelects').css('width', (selw - 1));
+                }
+        }
 }
 
@@ -530 +541 @@
                 }else{
                     // 譛ｫ遶ｯ繝弱�繝峨↑繧峨ヤ繝ｼ繝ｫ繝√ャ繝励�諠�ｱ繧呈峩譁ｰ
-                    var resultText = "";
+                    var resultText = '<input type="button" class="SBGenButton" value="Generate" onclick="generateSPARQL()">';
                     // 繝代せ縺ｮ蜷榊燕驟榊�蛻�ｾ後ｍ縺九ｉ郢ｰ繧願ｿ斐＠縺ｪ縺後ｉ
                     for (var i = pathname.length;i > 0; i--){
@@ -547 +558 @@
                         }
                     }
-                    resultText = resultText + '<input type="button" class="SBGenButton" value="Generate" onclick="generateSPARQL()">';
+
                     // 繝��繝ｫ繝√ャ繝励�蜀�ｮｹ繧呈嶌縺肴鋤縺�
                     $('.SBSelectedPath').html(resultText);
-                    if(svg.attr("width") == width){
-                        $('.SBTooltip').show();
-                    }
 
                     // 繧ｵ繝ｼ繝悶Ξ繝�ヨ縺ｫ騾√ｊ霑斐☆繝代せ繧ｪ繝悶ず繧ｧ繧ｯ繝医ｒ菫晏ｭ�
                     pathobj = d.path;
-
+                }
+
+                $('.SBPath').css('overflow-y', 'visible');
+
+                if($('.SBPath').height() < $('.SBSelectedPath').innerHeight()){
+                    $('.SBPath').css('overflow-y', 'scroll');
                 }
             }
@@ -852 +865 @@
         var obj = jsontext;
 
-        $('.SBResult').css('color', 'black').css('font-weight', 'normal');
+        $('.SBResult').css('color', 'black').css('font-weight', 'normal').css('margin-top', '0px');
 
         $('.SBPlural').text('s');
 
         if(obj.length == 0){
-                $('.SBResult').css('color', 'red').css('font-weight', 'bold');
+                $('.SBResult').css('color', 'red').css('font-weight', 'bold').css('margin-top', '15px');
                 $('.SBPlural').text('');
         }else if(obj.length == 1){
@@ -865 +878 @@
         if(obj.length <= 10){
                 viewnum = obj.length;
+                $('.SBResult').css('margin-top', '15px');
                 $('.SBViewall').hide();
         }else if(pathlimit == 10){
@@ -871 +885 @@
         }else{
                 viewnum = obj.length;
+                $('.SBResult').css('margin-top', '15px');
                 $('.SBViewall').hide();
         }

SPARQLBuilderWWW/web/newtop.html

@@ -23 +23 @@
                 <div class="SBModalView">
                         <div class="SBModalContents">
-                                <div class="SBSelects">
-                                        <select class="SBEndPointSelect"></select><select class="SBStartClassSelect"></select><select class="SBEndClassSelect"></select><input type="button" class="SBSaveESE" value="PermaLink" onclick="openPermalink()" disabled="disabled">
+                                <div class="SBForms">
+                                        <div class="SBSelects">
+                                                <select class="SBEndPointSelect"></select><select class="SBStartClassSelect"></select><select class="SBEndClassSelect"></select>
+                                        </div>
+                                        <div class="SBPermaLink">
+                                                <input type="button" class="SBPermaLinkButton" value="Permalink" onclick="openPermalink()" disabled="disabled">
+                                        </div>
                                 </div>
                                 <div class="SBMessage">
@@ -39 +44 @@
                                         </div>
                                 </div>
-                                <div class="SBSelectedPath">
+                                <div class="SBPath">
+                                        <div class="SBSelectedPath">
+                                        </div>
                                 </div>
                                 <div class="SBModalButtons">