Changes for page 新しい学校ページを作成

Summary

• Page properties (2 modified, 0 added, 0 removed)

Details

Page properties

Author

...	...	@@ -1,1 +1,1 @@
1		-XWiki.superadmin
	1	+XWiki.XWikiGuest

Content

...	...	@@ -36,7 +36,7 @@
36	36	{{/info}}
37	37
38	38	{{html clean="false"}}
39		-<div class="school-create-form" style="max-width:600px;">
	39	+<div class="school-create-form">
40	40	<form method="post" id="createSchoolForm">
41	41	<input type="hidden" name="action" value="create" />
42	42	<input type="hidden" name="form_token" value="$services.csrf.getToken()" />
...	...	@@ -43,52 +43,52 @@
43	43	<input type="hidden" name="schoolCode" id="schoolCode" />
44	44	<input type="hidden" name="schoolName" id="schoolName" />
45	45
46		- <div class="form-group" style="margin-bottom:20px;">
47		- <label style="font-weight:600;margin-bottom:6px;display:block;">学校を検索 <span style="color:#ef4444;">*</span></label>
48		- <div style="position:relative;">
49		- <input type="text" id="schoolSearchInput" class="form-control"
	46	+ <div class="form-group">
	47	+ <label class="form-label">学校を検索 <span class="required-mark">*</span></label>
	48	+ <div class="search-input-wrap">
	49	+ <input type="text" id="schoolSearchInput" class="form-input search-input-padded"
50	50	placeholder="学校名で検索（例: 日比谷、渋谷、北野...）"
51		- autocomplete="off" style="padding-left:36px;" />
52		- <span style="position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:0.9em;color:#999;pointer-events:none;"><svg class="ico" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></span>
53		- <ul id="schoolSearchResults" style="display:none;position:absolute;top:100%;left:0;right:0;max-height:240px;overflow-y:auto;background:#fff;border:1px solid #e2e8f0;border-top:none;border-radius:0 0 8px 8px;box-shadow:0 4px 16px rgba(0,0,0,0.1);z-index:100;list-style:none;margin:0;padding:0;"></ul>
	51	+ autocomplete="off" />
	52	+ <span class="search-input-icon"><svg class="ico" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></span>
	53	+ <ul id="schoolSearchResults" class="search-results-list"></ul>
54	54	</div>
55		- <small style="color:#94a3b8;font-size:0.82em;">文科省の学校マスターデータから候補を検索します。</small>
	55	+ <div class="form-hint">文科省の学校マスターデータから候補を検索します。</div>
56	56	</div>
57	57
58	58	<!-- 選択結果 -->
59		- <div id="selectedSchoolArea" style="display:none;margin-bottom:20px;">
60		- <div style="background:#f0fdf4;border:1px solid #86efac;border-radius:10px;padding:16px 20px;">
61		- <div style="display:flex;justify-content:space-between;align-items:flex-start;">
	59	+ <div id="selectedSchoolArea" style="display:none;" class="form-group">
	60	+ <div class="selected-school-card">
	61	+ <div class="selected-school-layout">
62	62	<div>
63		- <div style="font-size:0.78em;color:#15803d;font-weight:600;">選択された学校</div>
64		- <div id="selectedSchoolName" style="font-size:1.05em;font-weight:700;color:#166534;margin-top:4px;"></div>
65		- <div id="selectedSchoolInfo" style="font-size:0.84em;color:#15803d;margin-top:2px;"></div>
66		- <div id="selectedSchoolCode" style="font-family:monospace;font-size:0.82em;color:#166534;margin-top:2px;"></div>
	63	+ <div class="selected-school-label">選択された学校</div>
	64	+ <div id="selectedSchoolName" class="selected-school-name"></div>
	65	+ <div id="selectedSchoolInfo" class="selected-school-info"></div>
	66	+ <div id="selectedSchoolCode" class="selected-school-code"></div>
67	67	</div>
68		- <button type="button" onclick="clearSelection()" style="background:none;border:1px solid #86efac;border-radius:6px;cursor:pointer;color:#dc2626;font-size:0.82em;padding:4px 12px;">変更</button>
	68	+ <button type="button" onclick="clearSelection()" class="btn-change-school">変更</button>
69	69	</div>
70	70	</div>
71	71	</div>
72	72
73	73	<!-- 重複チェック結果 -->
74		- <div id="duplicateWarning" style="display:none;margin-bottom:20px;padding:14px 18px;background:#fef2f2;border:1px solid #fca5a5;border-radius:10px;font-size:0.88em;color:#991b1b;">
	74	+ <div id="duplicateWarning" class="duplicate-warning" style="display:none;">
75	75	<strong><svg class="ico" viewBox="0 0 24 24"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> この学校のページは既に存在します</strong>
76		- <div style="margin-top:6px;"><a id="duplicateLink" href="#" style="color:#4f46e5;font-weight:600;">既存のページを開く →</a></div>
	76	+ <div style="margin-top:6px;"><a id="duplicateLink" href="#">既存のページを開く →</a></div>
77	77	</div>
78	78
79	79	<!-- 作成ボタン -->
80	80	<div id="submitArea" style="display:none;">
81		- <div style="padding:14px;background:#ecfdf5;border:1px solid #86efac;border-radius:10px;margin-bottom:16px;font-size:0.88em;color:#166534;">
	81	+ <div class="create-ready-box">
82	82	<svg class="ico" viewBox="0 0 24 24" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg> この学校のページはまだ作成されていません。
83	83	</div>
84		- <button type="submit" class="btn btn-primary" style="width:100%;">ページを作成</button>
	84	+ <button type="submit" class="btn-save btn-full-width">ページを作成</button>
85	85	</div>
86	86	</form>
87	87
88	88	<!-- 未選択時ヒント -->
89		- <div id="searchHint" style="margin-top:20px;text-align:center;padding:24px;background:#f1f5f9;border-radius:10px;">
90		- <div style="font-size:2em;margin-bottom:8px;"><svg class="ico" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></div>
91		- <div style="font-size:0.9em;color:#94a3b8;">上の検索欄から学校名を入力してください</div>
	89	+ <div id="searchHint" class="search-hint-box">
	90	+ <div class="search-hint-icon"><svg class="ico" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></div>
	91	+ <div class="search-hint-text">上の検索欄から学校名を入力してください</div>
92	92	</div>
93	93	</div>
94	94
...	...	@@ -131,19 +131,17 @@
131	131
132	132	resultsList.innerHTML = '';
133	133	if (results.length === 0) {
134		- resultsList.innerHTML = '<li style="padding:14px;text-align:center;color:#94a3b8;">該当する学校が見つかりません</li>';
	134	+ resultsList.innerHTML = '<li class="search-result-empty">該当する学校が見つかりません</li>';
135	135	} else {
136	136	results.forEach(function(s) {
137	137	var li = document.createElement('li');
138		- li.style.cssText = 'padding:10px 14px;cursor:pointer;border-bottom:1px solid #f1f5f9;';
	138	+ li.className = 'search-result-item';
139	139	li.innerHTML =
140		- '<div style="font-weight:600;">' + s.name + '</div>' +
141		- '<div style="font-size:0.82em;color:#94a3b8;margin-top:2px;">' +
	140	+ '<div class="search-result-name">' + s.name + '</div>' +
	141	+ '<div class="search-result-info">' +
142	142	s.pref + ' ' + s.city + ' ・ ' + s.type + '（' + s.est + '）' +
143	143	'</div>' +
144		- '<div style="font-family:monospace;font-size:0.78em;color:#6366f1;">' + s.code + '</div>';
145		- li.onmouseover = function() { this.style.background = '#f0f4ff'; };
146		- li.onmouseout = function() { this.style.background = ''; };
	144	+ '<div class="search-result-code">' + s.code + '</div>';
147	147	li.onclick = function() { selectSchool(s); };
148	148	resultsList.appendChild(li);
149	149	});
...	...	@@ -208,11 +208,11 @@
208	208	if (e.key === 'ArrowDown') {
209	209	e.preventDefault();
210	210	selectedIdx = Math.min(selectedIdx + 1, items.length - 1);
211		- items.forEach(function(li, i) { li.style.background = i === selectedIdx ? '#f0f4ff' : ''; });
	209	+ items.forEach(function(li, i) { li.classList.toggle('active', i === selectedIdx); });
212	212	} else if (e.key === 'ArrowUp') {
213	213	e.preventDefault();
214	214	selectedIdx = Math.max(selectedIdx - 1, 0);
215		- items.forEach(function(li, i) { li.style.background = i === selectedIdx ? '#f0f4ff' : ''; });
	213	+ items.forEach(function(li, i) { li.classList.toggle('active', i === selectedIdx); });
216	216	} else if (e.key === 'Enter' && selectedIdx >= 0) {
217	217	e.preventDefault();
218	218	items[selectedIdx].click();