Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WEBインストーラーのテンプレート改善 (#783, #810 を含む) #813

Merged
merged 11 commits into from
Feb 14, 2024
Merged

WEBインストーラーのテンプレート改善 (#783, #810 を含む) #813

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e90552a
インストール画面のローディング画像が欠落している #810
seasoftjapan Jan 3, 2024
99563a8
幾らか容量が増えたと思うので strip
seasoftjapan Jan 3, 2024
4f3388a
CSS Nesting Module を使った実装 #783 (インストーラー)
seasoftjapan Jan 3, 2024
a4985f7
CSS Nesting Module を使った実装 #783 (インストーラー)
seasoftjapan Jan 3, 2024
572a9bf
インストーラー red を使わず attention に統一
seasoftjapan Jan 3, 2024
b69c937
インストーラーのボタン改善
seasoftjapan Jan 3, 2024
d375433
スペース調整
seasoftjapan Jan 4, 2024
4bf4823
インストーラー 枠線・背景を CSS に変更
seasoftjapan Jan 4, 2024
b29a8cf
Merge branch 'seasoft-810' into seasoft-783-install
seasoftjapan Jan 4, 2024
01d9fe1
インストール画面のローディング画像が欠落している #810
seasoftjapan Jan 4, 2024
3ed97bb
Fix a typo. "EC CUBE" -> "EC-CUBE"
seasoftjapan Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
446 changes: 169 additions & 277 deletions html/install/css/admin_contents.css
View file
Open in desktop

Large diffs are not rendered by default.

Binary file removed html/install/img/ico_prev.gif
View file
Open in desktop
Binary file not shown.
Binary file removed html/install/img/ico_prev02.gif
View file
Open in desktop
Binary file not shown.
Binary file removed html/install/img/login_back_btn_bottom.jpg
View file
Open in desktop
Binary file not shown.
Binary file removed html/install/img/login_back_btn_contents.jpg
View file
Open in desktop
Binary file not shown.
Binary file removed html/install/img/login_back_btn_top.jpg
View file
Open in desktop
Binary file not shown.
Binary file removed html/install/img/login_back_contents.gif
View file
Open in desktop
Binary file not shown.
Binary file removed html/install/img/login_back_top.jpg
View file
Open in desktop
Binary file not shown.
Binary file removed html/install/img/table_back.png
View file
Open in desktop
Binary file not shown.
Binary file removed html/install/img/white-grad-active.png
View file
Open in desktop
Binary file not shown.
Binary file removed html/install/img/white-grad.png
View file
Open in desktop
Binary file not shown.
Binary file removed html/install/img/white-grad04.png
View file
Open in desktop
Binary file not shown.
2 changes: 2 additions & 0 deletions html/install/templates/agreement.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ function fnChangeVisible(check_id, mod_id){
//-->
</script>

<!--{strip}-->
<form name="form1" id="form1" method="post" action="?">
<table width="502" border="0" cellspacing="1" cellpadding="0" summary=" ">
<input type="hidden" name="mode" value="<!--{$tpl_mode}-->" />
Expand Down Expand Up @@ -103,3 +104,4 @@ function fnChangeVisible(check_id, mod_id){
<tr><td height="30"></td></tr>
</table>
</form>
<!--{/strip}-->
8 changes: 4 additions & 4 deletions html/install/templates/complete.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
* Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
*}-->

<!--{strip}-->
<form name="form1" id="form1" method="post" action="?">
<input type="hidden" name="mode" value="<!--{$tpl_mode}-->" />

Expand All @@ -28,19 +29,18 @@
<!--{/foreach}-->
<div class="contents">
<div class="message">
<h2>EC CUBE インストールが完了しました。</h2>
<h2>EC-CUBE インストールが完了しました。</h2>
</div>
<div class="result-info02">
<p><a href="<!--{$tpl_sslurl}--><!--{$admin_dir}--><!--{$smarty.const.DIR_INDEX_PATH}-->">管理画面</a>にログインできます。<br />
先ほど登録したID、パスワードを用いてログインしてください。</p>
</div>
</div>

<div class="btn-area-top"></div>
<div class="btn-area">
<ul>
<li><a class="btn-action" href="<!--{$tpl_sslurl}--><!--{$admin_dir}--><!--{$smarty.const.DIR_INDEX_PATH}-->"><span class="btn-next">管理画面へログインする</span></a></li>
<li><a class="btn next" href="<!--{$tpl_sslurl}--><!--{$admin_dir}--><!--{$smarty.const.DIR_INDEX_PATH}-->">管理画面へログインする</a></li>
</ul>
</div>
<div class="btn-area-bottom"></div>
</form>
<!--{/strip}-->
133 changes: 82 additions & 51 deletions html/install/templates/install_frame.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,78 +26,109 @@
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<link rel="stylesheet" href="css/admin_contents.css" type="text/css" media="all" />
<link rel="stylesheet" href="../js/jquery.colorbox/colorbox.css" type="text/css" media="all" />
<!--[if lt IE 9]>
<script src="../js/jquery-1.11.1.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="../js/jquery-2.1.1.min.js"></script>
<!--<![endif]-->
<script type="text/javascript" src="../js/eccube.js"></script>
<script type="text/javascript" src="../js/jquery.colorbox/jquery.colorbox-min.js"></script>

<style type="text/css">
#loading{
width: 100%;
height: 100%;
background-color:#FFFFFF;
filter:alpha(opacity=85);
-moz-opacity:0.85;
-khtml-opacity: 0.85;
opacity:0.85;
position: fixed;
_position: absolute; /* forIE6 */
display: none;
top: 0;
left: 0;
z-index: 10000;
}
#loading img {
width: 48px;
height: 48px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -24px;
margin-left: -24px;
}
</style>
<!--{if $tpl_mainpage != 'complete.tpl'}-->
<script type="text/javascript">//<![CDATA[
<!--{if $tpl_mainpage != 'complete.tpl'}-->
$(function(){
$('.btn-next').on('click', function(e) {
e.preventDefault();
$('form').submit();
$('#loading').show();
$('.btn.next').on('click', function(e) {
e.preventDefault();
$('form').submit();
});
});
//]]></script>
<!--{/if}-->
$(window).on('load', function() {
$('#loading').hide();
});
$(window).on('beforeunload',function(){
// unload では処理されないため、beforeunload を利用している。(Chrome, Firefox で確認)
$('#loading').show();
});
//]]></script>
<title>EC-CUBEインストール</title>
</head>
<!--{strip}-->
<body>
<!--{$GLOBAL_ERR}-->
<noscript>
<p>JavaScript を有効にしてご利用下さい。</p>
<p>JavaScript を有効にしてご利用下さい。</p>
</noscript>
<div id="loading"><img src="../js/jquery.colorbox/loading.gif" width="48" height="48" alt="Loading..." /></div>
<div id="outside">
<div id="out-wrap">
<div class="logo">
<img src="img/logo_resize.jpg" width="99" height="15" alt="EC-CUBE" />
</div>
<div id="out-area">
<div class="out-top"></div>
<!--{include file=$tpl_mainpage}-->
</div>
<!--{if strlen($install_info_url) != 0}-->
<div id="info-area">
<iframe src="<!--{$install_info_url}-->" width="562" height="550" frameborder="no" scrolling="no">
こちらはEC-CUBEからのお知らせです。この部分は iframe対応ブラウザでご覧下さい。
</iframe>
<div id="out-wrap">
<div class="logo">
<img src="img/logo_resize.jpg" width="99" height="15" alt="EC-CUBE" />
</div>
<div id="out-area">
<!--{include file=$tpl_mainpage}-->
</div>
<!--{if strlen($install_info_url) != 0}-->
<div id="info-area">
<iframe src="<!--{$install_info_url}-->" width="562" height="550" frameborder="no" scrolling="no">
こちらはEC-CUBEからのお知らせです。この部分は iframe対応ブラウザでご覧下さい。
</iframe>
</div>
<!--{/if}-->
</div>
<!--{/if}-->
</div>
</div>
<div id="loading"><div class="inner">
<canvas></canvas>
<p>Loading...</p>
</div></div>
</body>
<style type="text/css">
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(32, 32, 32, 0.3);
.inner {
position: relative;
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1ex;
border-radius: 1ex;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
canvas {
--s: 14px;
--g: 5px;
width: calc(3*(1.353*var(--s) + var(--g)));
aspect-ratio: 3;
background:
linear-gradient(#FC0 0 0) left/33% 100% no-repeat,
conic-gradient(from -90deg at var(--s) calc(0.353*var(--s)), #EEE 135deg,#383B4A 0 270deg,#9C9DA5 0)
;
background-blend-mode: multiply;
mask:
linear-gradient(to bottom right, #0000 calc(0.25*var(--s)),#000 0 calc(100% - calc(0.25*var(--s)) - 1.414*var(--g)),#0000 0),
conic-gradient(from -90deg at right var(--g) bottom var(--g),#000 90deg,#0000 0)
;
background-size: calc(100%/3) 100%;
mask-size: calc(100%/3) 100%;
mask-composite: intersect;
animation: l7 steps(3) 1.5s infinite;
position: relative;
left: 50%;
transform: translate(-50%, 0);
}
}
p {
color: #fff;
letter-spacing: 0.3ex;
}
}
@keyframes l7 {
to {background-position: 150% 0%}
}
</style>
<!--{/strip}-->
</html>
11 changes: 6 additions & 5 deletions html/install/templates/step0.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@
* along with this program; if not, write to the Free Software
* Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
*}-->

<!--{strip}-->
<form name="form1" id="form1" method="post" action="?">
<input type="hidden" name="mode" value="<!--{$tpl_mode}-->" />
<input type="hidden" name="step" value="0" />
Expand All @@ -36,18 +38,17 @@
<!--{if $hasErr}-->
<p class="action-message">[次へ進む] をクリックすると、チェックを再実行します。</p>
<div><input type="checkbox" name="mode_overwrite" value="step0" id="mode_overwrite" /> <label for="mode_overwrite">問題点を無視して次へ進む (上級者向け)</label></div>
<div class="red">※ 問題点を解決せずに無視して進めると、トラブルの原因となる場合があります。</div>
<div class="attention">※ 問題点を解決せずに無視して進めると、トラブルの原因となる場合があります。</div>
<!--{else}-->
必要なファイルのコピーを開始します。
<!--{/if}-->
</div>
</div>
<div class="btn-area-top"></div>
<div class="btn-area">
<ul>
<li><a class="btn-action" href="javascript:;" onclick="document.form1['mode'].value='return_welcome';document.form1.submit(); return false;"><span class="btn-prev">前へ戻る</span></a></li>
<li><a class="btn-action" href="javascript:;"><span class="btn-next">次へ進む</span></a></li>
<li><a class="btn prev" href="javascript:;" onclick="document.form1['mode'].value='return_welcome';document.form1.submit(); return false;">前へ戻る</a></li>
<li><a class="btn next" href="javascript:;">次へ進む</a></li>
</ul>
</div>
<div class="btn-area-bottom"></div>
</form>
<!--{/strip}-->
8 changes: 4 additions & 4 deletions html/install/templates/step0_1.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
* Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
*}-->

<!--{strip}-->
<div class="contents">
<div class="message">
<h2>必要なファイルのコピー</h2>
Expand All @@ -44,13 +45,12 @@
<!--{/if}-->
</div>

<div class="btn-area-top"></div>
<div class="btn-area">
<ul>
<li><a href="#" class="btn-action" onclick="document.form1['mode'].value='return_step0';document.form1.submit();return false;"><span class="btn-prev">前へ戻る</span></a></li>
<li><a class="btn-action" href="javascript:;"><span class="btn-next">次へ進む</span></a></li>
<li><a href="#" class="btn prev" onclick="document.form1['mode'].value='return_step0';document.form1.submit();return false;">前へ戻る</a></li>
<li><a class="btn next" href="javascript:;">次へ進む</a></li>
</ul>
</div>
<div class="btn-area-bottom"></div>
</form>
</div>
<!--{/strip}-->
10 changes: 5 additions & 5 deletions html/install/templates/step1.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ $(function() {
});
});
</script>
<!--{strip}-->
<form name="form1" id="form1" method="post" action="?">
<input type="hidden" name="mode" value="<!--{$tpl_mode}-->" />
<input type="hidden" name="step" value="0" />
Expand Down Expand Up @@ -118,7 +119,7 @@ $(function() {
<td>
<!--{assign var=key value="admin_force_ssl"}-->
<span class="attention"><!--{$arrErr[$key]}--></span>
<input type="checkbox" name="<!--{$key}-->" id="<!--{$key}-->" value="1" <!--{if $arrForm[$key].value == 1}-->checked="checked"<!--{/if}--> /><label for="<!--{$key}-->" style="<!--{$arrErr[$key]|sfGetErrorColor}-->;">SSLを強制する。</label><br />
<input type="checkbox" name="<!--{$key}-->" id="<!--{$key}-->" value="1" <!--{if $arrForm[$key].value == 1}-->checked="checked"<!--{/if}--> /><label for="<!--{$key}-->" style="<!--{$arrErr[$key]|sfGetErrorColor}-->;"> SSLを強制する。</label><br />
<span class="ex-text">管理機能へのアクセスをSSL経由(https)の接続に制限します。</span><br />
</td>
</tr>
Expand Down Expand Up @@ -223,12 +224,11 @@ $(function() {
</div>
</div>
</div>
<div class="btn-area-top"></div>
<div class="btn-area">
<ul>
<li><a class="btn-action" href="javascript:;" onclick="document.form1['mode'].value='return_step0';document.form1.submit();return false;"><span class="btn-prev">前へ戻る</span></a></li>
<li><a class="btn-action" href="javascript:;"><span class="btn-next">次へ進む</span></a></li>
<li><a class="btn prev" href="javascript:;" onclick="document.form1['mode'].value='return_step0';document.form1.submit();return false;">前へ戻る</a></li>
<li><a class="btn next" href="javascript:;">次へ進む</a></li>
</ul>
</div>
<div class="btn-area-bottom"></div>
</form>
<!--{/strip}-->
8 changes: 4 additions & 4 deletions html/install/templates/step2.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ function lfnChangePort(db_type) {
}
}
</script>
<!--{strip}-->
<form name="form1" id="form1" method="post" action="?">
<input type="hidden" name="mode" value="<!--{$tpl_mode}-->" />
<input type="hidden" name="step" value="0" />
Expand Down Expand Up @@ -101,13 +102,12 @@ function lfnChangePort(db_type) {
</table>
</div>

<div class="btn-area-top"></div>
<div class="btn-area">
<ul>
<li><a class="btn-action" href="javascript:;" onclick="document.form1['mode'].value='return_step1';document.form1.submit();return false;"><span class="btn-prev">前へ戻る</span></a></li>
<li><a class="btn-action" href="javascript:;"><span class="btn-next">次へ進む</span></a></li>
<li><a class="btn prev" href="javascript:;" onclick="document.form1['mode'].value='return_step1';document.form1.submit();return false;">前へ戻る</a></li>
<li><a class="btn next" href="javascript:;">次へ進む</a></li>
</ul>
</div>
<div class="btn-area-bottom"></div>
</div>
</form>
<!--{/strip}-->
10 changes: 5 additions & 5 deletions html/install/templates/step3.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
//-->
</script>

<!--{strip}-->
<form name="form1" id="form1" method="post" action="?">
<input type="hidden" name="mode" value="<!--{$tpl_mode}-->" />
<input type="hidden" name="step" value="0" />
Expand Down Expand Up @@ -67,19 +68,18 @@
<span class="attention top"><!--{$arrErr.all}--></span>
<!--{if $arrErr.all != ""}-->
<ul class="btn-area">
<li><a class="btn-normal" href="javascript:;" onclick="eccube.setModeAndSubmit('drop'); return false;">既存データを全て削除する</a></li>
<li><a class="btn" href="javascript:;" onclick="eccube.setModeAndSubmit('drop'); return false;">既存データを全て削除する</a></li>
</ul>
<!--{/if}-->
<!--{/if}-->
</div>
</div>

<div class="btn-area-top"></div>
<div class="btn-area">
<ul>
<li><a class="btn-action" href="javascript:;" onclick="document.form1['mode'].value='return_step2';document.form1.submit();return false;"><span class="btn-prev">前へ戻る</span></a></li>
<li><a class="btn-action" href="javascript:;" onclick="document.body.style.cursor='wait';"><span class="btn-next">次へ進む</span></a></li>
<li><a class="btn prev" href="javascript:;" onclick="document.form1['mode'].value='return_step2';document.form1.submit();return false;">前へ戻る</a></li>
<li><a class="btn next" href="javascript:;" onclick="document.body.style.cursor='wait';">次へ進む</a></li>
</ul>
</div>
<div class="btn-area-bottom"></div>
</form>
<!--{/strip}-->
13 changes: 7 additions & 6 deletions html/install/templates/step4.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@
* along with this program; if not, write to the Free Software
* Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
*}-->

<!--{strip}-->
<form name="form1" id="form1" method="post" action="?">
<input type="hidden" name="mode" value="<!--{$tpl_mode}-->" />
<input type="hidden" name="step" value="0" />
Expand Down Expand Up @@ -53,14 +55,13 @@
<input type="radio" id="ok" name="send_info" checked value="true" /><label for="ok">はい(推奨)</label>&nbsp;
<input type="radio" id="ng" name="send_info" value="false" /><label for="ng">いいえ</label>
</div>
<div class="btn-area-top"></div>
<div class="btn-area">
<ul>
<li><a class="btn-action" href="#" onclick="document.form1['mode'].value='return_step3';document.form1.submit();return false;">
<span class="btn-prev">前へ戻る</span></a></li>
<li><a class="btn-action" href="javascript:;">
<span class="btn-next">次へ進む</span></a></li>
<li><a class="btn prev" href="#" onclick="document.form1['mode'].value='return_step3';document.form1.submit();return false;">
前へ戻る</a></li>
<li><a class="btn next" href="javascript:;">
次へ進む</a></li>
</ul>
<div class="btn-area-bottom"></div>
</div>
</form>
<!--{/strip}-->
Loading
Loading