Commit fa583a28 authored by FionaChen's avatar FionaChen

調整 modal 小視窗在手機尺寸置中設定,

也更新所有頁面內容
完成 HRMS 內容
parent a9d21cae
......@@ -420,6 +420,7 @@
</div>
<!-- 各公司出勤 end -->
<!-- -------------------- -->
......@@ -431,7 +432,139 @@
<!-- 異動記錄 start -->
<div class="tab-pane fade" id="RoleMeb" role="tabpanel" aria-labelledby="RoleMeb-tab">
<div class="search-group">
<input type="text" class="input" placeholder="請輸入關鍵字">
<div class="dropdown-group">
<div class="dropdown dropdown-status">
<button type="button" class="btn dropdown-toggle" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">全部</button>
<div class="dropdown-menu 72px" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#" seleted>狀態</a>
<a class="dropdown-item" href="#">公司名稱</a>
<a class="dropdown-item" href="#">簽約公司</a>
</div>
</div>
</div>
<button type="button" class="btn-wt blue"><img src="images/icon/icon-search.svg">搜尋</button>
</div>
<table class="table table-bordered table-striped table-hrm table-rwd">
<!-- <table class="table table-striped table-borderless table-student table-rwd bulletinBoardListTBL"> -->
<thead>
<tr class="tr-rwd-hide">
<th class="sortable sorter">執行</th>
<th class="sortable sorter">執行日期</th>
<th class="sortable sorter">簽約公司</th>
<th class="sortable sorter">公司名稱</th>
<th class="sortable sorter">簽約員工數</th>
<th class="sortable sorter">交付日期</th>
<th class="sortable sorter">到期日期</th>
<th class="sortable sorter">停/啟用原因</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="執行">新增</td>
<td data-th="執行日期">2021-10-27</td>
<td data-th="簽約公司">AAA公司</td>
<td data-th="公司名稱">甲公司</td>
<td data-th="簽約員工數">130</td>
<td data-th="交付日期">2021-10-27</td>
<td data-th="到期日期">2022-10-27</td>
<td data-th="停/啟用原因">-</td>
</tr>
<tr>
<td data-th="執行">停用</td>
<td data-th="執行日期">2021-10-05</td>
<td data-th="簽約公司">BBB公司</td>
<td data-th="公司名稱">乙公司</td>
<td data-th="簽約員工數">100</td>
<td data-th="交付日期">2021-10-05</td>
<td data-th="到期日期">2022-10-05</td>
<td data-th="停/啟用原因">其他:公司倒閉</td>
</tr>
<tr>
<td data-th="執行">啟用</td>
<td data-th="執行日期">2021-09-01</td>
<td data-th="簽約公司">CCC公司</td>
<td data-th="公司名稱">丙公司</td>
<td data-th="簽約員工數">99</td>
<td data-th="交付日期">2021-09-01</td>
<td data-th="到期日期">2022-09-01</td>
<td data-th="停/啟用原因">調整合約人數</td>
</tr>
<tr>
<td data-th="執行">編輯</td>
<td data-th="執行日期">2021-08-05</td>
<td data-th="簽約公司">DDD公司</td>
<td data-th="公司名稱">丁公司</td>
<td data-th="簽約員工數">87</td>
<td data-th="交付日期">2021-08-05</td>
<td data-th="到期日期">2022-08-05</td>
<td data-th="停/啟用原因">87</td>
</tr>
<tr>
<td data-th="執行">編輯</td>
<td data-th="執行日期">2021-10-05</td>
<td data-th="簽約公司">EEE公司</td>
<td data-th="公司名稱">戊公司</td>
<td data-th="簽約員工數">120</td>
<td data-th="交付日期">2021-10-05</td>
<td data-th="到期日期">2021-11-05</td>
<td data-th="停/啟用原因">120</td>
</tr>
<tr>
<td data-th="執行">2021-10-29</td>
<td data-th="執行日期">2021-10-29</td>
<td data-th="簽約公司">FFF公司</td>
<td data-th="公司名稱">己公司</td>
<td data-th="簽約員工數">140</td>
<td data-th="交付日期">2021-10-29</td>
<td data-th="到期日期">2021-10-29</td>
<td data-th="停/啟用原因">15-</td>
</tr>
<tr>
<td data-th="執行">2021-09-15</td>
<td data-th="執行日期">2021-09-15</td>
<td data-th="簽約公司" class="phone-row">GGG公司</td>
<td data-th="公司名稱">庚公司<img src="images/icon/icon-point.svg" class="ml-1"></td>
<td data-th="簽約員工數">38</td>
<td data-th="交付日期">2021-09-15</td>
<td data-th="到期日期">2022-09-15</td>
<td data-th="停/啟用原因">試用到期</td>
</tr>
</tbody>
</table>
<div class="search-group d-flex align-items-center justify-content-end">
<label class="mr-5"><img src="images/icon/icon-alert.svg">員工人數超過上限</label>
<label><img src="images/icon/icon-point.svg" class="mr-1">試用公司</label>
</div>
<div class="pagination mt-2">
<a class="pren all"></a>
<a class="pren"></a>
<a class="page-number active" href="#">1</a>
<a class="page-number" href="#">2</a>
<a class="next active" href="#"></a>
<a class="next all active" href="#"></a>
</div>
......@@ -465,7 +598,7 @@
</button>
</div>
<div class="modal-body password">
<form>
<div class="row form-group">
<span class="col-4">舊密碼</span>
<input type="text" class="form-control form-control-sm col-8" name="systemAdminAccount"
......@@ -502,7 +635,7 @@
</div>
</div>
</div> -->
</form>
</div>
<div class="modal-footer">
</div>
......@@ -561,7 +694,7 @@
<!-- 停用成功 -->
<!-- 修改失敗 -->
<div class="modal fade" id="FailModal" tabindex="-1" aria-labelledby="FailModalModal"
<div class="modal fade" id="FailModal" tabindex="-1" aria-labelledby="FailModal"
aria-hidden="true">
<div class="modal-dialog success modal-dialog-centered" role="document">
<div class="modal-content">
......@@ -609,7 +742,7 @@
<!--編輯成功 -->
<!-- 新增成功 -->
<div class="modal fade d-flex justify-content-center" id="AddSuccessModal" tabindex="-1" aria-labelledby="AddSuccessModal"
<div class="modal fade" id="AddSuccessModal" tabindex="-1" aria-labelledby="AddSuccessModal"
aria-hidden="true">
<div class="modal-dialog success modal-dialog-centered" role="document">
<div class="modal-content">
......@@ -690,7 +823,7 @@
</button>
</div>
<div class="modal-body Addcont">
<form>
<div class="d-flex justify-content-end align-items-center mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input boardCheck"
......@@ -777,7 +910,7 @@
</div>
</div>
</form>
</div>
<div class="modal-footer">
</div>
......@@ -798,7 +931,7 @@
</button>
</div>
<div class="modal-body Addcont">
<form>
<div class="d-flex justify-content-end align-items-center mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input boardCheck"
......@@ -884,7 +1017,7 @@
</div>
</form>
</div>
<div class="modal-footer">
</div>
......@@ -909,7 +1042,7 @@
</button>
</div>
<div class="modal-body Addcont">
<form>
<div class="form-group row">
<label class="col-sm-4 col-12 pl-0">停用原因</label>
<input type="text" class="form-control form-control-sm col-sm-8 col-12">
......@@ -927,7 +1060,7 @@
</div>
</form>
</div>
<div class="modal-footer">
</div>
......@@ -954,7 +1087,7 @@
<div class="message-group">
<label class="title">甲公司、乙公司?</label>
</div>
<!-- <form> -->
<!-- -->
<div class="form-group mt-5">
<div class="d-flex justify-content-center">
<button type="button" class="btn btn-wt mr-3" data-dismiss="modal">取消</button>
......@@ -963,7 +1096,7 @@
</div>
<!-- </form> -->
<!-- -->
</div>
<div class="modal-footer">
</div>
......@@ -975,42 +1108,6 @@
<!-- <div class="modal fade" id="confirmBackToCalendarMgnt" tabindex="-1" aria-labelledby="confirmBackToStudentMgnt" aria-hidden="true">
<div class="modal-dialog modal-sm0 modal-dialog-centered0 modal-adminSchool modal-message">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<form>
<div class="row row-noMargin">
<div class="col-12 col-noPadding text-center">
<p>是否返回?</p>
<div class="submitBlock">
<div class="d-flex justify-content-around">
<button type="button" class="btn btn-hard btn-normalWidth btn-lightGrey-hollow" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-hard btn-normalWidth btn-lightGrey-hollow" onclick="window.location.href='adminSchool-calendarMgnt_withData.html'">確認</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div> -->
<!-- js files -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- <script type="text/javascript" src="js/popper.min.js"></script> -->
......@@ -1027,7 +1124,7 @@
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<script src="js/sortable.min.js"></script>
......@@ -1134,23 +1231,6 @@
</script>
<script>
// 修正打開新的modal並關閉上一個modal時,modal內容高度超過螢幕時scrollbar不會出現的問題...
$(function(){
// 使用bootstrap modal的shown.bs.modal這個event就可以顯示scrollbar
$('.modal').on('shown.bs.modal', function () {
$('body').addClass('modal-open');
})
$(".modal [data-toggle='modal']").click(function(){
$(this).closest(".modal").modal('hide');
// 修正關閉新modal時,modal scrollbar位置會留下寬度17px空白的問題
$('body').css("overflow","hidden").css("padding-right","0");
});
});
</script>
</body>
......
......@@ -1287,7 +1287,6 @@ h1 {
}
.table-rwd td {
text-align: left !important;
/*font-size: 15px;*/
overflow: hidden;
width: 100% !important;
display: block;
......
......@@ -315,7 +315,7 @@
</button>
</div>
<div class="modal-body password">
<form>
<div class="row form-group">
<span class="col-4">舊密碼</span>
<input type="text" class="form-control form-control-sm col-8" name="systemAdminAccount"
......@@ -340,7 +340,7 @@
data-target="#SuccessModal">確認</button>
</div>
</form>
</div>
<div class="modal-footer">
</div>
......@@ -374,7 +374,7 @@
<!-- 修改成功 -->
<!-- 修改失敗 -->
<div class="modal fade" id="FailModal" tabindex="-1" aria-labelledby="FailModalModal" aria-hidden="true">
<div class="modal fade" id="FailModal" tabindex="-1" aria-labelledby="FailModal" aria-hidden="true">
<div class="modal-dialog success modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header whitebg">
......@@ -411,16 +411,17 @@
<div class="phoneItem">
<ul class="item-list">
<li>
<a href="index.html" class="items"><img src="images/icon/side-OTP.svg">統計與資訊</a>
<a href="index.html" class="items"><img src="images/icon/side-OTP.svg">管理員帳號</a>
<!-- <div class="item-bg"></div> -->
</li>
<li>
<a href="edu-manage.html" class="items active"><img
src="images/icon/side-HRM.svg">教育平台管理</a>
<a href="edu-manage.html" class="items active"><img src="images/icon/side-HRM.svg">教育平台管理</a>
</li>
<li>
<a href="HRMS-manage.html" class="items"><img src="images/icon/side-member.svg">HRMS管理</a>
</li>
<li>
<a href="HRMS-manage.html" class="items"><img
src="images/icon/side-member.svg">HRMS管理</a>
<a href="account.html" class="items"><img src="images/icon/icon-setting.svg">帳號設定</a>
</li>
</ul>
</div>
......@@ -460,6 +461,7 @@
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- <script src="http://code.highcharts.com/highcharts.js"></script> -->
<script src="js/highcharts.js"></script>
<script src="js/main.js"></script>
<script src="js/sortable.min.js"></script>
......@@ -610,23 +612,7 @@
</script>
<script>
// 修正打開新的modal並關閉上一個modal時,modal內容高度超過螢幕時scrollbar不會出現的問題...
$(function () {
// 使用bootstrap modal的shown.bs.modal這個event就可以顯示scrollbar
$('.modal').on('shown.bs.modal', function () {
$('body').addClass('modal-open');
})
$(".modal [data-toggle='modal']").click(function () {
$(this).closest(".modal").modal('hide');
// 修正關閉新modal時,modal scrollbar位置會留下寬度17px空白的問題
$('body').css("overflow", "hidden").css("padding-right", "0");
});
});
</script>
</body>
......
......@@ -643,7 +643,7 @@
</button>
</div>
<div class="modal-body password">
<form>
<div class="row form-group">
<span class="col-4">舊密碼</span>
<input type="text" class="form-control form-control-sm col-8" name="systemAdminAccount"
......@@ -680,7 +680,7 @@
</div>
</div>
</div> -->
</form>
</div>
<div class="modal-footer">
</div>
......@@ -739,7 +739,7 @@
<!-- 修改成功 -->
<!-- 修改失敗 -->
<div class="modal fade" id="FailModal" tabindex="-1" aria-labelledby="FailModalModal"
<div class="modal fade" id="FailModal" tabindex="-1" aria-labelledby="FailModal"
aria-hidden="true">
<div class="modal-dialog success modal-dialog-centered" role="document">
<div class="modal-content">
......@@ -820,7 +820,7 @@
</button>
</div>
<div class="modal-body Addcont">
<form>
<div>
<div class="form-group row">
<label class="col-lg-3 col-sm-4 col-12 pl-0">姓名</label>
......@@ -980,7 +980,7 @@
</div>
</div>
</form>
</div>
<div class="modal-footer">
</div>
......@@ -1001,7 +1001,7 @@
</button>
</div>
<div class="modal-body Addcont">
<form>
<div>
<div class="form-group row">
<label class="col-lg-3 col-sm-4 col-12 pl-0">ID</label>
......@@ -1170,7 +1170,7 @@
</div>
</div>
</form>
</div>
<div class="modal-footer">
</div>
......@@ -1193,7 +1193,7 @@
</button>
</div>
<div class="modal-body Addcont">
<form>
<div>
<div class="form-group row">
<label class="col-lg-3 col-sm-4 col-12 pl-0">角色名稱</label>
......@@ -1256,7 +1256,7 @@
</div>
</div>
</form>
</div>
<div class="modal-footer">
</div>
......@@ -1277,7 +1277,7 @@
</button>
</div>
<div class="modal-body Addcont">
<form>
<div>
<div class="form-group row">
<label class="col-lg-3 col-sm-4 col-12 pl-0">角色名稱</label>
......@@ -1340,7 +1340,7 @@
</div>
</div>
</form>
</div>
<div class="modal-footer">
</div>
......@@ -1350,39 +1350,6 @@
<!--編輯角色 -->
<!-- <div class="modal fade" id="confirmBackToCalendarMgnt" tabindex="-1" aria-labelledby="confirmBackToStudentMgnt" aria-hidden="true">
<div class="modal-dialog modal-sm0 modal-dialog-centered0 modal-adminSchool modal-message">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<form>
<div class="row row-noMargin">
<div class="col-12 col-noPadding text-center">
<p>是否返回?</p>
<div class="submitBlock">
<div class="d-flex justify-content-around">
<button type="button" class="btn btn-hard btn-normalWidth btn-lightGrey-hollow" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-hard btn-normalWidth btn-lightGrey-hollow" onclick="window.location.href='adminSchool-calendarMgnt_withData.html'">確認</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div> -->
<!-- js files -->
......@@ -1400,7 +1367,7 @@
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<script src="js/sortable.min.js"></script>
......@@ -1487,24 +1454,6 @@
</script>
<script>
// 修正打開新的modal並關閉上一個modal時,modal內容高度超過螢幕時scrollbar不會出現的問題...
$(function(){
// 使用bootstrap modal的shown.bs.modal這個event就可以顯示scrollbar
$('.modal').on('shown.bs.modal', function () {
$('body').addClass('modal-open');
})
$(".modal [data-toggle='modal']").click(function(){
$(this).closest(".modal").modal('hide');
// 修正關閉新modal時,modal scrollbar位置會留下寬度17px空白的問題
$('body').css("overflow","hidden").css("padding-right","0");
});
});
</script>
</body>
......
// 修正打開新的modal並關閉上一個modal時,modal內容高度超過螢幕時scrollbar不會出現的問題...
$(function(){
// 使用bootstrap modal的shown.bs.modal這個event就可以顯示scrollbar
$('.modal').on('shown.bs.modal', function () {
$('body').addClass('modal-open');
})
$(".modal [data-toggle='modal']").click(function(){
$(this).closest(".modal").modal('hide');
// 修正關閉新modal時,modal scrollbar位置會留下寬度17px空白的問題
$('body').css("overflow","hidden").css("padding-right","0");
});
//modal 縮小視窗時,畫面置中
$('#AddSuccessModal').on('show.bs.modal', function () {
$('#AddSuccessModal').addClass('d-flex justify-content-center');
});
$('#SuccessModal').on('show.bs.modal', function () {
$('#SuccessModal').addClass('d-flex justify-content-center');
});
$('#StopSuccessModal').on('show.bs.modal', function () {
$('#StopSuccessModal').addClass('d-flex justify-content-center');
});
$('#FailModal').on('show.bs.modal', function () {
$('#FailModal').addClass('d-flex justify-content-center');
});
$('#EditSuccessModal').on('show.bs.modal', function () {
$('#EditSuccessModal').addClass('d-flex justify-content-center');
});
$('#confirmBackToCalendarMgnt').on('show.bs.modal', function () {
$('#confirmBackToCalendarMgnt').addClass('d-flex justify-content-center');
});
$('#AddSuccessModal').on('hidden.bs.modal', function () {
$('#AddSuccessModal').removeClass('d-flex justify-content-center');
})
$('#SuccessModal').on('hidden.bs.modal', function () {
$('#SuccessModal').removeClass('d-flex justify-content-center');
})
$('#StopSuccessModal').on('hidden.bs.modal', function () {
$('#StopSuccessModal').removeClass('d-flex justify-content-center');
})
$('#FailModal').on('hidden.bs.modal', function () {
$('#FailModal').removeClass('d-flex justify-content-center');
})
$('#EditSuccessModal').on('hidden.bs.modal', function () {
$('#EditSuccessModal').removeClass('d-flex justify-content-center');
})
$('#confirmBackToCalendarMgnt').on('hidden.bs.modal', function () {
$('#confirmBackToCalendarMgnt').removeClass('d-flex justify-content-center');
})
});
\ No newline at end of file
......@@ -28,9 +28,9 @@
<img src="images/pic-login.png" class="img-fluid">
</div>
<div class="col-lg-5 col-md-6 col-sm-6 col-12">
<form>
<div class="login-title">
<img src="images/logo.svg" class="img-fluid">
<img src="images/logo.svg" class="img-fluid NB-show">
<div class="topic">訂閱管理後台</div>
</div>
<div class="form-group row">
......@@ -47,7 +47,7 @@
<button type="button" class="btn btn-wt mr-3" data-dismiss="modal">清除</button>
<button type="button" class="btn btn-wt blue" onclick="window.location.href='welcome.html'">登入</button>
</div>
</form>
</div>
......@@ -77,7 +77,7 @@
</button>
</div>
<div class="modal-body password">
<form>
<div class="form-group row">
<label class="col-4">舊密碼</span>
<input type="text" class="form-control form-control-sm col-8" name="systemAdminAccount" value="">
......@@ -111,7 +111,7 @@
</div>
</div>
</div> -->
</form>
</div>
<div class="modal-footer">
</div>
......@@ -133,7 +133,7 @@
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
......
......@@ -53,10 +53,10 @@
<!-- <div class="item-bg"></div> -->
</li>
<li>
<a href="#" class="items"><img src="images/icon/side-HRM.svg">教育平台管理</a>
<a href="edu-manage.html" class="items active"><img src="images/icon/side-HRM.svg">教育平台管理</a>
</li>
<li>
<a href="#" class="items"><img src="images/icon/side-member.svg">HRMS管理</a>
<a href="HRMS-manage.html" class="items"><img src="images/icon/side-member.svg">HRMS管理</a>
</li>
<div class="version">目前版本:V 0.0.1</div>
</ul>
......@@ -120,7 +120,7 @@
</button>
</div>
<div class="modal-body password">
<form>
<div class="row form-group">
<span class="col-4">舊密碼</span>
<input type="text" class="form-control form-control-sm col-8" name="systemAdminAccount"
......@@ -157,7 +157,7 @@
</div>
</div>
</div> -->
</form>
</div>
<div class="modal-footer">
</div>
......@@ -192,7 +192,7 @@
<!-- 修改成功 -->
<!-- 修改失敗 -->
<div class="modal fade" id="FailModal" tabindex="-1" aria-labelledby="FailModalModal"
<div class="modal fade" id="FailModal" tabindex="-1" aria-labelledby="FailModal"
aria-hidden="true">
<div class="modal-dialog success modal-dialog-centered" role="document">
<div class="modal-content">
......@@ -234,10 +234,13 @@
<!-- <div class="item-bg"></div> -->
</li>
<li>
<a href="#" class="items"><img src="images/icon/side-HRM.svg">教育平台管理</a>
<a href="edu-manage.html" class="items"><img src="images/icon/side-HRM.svg">教育平台管理</a>
</li>
<li>
<a href="#" class="items"><img src="images/icon/side-member.svg">HRMS管理</a>
<a href="HRMS-manage.html" class="items"><img src="images/icon/side-member.svg">HRMS管理</a>
</li>
<li>
<a href="account.html" class="items"><img src="images/icon/icon-setting.svg">帳號設定</a>
</li>
</ul>
</div>
......@@ -255,10 +258,6 @@
<!-- js files -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- <script type="text/javascript" src="js/popper.min.js"></script> -->
......@@ -275,7 +274,7 @@
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<script src="js/sortable.min.js"></script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment